Spaces:
Running
Running
أضف زر https://myiq.com/ar/start?g=298719&utm_source=google&utm_medium=cpc&utm_campaign=SA-AR-S_IQ-Tests_MyIQ&utm_campaign_id=22917720425&utm_adgroup=&utm_adgroup_id=189377250412&utm_term=%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1%20%D8%A7%D9%84%D8%B0%D9%83%D8%A7%D8%A1&utm_content=770308846530&utm_funnel=&partner=WM&url=https://myiq.com/ar/start%3Fg%3D298719&gad_source=1&gad_campaignid=22917720425&gbraid=0AAAAACQlLoaA6YTBwXgKnhFnRFHcjaXx3&gclid=Cj0KCQjwrJTGBhCbARIsANFBfgvm0uyBg79yCP6GkFCoIj6hVnaegJULUnTy6FiyogAc4A4eK1RvHuQaAtNLEALw_wcB - Initial Deployment
d8c5040 verified | <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>نبض - اختراق العقل عبر نبرة الصوت</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .pulse-ring { | |
| animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; | |
| } | |
| @keyframes pulse-ring { | |
| 0% { | |
| transform: scale(0.33); | |
| } | |
| 40%, 50% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(1.33); | |
| opacity: 0; | |
| } | |
| } | |
| .recording-wave { | |
| animation: wave 2s ease-in-out infinite; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { | |
| transform: scaleY(1); | |
| } | |
| 50% { | |
| transform: scaleY(1.5); | |
| } | |
| } | |
| .glass-morphism { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white overflow-x-hidden"> | |
| <!-- Vanta Background --> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 glass-morphism px-6 py-4"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="text-2xl font-bold gradient-text">نبض</div> | |
| <div class="hidden md:flex space-x-8 space-x-reverse"> | |
| <a href="#features" class="hover:text-purple-400 transition">المميزات</a> | |
| <a href="#faq" class="hover:text-purple-400 transition">الأسئلة</a> | |
| <a href="#demo" class="hover:text-purple-400 transition">تجربة</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative z-10 min-h-screen flex items-center justify-center px-6"> | |
| <div class="text-center max-w-4xl mx-auto" data-aos="fade-up"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6"> | |
| <span class="gradient-text">اختراق العقل</span> | |
| <br> | |
| عبر نبرة الصوت | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed"> | |
| تقنية ذكاء اصطناعي متقدمة تحلل نبرة صوتك وتكشف عن حالتك النفسية بدقة مذهلة | |
| </p> | |
| <button onclick="scrollToDemo()" class="bg-gradient-to-r from-purple-600 to-blue-600 px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform"> | |
| ابدأ التجربة | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="relative z-10 py-20 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 gradient-text" data-aos="fade-up">لماذا نبض؟</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="glass-morphism rounded-2xl p-8 text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <i data-feather="activity" class="w-16 h-16 mx-auto mb-4 text-purple-400"></i> | |
| <h3 class="text-2xl font-bold mb-4">تحليل دقيق</h3> | |
| <p class="text-gray-300">تقنيات AI متقدمة تحلل الترددات والنغمات بدقة عالية</p> | |
| </div> | |
| <div class="glass-morphism rounded-2xl p-8 text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <i data-feather="heart" class="w-16 h-16 mx-auto mb-4 text-purple-400"></i> | |
| <h3 class="text-2xl font-bold mb-4">فهم الذات</h3> | |
| <p class="text-gray-300">اكتشف حالتك النفسية وتابع تطورها بمرور الوقت</p> | |
| </div> | |
| <div class="glass-morphism rounded-2xl p-8 text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <i data-feather="zap" class="w-16 h-16 mx-auto mb-4 text-purple-400"></i> | |
| <h3 class="text-2xl font-bold mb-4">سهل الاستخدام</h3> | |
| <p class="text-gray-300">فقط اضغط زر التسجيل وابدأ رحلتك نحو فهم أفضل</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section id="demo" class="relative z-10 py-20 px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-12 gradient-text" data-aos="fade-up">جرب نبض الآن</h2> | |
| <!-- Recording Interface --> | |
| <div class="glass-morphism rounded-3xl p-8 md:p-12" data-aos="fade-up"> | |
| <div class="mb-8"> | |
| <p class="text-xl text-gray-300 mb-4">سجل صوتك لمدة 60 ثانية</p> | |
| <div id="timer" class="text-3xl font-bold text-purple-400 mb-6">00:00</div> | |
| </div> | |
| <!-- Recording Button --> | |
| <div class="relative inline-block"> | |
| <button id="recordBtn" onclick="toggleRecording()" class="relative w-32 h-32 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i id="recordIcon" data-feather="mic" class="w-12 h-12"></i> | |
| <div id="pulseRing" class="absolute inset-0 rounded-full border-4 border-purple-400 opacity-50 pulse-ring hidden"></div> | |
| </button> | |
| </div> | |
| <!-- Wave Animation --> | |
| <div id="waveContainer" class="flex justify-center items-end space-x-2 space-x-reverse mt-8 h-20 hidden"> | |
| <div class="w-2 bg-purple-400 rounded-full recording-wave" style="animation-delay: 0s"></div> | |
| <div class="w-2 bg-purple-400 rounded-full recording-wave" style="animation-delay: 0.1s"></div> | |
| <div class="w-2 bg-purple-400 rounded-full recording-wave" style="animation-delay: 0.2s"></div> | |
| <div class="w-2 bg-purple-400 rounded-full recording-wave" style="animation-delay: 0.3s"></div> | |
| <div class="w-2 bg-purple-400 rounded-full recording-wave" style="animation-delay: 0.4s"></div> | |
| </div> | |
| <!-- Results --> | |
| <div id="results" class="mt-8 hidden"> | |
| <h3 class="text-2xl font-bold mb-4">نتائج التحليل</h3> | |
| <div id="moodResult" class="text-xl text-purple-400"></div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span>الطاقة</span> | |
| <span id="energyValue">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div id="energyBar" class="bg-gradient-to-r from-purple-600 to-blue-600 h-2 rounded-full transition-all duration-1000"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="relative z-10 py-20 px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 gradient-text" data-aos="fade-up">الأسئلة الشائعة</h2> | |
| <div class="space-y-6"> | |
| <div class="glass-morphism rounded-2xl p-6" data-aos="fade-up"> | |
| <h3 class="text-xl font-bold mb-2 text-purple-400">ما هو "نبض" بالذكاء الاصطناعي؟</h3> | |
| <p class="text-gray-300">"نبض" هو نظام ذكي يستخدم خوارزميات تحليل الصوت للتعرف على حالتك النفسية والمزاجية بدقة عالية.</p> | |
| </div> | |
| <div class="glass-morphism rounded-2xl p-6" data-aos="fade-up"> | |
| <h3 class="text-xl font-bold mb-2 text-purple-400">كيف يعمل "نبض"؟</h3> | |
| <p class="text-gray-300">يقوم بتسجيل نبرة صوتك، ثم يحلل الترددات والنغمات والاهتزازات عبر الذكاء الاصطناعي ليكشف حالتك مثل: فرح، توتر، حزن، أو طاقة عالية.</p> | |
| </div> | |
| <div class="glass-morphism rounded-2xl p-6" data-aos="fade-up"> | |
| <h3 class="text-xl font-bold mb-2 text-purple-400">ما الفائدة من "نبض"؟</h3> | |
| <p class="text-gray-300">يساعدك على فهم نفسك بشكل أفضل، تحسين حالتك المزاجية، ومتابعة صحتك النفسية بطريقة مبتكرة وسهلة.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <!-- Additional CTA Section --> | |
| <section class="relative z-10 py-16 px-6 bg-gradient-to-r from-purple-900 to-blue-900"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-4 gradient-text">هل تريد معرفة مستوى ذكاءك؟</h2> | |
| <p class="text-xl text-gray-300 mb-8">اكتشف قدراتك العقلية من خلال اختبار موثوق</p> | |
| <a href="https://myiq.com/ar/start?g=298719&utm_source=google&utm_medium=cpc&utm_campaign=SA-AR-S_IQ-Tests_MyIQ&utm_campaign_id=22917720425&utm_adgroup=&utm_adgroup_id=189377250412&utm_term=%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1%20%D8%A7%D9%84%D8%B0%D9%83%D8%A7%D8%A1&utm_content=770308846530&utm_funnel=&partner=WM&url=https://myiq.com/ar/start%3Fg%3D298719&gad_source=1&gad_campaignid=22917720425&gbraid=0AAAAACQlLoaA6YTBwXgKnhFnRFHcjaXx3&gclid=Cj0KCQjwrJTGBhCbARIsANFBfgvm0uyBg79yCP6GkFCoIj6hVnaegJULUnTy6FiyogAc4A4eK1RvHuQaAtNLEALw_wcB" target="_blank" class="inline-block bg-gradient-to-r from-green-500 to-blue-500 px-12 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform"> | |
| ابدأ اختبار الذكاء | |
| </a> | |
| </div> | |
| </section> | |
| <footer class="relative z-10 glass-morphism mt-0 py-8 px-6"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <p class="text-gray-400">© 2024 نبض - اختراق العقل عبر نبرة الصوت</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta Background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1a1a2e, | |
| shininess: 30.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.75, | |
| zoom: 0.75 | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 1000, | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Recording functionality | |
| let isRecording = false; | |
| let mediaRecorder; | |
| let audioChunks = []; | |
| let timerInterval; | |
| let seconds = 0; | |
| function scrollToDemo() { | |
| document.getElementById('demo').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function toggleRecording() { | |
| if (!isRecording) { | |
| startRecording(); | |
| } else { | |
| stopRecording(); | |
| } | |
| } | |
| function startRecording() { | |
| isRecording = true; | |
| seconds = 0; | |
| audioChunks = []; | |
| document.getElementById('recordIcon').setAttribute('data-feather', 'square'); | |
| document.getElementById('pulseRing').classList.remove('hidden'); | |
| document.getElementById('waveContainer').classList.remove('hidden'); | |
| document.getElementById('results').classList.add('hidden'); | |
| feather.replace(); | |
| timerInterval = setInterval(() => { | |
| seconds++; | |
| const mins = Math.floor(seconds / 60); | |
| const secs = seconds % 60; | |
| document.getElementById('timer').textContent = | |
| `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; | |
| if (seconds >= 60) { | |
| stopRecording(); | |
| } | |
| }, 1000); | |
| // Simulate recording (in real app, use MediaRecorder API) | |
| setTimeout(() => { | |
| if (isRecording) { | |
| simulateAnalysis(); | |
| } | |
| }, 1000); | |
| } | |
| function stopRecording() { | |
| isRecording = false; | |
| clearInterval(timerInterval); | |
| document.getElementById('recordIcon').setAttribute('data-feather', 'mic'); | |
| document.getElementById('pulseRing').classList.add('hidden'); | |
| document.getElementById('waveContainer').classList.add('hidden'); | |
| feather.replace(); | |
| simulateAnalysis(); | |
| } | |
| function simulateAnalysis() { | |
| // Simulate AI analysis | |
| const moods = ['فرح', 'هدوء', 'طاقة عالية', 'توتر', 'حزن']; | |
| const randomMood = moods[Math.floor(Math.random() * moods.length)]; | |
| const energyLevel = Math.floor(Math.random() * 100); | |
| setTimeout(() => { | |
| document.getElementById('moodResult').textContent = `حالتك النفسية: ${randomMood}`; | |
| document.getElementById('energyValue').textContent = `${energyLevel}%`; | |
| document.getElementById('energyBar').style.width = `${energyLevel}%`; | |
| document.getElementById('results').classList.remove('hidden'); | |
| }, 1500); | |
| } | |
| </script> | |
| </body> | |
| </html> | |