feature/RZA-250103 - Add Keyboard Shortcut Navigation

src/assets/styles/board.css

@@ -76,4 +76,4 @@
       padding: 0 0.5rem;
     }
   }
-}
+}

src/assets/styles/shortcut.css

@@ -0,0 +1,158 @@
+/* Help Menu Styles */
+
+.help-popup {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+}
+.help-popup.is-open {
+  display: flex;
+}
+.help-menu {
+  color: #222;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
+  width: 95vw;
+  max-width: 700px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1.5px solid #e1e4e8;
+}
+.help-menu-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px 8px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  background: #f6f8fa;
+}
+.help-menu-header h2 {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 700;
+}
+.close-button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #586069;
+  padding: 0 4px;
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+.close-button:hover {
+  background: #eaecef;
+}
+.help-menu-content.grid {
+  display: flex;
+  gap: 0;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  padding: 16px 12px;
+  overflow-y: auto;
+  border-top: 1px solid #e1e4e8;
+  /* background: #f6f8fa; */
+  position: relative;
+}
+.shortcut-section {
+  flex: 1;
+  min-width: 0;
+  border: 1.5px solid #e1e4e8;
+  border-radius: 8px;
+  margin: 0 8px;
+  padding: 12px 8px 8px 8px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  font-size: 15px;
+  max-width: 320px;
+}
+.shortcut-section:first-child {
+  margin-left: 0;
+}
+.shortcut-section:last-child {
+  margin-right: 0;
+}
+.shortcut-section h3 {
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #e1e4e8;
+  padding-bottom: 6px;
+  color: #24292e;
+  border-radius: 6px 6px 0 0;
+}
+.shortcut-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: none;
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  font-size: 14px;
+}
+.shortcut-table tr {
+  height: 2.2em;         /* or use min-height if you prefer */
+}
+
+.shortcut-table td {
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+  border-bottom: 1px solid #e1e4e8;
+  padding: 0.35rem 0.7rem;
+  font-size: 14px;
+  background: transparent;
+  transition: background 0.15s;
+}
+.shortcut-table tr:last-child td {
+  border-bottom: none;
+}
+.shortcut-table tr:hover td {
+  background: #f0f3f6;
+}
+.shortcut-table kbd {
+  background: #f6f8fa;
+  border: 1px solid #d1d5da;
+  border-radius: 5px;
+  padding: 2px 7px;
+  font-size: 13px;
+  margin-left: 2px;
+  margin-right: 2px;
+  font-family: inherit;
+  box-shadow: 0 1px 0 #d1d5da;
+}
+.shortcut-table tr:not(:last-child) {
+  border-bottom: 1px solid #eee; /* optional: adds a subtle divider */
+}
+@media (max-width: 600px) {
+  .help-menu-content.grid {
+    flex-direction: column;
+    gap: 12px;
+    padding: 10px 2px;
+  }
+  .shortcut-section {
+    margin: 0 0 12px 0;
+    border-radius: 8px;
+    max-width: 100%;
+  }
+}
+
+.keys {
+  text-align: end;
+}
+.rows{
+  margin:3px
+}

src/assets/styles/signup.css

@@ -55,6 +55,7 @@
   --signup-button-social-bg-hover: #f0f2f5;
 }
 
+
 * {
   margin: 0;
   padding: 0;
@@ -127,6 +128,7 @@
   border-radius: 25px;
 }
 
+
 .form-only .signup-left {
   display: none;
 }
@@ -144,6 +146,10 @@
 }
 
 .arrow {
+.slider-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
   margin-right: 5px;
 }
 
@@ -187,7 +193,6 @@
   left: 0;
   width: 100%;
   padding: 0 clamp(1.5rem, 5vw, 3rem);
-  color: #000;
   text-align: center;
 }
 

src/components/PoemCard.astro

@@ -1,4 +1,5 @@
 ---
