Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ScentFeedback - بازخورد ناشناس</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| /* Custom CSS for Glassmorphism and Animations */ | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| background-color: #0f172a; | |
| overflow-x: hidden; | |
| } | |
| /* Animated Gradient Background */ | |
| .gradient-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); | |
| background-size: 400% 400%; | |
| animation: gradient 15s ease infinite; | |
| opacity: 0.15; | |
| } | |
| .gradient-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, rgba(168,85,247,0.2) 25%, transparent 70%); | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) rotate(0deg); } | |
| 33% { transform: translate(30px, -50px) rotate(10deg); } | |
| 66% { transform: translate(-20px, 20px) rotate(-5deg); } | |
| } | |
| /* Glassmorphism Classes */ | |
| .glass { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .glass-strong { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| } | |
| .glass-card { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255,255,255,0.18); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.1)); | |
| box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.4); | |
| border-color: rgba(255,255,255,0.3); | |
| } | |
| /* Text Gradients */ | |
| .text-gradient { | |
| background: linear-gradient(to right, #818cf8, #c084fc, #f472b6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Animations */ | |
| .fade-in-up { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; | |
| } | |
| .fade-in-up.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s ease-out forwards; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(255,255,255,0.05); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,0.2); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255,255,255,0.3); | |
| } | |
| /* Input Styles */ | |
| .glass-input { | |
| background: rgba(255,255,255,0.05); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| color: white; | |
| transition: all 0.3s; | |
| } | |
| .glass-input:focus { | |
| background: rgba(255,255,255,0.1); | |
| border-color: rgba(167, 139, 250, 0.5); | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2); | |
| } | |
| /* Button Shine Effect */ | |
| .btn-shine { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-shine::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); | |
| transform: rotate(30deg); | |
| transition: all 0.6s; | |
| opacity: 0; | |
| } | |
| .btn-shine:hover::after { | |
| opacity: 1; | |
| left: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white min-h-screen relative"> | |
| <!-- Background Elements --> | |
| <div class="gradient-bg"></div> | |
| <div class="fixed top-20 right-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div> | |
| <div class="fixed bottom-20 left-20 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div> | |
| <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 glass-strong border-b border-white/10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="wind" class="w-8 h-8 text-indigo-400"></i> | |
| <span class="font-bold text-xl tracking-tight">ScentFlow</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-indigo-300 hover:text-white transition-colors border border-indigo-500/30 rounded-full px-3 py-1 glass hover:bg-indigo-500/20"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| <div class="md:hidden text-xs text-indigo-300 border border-indigo-500/30 rounded-full px-2 py-1"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <!-- Hero Section --> | |
| <section class="text-center mb-20 fade-in-up"> | |
| <h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight"> | |
| بازخورد ناشناس،<br> | |
| <span class="text-gradient">محترمانه و سریع</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-300 max-w-2xl mx-auto mb-8 leading-relaxed"> | |
| بوی خوب را تشویق کنید، بوی بد را بدون دردسر و به صورت کاملاً ناشناس گزارش دهید. | |
| راهی جدید برای بهبود فضای مشترک. | |
| </p> | |
| <div class="flex justify-center gap-4"> | |
| <button onclick="scrollToSection('selection')" class="glass-card px-8 py-4 rounded-full font-bold text-lg btn-shine group"> | |
| شروع کنید | |
| <i data-lucide="arrow-down" class="inline-block mr-2 w-5 h-5 group-hover:translate-y-1 transition-transform"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Selection Section --> | |
| <section id="selection" class="mb-20 fade-in-up"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-white/90">نوع بازخورد خود را انتخاب کنید</h2> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <!-- Good Scent Card --> | |
| <button onclick="selectType('good')" class="glass-card p-8 rounded-3xl text-center group relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| <div class="relative z-10"> | |
| <div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-emerald-400/30 to-teal-400/30 flex items-center justify-center border border-emerald-400/30 group-hover:scale-110 transition-transform duration-300"> | |
| <i data-lucide="sparkles" class="w-10 h-10 text-emerald-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-emerald-100">گزارش بوی خوب</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed"> | |
| عطر، غذا، یا هر بو خوشایند دیگری را تشویق کنید. لبخند را به لب کسی بیاورید. | |
| </p> | |
| </div> | |
| </button> | |
| <!-- Bad Scent Card --> | |
| <button onclick="selectType('bad')" class="glass-card p-8 rounded-3xl text-center group relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-rose-500/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| <div class="relative z-10"> | |
| <div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-rose-400/30 to-orange-400/30 flex items-center justify-center border border-rose-400/30 group-hover:scale-110 transition-transform duration-300"> | |
| <i data-lucide="alert-triangle" class="w-10 h-10 text-rose-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-rose-100">اطلاعرسانی بوی بد</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed"> | |
| بدون بیاحترامی و به صورت محرمانه، در مورد بوهای نامطبوع اطلاعرسانی کنید. | |
| </p> | |
| </div> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Form Section (Hidden by default) --> | |
| <section id="formSection" class="hidden max-w-2xl mx-auto mb-20 fade-in-up"> | |
| <div class="glass-strong rounded-3xl p-8 md:p-12 border border-white/20 shadow-2xl relative overflow-hidden"> | |
| <!-- Decorative gradient --> | |
| <div class="absolute -top-24 -right-24 w-48 h-48 bg-purple-500/30 rounded-full blur-3xl"></div> | |
| <div class="absolute -bottom-24 -left-24 w-48 h-48 bg-blue-500/30 rounded-full blur-3xl"></div> | |
| <button onclick="closeForm()" class="absolute top-4 left-4 p-2 rounded-full hover:bg-white/10 transition-colors"> | |
| <i data-lucide="x" class="w-6 h-6 text-gray-400"></i> | |
| </button> | |
| <div class="relative z-10"> | |
| <div class="text-center mb-8"> | |
| <div id="formIcon" class="w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-4"></div> | |
| <h2 id="formTitle" class="text-2xl font-bold mb-2"></h2> | |
| <p class="text-gray-400 text-sm">اطلاعات زیر را پر کنید. گیرنده هویت شما را نخواهد دانست.</p> | |
| </div> | |
| <form id="feedbackForm" onsubmit="handleSubmit(event)" class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">ایمیل یا شماره موبایل گیرنده</label> | |
| <input type="text" id="recipient" required placeholder="example@email.com یا 09xxxxxxxxx" | |
| class="w-full px-4 py-3 rounded-xl glass-input text-right placeholder-gray-500"> | |
| <p id="recipientError" class="text-rose-400 text-xs mt-1 hidden">لطفاً یک ایمیل یا شماره موبایل معتبر وارد کنید.</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">نوع بو</label> | |
| <select id="scentType" onchange="handleScentChange()" class="w-full px-4 py-3 rounded-xl glass-input text-right cursor-pointer"> | |
| <!-- Options populated by JS --> | |
| </select> | |
| </div> | |
| <div id="customScentContainer" class="hidden"> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">توضیح بو (اختیاری)</label> | |
| <input type="text" id="customScent" placeholder="مثال: عطر گل یاس..." | |
| class="w-full px-4 py-3 rounded-xl glass-input text-right placeholder-gray-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">پیام تکمیلی (اختیاری)</label> | |
| <textarea id="message" rows="3" placeholder="پیام کوتاه خود را اینجا بنویسید..." | |
| class="w-full px-4 py-3 rounded-xl glass-input text-right placeholder-gray-500 resize-none"></textarea> | |
| </div> | |
| <button type="submit" id="submitBtn" class="w-full py-4 rounded-xl font-bold text-lg bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-indigo-500/30 flex items-center justify-center gap-2"> | |
| <span>ارسال ناشناس</span> | |
| <i data-lucide="send" class="w-5 h-5"></i> | |
| </button> | |
| </form> | |
| <!-- Success Message --> | |
| <div id="successMessage" class="hidden text-center py-12"> | |
| <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-emerald-500/20 flex items-center justify-center border border-emerald-400/50 animate-bounce"> | |
| <i data-lucide="check" class="w-10 h-10 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-3">بازخورد با موفقیت ارسال شد!</h3> | |
| <p class="text-gray-400 mb-6">از اینکه به بهبود فضای مشترک کمک کردید، سپاسگزاریم.</p> | |
| <button onclick="resetForm()" class="px-6 py-3 rounded-xl glass-card text-sm hover:bg-white/10 transition-colors"> | |
| ارسال بازخورد جدید | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it Works --> | |
| <section class="mb-20 fade-in-up"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-white/90">چگونه کار میکند؟</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="glass p-6 rounded-2xl text-center group hover:border-indigo-400/50 transition-colors"> | |
| <div class="w-12 h-12 mx-auto mb-4 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-300 font-bold text-xl border border-indigo-500/30">۱</div> | |
| <h3 class="font-bold mb-2 text-lg">انتخاب نوع</h3> | |
| <p class="text-sm text-gray-400">بوی خوب یا بد را انتخاب کنید. رابط کاربری ساده ما راهنمای شماست.</p> | |
| </div> | |
| <div class="glass p-6 rounded-2xl text-center group hover:border-purple-400/50 transition-colors"> | |
| <div class="w-12 h-12 mx-auto mb-4 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-300 font-bold text-xl border border-purple-500/30">۲</div> | |
| <h3 class="font-bold mb-2 text-lg">اطلاعات گیرنده</h3> | |
| <p class="text-sm text-gray-400">ایمیل یا شماره موبایل فرد را وارد کنید. هویت شما کاملاً مخفی است.</p> | |
| </div> | |
| <div class="glass p-6 rounded-2xl text-center group hover:border-pink-400/50 transition-colors"> | |
| <div class="w-12 h-12 mx-auto mb-4 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-300 font-bold text-xl border border-pink-500/30">۳</div> | |
| <h3 class="font-bold mb-2 text-lg">ارسال ناشناس</h3> | |
| <p class="text-sm text-gray-400">با یک کلیک بازخورد را بفرستید. پیام شما به صورت رمزنگاری شده ارسال میشود.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="glass-strong border-t border-white/10 mt-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <i data-lucide="wind" class="w-6 h-6 text-indigo-400"></i> | |
| <span class="font-bold text-lg">ScentFlow</span> | |
| </div> | |
| <p class="text-gray-400 text-sm leading-relaxed max-w-sm"> | |
| پلتفرم ارسال بازخورد ناشناس با رویکردی محترمانه و مدرن. ما اعتقاد داریم ارتباط سازنده باید بدون ترس باشد. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-white/90">لینکهای سریع</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-indigo-400 transition-colors">صفحه اصلی</a></li> | |
| <li><a href="#" class="hover:text-indigo-400 transition-colors">چگونه کار میکند</a></li> | |
| <li><a href="#" class="hover:text-indigo-400 transition-colors">سوالات متداول</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-white/90">قانونی</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-indigo-400 transition-colors">شرایط استفاده</a></li> | |
| <li><a href="#" class="hover:text-indigo-400 transition-colors">حریم خصوصی</a></li> | |
| <li><a href="#" class="hover:text-indigo-400 transition-colors">پشتیبانی</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 mt-8 pt-8 text-center text-sm text-gray-500"> | |
| <p>© ۲۰۲۴ ScentFlow. تمامی حقوق محفوظ است.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Data for scent types | |
| const scentOptions = { | |
| good: [ | |
| { value: '', label: 'انتخاب کنید...' }, | |
| { value: 'perfume', label: 'عطر و ادکلن' }, | |
| { value: 'flowers', label: 'گل و گیاه' }, | |
| { value: 'food', label: 'غذا و خوراکی' }, | |
| { value: 'clean', label: 'بو تمیز و پاکیزگی' }, | |
| { value: 'coffee', label: 'قهوه' }, | |
| { value: 'other', label: 'سایر (توضیح دهید)' } | |
| ], | |
| bad: [ | |
| { value: '', label: 'انتخاب کنید...' }, | |
| { value: 'sweat', label: 'عرق و بدن' }, | |
| { value: 'food', label: 'باقیمانده غذا' }, | |
| { value: 'smoke', label: 'دود سیگار' }, | |
| { value: 'chemical', label: 'مواد شیمیایی' }, | |
| { value: 'trash', label: 'زباله' }, | |
| { value: 'other', label: 'سایر (توضیح دهید)' } | |
| ] | |
| }; | |
| let currentType = null; | |
| // Scroll Animation Observer | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el)); | |
| // Functions | |
| function scrollToSection(id) { | |
| document.getElementById(id).scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function selectType(type) { | |
| currentType = type; | |
| const formSection = document.getElementById('formSection'); | |
| const formTitle = document.getElementById('formTitle'); | |
| const formIcon = document.getElementById('formIcon'); | |
| const scentSelect = document.getElementById('scentType'); | |
| // Populate select options | |
| scentSelect.innerHTML = ''; | |
| scentOptions[type].forEach(opt => { | |
| const option = document.createElement('option'); | |
| option.value = opt.value; | |
| option.textContent = opt.label; | |
| option.className = 'bg-slate-800 text-white'; | |
| scentSelect.appendChild(option); | |
| }); | |
| // Set header and icon based on type | |
| if (type === 'good') { | |
| formTitle.textContent = 'گزارش بوی خوب'; | |
| formTitle.className = 'text-2xl font-bold mb-2 text-emerald-300'; | |
| formIcon.className = 'w-16 h-16 mx-auto rounded-2xl bg-emerald-500/20 flex items-center justify-center border border-emerald-400/30 mb-4'; | |
| formIcon.innerHTML = '<i data-lucide="sparkles" class="w-8 h-8 text-emerald-400"></i>'; | |
| } else { | |
| formTitle.textContent = 'اطلاعرسانی بوی بد'; | |
| formTitle.className = 'text-2xl font-bold mb-2 text-rose-300'; | |
| formIcon.className = 'w-16 h-16 mx-auto rounded-2xl bg-rose-500/20 flex items-center justify-center border border-rose-400/30 mb-4'; | |
| formIcon.innerHTML = '<i data-lucide="alert-triangle" class="w-8 h-8 text-rose-400"></i>'; | |
| } | |
| // Show form | |
| formSection.classList.remove('hidden'); | |
| formSection.classList.add('slide-in'); | |
| scrollToSection('formSection'); | |
| // Re-init icons for new elements | |
| lucide.createIcons(); | |
| } | |
| function closeForm() { | |
| document.getElementById('formSection').classList.add('hidden'); | |
| document.getElementById('formSection').classList.remove('slide-in'); | |
| currentType = null; | |
| } | |
| function handleScentChange() { | |
| const select = document.getElementById('scentType'); | |
| const customContainer = document.getElementById('customScentContainer'); | |
| if (select.value === 'other') { | |
| customContainer.classList.remove('hidden'); | |
| } else { | |
| customContainer.classList.add('hidden'); | |
| } | |
| } | |
| function validateInput(value) { | |
| // Simple validation for email or phone | |
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| const phoneRegex = /^09[0-9]{9}$/; | |
| return emailRegex.test(value) || phoneRegex.test(value); | |
| } | |
| function handleSubmit(e) { | |
| e.preventDefault(); | |
| const recipient = document.getElementById('recipient').value.trim(); | |
| const recipientError = document.getElementById('recipientError'); | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const form = document.getElementById('feedbackForm'); | |
| const successMessage = document.getElementById('successMessage'); | |
| // Validation | |
| if (!validateInput(recipient)) { | |
| recipientError.classList.remove('hidden'); | |
| document.getElementById('recipient').classList.add('border-rose-500'); | |
| return; | |
| } else { | |
| recipientError.classList.add('hidden'); | |
| document.getElementById('recipient').classList.remove('border-rose-500'); | |
| } | |
| // Loading state | |
| const originalBtnContent = submitBtn.innerHTML; | |
| submitBtn.disabled = true; | |
| submitBtn.innerHTML = '<div class="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>'; | |
| submitBtn.classList.add('opacity-75', 'cursor-not-allowed'); | |
| // Simulate API call | |
| setTimeout(() => { | |
| form.style.display = 'none'; | |
| successMessage.classList.remove('hidden'); | |
| successMessage.classList.add('slide-in'); | |
| // Reset button | |
| submitBtn.disabled = false; | |
| submitBtn.innerHTML = originalBtnContent; | |
| submitBtn.classList.remove('opacity-75', 'cursor-not-allowed'); | |
| lucide.createIcons(); | |
| }, 1500); | |
| } | |
| function resetForm() { | |
| document.getElementById('feedbackForm').reset(); | |
| document.getElementById('feedbackForm').style.display = 'block'; | |
| document.getElementById('successMessage').classList.add('hidden'); | |
| document.getElementById('customScentContainer').classList.add('hidden'); | |
| closeForm(); | |
| scrollToSection('selection'); | |
| } | |
| // Add input validation listener | |
| document.getElementById('recipient').addEventListener('input', function(e) { | |
| const error = document.getElementById('recipientError'); | |
| if (validateInput(e.target.value.trim())) { | |
| error.classList.add('hidden'); | |
| e.target.classList.remove('border-rose-500'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |