Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | |
| <title>FelixioTech | Start Your Project</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Orbitron:wght@400;500;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> | |
| <style> | |
| /* ===== GLOBAL STYLES ===== */ | |
| :root { | |
| --primary: #6a11cb; | |
| --secondary: #2575fc; | |
| --accent: #00c9ff; | |
| --accent2: #ff00cc; | |
| --dark: #0a0a1a; | |
| --darker: #050515; | |
| --light: #f8f9ff; | |
| --gray: #8a8da8; | |
| --success: #00e676; | |
| --warning: #ffca28; | |
| --error: #ff5252; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| perspective: 1000px; | |
| } | |
| .particles-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -3; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 30px; | |
| } | |
| /* Header & Navigation */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 25px 0; | |
| z-index: 100; | |
| transition: all 0.4s ease; | |
| backdrop-filter: blur(12px); | |
| background: rgba(10, 10, 26, 0.85); | |
| border-bottom: 1px solid rgba(106, 17, 203, 0.3); | |
| box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| header.scrolled { | |
| padding: 15px 0; | |
| background: rgba(10, 10, 26, 0.98); | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| text-decoration: none; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .logo-icon { | |
| width: 55px; | |
| height: 55px; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| animation: pulse 3s infinite alternate; | |
| box-shadow: 0 0 25px rgba(106, 17, 203, 0.6); | |
| } | |
| .logo-icon .f-letter { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 700; | |
| font-size: 32px; | |
| color: white; | |
| position: relative; | |
| } | |
| .logo-text { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 700; | |
| font-size: 32px; | |
| background: linear-gradient(to right, var(--accent), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: 1px; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 35px; | |
| } | |
| nav a { | |
| color: var(--light); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 18px; | |
| position: relative; | |
| padding: 8px 0; | |
| transition: color 0.3s ease; | |
| } | |
| nav a:hover, nav a.active { | |
| color: var(--accent); | |
| text-shadow: 0 0 15px rgba(0, 201, 255, 0.7); | |
| } | |
| nav a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 3px; | |
| background: linear-gradient(to right, var(--primary), var(--accent)); | |
| transition: width 0.4s ease; | |
| border-radius: 3px; | |
| } | |
| nav a:hover::after, nav a.active::after { | |
| width: 100%; | |
| } | |
| .cta-button { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: white; | |
| border: none; | |
| padding: 14px 32px; | |
| border-radius: 35px; | |
| font-weight: 600; | |
| font-size: 18px; | |
| cursor: pointer; | |
| transition: all 0.4s ease; | |
| box-shadow: 0 5px 20px rgba(106, 17, 203, 0.5); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(106, 17, 203, 0.8); | |
| } | |
| /* Menu toggle for mobile */ | |
| .menu-toggle { | |
| display: none; | |
| font-size: 28px; | |
| color: white; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .getstarted-hero { | |
| min-height: 45vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 180px 0 80px; | |
| position: relative; | |
| background: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1470&q=80') center/cover no-repeat fixed; | |
| } | |
| .getstarted-hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(10,10,26,0.9), rgba(5,5,21,0.85)); | |
| z-index: 0; | |
| } | |
| .getstarted-hero .container { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| } | |
| .getstarted-hero h1 { | |
| font-size: 4rem; | |
| font-family: 'Orbitron', sans-serif; | |
| background: linear-gradient(to right, var(--accent), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 20px; | |
| } | |
| .getstarted-hero p { | |
| font-size: 1.3rem; | |
| color: var(--gray); | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| /* Onboarding Form Section */ | |
| .onboarding { | |
| padding: 80px 0 120px; | |
| position: relative; | |
| } | |
| .form-container { | |
| max-width: 850px; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.06); | |
| backdrop-filter: blur(15px); | |
| border-radius: 35px; | |
| border: 1px solid rgba(106, 17, 203, 0.4); | |
| padding: 50px 55px; | |
| transition: all 0.4s ease; | |
| } | |
| .form-container:hover { | |
| border-color: var(--accent); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| } | |
| .form-group { | |
| margin-bottom: 30px; | |
| position: relative; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 12px; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| color: var(--light); | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 16px 20px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(106, 17, 203, 0.5); | |
| border-radius: 20px; | |
| color: var(--light); | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| background: rgba(255,255,255,0.12); | |
| box-shadow: 0 0 15px rgba(0,201,255,0.2); | |
| } | |
| .form-group textarea { | |
| height: 130px; | |
| resize: vertical; | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 25px; | |
| } | |
| .error-message { | |
| color: var(--error); | |
| font-size: 0.85rem; | |
| margin-top: 8px; | |
| display: none; | |
| } | |
| .form-group.error input, | |
| .form-group.error select, | |
| .form-group.error textarea { | |
| border-color: var(--error) ; | |
| } | |
| .form-group.error .error-message { | |
| display: block; | |
| } | |
| .form-group.success input, | |
| .form-group.success select, | |
| .form-group.success textarea { | |
| border-color: var(--success) ; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| padding: 18px; | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| border: none; | |
| border-radius: 50px; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| margin-top: 20px; | |
| letter-spacing: 1px; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(106,17,203,0.7); | |
| } | |
| .info-note { | |
| text-align: center; | |
| margin-top: 30px; | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| .info-note i { | |
| color: var(--accent); | |
| margin-right: 6px; | |
| } | |
| /* ===== CUSTOM DROPDOWN STYLES (Budget & Project Type) ===== */ | |
| #budget, | |
| #projectType { | |
| appearance: none; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2300c9ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); | |
| background-repeat: no-repeat; | |
| background-position: right 20px center; | |
| background-size: 16px; | |
| cursor: pointer; | |
| } | |
| #budget:hover, | |
| #projectType:hover { | |
| background-color: rgba(0, 201, 255, 0.1); | |
| border-color: var(--accent); | |
| } | |
| #budget:focus, | |
| #projectType:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 10px rgba(0, 201, 255, 0.3); | |
| background-color: rgba(255,255,255,0.12); | |
| } | |
| #budget option, | |
| #projectType option { | |
| background: var(--dark); | |
| color: var(--light); | |
| padding: 12px; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: rgba(5, 5, 15, 0.98); | |
| padding: 80px 0 40px; | |
| border-top: 1px solid rgba(106, 17, 203, 0.3); | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 50px; | |
| margin-bottom: 60px; | |
| } | |
| .footer-logo p { | |
| color: var(--gray); | |
| line-height: 1.8; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 18px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| color: var(--gray); | |
| font-size: 22px; | |
| transition: 0.3s; | |
| } | |
| .social-links a:hover { | |
| color: var(--accent); | |
| } | |
| .footer-links h4 { | |
| font-size: 1.5rem; | |
| margin-bottom: 30px; | |
| font-family: 'Orbitron', sans-serif; | |
| background: linear-gradient(to right, var(--accent), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 18px; | |
| } | |
| .footer-links a { | |
| color: var(--gray); | |
| text-decoration: none; | |
| transition: 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .footer-links a:hover { | |
| color: var(--accent); | |
| transform: translateX(5px); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 40px; | |
| border-top: 1px solid rgba(106, 17, 203, 0.2); | |
| color: var(--gray); | |
| } | |
| /* Scroll to top */ | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 24px; | |
| cursor: pointer; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.4s ease; | |
| z-index: 99; | |
| box-shadow: 0 5px 20px rgba(106, 17, 203, 0.5); | |
| } | |
| .scroll-top.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .chat-bubble { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 30px; | |
| width: 70px; | |
| height: 70px; | |
| background: linear-gradient(135deg, var(--accent), var(--secondary)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 28px; | |
| cursor: pointer; | |
| z-index: 99; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(106, 17, 203, 0.7);} | |
| 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(106, 17, 203, 0);} | |
| 100% { transform: scale(0.95);} | |
| } | |
| @media (max-width: 992px) { | |
| nav ul { display: none; } | |
| .menu-toggle { display: block; } | |
| .form-container { padding: 35px 30px; } | |
| .form-row { grid-template-columns: 1fr; gap: 15px; } | |
| .getstarted-hero h1 { font-size: 2.8rem; } | |
| } | |
| @media (max-width: 768px) { | |
| .container { padding: 0 20px; } | |
| .form-container { padding: 30px 20px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="particles-bg" class="particles-bg"></div> | |
| <header id="header"> | |
| <div class="container header-container"> | |
| <a href="index.html" class="logo"> | |
| <div class="logo-icon"><span class="f-letter">F</span></div> | |
| <span class="logo-text">FELIXIOTECH</span> | |
| </a> | |
| <div class="menu-toggle" id="mobileMenuToggle"><i class="fas fa-bars"></i></div> | |
| <nav id="navbar"> | |
| <ul> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="services.html">Services</a></li> | |
| <li><a href="pricing.html">Pricing</a></li> | |
| <li><a href="portfolio.html">Portfolio</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <button class="cta-button" id="headerCta">Start Now</button> | |
| </div> | |
| </header> | |
| <section class="getstarted-hero"> | |
| <div class="container"> | |
| <h1>Launch Your Vision 🚀</h1> | |
| <p>Tell us about your project, and we’ll craft a custom roadmap — from concept to deployment, powered by FelixioTech innovation.</p> | |
| </div> | |
| </section> | |
| <section class="onboarding"> | |
| <div class="container"> | |
| <div class="form-container"> | |
| <form id="startupForm"> | |
| <div class="form-row"> | |
| <div class="form-group" id="fullnameGroup"> | |
| <label>Full Name *</label> | |
| <input type="text" id="fullname" placeholder="Alex Johnson"> | |
| <div class="error-message">Please enter your name.</div> | |
| </div> | |
| <div class="form-group" id="emailGroup"> | |
| <label>Email Address *</label> | |
| <input type="email" id="email" placeholder="hello@example.com"> | |
| <div class="error-message">Valid email required.</div> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group" id="companyGroup"> | |
| <label>Company / Organization</label> | |
| <input type="text" id="company" placeholder="Your startup or brand"> | |
| </div> | |
| <div class="form-group" id="budgetGroup"> | |
| <label>Estimated Budget (USD)</label> | |
| <select id="budget"> | |
| <option value="">Select range</option> | |
| <option value="<10k">Under $10k</option> | |
| <option value="10k-25k">$10k - $25k</option> | |
| <option value="25k-50k">$25k - $50k</option> | |
| <option value="50k+">$50k+</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-group" id="projectTypeGroup"> | |
| <label>Project Type *</label> | |
| <select id="projectType"> | |
| <option value="">Choose a service</option> | |
| <option value="Custom Software">Custom Software Development</option> | |
| <option value="Web App">Web Application</option> | |
| <option value="Mobile App">Mobile App (iOS/Android)</option> | |
| <option value="Cloud Solutions">Cloud & DevOps</option> | |
| <option value="UI/UX Design">UI/UX Design</option> | |
| <option value="Consulting">Technology Consulting</option> | |
| </select> | |
| <div class="error-message">Please select a project type.</div> | |
| </div> | |
| <div class="form-group" id="messageGroup"> | |
| <label>Tell us about your idea *</label> | |
| <textarea id="message" placeholder="Brief description, goals, timeline..."></textarea> | |
| <div class="error-message">Please describe your project.</div> | |
| </div> | |
| <button type="submit" class="submit-btn">Submit Request <i class="fas fa-paper-plane"></i></button> | |
| <div class="info-note"> | |
| <i class="fas fa-lock"></i> Your information is secure. We'll respond within 24 hours. | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <a href="index.html" class="logo" style="margin-bottom: 15px;"> | |
| <div class="logo-icon"><span class="f-letter">F</span></div> | |
| <span class="logo-text">FELIXIOTECH</span> | |
| </a> | |
| <p>Next-gen software solutions that drive digital transformation.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Explore</h4> | |
| <ul> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="services.html">Services</a></li> | |
| <li><a href="portfolio.html">Portfolio</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Support</h4> | |
| <ul> | |
| <li><a href="contact.html">Contact Us</a></li> | |
| <li><a href="get-started.html">Start a Project</a></li> | |
| <li><a href="contact.html">Support Portal</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 Felixio Technologies — Where ideas become digital reality.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <div class="scroll-top" id="scrollTop"><i class="fas fa-arrow-up"></i></div> | |
| <div class="chat-bubble" id="chatBubble"><i class="fas fa-comments"></i></div> | |
| <script> | |
| // Three.js particle background | |
| (function initParticles() { | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| const bgDiv = document.getElementById('particles-bg'); | |
| if (bgDiv) bgDiv.appendChild(renderer.domElement); | |
| const particlesGeometry = new THREE.BufferGeometry(); | |
| const particlesCount = 5000; | |
| const posArray = new Float32Array(particlesCount * 3); | |
| for (let i = 0; i < particlesCount * 3; i += 3) { | |
| posArray[i] = (Math.random() - 0.5) * 200; | |
| posArray[i+1] = (Math.random() - 0.5) * 120; | |
| posArray[i+2] = (Math.random() - 0.5) * 80; | |
| } | |
| particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); | |
| const particlesMaterial = new THREE.PointsMaterial({ color: 0x6a11cb, size: 0.12, transparent: true, opacity: 0.6 }); | |
| const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); | |
| scene.add(particlesMesh); | |
| camera.position.z = 25; | |
| function animateParticles() { | |
| requestAnimationFrame(animateParticles); | |
| particlesMesh.rotation.y += 0.002; | |
| particlesMesh.rotation.x += 0.001; | |
| renderer.render(scene, camera); | |
| } | |
| animateParticles(); | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| })(); | |
| // GSAP animations for form container | |
| gsap.from(".form-container", { | |
| scrollTrigger: { trigger: ".onboarding", start: "top 80%" }, | |
| opacity: 0, | |
| y: 60, | |
| duration: 1, | |
| ease: "power3.out" | |
| }); | |
| // Header scroll effect | |
| const header = document.getElementById('header'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) header.classList.add('scrolled'); | |
| else header.classList.remove('scrolled'); | |
| const scrollBtn = document.getElementById('scrollTop'); | |
| if (window.scrollY > 400) scrollBtn.classList.add('visible'); | |
| else scrollBtn.classList.remove('visible'); | |
| }); | |
| document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })); | |
| document.getElementById('headerCta')?.addEventListener('click', () => { | |
| document.querySelector('.onboarding').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| document.getElementById('chatBubble')?.addEventListener('click', () => alert("💬 FelixioTech assistant: Ready to bring your ideas to life! Fill the form or email us.")); | |
| // Mobile menu toggle | |
| const toggleBtn = document.getElementById('mobileMenuToggle'); | |
| const navMenu = document.getElementById('navbar'); | |
| if (toggleBtn && navMenu) { | |
| toggleBtn.addEventListener('click', () => { | |
| const ul = navMenu.querySelector('ul'); | |
| if (ul.style.display === 'flex') ul.style.display = 'none'; | |
| else ul.style.display = 'flex'; | |
| }); | |
| } | |
| // Form validation and submission | |
| const form = document.getElementById('startupForm'); | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| let isValid = true; | |
| // Reset previous styles | |
| const groups = ['fullnameGroup', 'emailGroup', 'projectTypeGroup', 'messageGroup']; | |
| groups.forEach(id => { | |
| const group = document.getElementById(id); | |
| group.classList.remove('error', 'success'); | |
| }); | |
| // Full name | |
| const fullname = document.getElementById('fullname'); | |
| if (!fullname.value.trim()) { | |
| document.getElementById('fullnameGroup').classList.add('error'); | |
| isValid = false; | |
| } else { | |
| document.getElementById('fullnameGroup').classList.add('success'); | |
| } | |
| const email = document.getElementById('email'); | |
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| if (!emailRegex.test(email.value.trim())) { | |
| document.getElementById('emailGroup').classList.add('error'); | |
| isValid = false; | |
| } else { | |
| document.getElementById('emailGroup').classList.add('success'); | |
| } | |
| // Project type | |
| const projectType = document.getElementById('projectType'); | |
| if (!projectType.value) { | |
| document.getElementById('projectTypeGroup').classList.add('error'); | |
| isValid = false; | |
| } else { | |
| document.getElementById('projectTypeGroup').classList.add('success'); | |
| } | |
| // Message | |
| const message = document.getElementById('message'); | |
| if (!message.value.trim()) { | |
| document.getElementById('messageGroup').classList.add('error'); | |
| isValid = false; | |
| } else { | |
| document.getElementById('messageGroup').classList.add('success'); | |
| } | |
| if (isValid) { | |
| // Simulate submission with animation | |
| const btn = form.querySelector('.submit-btn'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-pulse"></i> Sending...'; | |
| btn.disabled = true; | |
| setTimeout(() => { | |
| btn.innerHTML = '<i class="fas fa-check"></i> Request Sent!'; | |
| gsap.to('.form-container', { opacity: 0.95, scale: 1.02, duration: 0.3, yoyo: true, repeat: 1 }); | |
| alert("✅ Thank you! Our team will reach out within 24 hours to discuss your project."); | |
| form.reset(); | |
| // Remove success classes after reset | |
| groups.forEach(id => document.getElementById(id)?.classList.remove('success', 'error')); | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| }, 1500); | |
| } else { | |
| // Shake effect on error | |
| gsap.to('.form-container', { x: 6, duration: 0.1, repeat: 4, x: 0, ease: "power1.inOut" }); | |
| } | |
| }); | |
| // Real-time validation for email field | |
| document.getElementById('email').addEventListener('input', function() { | |
| const group = document.getElementById('emailGroup'); | |
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| if (this.value && emailRegex.test(this.value)) group.classList.add('success'); | |
| else group.classList.remove('success'); | |
| if (group.classList.contains('error')) group.classList.remove('error'); | |
| }); | |
| document.getElementById('fullname').addEventListener('input', function() { | |
| if (this.value.trim()) document.getElementById('fullnameGroup').classList.add('success'); | |
| else document.getElementById('fullnameGroup').classList.remove('success'); | |
| }); | |
| document.getElementById('projectType').addEventListener('change', function() { | |
| if (this.value) document.getElementById('projectTypeGroup').classList.add('success'); | |
| else document.getElementById('projectTypeGroup').classList.remove('success'); | |
| }); | |
| document.getElementById('message').addEventListener('input', function() { | |
| if (this.value.trim()) document.getElementById('messageGroup').classList.add('success'); | |
| else document.getElementById('messageGroup').classList.remove('success'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |