1721 lines
105 KiB
HTML
1721 lines
105 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>QuranReader — Читай Коран на арабском</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Noto+Naskh+Arabic:wght@400;600;700&family=Amiri:wght@400;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
[data-theme="light"] {
|
||
--ink: #0F1218; --bg: #FFFFFF; --bg-card: #F2F4F7; --bg-card-hover: #E8FCFF;
|
||
--text-secondary: #5B6573; --cyan: #00E5FF; --cyan-dark: #00b8cc;
|
||
--accent: #6366f1; --accent-light: #818cf8;
|
||
--success: #22c55e; --warning: #f59e0b; --error: #ef4444;
|
||
--border: #e5e7eb; --shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||
--shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
|
||
--gradient-hero: linear-gradient(135deg, #0a3d2e 0%, #0d4f3a 50%, #0a3d2e 100%);
|
||
--gradient-accent: linear-gradient(135deg, #00E5FF 0%, #10b981 100%);
|
||
--gradient-card: linear-gradient(135deg, rgba(16,185,129,0.05) 0%, rgba(0,229,255,0.05) 100%);
|
||
--glass: rgba(255,255,255,0.85); --glass-border: rgba(255,255,255,0.2);
|
||
--quran-green: #0a3d2e; --quran-gold: #d4a855;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--ink: #f0f2f5; --bg: #080c12; --bg-card: #111820; --bg-card-hover: #162030;
|
||
--text-secondary: #8b95a5; --cyan: #00E5FF; --cyan-dark: #00b8cc;
|
||
--accent: #818cf8; --accent-light: #a5b4fc;
|
||
--success: #4ade80; --warning: #fbbf24; --error: #f87171;
|
||
--border: #1e2738; --shadow: 0 4px 24px rgba(0,0,0,0.3);
|
||
--shadow-lg: 0 12px 48px rgba(0,0,0,0.4);
|
||
--gradient-hero: linear-gradient(135deg, #061a14 0%, #0a2e22 50%, #061a14 100%);
|
||
--gradient-accent: linear-gradient(135deg, #00E5FF 0%, #10b981 100%);
|
||
--gradient-card: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(0,229,255,0.08) 100%);
|
||
--glass: rgba(8,12,18,0.9); --glass-border: rgba(255,255,255,0.08);
|
||
--quran-green: #0a3d2e; --quran-gold: #d4a855;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font: 17px/1.6 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
color: var(--ink); background: var(--bg); transition: background 0.3s, color 0.3s;
|
||
}
|
||
|
||
.quran-text {
|
||
font-family: 'Amiri', 'Noto Naskh Arabic', serif;
|
||
direction: rtl; unicode-bidi: isolate;
|
||
line-height: 2.2; font-size: 28px;
|
||
}
|
||
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* NAV */
|
||
.nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
||
background: var(--glass); backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border); padding: 0 24px;
|
||
}
|
||
.nav-inner {
|
||
max-width: 1200px; margin: 0 auto;
|
||
display: flex; align-items: center; justify-content: space-between; height: 70px;
|
||
}
|
||
.nav-logo {
|
||
font-size: 22px; font-weight: 800; cursor: pointer;
|
||
background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
}
|
||
.nav-links { display: flex; gap: 28px; list-style: none; }
|
||
.nav-links a {
|
||
color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 15px;
|
||
transition: color 0.2s; cursor: pointer;
|
||
}
|
||
.nav-links a:hover { color: var(--cyan); }
|
||
.nav-actions { display: flex; align-items: center; gap: 12px; }
|
||
|
||
.theme-toggle {
|
||
width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border);
|
||
background: var(--bg-card); cursor: pointer; display: flex; align-items: center;
|
||
justify-content: center; font-size: 20px; transition: all 0.2s;
|
||
}
|
||
.theme-toggle:hover { border-color: var(--cyan); }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: 15px;
|
||
text-decoration: none; border: none; cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.btn-primary {
|
||
background: var(--gradient-accent); color: #fff;
|
||
box-shadow: 0 4px 16px rgba(16,185,129,0.3);
|
||
}
|
||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,185,129,0.4); }
|
||
.btn-secondary { background: var(--bg-card); color: var(--ink); border: 1px solid var(--border); }
|
||
.btn-secondary:hover { border-color: var(--cyan); }
|
||
.btn-outline { background: transparent; color: var(--cyan); border: 2px solid var(--cyan); }
|
||
.btn-outline:hover { background: var(--cyan); color: #0a3d2e; }
|
||
.btn-sm { padding: 8px 16px; font-size: 13px; }
|
||
.btn-lg { padding: 16px 32px; font-size: 17px; }
|
||
|
||
.hamburger {
|
||
display: none; width: 44px; height: 44px; border: none; background: none;
|
||
cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
|
||
}
|
||
.hamburger span { width: 24px; height: 2px; background: var(--ink); transition: all 0.3s; }
|
||
|
||
/* HERO */
|
||
.hero {
|
||
background: var(--gradient-hero); padding: 140px 24px 100px;
|
||
text-align: center; position: relative; overflow: hidden;
|
||
}
|
||
.hero::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: radial-gradient(circle at 30% 50%, rgba(212,168,85,0.1) 0%, transparent 50%),
|
||
radial-gradient(circle at 70% 50%, rgba(16,185,129,0.1) 0%, transparent 50%);
|
||
}
|
||
.hero::after {
|
||
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
|
||
background: linear-gradient(transparent, var(--bg));
|
||
}
|
||
|
||
.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
|
||
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
|
||
background: rgba(212,168,85,0.15); border: 1px solid rgba(212,168,85,0.3);
|
||
border-radius: 100px; color: var(--quran-gold); font-size: 14px; font-weight: 600; margin-bottom: 32px;
|
||
}
|
||
|
||
.hero-bismillah {
|
||
font-family: 'Amiri', serif; font-size: 52px; color: var(--quran-gold);
|
||
margin-bottom: 24px; direction: rtl; opacity: 0.95;
|
||
}
|
||
|
||
.hero h1 { font-size: 56px; font-weight: 800; line-height: 1.1; color: #fff; margin-bottom: 20px; }
|
||
.hero h1 span { color: var(--quran-gold); }
|
||
.hero p { font-size: 19px; color: #9aa3b2; max-width: 600px; margin: 0 auto 40px; }
|
||
|
||
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||
|
||
.hero-stats {
|
||
display: flex; gap: 48px; justify-content: center; margin-top: 60px;
|
||
padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.hero-stat h3 { font-size: 32px; font-weight: 800; color: var(--quran-gold); }
|
||
.hero-stat p { font-size: 14px; color: #9aa3b2; margin: 0; }
|
||
|
||
/* SECTIONS */
|
||
.section { padding: 100px 24px; }
|
||
.section-header { text-align: center; max-width: 650px; margin: 0 auto 60px; }
|
||
.section-header .badge {
|
||
display: inline-block; padding: 6px 16px; background: rgba(16,185,129,0.1);
|
||
color: #10b981; border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 16px;
|
||
}
|
||
.section-header h2 { font-size: 40px; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
|
||
.section-header p { color: var(--text-secondary); font-size: 18px; }
|
||
|
||
/* STEPS */
|
||
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
|
||
|
||
.step-card {
|
||
background: var(--bg-card); border-radius: 20px; padding: 32px;
|
||
border: 1px solid var(--border); text-align: center; position: relative;
|
||
transition: all 0.3s;
|
||
}
|
||
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
|
||
|
||
.step-number {
|
||
width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-accent);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; font-weight: 800; color: #fff; margin: 0 auto 20px;
|
||
}
|
||
|
||
.step-card .step-icon { font-size: 40px; margin-bottom: 16px; }
|
||
.step-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
|
||
.step-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
|
||
|
||
/* LESSONS */
|
||
.lesson-tabs {
|
||
display: flex; gap: 8px; margin-bottom: 32px; overflow-x: auto; padding-bottom: 8px;
|
||
scrollbar-width: thin;
|
||
}
|
||
.lesson-tab {
|
||
padding: 10px 20px; border-radius: 100px; border: 1px solid var(--border);
|
||
background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600;
|
||
cursor: pointer; white-space: nowrap; transition: all 0.2s;
|
||
}
|
||
.lesson-tab.active, .lesson-tab:hover {
|
||
background: var(--quran-green); color: #fff; border-color: var(--quran-green);
|
||
}
|
||
|
||
.lesson-content {
|
||
background: var(--bg-card); border-radius: 20px; padding: 40px;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.lesson-content h3 { font-size: 26px; margin-bottom: 24px; }
|
||
.lesson-text { margin-bottom: 24px; }
|
||
.lesson-text p { margin-bottom: 16px; line-height: 1.8; }
|
||
|
||
.letter-card {
|
||
background: var(--bg); border-radius: 16px; padding: 24px; margin-bottom: 16px;
|
||
border: 1px solid var(--border); display: flex; align-items: center; gap: 24px;
|
||
transition: all 0.2s; cursor: pointer;
|
||
}
|
||
.letter-card:hover { border-color: var(--quran-gold); box-shadow: var(--shadow); }
|
||
|
||
.letter-big {
|
||
font-family: 'Amiri', serif; font-size: 64px; color: var(--quran-green);
|
||
min-width: 100px; text-align: center; direction: rtl;
|
||
}
|
||
|
||
.letter-info h4 { font-size: 18px; margin-bottom: 4px; }
|
||
.letter-info .name { color: var(--quran-gold); font-weight: 700; font-size: 16px; }
|
||
.letter-info .transcription { color: var(--text-secondary); font-size: 14px; }
|
||
.letter-info .description { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
|
||
|
||
.letter-positions {
|
||
display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap;
|
||
}
|
||
.letter-position {
|
||
background: var(--bg-card); border-radius: 8px; padding: 8px 16px;
|
||
font-family: 'Amiri', serif; font-size: 28px; direction: rtl;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.letter-position small {
|
||
display: block; font-size: 11px; color: var(--text-secondary);
|
||
direction: ltr; text-align: center; font-family: 'Inter', sans-serif;
|
||
}
|
||
|
||
.audio-btn-sm {
|
||
width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
|
||
background: var(--bg-card); cursor: pointer; display: inline-flex; align-items: center;
|
||
justify-content: center; font-size: 16px; transition: all 0.2s;
|
||
}
|
||
.audio-btn-sm:hover { background: var(--quran-gold); border-color: var(--quran-gold); color: #fff; transform: scale(1.1); }
|
||
|
||
.learn-btn {
|
||
padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
|
||
background: var(--bg-card); cursor: pointer; font-size: 12px; font-weight: 600;
|
||
color: var(--text-secondary); transition: all 0.2s; margin-left: auto; white-space: nowrap;
|
||
}
|
||
.learn-btn:hover { background: var(--quran-green); border-color: var(--quran-green); color: #fff; }
|
||
|
||
.letter-card:hover .letter-big { color: var(--quran-gold); }
|
||
|
||
.ayat-example {
|
||
background: var(--bg); border-radius: 16px; padding: 32px;
|
||
border: 2px solid var(--quran-gold); margin: 24px 0; text-align: center;
|
||
}
|
||
.ayat-example .arabic {
|
||
font-family: 'Amiri', serif; font-size: 36px; color: var(--quran-green);
|
||
direction: rtl; line-height: 2; margin-bottom: 16px;
|
||
}
|
||
.ayat-example .transliteration {
|
||
font-style: italic; color: var(--text-secondary); margin-bottom: 8px;
|
||
}
|
||
.ayat-example .translation { font-weight: 600; }
|
||
.ayat-example .surah-name {
|
||
display: inline-block; margin-top: 12px; padding: 4px 16px;
|
||
background: rgba(212,168,85,0.1); color: var(--quran-gold); border-radius: 100px;
|
||
font-size: 13px; font-weight: 600;
|
||
}
|
||
|
||
.haraka-card {
|
||
background: var(--bg); border-radius: 12px; padding: 20px;
|
||
border: 1px solid var(--border); text-align: center;
|
||
transition: all 0.2s; cursor: pointer;
|
||
}
|
||
.haraka-card:hover { border-color: var(--quran-gold); transform: translateY(-2px); }
|
||
.haraka-card .symbol { font-family: 'Amiri', serif; font-size: 48px; color: var(--quran-gold); }
|
||
.haraka-card .name { font-size: 16px; font-weight: 700; margin: 8px 0 4px; }
|
||
.haraka-card .arabic-name { font-family: 'Amiri', serif; font-size: 18px; color: var(--quran-green); direction: rtl; }
|
||
.haraka-card .example {
|
||
font-family: 'Amiri', serif; font-size: 32px; color: var(--quran-green);
|
||
margin-top: 12px; direction: rtl;
|
||
}
|
||
|
||
.exercise-box {
|
||
background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.2);
|
||
border-radius: 16px; padding: 28px; margin-top: 24px;
|
||
}
|
||
.exercise-box h4 { font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
|
||
|
||
.exercise-input {
|
||
width: 100%; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--border);
|
||
background: var(--bg); color: var(--ink); font-size: 18px; outline: none;
|
||
margin-bottom: 12px; transition: border-color 0.2s;
|
||
}
|
||
.exercise-input:focus { border-color: var(--quran-gold); }
|
||
|
||
.exercise-feedback {
|
||
padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600;
|
||
display: none; margin-top: 8px;
|
||
}
|
||
.exercise-feedback.correct { display: block; background: rgba(34,197,94,0.1); color: var(--success); }
|
||
.exercise-feedback.wrong { display: block; background: rgba(239,68,68,0.1); color: var(--error); }
|
||
|
||
/* QUIZ */
|
||
.quiz-container { max-width: 700px; margin: 0 auto; }
|
||
|
||
.quiz-card {
|
||
background: var(--bg-card); border-radius: 20px; padding: 40px;
|
||
border: 1px solid var(--border); margin-bottom: 24px;
|
||
}
|
||
|
||
.quiz-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
|
||
.quiz-progress-bar { flex: 1; height: 8px; background: var(--border); border-radius: 100px; overflow: hidden; }
|
||
.quiz-progress-fill { height: 100%; background: var(--gradient-accent); border-radius: 100px; transition: width 0.3s; }
|
||
.quiz-progress-text { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
|
||
|
||
.quiz-question { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
|
||
.quiz-arabic {
|
||
font-family: 'Amiri', serif; font-size: 40px; color: var(--quran-green);
|
||
margin-bottom: 32px; direction: rtl;
|
||
}
|
||
|
||
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
|
||
|
||
.quiz-option {
|
||
padding: 16px 20px; border-radius: 12px; border: 2px solid var(--border);
|
||
background: var(--bg); cursor: pointer; font-size: 16px; text-align: left;
|
||
transition: all 0.2s; display: flex; align-items: center; gap: 12px;
|
||
}
|
||
.quiz-option:hover { border-color: var(--quran-gold); }
|
||
.quiz-option.selected { border-color: var(--accent); background: rgba(129,140,248,0.1); }
|
||
.quiz-option.correct { border-color: var(--success); background: rgba(34,197,94,0.1); }
|
||
.quiz-option.wrong { border-color: var(--error); background: rgba(239,68,68,0.1); }
|
||
|
||
.quiz-option .letter {
|
||
width: 32px; height: 32px; border-radius: 8px; background: var(--bg-card);
|
||
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
|
||
}
|
||
|
||
.quiz-actions { display: flex; justify-content: space-between; margin-top: 24px; }
|
||
|
||
.quiz-result { text-align: center; padding: 48px; }
|
||
.quiz-result .score-circle {
|
||
width: 160px; height: 160px; border-radius: 50%; background: var(--gradient-accent);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
margin: 0 auto 32px; color: #fff;
|
||
}
|
||
.quiz-result .score-circle .number { font-size: 48px; font-weight: 800; line-height: 1; }
|
||
.quiz-result .score-circle .label { font-size: 14px; opacity: 0.8; }
|
||
.quiz-result h3 { font-size: 28px; margin-bottom: 12px; }
|
||
.quiz-result p { color: var(--text-secondary); margin-bottom: 32px; }
|
||
|
||
/* VOCABULARY */
|
||
.vocab-section { background: var(--bg-card); }
|
||
|
||
.vocab-controls { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
|
||
|
||
.vocab-search {
|
||
flex: 1; min-width: 250px; padding: 14px 20px; border-radius: 12px;
|
||
border: 1px solid var(--border); background: var(--bg); color: var(--ink);
|
||
font-size: 16px; outline: none; transition: border-color 0.2s;
|
||
}
|
||
.vocab-search:focus { border-color: var(--quran-gold); }
|
||
|
||
.vocab-filters { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
|
||
.filter-btn {
|
||
padding: 10px 18px; border-radius: 100px; border: 1px solid var(--border);
|
||
background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600;
|
||
cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.filter-btn.active, .filter-btn:hover {
|
||
background: var(--quran-green); color: #fff; border-color: var(--quran-green);
|
||
}
|
||
|
||
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
|
||
|
||
.vocab-card {
|
||
background: var(--bg); border-radius: 16px; padding: 24px;
|
||
border: 1px solid var(--border); transition: all 0.3s; cursor: pointer; position: relative;
|
||
}
|
||
.vocab-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--quran-gold); }
|
||
|
||
.vocab-card .arabic-word {
|
||
font-family: 'Amiri', serif; font-size: 36px; font-weight: 700;
|
||
margin-bottom: 8px; color: var(--quran-green); direction: rtl; text-align: center;
|
||
}
|
||
.vocab-card .transcription { font-size: 14px; color: var(--text-secondary); margin-bottom: 6px; font-style: italic; text-align: center; }
|
||
.vocab-card .translation { font-size: 18px; font-weight: 600; margin-bottom: 12px; text-align: center; }
|
||
|
||
.vocab-card .example {
|
||
font-size: 13px; color: var(--text-secondary); padding: 12px;
|
||
background: var(--bg-card); border-radius: 8px; margin-top: 12px;
|
||
}
|
||
.vocab-card .example .arabic {
|
||
font-family: 'Amiri', serif; font-size: 20px; color: var(--quran-green);
|
||
margin-bottom: 4px; direction: rtl;
|
||
}
|
||
|
||
.vocab-card .category-tag {
|
||
position: absolute; top: 16px; right: 16px; padding: 4px 12px;
|
||
background: rgba(212,168,85,0.1); color: var(--quran-gold); border-radius: 100px;
|
||
font-size: 11px; font-weight: 600;
|
||
}
|
||
|
||
.vocab-card .audio-btn {
|
||
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
|
||
background: var(--bg-card); cursor: pointer; display: flex; align-items: center;
|
||
justify-content: center; font-size: 18px; transition: all 0.2s; margin: 12px auto 0;
|
||
}
|
||
.vocab-card .audio-btn:hover { background: var(--quran-gold); border-color: var(--quran-gold); color: #fff; }
|
||
|
||
.audio-btn {
|
||
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
|
||
background: var(--bg-card); cursor: pointer; display: inline-flex; align-items: center;
|
||
justify-content: center; font-size: 18px; transition: all 0.2s;
|
||
}
|
||
.audio-btn:hover { background: var(--quran-gold); border-color: var(--quran-gold); color: #fff; }
|
||
|
||
.vocab-card .fav-btn {
|
||
position: absolute; top: 16px; left: 16px; width: 36px; height: 36px;
|
||
border-radius: 50%; border: none; background: transparent; cursor: pointer;
|
||
font-size: 18px; transition: all 0.2s;
|
||
}
|
||
.vocab-card .fav-btn:hover { transform: scale(1.2); }
|
||
.vocab-card .fav-btn.active { color: var(--error); }
|
||
|
||
/* DASHBOARD */
|
||
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
|
||
|
||
.stat-card {
|
||
background: var(--bg-card); border-radius: 16px; padding: 24px;
|
||
border: 1px solid var(--border); text-align: center;
|
||
}
|
||
.stat-card .stat-icon { font-size: 32px; margin-bottom: 12px; }
|
||
.stat-card .stat-value { font-size: 32px; font-weight: 800; color: var(--quran-gold); margin-bottom: 4px; }
|
||
.stat-card .stat-label { font-size: 14px; color: var(--text-secondary); }
|
||
|
||
.streak-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 16px; }
|
||
.streak-day { width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--border); }
|
||
.streak-day.active { background: var(--quran-green); }
|
||
.streak-day.today { background: var(--quran-gold); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--quran-gold); }
|
||
|
||
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
|
||
|
||
.achievement-card {
|
||
background: var(--bg-card); border-radius: 14px; padding: 16px;
|
||
border: 1px solid var(--border); text-align: center; transition: all 0.3s;
|
||
}
|
||
.achievement-card.locked { opacity: 0.4; }
|
||
.achievement-card .achievement-icon { font-size: 36px; margin-bottom: 8px; }
|
||
.achievement-card h4 { font-size: 14px; margin-bottom: 4px; }
|
||
.achievement-card p { font-size: 11px; color: var(--text-secondary); }
|
||
|
||
.daily-goal {
|
||
background: var(--bg-card); border-radius: 16px; padding: 24px;
|
||
border: 1px solid var(--border); margin-bottom: 24px;
|
||
}
|
||
.daily-goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||
.daily-goal-header h4 { font-size: 18px; }
|
||
.daily-goal-progress { height: 12px; background: var(--border); border-radius: 100px; overflow: hidden; }
|
||
.daily-goal-bar { height: 100%; background: var(--gradient-accent); border-radius: 100px; transition: width 0.5s; }
|
||
.daily-goal-text { font-size: 14px; color: var(--text-secondary); margin-top: 8px; }
|
||
|
||
/* FAQ */
|
||
.faq-list { max-width: 800px; margin: 0 auto; }
|
||
.faq-item { border-bottom: 1px solid var(--border); }
|
||
.faq-question {
|
||
width: 100%; padding: 20px 0; background: none; border: none; color: var(--ink);
|
||
font-size: 18px; font-weight: 600; cursor: pointer; display: flex;
|
||
justify-content: space-between; align-items: center; text-align: left;
|
||
}
|
||
.faq-question .icon { font-size: 24px; transition: transform 0.3s; }
|
||
.faq-item.open .faq-question .icon { transform: rotate(45deg); }
|
||
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
|
||
.faq-item.open .faq-answer { max-height: 250px; }
|
||
.faq-answer p { padding-bottom: 20px; color: var(--text-secondary); line-height: 1.8; }
|
||
|
||
/* FOOTER */
|
||
.footer { background: var(--gradient-hero); padding: 60px 24px 32px; color: #fff; }
|
||
.footer-content { text-align: center; max-width: 500px; margin: 0 auto; }
|
||
.footer-content h3 {
|
||
font-size: 24px; font-weight: 800; margin-bottom: 12px;
|
||
background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
}
|
||
.footer-content p { color: #9aa3b2; font-size: 14px; margin-bottom: 24px; }
|
||
.footer-bottom { text-align: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); color: #9aa3b2; font-size: 13px; }
|
||
|
||
/* TOAST */
|
||
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
|
||
.toast {
|
||
padding: 16px 24px; background: var(--bg); border: 1px solid var(--border);
|
||
border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; align-items: center;
|
||
gap: 12px; animation: slideIn 0.3s ease; min-width: 280px;
|
||
}
|
||
.toast.success { border-left: 4px solid var(--success); }
|
||
.toast.error { border-left: 4px solid var(--error); }
|
||
.toast.info { border-left: 4px solid var(--cyan); }
|
||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||
|
||
/* MODAL */
|
||
.modal-overlay {
|
||
position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
|
||
z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px;
|
||
opacity: 0; pointer-events: none; transition: opacity 0.3s;
|
||
}
|
||
.modal-overlay.active { opacity: 1; pointer-events: all; }
|
||
.modal {
|
||
background: var(--bg); border-radius: 24px; padding: 40px; max-width: 450px;
|
||
width: 100%; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform 0.3s;
|
||
}
|
||
.modal-overlay.active .modal { transform: translateY(0); }
|
||
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
|
||
.modal-header h3 { font-size: 22px; }
|
||
.modal-close {
|
||
width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
|
||
background: var(--bg-card); cursor: pointer; font-size: 20px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.form-group { margin-bottom: 18px; }
|
||
.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
|
||
.form-group input {
|
||
width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
|
||
background: var(--bg-card); color: var(--ink); font-size: 15px; outline: none; transition: border-color 0.2s;
|
||
}
|
||
.form-group input:focus { border-color: var(--quran-gold); }
|
||
.form-error { font-size: 13px; color: var(--error); margin-top: 4px; }
|
||
|
||
/* MOBILE NAV */
|
||
.mobile-menu {
|
||
display: none; position: fixed; top: 70px; left: 0; right: 0;
|
||
background: var(--bg); border-bottom: 1px solid var(--border); padding: 24px; z-index: 999;
|
||
}
|
||
.mobile-menu.active { display: block; }
|
||
.mobile-menu a { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 18px; cursor: pointer; }
|
||
|
||
.page { display: none; }
|
||
.page.active { display: block; }
|
||
|
||
@media (max-width: 1024px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (max-width: 768px) {
|
||
.nav-links { display: none; } .hamburger { display: flex; }
|
||
.hero { padding: 120px 20px 60px; } .hero h1 { font-size: 32px; } .hero-bismillah { font-size: 36px; }
|
||
.hero-stats { flex-direction: column; gap: 20px; } .section { padding: 60px 20px; }
|
||
.section-header h2 { font-size: 28px; } .steps-grid { grid-template-columns: 1fr; }
|
||
.dashboard-grid { grid-template-columns: 1fr 1fr; } .vocab-grid { grid-template-columns: 1fr; }
|
||
.quiz-card { padding: 24px; } .lesson-content { padding: 24px; }
|
||
.letter-card { flex-direction: column; text-align: center; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.hero h1 { font-size: 26px; } .hero-bismillah { font-size: 28px; }
|
||
.dashboard-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; }
|
||
.hero-actions .btn { width: 100%; }
|
||
}
|
||
|
||
::-webkit-scrollbar { width: 8px; }
|
||
::-webkit-scrollbar-track { background: var(--bg); }
|
||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||
|
||
.fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
|
||
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<span class="nav-logo" onclick="showPage('home')">QuranReader</span>
|
||
<ul class="nav-links">
|
||
<li><a onclick="showPage('home')">Главная</a></li>
|
||
<li><a onclick="showPage('alphabet')">Алфавит</a></li>
|
||
<li><a onclick="showPage('harakaat')">Огласовки</a></li>
|
||
<li><a onclick="showPage('surahs')">Суры</a></li>
|
||
<li><a onclick="showPage('vocabulary')">Словарь</a></li>
|
||
<li><a onclick="showPage('quiz')">Тесты</a></li>
|
||
<li><a onclick="showPage('dashboard')">Прогресс</a></li>
|
||
</ul>
|
||
<div class="nav-actions">
|
||
<button class="theme-toggle" onclick="toggleTheme()">🌙</button>
|
||
<button class="hamburger" onclick="toggleMobile()"><span></span><span></span><span></span></button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="mobile-menu" id="mobileMenu">
|
||
<a onclick="showPage('home');toggleMobile()">Главная</a>
|
||
<a onclick="showPage('alphabet');toggleMobile()">Алфавит</a>
|
||
<a onclick="showPage('harakaat');toggleMobile()">Огласовки</a>
|
||
<a onclick="showPage('surahs');toggleMobile()">Суры</a>
|
||
<a onclick="showPage('vocabulary');toggleMobile()">Словарь</a>
|
||
<a onclick="showPage('quiz');toggleMobile()">Тесты</a>
|
||
<a onclick="showPage('dashboard');toggleMobile()">Прогресс</a>
|
||
</div>
|
||
|
||
<!-- HOME -->
|
||
<div class="page active" id="page-home">
|
||
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">بسم الله الرحمن الرحيم</div>
|
||
<div class="hero-bismillah">اقْرَأْ بِاسْمِ رَبِّكَ الَّذِي خَلَقَ</div>
|
||
<h1>Читай <span>Коран</span> на арабском</h1>
|
||
<p>Пошаговый курс от алфавита до чтения сур. Огласовки, таджвид, практика — всё для правильного чтения Священного Писания.</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-primary btn-lg" onclick="showPage('alphabet')">Начать с алфавита</a>
|
||
<a class="btn btn-outline btn-lg" onclick="showPage('harakaat')">Изучить огласовки</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat"><h3>28</h3><p>Букв алфавита</p></div>
|
||
<div class="hero-stat"><h3>6</h3><p>Огласовок</p></div>
|
||
<div class="hero-stat"><h3>114</h3><p>Сур</p></div>
|
||
<div class="hero-stat"><h3>0→📖</h3><p>От нуля до чтения</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="steps">
|
||
<div class="container">
|
||
<div class="section-header fade-in">
|
||
<div class="badge">ПУТЬ К ЧТЕНИЮ</div>
|
||
<h2>4 шага к чтению Корана</h2>
|
||
<p>Последовательная программа для начинающих</p>
|
||
</div>
|
||
<div class="steps-grid">
|
||
<div class="step-card fade-in" onclick="showPage('alphabet')">
|
||
<div class="step-number">1</div>
|
||
<div class="step-icon">🔤</div>
|
||
<h3>Алфавит</h3>
|
||
<p>28 букв арабского алфавита. Формы букв в начале, середине и конце слова.</p>
|
||
</div>
|
||
<div class="step-card fade-in" onclick="showPage('harakaat')">
|
||
<div class="step-number">2</div>
|
||
<div class="step-icon"> vowelmarks</div>
|
||
<h3>Огласовки</h3>
|
||
<p>Фатха, дамма, касра. Сукун, шадда, танвин. Как читать гласные.</p>
|
||
</div>
|
||
<div class="step-card fade-in" onclick="showPage('vocabulary')">
|
||
<div class="step-number">3</div>
|
||
<div class="step-icon">📖</div>
|
||
<h3>Словарь</h3>
|
||
<p>Частые слова Корана. Значения и произношение ключевых слов.</p>
|
||
</div>
|
||
<div class="step-card fade-in" onclick="showPage('quiz')">
|
||
<div class="step-number">4</div>
|
||
<div class="step-icon">✅</div>
|
||
<h3>Практика</h3>
|
||
<p>Тесты на чтение, запоминание букв, узнавание огласовок.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:var(--bg-card)">
|
||
<div class="container">
|
||
<div class="section-header fade-in">
|
||
<div class="badge">ПРИМЕР</div>
|
||
<h2>Сура Аль-Фатиха</h2>
|
||
<p>Открывающая сура — читается в каждом ракаате</p>
|
||
</div>
|
||
<div class="ayat-example fade-in">
|
||
<div class="arabic">الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ</div>
|
||
<div class="transliteration">Аль-хамду лилляхи раббиль-‘алямин</div>
|
||
<div class="translation">Хвала Аллаху, Господу миров</div>
|
||
<div class="surah-name">Сура Аль-Фатиха, аят 2</div>
|
||
</div>
|
||
<div class="ayat-example fade-in">
|
||
<div class="arabic">مَالِكِ يَوْمِ الدِّينِ</div>
|
||
<div class="transliteration">Малики йаумид-дин</div>
|
||
<div class="translation">Владыке Дня воздаяния</div>
|
||
<div class="surah-name">Сура Аль-Фатиха, аят 4</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="faq">
|
||
<div class="container">
|
||
<div class="section-header fade-in">
|
||
<div class="badge">ВОПРОСЫ</div>
|
||
<h2>Частые вопросы</h2>
|
||
</div>
|
||
<div class="faq-list">
|
||
<div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Нужно ли знать арабский?<span class="icon">+</span></button><div class="faq-answer"><p>Нет! Мы начинаем с самого нуля — с букв алфавита. Каждый шаг объясняется подробно.</p></div></div>
|
||
<div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Чем Коранический арабский отличается от обычного?<span class="icon">+</span></button><div class="faq-answer"><p>Коранический арабский — это классический арабский с особым стилем и правилами произношения (таджвид). Основа та же, но есть свои особенности.</p></div></div>
|
||
<div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Сколько времени займёт научиться читать?<span class="icon">+</span></button><div class="faq-answer"><p>При занятиях 15-20 минут в день, базовое чтение возможно через 2-3 месяца. Всё зависит от регулярности практики.</p></div></div>
|
||
<div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Это бесплатно?<span class="icon">+</span></button><div class="faq-answer"><p>Да, полностью бесплатно. Никаких подписок или скрытых платежей.</p></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<h3>QuranReader</h3>
|
||
<p>Бесплатная платформа для изучения арабского языка и чтения Корана. ربي زدني علما</p>
|
||
</div>
|
||
<div class="footer-bottom">© 2026 QuranReader</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<!-- ALPHABET PAGE -->
|
||
<div class="page" id="page-alphabet">
|
||
<section class="section" style="padding-top:120px">
|
||
<div class="container">
|
||
<div class="section-header"><div class="badge">ШАГ 1</div><h2>Арабский алфавит</h2><p>28 букв — основа чтения Корана</p></div>
|
||
<div style="text-align:center;margin-bottom:24px">
|
||
<button class="btn btn-primary" onclick="playAllLetters()">🔊 Прослушать все буквы</button>
|
||
<p style="font-size:13px;color:var(--text-secondary);margin-top:8px">Нажмите на букву или 🔊 чтобы услышать произношение</p>
|
||
</div>
|
||
<div id="alphabetGrid"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- HARAKAAT PAGE -->
|
||
<div class="page" id="page-harakaat">
|
||
<section class="section" style="padding-top:120px">
|
||
<div class="container">
|
||
<div class="section-header"><div class="badge">ШАГ 2</div><h2>Огласовки (Харакāт)</h2><p>Гласные знаки арабского языка</p></div>
|
||
|
||
<h3 style="margin-bottom:24px;text-align:center">Основные огласовки</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px" id="harakaatGrid"></div>
|
||
|
||
<h3 style="margin-bottom:24px;text-align:center">Дополнительные знаки</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px" id="extraMarksGrid"></div>
|
||
|
||
<div class="ayat-example">
|
||
<div class="arabic">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</div>
|
||
<div class="transliteration">Бисмилляхи ррахмани ррахим</div>
|
||
<div class="translation">Во имя Аллаха, Милостивого, Милосердного</div>
|
||
<div class="surah-name">Басмала</div>
|
||
</div>
|
||
|
||
<div class="exercise-box">
|
||
<h4>✏️ Практика</h4>
|
||
<p style="margin-bottom:16px">Какая огласовка над буквой в слове <span class="quran-text" style="font-size:24px">كَ</span>?</p>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap">
|
||
<button class="btn btn-secondary" onclick="checkHarakaExercise(this,'correct')">Фатха</button>
|
||
<button class="btn btn-secondary" onclick="checkHarakaExercise(this,'wrong')">Дамма</button>
|
||
<button class="btn btn-secondary" onclick="checkHarakaExercise(this,'wrong')">Касра</button>
|
||
</div>
|
||
<div class="exercise-feedback" id="haraka-feedback"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- VOCABULARY PAGE -->
|
||
<div class="page" id="page-vocabulary">
|
||
<section class="section vocab-section" style="padding-top:120px">
|
||
<div class="container">
|
||
<div class="section-header"><div class="badge">СЛОВАРЬ</div><h2>Коранический словарь</h2><p>Самые частые слова Священного Корана</p></div>
|
||
<div class="vocab-controls">
|
||
<input type="text" class="vocab-search" placeholder="Поиск слов..." oninput="filterVocab()">
|
||
<div class="vocab-filters">
|
||
<button class="filter-btn active" onclick="setFilter('all')">Все</button>
|
||
<button class="filter-btn" onclick="setFilter('attributes')">Имена Аллаха</button>
|
||
<button class="filter-btn" onclick="setFilter('common')">Частые</button>
|
||
<button class="filter-btn" onclick="setFilter('people')">Люди</button>
|
||
<button class="filter-btn" onclick="setFilter('nature')">Природа</button>
|
||
<button class="filter-btn" onclick="setFilter('actions')">Действия</button>
|
||
</div>
|
||
</div>
|
||
<div class="vocab-grid" id="vocabGrid"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- QUIZ PAGE -->
|
||
<div class="page" id="page-quiz">
|
||
<section class="section" style="padding-top:120px">
|
||
<div class="container">
|
||
<div class="section-header"><div class="badge">ТЕСТЫ</div><h2>Проверь знания</h2><p>Закрепи изученный материал</p></div>
|
||
<div id="quizTypeSelector" style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px">
|
||
<div class="step-card" style="cursor:pointer;border:2px solid var(--quran-gold)" onclick="selectQuizType('letters')"><div class="step-icon">🔤</div><h3>Буквы</h3><p>Узнавание букв алфавита</p></div>
|
||
<div class="step-card" style="cursor:pointer" onclick="selectQuizType('harakaat')"><div class="step-icon"> vowelmarks</div><h3>Огласовки</h3><p>Определение харакāт</p></div>
|
||
<div class="step-card" style="cursor:pointer" onclick="selectQuizType('words')"><div class="step-icon">📖</div><h3>Слова</h3><p>Перевод коранических слов</p></div>
|
||
<div class="step-card" style="cursor:pointer" onclick="selectQuizType('ayat')"><div class="step-icon">📜</div><h3>Аяты</h3><p>Знание сур и аятов</p></div>
|
||
</div>
|
||
<div class="quiz-container" id="quizContainer"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- SURAHS PAGE -->
|
||
<div class="page" id="page-surahs">
|
||
<section class="section" style="padding-top:120px">
|
||
<div class="container">
|
||
<div class="section-header"><div class="badge">СУРЫ</div><h2>Суры для чтения</h2><p>Изучите суры Корана с транскрипцией и переводом</p></div>
|
||
|
||
<!-- Surah selector -->
|
||
<div style="display:flex;gap:12px;margin-bottom:40px;justify-content:center;flex-wrap:wrap">
|
||
<button class="btn btn-primary" id="btn-fatihah" onclick="showSurah('fatihah')">Сура Аль-Фатиха</button>
|
||
<button class="btn btn-secondary" id="btn-ikhlas" onclick="showSurah('ikhlas')">Сура Аль-Ихлас</button>
|
||
</div>
|
||
|
||
<!-- Al-Fatihah -->
|
||
<div id="surah-fatihah">
|
||
<div style="text-align:center;margin-bottom:40px">
|
||
<div style="font-family:'Amiri',serif;font-size:48px;color:var(--quran-gold);direction:rtl;margin-bottom:8px">سُورَةُ الْفَاتِحَة</div>
|
||
<h3 style="font-size:28px;margin-bottom:8px">Сура Аль-Фатиха</h3>
|
||
<p style="color:var(--text-secondary)">«Открывающая» — 7 аятов, Мекканская сура</p>
|
||
<p style="color:var(--text-secondary);font-size:14px;margin-top:8px">Читается в каждом ракаате молитвы</p>
|
||
</div>
|
||
|
||
<!-- Basmala -->
|
||
<div class="ayat-example" style="border-color:var(--quran-gold);background:rgba(212,168,85,0.03)">
|
||
<div class="arabic quran-text" style="font-size:40px">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</div>
|
||
<div class="transliteration">Бисмилляхи ррахмани ррахим</div>
|
||
<div class="translation" style="font-size:18px">Во имя Аллаха, Милостивого, Милосердного</div>
|
||
<div class="surah-name">Басмала</div>
|
||
</div>
|
||
|
||
<!-- Ayah 1 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 1</div>
|
||
<button class="audio-btn" onclick="speak('الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:40px">الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ</div>
|
||
<div class="transliteration">Аль-хамду лилляхи раббиль-‘алямин</div>
|
||
<div class="translation" style="font-size:18px">Хвала Аллаху, Господу миров</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>الْحَمْدُ</b> (аль-хамд) — хвала | <b>لِلَّهِ</b> (лиллях) — Аллаху | <b>رَبِّ</b> (рабб) — Господь | <b>الْعَالَمِينَ</b> (аль-‘алямин) — миров</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 2 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 2</div>
|
||
<button class="audio-btn" onclick="speak('الرَّحْمَنِ الرَّحِيمِ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:40px">الرَّحْمَنِ الرَّحِيمِ</div>
|
||
<div class="transliteration">Ар-Рахмани ррахим</div>
|
||
<div class="translation" style="font-size:18px">Милостивого, Милосердного</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>الرَّحْمَنِ</b> (ар-рахман) — Милостивый | <b>الرَّحِيمِ</b> (ар-рахим) — Милосердный</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 3 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 3</div>
|
||
<button class="audio-btn" onclick="speak('مَالِكِ يَوْمِ الدِّينِ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:40px">مَالِكِ يَوْمِ الدِّينِ</div>
|
||
<div class="transliteration">Малики йаумид-дин</div>
|
||
<div class="translation" style="font-size:18px">Владыке Дня воздаяния</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>مَالِكِ</b> (малик) — Владыка | <b>يَوْمِ</b> (йаум) — День | <b>الدِّينِ</b> (ад-дин) — воздаяния, Суда</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 4 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 4</div>
|
||
<button class="audio-btn" onclick="speak('إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:40px">إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ</div>
|
||
<div class="transliteration">Иййака на‘буду ва иййака наста‘ин</div>
|
||
<div class="translation" style="font-size:18px">Тебе одному мы поклоняемся и Тебя одного просим о помощи</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>إِيَّاكَ</b> (иййака) — Тебе | <b>نَعْبُدُ</b> (на‘буду) — поклоняемся | <b>نَسْتَعِينُ</b> (наста‘ин) — просим помощи</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 5 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 5</div>
|
||
<button class="audio-btn" onclick="speak('اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:40px">اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ</div>
|
||
<div class="transliteration">Ихдина ссыраталь-мустаким</div>
|
||
<div class="translation" style="font-size:18px">Веди нас прямым путём</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>اهْدِنَا</b> (ихдина) — веди нас | <b>الصِّرَاطَ</b> (ассырат) — путь | <b>الْمُسْتَقِيمَ</b> (аль-мустаким) — прямой</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 6 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 6</div>
|
||
<button class="audio-btn" onclick="speak('صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:40px">صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ</div>
|
||
<div class="transliteration">Сыраталлязина ан‘амта ‘алайхим гайриль-магдуби ‘алайхим валяд-дваллин</div>
|
||
<div class="translation" style="font-size:18px">Путь тех, кого Ты облагодетельствовал, не тех, на кого пал гнев, и не заблудших</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>الَّذِينَ</b> (аллязина) — тех, кто | <b>أَنْعَمْتَ</b> (ан‘амта) — облагодетельствовал | <b>الْمَغْضُوبِ</b> (аль-магдуб) — разгневанных | <b>الضَّالِّينَ</b> (ад-дваллин) — заблудших</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Full surah -->
|
||
<div class="ayat-example" style="background:var(--quran-green);color:#fff;border:none">
|
||
<div style="font-size:14px;opacity:0.8;margin-bottom:16px">Полный текст суры</div>
|
||
<div class="quran-text" style="font-size:36px;color:var(--quran-gold);line-height:2.4">
|
||
بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ ﴿١﴾ الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ ﴿٢﴾ الرَّحْمَنِ الرَّحِيمِ ﴿٣﴾ مَالِكِ يَوْمِ الدِّينِ ﴿٤﴾ إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ ﴿٥﴾ اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ ﴿٦﴾ صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ ﴿٧﴾
|
||
</div>
|
||
<button class="btn" style="margin-top:20px;background:var(--quran-gold);color:var(--quran-green)" onclick="speakFullSurah('fatihah')">🔊 Слушать всю суру</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Al-Ikhlas -->
|
||
<div id="surah-ikhlas" style="display:none">
|
||
<div style="text-align:center;margin-bottom:40px">
|
||
<div style="font-family:'Amiri',serif;font-size:48px;color:var(--quran-gold);direction:rtl;margin-bottom:8px">سُورَةُ الْإِخْلَاص</div>
|
||
<h3 style="font-size:28px;margin-bottom:8px">Сура Аль-Ихлас</h3>
|
||
<p style="color:var(--text-secondary)">«Искренность» — 4 аята, Мекканская сура</p>
|
||
<p style="color:var(--text-secondary);font-size:14px;margin-top:8px">Равна одной трети Корана по значению</p>
|
||
</div>
|
||
|
||
<!-- Ayah 1 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 1</div>
|
||
<button class="audio-btn" onclick="speak('قُلْ هُوَ اللَّهُ أَحَدٌ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:44px">قُلْ هُوَ اللَّهُ أَحَدٌ</div>
|
||
<div class="transliteration">Куль хуаллаху ахад</div>
|
||
<div class="translation" style="font-size:18px">Скажи: «Он — Аллах Единый»</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>قُلْ</b> (куль) — скажи | <b>هُوَ</b> (хува) — Он | <b>اللَّهُ</b> (Аллах) — Аллах | <b>أَحَدٌ</b> (ахад) — Единый</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 2 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 2</div>
|
||
<button class="audio-btn" onclick="speak('اللَّهُ الصَّمَدُ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:44px">اللَّهُ الصَّمَدُ</div>
|
||
<div class="transliteration">Аллаху ссадам</div>
|
||
<div class="translation" style="font-size:18px">Аллах — Вечный (Тот, в Котором нуждаются все)</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>اللَّهُ</b> (Аллах) — Аллах | <b>الصَّمَدُ</b> (ассамад) — Вечный, Тот, к Которому обращаются в нужде</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 3 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 3</div>
|
||
<button class="audio-btn" onclick="speak('لَمْ يَلِدْ وَلَمْ يُولَدْ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:44px">لَمْ يَلِدْ وَلَمْ يُولَدْ</div>
|
||
<div class="transliteration">Лам йалид ва лам йуляд</div>
|
||
<div class="translation" style="font-size:18px">Он не родил и не был рожден</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>لَمْ</b> (лам) — не | <b>يَلِدْ</b> (йалид) — родил | <b>يُولَدْ</b> (йуляд) — был рожден</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ayah 4 -->
|
||
<div class="ayat-example">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<div class="surah-name" style="margin:0">Аят 4</div>
|
||
<button class="audio-btn" onclick="speak('وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ')" style="margin:0">🔊</button>
|
||
</div>
|
||
<div class="arabic quran-text" style="font-size:44px">وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ</div>
|
||
<div class="transliteration">Ва лам йакун лаху куфуван ахад</div>
|
||
<div class="translation" style="font-size:18px">И нет никого равного Ему</div>
|
||
<div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
|
||
<p style="font-size:14px;color:var(--text-secondary)"><b>وَلَمْ</b> (ва лам) — и не | <b>يَكُن</b> (йакун) — было | <b>كُفُوًا</b> (куфуван) — равного | <b>أَحَدٌ</b> (ахад) — никто</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Full surah -->
|
||
<div class="ayat-example" style="background:var(--quran-green);color:#fff;border:none">
|
||
<div style="font-size:14px;opacity:0.8;margin-bottom:16px">Полный текст суры</div>
|
||
<div class="quran-text" style="font-size:40px;color:var(--quran-gold);line-height:2.4">
|
||
قُلْ هُوَ اللَّهُ أَحَدٌ ﴿١﴾ اللَّهُ الصَّمَدُ ﴿٢﴾ لَمْ يَلِدْ وَلَمْ يُولَدْ ﴿٣﴾ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ ﴿٤﴾
|
||
</div>
|
||
<button class="btn" style="margin-top:20px;background:var(--quran-gold);color:var(--quran-green)" onclick="speakFullSurah('ikhlas')">🔊 Слушать всю суру</button>
|
||
</div>
|
||
|
||
<!-- Tafsir -->
|
||
<div style="background:var(--bg-card);border-radius:16px;padding:32px;margin-top:32px;border:1px solid var(--border)">
|
||
<h4 style="margin-bottom:16px;font-size:20px">📖 О сурах</h4>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
|
||
<div>
|
||
<h5 style="margin-bottom:8px;color:var(--quran-gold)">Аль-Фатиха</h5>
|
||
<p style="font-size:14px;color:var(--text-secondary);line-height:1.8">«Открывающая Книгу» — первая сура Корана, состоящая из 7 аятов. Читается в каждом ракаате молитвы. Содержит хвалу Аллаху, признание Его единственности и мольбу о прямом пути. Называется также «Матерью Книги» (Умм аль-Китаб).</p>
|
||
</div>
|
||
<div>
|
||
<h5 style="margin-bottom:8px;color:var(--quran-gold)">Аль-Ихлас</h5>
|
||
<p style="font-size:14px;color:var(--text-secondary);line-height:1.8">«Искренность» — 112-я сура Корана, состоящая из 4 аятов. В ней содержится чистое единобожие (таухид). Пророк ﷺ сказал: «Скажи: Он — Аллах Единый» равна одной трети Корана, потому что в ней говорится о сущности Аллаха.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Practice -->
|
||
<div class="exercise-box" style="margin-top:24px">
|
||
<h4>✏️ Практика чтения</h4>
|
||
<p style="margin-bottom:16px">Попробуйте прочитать первый аят суры Аль-Ихлас:</p>
|
||
<div class="quran-text" style="font-size:36px;text-align:center;margin:20px 0;color:var(--quran-green)">قُلْ هُوَ اللَّهُ أَحَدٌ</div>
|
||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
|
||
<button class="btn btn-secondary" onclick="speak('قُلْ هُوَ اللَّهُ أَحَدٌ')">🔊 Послушать</button>
|
||
<button class="btn btn-primary" onclick="markSurahPracticed('ikhlas-1')">✅ Я прочитал</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- DASHBOARD PAGE -->
|
||
<div class="page" id="page-dashboard">
|
||
<section class="section" style="padding-top:120px">
|
||
<div class="container">
|
||
<div class="section-header"><div class="badge">ПРОГРЕСС</div><h2>Мой прогресс</h2><p>Отслеживай свой путь к чтению Корана</p></div>
|
||
<div id="dailyGoal"></div>
|
||
<div class="dashboard-grid" id="dashboardStats"></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px">
|
||
<div><h3 style="margin-bottom:16px">📅 Активность</h3><div class="streak-calendar" id="streakCalendar"></div></div>
|
||
<div><h3 style="margin-bottom:16px">🏆 Достижения</h3><div class="achievements-grid" id="achievementsGrid"></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<script>
|
||
const alphabetData = [
|
||
{letter:"ا",name:"Алиф",transcription:"'",description:"Гласная «а». Самая первая буква.",positions:{initial:"ا",middle:"ـا",final:"ـا",isolated:"ا"}},
|
||
{letter:"ب",name:"Ба",transcription:"b",description:"Согласная «б». Вторая буква — в слове «Бисмиллях».",positions:{initial:"بـ",middle:"ـبـ",final:"ـب",isolated:"ب"}},
|
||
{letter:"ت",name:"Та",transcription:"t",description:"Согласная «т». Похожа на ба, но точки сверху.",positions:{initial:"تـ",middle:"ـتـ",final:"ـت",isolated:"ت"}},
|
||
{letter:"ث",name:"С̱а",transcription:"th",description:"Межзубная «с». Как английское «th» в «think».",positions:{initial:"ثـ",middle:"ـثـ",final:"ـث",isolated:"ث"}},
|
||
{letter:"ج",name:"Джим",transcription:"j",description:"Согласная «дж». Похожа на ха с точкой.",positions:{initial:"جـ",middle:"ـجـ",final:"ـج",isolated:"ج"}},
|
||
{letter:"ح",name:"Х̣а",transcription:"ḥ",description:"Глухое «х». Из гортани.",positions:{initial:"حـ",middle:"ـحـ",final:"ـح",isolated:"ح"}},
|
||
{letter:"خ",name:"Ха",transcription:"kh",description:"Звонкое «х». Как немецкое «ch».",positions:{initial:"خـ",middle:"ـخـ",final:"ـخ",isolated:"خ"}},
|
||
{letter:"د",name:"Даль",transcription:"d",description:"Согласная «д». Не соединяется слева.",positions:{initial:"د",middle:"ـد",final:"ـد",isolated:"د"}},
|
||
{letter:"ذ",name:"Заль",transcription:"dh",description:"Межзубная «з». Как английское «th» в «this».",positions:{initial:"ذ",middle:"ـذ",final:"ـذ",isolated:"ذ"}},
|
||
{letter:"ر",name:"Ра",transcription:"r",description:"Согласная «р». Не соединяется слева.",positions:{initial:"ر",middle:"ـر",final:"ـر",isolated:"ر"}},
|
||
{letter:"ز",name:"Зай",transcription:"z",description:"Согласная «з». Не соединяется слева.",positions:{initial:"ز",middle:"ـز",final:"ـز",isolated:"ز"}},
|
||
{letter:"س",name:"Син",transcription:"s",description:"Согласная «с». Три точки сверху.",positions:{initial:"سـ",middle:"ـسـ",final:"ـس",isolated:"س"}},
|
||
{letter:"ش",name:"Шин",transcription:"sh",description:"Согласная «ш». Три точки.",positions:{initial:"شـ",middle:"ـشـ",final:"ـش",isolated:"ش"}},
|
||
{letter:"ص",name:"Сад",transcription:"ṣ",description:"Эмфатическая «с». Глубже обычной.",positions:{initial:"صـ",middle:"ـصـ",final:"ـص",isolated:"ص"}},
|
||
{letter:"ض",name:"Дад",transcription:"ḍ",description:"Эмфатическая «д». Уникальна для арабского.",positions:{initial:"ضـ",middle:"ـضـ",final:"ـض",isolated:"ض"}},
|
||
{letter:"ط",name:"Та",transcription:"ṭ",description:"Эмфатическая «т». Глубже обычной.",positions:{initial:"طـ",middle:"ـطـ",final:"ـط",isolated:"ط"}},
|
||
{letter:"ظ",name:"За",transcription:"ẓ",description:"Эмфатическая «з». Редкая буква.",positions:{initial:"ظـ",middle:"ـظـ",final:"ـظ",isolated:"ظ"}},
|
||
{letter:"ع",name:"Айн",transcription:"ʿ",description:"Уникальный звок из гортани. Нет аналога.",positions:{initial:"عـ",middle:"ـعـ",final:"ـع",isolated:"ع"}},
|
||
{letter:"غ",name:"Гайн",transcription:"gh",description:"Гортанное «г». Похоже на французское «r».",positions:{initial:"غـ",middle:"ـغـ",final:"ـغ",isolated:"غ"}},
|
||
{letter:"ف",name:"Фа",transcription:"f",description:"Согласная «ф».",positions:{initial:"فـ",middle:"ـفـ",final:"ـف",isolated:"ف"}},
|
||
{letter:"ق",name:"К̇аф",transcription:"q",description:"Глубокое «к». Из задней части горла.",positions:{initial:"قـ",middle:"ـقـ",final:"ـق",isolated:"ق"}},
|
||
{letter:"ك",name:"Каф",transcription:"k",description:"Согласная «к». Обычное «к».",positions:{initial:"كـ",middle:"ـكـ",final:"ـك",isolated:"ك"}},
|
||
{letter:"ل",name:"Лям",transcription:"l",description:"Согласная «л». В слове «Аллах».",positions:{initial:"لـ",middle:"ـلـ",final:"ـل",isolated:"ل"}},
|
||
{letter:"م",name:"Мим",transcription:"m",description:"Согласная «м». В слове «Мухаммад».",positions:{initial:"مـ",middle:"ـمـ",final:"ـم",isolated:"م"}},
|
||
{letter:"ن",name:"Нун",transcription:"n",description:"Согласная «н». Точка сверху.",positions:{initial:"نـ",middle:"ـنـ",final:"ـن",isolated:"ن"}},
|
||
{letter:"ه",name:"Ха",transcription:"h",description:"Придыхательное «х». Мягче обычного «х».",positions:{initial:"هـ",middle:"ـهـ",final:"ـه",isolated:"ه"}},
|
||
{letter:"و",name:"Вав",transcription:"w/ū",description:"Согласная «в» или долгая «у». Не соединяется.",positions:{initial:"و",middle:"ـو",final:"ـو",isolated:"و"}},
|
||
{letter:"ي",name:"Йа",transcription:"y/ī",description:"Согласная «й» или долгая «и». Две точки снизу.",positions:{initial:"يـ",middle:"ـيـ",final:"ـي",isolated:"ي"}},
|
||
];
|
||
|
||
const harakaatData = [
|
||
{symbol:"َ",name:"Фатха",arabicName:"فتحة",description:"Короткая «а» сверху буквы",example:"بَ",exampleWord:"بَيْت (байт — дом)"},
|
||
{symbol:"ُ",name:"Дамма",arabicName:"ضمة",description:"Короткая «у» сверху буквы",example:"بُ",exampleWord:"بُرْد (бурд — плащ)"},
|
||
{symbol:"ِ",name:"Касра",arabicName:"كسرة",description:"Короткая «и» снизу буквы",example:"بِ",exampleWord:"بِسْم (бисм — имя)"},
|
||
];
|
||
|
||
const extraMarksData = [
|
||
{symbol:"ْ",name:"Сукун",arabicName:"سكون",description:"Отсутствие гласной. Буква читается без гласной.",example:"بْ",exampleWord:"يَكْتُб (йактуб — пишет)"},
|
||
{symbol:"ّ",name:"Шадда",arabicName:"شدة",description:"Удвоение (тashdid). Буква произносится дважды.",example:"بّ",exampleWord:"مُحَمَّد (Мухаммад)"},
|
||
{symbol:"ً",name:"Танвин фатха",arabicName:"تنوين فتح",description:"Двойная фатха. Звук «ан» в конце слова.",example:"بًا",exampleWord:"كِتَابًا (китабан — книгу)"},
|
||
{symbol:"ٌ",name:"Танвин дамма",arabicName:"تنوين ضم",description:"Двойная дамма. Звук «ун» в конце слова.",example:"بٌ",exampleWord:"كِتَابٌ (китабун — книга)"},
|
||
{symbol:"ٍ",name:"Танвин касра",arabicName:"تنوين كسر",description:"Двойная касра. Звук «ин» в конце слова.",example:"بٍ",exampleWord:"كِتَابٍ (китабин — книги)"},
|
||
{symbol:"ـ",name:"Татвиль",arabicName:"تطويل",description:"Линия продления. Указывает на долгую гласную.",example:"بـــ",exampleWord:"كِتَاب (китаб — книга)"},
|
||
];
|
||
|
||
const quranVocab = [
|
||
{arabic:"الله",transcription:"Аллах",translation:"Аллах (Бог)",category:"attributes",example:{arabic:"لَا إِلَهَ إِلَّا اللَّهُ",translation:"Нет божества достойного поклонения, кроме Аллаха"}},
|
||
{arabic:"الرَّحْمَنُ",transcription:"Ар-Рахман",translation:"Милостивый",category:"attributes",example:{arabic:"بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ",translation:"Во имя Аллаха, Милостивого, Милосердного"}},
|
||
{arabic:"الرَّحِيمُ",transcription:"Ар-Рахим",translation:"Милосердный",category:"attributes",example:{arabic:"بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ",translation:"Во имя Аллаха, Милостивого, Милосердного"}},
|
||
{arabic:"رَبّ",transcription:"Рабб",translation:"Господь",category:"attributes",example:{arabic:"الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ",translation:"Хвала Аллаху, Господу миров"}},
|
||
{arabic:"مَلِك",transcription:"Малик",translation:"Владыка, Царь",category:"attributes",example:{arabic:"مَالِكِ يَوْمِ الدِّينِ",translation:"Владыке Дня воздаяния"}},
|
||
{arabic:"إِلَه",transcription:"Илях",translation:"Божество",category:"attributes",example:{arabic:"لَا إِلَهَ إِلَّا هُوَ",translation:"Нет божества кроме Него"}},
|
||
{arabic:"عَلِيم",transcription:"Алим",translation:"Всезнающий",category:"attributes",example:{arabic:"إِنَّ اللَّهَ عَلِيمٌ حَكِيمٌ",translation:"Поистине, Аллах — Знающий, Мудрый"}},
|
||
{arabic:"حَكِيم",transcription:"Хаким",translation:"Мудрый",category:"attributes",example:{arabic:"وَاللَّهُ عَزِيزٌ حَكِيمٌ",translation:"Аллах — Могущественный, Мудрый"}},
|
||
{arabic:"قَدِير",transcription:"Кадир",translation:"Всемогущий",category:"attributes",example:{arabic:"إِنَّ اللَّهَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ",translation:"Поистине, Аллах над всякой вещью мощен"}},
|
||
{arabic:"سَمِيع",transcription:"Сами",translation:"Всеслышащий",category:"attributes",example:{arabic:"وَاللَّهُ سَمِيعٌ عَلِيمٌ",translation:"Аллах — Слышащий, Знающий"}},
|
||
{arabic:"بَصِير",transcription:"Басир",translation:"Всевидящий",category:"attributes",example:{arabic:"إِنَّ اللَّهَ بِمَا تَعْمَلُونَ بَصِيرٌ",translation:"Поистине, Аллах видит то, что вы делаете"}},
|
||
{arabic:"خَالِق",transcription:"Халик",translation:"Творец",category:"attributes",example:{arabic:"اللَّهُ خَالِقُ كُلِّ شَيْءٍ",translation:"Аллах — Творец всякой вещи"}},
|
||
{arabic:"عَظِيم",transcription:"Азим",translation:"Великий",category:"attributes",example:{arabic:"اللَّهُ أَكْبَرُ",translation:"Аллах велик"}},
|
||
{arabic:"كَرِيم",transcription:"Карим",translation:"Щедрый, Благородный",category:"attributes",example:{arabic:"إِنَّ اللَّهَ كَرِيمٌ",translation:"Поистине, Аллах — Щедрый"}},
|
||
{arabic:"نُور",transcription:"Нур",translation:"Свет",category:"attributes",example:{arabic:"اللَّهُ نُورُ السَّمَاوَاتِ وَالْأَرْضِ",translation:"Аллах — Свет небес и земли"}},
|
||
{arabic:"رَسُول",transcription:"Расуль",translation:"Посланник",category:"people",example:{arabic:"مُحَمَّدٌ رَسُولُ اللَّهِ",translation:"Мухаммад — Посланник Аллаха"}},
|
||
{arabic:"نَبِيّ",transcription:"Наби",translation:"Пророк",category:"people",example:{arabic:"مُحَمَّدٌ رَسُولُ اللَّهِ وَخَاتَمُ النَّبِيِّينَ",translation:"Мухаммад — Посланник Аллаха и Печать пророков"}},
|
||
{arabic:"مُحَمَّد",transcription:"Мухаммад",translation:"Мухаммад (ﷺ)",category:"people",example:{arabic:"مُحَمَّدٌ رَسُولُ اللَّهِ",translation:"Мухаммад — Посланник Аллаха"}},
|
||
{arabic:"إِبْرَاهِيم",transcription:"Ибрахим",translation:"Авраам",category:"people",example:{arabic:"إِنَّ إِبْرَاهِيمَ كَانَ أُمَّةً",translation:"Поистине, Ибрахим был общиной"}},
|
||
{arabic:"مُوسَى",transcription:"Муса",translation:"Моисей",category:"people",example:{arabic:"وَكَلَّمَ اللَّهُ مُوسَى تَكْلِيمًا",translation:"И Аллах говорил с Мусой"}},
|
||
{arabic:"عِيسَى",transcription:"Иса",translation:"Иисус",category:"people",example:{arabic:"إِنَّمَا الْمَسِيحُ عِيسَى ابْنُ مَرْيَمَ",translation:"Мессия Иса, сын Марйам"}},
|
||
{arabic:"نُوح",transcription:"Нух",translation:"Ной",category:"people",example:{arabic:"إِنَّا أَرْسَلْنَا نُوحًا",translation:"Мы послали Нуха"}},
|
||
{arabic:"آدَم",transcription:"Адам",translation:"Адам",category:"people",example:{arabic:"إِنَّ اللَّهَ اصْطَفَى آدَمَ",translation:"Поистине, Аллах избрал Адама"}},
|
||
{arabic:"سَمَاء",transcription:"Сама",translation:"Небо",category:"nature",example:{arabic:"اللَّهُ خَلَقَ السَّمَاوَاتِ وَالْأَرْضَ",translation:"Аллах создал небеса и землю"}},
|
||
{arabic:"أَرْض",transcription:"Ард",translation:"Земля",category:"nature",example:{arabic:"وَاللَّهُ جَعَلَ لَكُمُ الْأَرْضَ بِسَاطًا",translation:"Аллах сделал для вас землю ковром"}},
|
||
{arabic:"شَمْس",transcription:"Шамс",translation:"Солнце",category:"nature",example:{arabic:"وَجَعَلَ الشَّمْسَ سِرَاجًا",translation:"И сделал Он солнце светильником"}},
|
||
{arabic:"قَمَر",transcription:"Камар",translation:"Луна",category:"nature",example:{arabic:"وَالْقَمَرَ نُورًا",translation:"И луну — светом"}},
|
||
{arabic:"نَجْم",transcription:"Наджм",translation:"Звезда",category:"nature",example:{arabic:"وَالنَّجْمِ إِذَا هَوَى",translation:"И звездой, когда она закатывается"}},
|
||
{arabic:"مَاء",transcription:"Ма",translation:"Вода",category:"nature",example:{arabic:"وَجَعَلْنَا مِنَ الْمَاءِ كُلَّ شَيْءٍ حَيٍّ",translation:"И создали Мы из воды всякое живое"}},
|
||
{arabic:"نَار",transcription:"Нар",translation:"Огонь",category:"nature",example:{arabic:"وَاتَّقُوا النَّارَ الَّتِي أُعِدَّتْ لِلْكَافِرِينَ",translation:"Бойтесь огня, уготованного неверным"}},
|
||
{arabic:"جَنَّة",transcription:"Джанна",translation:"Рай",category:"nature",example:{arabic:"وَلِلْمُتَّقِينَ عِنْدَ رَبِّهِمْ جَنَّاتٌ",translation:"Для богобоязненных у их Господа — райские сады"}},
|
||
{arabic:"كِتَاب",transcription:"Китаб",translation:"Книга",category:"common",example:{arabic:"ذَلِكَ الْكِتَابُ لَا رَيْبَ فِيهِ",translation:"Эта Книга — нет сомнения в ней"}},
|
||
{arabic:"قُرْآن",transcription:"Коран",translation:"Коран",category:"common",example:{arabic:"إِنَّا نَحْنُ نَزَّلْنَا الذِّكْرَ",translation:"Мы ниспослали Напоминание"}},
|
||
{arabic:"آيَة",transcription:"Ая",translation:"Знамение, аят",category:"common",example:{arabic:"وَآيَاتِنَا كَانُوا يَعْلَمُونَ",translation:"И Наши знамения они знали"}},
|
||
{arabic:"صَلَاة",transcription:"Салят",translation:"Молитва",category:"common",example:{arabic:"أَقِمِ الصَّلَاةَ لِدُلُوكِ الشَّمْسِ",translation:"Совершай молитву с полудня"}},
|
||
{arabic:"ذِكْر",transcription:"Зикр",translation:"Поминание",category:"common",example:{arabic:"وَلَذِكْرُ اللَّهِ أَكْبَرُ",translation:"И поминание Аллаха — величайшее"}},
|
||
{arabic:"دُعَاء",transcription:"Дуа",translation:"Моление, мольба",category:"common",example:{arabic:"ادْعُونِي أَسْتَجِبْ لَكُمْ",translation:"Взывайте ко Мне — Я отвечу вам"}},
|
||
{arabic:"رَحْمَة",transcription:"Рахма",translation:"Милость",category:"common",example:{arabic:"وَرَحْمَتِي وَسِعَتْ كُلَّ شَيْءٍ",translation:"И Моя милость объемлет всякую вещь"}},
|
||
{arabic:"نِعْمَة",transcription:"Нима",translation:"Благодать",category:"common",example:{arabic:"وَإِن تَعُدُّوا نِعْمَةَ اللَّهِ",translation:"И если вы будете считать блага Аллаха"}},
|
||
{arabic:"حِكْمَة",transcription:"Хикма",translation:"Мудрость",category:"common",example:{arabic:"يُؤْتِي الْحِكْمَةَ مَن يَشَاءُ",translation:"Он дарует мудрость, кому пожелает"}},
|
||
{arabic:"عِلْم",transcription:"Ильм",translation:"Знание",category:"common",example:{arabic:"وَعَلَّمَ آدَمَ الْأَسْمَاءَ كُلَّهَا",translation:"И Он научил Адама всем именам"}},
|
||
{arabic:"نَفْس",transcription:"Нафс",translation:"Душа",category:"common",example:{arabic:"كُلُّ نَفْسٍ ذَائِقَةُ الْمَوْتِ",translation:"Каждая душа вкусит смерть"}},
|
||
{arabic:"مَلَك",transcription:"Малак",translation:"Ангел",category:"common",example:{arabic:"وَمَنْ عِندَهُ لَا يَسْتَكْبِرُونَ عَنْ عِبَادَتِهِ",translation:"И те, кто у Него, не превозносятся над поклонением Ему"}},
|
||
{arabic:"شَيْطَان",transcription:"Шайтан",translation:"Сатана, дьявол",category:"common",example:{arabic:"إِنَّ الشَّيْطَانَ لَكُمْ عَدُوٌّ",translation:"Поистине, сатана — ваш враг"}},
|
||
{arabic:"يَوْم",transcription:"Йаум",translation:"День",category:"common",example:{arabic:"مَالِكِ يَوْمِ الدِّينِ",translation:"Владыке Дня воздаяния"}},
|
||
{arabic:"دِين",transcription:"Дин",translation:"Вера, воздаяние",category:"common",example:{arabic:"مَالِكِ يَوْمِ الدِّينِ",translation:"Владыке Дня воздаяния"}},
|
||
{arabic:"صِرَاط",transcription:"Сират",translation:"Путь",category:"common",example:{arabic:"اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ",translation:"Веди нас прямым путём"}},
|
||
{arabic:"نَبِيّ",transcription:"Наби",translation:"Пророк",category:"common",example:{arabic:"مُحَمَّدٌ رَسُولُ اللَّهِ",translation:"Мухаммад — Посланник Аллаха"}},
|
||
{arabic:"كَافِر",transcription:"Кафир",translation:"Неверный",category:"common",example:{arabic:"إِنَّ الْكَافِرِينَ فِي عَذَابٍ أَلِيمٌ",translation:"Поистине, неверные — в мучительном наказании"}},
|
||
{arabic:"مُؤْمِن",transcription:"Мумин",translation:"Верующий",category:"common",example:{arabic:"إِنَّمَا الْمُؤْمِنُونَ إِخْوَةٌ",translation:"Верующие — братья"}},
|
||
{arabic:"خَيْر",transcription:"Хайр",translation:"Благо",category:"common",example:{arabic:"وَمَا تُنفِقُوا مِنْ خَيْرٍ",translation:"И что вы ни расходуете из блага"}},
|
||
{arabic:"شَرّ",transcription:"Шарр",translation:"Зло",category:"common",example:{arabic:"مِن شَرِّ الْوَسْوَاسِ الْخَنَّاسِ",translation:"От зла нашёптывателя, который отступает"}},
|
||
{arabic:"حَقّ",transcription:"Хакк",translation:"Истина",category:"common",example:{arabic:"ذَلِكَ بِأَنَّ اللَّهَ هُوَ الْحَقُّ",translation:"Это потому, что Аллах — Истина"}},
|
||
{arabic:"بَاطِل",transcription:"Батыль",translation:"Ложь, суета",category:"common",example:{arabic:"وَيَمْحَقُ اللَّهُ الْبَاطِلَ",translation:"И уничтожает Аллах ложь"}},
|
||
];
|
||
|
||
const quizLetters = [
|
||
{question:"Как называется эта буква?",arabic:"ب",options:["Ба","Та","Нун","Мим"],correct:0},
|
||
{question:"Как называется эта буква?",arabic:"م",options:["Ба","Лям","Мим","Нун"],correct:2},
|
||
{question:"Как называется эта буква?",arabic:"ر",options:["Зай","Даль","Ра","Вав"],correct:2},
|
||
{question:"Как называется эта буква?",arabic:"ع",options:["Гайн","Айн","Х̣а","Ха"],correct:1},
|
||
{question:"Какая это буква?",arabic:"ل",options:["Каф","Лям","Мим","Нун"],correct:1},
|
||
{question:"Какая это буква?",arabic:"ق",options:["Каф","Фа","Гайн","К̇аф"],correct:3},
|
||
{question:"Какая это буква?",arabic:"و",options:["Йа","Вав","Алиф","Ха"],correct:1},
|
||
{question:"Какая это буква?",arabic:"ش",options:["Син","Шин","Сад","Дад"],correct:1},
|
||
{question:"Сколько букв в арабском алфавите?",arabic:"",options:["26","28","30","32"],correct:1},
|
||
{question:"Какая буква не соединяется с соседними?",arabic:"د",options:["Ба","Мим","Даль","Лям"],correct:2},
|
||
];
|
||
|
||
const quizHarakaat = [
|
||
{question:"Какая огласовка в слове?",arabic:"بَ",options:["Фатха","Дамма","Касра","Сукун"],correct:0},
|
||
{question:"Какая огласовка в слове?",arabic:"بُ",options:["Фатха","Дамма","Касра","Сукун"],correct:1},
|
||
{question:"Какая огласовка в слове?",arabic:"بِ",options:["Фатха","Дамма","Касра","Сукун"],correct:2},
|
||
{question:"Какой знак показывает отсутствие гласной?",arabic:"",options:["Фатха","Шадда","Сукун","Танвин"],correct:2},
|
||
{question:"Какой знак удваивает букву?",arabic:"",options:["Сукун","Шадда","Танвин","Фатха"],correct:1},
|
||
{question:"Как звучит фатха?",arabic:"",options:["Короткая «а»","Короткая «у»","Короткая «и»","Нет гласной"],correct:0},
|
||
];
|
||
|
||
const quizWords = [
|
||
{question:"Что означает слово?",arabic:"الله",options:["Пророк","Аллах","Ангел","Книга"],correct:1},
|
||
{question:"Что означает слово?",arabic:"رَبّ",options:["Рай","Книга","Господь","Земля"],correct:2},
|
||
{question:"Что означает слово?",arabic:"سَمَاء",options:["Земля","Солнце","Луна","Небо"],correct:3},
|
||
{question:"Что означает слово?",arabic:"كِتَاب",options:["Книга","Молитва","Путь","Свет"],correct:0},
|
||
{question:"Что означает слово?",arabic:"صَلَاة",options:["Молитва","Пост","Милость","Знание"],correct:0},
|
||
{question:"Что означает слово?",arabic:"نُور",options:["Огонь","Вода","Свет","Звезда"],correct:2},
|
||
];
|
||
|
||
const quizAyat = [
|
||
{question:"Как звучит начало суры Аль-Фатиха?",arabic:"بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ",options:["Во имя Аллаха, Милостивого, Милосердного","Хвала Аллаху, Господу миров","Веди нас прямым путём","Владыке Дня воздаяния"],correct:0},
|
||
{question:"Как переводится этот аят?",arabic:"الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ",options:["Владыке Дня воздаяния","Хвала Аллаху, Господу миров","Тебе одному мы поклоняемся","Во имя Аллаха"],correct:1},
|
||
{question:"Сколько сур в Коране?",arabic:"",options:["100","112","114","120"],correct:2},
|
||
{question:"Как называется первая сура Корана?",arabic:"",options:["Аль-Бакара","Аль-Фатиха","Аль-Ихлас","Ан-Нас"],correct:1},
|
||
];
|
||
|
||
const achievementsData = [
|
||
{id:"first-letter",icon:"🔤",title:"Первая буква",desc:"Изучите первую букву",condition:p=>p.lettersLearned>=1},
|
||
{id:"all-letters",icon:"📖",title:"Весь алфавит",desc:"Изучите все 28 букв",condition:p=>p.lettersLearned>=28},
|
||
{id:"first-haraka",icon:" vowelmarks",title:"Первая огласовка",desc:"Изучите первую огласовку",condition:p=>p.harakaatLearned>=1},
|
||
{id:"all-harakaat",icon:"✅",title:"Все огласовки",desc:"Изучите все огласовки",condition:p=>p.harakaatLearned>=6},
|
||
{id:"ten-words",icon:"📝",title:"10 слов",desc:"Выучите 10 слов",condition:p=>p.wordsLearned>=10},
|
||
{id:"thirty-words",icon:"📚",title:"30 слов",desc:"Выучите 30 слов",condition:p=>p.wordsLearned>=30},
|
||
{id:"fifty-words",icon:"🏆",title:"50 слов",desc:"Выучите 50 слов",condition:p=>p.wordsLearned>=50},
|
||
{id:"first-quiz",icon:"✅",title:"Первый тест",desc:"Пройдите первый тест",condition:p=>p.quizzesCompleted>=1},
|
||
{id:"perfect-quiz",icon:"💯",title:"Идеал",desc:"100% в тесте",condition:p=>p.perfectQuizzes>=1},
|
||
{id:"three-streak",icon:"🔥",title:"3 дня",desc:"Занимайтесь 3 дня подряд",condition:p=>p.streak>=3},
|
||
{id:"seven-streak",icon:"⚡",title:"Неделя",desc:"7 дней подряд",condition:p=>p.streak>=7},
|
||
{id:"bismillah",icon:"🤲",title:"Басмала",desc:"Прочитайте Басмалу",condition:p=>p.bismillahRead},
|
||
{id:"fatihah",icon:"📜",title:"Аль-Фатиха",desc:"Откройте суру Аль-Фатиха",condition:p=>p.fatihahViewed},
|
||
{id:"ikhlas",icon:"💎",title:"Аль-Ихлас",desc:"Откройте суру Аль-Ихлас",condition:p=>p.ikhlasViewed},
|
||
{id:"both-surahs",icon:"🌟",title:"Две суры",desc:"Изучите обе суры",condition:p=>p.fatihahViewed&&p.ikhlasViewed},
|
||
{id:"surah-practice",icon:"🎯",title:"Практика суры",desc:"Практикуйте чтение суры",condition:p=>p.surahPracticed},
|
||
];
|
||
|
||
let currentFilter = 'all';
|
||
let currentQuizType = 'letters';
|
||
let quizState = {current:0,answers:[],score:0,questions:[]};
|
||
|
||
function getProgress() {
|
||
const def = {lettersLearned:0,harakaatLearned:0,wordsLearned:0,quizzesCompleted:0,perfectQuizzes:0,streak:0,totalScore:0,lastVisit:null,activeDays:[],favorites:[],quizHistory:[],dailyGoal:5,dailyProgress:0,lastGoalDate:null,bismillahRead:false,fatihahViewed:false,ikhlasViewed:false,surahPracticed:false};
|
||
try {const s=localStorage.getItem('quran-progress');return s?{...def,...JSON.parse(s)}:def;} catch{return def;}
|
||
}
|
||
|
||
function saveProgress(data) {localStorage.setItem('quran-progress',JSON.stringify(data));}
|
||
|
||
function updateStreak() {
|
||
const p = getProgress();
|
||
const today = new Date().toISOString().split('T')[0];
|
||
if (p.lastGoalDate !== today) {p.dailyProgress = 0;p.lastGoalDate = today;}
|
||
if (!p.activeDays.includes(today)) {
|
||
p.activeDays.push(today);
|
||
if (p.lastVisit) {
|
||
const last = new Date(p.lastVisit);
|
||
const diff = Math.floor((new Date(today) - last) / 86400000);
|
||
if (diff === 1) p.streak++; else if (diff > 1) p.streak = 1;
|
||
} else p.streak = 1;
|
||
p.lastVisit = today;
|
||
saveProgress(p);
|
||
}
|
||
return p;
|
||
}
|
||
|
||
function showPage(page) {
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
document.getElementById('page-' + page).classList.add('active');
|
||
window.scrollTo(0, 0);
|
||
if (page === 'alphabet') renderAlphabet();
|
||
if (page === 'harakaat') renderHarakaat();
|
||
if (page === 'vocabulary') renderVocab();
|
||
if (page === 'quiz') renderQuiz();
|
||
if (page === 'dashboard') renderDashboard();
|
||
updateStreak();
|
||
}
|
||
|
||
function toggleMobile() {document.getElementById('mobileMenu').classList.toggle('active');}
|
||
|
||
function toggleTheme() {
|
||
const html = document.documentElement;
|
||
const current = html.getAttribute('data-theme');
|
||
const next = current === 'light' ? 'dark' : 'light';
|
||
html.setAttribute('data-theme', next);
|
||
localStorage.setItem('quran-theme', next);
|
||
document.querySelector('.theme-toggle').textContent = next === 'dark' ? '☀️' : '🌙';
|
||
}
|
||
|
||
function renderAlphabet() {
|
||
const grid = document.getElementById('alphabetGrid');
|
||
const p = getProgress();
|
||
grid.innerHTML = alphabetData.map((l, i) => `
|
||
<div class="letter-card">
|
||
<div class="letter-big" onclick="speakLetter(${i})" style="cursor:pointer" title="Нажмите чтобы услышать">${l.letter}</div>
|
||
<div class="letter-info">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:4px">
|
||
<div class="name">${l.name}</div>
|
||
<button class="audio-btn-sm" onclick="event.stopPropagation();speakLetter(${i})" title="Прослушать">🔊</button>
|
||
</div>
|
||
<div class="transcription">[${l.transcription}]</div>
|
||
<div class="description">${l.description}</div>
|
||
<div class="letter-positions">
|
||
<div class="letter-position">${l.positions.initial}<small>начало</small></div>
|
||
<div class="letter-position">${l.positions.middle}<small>середина</small></div>
|
||
<div class="letter-position">${l.positions.final}<small>конец</small></div>
|
||
</div>
|
||
</div>
|
||
<button class="learn-btn" onclick="event.stopPropagation();learnLetter(${i})">✓ Изучено</button>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
let currentAudio = null;
|
||
|
||
function speakLetter(idx) {
|
||
const letter = alphabetData[idx].letter;
|
||
const name = alphabetData[idx].name;
|
||
playArabicAudio(letter, name);
|
||
}
|
||
|
||
function playArabicAudio(text, label) {
|
||
// Stop any currently playing audio
|
||
if (currentAudio) {
|
||
currentAudio.pause();
|
||
currentAudio = null;
|
||
}
|
||
|
||
// Use Google Translate TTS (free, public API)
|
||
const encoded = encodeURIComponent(text);
|
||
const url = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&q=${encoded}&tl=ar`;
|
||
|
||
currentAudio = new Audio(url);
|
||
currentAudio.crossOrigin = 'anonymous';
|
||
|
||
currentAudio.onplay = () => {
|
||
showToast('🔊 ' + (label || text), 'info');
|
||
};
|
||
|
||
currentAudio.onerror = () => {
|
||
// Fallback to Web Speech API
|
||
if ('speechSynthesis' in window) {
|
||
window.speechSynthesis.cancel();
|
||
const utterance = new SpeechSynthesisUtterance(text);
|
||
utterance.lang = 'ar-SA';
|
||
utterance.rate = 0.5;
|
||
window.speechSynthesis.speak(utterance);
|
||
}
|
||
showToast('🔊 ' + (label || text), 'info');
|
||
};
|
||
|
||
currentAudio.play().catch(() => {
|
||
// Fallback to Web Speech API
|
||
if ('speechSynthesis' in window) {
|
||
window.speechSynthesis.cancel();
|
||
const utterance = new SpeechSynthesisUtterance(text);
|
||
utterance.lang = 'ar-SA';
|
||
utterance.rate = 0.5;
|
||
window.speechSynthesis.speak(utterance);
|
||
}
|
||
showToast('🔊 ' + (label || text), 'info');
|
||
});
|
||
}
|
||
|
||
function playAllLetters() {
|
||
let index = 0;
|
||
|
||
function playNext() {
|
||
if (index < alphabetData.length) {
|
||
const letter = alphabetData[index].letter;
|
||
const name = alphabetData[index].name;
|
||
|
||
// Highlight current letter
|
||
const cards = document.querySelectorAll('.letter-card');
|
||
cards.forEach(c => c.style.borderColor = 'var(--border)');
|
||
if (cards[index]) {
|
||
cards[index].style.borderColor = 'var(--quran-gold)';
|
||
cards[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
|
||
showToast('Буква ' + name + ' (' + (index + 1) + '/28)', 'info');
|
||
|
||
const encoded = encodeURIComponent(letter);
|
||
const url = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&q=${encoded}&tl=ar`;
|
||
|
||
const audio = new Audio(url);
|
||
audio.crossOrigin = 'anonymous';
|
||
|
||
audio.onended = () => {
|
||
index++;
|
||
setTimeout(playNext, 500);
|
||
};
|
||
|
||
audio.onerror = () => {
|
||
index++;
|
||
setTimeout(playNext, 500);
|
||
};
|
||
|
||
audio.play().catch(() => {
|
||
index++;
|
||
setTimeout(playNext, 500);
|
||
});
|
||
} else {
|
||
showToast('Все буквы прослушаны!', 'success');
|
||
const cards = document.querySelectorAll('.letter-card');
|
||
cards.forEach(c => c.style.borderColor = 'var(--border)');
|
||
}
|
||
}
|
||
|
||
playNext();
|
||
}
|
||
|
||
function learnLetter(idx) {
|
||
const p = getProgress();
|
||
const key = 'letter-' + idx;
|
||
if (!localStorage.getItem(key)) {
|
||
localStorage.setItem(key, '1');
|
||
p.lettersLearned++;
|
||
p.totalScore += 2;
|
||
p.dailyProgress++;
|
||
saveProgress(p);
|
||
showToast('Буква ' + alphabetData[idx].name + ' изучена!', 'success');
|
||
checkAchievements();
|
||
} else {
|
||
showToast('Буква ' + alphabetData[idx].name + ' уже изучена', 'info');
|
||
}
|
||
speakLetter(idx);
|
||
}
|
||
|
||
function renderHarakaat() {
|
||
const grid = document.getElementById('harakaatGrid');
|
||
const extraGrid = document.getElementById('extraMarksGrid');
|
||
const p = getProgress();
|
||
|
||
grid.innerHTML = harakaatData.map((h, i) => `
|
||
<div class="haraka-card" onclick="learnHaraka(${i})">
|
||
<div class="symbol">${h.symbol}</div>
|
||
<div class="name">${h.name}</div>
|
||
<div class="arabic-name">${h.arabicName}</div>
|
||
<div style="font-size:13px;color:var(--text-secondary);margin-top:4px">${h.description}</div>
|
||
<div class="example">${h.example}</div>
|
||
<div style="font-size:12px;color:var(--text-secondary)">${h.exampleWord}</div>
|
||
<button class="audio-btn-sm" style="margin-top:12px" onclick="event.stopPropagation();speakHaraka('${h.example}','${h.name}')">🔊 Прослушать</button>
|
||
</div>
|
||
`).join('');
|
||
|
||
extraGrid.innerHTML = extraMarksData.map((h, i) => `
|
||
<div class="haraka-card" onclick="learnHarakaExtra(${i})">
|
||
<div class="symbol">${h.symbol}</div>
|
||
<div class="name">${h.name}</div>
|
||
<div class="arabic-name">${h.arabicName}</div>
|
||
<div style="font-size:13px;color:var(--text-secondary);margin-top:4px">${h.description}</div>
|
||
<div class="example">${h.example}</div>
|
||
<div style="font-size:12px;color:var(--text-secondary)">${h.exampleWord}</div>
|
||
<button class="audio-btn-sm" style="margin-top:12px" onclick="event.stopPropagation();speakHaraka('${h.example}','${h.name}')">🔊 Прослушать</button>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function speakHaraka(text, name) {
|
||
playArabicAudio(text, name);
|
||
}
|
||
|
||
function learnHaraka(idx) {
|
||
const p = getProgress();
|
||
const key = 'haraka-' + idx;
|
||
if (!localStorage.getItem(key)) {
|
||
localStorage.setItem(key, '1');
|
||
p.harakaatLearned++;
|
||
p.totalScore += 3;
|
||
p.dailyProgress++;
|
||
saveProgress(p);
|
||
showToast('Огласовка ' + harakaatData[idx].name + ' изучена!', 'success');
|
||
checkAchievements();
|
||
}
|
||
}
|
||
|
||
function learnHarakaExtra(idx) {
|
||
const p = getProgress();
|
||
const key = 'haraka-extra-' + idx;
|
||
if (!localStorage.getItem(key)) {
|
||
localStorage.setItem(key, '1');
|
||
p.harakaatLearned++;
|
||
p.totalScore += 3;
|
||
p.dailyProgress++;
|
||
saveProgress(p);
|
||
showToast('Знак ' + extraMarksData[idx].name + ' изучен!', 'success');
|
||
checkAchievements();
|
||
}
|
||
}
|
||
|
||
function checkHarakaExercise(btn, result) {
|
||
const feedback = document.getElementById('haraka-feedback');
|
||
if (result === 'correct') {
|
||
feedback.className = 'exercise-feedback correct';
|
||
feedback.textContent = '✓ Правильно! Это фатха — короткая «а»';
|
||
const p = getProgress();p.totalScore+=5;p.dailyProgress++;saveProgress(p);
|
||
} else {
|
||
feedback.className = 'exercise-feedback wrong';
|
||
feedback.textContent = '✗ Неверно. Это фатха (короткая «а»)';
|
||
}
|
||
}
|
||
|
||
function renderVocab() {
|
||
const search = document.querySelector('.vocab-search').value.toLowerCase();
|
||
const grid = document.getElementById('vocabGrid');
|
||
const p = getProgress();
|
||
let words = quranVocab;
|
||
if (currentFilter !== 'all') words = words.filter(w => w.category === currentFilter);
|
||
if (search) words = words.filter(w => w.arabic.includes(search) || w.translation.toLowerCase().includes(search) || w.transcription.toLowerCase().includes(search));
|
||
|
||
grid.innerHTML = words.map(w => `
|
||
<div class="vocab-card">
|
||
<button class="fav-btn ${p.favorites.includes(w.arabic)?'active':''}" onclick="event.stopPropagation();toggleFav('${w.arabic}')">${p.favorites.includes(w.arabic)?'❤️':'🤍'}</button>
|
||
<div class="category-tag">${getCategoryName(w.category)}</div>
|
||
<div class="arabic-word quran-text">${w.arabic}</div>
|
||
<div class="transcription">${w.transcription}</div>
|
||
<div class="translation">${w.translation}</div>
|
||
<div class="example"><div class="arabic quran-text" style="font-size:18px">${w.example.arabic}</div><div>${w.example.translation}</div></div>
|
||
<button class="audio-btn" onclick="event.stopPropagation();speak('${w.arabic}')">🔊</button>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function getCategoryName(cat) {
|
||
const names = {attributes:'Имена Аллаха',common:'Частые',people:'Люди',nature:'Природа',actions:'Действия'};
|
||
return names[cat]||cat;
|
||
}
|
||
|
||
function setFilter(filter) {
|
||
currentFilter = filter;
|
||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
renderVocab();
|
||
}
|
||
|
||
function filterVocab() {renderVocab();}
|
||
|
||
function toggleFav(arabic) {
|
||
const p = getProgress();
|
||
const idx = p.favorites.indexOf(arabic);
|
||
if (idx > -1) p.favorites.splice(idx, 1);
|
||
else {p.favorites.push(arabic);p.wordsLearned++;}
|
||
saveProgress(p);
|
||
renderVocab();
|
||
checkAchievements();
|
||
}
|
||
|
||
function speak(text) {
|
||
playArabicAudio(text, '');
|
||
}
|
||
|
||
function selectQuizType(type) {
|
||
currentQuizType = type;
|
||
document.querySelectorAll('#quizTypeSelector .step-card').forEach((c,i) => {
|
||
c.style.borderColor = ['letters','harakaat','words','ayat'][i] === type ? 'var(--quran-gold)' : 'var(--border)';
|
||
});
|
||
resetQuiz();
|
||
}
|
||
|
||
function renderQuiz() {
|
||
const container = document.getElementById('quizContainer');
|
||
let questions;
|
||
if (currentQuizType === 'letters') questions = [...quizLetters];
|
||
else if (currentQuizType === 'harakaat') questions = [...quizHarakaat];
|
||
else if (currentQuizType === 'words') questions = [...quizWords];
|
||
else questions = [...quizAyat];
|
||
|
||
if (quizState.questions.length === 0) quizState.questions = shuffleArray(questions);
|
||
if (quizState.current >= quizState.questions.length) {renderQuizResult();return;}
|
||
|
||
const q = quizState.questions[quizState.current];
|
||
const progress = ((quizState.current) / quizState.questions.length) * 100;
|
||
|
||
container.innerHTML = `
|
||
<div class="quiz-card">
|
||
<div class="quiz-progress"><div class="quiz-progress-bar"><div class="quiz-progress-fill" style="width:${progress}%"></div></div><div class="quiz-progress-text">${quizState.current+1}/${quizState.questions.length}</div></div>
|
||
<div class="quiz-question">${q.question}</div>
|
||
${q.arabic ? '<div class="quiz-arabic quran-text">' + q.arabic + '</div>' : ''}
|
||
<div class="quiz-options">${q.options.map((o,i)=>`<button class="quiz-option ${quizState.answers[quizState.current]===i?'selected':''}" onclick="selectAnswer(${i})"><span class="letter">${String.fromCharCode(65+i)}</span>${o}</button>`).join('')}</div>
|
||
<div class="quiz-actions"><button class="btn btn-secondary" onclick="prevQuestion()" ${quizState.current===0?'disabled':''}>Назад</button><button class="btn btn-primary" onclick="nextQuestion()">${quizState.current===quizState.questions.length-1?'Завершить':'Далее'}</button></div>
|
||
</div>`;
|
||
}
|
||
|
||
function selectAnswer(idx) {quizState.answers[quizState.current]=idx;renderQuiz();}
|
||
function nextQuestion() {if(quizState.answers[quizState.current]===undefined){showToast('Выберите ответ','error');return;}quizState.current++;renderQuiz();}
|
||
function prevQuestion() {if(quizState.current>0){quizState.current--;renderQuiz();}}
|
||
|
||
function renderQuizResult() {
|
||
const container = document.getElementById('quizContainer');
|
||
let correct = 0;
|
||
quizState.questions.forEach((q,i)=>{if(quizState.answers[i]===q.correct)correct++;});
|
||
const total = quizState.questions.length;
|
||
const percent = Math.round((correct/total)*100);
|
||
const p = getProgress();
|
||
p.quizzesCompleted++;
|
||
if (percent === 100) p.perfectQuizzes++;
|
||
p.totalScore += correct * 5;
|
||
p.quizHistory.push({date:new Date().toISOString(),score:percent,correct,total,type:currentQuizType});
|
||
saveProgress(p);
|
||
checkAchievements();
|
||
|
||
container.innerHTML = `
|
||
<div class="quiz-card"><div class="quiz-result">
|
||
<div class="score-circle"><div class="number">${percent}%</div><div class="label">${correct}/${total}</div></div>
|
||
<h3>${percent>=80?'МашааАллах!':percent>=50?'Хороший результат!':'Продолжай учить!'}</h3>
|
||
<p>${percent>=80?'Отличное знание материала!':percent>=50?'Неплохо, повтори сложные темы.':'Рекомендуем вернуться к урокам.'}</p>
|
||
<div style="display:flex;gap:12px;justify-content:center">
|
||
<button class="btn btn-primary" onclick="resetQuiz()">Ещё раз</button>
|
||
<button class="btn btn-secondary" onclick="showPage('vocabulary')">К словарю</button>
|
||
</div>
|
||
</div></div>`;
|
||
}
|
||
|
||
function resetQuiz() {quizState={current:0,answers:[],score:0,questions:[]};renderQuiz();}
|
||
|
||
function renderDashboard() {
|
||
const p = updateStreak();
|
||
document.getElementById('dailyGoal').innerHTML = `
|
||
<div class="daily-goal">
|
||
<div class="daily-goal-header"><h4>🎯 Ежедневная цель</h4><span style="font-weight:700;color:var(--quran-gold)">${p.dailyProgress}/${p.dailyGoal}</span></div>
|
||
<div class="daily-goal-progress"><div class="daily-goal-bar" style="width:${Math.min(100,(p.dailyProgress/p.dailyGoal)*100)}%"></div></div>
|
||
<div class="daily-goal-text">${p.dailyProgress>=p.dailyGoal?'Цель достигнута! МаашааАллах!':'Пройдите ещё '+(p.dailyGoal-p.dailyProgress)+' заданий'}</div>
|
||
</div>`;
|
||
|
||
document.getElementById('dashboardStats').innerHTML = `
|
||
<div class="stat-card"><div class="stat-icon">🔤</div><div class="stat-value">${p.lettersLearned}</div><div class="stat-label">Букв изучено</div></div>
|
||
<div class="stat-card"><div class="stat-icon"> vowelmarks</div><div class="stat-value">${p.harakaatLearned}</div><div class="stat-label">Огласовок</div></div>
|
||
<div class="stat-card"><div class="stat-icon">🔥</div><div class="stat-value">${p.streak}</div><div class="stat-label">Дней подряд</div></div>
|
||
<div class="stat-card"><div class="stat-icon">⭐</div><div class="stat-value">${p.totalScore}</div><div class="stat-label">Баллов</div></div>`;
|
||
|
||
const today = new Date();
|
||
let calHTML = '';
|
||
for (let i=27;i>=0;i--) {
|
||
const date=new Date(today);date.setDate(date.getDate()-i);
|
||
const dateStr=date.toISOString().split('T')[0];
|
||
calHTML+=`<div class="streak-day ${p.activeDays.includes(dateStr)?'active':''} ${i===0?'today':''}" title="${dateStr}"></div>`;
|
||
}
|
||
document.getElementById('streakCalendar').innerHTML = calHTML;
|
||
|
||
document.getElementById('achievementsGrid').innerHTML = achievementsData.map(a=>{
|
||
const unlocked=a.condition(p);
|
||
return `<div class="achievement-card ${unlocked?'':'locked'}"><div class="achievement-icon">${a.icon}</div><h4>${a.title}</h4><p>${a.desc}</p></div>`;
|
||
}).join('');
|
||
}
|
||
|
||
function checkAchievements() {
|
||
const p = getProgress();
|
||
achievementsData.forEach(a=>{
|
||
if (a.condition(p)){
|
||
const key='quran-achievement-'+a.id;
|
||
if(!localStorage.getItem(key)){localStorage.setItem(key,'1');showToast('🏆 '+a.title+'!','success');}
|
||
}
|
||
});
|
||
}
|
||
|
||
function showToast(message,type='info') {
|
||
const container=document.getElementById('toastContainer');
|
||
const toast=document.createElement('div');
|
||
toast.className='toast '+type;
|
||
toast.innerHTML=`<span>${message}</span>`;
|
||
container.appendChild(toast);
|
||
setTimeout(()=>toast.remove(),3000);
|
||
}
|
||
|
||
function toggleFaq(btn) {btn.parentElement.classList.toggle('open');}
|
||
|
||
function shuffleArray(arr) {
|
||
const a=[...arr];
|
||
for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}
|
||
return a;
|
||
}
|
||
|
||
// Surah functions
|
||
function showSurah(name) {
|
||
document.getElementById('surah-fatihah').style.display = name === 'fatihah' ? 'block' : 'none';
|
||
document.getElementById('surah-ikhlas').style.display = name === 'ikhlas' ? 'block' : 'none';
|
||
document.getElementById('btn-fatihah').className = name === 'fatihah' ? 'btn btn-primary' : 'btn btn-secondary';
|
||
document.getElementById('btn-ikhlas').className = name === 'ikhlas' ? 'btn btn-primary' : 'btn btn-secondary';
|
||
|
||
const p = getProgress();
|
||
if (name === 'fatihah' && !p.fatihahViewed) {
|
||
p.fatihahViewed = true;
|
||
p.totalScore += 10;
|
||
p.dailyProgress++;
|
||
saveProgress(p);
|
||
showToast('Сура Аль-Фатиха открыта! +10 очков', 'success');
|
||
checkAchievements();
|
||
}
|
||
if (name === 'ikhlas' && !p.ikhlasViewed) {
|
||
p.ikhlasViewed = true;
|
||
p.totalScore += 10;
|
||
p.dailyProgress++;
|
||
saveProgress(p);
|
||
showToast('Сура Аль-Ихлас открыта! +10 очков', 'success');
|
||
checkAchievements();
|
||
}
|
||
}
|
||
|
||
function speakFullSurah(name) {
|
||
const surahs = {
|
||
fatihah: 'بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ. الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ. الرَّحْمَنِ الرَّحِيمِ. مَالِكِ يَوْمِ الدِّينِ. إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ. اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ. صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ',
|
||
ikhlas: 'قُلْ هُوَ اللَّهُ أَحَدٌ. اللَّهُ الصَّمَدُ. لَمْ يَلِدْ وَلَمْ يُولَدْ. وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ'
|
||
};
|
||
|
||
const text = surahs[name];
|
||
const parts = text.split('. ');
|
||
let index = 0;
|
||
|
||
function playNext() {
|
||
if (index < parts.length) {
|
||
const encoded = encodeURIComponent(parts[index]);
|
||
const url = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&q=${encoded}&tl=ar`;
|
||
|
||
const audio = new Audio(url);
|
||
audio.crossOrigin = 'anonymous';
|
||
|
||
audio.onended = () => {
|
||
index++;
|
||
setTimeout(playNext, 400);
|
||
};
|
||
|
||
audio.onerror = () => {
|
||
index++;
|
||
setTimeout(playNext, 400);
|
||
};
|
||
|
||
audio.play().catch(() => {
|
||
index++;
|
||
setTimeout(playNext, 400);
|
||
});
|
||
} else {
|
||
showToast('Сура прослушана!', 'success');
|
||
}
|
||
}
|
||
|
||
playNext();
|
||
}
|
||
|
||
function markSurahPracticed(id) {
|
||
const p = getProgress();
|
||
const key = 'surah-practice-' + id;
|
||
if (!localStorage.getItem(key)) {
|
||
localStorage.setItem(key, '1');
|
||
p.totalScore += 15;
|
||
p.dailyProgress++;
|
||
p.surahPracticed = true;
|
||
saveProgress(p);
|
||
showToast('Отлично! Практика суры выполнена! +15 очков', 'success');
|
||
checkAchievements();
|
||
}
|
||
}
|
||
|
||
function init() {
|
||
const theme=localStorage.getItem('quran-theme')||'light';
|
||
document.documentElement.setAttribute('data-theme',theme);
|
||
document.querySelector('.theme-toggle').textContent=theme==='dark'?'☀️':'🌙';
|
||
updateStreak();
|
||
const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('visible');}});},{threshold:0.1});
|
||
document.querySelectorAll('.fade-in').forEach(el=>observer.observe(el));
|
||
|
||
const p = getProgress();
|
||
if (!p.bismillahRead) {
|
||
p.bismillahRead = true;
|
||
saveProgress(p);
|
||
checkAchievements();
|
||
}
|
||
}
|
||
|
||
init();
|
||
</script>
|
||
</body>
|
||
</html>
|