From acc7fbb111f759052094e8cb62d0660d058c3aa0 Mon Sep 17 00:00:00 2001 From: sultanbek_askaruly Date: Fri, 19 Jun 2026 06:38:22 +0000 Subject: [PATCH] Hogwarts redesign: dark theme, gold accents, parchment, stars, house cards --- .git-credentials | 2 - contact.html | 4 + css/style.css | 775 +++++++++++++++++++++++++++------------------ exercises.html | 4 + grammar.html | 4 + index.html | 57 ++-- js/script.js | 18 ++ progress.html | 4 + pronunciation.html | 4 + reading.html | 4 + tests.html | 4 + vocabulary.html | 4 + 12 files changed, 542 insertions(+), 342 deletions(-) delete mode 100644 .git-credentials diff --git a/.git-credentials b/.git-credentials deleted file mode 100644 index d78ec0a..0000000 --- a/.git-credentials +++ /dev/null @@ -1,2 +0,0 @@ -http://sultanbek_askaruly:ccaf3980723058bd093e312780c167c82b9a54e6@172.18.0.1%3a3300 -https://sultanbek_askaruly:ccaf3980723058bd093e312780c167c82b9a54e6@git.vibe42.kz diff --git a/contact.html b/contact.html index 10a8fe9..78922b6 100644 --- a/contact.html +++ b/contact.html @@ -4,9 +4,13 @@ Contact — English Easy + + + +
diff --git a/css/style.css b/css/style.css index 88b6daf..a2928d7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,23 @@ +/* ⚡ Hogwarts Theme ⚡ */ :root { - --ink: #1A1D23; - --ink-light: #2D3436; - --accent: #6C5CE7; - --accent-light: #A29BFE; - --accent-50: #F0EEFF; - --green: #00B894; - --green-light: #E6F9F4; - --warm: #FFEAA7; - --warm-light: #FFF9E6; + --night: #0B0720; + --night-light: #151030; + --parchment: #F4E4C1; + --parchment-dark: #E8D5A8; + --gold: #C9A84C; + --gold-light: #E8D48B; + --gold-dark: #A8862E; + --burgundy: #7B1818; + --burgundy-light: #B22222; + --emerald: #1A6B4F; + --emerald-light: #2E8B67; + --ink: #2C1810; + --ink-light: #5C3A28; --white: #FFFFFF; - --gray-500: #636E72; - --gray-300: #B2BEC3; - --gray-100: #F5F6FA; - --shadow: 0 2px 16px rgba(108, 92, 231, 0.08); - --shadow-hover: 0 8px 30px rgba(108, 92, 231, 0.15); + --cream: #FAF3E0; + --shadow: 0 4px 20px rgba(11, 7, 32, 0.2); + --shadow-hover: 0 8px 35px rgba(11, 7, 32, 0.3); + --glow: 0 0 20px rgba(201, 168, 76, 0.3); } * { @@ -27,31 +31,58 @@ html { } body { - font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; + font: 17px/1.8 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif; color: var(--ink); - background: var(--white); + background: var(--night); min-height: 100vh; display: flex; flex-direction: column; } ::selection { - background: var(--accent-light); - color: var(--white); + background: var(--gold); + color: var(--night); +} + +/* ===== TWINKLING STARS ===== */ +@keyframes twinkle { + 0%, 100% { opacity: 0.3; } + 50% { opacity: 1; } +} + +.stars-bg { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 0; + overflow: hidden; +} + +.star { + position: absolute; + width: 3px; + height: 3px; + background: var(--gold-light); + border-radius: 50%; + animation: twinkle 3s ease-in-out infinite; } .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; + position: relative; + z-index: 1; } /* ===== HEADER ===== */ header { - background: rgba(255,255,255,0.95); + background: rgba(11, 7, 32, 0.95); backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid var(--gray-100); + border-bottom: 2px solid var(--gold-dark); position: sticky; top: 0; z-index: 100; @@ -61,37 +92,41 @@ header { display: flex; align-items: center; justify-content: space-between; - padding: 14px 24px; + padding: 12px 24px; max-width: 1140px; margin: 0 auto; } .logo { - font-size: 24px; - font-weight: 800; - color: var(--ink); + font-family: 'Cinzel', 'Georgia', serif; + font-size: 22px; + font-weight: 700; + color: var(--gold); text-decoration: none; display: flex; align-items: center; - gap: 8px; - letter-spacing: -0.5px; + gap: 10px; + letter-spacing: 1px; + text-transform: uppercase; } .logo-icon { - width: 36px; - height: 36px; - background: var(--accent); - color: var(--white); - border-radius: 10px; + width: 40px; + height: 40px; + background: linear-gradient(135deg, var(--gold), var(--gold-dark)); + color: var(--night); + border-radius: 50%; display: flex; align-items: center; justify-content: center; - font-size: 18px; - font-weight: 800; + font-size: 20px; + font-weight: 900; + font-family: 'Cinzel', serif; + box-shadow: var(--glow); } .logo span { - color: var(--accent); + color: var(--gold-light); } .nav-list { @@ -102,22 +137,25 @@ header { .nav-list a { text-decoration: none; - color: var(--gray-500); + color: var(--parchment-dark); font-size: 14px; - font-weight: 600; + font-weight: 500; + font-family: 'Cinzel', 'Georgia', serif; padding: 8px 14px; - border-radius: 8px; - transition: all 0.2s; + border-radius: 4px; + transition: all 0.3s; + letter-spacing: 0.5px; } .nav-list a:hover { - color: var(--accent); - background: var(--accent-50); + color: var(--gold); + background: rgba(201, 168, 76, 0.1); + text-shadow: 0 0 10px rgba(201, 168, 76, 0.3); } .nav-list a.active { - color: var(--white); - background: var(--accent); + color: var(--night); + background: var(--gold); } .menu-toggle { @@ -126,34 +164,36 @@ header { border: none; font-size: 28px; cursor: pointer; - color: var(--ink); + color: var(--gold); padding: 4px; } /* ===== FOOTER ===== */ footer { - background: var(--ink); - color: var(--gray-300); + background: var(--night-light); + border-top: 2px solid var(--gold-dark); + color: var(--parchment-dark); text-align: center; padding: 36px 24px; margin-top: auto; - font-size: 14px; + font-size: 15px; } footer a { - color: var(--accent-light); + color: var(--gold); text-decoration: none; font-weight: 600; } footer a:hover { - color: var(--accent); + color: var(--gold-light); + text-shadow: 0 0 10px rgba(201, 168, 76, 0.3); } /* ===== HERO ===== */ .hero { - background: linear-gradient(135deg, var(--accent-50) 0%, var(--warm-light) 50%, var(--green-light) 100%); - color: var(--ink); + background: linear-gradient(135deg, var(--night) 0%, var(--night-light) 50%, var(--night) 100%); + color: var(--parchment); padding: 100px 24px; text-align: center; position: relative; @@ -163,12 +203,10 @@ footer a:hover { .hero::before { content: ''; position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle at 30% 50%, rgba(108,92,231,0.05) 0%, transparent 50%), - radial-gradient(circle at 70% 50%, rgba(0,184,148,0.05) 0%, transparent 50%); + top: 0; left: 0; right: 0; bottom: 0; + background: + radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.06) 0%, transparent 50%), + radial-gradient(ellipse at 80% 50%, rgba(201,168,76,0.04) 0%, transparent 50%); pointer-events: none; } @@ -178,42 +216,43 @@ footer a:hover { .hero-badge { display: inline-block; - background: var(--accent); - color: var(--white); - padding: 6px 18px; - border-radius: 20px; - font-size: 13px; + border: 1px solid var(--gold); + color: var(--gold); + padding: 6px 22px; + font-size: 12px; font-weight: 700; + font-family: 'Cinzel', serif; text-transform: uppercase; - letter-spacing: 1px; - margin-bottom: 20px; + letter-spacing: 3px; + margin-bottom: 24px; } .hero h1 { - font-size: 56px; - font-weight: 800; - line-height: 1.1; - margin-bottom: 16px; - letter-spacing: -1.5px; + font-family: 'Cinzel', 'Georgia', serif; + font-size: 52px; + font-weight: 700; + line-height: 1.15; + margin-bottom: 20px; + letter-spacing: 1px; + text-transform: uppercase; } .hero h1 span { - color: var(--accent); + color: var(--gold); } .hero .highlight { - background: linear-gradient(135deg, var(--accent), var(--green)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--gold-light); + text-shadow: 0 0 20px rgba(201, 168, 76, 0.4); } .hero p { - font-size: 20px; - color: var(--gray-500); + font-size: 19px; + color: var(--parchment-dark); max-width: 600px; margin: 0 auto 36px; - line-height: 1.6; + line-height: 1.7; + font-style: italic; } .hero-buttons { @@ -228,22 +267,26 @@ footer a:hover { display: inline-flex; align-items: center; gap: 8px; - background: var(--accent); - color: var(--white); - padding: 14px 30px; - border-radius: 12px; + background: var(--gold); + color: var(--night); + padding: 14px 32px; + font-family: 'Cinzel', 'Georgia', serif; font-weight: 700; + font-size: 14px; + letter-spacing: 1px; text-decoration: none; + text-transform: uppercase; transition: all 0.3s; border: none; cursor: pointer; - font-size: 16px; - box-shadow: 0 4px 14px rgba(108, 92, 231, 0.25); + box-shadow: var(--glow); + clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .btn:hover { transform: translateY(-3px); - box-shadow: 0 8px 25px rgba(108, 92, 231, 0.35); + box-shadow: 0 0 35px rgba(201, 168, 76, 0.5); + background: var(--gold-light); } .btn:active { @@ -252,28 +295,30 @@ footer a:hover { .btn-outline { background: transparent; - color: var(--accent); - border: 2px solid var(--accent); + color: var(--gold); + border: 1px solid var(--gold); box-shadow: none; } .btn-outline:hover { - background: var(--accent); - color: var(--white); - box-shadow: 0 8px 25px rgba(108, 92, 231, 0.3); + background: var(--gold); + color: var(--night); + box-shadow: var(--glow); } -.btn-green { - background: var(--green); - box-shadow: 0 4px 14px rgba(0, 184, 148, 0.25); +.btn-emerald { + background: var(--emerald); + color: var(--cream); + box-shadow: 0 4px 14px rgba(26, 107, 79, 0.4); } -.btn-green:hover { - box-shadow: 0 8px 25px rgba(0, 184, 148, 0.35); +.btn-emerald:hover { + background: var(--emerald-light); + box-shadow: 0 8px 25px rgba(26, 107, 79, 0.5); } .btn:disabled { - opacity: 0.5; + opacity: 0.4; cursor: not-allowed; transform: none; } @@ -281,32 +326,60 @@ footer a:hover { /* ===== SECTIONS ===== */ .section { padding: 80px 24px; + position: relative; +} + +.section::before { + content: '✦'; + display: block; + text-align: center; + color: var(--gold); + font-size: 18px; + letter-spacing: 20px; + margin-bottom: -50px; + opacity: 0.5; } .section-alt { - background: var(--gray-100); + background: var(--cream); +} + +.section-alt::before { + color: var(--gold-dark); } .section-title { - font-size: 36px; - font-weight: 800; + font-family: 'Cinzel', 'Georgia', serif; + font-size: 34px; + font-weight: 700; text-align: center; margin-bottom: 12px; - letter-spacing: -0.5px; + letter-spacing: 1px; + text-transform: uppercase; + color: var(--parchment); +} + +.section-alt .section-title { + color: var(--ink); } .section-title span { - color: var(--accent); + color: var(--gold); } .section-subtitle { font-size: 18px; - color: var(--gray-500); + color: var(--parchment-dark); text-align: center; margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; + font-style: italic; +} + +.section-alt .section-subtitle { + color: var(--ink-light); } /* ===== CARDS ===== */ @@ -317,14 +390,14 @@ footer a:hover { } .card { - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 20px; + background: var(--cream); + border: 1px solid var(--parchment-dark); + border-radius: 0; padding: 36px 32px; transition: all 0.3s; box-shadow: var(--shadow); position: relative; - overflow: hidden; + clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); } .card::before { @@ -334,7 +407,7 @@ footer a:hover { left: 0; right: 0; height: 4px; - background: linear-gradient(90deg, var(--accent), var(--green)); + background: linear-gradient(90deg, var(--gold), var(--gold-dark), var(--gold)); opacity: 0; transition: opacity 0.3s; } @@ -346,132 +419,158 @@ footer a:hover { .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); - border-color: transparent; + border-color: var(--gold); } .card-icon { - width: 56px; - height: 56px; - background: var(--accent-50); - border-radius: 14px; + width: 60px; + height: 60px; + background: linear-gradient(135deg, var(--gold), var(--gold-dark)); + color: var(--night); + border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; transition: transform 0.3s; + box-shadow: var(--glow); } .card:hover .card-icon { - transform: scale(1.1); + transform: scale(1.1) rotate(5deg); } -.card:nth-child(2) .card-icon { background: var(--green-light); } -.card:nth-child(3) .card-icon { background: var(--warm-light); } -.card:nth-child(4) .card-icon { background: var(--accent-50); } -.card:nth-child(5) .card-icon { background: var(--green-light); } - .card h3 { - font-size: 22px; + font-family: 'Cinzel', 'Georgia', serif; + font-size: 20px; font-weight: 700; margin-bottom: 12px; + color: var(--ink); + letter-spacing: 0.5px; } .card p { - color: var(--gray-500); + color: var(--ink-light); margin-bottom: 20px; - line-height: 1.6; + line-height: 1.7; } .card .btn { - font-size: 14px; + font-size: 12px; padding: 10px 22px; } -/* ===== HOW IT WORKS ===== */ -.steps { +/* ===== HOUSE CARDS (how it works) ===== */ +.houses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 40px; - text-align: center; + gap: 24px; } -.step { +.house-card { + padding: 32px 24px; + text-align: center; position: relative; } -.step-number { - width: 56px; - height: 56px; - background: var(--accent); - color: var(--white); - font-size: 22px; - font-weight: 800; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 20px; - box-shadow: 0 4px 14px rgba(108, 92, 231, 0.3); +.house-card .house-crest { + font-size: 52px; + margin-bottom: 12px; } -.step h3 { - font-size: 20px; +.house-card h3 { + font-family: 'Cinzel', serif; + font-size: 18px; font-weight: 700; - margin-bottom: 8px; + margin-bottom: 10px; + letter-spacing: 2px; + text-transform: uppercase; } -.step p { - color: var(--gray-500); +.house-card p { + color: var(--ink-light); font-size: 15px; line-height: 1.6; } +.house-gryffindor { border-top: 4px solid var(--burgundy); } +.house-gryffindor h3 { color: var(--burgundy); } + +.house-slytherin { border-top: 4px solid var(--emerald); } +.house-slytherin h3 { color: var(--emerald); } + +.house-ravenclaw { border-top: 4px solid #2A4B7C; } +.house-ravenclaw h3 { color: #2A4B7C; } + +.house-hufflepuff { border-top: 4px solid #D4A017; } +.house-hufflepuff h3 { color: #B8860B; } + /* ===== PAGE HEADER ===== */ .page-header { - background: linear-gradient(135deg, var(--accent-50) 0%, var(--warm-light) 100%); - color: var(--ink); + background: linear-gradient(135deg, var(--night) 0%, var(--night-light) 100%); + border-bottom: 2px solid var(--gold-dark); + color: var(--parchment); padding: 64px 24px; text-align: center; position: relative; } +.page-header::after { + content: '⚡'; + position: absolute; + bottom: -16px; + left: 50%; + transform: translateX(-50%); + font-size: 28px; + color: var(--gold); + background: var(--night); + padding: 4px 16px; + border: 1px solid var(--gold-dark); +} + .page-header h1 { - font-size: 42px; - font-weight: 800; + font-family: 'Cinzel', 'Georgia', serif; + font-size: 40px; + font-weight: 700; margin-bottom: 8px; - letter-spacing: -1px; + letter-spacing: 2px; + text-transform: uppercase; } .page-header p { font-size: 18px; - color: var(--gray-500); + color: var(--parchment-dark); max-width: 500px; margin: 0 auto; + font-style: italic; } /* ===== VOCABULARY ===== */ .vocab-table { width: 100%; border-collapse: collapse; - background: var(--white); - border-radius: 16px; - overflow: hidden; - box-shadow: var(--shadow); + background: var(--cream); + border: 1px solid var(--parchment-dark); } .vocab-table th { - background: var(--accent); - color: var(--white); + background: var(--night-light); + color: var(--gold); padding: 16px 20px; text-align: left; font-weight: 700; - font-size: 15px; + font-family: 'Cinzel', serif; + font-size: 14px; + letter-spacing: 1px; + text-transform: uppercase; + border-bottom: 2px solid var(--gold); } .vocab-table td { padding: 14px 20px; - border-bottom: 1px solid var(--gray-100); + border-bottom: 1px solid var(--parchment-dark); + color: var(--ink); } .vocab-table tr:last-child td { @@ -479,11 +578,12 @@ footer a:hover { } .vocab-table tr:hover td { - background: var(--accent-50); + background: rgba(201, 168, 76, 0.08); } .vocab-table td:first-child { - font-weight: 600; + font-weight: 700; + font-family: 'Cinzel', serif; } .vocab-categories { @@ -496,24 +596,27 @@ footer a:hover { .category-btn { padding: 8px 20px; - border-radius: 20px; - border: 2px solid var(--gray-100); - background: var(--white); + border: 1px solid var(--gold-dark); + background: transparent; + color: var(--parchment); cursor: pointer; - font-size: 14px; + font-size: 13px; font-weight: 600; - transition: all 0.2s; + font-family: 'Cinzel', serif; + letter-spacing: 1px; + text-transform: uppercase; + transition: all 0.3s; } .category-btn:hover { - border-color: var(--accent-light); - color: var(--accent); + background: rgba(201, 168, 76, 0.1); + color: var(--gold); + box-shadow: var(--glow); } .category-btn.active { - background: var(--accent); - color: var(--white); - border-color: var(--accent); + background: var(--gold); + color: var(--night); } /* ===== GRAMMAR ===== */ @@ -524,38 +627,42 @@ footer a:hover { } .grammar-card { - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 20px; + background: var(--cream); + border: 1px solid var(--parchment-dark); padding: 32px; box-shadow: var(--shadow); transition: all 0.3s; + clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .grammar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); + border-color: var(--gold); } .grammar-card h3 { - font-size: 22px; + font-family: 'Cinzel', serif; + font-size: 20px; font-weight: 700; margin-bottom: 12px; - color: var(--accent); + color: var(--burgundy); display: flex; align-items: center; gap: 8px; + letter-spacing: 0.5px; } .grammar-card .formula { - background: var(--accent-50); + background: var(--cream); + border: 1px solid var(--gold-dark); + border-left: 4px solid var(--gold); padding: 14px 18px; - border-radius: 10px; - font-family: 'SF Mono', 'Fira Code', monospace; - font-size: 16px; + font-family: 'Courier New', monospace; + font-size: 15px; margin: 16px 0; - border-left: 4px solid var(--accent); line-height: 1.5; + color: var(--ink); } .grammar-card .examples { @@ -565,8 +672,8 @@ footer a:hover { .grammar-card .examples li { list-style: none; padding: 8px 0; - color: var(--gray-500); - border-bottom: 1px solid var(--gray-100); + color: var(--ink-light); + border-bottom: 1px solid var(--parchment-dark); } .grammar-card .examples li:last-child { @@ -574,40 +681,44 @@ footer a:hover { } .grammar-card .examples li::before { - content: "→ "; - color: var(--green); + content: "➜ "; + color: var(--emerald); font-weight: 700; } /* ===== EXERCISES ===== */ .exercise { - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 20px; + background: var(--cream); + border: 1px solid var(--parchment-dark); padding: 32px; margin-bottom: 24px; box-shadow: var(--shadow); transition: all 0.3s; + clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .exercise:hover { box-shadow: var(--shadow-hover); + border-color: var(--gold); } .exercise h3 { - font-size: 18px; + font-family: 'Cinzel', serif; + font-size: 16px; font-weight: 700; margin-bottom: 16px; - color: var(--accent); + color: var(--burgundy); + letter-spacing: 0.5px; } .exercise .question { font-size: 17px; margin-bottom: 16px; padding: 12px 16px; - background: var(--gray-100); - border-radius: 10px; + background: var(--cream); + border: 1px solid var(--gold-dark); font-weight: 500; + font-style: italic; } .exercise .options { @@ -621,87 +732,87 @@ footer a:hover { align-items: center; gap: 12px; padding: 12px 18px; - border: 2px solid var(--gray-100); - border-radius: 12px; + border: 1px solid var(--parchment-dark); cursor: pointer; transition: all 0.2s; + background: var(--cream); } .exercise .option:hover { - border-color: var(--accent-light); - background: var(--accent-50); + border-color: var(--gold); + background: rgba(201, 168, 76, 0.08); } .exercise .option input[type="radio"] { - accent-color: var(--accent); + accent-color: var(--gold); width: 20px; height: 20px; } .exercise .option.correct { - border-color: var(--green); - background: var(--green-light); + border-color: var(--emerald); + background: rgba(26, 107, 79, 0.08); } .exercise .option.wrong { - border-color: #E17055; - background: #FDF0ED; + border-color: var(--burgundy-light); + background: rgba(178, 34, 34, 0.08); } .exercise .feedback { margin-top: 14px; padding: 12px 18px; - border-radius: 12px; font-weight: 700; display: none; font-size: 15px; + border: 1px solid; } .exercise .feedback.correct { display: block; - background: var(--green-light); - color: var(--green); - border: 2px solid var(--green); + background: rgba(26, 107, 79, 0.08); + color: var(--emerald); + border-color: var(--emerald); } .exercise .feedback.wrong { display: block; - background: #FDF0ED; - color: #E17055; - border: 2px solid #E17055; + background: rgba(178, 34, 34, 0.08); + color: var(--burgundy-light); + border-color: var(--burgundy-light); } .fill-input { padding: 10px 16px; - border: 2px solid var(--gray-100); - border-radius: 10px; + border: 1px solid var(--parchment-dark); + background: var(--cream); font-size: 16px; width: 220px; transition: border-color 0.2s; - font-family: inherit; + font-family: 'Cormorant Garamond', serif; + color: var(--ink); } .fill-input:focus { outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-50); + border-color: var(--gold); + box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2); } .fill-input.correct { - border-color: var(--green); - background: var(--green-light); + border-color: var(--emerald); + background: rgba(26, 107, 79, 0.05); } .fill-input.wrong { - border-color: #E17055; - background: #FDF0ED; + border-color: var(--burgundy-light); + background: rgba(178, 34, 34, 0.05); } /* ===== TESTS ===== */ .test-question { - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 16px; + background: var(--cream); + border: 1px solid var(--parchment-dark); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow); @@ -714,19 +825,20 @@ footer a:hover { display: flex; align-items: center; gap: 8px; + color: var(--ink); } .test-question h4 .q-number { display: inline-flex; width: 28px; height: 28px; - background: var(--accent-50); - color: var(--accent); - border-radius: 8px; + background: var(--gold); + color: var(--night); align-items: center; justify-content: center; font-size: 13px; - font-weight: 800; + font-weight: 900; + font-family: 'Cinzel', serif; } .test-question .options { @@ -740,19 +852,19 @@ footer a:hover { align-items: center; gap: 10px; padding: 10px 16px; - border: 2px solid var(--gray-100); - border-radius: 10px; + border: 1px solid var(--parchment-dark); cursor: pointer; transition: all 0.2s; + background: var(--cream); } .test-question .option:hover { - border-color: var(--accent-light); - background: var(--accent-50); + border-color: var(--gold); + background: rgba(201, 168, 76, 0.08); } .test-question .option input[type="radio"] { - accent-color: var(--accent); + accent-color: var(--gold); width: 18px; height: 18px; } @@ -760,8 +872,8 @@ footer a:hover { .result-box { text-align: center; padding: 40px; - background: linear-gradient(135deg, var(--accent-50), var(--green-light)); - border-radius: 20px; + background: var(--cream); + border: 2px solid var(--gold); margin-top: 32px; display: none; } @@ -771,60 +883,67 @@ footer a:hover { } .result-box .score { - font-size: 56px; - font-weight: 800; - color: var(--accent); + font-family: 'Cinzel', serif; + font-size: 52px; + font-weight: 700; + color: var(--burgundy); } .result-box p { font-size: 18px; - color: var(--gray-500); + color: var(--ink-light); margin-top: 8px; } /* ===== READING ===== */ .reading-text { - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 20px; + background: var(--cream); + border: 1px solid var(--parchment-dark); padding: 32px; margin-bottom: 24px; box-shadow: var(--shadow); transition: all 0.3s; + clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .reading-text:hover { box-shadow: var(--shadow-hover); + border-color: var(--gold); } .reading-text h3 { - font-size: 22px; + font-family: 'Cinzel', serif; + font-size: 20px; font-weight: 700; margin-bottom: 16px; - color: var(--accent); + color: var(--burgundy); + letter-spacing: 0.5px; } .reading-text .text-content { - line-height: 1.9; + line-height: 2; margin-bottom: 24px; font-size: 16px; } .reading-text .text-content p { margin-bottom: 12px; + text-indent: 20px; } .reading-text .questions { - background: var(--gray-100); + background: var(--cream); + border: 1px solid var(--gold-dark); padding: 20px 24px; - border-radius: 12px; } .reading-text .questions h4 { font-weight: 700; + font-family: 'Cinzel', serif; margin-bottom: 12px; - font-size: 16px; - color: var(--accent); + font-size: 15px; + color: var(--burgundy); + letter-spacing: 0.5px; } .reading-text .questions ol { @@ -833,16 +952,15 @@ footer a:hover { .reading-text .questions li { margin-bottom: 8px; - color: var(--gray-500); + color: var(--ink-light); } /* ===== CONTACT ===== */ .contact-form { max-width: 600px; margin: 0 auto; - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 20px; + background: var(--cream); + border: 1px solid var(--parchment-dark); padding: 44px; box-shadow: var(--shadow); } @@ -854,19 +972,22 @@ footer a:hover { .form-group label { display: block; font-weight: 700; + font-family: 'Cinzel', serif; margin-bottom: 8px; - font-size: 15px; + font-size: 14px; color: var(--ink); + letter-spacing: 0.5px; + text-transform: uppercase; } .form-group input, .form-group textarea { width: 100%; padding: 14px 18px; - border: 2px solid var(--gray-100); - border-radius: 12px; + border: 1px solid var(--parchment-dark); + background: var(--cream); font-size: 16px; - font-family: inherit; + font-family: 'Cormorant Garamond', serif; transition: all 0.2s; color: var(--ink); } @@ -874,8 +995,8 @@ footer a:hover { .form-group input:focus, .form-group textarea:focus { outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-50); + border-color: var(--gold); + box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2); } .form-group textarea { @@ -891,14 +1012,14 @@ footer a:hover { .form-message { text-align: center; padding: 24px; - background: var(--green-light); - color: var(--green); - border: 2px solid var(--green); - border-radius: 14px; + background: rgba(26, 107, 79, 0.08); + color: var(--emerald); + border: 1px solid var(--emerald); margin-top: 20px; font-weight: 700; display: none; font-size: 16px; + font-family: 'Cinzel', serif; } .form-message.show { @@ -907,23 +1028,28 @@ footer a:hover { /* ===== MOTIVATION BANNER ===== */ .motivation-banner { - background: linear-gradient(135deg, var(--accent) 0%, var(--green) 100%); - color: var(--white); + background: linear-gradient(135deg, var(--night-light), var(--night)); + border: 1px solid var(--gold-dark); + color: var(--parchment); padding: 40px 24px; text-align: center; - border-radius: 20px; margin-bottom: 32px; } .motivation-banner h3 { - font-size: 28px; - font-weight: 800; + font-family: 'Cinzel', serif; + font-size: 26px; + font-weight: 700; margin-bottom: 8px; + color: var(--gold); + letter-spacing: 1px; + text-transform: uppercase; } .motivation-banner p { font-size: 16px; - opacity: 0.9; + color: var(--parchment-dark); + font-style: italic; } /* ===== DAILY REMINDER TOAST ===== */ @@ -932,11 +1058,10 @@ footer a:hover { bottom: 24px; right: 24px; max-width: 380px; - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 20px; + background: var(--cream); + border: 1px solid var(--gold); padding: 24px; - box-shadow: 0 8px 40px rgba(108, 92, 231, 0.2); + box-shadow: 0 8px 40px rgba(11, 7, 32, 0.4); z-index: 200; transform: translateY(120%); opacity: 0; @@ -956,12 +1081,14 @@ footer a:hover { } .daily-toast .toast-title { - font-size: 16px; - font-weight: 800; - color: var(--accent); + font-family: 'Cinzel', serif; + font-size: 15px; + font-weight: 700; + color: var(--burgundy); display: flex; align-items: center; gap: 8px; + letter-spacing: 0.5px; } .daily-toast .toast-close { @@ -969,7 +1096,7 @@ footer a:hover { border: none; font-size: 20px; cursor: pointer; - color: var(--gray-300); + color: var(--parchment-dark); padding: 4px; line-height: 1; } @@ -980,9 +1107,9 @@ footer a:hover { .daily-toast p { font-size: 14px; - color: var(--gray-500); + color: var(--ink-light); margin-bottom: 16px; - line-height: 1.5; + line-height: 1.6; } .daily-toast .toast-actions { @@ -991,7 +1118,7 @@ footer a:hover { } .daily-toast .toast-actions .btn { - font-size: 13px; + font-size: 11px; padding: 10px 18px; } @@ -1001,8 +1128,9 @@ footer a:hover { gap: 4px; font-size: 13px; font-weight: 700; - color: #e17055; + color: var(--burgundy-light); margin-bottom: 12px; + font-family: 'Cinzel', serif; } @media (max-width: 480px) { @@ -1018,8 +1146,8 @@ footer a:hover { .level-hero { text-align: center; padding: 48px 32px; - background: linear-gradient(135deg, var(--accent-50), var(--green-light)); - border-radius: 24px; + background: var(--cream); + border: 2px solid var(--gold); margin-bottom: 32px; } @@ -1029,28 +1157,31 @@ footer a:hover { } .level-hero .level-title { - font-size: 36px; - font-weight: 800; - color: var(--accent); + font-family: 'Cinzel', serif; + font-size: 34px; + font-weight: 700; + color: var(--burgundy); margin-bottom: 4px; + letter-spacing: 1px; } .level-hero .level-desc { font-size: 16px; - color: var(--gray-500); + color: var(--ink-light); margin-bottom: 20px; + font-style: italic; } .level-hero .level-xp-total { font-size: 20px; font-weight: 700; color: var(--ink); + font-family: 'Cinzel', serif; } .level-bar { height: 12px; - background: var(--gray-100); - border-radius: 6px; + background: var(--parchment-dark); overflow: hidden; max-width: 400px; margin: 12px auto 0; @@ -1058,8 +1189,7 @@ footer a:hover { .level-bar-fill { height: 100%; - background: linear-gradient(90deg, var(--accent), var(--green)); - border-radius: 6px; + background: linear-gradient(90deg, var(--gold), var(--gold-dark)); transition: width 0.6s ease; width: 0%; } @@ -1072,9 +1202,8 @@ footer a:hover { } .stat-card { - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 16px; + background: var(--cream); + border: 1px solid var(--parchment-dark); padding: 24px; text-align: center; box-shadow: var(--shadow); @@ -1084,6 +1213,7 @@ footer a:hover { .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); + border-color: var(--gold); } .stat-card .stat-icon { @@ -1092,32 +1222,38 @@ footer a:hover { } .stat-card .stat-value { + font-family: 'Cinzel', serif; font-size: 28px; - font-weight: 800; - color: var(--accent); + font-weight: 700; + color: var(--burgundy); } .stat-card .stat-label { font-size: 13px; - color: var(--gray-500); + color: var(--ink-light); margin-top: 4px; + font-family: 'Cinzel', serif; + letter-spacing: 0.5px; + text-transform: uppercase; } .activity-list { - background: var(--white); - border: 1px solid var(--gray-100); - border-radius: 20px; + background: var(--cream); + border: 1px solid var(--parchment-dark); padding: 28px; box-shadow: var(--shadow); } .activity-list h3 { - font-size: 20px; + font-family: 'Cinzel', serif; + font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; + color: var(--burgundy); + letter-spacing: 0.5px; } .activity-item { @@ -1125,7 +1261,7 @@ footer a:hover { align-items: center; gap: 12px; padding: 12px 0; - border-bottom: 1px solid var(--gray-100); + border-bottom: 1px solid var(--parchment-dark); font-size: 15px; } @@ -1136,8 +1272,8 @@ footer a:hover { .activity-item .act-icon { width: 36px; height: 36px; - background: var(--accent-50); - border-radius: 10px; + background: var(--gold); + color: var(--night); display: flex; align-items: center; justify-content: center; @@ -1147,32 +1283,34 @@ footer a:hover { .activity-item .act-text { flex: 1; - color: var(--gray-500); + color: var(--ink-light); } .activity-item .act-xp { font-weight: 700; - color: var(--green); + color: var(--emerald); font-size: 14px; + font-family: 'Cinzel', serif; } .level-badge { display: inline-flex; align-items: center; gap: 8px; - background: var(--accent-50); + background: rgba(201, 168, 76, 0.15); + border: 1px solid var(--gold-dark); padding: 6px 16px 6px 12px; - border-radius: 20px; font-size: 13px; } .level-badge .level-label { font-weight: 700; - color: var(--accent); + color: var(--gold); + font-family: 'Cinzel', serif; } .level-badge .level-xp { - color: var(--gray-500); + color: var(--parchment-dark); } /* ===== ANIMATIONS ===== */ @@ -1181,6 +1319,11 @@ footer a:hover { to { opacity: 1; transform: translateY(0); } } +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + .card, .step, .grammar-card, .exercise, .reading-text, .test-question { animation: fadeInUp 0.5s ease both; } @@ -1204,11 +1347,11 @@ footer a:hover { top: 100%; left: 0; right: 0; - background: var(--white); - border-bottom: 1px solid var(--gray-100); + background: var(--night-light); + border-bottom: 2px solid var(--gold-dark); padding: 8px; gap: 2px; - box-shadow: 0 8px 20px rgba(0,0,0,0.08); + box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .nav-list.open { @@ -1217,15 +1360,15 @@ footer a:hover { .nav-list a { padding: 12px 16px; - border-radius: 10px; + border-radius: 0; } .hero h1 { - font-size: 36px; + font-size: 32px; } .hero p { - font-size: 18px; + font-size: 17px; } .hero { @@ -1237,11 +1380,11 @@ footer a:hover { } .section-title { - font-size: 28px; + font-size: 26px; } .page-header h1 { - font-size: 32px; + font-size: 28px; } .page-header { @@ -1256,7 +1399,7 @@ footer a:hover { grid-template-columns: 1fr; } - .steps { + .houses-grid { grid-template-columns: 1fr; } @@ -1284,7 +1427,7 @@ footer a:hover { } .logo { - font-size: 20px; + font-size: 18px; } .hero { @@ -1292,7 +1435,7 @@ footer a:hover { } .hero h1 { - font-size: 28px; + font-size: 24px; } .hero-buttons { diff --git a/exercises.html b/exercises.html index 821aba9..5a7e024 100644 --- a/exercises.html +++ b/exercises.html @@ -4,9 +4,13 @@ Exercises — English Easy + + + +
diff --git a/grammar.html b/grammar.html index c6bb1c7..5662712 100644 --- a/grammar.html +++ b/grammar.html @@ -4,9 +4,13 @@ Grammar — English Easy + + + +
diff --git a/index.html b/index.html index d57cbeb..13da396 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,13 @@ English Easy — Learn English Step by Step + + + +
@@ -29,20 +33,20 @@
-
Start your journey
-

Learn English with Easy Steps

-

Vocabulary, grammar, exercises, reading texts, and tests — everything you need to start speaking English with confidence.

+
⚡ Welcome to Hogwarts School of English
+

Master the Magic of English

+

Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.

- Start Learning - Try Exercises + 🔮 Begin Your Journey + ✨ Try a Spell (Exercise)
-

What You'll Learn

-

We make learning English simple and fun with clear explanations and interactive exercises.

+

Your Magical Subjects

+

Like a wizard at Hogwarts, master every branch of English magic.

📖
@@ -93,31 +97,36 @@
-

Ready to Start?

-

Every expert was once a beginner. Take the first step today!

+

✨ The Chamber of Progress Awaits

+

Every great wizard started with their first spell. Begin your English magic today!

-

How It Works

-

Three simple steps to start learning English.

-
-
-
1
-

Learn New Words

-

Start with the Vocabulary section to build your word base with common English words.

+

The Four Houses

+

Choose your path — every house has its own strength in learning English.

+
+
+
🦁
+

Gryffindor

+

Brave and bold — take risks with new words and speak English without fear. Perfect for conversation practice!

-
-
2
-

Study Grammar

-

Understand how sentences work with simple grammar explanations and examples.

+
+
🐍
+

Slytherin

+

Ambitious and determined — master grammar rules and achieve high scores on every test.

-
-
3
-

Practice & Test

-

Use exercises and tests to check your progress and see how much you've learned!

+
+
🦅
+

Ravenclaw

+

Wise and curious — dive deep into reading texts and expand your vocabulary with every lesson.

+
+
+
🦡
+

Hufflepuff

+

Loyal and patient — practice daily, build your streak, and grow step by step.

diff --git a/js/script.js b/js/script.js index 54c6bb5..515184e 100644 --- a/js/script.js +++ b/js/script.js @@ -453,6 +453,24 @@ function markWordListened() { }); })(); +// --- Twinkling Stars --- +(function() { + var bg = document.getElementById('stars-bg'); + if (!bg) return; + var count = window.innerWidth < 600 ? 40 : 80; + for (var i = 0; i < count; i++) { + var star = document.createElement('div'); + star.className = 'star'; + star.style.left = Math.random() * 100 + '%'; + star.style.top = Math.random() * 100 + '%'; + star.style.width = (Math.random() * 3 + 1) + 'px'; + star.style.height = star.style.width; + star.style.animationDelay = (Math.random() * 5) + 's'; + star.style.animationDuration = (Math.random() * 3 + 2) + 's'; + bg.appendChild(star); + } +})(); + // --- Vocabulary filter --- function filterVocab(category, btn) { const rows = document.querySelectorAll('.vocab-row'); diff --git a/progress.html b/progress.html index 734f144..113f207 100644 --- a/progress.html +++ b/progress.html @@ -4,9 +4,13 @@ My Progress — English Easy + + + +
diff --git a/pronunciation.html b/pronunciation.html index 9903bf8..090039a 100644 --- a/pronunciation.html +++ b/pronunciation.html @@ -4,6 +4,9 @@ Pronunciation — English Easy + + + +
diff --git a/reading.html b/reading.html index 629ae8d..5e49524 100644 --- a/reading.html +++ b/reading.html @@ -4,9 +4,13 @@ Reading — English Easy + + + +
diff --git a/tests.html b/tests.html index 39da83b..23efbca 100644 --- a/tests.html +++ b/tests.html @@ -4,9 +4,13 @@ Tests — English Easy + + + +
diff --git a/vocabulary.html b/vocabulary.html index 071f63a..5c0db2b 100644 --- a/vocabulary.html +++ b/vocabulary.html @@ -4,9 +4,13 @@ Vocabulary — English Easy + + + +