Home / Widgets / test
Duplicate Snippet

Embed Snippet on Your Site

test

test

Code Preview
html
<div id="sh-strategy-app" class="sh-form-root" style="display: block !important; opacity: 1 !important; visibility: visible !important;">
    <!-- Tailwind & Fonts -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=Vazirmatn:wght@300;400;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            important: '#sh-strategy-app',
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'Vazirmatn', 'sans-serif'] },
                }
            }
        }
    </script>
    <style>
        .sh-form-root {
            font-family: 'Inter', 'Vazirmatn', sans-serif !important;
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            background: radial-gradient(circle at top right, #e0e7ff, #f8fafc), linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
            padding: 20px 0 60px 0 !important;
            color: #1e293b !important;
            line-height: 1.5 !important;
        }
        .sh-form-root label { 
            font-weight: 700 !important; 
            font-size: 0.8rem !important; 
            margin-bottom: 0.4rem !important; 
            display: block !important; 
            color: #475569 !important; 
            text-transform: uppercase !important; 
            letter-spacing: 0.025em !important;
        }
        .sh-input {
            width: 100% !important; 
            padding: 0.875rem 1.25rem !important; 
            border-radius: 1rem !important; 
            outline: none !important; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            border: 2px solid #e2e8f0 !important; 
            background: #ffffff !important; 
            color: #1e293b !important; 
            font-size: 0.95rem !important;
        }
        .sh-input:focus { border-color: #6366f1 !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important; }
        .step-content { display: none; }
        .step-content.active { display: block !important; animation: shSlideUp 0.4s ease-out; }
        @keyframes shSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .glass-card {
            background: rgba(255, 255, 255, 0.9) !important;
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.8) !important;
        }
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
            margin-top: 5px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        .checkbox-item:hover { border-color: #6366f1; background: #f8fafc; }
        #captcha-container {
            background: #f1f5f9;
            padding: 15px;
            border-radius: 1rem;
            margin-top: 20px;
            border: 2px dashed #cbd5e1;
        }
        @media (max-width: 640px) {
            .sh-title-text { font-size: 2.5rem !important; }
            .glass-card { padding: 1.25rem !important; border-radius: 1.5rem !important; }
        }
    </style>
    <div class="max-w-3xl mx-auto px-4" id="sh-main-content">
        <div class="text-center mb-6">
            <h1 class="sh-title-text text-5xl md:text-6xl font-black tracking-tighter mb-2 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 bg-clip-text text-transparent">
                RAHBORD CO
            </h1>
            <div class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">Strategy Hub</div>
        </div>
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
            <div class="w-full md:w-48 order-2 md:order-1">
                <div class="flex justify-between mb-1 text-[9px] font-black uppercase tracking-widest text-indigo-500">
                    <span id="stepIndicator">Step 1 of 3</span>
                    <span id="percentIndicator">33%</span>
                </div>
                <div class="w-full h-1.5 bg-white/50 rounded-full overflow-hidden shadow-sm">
                    <div id="shProgress" class="progress-bar h-full bg-gradient-to-r from-indigo-500 to-pink-500 w-1/3 transition-all duration-500"></div>
                </div>
            </div>
            <select id="shLang" onchange="updateUI(this.value)" class="glass-card border-none rounded-lg px-3 py-1.5 text-xs font-bold text-indigo-600 outline-none cursor-pointer shadow-sm order-1 md:order-2">
                <option value="en" selected>English</option>
                <option value="fa">فارسی</option>
                <option value="ar">العربية</option>
                <option value="tr">Türkçe</option>
                <option value="de">Deutsch</option>
                <option value="fr">Français</option>
                <option value="es">Español</option>
            </select>
        </div>
        <div class="glass-card p-6 md:p-10 rounded-[2rem] shadow-xl relative overflow-hidden">
            <form id="strategyForm" action="https://formspree.io/f/xwvnqpgb" method="POST">
                
                <!-- STEP 1: Identity -->
                <div class="step-content active" id="step1">
                    <h2 class="text-2xl font-black mb-6 text-slate-800" data-key="s1-title">Identity</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="md:col-span-2">
                            <label data-key="l-domain">Proposed Domain / Website URL</label>
                            <input type="text" name="website_url" required class="sh-input" placeholder="e.g. www.clientbrand.com">
                        </div>
                        <div class="md:col-span-1">
                            <label data-key="l-brand">Client Name</label>
                            <input type="text" name="brand_name" required class="sh-input">
                        </div>
                        <div class="md:col-span-1">
                            <label data-key="l-slogan">Brand Motto</label>
                            <input type="text" name="slogan" class="sh-input">
                        </div>
                        <div class="md:col-span-2">
                            <label data-key="l-target">Target Audience</label>
                            <textarea name="target_audience" rows="2" class="sh-input"></textarea>
                        </div>
                        <div>
                            <label data-key="l-tone">Tone of Voice</label>
                            <select name="tone" class="sh-input">
                                <option value="professional" data-key="o-pro">Professional</option>
                                <option value="friendly" data-key="o-friendly">Friendly</option>
                                <option value="luxury" data-key="o-luxury">Luxury</option>
                            </select>
                        </div>
                        <div>
                            <label data-key="l-colors">Color Vibes</label>
                            <input type="text" name="colors" class="sh-input">
                        </div>
                    </div>
                </div>
                <!-- STEP 2: Scope -->
                <div class="step-content" id="step2">
                    <h2 class="text-2xl font-black mb-6 text-slate-800" data-key="s2-title">Project Scope</h2>
                    <div class="space-y-5">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label data-key="l-product">Main Product/Service</label>
                                <input type="text" name="main_product" required class="sh-input">
                            </div>
                            <div>
                                <label data-key="l-need-sale">Need to sell products?</label>
                                <select name="needs_ecommerce" class="sh-input">
                                    <option value="yes" data-key="o-yes">Yes</option>
                                    <option value="no" data-key="o-no">No</option>
                                </select>
                            </div>
                        </div>
                        
                        <div>
                            <label data-key="l-payment">Preferred Payment Methods</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item"><input type="checkbox" name="pay_visa" value="Visa"> <span data-key="c-visa">Visa Card</span></label>
                                <label class="checkbox-item"><input type="checkbox" name="pay_paypal" value="PayPal"> <span data-key="c-paypal">PayPal</span></label>
                                <label class="checkbox-item"><input type="checkbox" name="pay_gate" value="Gateway"> <span data-key="c-gate">Local Gateways</span></label>
                            </div>
                        </div>
                        <div>
                            <label data-key="l-usp">Your Unique Values (USPs)</label>
                            <textarea name="usps" rows="2" class="sh-input"></textarea>
                        </div>
                    </div>
                </div>
                <!-- STEP 3: Channels & Bio -->
                <div class="step-content" id="step3">
                    <h2 class="text-2xl font-black mb-6 text-slate-800" data-key="s3-title">Channels & Bio</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="md:col-span-2">
                            <label data-key="l-bio">Biography / Resume Summary</label>
                            <textarea name="bio" rows="3" class="sh-input" data-placeholder-key="p-bio"></textarea>
                        </div>
                        <div>
                            <label data-key="l-email">Official Email</label>
                            <input type="email" name="email" required class="sh-input">
                        </div>
                        <div>
                            <label data-key="l-phone">WhatsApp / Phone</label>
                            <input type="tel" name="phone" required class="sh-input">
                        </div>
                    </div>
                    <!-- Simple Captcha -->
                    <div id="captcha-container" class="mt-6">
                        <label data-key="l-captcha">Security Check</label>
                        <div class="flex items-center gap-4">
                            <span id="captcha-text" class="text-xl font-bold bg-white px-4 py-2 rounded-lg border-2 border-indigo-200 tracking-widest italic select-none"></span>
                            <input type="text" id="captcha-input" required class="sh-input !w-32 text-center font-bold" placeholder="?">
                        </div>
                    </div>
                </div>
                <!-- Navigation -->
                <div class="mt-8 flex justify-between items-center">
                    <button type="button" id="prevBtn" onclick="moveStep(-1)" class="hidden font-bold text-slate-400 hover:text-indigo-600 text-sm" data-key="b-prev">Back</button>
                    <button type="button" id="nextBtn" onclick="moveStep(1)" class="ml-auto px-8 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl font-black shadow-lg hover:-translate-y-0.5 transition-all text-sm" data-key="b-next">Next Step</button>
                    <button type="submit" id="submitBtn" class="hidden ml-auto px-8 py-3 bg-gradient-to-r from-pink-500 to-rose-600 text-white rounded-xl font-black shadow-lg hover:scale-105 transition-all text-sm" data-key="b-finish">Complete</button>
                </div>
            </form>
            <div id="successOverlay" class="hidden absolute inset-0 bg-white/95 flex flex-col items-center justify-center text-center p-6 z-50">
                <div class="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                </div>
                <h3 class="text-xl font-black text-slate-800 mb-1" data-key="msg-sent">Sent!</h3>
                <p class="text-slate-500 text-xs" data-key="msg-desc">Received by Shaahin Rassaf.</p>
                <button onclick="location.reload()" class="mt-6 px-5 py-2 border-2 border-indigo-600 text-indigo-600 rounded-full font-bold text-[10px]" data-key="b-new">Submit New</button>
            </div>
        </div>
        <footer class="mt-8 text-center px-4">
            <p id="shMotto" class="text-slate-500 text-xs font-medium italic mb-4 max-w-sm mx-auto"></p>
            <p class="text-[9px] text-slate-400 font-bold tracking-widest uppercase">© <span id="shYear"></span> | RAHBORD CO</p>
        </footer>
    </div>
    <script>
        const shDict = {
            en: {
                motto: '"Small steps in the right direction can lead to the biggest changes in your life."',
                "l-domain": "Proposed Domain / Website URL", "s1-title": "Identity", "l-brand": "Client Name", "l-slogan": "Brand Motto", "l-target": "Target Audience", "l-tone": "Tone", "o-pro": "Professional", "o-friendly": "Friendly", "o-luxury": "Luxury", "l-colors": "Colors",
                "s2-title": "Scope", "l-product": "Product", "l-need-sale": "Need to sell product?", "o-yes": "Yes", "o-no": "No", "l-payment": "Payment Methods", "c-visa": "Visa Card", "c-paypal": "PayPal", "c-gate": "Gateways", "l-usp": "Values (USPs)",
                "s3-title": "Channels & Bio", "l-bio": "Biography / Resume", "p-bio": "Briefly describe yourself...", "l-email": "Email", "l-phone": "WhatsApp", "l-captcha": "Security Check",
                "b-next": "Next Step", "b-prev": "Back", "b-finish": "Complete Strategy",
                "msg-sent": "Magnificent!", "msg-desc": "Received by Shaahin Rassaf.", "b-new": "New Strategy", "err-cap": "Wrong security code!"
            },
            fa: {
                motto: '"قدم‌های کوچک در مسیر درست می‌تواند به بزرگترین تغییرات در زندگی شما منجر شود."',
                "l-domain": "دامین پیشنهادی / آدرس سایت", "s1-title": "هویت", "l-brand": "نام مشتری", "l-slogan": "شعار برند", "l-target": "مخاطب هدف", "l-tone": "لحن", "o-pro": "حرفه‌ای", "o-friendly": "دوستانه", "o-luxury": "لوکس", "l-colors": "رنگ‌ها",
                "s2-title": "محدوده پروژه", "l-product": "محصول یا خدمت اصلی", "l-need-sale": "آیا نیاز به فروش محصول دارید؟", "o-yes": "بله (با واحد پولی تومان)", "o-no": "خیر", "l-payment": "روش‌های پرداخت مورد نظر", "c-visa": "ویزا کارت", "c-paypal": "پی‌پال", "c-gate": "درگاه‌های معتبر", "l-usp": "ارزش‌های پیشنهادی (USP)",
                "s3-title": "ارتباطات و رزومه", "l-bio": "بیوگرافی و خلاصه رزومه", "p-bio": "خودتان را به اختصار شرح دهید...", "l-email": "ایمیل رسمی", "l-phone": "واتس‌اپ / تلفن", "l-captcha": "تایید امنیتی",
                "b-next": "مرحله بعد", "b-prev": "بازگشت", "b-finish": "تکمیل نهایی",
                "msg-sent": "ارسال شد!", "msg-desc": "شاهین رصاف به زودی با شما تماس می‌گیرد.", "b-new": "ثبت جدید", "err-cap": "کد امنیتی اشتباه است!"
            },
            ar: {
                motto: '"الخطوات الصغيرة في الاتجاه الصحيح يمكن أن تؤدي إلى أكبر التغييرات."',
                "l-domain": "النطاق المقترح / عنوان الموقع", "s1-title": "الهوية", "l-brand": "اسم العميل", "l-slogan": "شعار العلامة التجارية", "l-target": "الجمهور المستهدف", "l-tone": "نبرة الصوت", "o-pro": "مهني", "o-friendly": "ودي", "o-luxury": "فاخر", "l-colors": "الألوان",
                "s2-title": "نطاق المشروع", "l-product": "المنتج الرئيسي", "l-need-sale": "هل تحتاج لبيع المنتجات؟", "o-yes": "نعم", "o-no": "لا", "l-payment": "طرق الدفع", "c-visa": "فيزا كارد", "c-paypal": "بايبال", "c-gate": "بوابات محلية", "l-usp": "القيم الفريدة",
                "s3-title": "القنوات والسيرة", "l-bio": "السيرة الذاتية", "p-bio": "صف نفسك بإيجاز...", "l-email": "البريد الإلكتروني", "l-phone": "واتساب", "l-captcha": "التحقق الأمني",
                "b-next": "الخطوة التالية", "b-prev": "رجوع", "b-finish": "إكمال الاستراتيجية",
                "msg-sent": "تم الإرسال!", "msg-desc": "تلقاها شاهين رصاف.", "b-new": "تقديم جديد", "err-cap": "رمز الأمان خاطئ!"
            },
            tr: {
                motto: '"Doğru yöndeki küçük adımlar hayatınızdaki en büyük değişikliklere yol açabilir."',
                "l-domain": "Önerilen Alan Adı / URL", "s1-title": "Kimlik", "l-brand": "Müşteri Adı", "l-slogan": "Marka Mottosu", "l-target": "Hedef Kitle", "l-tone": "Ses Tonu", "o-pro": "Profesyonel", "o-friendly": "Arkadaş Canlısı", "o-luxury": "Lüks", "l-colors": "Renkler",
                "s2-title": "Kapsam", "l-product": "Ana Ürün", "l-need-sale": "Satış gerekli mi?", "o-yes": "Evet", "o-no": "Hayır", "l-payment": "Ödeme Yöntemleri", "c-visa": "Visa", "c-paypal": "PayPal", "c-gate": "Ödeme Ağları", "l-usp": "Değerler (USP)",
                "s3-title": "Kanallar & Bio", "l-bio": "Biyografi / Özgeçmiş", "p-bio": "Kendinizi kısaca tanıtın...", "l-email": "E-posta", "l-phone": "WhatsApp", "l-captcha": "Güvenlik Kontrolü",
                "b-next": "Sonraki Adım", "b-prev": "Geri", "b-finish": "Tamamla",
                "msg-sent": "Gönderildi!", "msg-desc": "Shaahin Rassaf tarafından alındı.", "b-new": "Yeni Gönder", "err-cap": "Hatalı kod!"
            },
            de: {
                motto: '"Kleine Schritte in die richtige Richtung können zu den größten Veränderungen führen."',
                "l-domain": "Vorgeschlagene Domain / URL", "s1-title": "Identität", "l-brand": "Kundenname", "l-slogan": "Markenmotto", "l-target": "Zielgruppe", "l-tone": "Tonalität", "o-pro": "Professionell", "o-friendly": "Freundlich", "o-luxury": "Luxus", "l-colors": "Farben",
                "s2-title": "Umfang", "l-product": "Hauptprodukt", "l-need-sale": "Verkauf nötig?", "o-yes": "Ja", "o-no": "Nein", "l-payment": "Zahlungsmethoden", "c-visa": "Visa", "c-paypal": "PayPal", "c-gate": "Gateways", "l-usp": "Werte (USPs)",
                "s3-title": "Kanäle & Bio", "l-bio": "Biografie / Lebenslauf", "p-bio": "Beschreiben Sie sich kurz...", "l-email": "E-Mail", "l-phone": "WhatsApp", "l-captcha": "Sicherheit",
                "b-next": "Nächster Schritt", "b-prev": "Zurück", "b-finish": "Abschließen",
                "msg-sent": "Gesendet!", "msg-desc": "Erhalten von Shaahin Rassaf.", "b-new": "Neu senden", "err-cap": "Falscher Code!"
            },
            fr: {
                motto: '"De petits pas dans la bonne direction peuvent mener aux plus grands changements."',
                "l-domain": "Domaine proposé / URL", "s1-title": "Identité", "l-brand": "Nom du client", "l-slogan": "Devise de la marque", "l-target": "Public cible", "l-tone": "Ton", "o-pro": "Professionnel", "o-friendly": "Amical", "o-luxury": "Luxe", "l-colors": "Couleurs",
                "s2-title": "Portée", "l-product": "Produit principal", "l-need-sale": "Besoin de vendre ?", "o-yes": "Oui", "o-no": "Non", "l-payment": "Méthodes de paiement", "c-visa": "Visa", "c-paypal": "PayPal", "c-gate": "Passerelles", "l-usp": "Valeurs (USP)",
                "s3-title": "Canaux & Bio", "l-bio": "Biographie / CV", "p-bio": "Décrivez-vous brièvement...", "l-email": "E-mail", "l-phone": "WhatsApp", "l-captcha": "Sécurité",
                "b-next": "Suivant", "b-prev": "Retour", "b-finish": "Terminer",
                "msg-sent": "Envoyé !", "msg-desc": "Reçu par Shaahin Rassaf.", "b-new": "Nouveau", "err-cap": "Code erroné !"
            },
            es: {
                motto: '"Pequeños pasos en la dirección correcta pueden conducir a los cambios más grandes."',
                "l-domain": "Dominio propuesto / URL", "s1-title": "Identidad", "l-brand": "Nombre cliente", "l-slogan": "Lema", "l-target": "Audiencia", "l-tone": "Tono", "o-pro": "Profesional", "o-friendly": "Amigable", "o-luxury": "Lujo", "l-colors": "Colores",
                "s2-title": "Alcance", "l-product": "Producto principal", "l-need-sale": "¿Venta necesaria?", "o-yes": "Sí", "o-no": "No", "l-payment": "Métodos de pago", "c-visa": "Visa", "c-paypal": "PayPal", "c-gate": "Pasarelas", "l-usp": "Valores (USP)",
                "s3-title": "Canales & Bio", "l-bio": "Biografía / CV", "p-bio": "Descríbase brevemente...", "l-email": "E-mail", "l-phone": "WhatsApp", "l-captcha": "Seguridad",
                "b-next": "Siguiente", "b-prev": "Atrás", "b-finish": "Completar",
                "msg-sent": "¡Enviado!", "msg-desc": "Recibido por Shaahin Rassaf.", "b-new": "Nuevo", "err-cap": "Código incorrecto!"
            }
        };
        let currentStep = 1;
        let captchaResult = 0;
        function generateCaptcha() {
            const a = Math.floor(Math.random() * 9) + 1;
            const b = Math.floor(Math.random() * 9) + 1;
            captchaResult = a + b;
            document.getElementById('captcha-text').innerText = `${a} + ${b} =`;
        }
        function moveStep(dir) {
            const steps = document.querySelectorAll('.step-content');
            const currentInputs = steps[currentStep-1].querySelectorAll('input[required], textarea[required]');
            let valid = true;
            currentInputs.forEach(input => {
                if(!input.value) {
                    input.style.borderColor = "#f87171";
                    valid = false;
                } else {
                    input.style.borderColor = "#e2e8f0";
                }
            });
            if(dir === 1 && !valid) return;
            steps[currentStep-1].classList.remove('active');
            currentStep += dir;
            steps[currentStep-1].classList.add('active');
            document.getElementById('prevBtn').classList.toggle('hidden', currentStep === 1);
            document.getElementById('nextBtn').classList.toggle('hidden', currentStep === 3);
            document.getElementById('submitBtn').classList.toggle('hidden', currentStep !== 3);
            
            const progress = (currentStep / 3) * 100;
            document.getElementById('shProgress').style.width = progress + '%';
            document.getElementById('stepIndicator').innerText = `Step ${currentStep} of 3`;
            document.getElementById('percentIndicator').innerText = Math.round(progress) + '%';
        }
        function updateUI(lang) {
            const root = document.getElementById('sh-strategy-app');
            const rtlLangs = ['fa', 'ar'];
            root.dir = rtlLangs.includes(lang) ? 'rtl' : 'ltr';
            const dict = shDict[lang] || shDict.en;
            
            document.getElementById('shMotto').innerText = dict.motto;
            
            document.querySelectorAll('[data-key]').forEach(el => {
                const key = el.getAttribute('data-key');
                if (dict[key]) {
                    if (el.tagName === 'OPTION') el.text = dict[key];
                    else el.innerText = dict[key];
                }
            });
            document.querySelectorAll('[data-placeholder-key]').forEach(el => {
                const key = el.getAttribute('data-placeholder-key');
                if (dict[key]) el.placeholder = dict[key];
            });
        }
        document.getElementById('strategyForm').onsubmit = (e) => {
            const userCaptcha = document.getElementById('captcha-input').value;
            const currentLang = document.getElementById('shLang').value;
            const errMsg = shDict[currentLang]?.['err-cap'] || shDict.en['err-cap'];
            if (parseInt(userCaptcha) !== captchaResult) {
                e.preventDefault();
                alert(errMsg);
                generateCaptcha();
                return false;
            }
            document.getElementById('successOverlay').classList.remove('hidden');
        };
        window.addEventListener('load', () => {
            document.getElementById('shYear').innerText = new Date().getFullYear();
            updateUI('en'); // تنظیم پیش‌فرض روی انگلیسی
            generateCaptcha();
        });
    </script>
</div>

Project Scope

Channels & Bio

Comments

Add a Comment