Spaces:

samirerty
/

anycoder-2f40e309

Running

File size: 27,729 Bytes

<!DOCTYPE html>
<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>