diff --git a/index.html b/index.html index e469563..9d8b002 100644 --- a/index.html +++ b/index.html @@ -200,7 +200,7 @@
אפליקציית מובייל

בריאלי

-

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

+

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

@@ -319,7 +319,7 @@
-
+
0 + פרויקטים הושלמו @@ -435,7 +435,7 @@
-
+

גילוי והבנה

@@ -443,7 +443,7 @@
-
+

אסטרטגיה ותכנון

@@ -451,7 +451,7 @@
-
+

עיצוב ויצירה

@@ -459,7 +459,7 @@
-
+

פיתוח והטמעה

@@ -467,7 +467,7 @@
-
+

השקה וליווי

@@ -542,7 +542,7 @@ - צרו קשר דרך הטופס + support@emilion.co.il
-
+ + + + + +
diff --git a/script.js b/script.js index 29b3dc9..8cdfa52 100644 --- a/script.js +++ b/script.js @@ -51,29 +51,41 @@ window.addEventListener('scroll', () => { } }); -menuToggle.addEventListener('click', () => { +function toggleMobileMenu() { + const isOpen = mobileMenu.classList.contains('active'); + menuToggle.classList.toggle('active'); mobileMenu.classList.toggle('active'); - document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : ''; -}); + + // Update ARIA attributes + menuToggle.setAttribute('aria-expanded', !isOpen); + mobileMenu.setAttribute('aria-hidden', isOpen); + + document.body.style.overflow = !isOpen ? 'hidden' : ''; +} + +function closeMobileMenu() { + menuToggle.classList.remove('active'); + mobileMenu.classList.remove('active'); + menuToggle.setAttribute('aria-expanded', 'false'); + mobileMenu.setAttribute('aria-hidden', 'true'); + document.body.style.overflow = ''; +} + +menuToggle.addEventListener('click', toggleMobileMenu); mobileLinks.forEach(link => { - link.addEventListener('click', () => { - menuToggle.classList.remove('active'); - mobileMenu.classList.remove('active'); - document.body.style.overflow = ''; - }); + link.addEventListener('click', closeMobileMenu); }); // Reveal on Scroll const reveals = document.querySelectorAll('.reveal'); const revealObserver = new IntersectionObserver((entries) => { - entries.forEach((entry, index) => { + entries.forEach((entry) => { if (entry.isIntersecting) { - setTimeout(() => { - entry.target.classList.add('visible'); - }, index * 100); + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); } }); }, { @@ -116,38 +128,80 @@ if (statsSection) { statsObserver.observe(statsSection); } -// Form Handling +// Form Handling with actual submission const contactForm = document.getElementById('contactForm'); if (contactForm) { - contactForm.addEventListener('submit', (e) => { - e.preventDefault(); + const submitBtn = contactForm.querySelector('button[type="submit"]'); + const originalBtnHTML = submitBtn.innerHTML; + + // Client-side validation + function validateForm() { + let isValid = true; + const requiredFields = contactForm.querySelectorAll('[required]'); - const btn = contactForm.querySelector('button[type="submit"]'); - const originalText = btn.innerHTML; - - btn.innerHTML = 'שולח...'; - btn.disabled = true; - - setTimeout(() => { - btn.innerHTML = 'נשלח בהצלחה! ✓'; - btn.style.background = 'var(--color-success)'; + requiredFields.forEach(field => { + const errorSpan = field.parentElement.querySelector('.form-error'); + field.classList.remove('error'); + if (errorSpan) errorSpan.textContent = ''; - setTimeout(() => { - btn.innerHTML = originalText; - btn.style.background = ''; - btn.disabled = false; - contactForm.reset(); - }, 3000); - }, 1500); + if (!field.value.trim()) { + isValid = false; + field.classList.add('error'); + if (errorSpan) errorSpan.textContent = 'שדה חובה'; + } else if (field.type === 'email' && !isValidEmail(field.value)) { + isValid = false; + field.classList.add('error'); + if (errorSpan) errorSpan.textContent = 'כתובת אימייל לא תקינה'; + } + }); + + return isValid; + } + + function isValidEmail(email) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + } + + contactForm.addEventListener('submit', (e) => { + if (!validateForm()) { + e.preventDefault(); + return; + } + + // Show loading state but let the form submit naturally + submitBtn.innerHTML = 'שולח...'; + submitBtn.disabled = true; + }); + + // Real-time validation on blur + contactForm.querySelectorAll('input, textarea').forEach(field => { + field.addEventListener('blur', () => { + if (field.hasAttribute('required')) { + const errorSpan = field.parentElement.querySelector('.form-error'); + field.classList.remove('error'); + if (errorSpan) errorSpan.textContent = ''; + + if (!field.value.trim()) { + field.classList.add('error'); + if (errorSpan) errorSpan.textContent = 'שדה חובה'; + } else if (field.type === 'email' && !isValidEmail(field.value)) { + field.classList.add('error'); + if (errorSpan) errorSpan.textContent = 'כתובת אימייל לא תקינה'; + } + } + }); }); } // Smooth Scroll for Navigation Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { + const href = this.getAttribute('href'); + if (href === '#') return; + e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); + const target = document.querySelector(href); if (target) { const navHeight = nav.offsetHeight; const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight; @@ -160,7 +214,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { }); // Parallax effect on hero orbs -const orbs = document.querySelectorAll('.gradient-orb'); +const orbs = document.querySelectorAll('.hero-bg .gradient-orb'); if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) { window.addEventListener('scroll', () => { diff --git a/style.css b/style.css index a0e4741..1d9a1c0 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ --color-bg: #0a0a0f; --color-bg-alt: #12121a; --color-text: #f0f0f5; - --color-text-muted: #b0b0c5; + --color-text-muted: #9ca3b0; --color-primary: #6366f1; --color-secondary: #ec4899; --color-accent: #f59e0b; @@ -448,7 +448,7 @@ button, input, textarea { .hero-title { font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 900; - line-height: 1.1; + line-height: 1.2; margin-bottom: var(--space-md); } @@ -514,6 +514,12 @@ button, input, textarea { outline-offset: 3px; } +.btn-primary:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; +} + .btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); @@ -535,7 +541,7 @@ button, input, textarea { position: absolute; bottom: var(--space-md); inset-inline-start: 50%; - transform: translateX(-50%); + transform: translateX(50%); display: flex; flex-direction: column; align-items: center; @@ -544,8 +550,8 @@ button, input, textarea { font-size: 0.8rem; } -[dir="rtl"] .scroll-indicator { - transform: translateX(50%); +[dir="ltr"] .scroll-indicator { + transform: translateX(-50%); } .scroll-line { @@ -689,7 +695,6 @@ button, input, textarea { .work-card:hover, .work-card:focus-within { - transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.1); } @@ -920,7 +925,6 @@ button, input, textarea { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: var(--space-sm); - max-width: 45ch; } .work-tags { @@ -1343,7 +1347,7 @@ button, input, textarea { display: flex; flex-direction: column; gap: var(--space-sm); - margin-bottom: var(--space-lg); + margin-bottom: var(--space-md); } .contact-detail { @@ -1366,6 +1370,33 @@ button, input, textarea { height: 100%; } +.contact-email-link { + color: var(--color-text); + transition: var(--transition); + position: relative; +} + +.contact-email-link::after { + content: ''; + position: absolute; + bottom: -2px; + inset-inline-start: 0; + width: 0; + height: 1px; + background: var(--color-primary); + transition: var(--transition); +} + +.contact-email-link:hover, +.contact-email-link:focus { + color: var(--color-primary); +} + +.contact-email-link:hover::after, +.contact-email-link:focus::after { + width: 100%; +} + .contact-cta { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)); border: 1px solid rgba(255, 255, 255, 0.1); @@ -1401,7 +1432,7 @@ button, input, textarea { font-size: 0.9rem; font-weight: 500; margin-bottom: var(--space-xs); - color: var(--color-text-muted); + color: var(--color-text); } .form-group .required {