diff --git a/index.html b/index.html new file mode 100644 index 0000000..8864c9c --- /dev/null +++ b/index.html @@ -0,0 +1,320 @@ + + + + + + + סלון 'שחר' | עיצוב שיער בחולון + + + + + + + + + + + + + + + +
+ +
+

מעצב שיער פרטי בחולון

+

+ השיער שלך + בידיים הכי טובות +

+

יחס אישי, מקצועיות ותוצאות מדויקות. מתספורת קלאסית ועד לצביעה מורכבת — כל לקוח מקבל את מלוא תשומת הלב.

+
+ קביעת תור + 054-560-8880 +
+
+
+ +
+
+
+ מה אני מציע +

השירותים שלי

+
+
+
+ +

תספורות

+

תספורות גברים, נשים וילדים. מקלאסי ועד טרנדי — כל סגנון, כל אורך, תוצאה מושלמת.

+
    +
  • תספורת גברים
    • +
  • תספורת נשים
    • +
  • תספורת ילדים
    • +
  • פייד ועיצוב זקן
    • +
+
+
+
פופולרי
+ +

צביעה

+

צבעים איכותיים מהמותגים המובילים. בלונד, אומברה, בלאיאז׳ וכל גוון שתחלמו עליו.

+
    +
  • צבע מלא
    • +
  • גוונים והבהרות
    • +
  • אומברה ובלאיאז׳
    • +
  • תיקון צבע
    • +
+
+
+ +

עיצוב שיער

+

עיצוב לאירועים מיוחדים, החלקות, תלתלים וטיפולי שיער מתקדמים.

+
    +
  • החלקה ברזילאית
    • +
  • החלקת קראטין
    • +
  • תסרוקות ערב
    • +
  • טיפולי שיער
    • +
+
+
+
+

מחירון מלא ופרטים נוספים — צרו קשר לייעוץ אישי ללא התחייבות

+
+
+
+ + + +
+
+
+
+
+ בואו נדבר +

קבעו תור עכשיו

+
+

מוזמנים ליצור קשר לקביעת תור או לכל שאלה. אני כאן בשבילכם.

+
+ + + 054-560-8880 + +
+ + חולון (הכתובת תינתן בתיאום תור) +
+
+ + א׳–ה׳: 9:00–20:00 | ו׳: 8:00–14:00 +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

הטופס לבקשת תור בלבד. אאשר את התור בהודעה חוזרת.

