From f94ed01ef866fd2495fd9b94084c4c0df0eeced1 Mon Sep 17 00:00:00 2001 From: Dauren777 Date: Fri, 19 Jun 2026 06:16:57 +0000 Subject: [PATCH] Arabic platform v2 - full featured --- index.html | 2497 +++++++++++++++++----------------------------------- 1 file changed, 806 insertions(+), 1691 deletions(-) diff --git a/index.html b/index.html index a288826..2eaee78 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,6 @@ } * { box-sizing: border-box; margin: 0; padding: 0; } - html { scroll-behavior: smooth; } body { @@ -70,1160 +69,485 @@ body { unicode-bidi: isolate; } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px; -} +.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; + 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; + max-width: 1200px; margin: 0 auto; + display: flex; align-items: center; justify-content: space-between; height: 70px; } .nav-logo { - font-size: 24px; - font-weight: 800; - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - text-decoration: none; + font-size: 24px; font-weight: 800; + background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; + text-decoration: none; cursor: pointer; } -.nav-links { - display: flex; - gap: 32px; - list-style: none; -} +.nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { - color: var(--text-secondary); - text-decoration: none; - font-weight: 600; - font-size: 15px; - transition: color 0.2s; + 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: 16px; -} +.nav-actions { display: flex; align-items: center; gap: 16px; } .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; + 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; + 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; + background: var(--gradient-accent); color: #fff; box-shadow: 0 4px 16px rgba(0,229,255,0.3); } +.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,229,255,0.4); } -.btn-primary:hover { - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(0,229,255,0.4); -} - -.btn-secondary { - background: var(--bg-card); - color: var(--ink); - border: 1px solid var(--border); -} - +.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: #0F1218; -} +.btn-outline { background: transparent; color: var(--cyan); border: 2px solid var(--cyan); } +.btn-outline:hover { background: var(--cyan); color: #0F1218; } .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; + 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; + background: var(--gradient-hero); padding: 140px 24px 100px; + text-align: center; position: relative; overflow: hidden; } .hero::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; + content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(0,229,255,0.1) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(99,102,241,0.1) 0%, transparent 50%); animation: pulse 8s ease-in-out infinite; } -@keyframes pulse { - 0%, 100% { opacity: 0.5; } - 50% { opacity: 1; } -} +@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .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(0,229,255,0.1); - border: 1px solid rgba(0,229,255,0.3); - border-radius: 100px; - color: var(--cyan); - font-size: 14px; - font-weight: 600; - margin-bottom: 32px; + display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; + background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.3); + border-radius: 100px; color: var(--cyan); font-size: 14px; font-weight: 600; margin-bottom: 32px; } -.hero h1 { - font-size: 64px; - font-weight: 800; - line-height: 1.05; - color: #fff; - margin-bottom: 24px; -} +.hero h1 { font-size: 64px; font-weight: 800; line-height: 1.05; color: #fff; margin-bottom: 24px; } +.hero h1 span { background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } -.hero h1 span { - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} +.hero-arabic { font-size: 48px; color: var(--cyan); margin-bottom: 24px; opacity: 0.9; } +.hero p { font-size: 20px; color: #9aa3b2; max-width: 600px; margin: 0 auto 40px; } -.hero-arabic { - font-size: 48px; - color: var(--cyan); - margin-bottom: 24px; - opacity: 0.9; -} - -.hero p { - font-size: 20px; - color: #9aa3b2; - max-width: 600px; - margin: 0 auto 40px; -} - -.hero-actions { - display: flex; - gap: 16px; - justify-content: center; - flex-wrap: wrap; -} +.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); + 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: 36px; - font-weight: 800; - color: var(--cyan); -} - -.hero-stat p { - font-size: 14px; - color: #9aa3b2; - margin: 0; -} +.hero-stat h3 { font-size: 36px; font-weight: 800; color: var(--cyan); } +.hero-stat p { font-size: 14px; color: #9aa3b2; margin: 0; } /* SECTIONS */ -.section { - padding: 100px 24px; -} +.section { padding: 100px 24px; } -.section-header { - text-align: center; - max-width: 600px; - margin: 0 auto 60px; -} +.section-header { text-align: center; max-width: 600px; margin: 0 auto 60px; } .section-header .badge { - display: inline-block; - padding: 6px 16px; - background: rgba(0,229,255,0.1); - color: var(--cyan); - border-radius: 100px; - font-size: 13px; - font-weight: 700; - margin-bottom: 16px; + display: inline-block; padding: 6px 16px; background: rgba(0,229,255,0.1); + color: var(--cyan); border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 16px; } -.section-header h2 { - font-size: 42px; - font-weight: 800; - line-height: 1.15; - margin-bottom: 16px; -} - -.section-header p { - color: var(--text-secondary); - font-size: 18px; -} +.section-header h2 { font-size: 42px; font-weight: 800; line-height: 1.15; margin-bottom: 16px; } +.section-header p { color: var(--text-secondary); font-size: 18px; } /* FEATURES */ -.features-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; -} +.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { - background: var(--bg-card); - border-radius: 20px; - padding: 36px; - border: 1px solid var(--border); - transition: all 0.3s; - position: relative; - overflow: hidden; + background: var(--bg-card); border-radius: 20px; padding: 36px; + border: 1px solid var(--border); transition: all 0.3s; position: relative; overflow: hidden; } .feature-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: var(--gradient-accent); - opacity: 0; - transition: opacity 0.3s; -} - -.feature-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-lg); - border-color: var(--cyan); + content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; + background: var(--gradient-accent); opacity: 0; transition: opacity 0.3s; } +.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--cyan); } .feature-card:hover::before { opacity: 1; } .feature-icon { - width: 56px; - height: 56px; - border-radius: 16px; - background: var(--gradient-card); - display: flex; - align-items: center; - justify-content: center; - font-size: 28px; - margin-bottom: 20px; + width: 56px; height: 56px; border-radius: 16px; background: var(--gradient-card); + display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; } -.feature-card h3 { - font-size: 20px; - font-weight: 700; - margin-bottom: 12px; -} - -.feature-card p { - color: var(--text-secondary); - font-size: 15px; - line-height: 1.6; -} +.feature-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; } +.feature-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; } /* COURSES */ -.courses-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; -} +.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .course-card { - background: var(--bg-card); - border-radius: 20px; - overflow: hidden; - border: 1px solid var(--border); - transition: all 0.3s; - cursor: pointer; + background: var(--bg-card); border-radius: 20px; overflow: hidden; + border: 1px solid var(--border); transition: all 0.3s; cursor: pointer; } +.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } -.course-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-lg); -} - -.course-header { - padding: 32px; - background: var(--gradient-hero); - color: #fff; - text-align: center; -} +.course-header { padding: 32px; background: var(--gradient-hero); color: #fff; text-align: center; } .course-level { - display: inline-block; - padding: 4px 16px; - background: rgba(0,229,255,0.2); - border-radius: 100px; - font-size: 14px; - font-weight: 700; - color: var(--cyan); - margin-bottom: 12px; + display: inline-block; padding: 4px 16px; background: rgba(0,229,255,0.2); + border-radius: 100px; font-size: 14px; font-weight: 700; color: var(--cyan); margin-bottom: 12px; } -.course-header h3 { - font-size: 28px; - font-weight: 800; - margin-bottom: 8px; -} +.course-header h3 { font-size: 28px; font-weight: 800; margin-bottom: 8px; } +.course-header p { color: #9aa3b2; font-size: 14px; } +.course-body { padding: 24px; } -.course-header p { - color: #9aa3b2; - font-size: 14px; -} - -.course-body { - padding: 24px; -} - -.course-info { - display: flex; - justify-content: space-between; - margin-bottom: 20px; - font-size: 14px; - color: var(--text-secondary); -} - -.course-info span { - display: flex; - align-items: center; - gap: 6px; -} - -.course-topics { - list-style: none; - margin-bottom: 20px; -} - -.course-topics li { - padding: 10px 0; - border-bottom: 1px solid var(--border); - font-size: 14px; - display: flex; - align-items: center; - gap: 10px; -} +.course-info { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 14px; color: var(--text-secondary); } +.course-info span { display: flex; align-items: center; gap: 6px; } +.course-topics { list-style: none; margin-bottom: 20px; } +.course-topics li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; display: flex; align-items: center; gap: 10px; } .course-topics li:last-child { border: none; } -.course-progress { - height: 6px; - background: var(--border); - border-radius: 100px; - overflow: hidden; - margin-bottom: 12px; -} - -.course-progress-bar { - height: 100%; - background: var(--gradient-accent); - border-radius: 100px; - transition: width 0.5s; -} +.course-progress { height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; margin-bottom: 12px; } +.course-progress-bar { height: 100%; background: var(--gradient-accent); border-radius: 100px; transition: width 0.5s; } /* VOCABULARY */ -.vocab-section { - background: var(--bg-card); -} +.vocab-section { background: var(--bg-card); } -.vocab-controls { - display: flex; - gap: 16px; - margin-bottom: 32px; - flex-wrap: wrap; -} +.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; + 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(--cyan); } -.vocab-filters { - display: flex; - gap: 8px; - flex-wrap: wrap; -} +.vocab-filters { display: flex; gap: 8px; flex-wrap: wrap; } .filter-btn { - 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; - transition: all 0.2s; + 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; transition: all 0.2s; } +.filter-btn.active, .filter-btn:hover { background: var(--cyan); color: #0F1218; border-color: var(--cyan); } -.filter-btn.active, -.filter-btn:hover { - background: var(--cyan); - color: #0F1218; - border-color: var(--cyan); -} - -.vocab-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 20px; -} +.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 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; + 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(--cyan); } -.vocab-card:hover { - transform: translateY(-2px); - box-shadow: var(--shadow); - border-color: var(--cyan); -} - -.vocab-card .arabic-word { - font-size: 36px; - font-weight: 700; - margin-bottom: 8px; - color: var(--accent); -} - -.vocab-card .transcription { - font-size: 14px; - color: var(--text-secondary); - margin-bottom: 8px; - font-style: italic; -} - -.vocab-card .translation { - font-size: 18px; - font-weight: 600; - margin-bottom: 12px; -} +.vocab-card .arabic-word { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: var(--accent); } +.vocab-card .transcription { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; font-style: italic; } +.vocab-card .translation { font-size: 18px; font-weight: 600; margin-bottom: 12px; } .vocab-card .example { - font-size: 14px; - color: var(--text-secondary); - padding: 12px; - background: var(--bg-card); - border-radius: 8px; - margin-top: 12px; -} - -.vocab-card .example .arabic { - font-size: 18px; - color: var(--ink); - margin-bottom: 4px; + font-size: 14px; color: var(--text-secondary); padding: 12px; + background: var(--bg-card); border-radius: 8px; margin-top: 12px; } +.vocab-card .example .arabic { font-size: 18px; color: var(--ink); margin-bottom: 4px; } .vocab-card .category-tag { - position: absolute; - top: 16px; - right: 16px; - padding: 4px 12px; - background: rgba(0,229,255,0.1); - color: var(--cyan); - border-radius: 100px; - font-size: 12px; - font-weight: 600; + position: absolute; top: 16px; right: 16px; padding: 4px 12px; + background: rgba(0,229,255,0.1); color: var(--cyan); border-radius: 100px; + font-size: 12px; 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-top: 12px; -} - -.vocab-card .audio-btn:hover { - background: var(--cyan); - border-color: var(--cyan); + 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-top: 12px; } +.vocab-card .audio-btn:hover { background: var(--cyan); border-color: var(--cyan); } .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: 20px; - transition: all 0.2s; + position: absolute; top: 16px; left: 16px; width: 36px; height: 36px; + border-radius: 50%; border: none; background: transparent; cursor: pointer; + font-size: 20px; transition: all 0.2s; } - .vocab-card .fav-btn:hover { transform: scale(1.2); } .vocab-card .fav-btn.active { color: var(--error); } /* QUIZ */ -.quiz-container { - max-width: 700px; - margin: 0 auto; +.quiz-container { max-width: 700px; margin: 0 auto; } + +.quiz-type-selector { + display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; } +.quiz-type-card { + background: var(--bg-card); border-radius: 16px; padding: 24px; + border: 2px solid var(--border); cursor: pointer; transition: all 0.2s; text-align: center; +} +.quiz-type-card:hover { border-color: var(--cyan); transform: translateY(-2px); } +.quiz-type-card.active { border-color: var(--accent); background: rgba(99,102,241,0.1); } +.quiz-type-card .icon { font-size: 32px; margin-bottom: 8px; } +.quiz-type-card h4 { font-size: 16px; margin-bottom: 4px; } +.quiz-type-card p { font-size: 13px; color: var(--text-secondary); } + .quiz-card { - background: var(--bg-card); - border-radius: 20px; - padding: 40px; - border: 1px solid var(--border); - margin-bottom: 24px; + 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 { 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-progress-bar { - flex: 1; - height: 8px; - background: var(--border); - border-radius: 100px; - overflow: hidden; -} +.quiz-question { font-size: 24px; font-weight: 700; margin-bottom: 8px; } +.quiz-arabic { font-size: 32px; color: var(--accent); margin-bottom: 32px; } -.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: 24px; - font-weight: 700; - margin-bottom: 8px; -} - -.quiz-arabic { - font-size: 32px; - color: var(--accent); - margin-bottom: 32px; -} - -.quiz-options { - display: flex; - flex-direction: column; - gap: 12px; -} +.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; + 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(--cyan); } - -.quiz-option.selected { - border-color: var(--accent); - background: rgba(99,102,241,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.selected { border-color: var(--accent); background: rgba(99,102,241,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; + 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-input { + width: 100%; padding: 16px 20px; border-radius: 12px; border: 2px solid var(--border); + background: var(--bg); color: var(--ink); font-size: 18px; outline: none; transition: border-color 0.2s; + font-family: 'Noto Sans Arabic', 'Arial', sans-serif; direction: rtl; } +.quiz-input:focus { border-color: var(--cyan); } + +.quiz-match-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } + +.quiz-match-item { + padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border); + background: var(--bg); cursor: pointer; transition: all 0.2s; text-align: center; +} +.quiz-match-item:hover { border-color: var(--cyan); } +.quiz-match-item.selected { border-color: var(--accent); background: rgba(99,102,241,0.1); } +.quiz-match-item.matched { border-color: var(--success); background: rgba(34,197,94,0.1); opacity: 0.7; } + +.quiz-actions { display: flex; justify-content: space-between; margin-top: 24px; } /* QUIZ RESULTS */ -.quiz-result { - text-align: center; - padding: 48px; -} +.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; + 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; } /* LESSONS */ -.lesson-tabs { - display: flex; - gap: 8px; - margin-bottom: 32px; - overflow-x: auto; - padding-bottom: 8px; -} +.lesson-tabs { display: flex; gap: 8px; margin-bottom: 32px; overflow-x: auto; padding-bottom: 8px; } .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(--cyan); - color: #0F1218; - border-color: var(--cyan); + 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(--cyan); color: #0F1218; border-color: var(--cyan); } .lesson-content { - background: var(--bg-card); - border-radius: 20px; - padding: 40px; - border: 1px solid var(--border); + background: var(--bg-card); border-radius: 20px; padding: 40px; border: 1px solid var(--border); } -.lesson-content h3 { - font-size: 24px; - margin-bottom: 24px; -} - -.lesson-text { - margin-bottom: 24px; -} - -.lesson-text p { - margin-bottom: 16px; - line-height: 1.8; -} +.lesson-content h3 { font-size: 24px; margin-bottom: 24px; } +.lesson-text { margin-bottom: 24px; } +.lesson-text p { margin-bottom: 16px; line-height: 1.8; } .lesson-example { - background: var(--bg); - border-radius: 12px; - padding: 24px; - margin-bottom: 16px; + background: var(--bg); border-radius: 12px; padding: 24px; margin-bottom: 16px; border-left: 4px solid var(--cyan); } +.lesson-example .arabic { font-size: 28px; color: var(--accent); margin-bottom: 8px; } +.lesson-example .transcription { color: var(--text-secondary); font-style: italic; margin-bottom: 4px; } +.lesson-example .translation { font-weight: 600; } -.lesson-example .arabic { - font-size: 28px; - color: var(--accent); - margin-bottom: 8px; +.lesson-exercise { + background: rgba(0,229,255,0.05); border: 1px solid rgba(0,229,255,0.2); + border-radius: 12px; padding: 24px; margin-top: 24px; } +.lesson-exercise h4 { font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } -.lesson-example .transcription { - color: var(--text-secondary); - font-style: italic; - margin-bottom: 4px; +.exercise-input { + width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border); + background: var(--bg); color: var(--ink); font-size: 16px; outline: none; margin-bottom: 12px; } +.exercise-input:focus { border-color: var(--cyan); } -.lesson-example .translation { - font-weight: 600; +.exercise-feedback { + padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-top: 8px; + display: none; } +.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); } /* DASHBOARD */ -.dashboard-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; - margin-bottom: 32px; -} +.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; + 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(--accent); margin-bottom: 4px; } +.stat-card .stat-label { font-size: 14px; color: var(--text-secondary); } -.stat-card .stat-icon { - font-size: 32px; - margin-bottom: 12px; -} +.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(--cyan); } +.streak-day.today { background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } -.stat-card .stat-value { - font-size: 32px; - font-weight: 800; - color: var(--accent); - 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(--cyan); -} - -.streak-day.today { - background: var(--accent); - box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); -} - -/* ACHIEVEMENTS */ -.achievements-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 16px; -} +.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .achievement-card { - background: var(--bg-card); - border-radius: 16px; - padding: 24px; - border: 1px solid var(--border); - text-align: center; - transition: all 0.3s; + background: var(--bg-card); border-radius: 16px; padding: 20px; + border: 1px solid var(--border); text-align: center; transition: all 0.3s; } - .achievement-card.locked { opacity: 0.5; } +.achievement-card .achievement-icon { font-size: 40px; margin-bottom: 8px; } +.achievement-card h4 { font-size: 15px; margin-bottom: 4px; } +.achievement-card p { font-size: 12px; color: var(--text-secondary); } -.achievement-card .achievement-icon { - font-size: 48px; - margin-bottom: 12px; -} - -.achievement-card h4 { - font-size: 16px; - margin-bottom: 4px; -} - -.achievement-card p { - font-size: 13px; - color: var(--text-secondary); +.history-list { display: flex; flex-direction: column; gap: 12px; } +.history-item { + background: var(--bg-card); border-radius: 12px; padding: 16px; + border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } +.history-item .date { font-size: 13px; color: var(--text-secondary); } +.history-item .score { font-weight: 700; color: var(--accent); } /* 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; + 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: 500px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - transform: translateY(20px); - transition: transform 0.3s; + background: var(--bg); border-radius: 24px; padding: 40px; max-width: 500px; + 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 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .modal-header h3 { font-size: 24px; } .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; + 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: 20px; -} +.form-group { margin-bottom: 20px; } +.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; } -.form-group label { - display: block; - font-size: 14px; - font-weight: 600; - margin-bottom: 8px; -} - -.form-group input, -.form-group select { - width: 100%; - padding: 14px 16px; - border-radius: 12px; - border: 1px solid var(--border); - background: var(--bg-card); - color: var(--ink); - font-size: 16px; - outline: none; - transition: border-color 0.2s; -} - -.form-group input:focus, -.form-group select:focus { border-color: var(--cyan); } - -.form-error { - font-size: 13px; - color: var(--error); - margin-top: 4px; +.form-group input, .form-group select { + width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); + background: var(--bg-card); color: var(--ink); font-size: 16px; outline: none; transition: border-color 0.2s; } +.form-group input:focus, .form-group select:focus { border-color: var(--cyan); } +.form-error { font-size: 13px; color: var(--error); margin-top: 4px; } /* FAQ */ -.faq-list { - max-width: 800px; - margin: 0 auto; -} - -.faq-item { - border-bottom: 1px solid var(--border); -} +.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; + 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-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-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s; } .faq-item.open .faq-answer { max-height: 200px; } - -.faq-answer p { - padding-bottom: 20px; - color: var(--text-secondary); - line-height: 1.8; -} +.faq-answer p { padding-bottom: 20px; color: var(--text-secondary); line-height: 1.8; } /* FOOTER */ -.footer { - background: var(--gradient-hero); - padding: 80px 24px 40px; - color: #fff; -} +.footer { background: var(--gradient-hero); padding: 80px 24px 40px; color: #fff; } -.footer-grid { - display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - gap: 48px; - margin-bottom: 48px; -} +.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand h3 { - font-size: 24px; - font-weight: 800; - margin-bottom: 16px; - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.footer-brand p { - color: #9aa3b2; - font-size: 14px; - line-height: 1.8; -} - -.footer-links h4 { - font-size: 16px; - font-weight: 700; - margin-bottom: 20px; -} - -.footer-links a { - display: block; - color: #9aa3b2; - text-decoration: none; - font-size: 14px; - padding: 6px 0; - transition: color 0.2s; + font-size: 24px; font-weight: 800; margin-bottom: 16px; + background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } +.footer-brand p { color: #9aa3b2; font-size: 14px; line-height: 1.8; } +.footer-links h4 { font-size: 16px; font-weight: 700; margin-bottom: 20px; } +.footer-links a { display: block; color: #9aa3b2; text-decoration: none; font-size: 14px; padding: 6px 0; transition: color 0.2s; cursor: pointer; } .footer-links a:hover { color: var(--cyan); } .footer-bottom { - padding-top: 32px; - border-top: 1px solid rgba(255,255,255,0.1); - display: flex; - justify-content: space-between; - align-items: center; - color: #9aa3b2; - font-size: 14px; + padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); + display: flex; justify-content: space-between; align-items: center; color: #9aa3b2; font-size: 14px; } /* TOAST */ -.toast-container { - position: fixed; - bottom: 24px; - right: 24px; - z-index: 3000; - display: flex; - flex-direction: column; - gap: 8px; -} +.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: 300px; + 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: 300px; } - .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; } -} +@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* 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; + 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; -} +.mobile-menu a { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 18px; } /* PAGES */ .page { display: none; } @@ -1231,8 +555,7 @@ body { /* RESPONSIVE */ @media (max-width: 1024px) { - .features-grid, - .courses-grid { grid-template-columns: repeat(2, 1fr); } + .features-grid, .courses-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @@ -1240,28 +563,22 @@ body { @media (max-width: 768px) { .nav-links { display: none; } .hamburger { display: flex; } - .hero { padding: 120px 20px 60px; } .hero h1 { font-size: 36px; } .hero-arabic { font-size: 32px; } .hero p { font-size: 16px; } .hero-stats { flex-direction: column; gap: 24px; } - .section { padding: 60px 20px; } .section-header h2 { font-size: 28px; } - - .features-grid, - .courses-grid { grid-template-columns: 1fr; } - + .features-grid, .courses-grid { grid-template-columns: 1fr; } .dashboard-grid { grid-template-columns: 1fr 1fr; } - .vocab-grid { grid-template-columns: 1fr; } - .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } - .quiz-card { padding: 24px; } .lesson-content { padding: 24px; } + .quiz-type-selector { grid-template-columns: 1fr; } + .quiz-match-container { grid-template-columns: 1fr; } } @media (max-width: 480px) { @@ -1272,23 +589,24 @@ body { .hero-actions .btn { width: 100%; } } -/* SCROLLBAR */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } -/* ANIMATIONS */ -.fade-in { - opacity: 0; - transform: translateY(20px); - transition: all 0.6s ease; -} +.fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } +.fade-in.visible { opacity: 1; transform: translateY(0); } -.fade-in.visible { - opacity: 1; - transform: translateY(0); +/* Daily goal */ +.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: 16px; } +.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; } @@ -1296,13 +614,13 @@ body { -
- Возможности - Курсы - Словарь - Тесты - Прогресс + Главная + Словарь + Уроки + Тесты + Прогресс
-
-
✨ Бесплатно • Без регистрации для просмотра
-
مرحباً بكم
+
✨ Бесплатно • Без ограничений
+
مرحباً بكم في عالم العربية

