Spaces:
Running
Running
| <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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #2E8B57; | |
| --primary-dark: #1e6b46; | |
| --secondary: #8B4513; | |
| --accent: #DAA520; | |
| --light: #f8f9fa; | |
| --dark: #343a40; | |
| --text: #2c3e50; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --gradient: linear-gradient(135deg, #2E8B57 0%, #1e6b46 100%); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: var(--text); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: var(--gradient); | |
| color: white; | |
| padding: 1rem 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: var(--shadow); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| font-size: 1.8rem; | |
| } | |
| .logo h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .built-with { | |
| font-size: 0.8rem; | |
| margin-top: 5px; | |
| } | |
| .built-with a { | |
| color: white; | |
| text-decoration: none; | |
| transition: opacity 0.3s; | |
| } | |
| .built-with a:hover { | |
| opacity: 0.8; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 20px; | |
| } | |
| nav a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| transition: background-color 0.3s; | |
| } | |
| nav a:hover { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .mobile-menu { | |
| display: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| color: white; | |
| padding: 5rem 0; | |
| text-align: center; | |
| } | |
| .hero h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| font-weight: 700; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| max-width: 700px; | |
| margin: 0 auto 2rem; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background-color: var(--accent); | |
| color: white; | |
| padding: 12px 30px; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn:hover { | |
| background-color: #b8860b; | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 5rem 0; | |
| background-color: var(--light); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| position: relative; | |
| display: inline-block; | |
| margin-bottom: 1rem; | |
| } | |
| .section-title h2::after { | |
| content: ''; | |
| position: absolute; | |
| width: 70%; | |
| height: 3px; | |
| background-color: var(--accent); | |
| bottom: -10px; | |
| right: 15%; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: transform 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .feature-icon { | |
| background: var(--gradient); | |
| color: white; | |
| font-size: 2.5rem; | |
| padding: 1.5rem; | |
| text-align: center; | |
| } | |
| .feature-content { | |
| padding: 1.5rem; | |
| } | |
| .feature-content h3 { | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| /* Prayer Times */ | |
| .prayer-times { | |
| padding: 5rem 0; | |
| background-color: white; | |
| } | |
| .prayer-container { | |
| background: var(--gradient); | |
| color: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| box-shadow: var(--shadow); | |
| } | |
| .prayer-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| } | |
| .prayer-header h3 { | |
| font-size: 1.5rem; | |
| } | |
| .location { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .prayer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .prayer-item { | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 1rem; | |
| border-radius: 10px; | |
| text-align: center; | |
| transition: all 0.3s; | |
| } | |
| .prayer-item.active { | |
| background: var(--accent); | |
| transform: scale(1.05); | |
| } | |
| .prayer-name { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .prayer-time { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| } | |
| /* Quran Section */ | |
| .quran-section { | |
| padding: 5rem 0; | |
| background-color: var(--light); | |
| } | |
| .quran-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| .quran-player { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .quran-player h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .surah-selector { | |
| width: 100%; | |
| padding: 10px; | |
| border-radius: 5px; | |
| border: 1px solid #ddd; | |
| margin-bottom: 1rem; | |
| } | |
| .player-controls { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 1.5rem; | |
| } | |
| .control-btn { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .control-btn:hover { | |
| background: var(--primary-dark); | |
| } | |
| .progress-bar { | |
| flex-grow: 1; | |
| height: 5px; | |
| background: #ddd; | |
| border-radius: 5px; | |
| margin: 0 15px; | |
| position: relative; | |
| } | |
| .progress { | |
| position: absolute; | |
| height: 100%; | |
| background: var(--primary); | |
| border-radius: 5px; | |
| width: 30%; | |
| } | |
| .daily-verse { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| text-align: center; | |
| } | |
| .daily-verse h3 { | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| .verse-text { | |
| font-size: 1.2rem; | |
| line-height: 1.8; | |
| margin-bottom: 1.5rem; | |
| color: var(--secondary); | |
| } | |
| .verse-reference { | |
| color: var(--dark); | |
| font-style: italic; | |
| } | |
| /* Dhikr Section */ | |
| .dhikr-section { | |
| padding: 5rem 0; | |
| background-color: white; | |
| } | |
| .dhikr-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| .dhikr-counter { | |
| background: var(--gradient); | |
| color: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .dhikr-counter h3 { | |
| margin-bottom: 1.5rem; | |
| } | |
| .counter-display { | |
| font-size: 4rem; | |
| font-weight: 700; | |
| margin: 1.5rem 0; | |
| } | |
| .dhikr-controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .dhikr-list { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .dhikr-list h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .dhikr-item { | |
| padding: 1rem; | |
| border-bottom: 1px solid #eee; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .dhikr-item:last-child { | |
| border-bottom: none; | |
| } | |
| /* Community Section */ | |
| .community-section { | |
| padding: 5rem 0; | |
| background-color: var(--light); | |
| } | |
| .community-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .community-card { | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: transform 0.3s; | |
| } | |
| .community-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .community-icon { | |
| background: var(--secondary); | |
| color: white; | |
| font-size: 2rem; | |
| padding: 1.5rem; | |
| text-align: center; | |
| } | |
| .community-content { | |
| padding: 1.5rem; | |
| } | |
| .community-content h3 { | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 0 1rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-column h4 { | |
| color: var(--accent); | |
| margin-bottom: 1.5rem; | |
| font-size: 1.2rem; | |
| } | |
| .footer-column ul { | |
| list-style: none; | |
| } | |
| .footer-column ul li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .footer-column a { | |
| color: #ddd; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-column a:hover { | |
| color: var(--accent); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid #444; | |
| font-size: 0.9rem; | |
| color: #aaa; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .quran-container, .dhikr-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-menu { | |
| display: block; | |
| } | |
| nav ul { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background: var(--primary-dark); | |
| width: 100%; | |
| flex-direction: column; | |
| padding: 1rem 0; | |
| } | |
| nav ul.show { | |
| display: flex; | |
| } | |
| .hero h2 { | |
| font-size: 2rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .prayer-header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| /* Dark Mode Toggle */ | |
| .dark-mode-toggle { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 20px; | |
| background: var(--primary); | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| z-index: 1000; | |
| } | |
| body.dark-mode { | |
| background-color: #121212; | |
| color: #e0e0e0; | |
| } | |
| body.dark-mode .features, | |
| body.dark-mode .quran-section, | |
| body.dark-mode .community-section { | |
| background-color: #1e1e1e; | |
| } | |
| body.dark-mode .feature-card, | |
| body.dark-mode .quran-player, | |
| body.dark-mode .daily-verse, | |
| body.dark-mode .dhikr-list, | |
| body.dark-mode .community-card { | |
| background-color: #2d2d2d; | |
| color: #e0e0e0; | |
| } | |
| body.dark-mode .section-title h2 { | |
| color: var(--accent); | |
| } | |
| body.dark-mode .prayer-times, | |
| body.dark-mode .dhikr-section { | |
| background-color: #1e1e1e; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-mosque"></i> | |
| <div> | |
| <h1>روحانيات</h1> | |
| <div class="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mobile-menu"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#home">الرئيسية</a></li> | |
| <li><a href="#prayer">أوقات الصلاة</a></li> | |
| <li><a href="#quran">القرآن الكريم</a></li> | |
| <li><a href="#dhikr">الأذكار</a></li> | |
| <li><a href="#community">المجتمع</a></li> | |
| <li><a href="#about">عن الموقع</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="container"> | |
| <div class="hero-content fade-in"> | |
| <h2>روحانيات - دليل المؤمن</h2> | |
| <p>منصة دينية مبتكرة تجمع بين التقنية والروحانية لتواكب احتياجات المسلم المعاصر في عام 2025</p> | |
| <a href="#features" class="btn">اكتشف الميزات</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>مميزات المنصة</h2> | |
| <p>اكتشف مجموعة المميزات المتطورة التي تقدمها روحانيات</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div class="feature-content"> | |
| <h3>منبه الصلاة الذكي</h3> | |
| <p>يتعرف على موقعك الجغرافي تلقائياً مع تنبيه قبل الأذان وإشعارات بأوقات الصلاة والطقس</p> | |
| </div> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-quran"></i> | |
| </div> | |
| <div class="feature-content"> | |
| <h3>مصحف تفاعلي متطور</h3> | |
| <p>قرآن كريم مع تفسير ميسر، خاصية "الآية اليومية" وتلاوات بأصوات متنوعة</p> | |
| </div> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-praying-hands"></i> | |
| </div> | |
| <div class="feature-content"> | |
| <h3>الأذكار الذكية</h3> | |
| <p>أذكار الصباح والمساء مع مؤقت تلقائي وإحصائية أسبوعية وشهرية</p> | |
| </div> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-dharmachakra"></i> | |
| </div> | |
| <div class="feature-content"> | |
| <h3>سُبحة رقمية ذكية</h3> | |
| <p>عداد للتسبيح مع إمكانية تخصيص أنواع الأذكار وتحديات أسبوعية مع الأصدقاء</p> | |
| </div> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <div class="feature-content"> | |
| <h3>محتوى تعليمي تفاعلي</h3> | |
| <p>دروس دينية قصيرة، أسئلة يومية عن السيرة النبوية والفقه، وبودكاست مع علماء</p> | |
| </div> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="feature-content"> | |
| <h3>مجتمع افتراضي إيجابي</h3> | |
| <p>مجموعات دراسة افتراضية للقرآن، مسابقات شهرية في حفظ السور، واستشارات دينية</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Prayer Times --> | |
| <section class="prayer-times" id="prayer"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>أوقات الصلاة</h2> | |
| <p>مواقيت الصلاة حسب موقعك الحالي</p> | |
| </div> | |
| <div class="prayer-container fade-in"> | |
| <div class="prayer-header"> | |
| <h3>أوقات الصلاة اليوم</h3> | |
| <div class="location"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <span>الرياض، المملكة العربية السعودية</span> | |
| </div> | |
| </div> | |
| <div class="prayer-grid"> | |
| <div class="prayer-item"> | |
| <div class="prayer-name">الفجر</div> | |
| <div class="prayer-time">04:35</div> | |
| </div> | |
| <div class="prayer-item"> | |
| <div class="prayer-name">الشروق</div> | |
| <div class="prayer-time">05:55</div> | |
| </div> | |
| <div class="prayer-item"> | |
| <div class="prayer-name">الظهر</div> | |
| <div class="prayer-time">12:05</div> | |
| </div> | |
| <div class="prayer-item active"> | |
| <div class="prayer-name">العصر</div> | |
| <div class="prayer-time">15:25</div> | |
| </div> | |
| <div class="prayer-item"> | |
| <div class="prayer-name">المغرب</div> | |
| <div class="prayer-time">18:15</div> | |
| </div> | |
| <div class="prayer-item"> | |
| <div class="prayer-name">العشاء</div> | |
| <div class="prayer-time">19:35</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quran Section --> | |
| <section class="quran-section" id="quran"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>القرآن الكريم</h2> | |
| <p>استمع وتدبر في كلام الله تعالى</p> | |
| </div> | |
| <div class="quran-container"> | |
| <div class="quran-player fade-in"> | |
| <h3>مشغل القرآن</h3> | |
| <select class="surah-selector"> | |
| <option value="1">سورة الفاتحة</option> | |
| <option value="2">سورة البقرة</option> | |
| <option value="36">سورة يس</option> | |
| <option value="55">سورة الرحمن</option> | |
| <option value="67">سورة الملك</option> | |
| </select> | |
| <div class="player-controls"> | |
| <button class="control-btn"><i class="fas fa-backward"></i></button> | |
| <button class="control-btn"><i class="fas fa-play"></i></button> | |
| <button class="control-btn"><i class="fas fa-forward"></i></button> | |
| <div class="progress-bar"> | |
| <div class="progress"></div> | |
| </div> | |
| <span>02:15 / 05:40</span> | |
| </div> | |
| </div> | |
| <div class="daily-verse fade-in"> | |
| <h3>آية اليوم</h3> | |
| <div class="verse-text"> | |
| "وَإِذَا سَأَلَكَ عِبَادِي عَنِّي فَإِنِّي قَرِيبٌ ۖ أُجِيبُ دَعْوَةَ الدَّاعِ إِذَا دَعَانِ ۖ فَلْيَسْتَجِيبُوا لِي وَلْيُؤْمِنُوا بِي لَعَلَّهُمْ يَرْشُدُونَ" | |
| </div> | |
| <div class="verse-reference">سورة البقرة - الآية 186</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dhikr Section --> | |
| <section class="dhikr-section" id="dhikr"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>الأذكار والتسبيح</h2> | |
| <p>اذكر الله تعالى في كل وقت</p> | |
| </div> | |
| <div class="dhikr-container"> | |
| <div class="dhikr-counter fade-in"> | |
| <h3>السبحة الرقمية</h3> | |
| <div class="counter-display">33</div> | |
| <p>تسبيحات اليوم</p> | |
| <div class="dhikr-controls"> | |
| <button class="btn">إضافة</button> | |
| <button class="btn">إعادة تعيين</button> | |
| </div> | |
| </div> | |
| <div class="dhikr-list fade-in"> | |
| <h3>الأذكار الموصى بها</h3> | |
| <div class="dhikr-item"> | |
| <span>سبحان الله</span> | |
| <span>33</span> | |
| </div> | |
| <div class="dhikr-item"> | |
| <span>الحمد لله</span> | |
| <span>33</span> | |
| </div> | |
| <div class="dhikr-item"> | |
| <span>الله أكبر</span> | |
| <span>34</span> | |
| </div> | |
| <div class="dhikr-item"> | |
| <span>لا إله إلا الله</span> | |
| <span>100</span> | |
| </div> | |
| <div class="dhikr-item"> | |
| <span>أستغفر الله</span> | |
| <span>100</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section class="community-section" id="community"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>المجتمع الافتراضي</h2> | |
| <p>انضم إلى مجتمعنا الإيجابي</p> | |
| </div> | |
| <div class="community-grid"> | |
| <div class="community-card fade-in"> | |
| <div class="community-icon"> | |
| <i class="fas fa-user-graduate"></i> | |
| </div> | |
| <div class="community-content"> | |
| <h3>مجموعات الدراسة</h3> | |
| <p>انضم إلى مجموعات دراسة افتراضية للقرآن الكريم مع متابعة منتظمة</p> | |
| </div> | |
| </div> | |
| <div class="community-card fade-in"> | |
| <div class="community-icon"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| <div class="community-content"> | |
| <h3>المسابقات الشهرية</h3> | |
| <p>شارك في مسابقات حفظ السور وفهم التفسير مع جوائز قيمة</p> | |
| </div> | |
| </div> | |
| <div class="community-card fade-in"> | |
| <div class="community-icon"> | |
| <i class="fas fa-hands-helping"></i> | |
| </div> | |
| <div class="community-content"> | |
| <h3>الاستشارات الدينية</h3> | |
| <p>احصل على استشارات دينية من مختصين معتمدين</p> | |
| </div> | |
| </div> | |
| <div class="community-card fade-in"> | |
| <div class="community-icon"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <div class="community-content"> | |
| <h3>الدعم النفسي والروحي</h3> | |
| <p>تواصل مع مرشدين روحيين لتلقي الدعم النفسي والروحي</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-column"> | |
| <h4>روحانيات</h4> | |
| <p>منصة دينية مبتكرة تجمع بين التقنية والروحانية لتواكب احتياجات المسلم المعاصر في عام 2025</p> | |
| </div> | |
| <div class="footer-column"> | |
| <h4>روابط سريعة</h4> | |
| <ul> | |
| <li><a href="#home">الرئيسية</a></li> | |
| <li><a href="#prayer">أوقات الصلاة</a></li> | |
| <li><a href="#quran">القرآن الكريم</a></li> | |
| <li><a href="#dhikr">الأذكار</a></li> | |
| <li><a href="#community">المجتمع</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h4>التواصل</h4> | |
| <ul> | |
| <li><i class="fas fa-envelope"></i> info@ruhaniyat.com</li> | |
| <li><i class="fas fa-phone"></i> +966 123 456 789</li> | |
| <li><i class="fas fa-map-marker-alt"></i> الرياض، المملكة العربية السعودية</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 روحانيات - جميع الحقوق محفوظة</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Dark Mode Toggle --> | |
| <div class="dark-mode-toggle"> | |
| <i class="fas fa-moon"></i> | |
| </div> | |
| <script> | |
| // Mobile Menu Toggle | |
| document.querySelector('.mobile-menu').addEventListener('click', function() { | |
| document.querySelector('nav ul').classList.toggle('show'); | |
| }); | |
| // Dark Mode Toggle | |
| document.querySelector('.dark-mode-toggle').addEventListener('click', function() { | |
| document.body.classList.toggle('dark-mode'); | |
| const icon = this.querySelector('i'); | |
| if (document.body.classList.contains('dark-mode')) { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| }); | |
| // Prayer Time Active State | |
| function updateActivePrayer() { | |
| const prayerItems = document.querySelectorAll('.prayer-item'); | |
| const currentTime = new Date(); | |
| const currentHour = currentTime.getHours(); | |
| const currentMinute = currentTime.getMinutes(); | |
| const currentTotalMinutes = currentHour * 60 + currentMinute; | |
| // Mock prayer times in minutes since midnight | |
| const prayerTimes = [ | |
| { name: 'الفجر', time: 4 * 60 + 35 }, | |
| { name: 'الشروق', time: 5 * 60 + 55 }, | |
| { name: 'الظهر', time: 12 * 60 + 5 }, | |
| { name: 'العصر', time: 15 * 60 + 25 }, | |
| { name: 'المغرب', time: 18 * 60 + 15 }, | |
| { name: 'العشاء', time: 19 * 60 + 35 } | |
| ]; | |
| let activeIndex = -1; | |
| for (let i = 0; i < prayerTimes.length; i++) { | |
| if (currentTotalMinutes >= prayerTimes[i].time) { | |
| activeIndex = i; | |
| } | |
| } | |
| prayerItems.forEach((item, index) => { | |
| item.classList.remove('active'); | |
| if (index === activeIndex) { | |
| item.classList.add('active'); | |
| } | |
| }); | |
| } | |
| // Initial call and set interval | |
| updateActivePrayer(); | |
| setInterval(updateActivePrayer, 60000); // Update every minute | |
| // Dhikr Counter | |
| let dhikrCount = 33; | |
| const counterDisplay = document.querySelector('.counter-display'); | |
| document.querySelector('.dhikr-controls .btn:first-child').addEventListener('click', function() { | |
| dhikrCount++; | |
| counterDisplay.textContent = dhikrCount; | |
| // Visual feedback for completing 100 | |
| if (dhikrCount % 100 === 0) { | |
| counterDisplay.style.color = 'var(--accent)'; | |
| setTimeout(() => { | |
| counterDisplay.style.color = 'white'; | |
| }, 500); | |
| } | |
| }); | |
| document.querySelector('.dhikr-controls .btn:last-child').addEventListener('click', function() { | |
| dhikrCount = 0; | |
| counterDisplay.textContent = dhikrCount; | |
| }); | |
| // Fade in animation on scroll | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInOnScroll = () => { | |
| fadeElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const elementVisible = 150; | |
| if (elementTop < window.innerHeight - elementVisible) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Initial check | |
| fadeInOnScroll(); | |
| // Check on scroll | |
| window.addEventListener('scroll', fadeInOnScroll); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('nav a').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu after click | |
| document.querySelector('nav ul').classList.remove('show'); | |
| }); | |
| }); | |
| // Quran Player Controls | |
| const playButton = document.querySelector('.player-controls .control-btn:nth-child(2)'); | |
| const progressBar = document.querySelector('.progress'); | |
| playButton.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| if (icon.classList.contains('fa-play')) { | |
| icon.classList.remove('fa-play'); | |
| icon.classList.add('fa-pause'); | |
| // Simulate progress | |
| let width = 30; | |
| const progressInterval = setInterval(() => { | |
| if (width >= 100) { | |
| clearInterval(progressInterval); | |
| icon.classList.remove('fa-pause'); | |
| icon.classList.add('fa-play'); | |
| } else { | |
| width += 0.5; | |
| progressBar.style.width = width + '%'; | |
| } | |
| }, 100); | |
| } else { | |
| icon.classList.remove('fa-pause'); | |
| icon.classList.add('fa-play'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |