client-sites/hair-on-top
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial AI-generated site

Browse Source
This commit is contained in:
ccadmingit1
2026-08-19 15:58:15 +00:00
parent 0c46503e5d
commit 584bf880db
3 changed files with 1539 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+317
View File
@@ -0,0 +1,317 @@
<!doctype html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hair On Top | מספרה מעצבת בחולון</title>
<meta name="description" content="Hair On Top - מספרה מובילה בחולון. תספורות טרנדיות, צביעות, החלקות והבהרות לגברים ונשים. הזמינו תור עכשיו.">
<meta property="og:title" content="Hair On Top | מספרה מעצבת בחולון">
<meta property="og:description" content="תספורות טרנדיות, צביעות, החלקות והבהרות לגברים ונשים בחולון והסביבה">
<meta property="og:type" content="website">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%23D4AF37' rx='12' width='100' height='100'/><text x='50' y='68' text-anchor='middle' font-size='60' fill='%23000'>H</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600&family=Secular+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<header class="header">
<nav class="nav">
<a href="#hero" class="logo">
<span class="logo-text" lang="en">Hair On Top</span>
<span class="logo-accent">✂</span>
</a>
<ul class="nav-links">
<li><a href="#services">שירותים</a></li>
<li><a href="#gallery">גלריה</a></li>
<li><a href="#about">אודות</a></li>
<li><a href="#contact">צור קשר</a></li>
</ul>
<a href="tel:0545411291" class="nav-cta">הזמנת תור</a>
<button class="nav-toggle" aria-label="פתח תפריט" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
</nav>
</header>
<main id="main-content">
<section id="hero" class="hero">
<div class="hero-bg">
<div class="hero-pattern"></div>
<div class="hero-gradient"></div>
</div>
<div class="hero-content">
<p class="hero-tag">מספרה מעצבת בחולון</p>
<h1 class="hero-title">
<span class="hero-title-line">מקצועיות</span>
<span class="hero-title-line hero-title-accent">שרואים בשיער</span>
</h1>
<p class="hero-desc">תספורות, צביעות, החלקות והבהרות — עם תשומת לב לכל פרט. לגברים ולנשים בחולון והסביבה.</p>
<div class="hero-actions">
<a href="tel:0545411291" class="btn btn-primary">
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
</svg>
קבעו תור עכשיו
</a>
<a href="#services" class="btn btn-secondary">לשירותים שלנו</a>
</div>
</div>
<div class="hero-scroll" aria-hidden="true">
<span>גלילה</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M19 12l-7 7-7-7"/>
</svg>
</div>
</section>
<section id="services" class="services">
<div class="container">
<header class="section-header">
<p class="section-tag">השירותים שלנו</p>
<h2 class="section-title">מה אנחנו עושים הכי טוב</h2>
</header>
<div class="services-grid">
<article class="service-card reveal">
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<circle cx="32" cy="20" r="12" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M20 52c0-8 5-14 12-14s12 6 12 14" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="44" y1="16" x2="56" y2="8" stroke="currentColor" stroke-width="2"/>
<line x1="44" y1="24" x2="56" y2="32" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<h3 class="service-title">תספורות טרנדיות</h3>
<p class="service-desc">תספורות עדכניות לגברים ונשים בהתאמה אישית. אנחנו עוקבים אחרי הטרנדים העולמיים ומתאימים את הסגנון בדיוק אליכם.</p>
<span class="service-tag">גברים ונשים</span>
</article>
<article class="service-card reveal">
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="16" y="12" width="32" height="44" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="32" cy="32" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="32" y1="40" x2="32" y2="48" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<h3 class="service-title">צביעות מקצועיות</h3>
<p class="service-desc">צביעה מלאה, גוונים, אומברה ובלאיאז׳. אנחנו משתמשים בחומרים איכותיים ששומרים על בריאות השיער.</p>
<span class="service-tag">כל סוגי הצבע</span>
</article>
<article class="service-card service-card-featured reveal">
<div class="service-badge">הכי מבוקש</div>
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<path d="M12 32 C12 16 24 8 32 8 C40 8 52 16 52 32 C52 48 40 56 32 56 C24 56 12 48 12 32" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="32" y1="16" x2="32" y2="48" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 2"/>
<circle cx="32" cy="32" r="4" fill="currentColor"/>
</svg>
</div>
<h3 class="service-title">החלקות שיער</h3>
<p class="service-desc">החלקה ברזילאית, יפנית וקראטין. תוצאות חלקות ומבריקות שנשמרות לאורך זמן.</p>
<span class="service-tag">תוצאות לטווח ארוך</span>
</article>
<article class="service-card reveal">
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<circle cx="32" cy="32" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M32 12 L36 28 L32 32 L28 28 Z" fill="currentColor"/>
<circle cx="32" cy="32" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
</svg>
</div>
<h3 class="service-title">הבהרות</h3>
<p class="service-desc">הבהרות מקצועיות, היילייטס ובייביליס. יוצרים עומק וממד טבעי בשיער שלכם.</p>
<span class="service-tag">מראה טבעי</span>
</article>
</div>
</div>
</section>
<section id="gallery" class="gallery">
<div class="container">
<header class="section-header">
<p class="section-tag">מהעבודות שלנו</p>
<h2 class="section-title">התוצאות מדברות</h2>
</header>
<div class="gallery-grid">
<figure class="gallery-item gallery-item-tall reveal" aria-label="תספורת גברים">
<div class="gallery-visual" style="--hue: 45;">
<div class="gallery-pattern gallery-pattern-1"></div>
<span class="gallery-label">תספורת גברים</span>
</div>
</figure>
<figure class="gallery-item reveal" aria-label="צביעה אומברה">
<div class="gallery-visual" style="--hue: 35;">
<div class="gallery-pattern gallery-pattern-2"></div>
<span class="gallery-label">צביעה אומברה</span>
</div>
</figure>
<figure class="gallery-item reveal" aria-label="החלקה ברזילאית">
<div class="gallery-visual" style="--hue: 50;">
<div class="gallery-pattern gallery-pattern-3"></div>
<span class="gallery-label">החלקה ברזילאית</span>
</div>
</figure>
<figure class="gallery-item gallery-item-wide reveal" aria-label="בלאיאז׳">
<div class="gallery-visual" style="--hue: 40;">
<div class="gallery-pattern gallery-pattern-4"></div>
<span class="gallery-label">בלאיאז׳</span>
</div>
</figure>
<figure class="gallery-item reveal" aria-label="תספורת נשים">
<div class="gallery-visual" style="--hue: 55;">
<div class="gallery-pattern gallery-pattern-5"></div>
<span class="gallery-label">תספורת נשים</span>
</div>
</figure>
<figure class="gallery-item reveal" aria-label="הבהרות">
<div class="gallery-visual" style="--hue: 42;">
<div class="gallery-pattern gallery-pattern-6"></div>
<span class="gallery-label">הבהרות</span>
</div>
</figure>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="about-grid">
<div class="about-visual reveal">
<div class="about-shape-container">
<div class="about-icon-scissors">
<svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<circle cx="25" cy="30" r="12"/>
<circle cx="25" cy="70" r="12"/>
<line x1="35" y1="35" x2="75" y2="65"/>
<line x1="35" y1="65" x2="75" y2="35"/>
</svg>
</div>
</div>
<div class="about-badge">
<span class="about-badge-number">10+</span>
<span class="about-badge-text">שנות ניסיון</span>
</div>
</div>
<div class="about-content reveal">
<p class="section-tag">אודות המספרה</p>
<h2 class="section-title"><span lang="en">Hair On Top</span></h2>
<p class="about-text">אנחנו מספרה מעצבת בלב חולון, מתמחים ביצירת מראה עכשווי ואורבני שמתאים בדיוק לאישיות שלכם. הצוות המקצועי שלנו משלב ניסיון רב עם עדכנות מתמדת בטרנדים העולמיים.</p>
<p class="about-text">אנחנו מאמינים שתספורת טובה היא לא רק עניין של מראה — היא עניין של ביטחון עצמי. לכן אנחנו מקדישים זמן להקשיב, להבין ולהתאים את הסגנון בדיוק לצרכים שלכם.</p>
<ul class="about-features">
<li class="about-feature">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<polyline points="20 6 9 17 4 12"/>
</svg>
<span>חומרים איכותיים</span>
</li>
<li class="about-feature">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<polyline points="20 6 9 17 4 12"/>
</svg>
<span>צוות מקצועי</span>
</li>
<li class="about-feature">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<polyline points="20 6 9 17 4 12"/>
</svg>
<span>אווירה נעימה</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<div class="cta-content reveal">
<h2 class="cta-title">מוכנים לשינוי?</h2>
<p class="cta-desc">התקשרו עכשיו ונקבע לכם תור</p>
<a href="tel:0545411291" class="btn btn-primary btn-large">
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
</svg>
054-541-1291
</a>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<header class="section-header">
<p class="section-tag">צור קשר</p>
<h2 class="section-title">איך מגיעים אלינו</h2>
</header>
<div class="contact-grid">
<a href="tel:0545411291" class="contact-card contact-card-primary reveal">
<div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
</svg>
</div>
<h3 class="contact-label">להזמנת תור</h3>
<span class="contact-value">054-541-1291</span>
<span class="contact-cta-text">לחצו להתקשר</span>
</a>
<div class="contact-info reveal">
<div class="contact-info-item">
<div class="contact-icon-small">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<div>
<h3 class="contact-info-label">אזור שירות</h3>
<p class="contact-info-value">חולון והסביבה</p>
<p class="contact-info-note">בת ים, ראשון לציון, אזור דן</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon-small">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<div>
<h3 class="contact-info-label">שעות פעילות</h3>
<p class="contact-info-value">ראשון–חמישי</p>
<p class="contact-info-note">התקשרו לתיאום מראש</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<span class="footer-logo" lang="en">Hair On Top</span>
<p class="footer-tagline">מספרה מעצבת בחולון</p>
</div>
<nav class="footer-nav" aria-label="קישורים מהירים">
<a href="#services">שירותים</a>
<a href="#gallery">גלריה</a>
<a href="#about">אודות</a>
<a href="#contact">צור קשר</a>
</nav>
<a href="tel:0545411291" class="footer-cta">054-541-1291</a>
</div>
<div class="footer-bottom">
<p>© 2024 <span lang="en">Hair On Top</span>. כל הזכויות שמורות.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
script.js
+107
View File
@@ -0,0 +1,107 @@
(function() {
'use strict';
// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Mobile Navigation
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelector('.nav-links');
if (navToggle && navLinks) {
navToggle.addEventListener('click', function() {
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
this.classList.toggle('active');
navLinks.classList.toggle('active');
document.body.style.overflow = navLinks.classList.contains('active') ? 'hidden' : '';
});
// Close menu when clicking a link
navLinks.querySelectorAll('a').forEach(function(link) {
link.addEventListener('click', function() {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.classList.remove('active');
navLinks.classList.remove('active');
document.body.style.overflow = '';
});
});
// Close menu on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && navLinks.classList.contains('active')) {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.classList.remove('active');
navLinks.classList.remove('active');
document.body.style.overflow = '';
navToggle.focus();
}
});
}
// Header scroll effect
const header = document.querySelector('.header');
function handleScroll() {
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
}
window.addEventListener('scroll', handleScroll, { passive: true });
// Reveal animations
if (!prefersReducedMotion) {
const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('active');
revealObserver.unobserve(entry.target);
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});
revealElements.forEach(function(el) {
revealObserver.observe(el);
});
} else {
// If reduced motion is preferred, show all elements immediately
document.querySelectorAll('.reveal').forEach(function(el) {
el.classList.add('active');
});
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const target = document.querySelector(targetId);
if (target) {
e.preventDefault();
const headerHeight = header.offsetHeight;
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
if (prefersReducedMotion) {
window.scrollTo(0, targetPosition);
} else {
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
}
});
});
})();
style.css
+1115
View File
File diff suppressed because it is too large Load Diff