Изучай арабский легко и быстро

-

Интерактивные уроки, словарь с произношением, тесты и отслеживание прогресса. Начни с нуля или продолжи обучение.

+

Интерактивные уроки, словарь с произношением, тесты и отслеживание прогресса. Начни с нуля и достигни свободного общения.

- Начать обучение - Смотреть курсы + Начать обучение + Смотреть уроки
-
-

150+

-

Словарных слов

-
-
-

30+

-

Уроков

-
-
-

100+

-

Тестовых вопросов

-
-
-

A1–B1

-

Уровни

-
+

200+

Словарных слов

+

30+

Уроков

+

150+

Тестовых вопросов

+

A1–B1

Уровни

-
@@ -1372,41 +675,16 @@ body {

Интерактивный подход к изучению арабского языка

-
-
📚
-

Структурированные курсы

-

Пошаговые программы от начального до среднего уровня с теорией и практикой

-
-
-
🗣️
-

Арабский с произношением

-

Каждое слово с транскрипцией и аудио для правильного произношения

-
-
-
✅
-

Интерактивные тесты

-

Разнообразные задания для проверки знаний с мгновенной обратной связью

-
-
-
📊
-

Отслеживание прогресса

-

Статистика, достижения и ежедневные цели для мотивации

-
-
-
📖
-

Умный словарь

-

Поиск, фильтрация по темам, избранные слова и карточки для запоминания

-
-
-
🌙
-

Тёмная и светлая тема

-

Удобный интерфейс для занятий в любое время суток

-
+
📚

Структурированные курсы

Пошаговые программы от начального до среднего уровня с теорией и практикой

+
🗣️

Арабский с произношением

Каждое слово с транскрипцией и аудио для правильного произношения

+
✅

Интерактивные тесты

Разнообразные задания: выбор ответа, заполнение пропусков, сопоставление

+
📊

Отслеживание прогресса

Статистика, достижения и ежедневные цели для мотивации

+
📖

Умный словарь

Поиск, фильтрация по темам, избранные слова и карточки для запоминания

+
🌙

Тёмная и светлая тема

Удобный интерфейс для занятий в любое время суток

-
@@ -1422,24 +700,15 @@ body {

Основы алфавита, базовые слова и фразы

-
- 📚 10 уроков - ⏱ 15 часов -
+
📚 10 уроков⏱ 15 часов
    -
  • 🔤 Арабский алфавит
    • -
  • 👋 Приветствия и знакомство
    • -
  • 🔢 Числа от 1 до 100
    • -
  • 👨‍👩‍👧 Семья и люди
    • -
  • 🏠 Дом и быт
    • +
  • 🔤 Арабский алфавит
  • 👋 Приветствия и знакомство
    • +
  • 🔢 Числа от 1 до 100
  • 👨‍👩‍👧 Семья и люди
  • 🏠 Дом и быт
-
-
-
+
Прогресс: 0%
-
A2 — Элементарный
@@ -1447,24 +716,15 @@ body {

Расширение словарного запаса и грамматика

-
- 📚 12 уроков - ⏱ 20 часов -
+
📚 12 уроков⏱ 20 часов
    -
  • 🛒 Покупки и еда
    • -
  • ✈️ Путешествия
    • -
  • ⏰ Время и даты
    • -
  • 💼 Работа и профессии
    • -
  • 🌤 Погода и природа
    • +
  • 🛒 Покупки и еда
  • ✈️ Путешествия
    • +
  • ⏰ Время и даты
  • 💼 Работа и профессии
  • 🌤 Погода и природа
-
-
-
+
Прогресс: 0%
-
B1 — Средний
@@ -1472,20 +732,12 @@ body {

Свободное общение и понимание текстов

-
- 📚 10 уроков - ⏱ 25 часов -
+
📚 10 уроков⏱ 25 часов
    -
  • 📰 Чтение новостей
    • -
  • 🎬 Обсуждение фильмов
    • -
  • 🏥 Здоровье и медицина
    • -
  • 🌍 Культура и традиции
    • -
  • 💼 Деловой арабский
    • +
  • 📰 Чтение новостей
  • 🎬 Обсуждение фильмов
    • +
  • 🏥 Здоровье и медицина
  • 🌍 Культура и традиции
  • 💼 Деловой арабский
-
-
-
+
Прогресс: 0%
@@ -1493,7 +745,6 @@ body {
-
@@ -1501,79 +752,23 @@ body {

Часто задаваемые вопросы

-
- -
-

Нет! Курс A1 начинается с самого нуля — с алфавита и базовых звуков. Мы пошагово ведём от простого к сложному.

-
-
-
- -
-

Рекомендуем заниматься 15–30 минут в день. Регулярность важнее длительности. Система отслеживает вашу серию занятий.

-
-
-
- -
-

Да, все уроки, словарь и тесты полностью бесплатны. Никаких скрытых платежей или подписок.

-
-
-
- -
-

Прогресс сохраняется локально в вашем браузере. После регистрации данные привязываются к аккаунту.

-
-
+

Нет! Курс A1 начинается с самого нуля — с алфавита и базовых звуков.

+

Рекомендуем 15–30 минут в день. Регулярность важнее длительности.

+

Да, все уроки, словарь и тесты полностью бесплатны.

+

Прогресс сохраняется локально в браузере. После регистрации данные привязываются к аккаунту.

- @@ -1583,12 +778,7 @@ body {
-
-
СЛОВАРЬ
-

Арабский словарь

-

Ищите слова, добавляйте в избученные и практикуйте произношение

-
- +
СЛОВАРЬ

Арабский словарь

Ищите слова, добавляйте в избученные и практикуйте произношение

@@ -1599,9 +789,11 @@ body { + + +
-
@@ -1611,14 +803,8 @@ body {
-
-
УРОКИ
-

Уроки арабского языка

-

Изучайте арабский пошагово с теорией и практикой

-
- +
УРОКИ

Уроки арабского языка

Изучайте арабский пошагово с теорией и практикой

-
@@ -1628,12 +814,13 @@ body {
-
-
ТЕСТЫ
-

Проверь свои знания

-

Интерактивные тесты для закрепления материала

+
ТЕСТЫ

Проверь свои знания

Разнообразные тесты для закрепления материала

+
+
✅

Выбор ответа

Выберите правильный вариант

+
✍️

Ввод слова

Напишите перевод самостоятельно

+
🔗

Сопоставление

Соедините пары слов

+
🎲

Смешанный

Разные типы вопросов

-
@@ -1643,14 +830,9 @@ body {
-
-
ПРОГРЕСС
-

Мой прогресс

-

Отслеживайте свои достижения и статистику обучения

-
- +
ПРОГРЕСС

Мой прогресс

Отслеживайте свои достижения и статистику

+
-

📅 Календарь активности

@@ -1661,6 +843,10 @@ body {
+
+

📝 История тестов

+
+
@@ -1668,355 +854,317 @@ body { -