diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index a2ef953c..4022fc64 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,14 +1,10 @@ name: Deploy to GitHub Pages on: - # Trigger the workflow every time you push to the `main` branch - # Using a different branch name? Replace `main` with your branch’s name push: branches: [main] - # Allows you to run this workflow manually from the Actions tab on GitHub. workflow_dispatch: -# Allow this job to clone the repo and create a page deployment permissions: contents: read pages: write @@ -18,21 +14,26 @@ jobs: build: runs-on: ubuntu-latest steps: - - name: Checkout your repository using git + - name: Checkout repository uses: actions/checkout@v4 - - name: Install, build, and upload your site + + - name: Install, build, and prepare Astro site uses: withastro/action@v3 with: - path: . # The root location of your Astro project inside the repository. (optional) - node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 16. (optional) - package-manager: npm # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional) + path: . + node-version: 20 + package-manager: npm + + - name: Upload GitHub Pages artifact (v4) + uses: actions/upload-pages-artifact@v2 + with: + path: ./dist deploy: needs: build runs-on: ubuntu-latest environment: name: github-pages - url: ${{ steps.deployment.outputs.page_url }} steps: - name: Deploy to GitHub Pages id: deployment diff --git a/.vscode/dictionaries/project-words.txt b/.vscode/dictionaries/project-words.txt index 66888e34..8afd973c 100755 --- a/.vscode/dictionaries/project-words.txt +++ b/.vscode/dictionaries/project-words.txt @@ -119,6 +119,7 @@ vyanjan waitlist webring werkzeug +withastro अक्टूबर अगस्त अप्रैल diff --git a/CHANGELOG.md b/CHANGELOG.md index 9549817b..2b5797a6 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,6 +41,11 @@ Created Repo from template - Added Google Analytics with partytown - Added Disha and Purana names in Glossary +## [3.3.0] - Nov 30 2025 + +- Landing Page Redesign +- CrossWord page update + ### [Unreleased] Here we write upgrading notes for brands. It's a team effort to make them as straightforward as possible. diff --git a/abcd.code-workspace b/abcd.code-workspace index af194563..8b964744 100644 --- a/abcd.code-workspace +++ b/abcd.code-workspace @@ -122,12 +122,12 @@ "dist/**": true }, "git.autofetch": true, - "git.branchPrefix": "feature/", + "git.branchPrefix": "feature/RZA-25000X", "git.branchProtection": [ "develop", "main" ], - "git.branchRandomName.enable": true, + "git.branchRandomName.enable": false, "git.confirmSync": false, "git.enableCommitSigning": false, "git.enableSmartCommit": true, @@ -192,7 +192,7 @@ "*.log": "default" }, "zenMode.centerLayout": false, - "cSpell.words": [], + "cSpell.words": [ ], "workbench.editor.limit.excludeDirty": true, "files.readonlyInclude": { ".githooks/**": true diff --git a/astro.config.mjs b/astro.config.mjs index 5d36a386..cae81e15 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -3,6 +3,10 @@ import partytown from "@astrojs/partytown"; import sitemap from "@astrojs/sitemap"; import { defineConfig } from "astro/config"; +const isProd = process.env.NODE_ENV === 'production'; + +console.log({ isProd }) + // https://astro.build/config export default defineConfig({ site: "https://abcdkbd.com", @@ -20,12 +24,12 @@ export default defineConfig({ svg: true }, integrations: [ - partytown({ + isProd ? partytown({ // https://partytown.qwik.dev/google-tag-manager/#google-analytics-4-ga4 config: { forward: ["dataLayer.push"] } - }), + }) : null, sitemap(), mdx() ], diff --git a/package-lock.json b/package-lock.json index 34f8961d..976196ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@recursivezero/abcd", - "version": "3.2.4", + "version": "3.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@recursivezero/abcd", - "version": "3.2.4", + "version": "3.3.0", "license": "MIT", "dependencies": { "@astrojs/check": "0.9.4", diff --git a/package.json b/package.json index b64db1d2..a0d21751 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@recursivezero/abcd", - "version": "3.2.4", + "version": "3.3.0", "description": "A website for our kids trial phase of abcdkbd.com", "homepage": "https://abcdkbd.com", "displayName": "abcd", diff --git a/src/assets/styles/cards/stack.css b/src/assets/styles/cards/stack.css index b212da12..59a41169 100644 --- a/src/assets/styles/cards/stack.css +++ b/src/assets/styles/cards/stack.css @@ -46,7 +46,7 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: start; gap: 2rem; color: #f1f5f9; font: @@ -92,7 +92,6 @@ flex-direction: column; align-items: center; justify-content: start; - flex: 1; width: 100%; } @@ -392,10 +391,12 @@ padding: 1rem 0.5rem; justify-content: flex-start; } + .alphabet-container { height: 600px; gap: 0rem; } + .alphabet-title { font-size: 1.5rem; } @@ -443,4 +444,4 @@ padding: 0.4rem 0.8rem; bottom: 5px; } -} +} \ No newline at end of file diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css new file mode 100644 index 00000000..befdd289 --- /dev/null +++ b/src/assets/styles/crossword2.css @@ -0,0 +1,478 @@ +:root { + /* Color Palette */ + --primary-color: #6366f1; + --secondary-color: #06b6d4; + --accent1-color: #f87171; + --accent2-color: #60a5fa; + --accent3-color: #fbbf24; + --accent4-color: #34d399; + --accent5-color: #ec4899; + --accent6-color: #818cf8; + --accent7-color: #f97316; + --accent8-color: #38bdf8; + + /* Text & Background */ + --text-color: #1e293b; + --text-light: #64748b; + --bg-color: #f8fafc; + --bg-dark: #0f172a; + + /* Effects */ + --border-radius: 16px; + --box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + /* Stats */ + --stats-button-bg: #e2e8f0; + --stats-button-text: #334155; + --stats-button-border: #cbd5e1; + --stats-button-hover: #818cf8; + + /* Custom Word and Button Colors */ + --word-font-color: #0f172a; + --word-found-color: #9ca3af; + --stats-button-clicked: #4ade80; + --stats-button-found: #facc15; +} + +/* Main Layout */ +.puzzle-container { + position: relative; + width: 100%; + max-width: 800px; + margin: 0 auto; + min-height: 100vh; + padding: 20px; + box-sizing: border-box; + touch-action: none; + /* Prevent default touch behaviors */ +} + +/* Puzzle Grid */ +.grid__puzzle { + display: grid; + gap: 12px; + padding: 28px; + border-radius: var(--border-radius); + box-shadow: + var(--box-shadow), + 0 0 0 15px rgba(99, 102, 241, 0.08); + margin: 0 auto; + width: 100%; + max-width: 600px; + aspect-ratio: 1; + border: 6px solid #f1f5f9; + grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); + touch-action: none; + /* Critical for touch drag */ +} + +.grid__puzzle .cell { + aspect-ratio: 1; + display: flex; + justify-content: center; + align-items: center; + background: #f8fafc; + border: 3px solid #e2e8f0; + border-radius: 12px; + font-size: 3ch; + font-weight: bold; + color: var(--text-color); + transition: var(--transition); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-touch-callout: none; + /* Prevent long-press menu on iOS */ + min-width: 40px; + min-height: 40px; + touch-action: none; +} + +.grid__puzzle .cell:active { + transform: scale(0.95); +} + +.grid__puzzle .cell:hover { + transform: translateY(-3px); + background: #eef2ff; + border-color: var(--primary-color); + box-shadow: + 0 0 16px 4px var(--primary-color), + 0 8px 20px rgba(99, 102, 241, 0.15); +} + +.grid__puzzle .cell.selected { + background: var(--primary-color); + color: white; + transform: scale(1.08); + box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); + animation: pulse 1.5s infinite alternate; +} + +@keyframes pulse { + from { + box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); + } + + to { + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); + } +} + +.grid__puzzle .cell[class*="word-color-"] { + color: rgb(243, 235, 235); + border-color: inherit; + box-shadow: inset 0px 1px 7px 0px rgba(0, 0, 0, 0.3); +} + +.grid__puzzle .cell.word-color-1 { + background-color: var(--accent7-color); +} + +.grid__puzzle .cell.word-color-2 { + background-color: var(--secondary-color); +} + +.grid__puzzle .cell.word-color-3 { + background-color: var(--accent1-color); +} + +.grid__puzzle .cell.word-color-4 { + background-color: var(--accent4-color); +} + +.grid__puzzle .cell.word-color-5 { + background-color: var(--accent5-color); +} + +.grid__puzzle .cell.word-color-6 { + background-color: var(--accent6-color); +} + +.grid__puzzle .cell.word-color-7 { + background-color: var(--accent3-color); +} + +.grid__puzzle .cell.word-color-8 { + background-color: var(--accent8-color); +} + +/* Word List & Details */ +details { + width: 100%; + border-radius: var(--border-radius); + background-color: rgba(99, 102, 241, 0.05); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); + margin: 20px 0; + border-left: 4px solid var(--primary-color); +} + +details summary { + padding: 16px 24px; + cursor: pointer; + font-weight: 600; + display: flex; + align-items: center; + gap: 12px; + position: relative; + border-bottom: 2px solid rgba(99, 102, 241, 0.1); + margin-bottom: 12px; + font-size: clamp(14px, 2.5vw, 18px); +} + +details summary::after { + content: ""; + position: absolute; + right: 24px; + width: 30px; + height: 30px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + transition: var(--transition); + transform: rotate(180deg); +} + +details summary::-webkit-details-marker { + display: none; +} + +details:not([open]) summary { + border-bottom: none; + margin-bottom: 0; +} + +details:not([open]) summary::after { + transform: rotate(0deg); +} + +/* Word List */ +.word-list { + display: flex; + flex-wrap: wrap; + gap: 12px; + padding: 16px; +} + +.word-list .word { + padding: 8px 16px; + border-radius: 25px; + font-weight: 600; + color: rgb(255, 255, 255); + background-color: rgb(62, 24, 255); + transition: var(--transition); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + font-size: clamp(12px, 3vw, 16px); +} + +.word-list .word.found { + text-decoration: line-through; + opacity: 0.7; + transform: scale(0.97); +} + +/* Stats Components */ +.stats-container { + display: flex; + gap: 14px; + margin: 32px 0; + justify-content: center; + flex-wrap: wrap; + align-items: center; +} + +.stats-button { + background: linear-gradient(135deg, var(--primary-color), var(--accent6-color)); + border: 2px solid transparent; + border-radius: var(--border-radius); + padding: 14px 28px; + font-weight: 600; + transition: var(--transition); + color: white; + position: relative; + overflow: hidden; + min-width: 80px; + text-align: center; + font-size: clamp(12px, 2.5vw, 16px); +} + +.stats-button:hover { + transform: translateY(-2px); + box-shadow: var(--box-shadow); + background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color)); +} + +.stats-button:nth-child(1) { + background: linear-gradient(135deg, var(--primary-color), var(--accent6-color)); +} + +.stats-button:nth-child(2) { + background: linear-gradient(135deg, var(--accent1-color), var(--accent7-color)); +} + +/* Hint Button Styles */ +.hint-button { + background: none; + border: 2px solid var(--primary-color); + width: 60px; + height: 60px; + cursor: pointer; + transition: var(--transition); + display: flex; + align-items: center; + justify-content: center; + border-radius: 12px; + padding: 0; +} + +.hint-button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); +} + +.hint-button:active { + transform: scale(0.95); +} + +.hint-button.active { + background: radial-gradient(circle, #fffacd 0%, #ffeb3b 100%); + box-shadow: 0 0 20px 5px rgba(255, 235, 59, 0.6); + border-color: #ffd700; +} + +.hint-button svg, +.hint-button svg path { + transition: var(--transition); +} + +.hint-button.active svg path { + fill: #ff9800; +} + +/* Responsive Styles */ +@media (max-width: 1024px) { + .grid__puzzle { + gap: 8px; + padding: 20px; + grid-template-columns: repeat(auto-fit, minmax(35px, 1fr)); + } + + .grid__puzzle .cell { + font-size: 2.5ch; + border-width: 2px; + min-width: 35px; + min-height: 35px; + } + + .stats-button { + padding: 12px 20px; + min-width: 70px; + } + + .word-list { + gap: 10px; + padding: 12px; + } +} + +@media (max-width: 768px) { + .puzzle-container { + padding: 15px; + } + + .grid__puzzle { + gap: 6px; + padding: 16px; + grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); + } + + .grid__puzzle .cell { + font-size: 5vw; + border-width: 2px; + min-width: 30px; + min-height: 30px; + border-radius: 8px; + } + + .stats-button { + padding: 10px 16px; + } + + .hint-button { + width: 50px; + height: 50px; + } + + details summary { + padding: 12px 20px; + } +} + +@media (max-width: 480px) { + .puzzle-container { + padding: 10px; + } + + .grid__puzzle { + gap: 4px; + padding: 12px; + grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); + border-width: 4px; + } + + .grid__puzzle .cell { + font-size: 6vw; + border-width: 2px; + min-width: 25px; + min-height: 25px; + border-radius: 6px; + } + + .stats-container { + gap: 8px; + margin: 20px 0; + } + + .stats-button { + padding: 8px 14px; + min-width: 70px; + font-size: 3.5vw; + } + + .hint-button { + width: 45px; + height: 45px; + } + + .hint-button svg, + .hint-button svg path { + max-width: 24px; + max-height: 24px; + } + + details summary { + padding: 10px 16px; + font-size: 4.5vw; + } + + details summary::after { + width: 24px; + height: 24px; + right: 16px; + } + + .word-list { + gap: 8px; + padding: 10px; + } + + .word-list .word { + padding: 6px 12px; + font-size: 3.5vw; + } +} + +/* Accessibility improvements */ +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } +} + +/* Landscape mode optimization for mobile */ +@media (max-width: 768px) and (orientation: landscape) { + .puzzle-container { + display: flex; + flex-direction: column; + padding: 10px; + } + + .grid__puzzle { + max-width: 50vh; + padding: 10px; + } + + .stats-container { + margin: 15px 0; + } + + details { + margin: 10px 0; + } +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + .grid__puzzle .cell { + border-width: 3px; + } + + .grid__puzzle .cell.selected { + border-color: #000; + outline: 2px solid #fff; + } +} \ No newline at end of file diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css index 1c0daee2..272a1182 100644 --- a/src/assets/styles/footer.css +++ b/src/assets/styles/footer.css @@ -274,7 +274,7 @@ transition: transform 0.2s ease-in-out; } - .footer__nav--item[open] > summary .fa-chevron-down { + .footer__nav--item[open]>summary .fa-chevron-down { transform: rotate(180deg); } @@ -291,4 +291,4 @@ margin-top: 1rem; font-size: 0.85rem; } -} +} \ No newline at end of file diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index 6d3adf28..749715f4 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -15,6 +15,7 @@ --header-h: 4rem; --footer-h: 4rem; --sidebar-w: 16rem; + --transition: all 0.3s ease; } [data-theme="dark"] { @@ -40,6 +41,8 @@ html { color-scheme: dark light; height: 100%; + scroll-behavior: smooth; + font-size: clamp(14px, 1.5vw, 16px); } [data-theme="light"] { @@ -53,6 +56,8 @@ *, *:after, *:before { + margin: 0; + padding: 0; box-sizing: border-box; } @@ -60,13 +65,16 @@ container-type: inline-size; container-name: thread; box-sizing: border-box; + line-height: 1.6; min-height: 100vh; - font-family: "Roboto", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, + font-family: "Roboto", 'Segoe UI', + system-ui, + -apple-system, + sans-serif, system-ui; font-size: 16px; - margin: 0; background-color: var(--background); - color: var(--text); + transition: var(--transition); } body::before { @@ -94,37 +102,15 @@ grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--header-h) 1fr var(--footer-h); min-height: 100vh; + width: var(--container-width); + margin: 0 auto; + padding: 0 1rem; } a { color: light-dark(#151414, white); } - @media (prefers-color-scheme: dark) { - html[data-theme="system"] { - select { - color: white; - background-color: #333; - } - - a { - color: brown; - } - } - } - - @media (prefers-color-scheme: light) { - html[data-theme="system"] { - select { - color: black; - background-color: #fff; - } - - a { - color: brown; - } - } - } h1 { font-size: 3rem; @@ -140,7 +126,7 @@ grid-template-columns: minmax(0, auto) 1fr; grid-auto-flow: column; grid-template-areas: "sidebar content"; - padding: 2rem; + padding: 1rem; background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%); font-size: 1.25rem; line-height: 1.6; @@ -263,4 +249,4 @@ outline: none; box-shadow: none; } -} +} \ No newline at end of file diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css index 6f06c1d0..a5e8d49a 100644 --- a/src/assets/styles/header.css +++ b/src/assets/styles/header.css @@ -1,23 +1,33 @@ .header { - position: fixed; + position: sticky; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--background); - border-bottom: 1px solid var(--border); height: var(--header-h); padding: 0 1.5rem; - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: center; min-height: 5rem; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; .header__brand { display: flex; - align-items: center; gap: 0.75rem; - justify-self: start; + justify-content: space-between; + align-items: center; + height: 100%; + + .logo__link { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); + text-decoration: none; + } .logo { width: 3rem; @@ -36,67 +46,74 @@ } } - .logo__link { + + .nav__links { display: flex; align-items: center; - text-decoration: none; - } + justify-content: center; + gap: 2rem; + list-style: none; - .title { - font-size: clamp(2rem, 4vw, 5rem); - background: linear-gradient(270deg, #ff416c, #ff4b2b, #1e90ff, #32cd32); - background-size: 100% 100%; - background-clip: inherit; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - animation: animateGradient 8s ease infinite; - } + a { + color: var(--text); + text-decoration: none; + font-weight: 500; + transition: var(--transition); + position: relative; - @keyframes animateGradient { - 0% { - background-position: 0% 50%; - } + &:hover { + color: var(--primary); - 50% { - background-position: 100% 50%; - } + ::after { + width: 100%; + } + } - 100% { - background-position: 0% 50%; + &::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background-color: var(--primary); + transition: var(--transition); + } } } - .action-group { + .action__group { display: flex; + flex-direction: row; + align-content: center; + justify-content: end; + flex-wrap: wrap; gap: 1rem; + } + + [slot="header-right"] { + display: flex; align-items: center; - justify-self: end; + max-width: 33vw; + flex-wrap: nowrap; justify-content: flex-end; + border: 2px dashed red; + } + + .controls { + flex-shrink: 0; + } + + .switch { + background-color: black; + height: 2rem; + width: 2rem; + border-radius: 50%; + cursor: pointer; + } + + .header-spacer { + min-height: 5rem; + border-bottom: 1px dotted grey; } -} - -[slot="header-right"] { - display: flex; - align-items: center; - max-width: 33vw; - flex-wrap: nowrap; - justify-content: flex-end; - border: 2px dashed red; -} - -.controls { - flex-shrink: 0; -} - -.switch { - background-color: black; - height: 2rem; - width: 2rem; - border-radius: 50%; - cursor: pointer; -} - -.header-spacer { - min-height: 5rem; - border-bottom: 1px dotted grey; } \ No newline at end of file diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 12dcf706..0f51d23c 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -24,6 +24,7 @@ --card-yellow-bg: linear-gradient(135deg, #f59e42 0%, #fbbf24 100%); --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%); --card-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.18); + --accent: #ff6b6b; --hero-heading: #f3f4f6; --section-divider: #23304a; --section-bg: #0f172a; @@ -146,4 +147,4 @@ padding-left: 6rem; padding-right: 6rem; } -} +} \ No newline at end of file diff --git a/src/assets/styles/landing.css b/src/assets/styles/landing.css new file mode 100644 index 00000000..6d89a1cf --- /dev/null +++ b/src/assets/styles/landing.css @@ -0,0 +1,461 @@ +/* CSS Custom Properties for Theming */ +:root { + --primary: #4361ee; + --primary-light: #4895ef; + --secondary: #3f37c9; + --success: #4cc9f0; + --text-light: #6c757d; + --bg: #ffffff; + --bg-card: #ffffff; + --border: #dee2e6; + --shadow: rgba(0, 0, 0, 0.1); + --header-bg: rgba(255, 255, 255, 0.95); + --transition: all 0.3s ease; + --border-radius: 12px; + --container-width: min(1200px, 95%); + --header-height: 80px; + --footer-height: 200px; +} + +[data-theme='dark'] { + --primary: #4cc9f0; + --primary-light: #4895ef; + --secondary: #4361ee; + --success: #3a0ca3; + --text-light: #adb5bd; + --bg: #121212; + --bg-card: #1e1e1e; + --border: #343a40; + --shadow: rgba(0, 0, 0, 0.3); + --header-bg: rgba(30, 30, 30, 0.95); +} + + +.container__landing { + color: var(--text); + background-color: var(--bg); + transition: var(--transition); + min-height: 100vh; + overflow-y: auto; +} + + +/* Layout */ +.container__hero { + width: var(--container-width); + margin: 0 auto; + padding: 0 1rem; +} + + +/* Hero Section */ +.hero { + min-height: calc(100vh - var(--header-height)); + display: flex; + align-items: center; + background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); + color: white; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('https://i.pinimg.com/1200x/01/6c/ec/016cec5a9d134483c02417cdb290a4a7.jpg'); + background-position: center; + background-attachment: scroll; + background-size: cover; + object-fit: cover; + background-repeat: no-repeat; + opacity: 0.23; + pointer-events: none; +} + +.hero-content { + position: relative; + z-index: 1; + max-width: 600px; +} + +.hero h1 { + font-size: clamp(2.5rem, 5vw, 4rem); + line-height: 1.2; + margin-bottom: 1.5rem; +} + +.hero p { + font-size: 1.25rem; + margin-bottom: 2rem; + opacity: 0.9; +} + +.cta-button { + display: inline-block; + background-color: white; + color: var(--primary); + padding: 0.75rem 2rem; + border-radius: 50px; + text-decoration: none; + font-weight: 600; + transition: var(--transition); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); +} + +.cta-button:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); +} + +/* Age Categories Section */ +.section { + padding: 5rem; +} + +.section-title { + text-align: center; + margin-bottom: 3rem; +} + +.section-title h2 { + font-size: clamp(1.75rem, 4vw, 2.5rem); + color: var(--text); + margin-bottom: 1rem; +} + +.section-title p { + color: var(--text-light); + max-width: 600px; + margin: 0 auto; +} + +.categories-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.category-card { + background-color: var(--bg-card); + border-radius: var(--border-radius); + padding: 2rem; + text-align: center; + box-shadow: 0 5px 15px var(--shadow); + transition: var(--transition); + cursor: pointer; + border: 1px solid var(--border); + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + + text-decoration: none; + +} + +.category-card:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px var(--shadow); +} + +.category-icon { + width: 80px; + height: 80px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 2rem; +} + +.category-card h3 { + font-size: 1.5rem; +} + +.category-card p { + color: var(--text-light); +} + +/* Games Page */ +.games-page { + display: block; + min-height: calc(100vh - var(--header-height)); + padding: 3rem 0; +} + +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border); +} + +.back-button { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--primary); + text-decoration: none; + font-weight: 500; + transition: var(--transition); +} + +.back-button:hover { + gap: 0.75rem; +} + +.games-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; +} + +.game-card { + background-color: var(--bg-card); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0 5px 15px var(--shadow); + transition: var(--transition); + border: 1px solid var(--border); +} + +.game-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px var(--shadow); +} + +.game-image { + height: 200px; + background-size: cover; + background-position: center; +} + +.game-content { + padding: 1.5rem; +} + +.game-content h3 { + font-size: 1.25rem; + margin-bottom: 0.5rem; + color: var(--text); +} + +.game-content p { + color: var(--text-light); + margin-bottom: 1rem; + font-size: 0.9rem; + min-height: 3rem; +} + +.game-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1.5rem; +} + +.game-tag { + background-color: var(--bg-secondary); + color: var(--text-light); + padding: 0.25rem 0.75rem; + border-radius: 50px; + font-size: 0.8rem; +} + +.game-button { + display: inline-block; + width: 100%; + text-align: center; + background-color: var(--primary); + color: white; + padding: 0.75rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + transition: var(--transition); +} + +.game-button:hover { + background-color: var(--secondary); +} + +/* Footer */ +footer { + background-color: var(--bg-secondary); + padding: 3rem 0 1.5rem; + margin-top: auto; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-column h3 { + color: var(--text); + margin-bottom: 1.5rem; + font-size: 1.25rem; +} + +.footer-links { + list-style: none; +} + +.footer-links li { + margin-bottom: 0.75rem; +} + +.footer-links a { + color: var(--text-light); + text-decoration: none; + transition: var(--transition); +} + +.footer-links a:hover { + color: var(--primary); +} + +.social-links { + display: flex; + gap: 1rem; +} + +.social-links a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background-color: var(--bg-card); + color: var(--text); + border-radius: 50%; + transition: var(--transition); +} + +.social-links a:hover { + background-color: var(--primary); + color: white; + transform: translateY(-3px); +} + +.copyright { + text-align: center; + padding-top: 1.5rem; + border-top: 1px solid var(--border); + color: var(--text-light); + font-size: 0.9rem; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .header-content { + justify-content: space-between; + } + + .hero-content { + text-align: center; + } + + .categories-grid { + grid-template-columns: 1fr; + } + + .games-grid { + grid-template-columns: 1fr; + } + + .page-header { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } +} + +/* Utility Classes */ +.text-center { + text-align: center; +} + +.mt-2 { + margin-top: 2rem; +} + +.animated-button { + /* Basic Button Styling */ + padding: 12px 24px; + font-size: 16px; + font-weight: bold; + color: white; + background-color: #007bff; + /* Primary Blue */ + border: none; + border-radius: 5px; + cursor: pointer; + outline: none; + /* Remove outline on focus */ + position: relative; + /* For pseudo-elements */ + overflow: hidden; + /* Hide overflowing animation */ + + /* Smooth Transitions for Hover */ + transition: all 0.3s ease-in-out; +} + +.animated-button:hover { + background-color: #0056b3; + /* Darker Blue on hover */ + transform: translateY(-2px); + /* Slight lift on hover */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + /* Subtle shadow */ +} + +.animated-button:active { + background-color: #004085; + /* Even darker blue on click */ + transform: translateY(0); + /* Return to original position */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + /* Smaller shadow on click */ +} + +/* Click Animation (using pseudo-element for a ripple effect) */ +.animated-button::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(255, 255, 255, 0.3); + /* White ripple */ + border-radius: 50%; + opacity: 0; + transform: translate(-50%, -50%); + transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out; +} + +.animated-button:active::before { + width: 200%; + /* Expand ripple */ + height: 200%; + /* Expand ripple */ + opacity: 1; + transition: 0s; + /* Reset transition for immediate effect */ +} \ No newline at end of file diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css index 8468b371..7e2e107b 100644 --- a/src/assets/styles/map/popup.css +++ b/src/assets/styles/map/popup.css @@ -121,7 +121,6 @@ .state-popup__info { font-size: 1.15rem; color: #444; - margin: -1rem 0 -1rem 0; text-align: left; width: 100%; @@ -180,7 +179,6 @@ .state-popup__info { font-size: 1rem; - margin: -1rem 0; } .state-popup__name { @@ -207,4 +205,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/assets/styles/varnmala/reader.css b/src/assets/styles/varnmala/reader.css index 7fd11142..15d47814 100644 --- a/src/assets/styles/varnmala/reader.css +++ b/src/assets/styles/varnmala/reader.css @@ -16,7 +16,7 @@ will-change: contents; line-height: 1; gap: 0.5rem; - height: max-content; + height: 80vh; } .info { @@ -28,7 +28,7 @@ padding: 0.5rem; } -.container__reader > .letter { +.container__reader>.letter { width: 100%; box-sizing: border-box; display: flex; @@ -186,7 +186,7 @@ font-size: min(200rem, 70vw); } - .container__reader > .letter { + .container__reader>.letter { justify-content: center; margin-left: auto; } @@ -194,4 +194,4 @@ .mute-button { font-size: min(1.5rem, 6vw); } -} +} \ No newline at end of file diff --git a/src/assets/styles/varnmala/speak.css b/src/assets/styles/varnmala/speak.css index f8c5f965..60206bf0 100644 --- a/src/assets/styles/varnmala/speak.css +++ b/src/assets/styles/varnmala/speak.css @@ -94,6 +94,8 @@ /* Container styles */ .container__english { + padding-block: 0.5rem; + & .letter { font-size: min(100vw, 100vh); line-height: 1; @@ -104,7 +106,7 @@ transition: color 0.5s ease-in; } - /* Background styles */ + /* Original Background gradients */ & .bg-gradient1 { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); } @@ -113,50 +115,66 @@ background: linear-gradient(45deg, #a8e6cf, #dcedc1); } - & .bg-pattern1 { - background-image: repeating-linear-gradient( - 45deg, - rgba(0, 0, 0, 0.1) 0px, - rgba(0, 0, 0, 0.1) 2px, - transparent 2px, - transparent 4px - ); - } - - &.bg-gradient3 { + & .bg-gradient3 { background: linear-gradient(135deg, #667eea, #764ba2); } - &.bg-gradient4 { + & .bg-gradient4 { background: linear-gradient(135deg, #2af598, #009efd); } - &.bg-gradient5 { + & .bg-gradient5 { background: linear-gradient(135deg, #f83600, #f9d423); } - &.bg-pattern2 { - background-image: repeating-linear-gradient( - 45deg, - transparent, - transparent 10px, - rgba(0, 0, 0, 0.05) 10px, - rgba(0, 0, 0, 0.05) 20px - ); + /* 5 New Beautiful Gradients */ + & .bg-gradient6 { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + } + + & .bg-gradient7 { + background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); + } + + & .bg-gradient8 { + background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); + } + + & .bg-gradient9 { + background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); } - &.bg-pattern3 { - background-image: repeating-radial-gradient( - circle, - transparent, - transparent 10px, - rgba(0, 0, 0, 0.05) 10px, - rgba(0, 0, 0, 0.05) 20px - ); + & .bg-gradient10 { + background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%); + } + + /* Pattern styles */ + & .bg-pattern1 { + background-image: repeating-linear-gradient(45deg, + rgba(0, 0, 0, 0.1) 0px, + rgba(0, 0, 0, 0.1) 2px, + transparent 2px, + transparent 4px); + } + + & .bg-pattern2 { + background-image: repeating-linear-gradient(45deg, + transparent, + transparent 10px, + rgba(0, 0, 0, 0.05) 10px, + rgba(0, 0, 0, 0.05) 20px); + } + + & .bg-pattern3 { + background-image: repeating-radial-gradient(circle, + transparent, + transparent 10px, + rgba(0, 0, 0, 0.05) 10px, + rgba(0, 0, 0, 0.05) 20px); } } -& .no-background { +.no-background { background: none !important; } @@ -170,4 +188,4 @@ transform: scale(1); opacity: 1; } -} +} \ No newline at end of file diff --git a/src/components/Analytics.astro b/src/components/Analytics.astro index a35b323e..7200f143 100644 --- a/src/components/Analytics.astro +++ b/src/components/Analytics.astro @@ -8,8 +8,8 @@ const gtagScript = ` `; --- - - + + diff --git a/src/data/gamesData.ts b/src/data/gamesData.ts new file mode 100644 index 00000000..b703083b --- /dev/null +++ b/src/data/gamesData.ts @@ -0,0 +1,198 @@ +// src/data/gamesData.ts +export type AgeKey = "3-5" | "6-8" | "9-12" | "teens" | "adults"; + +export type Game = { + title: string; + description: string; + image: string; + tags: string[]; + link: string; +}; + +export const gamesData: Record = { + "3-5": [ + { + title: "Draw", + description: "A fun game that helps toddlers learn alphabets and improve memory.", + image: + "https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Educational", "Memory", "alphabet"], + link: "/draw" + }, + { + title: "Hide N Seek", + description: "Match animals with their sounds in this engaging audio game.", + image: "https://images.unsplash.com/photo-1550355291-bbee04a92027?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Alphabet", "Fun"], + link: "/hidenseek" + }, + { + title: "Alphabets", + description: "Learn basic alphabets and improve vocabulary skills.", + image: + "https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Education", "Alphabet"], + link: "/alphabets" + }, + { + title: "Panel", + description: "Learn basic alphabets and improve vocabulary skills.", + image: + "https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Education", "Alphabet"], + link: "/panel" + }, + { + title: "Gallery", + description: "Learn basic alphabets and improve vocabulary skills.", + image: + "https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Education", "Alphabet"], + link: "/gallery" + } + ], + "6-8": [ + { + title: "Varnmala", + description: "Learn varnmala of hindi.", + image: + "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["vocab", "Educational"], + link: "/varnmala" + }, + { + title: "Number System", + description: "Learn Number System of word.", + image: + "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["vocab", "maths"], + link: "/numbers" + }, + { + title: "Math Adventure", + description: "Solve math problems to advance through an exciting adventure world.", + image: + "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Math", "Adventure", "Educational"], + link: "/math" + }, + { + title: "Cross Word", + description: "Create words from letter tiles to earn points and unlock levels.", + image: + "https://images.unsplash.com/photo-1589998059171-988d887df646?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Language", "Spelling", "Fun"], + link: "/crossword" + }, + { + title: "Akshar", + description: "Learn local language basics", + image: + "https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Language", "Educational"], + link: "/akshar" + }, + { + title: "Stories", + description: "our stories", + image: + "https://images.unsplash.com/photo-1585504198196-fb18f7b16b88?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["story"], + link: "/story" + }, + { + title: "Capital", + description: "our State and Capital", + image: + "https://images.unsplash.com/photo-1585504198196-fb18f7b16b88?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["geography", "gk"], + link: "/capital" + } + ], + "9-12": [ + { + title: "Canvas", + description: "Learn basic programming concepts through a fun puzzle game.", + image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Programming", "Logic", "Puzzle"], + link: "/canvas" + }, + { + title: "Our India", + description: "Learn about india state by dance.", + image: + "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["History", "Mystery", "Research"], + link: "/map" + }, + { + title: "Nakshtra", + description: "Learn about environmental science while protecting virtual ecosystems.", + image: + "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Environment", "Science", "Strategy"], + link: "/nakshtra" + } + ], + teens: [ + { + title: "Stories", + description: "A complex strategy game that challenges critical thinking and planning.", + image: + "https://images.unsplash.com/photo-1585504198196-fb18f7b16b88?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Strategy", "Critical Thinking", "Multiplayer"], + link: "/stories" + }, + { + title: "Poems", + description: "Design and create digital art, music, and animations.", + image: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Creative", "Art", "Music"], + link: "/poems" + }, + { + title: "Glossary", + description: "Team-based challenges that promote collaboration and communication.", + image: + "https://images.unsplash.com/photo-1511632765486-a01980e01a18?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Social", "Teamwork", "Communication"], + link: "/glossary" + } + ], + adults: [ + { + title: "Our India", + description: "Test your knowledge across various parts of indian state.", + image: + "https://images.unsplash.com/photo-1535224206242-487f7090b5bb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Trivia", "Knowledge", "Multiplayer"], + link: "/map" + }, + { + title: "Vedic", + description: "Work together to solve puzzles and escape before time runs out.", + image: "https://images.unsplash.com/photo-1552422535-93d5d0d6e7e5?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Puzzle", "Teamwork", "Mystery"], + link: "/vedic" + }, + { + title: "Zodiac", + description: "Ancient Indian Zodiac Signs.", + image: + "https://images.unsplash.com/photo-1610890716171-6b1bb98ffd09?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", + tags: ["Strategy", "Classic", "Multiplayer"], + link: "/zodiac" + } + ] +}; + +export function getAgeGroupDisplayName(age: string | undefined) { + const names: Record = { + "3-5": "3-5 Years", + "6-8": "6-8 Years", + "9-12": "9-12 Years", + teens: "Teens", + adults: "Adults & Family" + }; + return (age && names[age]) || age || "Unknown Age Group"; +} diff --git a/src/layouts/BaseHead.astro b/src/layouts/BaseHead.astro index 9832aa21..d516de75 100755 --- a/src/layouts/BaseHead.astro +++ b/src/layouts/BaseHead.astro @@ -2,7 +2,6 @@ //import { ClientRouter } from "astro:transitions"; import "@/assets/styles/globals.css"; -import Analytics from "@/components/Analytics.astro"; import { siteConfig } from "@/site-config"; import "@fontsource/roboto"; @@ -52,6 +51,14 @@ const socialImageURL = new URL(ogImage ? ogImage : "/assets/images/ABCD-pink.png +{ + articleDate && ( + <> + + + + ) +} {/* Twitter */} diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro index 519d8db0..fc810e4b 100755 --- a/src/layouts/common/Header.astro +++ b/src/layouts/common/Header.astro @@ -12,16 +12,15 @@ import logoImage from "/public/assets/images/48x48.png";

