1274 lines
78 KiB
HTML
1274 lines
78 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;
|
||
}
|
||
|
||
.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; }
|
||
|
||
.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('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('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 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>
|
||
|
||
<!-- 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},
|
||
];
|
||
|
||
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};
|
||
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" onclick="learnLetter(${i})">
|
||
<div class="letter-big">${l.letter}</div>
|
||
<div class="letter-info">
|
||
<div class="name">${l.name}</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>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
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();
|
||
}
|
||
speak(alphabetData[idx].letter);
|
||
}
|
||
|
||
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>
|
||
</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>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
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) {
|
||
if ('speechSynthesis' in window) {
|
||
const utterance = new SpeechSynthesisUtterance(text);
|
||
utterance.lang = 'ar-SA';
|
||
utterance.rate = 0.7;
|
||
speechSynthesis.speak(utterance);
|
||
}
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
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>
|