+
 import OpenCard from "@/assets/icons/opencard.svg";
 import "@/assets/styles/poemcard.css";
 export interface Props {
@@ -9,6 +10,7 @@ export interface Props {
 const { title, lines, cute_emoji } = Astro.props;
 ---
 
+
 <div class="card-wrapper">
   <div class="poem-card" onclick={`showPoem("${title}", ${JSON.stringify(lines)})`}>
     <div class="emoji-content">

src/components/Shortcut.astro

@@ -0,0 +1,184 @@
+---
+import "@/assets/styles/shortcut.css";
+---
+
+<div class="container__shortcut">
+  <button id="help-popover-btn" style="display:none"></button>
+  <div id="help-popup" class="help-popup">
+    <div class="help-menu">
+      <div class="help-menu-header">
+        <h2>Keyboard Shortcuts</h2>
+        <button id="close-help" class="close-button" aria-label="Close help menu">×</button>
+      </div>
+      <div class="help-menu-content grid">
+        <div class="shortcut-section" id="main-shortcut-section">
+          <h3>Main Navigation</h3>
+          <div id="main-shortcut-table-wrapper" style="max-height:unset;overflow:unset;transition:none;">
+            <table class="shortcut-table" id="main-shortcut-table">
+              <tbody id="main-shortcut-tbody">
+                <!-- Shortcuts will be rendered here by script -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="shortcut-section">
+          <h3>General & Other</h3>
+          <table class="shortcut-table">
+            <tbody id="other-shortcut-tbody">
+              <!-- Other shortcuts will be rendered here by script -->
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    // Balanced, limited shortcuts for a clean, non-scrollable popup
+    const mainShortcuts = [
+      { label: "Go to Home", keys: ["G", "H"], path: "/" },
+      { label: "Go to About", keys: ["G", "A"], path: "/about" },
+      { label: "Go to Varnmala", keys: ["G", "V"], path: "/varnmala" },
+      { label: "Go to Panel", keys: ["G", "P"], path: "/panel" },
+      { label: "Go to Alphabets", keys: ["G", "L"], path: "/alphabets" },
+      { label: "Go to Numbers", keys: ["G", "N"], path: "/numbers" },
+      { label: "Go to Game", keys: ["G", "G"], path: "/crossword" },
+      { label: "Go to Map", keys: ["G", "M"], path: "/map" },
+      { label: "Go to Glossary", keys: ["G", "R"], path: "/glossary" },       
+    ];
+    const otherShortcuts = [
+      { label: "Go to FAQ", keys: ["G", "Q"], path: "/faq" },
+      { label: "Go to Blog", keys: ["G", "B"], path: "/blog" },
+      { label: "Go to Contact", keys: ["C", "I"], path: "/contact" },
+      { label: "Go to Support", keys: ["G", "S"], path: "/support" },
+      { label: "Go to Canvas", keys: ["G", "C"], path: "/canvas" },
+      { label: "Go to Math", keys: ["G", "T"], path: "/math" },
+      { label: "Go to Nakshtra", keys: ["G", "K"], path: "/nakshtra" }, 
+      { label: "Show this help", keys: ["?"], path: null },
+      { label: "Close this help", keys: ["Esc"], path: null },
+    ]
+    const popup = document.getElementById("help-popup");
+    const openBtn = document.getElementById("help-popover-btn");
+    const closeBtn = document.getElementById("close-help");
+    const mainShortcutTbody = document.getElementById("main-shortcut-tbody");
+    const mainShortcutTableWrapper = document.getElementById("main-shortcut-table-wrapper");
+    let firstKey: any = null;
+    let keyTimeout: any = null;
+    function renderShortcuts() {
+      if (!mainShortcutTbody) return;
+      mainShortcutTbody.innerHTML = "";
+      mainShortcuts.forEach(function (shortcut) {
+        const tr = document.createElement("tr");
+        const tdLabel = document.createElement("td");
+        tdLabel.textContent = shortcut.label;
+        const tdKeys = document.createElement("td");
+        tdKeys.classList.add("keys");
+        shortcut.keys.forEach(function (k) {
+          const kbd = document.createElement("kbd");
+          kbd.textContent = k;
+          tdKeys.appendChild(kbd);
+        });
+        tr.appendChild(tdLabel);
+        tr.appendChild(tdKeys);
+        mainShortcutTbody.appendChild(tr);
+      });
+      // Render other shortcuts
+      const otherTbody = document.getElementById("other-shortcut-tbody");
+      if (otherTbody) {
+        otherTbody.innerHTML = "";
+        otherShortcuts.forEach(function (shortcut) {
+          const tr = document.createElement("tr");
+          const tdLabel = document.createElement("td");
+          tdLabel.textContent = shortcut.label;
+          const tdKeys = document.createElement("td");
+          tdKeys.classList.add("keys");
+          shortcut.keys.forEach(function (k) {
+            const kbd = document.createElement("kbd");
+            kbd.textContent = k;
+            tdKeys.appendChild(kbd);
+          });
+          tr.appendChild(tdLabel);
+          tr.appendChild(tdKeys);
+          otherTbody.appendChild(tr);
+        });
+      }
+    }
+
+    renderShortcuts();
+    if (mainShortcutTableWrapper) {
+      mainShortcutTableWrapper.style.maxHeight = "100%";
+      mainShortcutTableWrapper.style.overflow = "auto";
+    }
+
+    function openPopup() {
+      if (popup) popup.classList.add("is-open");
+    }
+    function closePopup() {
+      if (popup) popup.classList.remove("is-open");
+    }
+    if (openBtn) openBtn.addEventListener("click", openPopup);
+    if (closeBtn) closeBtn.addEventListener("click", closePopup);
+    document.addEventListener("keydown", function (e) {
+      const tag = document.activeElement?.tagName || "";
+      if (["INPUT", "TEXTAREA"].includes(tag)) return;
+      if (e.key === "?") {
+        e.preventDefault();
+        openPopup();
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closePopup();
+        return;
+      }
+
+      // Two-key sequence logic
+      if (!firstKey) {
+        // Wait for first key
+        for (const shortcut of mainShortcuts) {
+          if (e.key.toUpperCase() === shortcut.keys[0]) {
+            firstKey = shortcut.keys[0];
+            if (keyTimeout) clearTimeout(keyTimeout);
+            keyTimeout = setTimeout(() => {
+              firstKey = null;
+            }, 1000);
+            return;
+          }
+        }
+
+        for (const shortcut of otherShortcuts) {
+          if (e.key.toUpperCase() === shortcut.keys[0]) {
+            firstKey = shortcut.keys[0];
+            if (keyTimeout) clearTimeout(keyTimeout);
+            keyTimeout = setTimeout(() => {
+              firstKey = null;
+            }, 1000);
+            return;
+          }
+        }
+      } else {
+        // Wait for second key
+        for (const shortcut of mainShortcuts) {
+          if (firstKey === shortcut.keys[0] && e.key.toUpperCase() === shortcut.keys[1]) {
+            window.location.href = shortcut.path;
+            firstKey = null;
+            if (keyTimeout) clearTimeout(keyTimeout);
+            return;
+          }
+        }
+        for (const shortcut of otherShortcuts) {
+          if (firstKey === shortcut.keys[0] && e.key.toUpperCase() === shortcut.keys[1]) {
+            if (shortcut.path) window.location.href = shortcut.path;
+            firstKey = null;
+            if (keyTimeout) clearTimeout(keyTimeout);
+            return;
+          }
+        }
+        firstKey = null;
+        if (keyTimeout) clearTimeout(keyTimeout);
+      }
+    });
+  });
+</script>