merged letter page to english

Author: Ciphrox

src/assets/styles/english.css

@@ -17,4 +17,81 @@
   padding: 0;
   color: var(--letter__txt--2);
   transition: color 0.5s ease-in;
+}
+
+/* Controls styles */
+.controls {
+  position: relative;
+  background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
+  padding: 1rem;
+  z-index: 100;
+  display: flex;
+  justify-content: space-around;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  color: var(--text);
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  accent-color: var(--primary);
+}
+
+.control-group label {
+  font-weight: bold;
+  color: var(--text);
+}
+
+.control-group select,
+.control-group button {
+  padding: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background-color: var(--background);
+  color: var(--text);
+}
+
+.control-group button {
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.control-group button:hover,
+.control-group select:hover {
+  background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%);
+  border-color: var(--primary);
+}
+
+/* Background styles */
+.bg-gradient1 {
+  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+}
+
+.bg-gradient2 {
+  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);
+}
+
+.no-background {
+  background: none !important;
+}
+
+@keyframes letterPop {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }

src/pages/english.astro

@@ -11,13 +11,47 @@ import Help from "@/components/Help.astro";
       description="Just press any letter fron keyboard and it display the letter and it's relative word in clear way and if you type again it will change the color"
     />
   </Fragment>
-  <article class="container__hindi">
+  <div class="controls" id="controls">
+    <div class="control-group">
+      <label>Background:</label>
+      <select id="bgSelector">
+        <option value="none">None</option>
+        <option value="gradient1">Gradient 1</option>
+        <option value="gradient2">Gradient 2</option>
+        <option value="pattern1">Pattern 1</option>
+      </select>
+      <button id="toggleBg">Toggle Background</button>
+    </div>
+
+    <div class="control-group">
+      <label>Font:</label>
+      <select id="fontSelector">
+        <option value="Arial">Arial</option>
+        <option value="Georgia">Georgia</option>
+        <option value="Times New Roman">Times New Roman</option>
+      </select>
+      <input type="color" id="colorPicker" value="#000000" />
+    </div>
+  </div>
+  <article class="container__hindi" id="letterContainer">
     <div class="letter">A</div>
   </article>
   <script>
     import { colorBox, isAlphabet, random } from "@/utils/utils.js";
 
     const letterDiv = document.querySelector(".letter") as HTMLDivElement;
+    const controls = document.getElementById("controls") as HTMLElement;
+    const letterContainer = document.getElementById("letterContainer") as HTMLElement;
+    const bgSelector = document.getElementById("bgSelector") as HTMLInputElement;
+    const fontSelector = document.getElementById("fontSelector") as HTMLInputElement;
+    const colorPicker = document.getElementById("colorPicker") as HTMLInputElement;
+    const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement;
+
+    // Event Listeners
+    bgSelector?.addEventListener("change", updateBackground);
+    fontSelector?.addEventListener("change", updateFont);
+    colorPicker?.addEventListener("change", updateColor);
+    toggleBg?.addEventListener("click", toggleBackground);
 
     document.addEventListener(
       "keydown",
@@ -27,7 +61,7 @@ import Help from "@/components/Help.astro";
         const { key, keyCode } = e;
         if (isAlphabet(keyCode)) {
           const keyCapital = key.toUpperCase();
-          drawLetter(keyCapital, color);
+          drawLetter(keyCapital, colorPicker.value || color);
         }
       },
       false
@@ -36,6 +70,39 @@ import Help from "@/components/Help.astro";
     const drawLetter = (letter: string, color = "pink") => {
       letterDiv.innerHTML = letter;
       letterDiv.style.color = color;
+      letterDiv.style.animation = "letterPop 0.3s ease-out";
+      setTimeout(() => {
+        letterDiv.style.animation = "";
+      }, 300);
     };
+
+    function updateBackground() {
+      letterContainer.className = "container__hindi";
+      if (bgSelector.value !== "none") {
+        letterContainer.classList.add(`bg-${bgSelector.value}`);
+      }
+    }
+
+    function updateFont() {
+      letterDiv.style.fontFamily = fontSelector.value;
+    }
+
+    function updateColor() {
+      letterDiv.style.color = colorPicker.value;
+    }
+
+    function toggleBackground() {
+      letterContainer.classList.toggle("no-background");
+    }
+
+    // Intersection Observer for sticky header
+    const observer = new IntersectionObserver(
+      ([e]) => {
+        controls.classList.toggle("sticky", e.intersectionRatio < 1);
+      },
+      { threshold: [1] }
+    );
+
+    observer.observe(controls);
   </script>
 </BaseLayout>

src/pages/letter.astro

@@ -67,12 +67,6 @@ export const NavbarLinks: LinkProps[] = [
     path: "/map",
     isActive: true
   },
-  {
-    name: "Letter",
-    title: "Letter Pad",
-    path: "/letter",
-    isActive: true
-  },
   {
     name: "Feedback",
     title: "Feedback Form",