+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..1c46e87 --- /dev/null +++ b/script.js @@ -0,0 +1,169 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Reveal on scroll + if (!prefersReducedMotion) { + const revealElements = document.querySelectorAll('.reveal'); + + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -30px 0px' + }); + + revealElements.forEach(el => revealObserver.observe(el)); + } else { + document.querySelectorAll('.reveal').forEach(el => { + el.classList.add('revealed'); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + const nav = document.querySelector('.nav'); + const navHeight = nav ? nav.offsetHeight : 0; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + } + }); + }); + + // Form handling + const form = document.querySelector('.contact__form'); + if (form) { + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const formData = new FormData(form); + const data = Object.fromEntries(formData); + + // Clear previous errors + clearFormErrors(); + + // Basic validation + let hasErrors = false; + + if (!data.name || data.name.trim().length < 2) { + showFieldError('name', 'אנא הזינו שם מלא'); + hasErrors = true; + } + + // Phone validation (Israeli format) + const phoneRegex = /^0[0-9]{8,9}$/; + const cleanPhone = data.phone ? data.phone.replace(/[-\s]/g, '') : ''; + if (!phoneRegex.test(cleanPhone)) { + showFieldError('phone', 'אנא הזינו מספר טלפון תקין'); + hasErrors = true; + } + + if (hasErrors) return; + + // Simulate form submission + const submitBtn = form.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + + setTimeout(() => { + showFormMessage('תודה! קיבלתי את הפנייה ואחזור אליכם בהקדם.', 'success'); + form.reset(); + submitBtn.textContent = originalText; + submitBtn.disabled = false; + }, 800); + }); + } + + function showFieldError(fieldId, message) { + const field = document.getElementById(fieldId); + if (!field) return; + + field.style.borderColor = '#e57373'; + + const errorEl = document.createElement('span'); + errorEl.className = 'field-error'; + errorEl.textContent = message; + errorEl.style.cssText = ` + display: block; + color: #e57373; + font-size: 0.8rem; + margin-top: 0.25rem; + `; + + field.parentNode.appendChild(errorEl); + } + + function clearFormErrors() { + const errors = form.querySelectorAll('.field-error'); + errors.forEach(el => el.remove()); + + const inputs = form.querySelectorAll('.form-input'); + inputs.forEach(input => { + input.style.borderColor = ''; + }); + + const msg = form.querySelector('.form-message'); + if (msg) msg.remove(); + } + + function showFormMessage(message, type) { + const existingMsg = document.querySelector('.form-message'); + if (existingMsg) existingMsg.remove(); + + const msgEl = document.createElement('div'); + msgEl.className = `form-message form-message--${type}`; + msgEl.textContent = message; + msgEl.setAttribute('role', 'alert'); + msgEl.style.cssText = ` + padding: 1rem; + margin-bottom: 1rem; + border-radius: 8px; + font-size: 0.9rem; + text-align: center; + background: ${type === 'success' ? 'rgba(129, 199, 132, 0.1)' : 'rgba(229, 115, 115, 0.1)'}; + color: ${type === 'success' ? '#81c784' : '#e57373'}; + border: 1px solid ${type === 'success' ? '#81c784' : '#e57373'}; + `; + + form.insertBefore(msgEl, form.firstChild); + + if (type === 'success') { + setTimeout(() => { + if (msgEl.parentNode) msgEl.remove(); + }, 6000); + } + } + + // Nav background on scroll + const nav = document.querySelector('.nav'); + if (nav) { + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 50) { + nav.style.background = 'rgba(15, 15, 15, 0.98)'; + } else { + nav.style.background = 'rgba(15, 15, 15, 0.9)'; + } + }, { passive: true }); + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..24ac956 --- /dev/null +++ b/style.css @@ -0,0 +1,764 @@ +:root { + --color-bg: #0f0f0f; + --color-bg-elevated: #1a1a1a; + --color-bg-card: #222222; + --color-text: #f5f5f5; + --color-text-muted: #b0b0b0; + --color-accent: #d4b896; + --color-accent-dark: #a08050; + --color-accent-light: #e8d5c4; + --color-border: #333333; + --color-focus: #d4b896; + --font-body: 'Heebo', sans-serif; + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + --space-2xl: 6rem; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } +} + +body { + font-family: var(--font-body); + font-weight: 400; + font-size: 1rem; + line-height: 1.7; + color: var(--color-text); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + right: var(--space-md); + z-index: 1000; + padding: var(--space-sm) var(--space-md); + background: var(--color-accent); + color: var(--color-bg); + text-decoration: none; + font-weight: 500; + border-radius: var(--radius-md); + transition: top var(--transition); +} + +.skip-link:focus { + top: var(--space-sm); +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* Typography */ +h1, h2, h3, h4 { + font-family: var(--font-body); + font-weight: 500; + line-height: 1.2; +} + +/* Focus styles */ +:focus-visible { + outline: 2px solid var(--color-focus); + outline-offset: 2px; +} + +/* Navigation */ +.nav { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + background: rgba(15, 15, 15, 0.9); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--color-border); +} + +.nav__container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin-inline: auto; + padding: var(--space-sm) var(--space-md); +} + +.nav__logo { + font-family: var(--font-body); + font-size: 1.5rem; + font-weight: 600; + color: var(--color-accent); + text-decoration: none; + transition: opacity var(--transition); +} + +.nav__logo:hover { + opacity: 0.8; +} + +.nav__links { + display: none; + list-style: none; + gap: var(--space-lg); +} + +@media (min-width: 768px) { + .nav__links { + display: flex; + } +} + +.nav__links a { + color: var(--color-text); + text-decoration: none; + font-weight: 400; + font-size: 0.9rem; + padding: var(--space-xs); + border-radius: var(--radius-sm); + transition: color var(--transition), background-color var(--transition); +} + +.nav__links a:hover { + color: var(--color-accent); +} + +.nav__links a:focus-visible { + background-color: rgba(212, 184, 150, 0.1); +} + +.nav__phone { + display: flex; + align-items: center; + gap: var(--space-xs); + color: var(--color-accent); + text-decoration: none; + font-weight: 500; + font-size: 0.9rem; + padding: var(--space-xs); + border-radius: var(--radius-sm); + transition: opacity var(--transition); +} + +.nav__phone:hover { + opacity: 0.8; +} + +.nav__phone span { + display: none; +} + +@media (min-width: 480px) { + .nav__phone span { + display: inline; + } +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + flex-direction: column; + justify-content: center; + padding: calc(var(--space-2xl) + 60px) var(--space-md) var(--space-2xl); + overflow: hidden; +} + +.hero__bg { + position: absolute; + inset: 0; + z-index: -1; +} + +.hero__gradient { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse at 30% 20%, rgba(212, 184, 150, 0.12) 0%, transparent 50%), + radial-gradient(ellipse at 70% 80%, rgba(160, 128, 80, 0.08) 0%, transparent 50%); +} + +.hero__pattern { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + opacity: 0.5; +} + +.hero__content { + position: relative; + z-index: 1; + max-width: 600px; +} + +.hero__subtitle { + display: inline-block; + font-size: 0.9rem; + font-weight: 500; + color: var(--color-accent); + letter-spacing: 0.05em; + margin-bottom: var(--space-sm); +} + +.hero__title { + font-size: clamp(2.25rem, 7vw, 4rem); + font-weight: 600; + line-height: 1.15; + margin-bottom: var(--space-md); +} + +.hero__title-line { + display: block; +} + +.hero__title-line--accent { + color: var(--color-accent); + font-weight: 500; +} + +.hero__desc { + font-size: 1.125rem; + color: var(--color-text-muted); + max-width: 480px; + margin-bottom: var(--space-lg); +} + +.hero__cta { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-sm) var(--space-lg); + font-family: var(--font-body); + font-size: 1rem; + font-weight: 500; + text-decoration: none; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition); +} + +.btn--primary { + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); + color: var(--color-bg); +} + +.btn--primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(212, 184, 150, 0.3); +} + +.btn--outline { + background: transparent; + color: var(--color-accent); + border: 1px solid var(--color-accent); +} + +.btn--outline:hover { + background: var(--color-accent); + color: var(--color-bg); +} + +.btn--full { + width: 100%; +} + +/* Section Header */ +.section-header { + text-align: center; + margin-bottom: var(--space-xl); +} + +.section-header--start { + text-align: start; +} + +.section-tag { + display: inline-block; + font-size: 0.8rem; + font-weight: 500; + color: var(--color-accent); + letter-spacing: 0.1em; + margin-bottom: var(--space-xs); +} + +.section-title { + font-size: clamp(1.75rem, 5vw, 2.5rem); + font-weight: 600; +} + +/* Services */ +.services { + padding: var(--space-2xl) 0; + background: var(--color-bg-elevated); +} + +.services__grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +@media (min-width: 600px) { + .services__grid { + grid-template-columns: repeat(2, 1fr); + } + + .service-card--featured { + grid-column: 1 / -1; + } +} + +@media (min-width: 900px) { + .services__grid { + grid-template-columns: 1fr 1.3fr 1fr; + } + + .service-card--featured { + grid-column: auto; + grid-row: auto; + } +} + +.services__note { + text-align: center; + margin-top: var(--space-xl); + padding: var(--space-md); + background: var(--color-bg-card); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); +} + +.services__note p { + color: var(--color-text-muted); + font-size: 0.95rem; + margin: 0; +} + +.service-card { + position: relative; + background: var(--color-bg-card); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-lg); + transition: all var(--transition); +} + +.service-card:hover { + transform: translateY(-4px); + border-color: var(--color-accent); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); +} + +.service-card--featured { + background: linear-gradient(135deg, rgba(212, 184, 150, 0.1), rgba(160, 128, 80, 0.05)); + border-color: var(--color-accent); + padding: var(--space-xl) var(--space-lg); +} + +@media (min-width: 900px) { + .service-card--featured { + transform: scale(1.02); + } + + .service-card--featured:hover { + transform: scale(1.02) translateY(-4px); + } +} + +.service-card__badge { + position: absolute; + top: var(--space-sm); + inset-inline-start: var(--space-sm); + background: var(--color-accent); + color: var(--color-bg); + font-size: 0.7rem; + font-weight: 600; + padding: 0.25rem 0.75rem; + border-radius: 100px; +} + +.service-card__icon { + width: 60px; + height: 60px; + color: var(--color-accent); + margin-bottom: var(--space-md); +} + +.service-card__icon svg { + width: 100%; + height: 100%; +} + +.service-card__title { + font-size: 1.4rem; + font-weight: 600; + margin-bottom: var(--space-sm); +} + +.service-card__desc { + color: var(--color-text-muted); + font-size: 0.95rem; + margin-bottom: var(--space-md); +} + +.service-card__list { + list-style: none; +} + +.service-card__list li { + position: relative; + padding-inline-start: var(--space-md); + padding-block: 0.25rem; + font-size: 0.9rem; + color: var(--color-text-muted); +} + +.service-card__list li::before { + content: ''; + position: absolute; + inset-inline-start: 0; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background: var(--color-accent); + border-radius: 50%; +} + +/* Gallery */ +.gallery { + padding: var(--space-2xl) 0; +} + +.gallery__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-sm); +} + +@media (min-width: 600px) { + .gallery__grid { + grid-template-columns: repeat(4, 1fr); + gap: var(--space-md); + } +} + +.gallery__item { + position: relative; + border-radius: var(--radius-md); + overflow: hidden; + aspect-ratio: 1; + margin: 0; +} + +.gallery__item--tall { + grid-row: span 2; + aspect-ratio: auto; +} + +.gallery__item--wide { + grid-column: span 2; + aspect-ratio: 2 / 1; +} + +.gallery__placeholder { + position: relative; + width: 100%; + height: 100%; + background: var(--color-bg-card); + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--transition); +} + +.gallery__item:hover .gallery__placeholder { + transform: scale(1.05); +} + +.gallery__svg { + width: 100%; + height: 100%; + object-fit: cover; +} + +.gallery__label { + position: absolute; + bottom: var(--space-sm); + inset-inline: var(--space-sm); + background: rgba(15, 15, 15, 0.9); + color: var(--color-text); + font-size: 0.8rem; + font-weight: 500; + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-sm); + text-align: center; + opacity: 0; + transform: translateY(10px); + transition: all var(--transition); +} + +.gallery__item:hover .gallery__label { + opacity: 1; + transform: translateY(0); +} + +/* Contact */ +.contact { + padding: var(--space-2xl) 0; + background: var(--color-bg-elevated); +} + +.contact__wrapper { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); +} + +@media (min-width: 768px) { + .contact__wrapper { + grid-template-columns: 1fr 1.2fr; + align-items: start; + gap: var(--space-2xl); + } +} + +.contact__desc { + color: var(--color-text-muted); + margin-bottom: var(--space-lg); +} + +.contact__details { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.contact__link { + display: flex; + align-items: center; + gap: var(--space-sm); + color: var(--color-text); + text-decoration: none; + font-weight: 400; + padding: var(--space-xs); + margin-inline-start: calc(var(--space-xs) * -1); + border-radius: var(--radius-sm); + transition: color var(--transition), background-color var(--transition); +} + +a.contact__link:hover { + color: var(--color-accent); + background-color: rgba(212, 184, 150, 0.05); +} + +.contact__link svg { + flex-shrink: 0; + color: var(--color-accent); +} + +.contact__form { + background: var(--color-bg-card); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-lg); +} + +.form-group { + margin-bottom: var(--space-md); +} + +.form-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-muted); + margin-bottom: var(--space-xs); +} + +.form-label .required { + color: var(--color-accent); +} + +.form-input { + width: 100%; + padding: var(--space-sm); + font-family: var(--font-body); + font-size: 1rem; + color: var(--color-text); + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + transition: border-color var(--transition), box-shadow var(--transition); +} + +.form-input:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: 0 0 0 3px rgba(212, 184, 150, 0.15); +} + +.form-input::placeholder { + color: var(--color-text-muted); + opacity: 0.7; +} + +.form-select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b0b0b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left 1rem center; + padding-inline-end: var(--space-sm); +} + +.form-textarea { + resize: vertical; + min-height: 100px; +} + +.form-note { + margin-top: var(--space-sm); + font-size: 0.8rem; + color: var(--color-text-muted); + text-align: center; +} + +/* Footer */ +.footer { + padding: var(--space-xl) 0 var(--space-md); + border-top: 1px solid var(--color-border); +} + +.footer__content { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-lg); + text-align: center; + padding-bottom: var(--space-lg); + border-bottom: 1px solid var(--color-border); +} + +@media (min-width: 768px) { + .footer__content { + flex-direction: row; + justify-content: space-between; + text-align: start; + } +} + +.footer__logo { + font-family: var(--font-body); + font-size: 2rem; + font-weight: 600; + color: var(--color-accent); +} + +.footer__tagline { + font-size: 0.875rem; + color: var(--color-text-muted); +} + +.footer__nav { + display: flex; + gap: var(--space-lg); +} + +.footer__nav a { + color: var(--color-text-muted); + text-decoration: none; + font-size: 0.9rem; + padding: var(--space-xs); + border-radius: var(--radius-sm); + transition: color var(--transition), background-color var(--transition); +} + +.footer__nav a:hover { + color: var(--color-accent); +} + +.footer__nav a:focus-visible { + background-color: rgba(212, 184, 150, 0.1); +} + +.footer__phone { + color: var(--color-accent); + text-decoration: none; + font-weight: 500; + font-size: 1.125rem; + padding: var(--space-xs); + border-radius: var(--radius-sm); + transition: opacity var(--transition); +} + +.footer__phone:hover { + opacity: 0.8; +} + +.footer__bottom { + padding-top: var(--space-md); + text-align: center; +} + +.footer__bottom p { + font-size: 0.8rem; + color: var(--color-text-muted); +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + .reveal { + opacity: 1; + transform: none; + } +}