diff --git a/public/assets/js/brand.js b/public/assets/js/brand.js new file mode 100644 index 00000000..6ee68d45 --- /dev/null +++ b/public/assets/js/brand.js @@ -0,0 +1,419 @@ +// ===== BRAND DATA (6 Real Examples) ===== +const defaultBrands = [ + { + name: "Apple", + tagline: "Think Different", + industry: "Technology", + founded: 1976, + hq: "Cupertino, California", + colors: ["#000000", "#ffffff", "#a2aaad"], + description: + "Apple Inc. is a global technology leader that designs, manufactures and sells smartphones, computers, tablets, wearables and services. Known for its iconic iPhone, Mac, iPad, and the App Store ecosystem.", + tags: ["tech", "innovation", "premium", "consumer electronics", "software"], + emoji: "🍎" + }, + { + name: "Nike", + tagline: "Just Do It", + industry: "Sportswear & Lifestyle", + founded: 1964, + hq: "Beaverton, Oregon", + colors: ["#111111", "#fa5400", "#ffffff"], + description: + "Nike is the world's leading athletic footwear and apparel brand, inspiring athletes through innovative performance products and powerful storytelling.", + tags: ["fashion", "lifestyle", "sports", "footwear", "apparel"], + emoji: "✔️" + }, + { + name: "Coca-Cola", + tagline: "Open Happiness", + industry: "Beverages", + founded: 1892, + hq: "Atlanta, Georgia", + colors: ["#f40009", "#ffffff", "#000000"], + description: + "The Coca-Cola Company is the world's largest beverage corporation, with over 500 brands sold in more than 200 countries.", + tags: ["food", "beverages", "fmcg", "global", "iconic"], + emoji: "🥤" + }, + { + name: "Tesla", + tagline: "Accelerating the World's Transition to Sustainable Energy", + industry: "Electric Vehicles & Energy", + founded: 2003, + hq: "Austin, Texas", + colors: ["#cc0000", "#000000", "#ffffff"], + description: + "Tesla designs and manufactures electric vehicles, battery energy storage, solar panels and solar roof tiles.", + tags: ["auto", "tech", "ev", "innovation", "sustainability"], + emoji: "⚡" + }, + { + name: "Louis Vuitton", + tagline: "The Art of Travel", + industry: "Luxury Fashion", + founded: 1854, + hq: "Paris, France", + colors: ["#b08850", "#1a1a1a", "#f5f0e8"], + description: + "Louis Vuitton is a French luxury fashion house and the flagship brand of LVMH. Famous for its LV monogram on luggage, handbags, and leather goods.", + tags: ["fashion", "luxury", "lifestyle", "premium", "heritage"], + emoji: "👜" + }, + { + name: "Spotify", + tagline: "Music for Everyone", + industry: "Music & Streaming", + founded: 2006, + hq: "Stockholm, Sweden", + colors: ["#1db954", "#191414", "#ffffff"], + description: + "Spotify is the world's largest music streaming service with over 600 million users offering songs, podcasts, and audiobooks.", + tags: ["tech", "music", "streaming", "entertainment", "lifestyle"], + emoji: "🎵" + } +]; + +// ===== STATE ===== +let brands = JSON.parse(localStorage.getItem("brandvault_brands")) || [...defaultBrands]; +let currentFilter = "all"; +let currentSearch = ""; +let detailIndex = -1; + +// ===== TAG COLORS ===== +const tagColors = [ + { bg: "rgba(99,102,241,0.18)", border: "rgba(99,102,241,0.5)", text: "#a78bfa" }, + { bg: "rgba(6,182,212,0.15)", border: "rgba(6,182,212,0.5)", text: "#22d3ee" }, + { bg: "rgba(244,114,182,0.15)", border: "rgba(244,114,182,0.5)", text: "#f472b6" }, + { bg: "rgba(45,212,191,0.15)", border: "rgba(45,212,191,0.5)", text: "#2dd4bf" }, + { bg: "rgba(251,191,36,0.15)", border: "rgba(251,191,36,0.4)", text: "#fbbf24" }, + { bg: "rgba(52,211,153,0.15)", border: "rgba(52,211,153,0.4)", text: "#34d399" } +]; + +function getTagColor(tag) { + let hash = 0; + for (let c of tag) hash = (hash * 31 + c.charCodeAt(0)) % tagColors.length; + return tagColors[Math.abs(hash) % tagColors.length]; +} + +// ===== SAVE TO LOCALSTORAGE ===== +function save() { + localStorage.setItem("brandvault_brands", JSON.stringify(brands)); +} + +// ===== FILTER LOGIC ===== +function getFiltered() { + const q = currentSearch.toLowerCase().trim(); + return brands.filter((b) => { + const matchTag = currentFilter === "all" || b.tags.some((t) => t.toLowerCase().includes(currentFilter)); + const matchSearch = + !q || + b.name.toLowerCase().includes(q) || + (b.tagline || "").toLowerCase().includes(q) || + (b.industry || "").toLowerCase().includes(q) || + (b.description || "").toLowerCase().includes(q) || + b.tags.some((t) => t.toLowerCase().includes(q)); + return matchTag && matchSearch; + }); +} + +// ===== RENDER CARDS ===== +function renderCards() { + const grid = document.getElementById("brandGrid"); + const noRes = document.getElementById("noResults"); + const filtered = getFiltered(); + + grid.innerHTML = ""; + + if (filtered.length === 0) { + noRes.classList.remove("hidden"); + } else { + noRes.classList.add("hidden"); + } + + filtered.forEach((brand, fi) => { + const realIdx = brands.indexOf(brand); + const card = document.createElement("div"); + card.className = "brand-card"; + card.style.animationDelay = `${fi * 0.06}s`; + + const c1 = brand.colors[0] || "#6366f1"; + const c2 = brand.colors[1] || "#06b6d4"; + + const tagsHTML = brand.tags + .slice(0, 4) + .map((t) => { + const col = getTagColor(t); + return `${t}`; + }) + .join(""); + + const dotsHTML = brand.colors + .map((c) => ``) + .join(""); + + card.innerHTML = ` +
+
+ ${brand.emoji || "🏷️"} +
+
+
${brand.name}
+
${brand.tagline || "—"}
+
+
+
+
+ Industry + ${brand.industry || "—"} +
+
+ Founded + ${brand.founded || "—"} +
+
+ HQ + ${brand.hq || "—"} +
+
+ ${brand.description ? `
${brand.description}
` : ""} + ${dotsHTML ? `
${dotsHTML}
` : ""} +
${tagsHTML}
+
+ + +
+ `; + + card.addEventListener("click", (e) => { + if (!e.target.closest(".card-actions")) openDetail(realIdx); + }); + + grid.appendChild(card); + }); + + // Action button listeners + document.querySelectorAll(".edit-btn").forEach((btn) => { + btn.addEventListener("click", (e) => { + e.stopPropagation(); + openEditModal(parseInt(btn.dataset.idx)); + }); + }); + document.querySelectorAll(".del-btn").forEach((btn) => { + btn.addEventListener("click", (e) => { + e.stopPropagation(); + deleteBrand(parseInt(btn.dataset.idx)); + }); + }); + + updateStats(); +} + +// ===== STATS ===== +function updateStats() { + const filtered = getFiltered(); + document.getElementById("totalCount").textContent = brands.length; + document.getElementById("visibleCount").textContent = filtered.length; + const allTags = new Set(brands.flatMap((b) => b.tags.map((t) => t.toLowerCase()))); + document.getElementById("tagCount").textContent = allTags.size; +} + +// ===== DETAIL MODAL ===== +function openDetail(idx) { + detailIndex = idx; + const b = brands[idx]; + document.getElementById("detailTitle").textContent = b.name; + + const c1 = b.colors[0] || "#6366f1"; + const c2 = b.colors[1] || "#06b6d4"; + + const swatches = b.colors + .map((c) => `
`) + .join(""); + + const tags = b.tags + .map((t) => { + const col = getTagColor(t); + return `${t}`; + }) + .join(""); + + document.getElementById("detailBody").innerHTML = ` +
+
+ ${b.emoji || "🏷️"} +
+
+
${b.name}
+
${b.tagline || ""}
+
+
+
+
+
Industry
+
${b.industry || "—"}
+
+
+
Founded
+
${b.founded || "—"}
+
+
+
Headquarters
+
${b.hq || "—"}
+
+
+ ${b.description ? `
${b.description}
` : ""} +
Brand Colors
+
${swatches}
+
Tags
+
${tags}
+ `; + + document.getElementById("detailOverlay").classList.remove("hidden"); +} + +document.getElementById("closeDetail").addEventListener("click", () => { + document.getElementById("detailOverlay").classList.add("hidden"); +}); +document.getElementById("closeDetailBtn").addEventListener("click", () => { + document.getElementById("detailOverlay").classList.add("hidden"); +}); +document.getElementById("editFromDetail").addEventListener("click", () => { + document.getElementById("detailOverlay").classList.add("hidden"); + openEditModal(detailIndex); +}); +document.getElementById("detailOverlay").addEventListener("click", (e) => { + if (e.target === document.getElementById("detailOverlay")) + document.getElementById("detailOverlay").classList.add("hidden"); +}); + +// ===== ADD / EDIT MODAL ===== +function openAddModal() { + document.getElementById("modalTitle").textContent = "Add New Brand"; + document.getElementById("editIndex").value = -1; + clearForm(); + document.getElementById("modalOverlay").classList.remove("hidden"); +} + +function openEditModal(idx) { + const b = brands[idx]; + document.getElementById("modalTitle").textContent = "Edit Brand"; + document.getElementById("editIndex").value = idx; + document.getElementById("brandName").value = b.name; + document.getElementById("brandTagline").value = b.tagline || ""; + document.getElementById("brandIndustry").value = b.industry || ""; + document.getElementById("brandFounded").value = b.founded || ""; + document.getElementById("brandHQ").value = b.hq || ""; + document.getElementById("brandColors").value = b.colors.join(", "); + document.getElementById("brandDesc").value = b.description || ""; + document.getElementById("brandTags").value = b.tags.join(", "); + document.getElementById("brandEmoji").value = b.emoji || ""; + document.getElementById("modalOverlay").classList.remove("hidden"); +} + +function clearForm() { + [ + "brandName", + "brandTagline", + "brandIndustry", + "brandFounded", + "brandHQ", + "brandColors", + "brandDesc", + "brandTags", + "brandEmoji" + ].forEach((id) => (document.getElementById(id).value = "")); +} + +function closeModal() { + document.getElementById("modalOverlay").classList.add("hidden"); +} + +document.getElementById("openModal").addEventListener("click", openAddModal); +document.getElementById("closeModal").addEventListener("click", closeModal); +document.getElementById("cancelModal").addEventListener("click", closeModal); +document.getElementById("modalOverlay").addEventListener("click", (e) => { + if (e.target === document.getElementById("modalOverlay")) closeModal(); +}); + +// ===== SAVE BRAND ===== +document.getElementById("saveBrand").addEventListener("click", () => { + const name = document.getElementById("brandName").value.trim(); + if (!name) { + document.getElementById("brandName").focus(); + document.getElementById("brandName").style.borderColor = "#f43f5e"; + return; + } + document.getElementById("brandName").style.borderColor = ""; + + const rawColors = document.getElementById("brandColors").value; + const colors = rawColors + .split(",") + .map((c) => c.trim()) + .filter((c) => c.match(/^#[0-9a-fA-F]{3,6}$/)); + + const brand = { + name, + tagline: document.getElementById("brandTagline").value.trim(), + industry: document.getElementById("brandIndustry").value.trim(), + founded: parseInt(document.getElementById("brandFounded").value) || null, + hq: document.getElementById("brandHQ").value.trim(), + colors: colors.length ? colors : ["#6366f1", "#06b6d4"], + description: document.getElementById("brandDesc").value.trim(), + tags: document + .getElementById("brandTags") + .value.split(",") + .map((t) => t.trim()) + .filter(Boolean), + emoji: document.getElementById("brandEmoji").value.trim() || "🏷️" + }; + + const idx = parseInt(document.getElementById("editIndex").value); + if (idx === -1) { + brands.unshift(brand); + } else { + brands[idx] = brand; + } + + save(); + closeModal(); + renderCards(); +}); + +// ===== DELETE ===== +function deleteBrand(idx) { + if (confirm(`Delete "${brands[idx].name}"?`)) { + brands.splice(idx, 1); + save(); + renderCards(); + } +} + +// ===== SEARCH ===== +const searchInput = document.getElementById("searchInput"); +searchInput.addEventListener("input", () => { + currentSearch = searchInput.value; + renderCards(); +}); +document.getElementById("clearSearch").addEventListener("click", () => { + searchInput.value = ""; + currentSearch = ""; + renderCards(); +}); + +// ===== TAG FILTERS ===== +document.querySelectorAll(".tag-filter").forEach((btn) => { + btn.addEventListener("click", () => { + document.querySelectorAll(".tag-filter").forEach((b) => b.classList.remove("active")); + btn.classList.add("active"); + currentFilter = btn.dataset.tag; + renderCards(); + }); +}); + +// ===== INIT ===== +renderCards(); diff --git a/src/assets/styles/brand.css b/src/assets/styles/brand.css new file mode 100644 index 00000000..07a2793b --- /dev/null +++ b/src/assets/styles/brand.css @@ -0,0 +1,1045 @@ +/* ===== ROOT VARIABLES — Centralized Color System ===== */ +:root { + /* Core palette */ + --clr-bg-deep: #04071a; + --clr-bg-mid: #080d24; + + /* Brand accent colors */ + --clr-violet: #7c6ff7; + --clr-violet-light: #a78bfa; + --clr-cyan: #0fcfe8; + --clr-cyan-light: #67e8f9; + --clr-pink: #f06aab; + --clr-pink-light: #f9a8d4; + --clr-teal: #14d4bc; + --clr-amber: #fbbf24; + --clr-danger: #f43f5e; + + /* Glass system */ + --glass-bg: rgba(255, 255, 255, 0.042); + --glass-bg-hover: rgba(255, 255, 255, 0.072); + --glass-bg-strong: rgba(255, 255, 255, 0.1); + --glass-border: rgba(255, 255, 255, 0.09); + --glass-border-hover: rgba(124, 111, 247, 0.45); + + /* Gradients */ + --grad-primary: linear-gradient(135deg, var(--clr-violet), var(--clr-cyan)); + --grad-accent: linear-gradient(135deg, + var(--clr-violet-light), + var(--clr-cyan-light), + var(--clr-pink-light)); + --grad-card-shine: linear-gradient(135deg, + rgba(255, 255, 255, 0.05) 0%, + transparent 60%); + + /* Text */ + --text-primary: #eef2ff; + --text-secondary: #94a3c0; + --text-muted: #556080; + + /* Shadows */ + --shadow-card-hover: + 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 111, 247, 0.22); + --shadow-btn: 0 4px 20px rgba(124, 111, 247, 0.42); + --shadow-btn-hover: 0 8px 28px rgba(124, 111, 247, 0.65); + --shadow-glow-cyan: 0 0 28px rgba(15, 207, 232, 0.25); + + /* Spacing & shape */ + --radius: 18px; + --radius-sm: 10px; + --radius-xs: 6px; + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* ===== RESET ===== */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: "DM Sans", sans-serif; + background: var(--clr-bg-deep); + color: var(--text-primary); + min-height: 100vh; + overflow-x: hidden; + line-height: 1.5; +} + +/* ===== AURORA BACKGROUND ===== */ +.aurora-bg { + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + background: + radial-gradient(ellipse 80% 60% at 18% 18%, rgba(124, 111, 247, 0.2) 0%, transparent 60%), + radial-gradient(ellipse 70% 70% at 82% 8%, rgba(15, 207, 232, 0.16) 0%, transparent 55%), + radial-gradient(ellipse 60% 55% at 62% 82%, rgba(168, 85, 247, 0.18) 0%, transparent 60%), + radial-gradient(ellipse 55% 45% at 8% 72%, rgba(20, 212, 188, 0.13) 0%, transparent 50%), + linear-gradient(180deg, var(--clr-bg-deep) 0%, var(--clr-bg-mid) 100%); +} + +.blob { + position: absolute; + border-radius: 50%; + filter: blur(90px); + opacity: 0.5; + mix-blend-mode: screen; + animation: drift 20s ease-in-out infinite alternate; +} + +.blob-1 { + width: 540px; + height: 440px; + background: radial-gradient(circle, var(--clr-violet), transparent 70%); + top: -12%; + left: -10%; + animation-duration: 22s; +} + +.blob-2 { + width: 460px; + height: 400px; + background: radial-gradient(circle, var(--clr-cyan), transparent 70%); + top: 4%; + right: -6%; + animation-duration: 26s; + animation-delay: -6s; +} + +.blob-3 { + width: 400px; + height: 360px; + background: radial-gradient(circle, #a855f7, transparent 70%); + bottom: 8%; + left: 18%; + animation-duration: 24s; + animation-delay: -3s; +} + +.blob-4 { + width: 320px; + height: 320px; + background: radial-gradient(circle, var(--clr-teal), transparent 70%); + bottom: -6%; + right: 8%; + animation-duration: 20s; + animation-delay: -11s; +} + +@keyframes drift { + 0% { + transform: translate(0, 0) scale(1); + } + + 33% { + transform: translate(28px, -38px) scale(1.07); + } + + 66% { + transform: translate(-18px, 28px) scale(0.95); + } + + 100% { + transform: translate(14px, -18px) scale(1.04); + } +} + +.shimmer-line { + position: absolute; + top: 33%; + left: -20%; + width: 140%; + height: 1px; + background: linear-gradient(90deg, + transparent, + rgba(124, 111, 247, 0.35), + rgba(15, 207, 232, 0.45), + rgba(168, 85, 247, 0.35), + transparent); + animation: shimmerMove 10s linear infinite; + opacity: 0.55; +} + +@keyframes shimmerMove { + 0% { + transform: translateX(-8%); + } + + 100% { + transform: translateX(8%); + } +} + +.grain { + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); + opacity: 0.3; +} + +/* ===== HEADER ===== */ +.header { + position: relative; + z-index: 10; + text-align: center; + padding: 64px 24px 30px; +} + +.header-inner { + display: inline-block; +} + +.logo { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + margin-bottom: 10px; +} + +.logo-icon { + width: 54px; + height: 54px; + border-radius: 16px; + background: var(--grad-primary); + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + color: #fff; + flex-shrink: 0; + box-shadow: 0 0 28px rgba(124, 111, 247, 0.55), var(--shadow-glow-cyan); +} + +.logo-text { + font-family: "Syne", sans-serif; + font-size: 2.7rem; + font-weight: 800; + letter-spacing: -1.5px; + background: var(--grad-accent); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.header-sub { + color: var(--text-secondary); + font-size: 0.95rem; + font-weight: 300; + letter-spacing: 0.6px; +} + +/* ===== CONTROLS BAR ===== */ +.controls-bar { + position: relative; + z-index: 10; + display: flex; + align-items: center; + gap: 14px; + padding: 0 32px 20px; + flex-wrap: wrap; +} + +.search-wrap { + position: relative; + flex: 1; + min-width: 240px; +} + +.search-icon { + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); + font-size: 14px; + pointer-events: none; +} + +.search-input { + width: 100%; + padding: 13px 44px 13px 44px; + border-radius: var(--radius); + border: 1px solid var(--glass-border); + background: var(--glass-bg); + -webkit-backdrop-filter: blur(18px); + backdrop-filter: blur(18px); + color: var(--text-primary); + font-family: "DM Sans", sans-serif; + font-size: 0.95rem; + outline: none; + transition: var(--transition); +} + +.search-input::placeholder { + color: var(--text-muted); +} + +.search-input:focus { + border-color: var(--clr-cyan); + background: var(--glass-bg-hover); + box-shadow: 0 0 0 3px rgba(15, 207, 232, 0.13), var(--shadow-glow-cyan); +} + +.clear-btn { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: var(--text-muted); + cursor: pointer; + font-size: 15px; + padding: 4px 6px; + border-radius: var(--radius-xs); + transition: var(--transition); +} + +.clear-btn:hover { + color: var(--clr-pink); +} + +.filter-tags { + display: flex; + align-items: center; + gap: 7px; + flex-wrap: wrap; +} + +.filter-label { + color: var(--text-muted); + font-size: 0.78rem; + font-weight: 500; + letter-spacing: 0.8px; + text-transform: uppercase; +} + +.tag-filter { + padding: 7px 15px; + border-radius: 50px; + border: 1px solid var(--glass-border); + background: var(--glass-bg); + color: var(--text-secondary); + font-size: 0.8rem; + cursor: pointer; + transition: var(--transition); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + font-family: "DM Sans", sans-serif; +} + +.tag-filter:hover { + background: var(--glass-bg-hover); + border-color: var(--clr-violet); + color: var(--clr-violet-light); +} + +.tag-filter.active { + background: linear-gradient(135deg, rgba(124, 111, 247, 0.28), rgba(15, 207, 232, 0.22)); + border-color: var(--clr-cyan); + color: var(--clr-cyan-light); + font-weight: 500; +} + +.add-btn { + padding: 13px 26px; + border-radius: var(--radius); + border: none; + background: var(--grad-primary); + color: #fff; + font-family: "Syne", sans-serif; + font-weight: 700; + font-size: 0.9rem; + cursor: pointer; + transition: var(--transition); + display: flex; + align-items: center; + gap: 8px; + box-shadow: var(--shadow-btn); + white-space: nowrap; +} + +.add-btn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-btn-hover); + filter: brightness(1.1); +} + +.add-btn:active { + transform: translateY(0); +} + +/* ===== STATS BAR ===== */ +.stats-bar { + position: relative; + z-index: 10; + display: flex; + gap: 14px; + padding: 0 32px 26px; +} + +.stat { + display: flex; + flex-direction: column; + align-items: center; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + -webkit-backdrop-filter: blur(14px); + backdrop-filter: blur(14px); + border-radius: var(--radius-sm); + padding: 12px 26px; + min-width: 108px; + transition: var(--transition); +} + +.stat:hover { + background: var(--glass-bg-hover); + border-color: var(--glass-border-hover); +} + +.stat span { + font-family: "Syne", sans-serif; + font-size: 1.9rem; + font-weight: 800; + line-height: 1; + background: var(--grad-primary); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.stat label { + font-size: 0.68rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 1.1px; + margin-top: 5px; +} + +/* ===== BRAND GRID ===== */ +.brand-grid { + position: relative; + z-index: 10; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 22px; + padding: 0 32px 64px; +} + +/* ===== BRAND CARD ===== */ +.brand-card { + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius); + -webkit-backdrop-filter: blur(22px); + backdrop-filter: blur(22px); + padding: 26px; + cursor: pointer; + transition: var(--transition); + position: relative; + overflow: hidden; + animation: cardIn 0.45s ease both; +} + +@keyframes cardIn { + from { + opacity: 0; + transform: translateY(22px) scale(0.97); + } + + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.brand-card::before { + content: ""; + position: absolute; + inset: 0; + border-radius: var(--radius); + background: var(--grad-card-shine); + pointer-events: none; +} + +.brand-card::after { + content: ""; + position: absolute; + top: 0; + left: 10%; + right: 10%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(124, 111, 247, 0.5), rgba(15, 207, 232, 0.5), transparent); + opacity: 0; + transition: var(--transition); +} + +.brand-card:hover { + transform: translateY(-7px); + border-color: var(--glass-border-hover); + box-shadow: var(--shadow-card-hover); + background: var(--glass-bg-hover); +} + +.brand-card:hover::after { + opacity: 1; +} + +.card-top { + display: flex; + align-items: flex-start; + gap: 15px; + margin-bottom: 16px; +} + +.brand-emoji { + width: 58px; + height: 58px; + border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; + font-size: 26px; + flex-shrink: 0; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.brand-info { + flex: 1; + min-width: 0; +} + +.brand-name { + font-family: "Syne", sans-serif; + font-size: 1.18rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.brand-tagline { + font-size: 0.8rem; + color: var(--text-secondary); + font-style: italic; + font-weight: 300; + line-height: 1.4; +} + +.card-meta { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-bottom: 14px; +} + +.meta-item { + display: flex; + flex-direction: column; + gap: 2px; +} + +.meta-label { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 1.1px; + color: var(--text-muted); + font-weight: 500; +} + +.meta-value { + font-size: 0.86rem; + color: var(--text-secondary); + font-weight: 500; +} + +.brand-desc { + font-size: 0.83rem; + color: var(--text-muted); + line-height: 1.65; + margin-bottom: 15px; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.color-dots { + display: flex; + gap: 6px; + margin-bottom: 14px; + align-items: center; +} + +.color-dot { + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.14); + flex-shrink: 0; + transition: var(--transition); +} + +.color-dot:hover { + transform: scale(1.25); + border-color: rgba(255, 255, 255, 0.35); +} + +.card-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.tag-pill { + padding: 4px 11px; + border-radius: 50px; + font-size: 0.7rem; + font-weight: 500; + letter-spacing: 0.3px; + border: 1px solid; + transition: var(--transition); +} + +.tag-pill:hover { + filter: brightness(1.2); +} + +.card-actions { + display: flex; + gap: 8px; + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--glass-border); +} + +.action-btn { + flex: 1; + padding: 9px; + border-radius: var(--radius-sm); + border: 1px solid var(--glass-border); + background: var(--glass-bg); + color: var(--text-secondary); + font-size: 0.78rem; + cursor: pointer; + transition: var(--transition); + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + font-family: "DM Sans", sans-serif; +} + +.action-btn.edit-btn:hover { + background: rgba(124, 111, 247, 0.18); + border-color: var(--clr-violet); + color: var(--clr-violet-light); +} + +.action-btn.del-btn:hover { + background: rgba(244, 63, 94, 0.18); + border-color: var(--clr-danger); + color: var(--clr-danger); +} + +/* ===== NO RESULTS ===== */ +.no-results { + position: relative; + z-index: 10; + text-align: center; + padding: 90px 24px; + color: var(--text-muted); +} + +.no-results i { + font-size: 3.2rem; + margin-bottom: 16px; + display: block; + opacity: 0.6; +} + +/* ===== MODAL ===== */ +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(4, 7, 26, 0.82); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + animation: overlayIn 0.22s ease; +} + +@keyframes overlayIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.modal-overlay.hidden { + display: none !important; +} + +.modal-box { + background: rgba(8, 11, 32, 0.96); + border: 1px solid var(--glass-border); + border-radius: 24px; + width: 100%; + max-width: 560px; + max-height: 90vh; + overflow-y: auto; + box-shadow: + 0 24px 64px rgba(0, 0, 0, 0.72), + 0 0 0 1px rgba(124, 111, 247, 0.18), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + animation: modalSlide 0.28s cubic-bezier(0.4, 0, 0.2, 1); +} + +@keyframes modalSlide { + from { + transform: translateY(32px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +.detail-box { + max-width: 680px; +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 28px 28px 0; + margin-bottom: 22px; +} + +.modal-header h2 { + font-family: "Syne", sans-serif; + font-size: 1.35rem; + font-weight: 700; + background: var(--grad-accent); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.modal-close { + width: 36px; + height: 36px; + border-radius: 50%; + border: 1px solid var(--glass-border); + background: var(--glass-bg); + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition); + font-size: 14px; +} + +.modal-close:hover { + background: rgba(244, 63, 94, 0.18); + color: var(--clr-danger); + border-color: var(--clr-danger); +} + +.modal-body { + padding: 0 28px; +} + +.form-group { + margin-bottom: 17px; +} + +.form-group label { + display: block; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 1.1px; + color: var(--text-muted); + margin-bottom: 7px; + font-weight: 500; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 12px 16px; + border-radius: var(--radius-sm); + border: 1px solid var(--glass-border); + background: rgba(255, 255, 255, 0.038); + color: var(--text-primary); + font-family: "DM Sans", sans-serif; + font-size: 0.92rem; + outline: none; + transition: var(--transition); + resize: vertical; +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: var(--text-muted); +} + +.form-group input:focus, +.form-group textarea:focus { + border-color: var(--clr-cyan); + background: var(--glass-bg-hover); + box-shadow: 0 0 0 3px rgba(15, 207, 232, 0.11); +} + +.form-group textarea { + min-height: 82px; +} + +.modal-footer { + display: flex; + gap: 12px; + padding: 22px 28px 28px; +} + +.btn-cancel, +.btn-save { + flex: 1; + padding: 13px; + border-radius: var(--radius-sm); + font-family: "Syne", sans-serif; + font-weight: 700; + font-size: 0.88rem; + cursor: pointer; + transition: var(--transition); +} + +.btn-cancel { + border: 1px solid var(--glass-border); + background: var(--glass-bg); + color: var(--text-secondary); +} + +.btn-cancel:hover { + background: var(--glass-bg-hover); + color: var(--text-primary); + border-color: var(--glass-border-hover); +} + +.btn-save { + border: none; + background: var(--grad-primary); + color: #fff; + box-shadow: var(--shadow-btn); +} + +.btn-save:hover { + transform: translateY(-1px); + box-shadow: var(--shadow-btn-hover); + filter: brightness(1.08); +} + +.btn-save:active { + transform: translateY(0); +} + +/* ===== DETAIL BODY ===== */ +.detail-body { + padding: 0 28px; +} + +.detail-hero { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 24px; + padding: 20px; + background: var(--glass-bg); + border-radius: var(--radius); + border: 1px solid var(--glass-border); +} + +.detail-emoji { + width: 72px; + height: 72px; + border-radius: 18px; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + flex-shrink: 0; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.detail-brand-name { + font-family: "Syne", sans-serif; + font-size: 1.55rem; + font-weight: 800; + color: var(--text-primary); +} + +.detail-tagline { + color: var(--text-secondary); + font-style: italic; + font-size: 0.88rem; + margin-top: 5px; +} + +.detail-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px; + margin-bottom: 18px; +} + +.detail-field { + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + padding: 14px 16px; + transition: var(--transition); +} + +.detail-field:hover { + background: var(--glass-bg-hover); +} + +.detail-field .d-label { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 1.1px; + color: var(--text-muted); + margin-bottom: 5px; +} + +.detail-field .d-value { + font-size: 0.9rem; + color: var(--text-primary); + font-weight: 500; +} + +.detail-desc { + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + padding: 16px; + margin-bottom: 16px; + color: var(--text-secondary); + font-size: 0.88rem; + line-height: 1.72; +} + +.detail-colors { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 16px; + flex-wrap: wrap; +} + +.detail-color-swatch { + width: 38px; + height: 38px; + border-radius: 9px; + border: 2px solid rgba(255, 255, 255, 0.14); + cursor: pointer; + transition: var(--transition); +} + +.detail-color-swatch:hover { + transform: scale(1.18); + border-color: rgba(255, 255, 255, 0.4); +} + +.detail-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 18px; +} + +/* ===== SCROLLBAR ===== */ +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(124, 111, 247, 0.38); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(124, 111, 247, 0.65); +} + +/* ===== UTILITY ===== */ +.hidden { + display: none !important; +} + +/* ===== RESPONSIVE ===== */ +@media (max-width: 768px) { + .controls-bar { + flex-direction: column; + align-items: stretch; + padding: 0 16px 16px; + } + + .filter-tags { + justify-content: flex-start; + } + + .brand-grid { + grid-template-columns: 1fr; + padding: 0 16px 48px; + } + + .stats-bar { + padding: 0 16px 18px; + gap: 10px; + } + + .header { + padding: 44px 16px 22px; + } + + .logo-text { + font-size: 2rem; + } + + .detail-grid { + grid-template-columns: 1fr; + } + + .stat { + padding: 10px 16px; + min-width: 88px; + } +} \ No newline at end of file diff --git a/src/assets/styles/cards/slider.css b/src/assets/styles/cards/slider.css index da12760e..f8ab2350 100644 --- a/src/assets/styles/cards/slider.css +++ b/src/assets/styles/cards/slider.css @@ -25,6 +25,7 @@ flex-direction: column; align-items: center; justify-content: center; + box-sizing: border-box; } .gallery-container { @@ -53,18 +54,17 @@ .gallery-controls { display: grid; grid-template-columns: var(--nav-button-size) 1fr var(--nav-button-size); - gap: 1%; - align-items: start; - /* align to top, buttons will self-align to image center */ - margin-left: -4rem; - margin-right: -4rem; + gap: 0.5rem; + /* FIX: align-items center so buttons stay vertically centered with scroller */ + align-items: center; position: relative; + width: 100%; + box-sizing: border-box; } .gallery-scroller { width: 100%; height: calc(var(--item-height) + 200px); - /* extra space for item-details below */ overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; @@ -72,6 +72,7 @@ -webkit-overflow-scrolling: touch; cursor: grab; flex-grow: 1; + box-sizing: border-box; } .gallery-scroller:active { @@ -85,12 +86,10 @@ height: 100%; } -/* ✅ KEY FIX: buttons position themselves at center of image area only */ .nav-button { width: var(--nav-button-size); height: var(--nav-button-size); - margin-top: calc(var(--item-height) / 2 - var(--nav-button-size) / 2 + 2rem); - /* center of image */ + /* FIX: Removed margin-top calc — parent is now align-items:center so no manual offset needed */ border-radius: 50%; background: rgba(129, 140, 248, 0.2); border: none; @@ -101,6 +100,11 @@ transition: all 0.2s ease; flex-shrink: 0; outline: none; + z-index: 10; + position: relative; + /* FIX: Ensure button never collapses on any screen */ + min-width: var(--nav-button-size); + min-height: var(--nav-button-size); } .nav-button:hover { @@ -230,7 +234,10 @@ scrollbar-color: rgba(129, 140, 248, 0.6) rgba(0, 0, 0, 0.05); } -/* Responsive adjustments */ +/* ===================== */ +/* RESPONSIVE FIXES */ +/* ===================== */ + @media (max-width: 1600px) { :root { --item-width: 360px; @@ -247,7 +254,7 @@ } .gallery-page { - margin-left: 15%; + margin-left: 0; } } @@ -263,7 +270,7 @@ } .gallery-page { - margin-left: 15%; + margin-left: 0; } .letter { @@ -277,23 +284,23 @@ @media (max-width: 600px) { :root { - --item-width: 240px; - --item-height: 240px; - --item-gap: 20px; + --item-width: 220px; + --item-height: 220px; + --item-gap: 16px; --scrollbar-height: 4px; --nav-button-size: 36px; } .gallery-page { - margin-left: 15%; + margin-left: 0; } .gallery-wrapper { - padding: 1.5rem; + padding: 1rem 0.75rem; } .gallery-title { - font-size: 1.75rem; + font-size: 1.5rem; } .letter { @@ -301,11 +308,15 @@ } .item-desc { - font-size: 1.1rem; + font-size: 1rem; } .nav-button svg { - width: 20px; - height: 20px; + width: 18px; + height: 18px; + } + + .gallery-controls { + gap: 0.25rem; } } diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css index bcf73a78..e3096166 100644 --- a/src/assets/styles/crossword2.css +++ b/src/assets/styles/crossword2.css @@ -1,5 +1,4 @@ :root { - /* Color Palette */ --primary-color: #6366f1; --secondary-color: #06b6d4; --accent1-color: #f87171; @@ -10,32 +9,16 @@ --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 */ +/* ── Layout ── */ .puzzle-container { position: relative; width: 100%; @@ -45,54 +28,48 @@ padding: 20px; box-sizing: border-box; touch-action: none; - /* Prevent default touch behaviors */ } -/* Puzzle Grid */ +/* ── Grid — DESKTOP ── */ .grid__puzzle { display: grid; - gap: 12px; - padding: 28px; + grid-template-columns: repeat(8, 1fr); + gap: 10px; + padding: 24px; 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; + max-width: 560px; border: 6px solid #f1f5f9; - grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); + box-sizing: border-box; touch-action: none; - /* Critical for touch drag */ } +/* ── Cell — DESKTOP ── */ .grid__puzzle .cell { - aspect-ratio: 1; + aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; background: #f8fafc; border: 3px solid #e2e8f0; border-radius: 12px; - font-size: 3ch; - font-weight: bold; + font-size: clamp(14px, 2.5vw, 22px); + font-weight: 700; 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); + line-height: 1; + padding: 0; + min-width: 0; + min-height: 0; } .grid__puzzle .cell:hover { @@ -106,7 +83,7 @@ .grid__puzzle .cell.selected { background: var(--primary-color); - color: white; + color: #fff; transform: scale(1.08); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); animation: pulse 1.5s infinite alternate; @@ -123,9 +100,8 @@ } .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); + color: #f3ebeb; + box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.3); } .grid__puzzle .cell.word-color-1 { @@ -160,7 +136,7 @@ background-color: var(--accent8-color); } -/* Word List & Details */ +/* ── Details / Word List ── */ details { width: 100%; border-radius: var(--border-radius); @@ -181,6 +157,11 @@ details summary { border-bottom: 2px solid rgba(99, 102, 241, 0.1); margin-bottom: 12px; font-size: clamp(14px, 2.5vw, 18px); + list-style: none; +} + +details summary::-webkit-details-marker { + display: none; } details summary::after { @@ -196,10 +177,6 @@ details summary::after { transform: rotate(180deg); } -details summary::-webkit-details-marker { - display: none; -} - details:not([open]) summary { border-bottom: none; margin-bottom: 0; @@ -209,7 +186,6 @@ details:not([open]) summary::after { transform: rotate(0deg); } -/* Word List */ .word-list { display: flex; flex-wrap: wrap; @@ -221,7 +197,7 @@ details:not([open]) summary::after { padding: 8px 16px; border-radius: 25px; font-weight: 600; - color: rgb(255, 255, 255); + color: #fff; background-color: rgb(62, 24, 255); transition: var(--transition); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); @@ -234,67 +210,53 @@ details:not([open]) summary::after { transform: scale(0.97); } -/* Stats Components */ +/* ── Stats ── */ .stats-container { display: flex; - gap: 14px; - margin: 32px 0; + gap: 8px; + margin: 20px 0; justify-content: center; - flex-wrap: wrap; + flex-wrap: nowrap; align-items: center; + overflow-x: auto; + padding: 4px 0; + -ms-overflow-style: none; + scrollbar-width: none; +} + +.stats-container::-webkit-scrollbar { + display: none; } .stats-button { background: linear-gradient(135deg, var(--primary-color), var(--accent6-color)); border: 2px solid transparent; border-radius: var(--border-radius); - padding: 14px 28px; + padding: 12px 20px; 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)); + white-space: nowrap; + flex-shrink: 0; + font-size: clamp(12px, 2vw, 16px); } .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; + width: 50px; + height: 50px; 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); + flex-shrink: 0; + transition: var(--transition); } .hint-button.active { @@ -303,125 +265,128 @@ details:not([open]) summary::after { 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; - } +.action-btn { + border: 2px solid transparent; + border-radius: var(--border-radius); + padding: 12px 20px; + font-weight: 600; + color: white; + white-space: nowrap; + flex-shrink: 0; + font-size: clamp(12px, 2vw, 16px); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + transition: var(--transition); } -@media (max-width: 768px) { - .puzzle-container { - padding: 15px; - } - - .grid__puzzle { - gap: 6px; - padding: 16px; - grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); - } +.btn-clear { + background: linear-gradient(135deg, #f43f5e, #e11d48); +} - .grid__puzzle .cell { - font-size: 5vw; - border-width: 2px; - min-width: 30px; - min-height: 30px; - border-radius: 8px; - } +.btn-clear:hover { + background: linear-gradient(135deg, #e11d48, #be123c); + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(244, 63, 94, 0.4); +} - .stats-button { - padding: 10px 16px; - } +.btn-shuffle { + background: linear-gradient(135deg, #0ea5e9, #6366f1); +} - .hint-button { - width: 50px; - height: 50px; - } - details summary { - padding: 12px 20px; - } +.btn-new { + background: linear-gradient(135deg, #10b981, #06b6d4); } -@media (max-width: 480px) { +/* ══════════════════════════════ + MOBILE + ══════════════════════════════ */ +@media (max-width: 768px) { .puzzle-container { - padding: 10px; + padding: 8px; } .grid__puzzle { - gap: 4px; - padding: 12px; - grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); - border-width: 4px; + display: grid !important; + grid-template-columns: repeat(8, 1fr) !important; + grid-template-rows: repeat(8, 1fr) !important; + gap: 3px !important; + padding: 6px !important; + border-width: 2px !important; + border-radius: 10px !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; + width: calc(100vw - 16px) !important; + max-width: calc(100vw - 16px) !important; + height: calc(100vw - 16px) !important; + margin: 0 !important; + box-sizing: border-box !important; } .grid__puzzle .cell { - font-size: 6vw; - border-width: 2px; - min-width: 25px; - min-height: 25px; - border-radius: 6px; + width: 100% !important; + height: 100% !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + background: #f8fafc !important; + border: 1.5px solid #e2e8f0 !important; + border-radius: 5px !important; + font-size: calc((100vw - 40px) / 8 * 0.45) !important; + font-weight: 700 !important; + color: var(--text-color) !important; + cursor: pointer !important; + user-select: none !important; + -webkit-user-select: none !important; + touch-action: none !important; + min-width: 0 !important; + min-height: 0 !important; + padding: 0 !important; + overflow: hidden !important; + box-sizing: border-box !important; } .stats-container { - gap: 8px; - margin: 20px 0; + gap: 4px; + margin: 8px 0; } .stats-button { - padding: 8px 14px; - min-width: 70px; - font-size: 3.5vw; + padding: 8px 10px; + font-size: 11px; + border-radius: 10px; + } + + .action-btn { + padding: 8px 10px; + font-size: 11px; + border-radius: 10px; } .hint-button { - width: 45px; - height: 45px; + width: 36px; + height: 36px; } - .hint-button svg, - .hint-button svg path { - max-width: 24px; - max-height: 24px; + details { + margin: 8px 0; } details summary { - padding: 10px 16px; - font-size: 4.5vw; + padding: 12px 16px; + font-size: 14px; } details summary::after { - width: 24px; - height: 24px; - right: 16px; + width: 22px; + height: 22px; + right: 14px; } .word-list { @@ -431,48 +396,21 @@ details:not([open]) summary::after { .word-list .word { padding: 6px 12px; - font-size: 3.5vw; - } -} - -/* Accessibility improvements */ -@media (prefers-reduced-motion: reduce) { - * { - animation: none !important; - transition: none !important; + font-size: clamp(11px, 3.5vw, 14px); } } -/* 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; + width: calc(100vh - 16px) !important; + max-width: calc(100vh - 16px) !important; + height: calc(100vh - 16px) !important; } } -/* 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; +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; } -} +} \ No newline at end of file diff --git a/src/assets/styles/draw.css b/src/assets/styles/draw.css index 7b169a8b..f2f5a56f 100644 --- a/src/assets/styles/draw.css +++ b/src/assets/styles/draw.css @@ -336,4 +336,4 @@ .controls { z-index: 100; -} \ No newline at end of file +} diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css index 8bdee8a8..a8b55afb 100644 --- a/src/assets/styles/header.css +++ b/src/assets/styles/header.css @@ -187,7 +187,6 @@ border-color 0.2s, box-shadow 0.2s; box-shadow: none; - width: 100%; box-sizing: border-box; } @@ -491,6 +490,11 @@ color: var(--subtext, var(--text)); } +/* Desktop pe mobile-actions-bar hide — PEHLE declare karo */ +.mobile-actions-bar { + display: none; +} + /* ── Tablet ── */ @media (max-width: 1024px) { .header { @@ -521,7 +525,7 @@ /* ── Mobile ── */ @media (max-width: 640px) { .header { - grid-template-columns: 1fr; + grid-template-columns: 1fr auto; padding: 0 1rem; min-height: 4rem; height: 4rem; @@ -565,7 +569,58 @@ .hero-search { top: 4rem; - padding: 0.75rem 1rem; + padding: 0.5rem 1rem 0; + flex-direction: column; + align-items: stretch; + } + + .hero-search__wrap { + padding: 0.25rem 0 !important; + } + + /* Mobile buttons bar — search ke niche */ + .mobile-actions-bar { + display: flex !important; + align-items: center; + justify-content: flex-end; + gap: 0.4rem; + padding: 0.4rem 0 0.5rem; + width: 100%; + } + + .mobile-actions-bar .share-button-container { + display: inline-flex !important; + align-items: center !important; + line-height: 0 !important; + } + + .mobile-actions-bar .share-trigger-button { + width: 32px !important; + height: 32px !important; + min-width: 32px !important; + min-height: 32px !important; + max-width: 32px !important; + max-height: 32px !important; + padding: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + } + + .mobile-actions-bar .share-trigger-button svg { + width: 16px !important; + height: 16px !important; + margin: 0 !important; + } + + .mobile-actions-bar .help { + width: 32px !important; + height: 32px !important; + min-width: 32px !important; + min-height: 32px !important; + max-height: 32px !important; + padding: 0 !important; + font-size: 1rem !important; } .header-spacer { @@ -596,6 +651,7 @@ /* ── Small Mobile ── */ @media (max-width: 480px) { .header { + grid-template-columns: 1fr auto; padding: 0 0.75rem; min-height: 3.5rem; height: 3.5rem; @@ -625,7 +681,7 @@ .hero-search { top: 3.5rem; - padding: 0.625rem 0.75rem; + padding: 0.5rem 0.75rem 0; } .header-spacer { @@ -637,17 +693,3 @@ padding: 1.25rem 1rem; } } - -.sidebar-mobile-wrapper { - width: 100%; - padding: 0 1rem; - margin-top: 1rem; -} - -[data-theme="light"] .header { - border-bottom: 2px solid rgba(0, 0, 0, 0.1); -} - -[data-theme="light"] .hero-search { - border-bottom: 1px solid rgba(0, 0, 0, 0.08); -} \ No newline at end of file diff --git a/src/assets/styles/landing.css b/src/assets/styles/landing.css index fcd98c21..23ef136a 100644 --- a/src/assets/styles/landing.css +++ b/src/assets/styles/landing.css @@ -682,7 +682,6 @@ footer { TOUCH DEVICES ══════════════════════════════════════ */ @media (hover: none) and (pointer: coarse) { - .category-card:hover, .game-card:hover, .cta-button:hover { @@ -696,4 +695,4 @@ footer { .game-card:active { transform: scale(0.99); } -} \ No newline at end of file +} diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css index bd4c4e19..5a41de65 100644 --- a/src/assets/styles/map/popup.css +++ b/src/assets/styles/map/popup.css @@ -137,4 +137,4 @@ font-size: 1rem; padding: 0.7rem; } -} \ No newline at end of file +} diff --git a/src/assets/styles/panel.css b/src/assets/styles/panel.css index 44edbb67..a3600ed7 100644 --- a/src/assets/styles/panel.css +++ b/src/assets/styles/panel.css @@ -262,43 +262,37 @@ } } -/* Styles for the header-right section and the settings button/popover */ +/* Settings button container */ .settings-button-container { position: relative; - display: flex; + display: inline-flex; align-items: center; justify-content: center; + vertical-align: middle; } .settings-button { background: transparent; border: 1px solid var(--primary); color: var(--text-light); - padding: 0.6rem; - width: 50px; - height: 50px; - min-width: 40px; + padding: 0; + width: 44px; + height: 44px; + min-width: 44px; + min-height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; + box-sizing: border-box; transition: all var(--transition-speed) ease; cursor: pointer; - margin-top: 0; font-size: 16px; } -.settings-button:hover { - transform: scale(1.05); -} - -.settings-button:active { - transform: scale(0.98); -} - .settings-button .settings-icon { - width: 1.4em; - height: 1.4em; + width: 1.3em; + height: 1.3em; color: var(--primary); fill: currentColor; transition: fill var(--transition-speed) ease; @@ -306,6 +300,14 @@ pointer-events: none; } +.settings-button:hover { + transform: scale(1.05); +} + +.settings-button:active { + transform: scale(0.98); +} + .settings-button::after { content: attr(data-tooltip); position: absolute; @@ -401,7 +403,6 @@ /* === Responsiveness === */ @media (max-width: 768px) { - /* Header-right slot for mobile */ [slot="header-right"] { justify-content: flex-end; width: 100%; @@ -410,7 +411,6 @@ gap: 0.5rem; } - /* Popover positioning for smaller screens */ .panel-tools-popover { right: 1rem; left: auto; diff --git a/src/assets/styles/setting.css b/src/assets/styles/setting.css index e136d23d..84acc6bb 100644 --- a/src/assets/styles/setting.css +++ b/src/assets/styles/setting.css @@ -1,151 +1,93 @@ .container__setting { - container: setting/inline-size; - .setting__trigger { position: fixed; - anchor-name: --setting; - display: flex; - justify-items: end; - justify-content: center; - top: 6rem; + top: 12rem; right: 1.5rem; - width: max-content; - height: 3.5rem; - border-radius: 10%; - background-color: unset; - border: solid; + width: 2.8rem; + height: 2.8rem; + border-radius: 50%; + background-color: #7c3aed; + border: none; cursor: pointer; - font-size: 4rem; - transition: transform 330ms ease-in-out; + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + transition: + transform 330ms ease-in-out, + background-color 330ms ease; - &::after { - outline: 1px solid slateblue; + &.open { + background-color: rgb(106, 202, 119); + transform: scale(1.05) rotate(45deg); } } @media (max-width: 480px) { .setting__trigger { - font-size: 0.6rem; - width: 2.5rem; - height: 2.5rem; - margin-top: 12px; + top: 11rem; + right: 1rem; + width: 2.4rem; + height: 2.4rem; } } .setting__panel { - position: fixed; - position-anchor: --setting; - top: calc(anchor(bottom) + 15px); - right: calc(anchor(left) + 10px); - justify-self: anchor-center; - width: 20rem; - height: 20rem; - background-color: hwb(20 68% 16%); - border-radius: 4px; - padding: 0.74rem; - transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); - color: color(xyz 0 0 1); - - &::backdrop { - background-color: hsl(0 0% 10% / 0.5); - backdrop-filter: blur(2px); - } - - .control__group { - display: grid; - grid-auto-flow: row; - gap: 0.5rem; - width: 20rem; - } - - button, - select { - background-color: color(xyz 0.05 0.05 0.09); - color: white; - border: none; - padding: 1.5rem; - cursor: pointer; - transition: transform 300ms ease-in-out; - appearance: auto; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 10px; - font-weight: 600; - font-size: 1.5rem; - letter-spacing: 0.01em; - touch-action: pinch-zoom; - border-radius: 9px; - - &:hover:not(.close) { - background-color: color(xyz 0.02 0.01 0.02); - transform: translateY(-3px); - } - - &.close { - width: 2rem; - height: 3rem; - justify-self: end; - border-radius: 6px; - - &:hover { - font-size: 30px; - } - } - } + display: none; + background: white; + border: 2px solid #e2e8f0; + border-radius: 1rem; + padding: 1rem; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); + /* position/size JS se aayega */ + } - &[popover] { - position: fixed; - inset: unset; - width: max-content; - /*height: fit-content;*/ - right: 0; - bottom: 0; - margin: auto; - overflow: auto; - color: CanvasText; - background-color: Canvas; - padding: 1rem; - border: solid; - border-radius: 1rem; - opacity: 0; - visibility: hidden; - transition: - translate 0.7s ease-out, - display 0.7s ease-out allow-discrete, - overlay 0.7s ease-out allow-discrete, - height 0.5s ease-in-out; - translate: 0 -2rem; + .setting__backdrop { + display: none; + position: fixed; + inset: 0; + background: hsl(0 0% 10% / 0.4); + backdrop-filter: blur(2px); + z-index: 9998; + } - &:popover-open { - opacity: 1; - visibility: visible; - translate: 0 0; - top: 40px; - bottom: 0; - translate: 0 0; - min-height: 30rem; - justify-content: center; + .control__group { + display: flex; + flex-direction: column; + gap: 0.6rem; + width: 100%; + } - :where(button, select) { - background: linear-gradient(90deg, rgb(17, 255, 247) 0%, rgb(165 39 241) 100%); - transform: scaleZ(1) rotate(5deg); - border-radius: 7px; - } - } + .control__group button, + .control__group select { + width: 100%; + box-sizing: border-box; + padding: 0.9rem 1rem; + border: none; + border-radius: 9px; + font-weight: 700; + font-size: 1.1rem; + cursor: pointer; + color: white; + background: linear-gradient(90deg, rgb(17, 255, 247), rgb(165, 39, 241)); + transition: + transform 200ms ease, + opacity 200ms ease; + } - @starting-style { - opacity: 0; - visibility: hidden; - } - } + .control__group button:hover { + opacity: 0.9; + transform: translateY(-2px); } - &:has(:popover-open) { - .setting__trigger { - background-color: rgb(106, 202, 119); - transform: scale(1.05) rotate(45deg); - } + .control__group .close { + width: 2.2rem; + height: 2.2rem; + padding: 0; + font-size: 1rem; + border-radius: 6px; + align-self: flex-end; + background: #334155; + flex-shrink: 0; } } diff --git a/src/assets/styles/share-button.css b/src/assets/styles/share-button.css index 31caee2e..e9b40a8d 100644 --- a/src/assets/styles/share-button.css +++ b/src/assets/styles/share-button.css @@ -12,22 +12,28 @@ .share-button-container { position: relative; - display: inline-block; + display: inline-flex; + align-items: center; + vertical-align: middle; } .share-trigger-button { background-color: transparent; color: var(--primary); - padding: 10px; - width: 50px; - height: 50px; + padding: 0; + width: 44px; + height: 44px; border: 1px solid var(--primary); - border-radius: 50px; + border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: 500; transition: all 0.2s ease-in-out; position: relative; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; } .share-trigger-button:hover { diff --git a/src/components/Back.astro b/src/components/Back.astro index e5604d83..74b47aaf 100644 --- a/src/components/Back.astro +++ b/src/components/Back.astro @@ -17,35 +17,14 @@ - - - diff --git a/src/components/MobileSplash.astro b/src/components/MobileSplash.astro index b9fda582..99991066 100644 --- a/src/components/MobileSplash.astro +++ b/src/components/MobileSplash.astro @@ -2,7 +2,6 @@ import "@/assets/styles/mobile-splash.css"; import { Image } from "astro:assets"; import logoImage from "public/assets/images/abcd.png"; -const { stay = true } = Astro.props; ---
@@ -19,26 +18,31 @@ const { stay = true } = Astro.props;
- diff --git a/src/components/Popup.astro b/src/components/Popup.astro index 8ae860ad..8e7aac73 100644 --- a/src/components/Popup.astro +++ b/src/components/Popup.astro @@ -58,4 +58,4 @@ import "@/assets/styles/map/popup.css"; } }, 50); }); - \ No newline at end of file + diff --git a/src/components/Puzzle2.astro b/src/components/Puzzle2.astro index 4e2cc6a5..f42915eb 100644 --- a/src/components/Puzzle2.astro +++ b/src/components/Puzzle2.astro @@ -17,480 +17,528 @@ import HintIcon from "@/assets/icons/hint.svg";
Found: 0/
+ + +
+ - - + }) + .catch(function () {}); + diff --git a/src/components/Settings.astro b/src/components/Settings.astro index b3101eee..c59dec31 100644 --- a/src/components/Settings.astro +++ b/src/components/Settings.astro @@ -4,15 +4,15 @@ import "@/assets/styles/setting.css"; ---
- -
+
- - - - + + + +
+
+ + diff --git a/src/components/Speaker.astro b/src/components/Speaker.astro index 0378d549..51091a31 100644 --- a/src/components/Speaker.astro +++ b/src/components/Speaker.astro @@ -51,6 +51,20 @@ declare global { .mute-icon { font-size: 1.5rem; } + + @media (max-width: 640px) { + .mute-button { + width: 32px !important; + height: 32px !important; + padding: 0 !important; + min-width: 32px !important; + min-height: 32px !important; + } + + .mute-icon { + font-size: 1rem !important; + } + }
diff --git a/src/components/VirtualKeyboard.astro b/src/components/VirtualKeyboard.astro new file mode 100644 index 00000000..3eb35797 --- /dev/null +++ b/src/components/VirtualKeyboard.astro @@ -0,0 +1,478 @@ +--- +// VirtualKeyboard.astro +// - Sirf touch device (mobile/tablet) pe show hoga, desktop pe NAHI +// - Shift toggle: lowercase ↔ UPPERCASE +// - Arrow row removed +// - Light/Dark mode auto + manual [data-theme] +// - Drag handle se resize +// - Hide/Show toggle button (bottom-right floating) +--- + + + + + + + + + diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro index 880f703f..8dfbcc98 100755 --- a/src/layouts/common/Header.astro +++ b/src/layouts/common/Header.astro @@ -276,6 +276,7 @@ const allSearchItemsJSON = JSON.stringify(allSearchItems); >
+
@@ -797,6 +798,25 @@ const allSearchItemsJSON = JSON.stringify(allSearchItems); background: #fef3c7 !important; color: #d97706 !important; } + @media (max-width: 768px) { + .hero-search__wrap { + display: flex !important; + align-items: center !important; + gap: 8px !important; + padding: 6px 12px !important; + max-width: 100% !important; + } + + .hero-search__wrap > *:not(.hero-search__box):not(.hero-search__dropdown) { + flex-shrink: 0 !important; + } + + .hero-search__box { + flex: 1 !important; + min-width: 0 !important; + width: auto !important; + } + } + + diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro index 9bff15cf..2cefda35 100644 --- a/src/pages/crossword.astro +++ b/src/pages/crossword.astro @@ -5,6 +5,7 @@ import Help from "@/components/Help.astro"; import Puzzle2 from "@/components/Puzzle2.astro"; import SharePopover from "@/components/ShareButton.astro"; import BaseLayout from "@/layouts/Base"; +import MobileSplash from "@/components/MobileSplash.astro"; const meta = { title: "Crossword", @@ -14,6 +15,7 @@ const meta = { --- + diff --git a/src/pages/draw.astro b/src/pages/draw.astro index d1472947..de481b4e 100644 --- a/src/pages/draw.astro +++ b/src/pages/draw.astro @@ -3,6 +3,7 @@ import "@/assets/styles/draw.css"; import Back from "@/components/BackButton.astro"; import ControlsContainer from "@/components/ControllerContainer.astro"; import DrawComponent from "@/components/DrawKeyboard.astro"; +import VirtualKeyboard from "@/components/VirtualKeyboard.astro"; import MobileSplash from "@/components/MobileSplash.astro"; import BaseLayout from "@/layouts/Base"; @@ -43,13 +44,12 @@ const meta = { align-items: center !important; gap: 0.25rem !important; } - /* Sirf draw page pe nav links right shift */ + :global(.nav__links) { justify-content: flex-end !important; padding-right: 2rem !important; } - /* Sab control buttons same size */ :global(.control-button) { width: 2.2rem !important; height: 2.2rem !important; @@ -67,7 +67,6 @@ const meta = { height: 0.9rem !important; } - /* Speaker — mute-button same size */ :global(.mute-button) { width: 2.2rem !important; height: 2.2rem !important; @@ -79,15 +78,18 @@ const meta = { font-size: 1rem !important; } - /* Help button same size */ :global(.help) { width: 2.2rem !important; height: 2.2rem !important; - font-size: 1rem !important; + min-width: 2.2rem !important; + min-height: 2.2rem !important; + max-width: 2.2rem !important; + max-height: 2.2rem !important; + font-size: 0.9rem !important; padding: 0 !important; + box-sizing: border-box !important; } - /* Select Voice */ :global(#voice-dropdown) { height: 2.2rem !important; font-size: 0.75rem !important; @@ -96,16 +98,14 @@ const meta = { border: 1.5px solid var(--primary, #3b82f6) !important; background: transparent !important; cursor: pointer !important; - width: auto !important; + width: 5.5rem !important; } - /* SVG same size */ :global(.controls-container svg) { width: 1rem !important; height: 1rem !important; } - /* Action group */ :global(.action__group) { max-width: none !important; flex-wrap: nowrap !important; @@ -122,7 +122,6 @@ const meta = { align-items: center !important; } - /* Share trigger button — exact class */ :global(.share-trigger-button) { width: 2.2rem !important; height: 2.2rem !important; @@ -132,19 +131,263 @@ const meta = { } :global(.share-trigger-button svg) { - width: 1rem !important; - height: 1rem !important; + width: 0.85rem !important; + height: 0.85rem !important; + } + + /* Sirf header wala theme toggle size fix — drawer wala affect nahi hoga */ + :global(#headerThemeToggle) { + width: 2.2rem !important; + height: 2.2rem !important; } - /* Theme toggle */ - :global(.theme-toggle) { + /* Mobile drawer toggle — hamesha visible */ + :global(#mobileThemeToggle) { + display: flex !important; + visibility: visible !important; + } + + :global(#keyboard-trigger) { width: 2.2rem !important; height: 2.2rem !important; } + + /* Mobile pe saare buttons aur icons same size */ + @media (max-width: 640px) { + :global(.control-button), + :global(.mute-button), + :global(.help), + :global(#keyboard-trigger), + :global(.share-trigger-button), + :global(#headerThemeToggle) { + width: 2.2rem !important; + height: 2.2rem !important; + min-width: 2.2rem !important; + min-height: 2.2rem !important; + font-size: 0.85rem !important; + padding: 0 !important; + } + + :global(.font-icon), + :global(.color-icon), + :global(.bg-icon), + :global(.mute-icon) { + font-size: 0.85rem !important; + } + + :global(.img-icon) { + width: 0.85rem !important; + height: 0.85rem !important; + } + + :global(.controls-container svg), + :global(.share-trigger-button svg), + :global(#keyboard-trigger svg) { + width: 0.85rem !important; + height: 0.85rem !important; + } + + :global(#voice-dropdown) { + height: 2.2rem !important; + width: 5.5rem !important; + font-size: 0.7rem !important; + } + + :global(.share-button-container) { + display: flex !important; + align-items: center !important; + } + + /* Action group — mask bilkul hatao */ + :global(.action__group) { + overflow-x: auto !important; + overflow-y: visible !important; + scrollbar-width: none !important; + -ms-overflow-style: none !important; + scroll-behavior: smooth !important; + -webkit-mask-image: none !important; + mask-image: none !important; + } + + :global(.action__group::-webkit-scrollbar) { + display: none !important; + } + + /* Share popover — body level pe render hoga JS se */ + :global(.share-popover.mobile-teleported) { + position: fixed !important; + z-index: 99999 !important; + left: 0.5rem !important; + right: 0.5rem !important; + max-width: calc(100vw - 1rem) !important; + top: auto !important; + } + } + + + + diff --git a/src/pages/gallery/slider.astro b/src/pages/gallery/slider.astro index fe96dcfb..df9ca856 100644 --- a/src/pages/gallery/slider.astro +++ b/src/pages/gallery/slider.astro @@ -34,8 +34,8 @@ const entries = Object.entries(items); --- + -
@@ -107,17 +107,14 @@ const entries = Object.entries(items); // Navigation functions const navigateTo = (index) => { - // Validate index index = Math.max(0, Math.min(index, items.length - 1)); - // Play sound based on navigation direction if (index < activeIndex) { sounds.snap.play().catch((error) => console.error("Error playing snap sound:", error)); } else if (index > activeIndex) { sounds.pop.play().catch((error) => console.error("Error playing pop sound:", error)); } - // Update active state items[activeIndex].classList.remove("active"); details[activeIndex].style.opacity = "0"; details[activeIndex].style.transform = "translateY(20px)"; @@ -128,7 +125,6 @@ const entries = Object.entries(items); details[activeIndex].style.opacity = "1"; details[activeIndex].style.transform = "translateY(0)"; - // Center the item items[activeIndex].scrollIntoView({ behavior: "smooth", block: "nearest", @@ -136,11 +132,9 @@ const entries = Object.entries(items); }); }; - // Navigation buttons prevBtn.addEventListener("click", () => navigateTo(activeIndex - 1)); nextBtn.addEventListener("click", () => navigateTo(activeIndex + 1)); - // Keyboard navigation for buttons prevBtn.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); @@ -155,11 +149,8 @@ const entries = Object.entries(items); } }); - // Click on items items.forEach((item, index) => { item.addEventListener("click", () => navigateTo(index)); - - // Keyboard navigation for items item.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); @@ -168,7 +159,6 @@ const entries = Object.entries(items); }); }); - // Global keyboard navigation document.addEventListener("keydown", (e) => { if (e.key === "ArrowLeft") { e.preventDefault(); @@ -179,7 +169,6 @@ const entries = Object.entries(items); } }); - // Convert vertical scroll to horizontal scroller.addEventListener( "wheel", (e) => { diff --git a/src/pages/games/[age].astro b/src/pages/games/[age].astro index 949e14a5..2e1fc52b 100644 --- a/src/pages/games/[age].astro +++ b/src/pages/games/[age].astro @@ -56,4 +56,4 @@ const meta = { :global([data-theme="dark"]) .page-header h2 { color: #e2f0ff; } - \ No newline at end of file + diff --git a/src/pages/panel.astro b/src/pages/panel.astro index e47e53c7..7965f132 100644 --- a/src/pages/panel.astro +++ b/src/pages/panel.astro @@ -7,6 +7,7 @@ import SettingIcon from "@/assets/icons/settings.svg"; import Back from "@/components/BackButton.astro"; import SharePopover from "@/components/ShareButton.astro"; import MobileSplash from "@/components/MobileSplash.astro"; +import VirtualKeyboard from "@/components/VirtualKeyboard.astro"; const meta = { title: "Panel", @@ -17,101 +18,129 @@ const meta = { - + + +
-
+ + + +
- +
+ + +
+
+ +
+
+ + +
@@ -120,7 +149,9 @@ const meta = {
+ + + + diff --git a/src/pages/varnmala/listen.astro b/src/pages/varnmala/listen.astro index 6b3e9e20..7aefee0b 100644 --- a/src/pages/varnmala/listen.astro +++ b/src/pages/varnmala/listen.astro @@ -5,6 +5,7 @@ import BaseLayout from "@/layouts/Base"; import BackButton from "@/components/BackButton.astro"; import SharePopover from "@/components/ShareButton.astro"; import KeyboardTrigger from "@/components/KeyboardTrigger.astro"; +import VirtualKeyboard from "@/components/VirtualKeyboard.astro"; import Speaker from "@/components/Speaker.astro"; const meta = { @@ -33,6 +34,7 @@ const meta = {
+