abcdkbd

-
Happy Learning Spot
- + -
+
diff --git a/src/pages/about.astro b/src/pages/about.astro index 415f2433..b5d15d42 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -23,8 +23,7 @@ const meta = { :is(h2, h3) { padding: 0.5rem 0.5rem; - border-radius: 1rem; - box-shadow: 2px 5px 10px 3px rgba(0, 0, 0, 0.2); + box-shadow: inset 2px 5px 10px 3px rgba(0, 0, 0, 0.2); } p { color: grey; diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro index 65fa4865..7332397b 100644 --- a/src/pages/crossword.astro +++ b/src/pages/crossword.astro @@ -1,8 +1,8 @@ --- -import "@/assets/styles/crossword.css"; +import "@/assets/styles/crossword2.css"; import Back from "@/components/Back.astro"; import Help from "@/components/Help.astro"; -import Puzzle from "@/components/Puzzle.astro"; +import Puzzle2 from "@/components/Puzzle2.astro"; import SharePopover from "@/components/ShareButton.astro"; import BaseLayout from "@/layouts/Base"; @@ -22,5 +22,5 @@ const meta = { description="Draw words by clicking and dragging through letters!.Words can be in any direction.Matching words will be colored.Use hints to see word directions" /> - + diff --git a/src/pages/gamePage.astro b/src/pages/gamePage.astro new file mode 100644 index 00000000..05855cac --- /dev/null +++ b/src/pages/gamePage.astro @@ -0,0 +1,14 @@ +
+
+
+ + + Back to Categories + +

Games for 6-8 Years

+
+
+ +
+
+
diff --git a/src/pages/games/[age].astro b/src/pages/games/[age].astro new file mode 100644 index 00000000..d368368b --- /dev/null +++ b/src/pages/games/[age].astro @@ -0,0 +1,38 @@ +--- +import "@/assets/styles/landing.css"; + +import Back from "@/components/Back.astro"; +import GamesGrid from "@/components/GamesGrid.astro"; +import { gamesData, getAgeGroupDisplayName } from "@/data/gamesData"; +import BaseLayout from "@/layouts/Base"; + +// 1. Tell Astro which /games/* pages to build +export function getStaticPaths() { + return Object.entries(gamesData).map(([age, games]) => ({ + params: { age }, // matches [age].astro + props: { + games, + displayName: getAgeGroupDisplayName(age) + } + })); +} + +// 2. These come from the matching entry in getStaticPaths() +const { games, displayName } = Astro.props; + +const meta = { + title: `Games for ${displayName}`, + description: "A fun and interactive learning platform for kids." +}; +--- + + +
+
+ +

Games for {displayName}

+
+ + {games.length === 0 ?

No games found for this age group.

: } +
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index c82c0bd0..24aec09c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,12 +1,9 @@ --- -import "@/assets/styles/index.css"; -import FeaturesSection from "@/components/about/FeaturesSection.astro"; -import ExploreLearnSection from "@/components/home/ExploreLearnSection.astro"; -import HeroSection from "@/components/home/HeroSection.astro"; -import KidsLoveSection from "@/components/home/KidsLoveSection.astro"; +//import "@/assets/styles/index.css"; import MobileSplash from "@/components/MobileSplash.astro"; // import TestimonialsSection from "@/components/home/TestimonialsSection.astro"; import BaseLayout from "@/layouts/Base"; +import Landing from "@/pages/landing.astro"; const meta = { title: "ABCDKBD - A learning corner for little learners.", @@ -14,11 +11,12 @@ const meta = { }; --- - + - - + + - - + + + diff --git a/src/pages/landing.astro b/src/pages/landing.astro new file mode 100644 index 00000000..7f409073 --- /dev/null +++ b/src/pages/landing.astro @@ -0,0 +1,31 @@ +--- +import "@/assets/styles/landing.css"; +import Categories from "@/components/Categories.astro"; +import Hero from "@/components/Hero.astro"; +--- + + +
+ + +
+ + + + diff --git a/src/pages/poems.astro b/src/pages/poems.astro index 2080f5fa..e9b764b3 100644 --- a/src/pages/poems.astro +++ b/src/pages/poems.astro @@ -1,6 +1,6 @@ --- import "@/assets/styles/poems.css"; -import BackIcon from "@/components/Back.astro"; +import BackButton from "@/components/BackButton.astro"; import Help from "@/components/Help.astro"; import PoemCard from "@/components/PoemCard.astro"; import PoemDialog from "@/components/PoemDialog.astro"; @@ -19,7 +19,7 @@ const meta = { --- - + G3 + + + + +
@@ -69,14 +74,15 @@ const meta = { const fontSelector = document.getElementById("fontSelector") as HTMLSelectElement; const colorPicker = document.getElementById("colorPicker") as HTMLInputElement; const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement; - const muteBtn = document.getElementById("muteBtn") as HTMLButtonElement; // Added mute button + const muteBtn = document.getElementById("muteBtn") as HTMLButtonElement; const synth = window.speechSynthesis; - let lastKey: string | null = null; // Store the last key pressed - let isMuted = false; // Flag to track mute state + let lastKey: string | null = null; + let isMuted = false; + let currentColor = "#000000"; // Store the current selected color function speak(text: string) { - if (isMuted) return; // Do not speak if muted + if (isMuted) return; if (synth.speaking) { synth.cancel(); @@ -102,17 +108,22 @@ const meta = { function drawLetter(letter: string, isDoublePress: boolean) { letterDiv.innerHTML = letter; - letterDiv.style.color = isDoublePress ? "yellow" : "black"; + // Use currentColor instead of hardcoded black, unless double press + letterDiv.style.color = isDoublePress ? "yellow" : currentColor; letterDiv.style.animation = "letterPop 0.3s ease-out"; setTimeout(() => { letterDiv.style.animation = ""; }, 300); - speak(letter); // Speak the letter immediately after drawing + speak(letter); } bgSelector?.addEventListener("change", updateBackground); fontSelector?.addEventListener("change", updateFont); + + // Update color picker to store the selected color and apply immediately + colorPicker?.addEventListener("input", updateColor); colorPicker?.addEventListener("change", updateColor); + toggleBg?.addEventListener("click", toggleBackground); muteBtn?.addEventListener("click", (e: MouseEvent) => { @@ -126,30 +137,27 @@ const meta = { (e) => { e.preventDefault(); const { key } = e; + console.log({ key }); - if (/^[0-9]$/.test(key)) { + if (/^[a-z]$/i.test(key)) { const upperKey = key.toUpperCase(); let isDouble = false; - let doublePress; + if (lastKey === upperKey) { - // Double press detected isDouble = true; - doublePress = true; - } else { - doublePress = false; } drawLetter(upperKey, isDouble); - lastKey = upperKey; // Update last key + lastKey = upperKey; } else { - lastKey = null; // Reset last key if not alphabet + lastKey = null; } }, false ); function updateBackground() { - letterContainer.className = "container__hindi"; + letterContainer.className = "container_hindi"; if (bgSelector.value !== "none") { letterContainer.classList.add(`bg-${bgSelector.value}`); } @@ -160,7 +168,9 @@ const meta = { } function updateColor() { - letterDiv.style.color = colorPicker.value; + // Store the selected color and apply it immediately + currentColor = colorPicker.value; + letterDiv.style.color = currentColor; } function toggleBackground() {