Develop: fix UI issues (#169)

Author: xkeshav

abcd.code-workspace

@@ -45,7 +45,7 @@
     },
     "css.lint.unknownAtRules": "ignore",
     "debug.javascript.codelens.npmScripts": "never",
-    "diffEditor.ignoreTrimWhitespace": false,
+    "diffEditor.ignoreTrimWhitespace": true,
     "editor.accessibilitySupport": "off",
     "editor.bracketPairColorization.enabled": true,
     "editor.codeActionsOnSave": {

src/assets/styles/canvas.css

@@ -2,6 +2,7 @@
   --shade: light-dark(#fff, #25354fcc);
   --box: light-dark(#f5deb3, #0f172acc);
 }
+
 /* Global Styles for the Canvas Generator */
 .canvas-generator {
   min-height: 100vh;
@@ -38,7 +39,7 @@
   font-size: 1.2rem;
   width: 100%;
   background: var(--box);
-  color: #e2e8f0;
+  color: #4d6f9e;
   transition: border-color 0.3s ease;
   outline: none;
   box-sizing: border-box;
@@ -88,7 +89,8 @@
 /* New Styles for Combined Label and Checkbox */
 .canvas-generator .label-checkbox-container {
   display: flex;
-  justify-content: space-between; /* Pushes label to left and checkbox to right */
+  justify-content: space-between;
+  /* Pushes label to left and checkbox to right */
   align-items: center;
   width: 100%;
   margin-bottom: 1rem;
@@ -253,4 +255,4 @@
     padding: 0.75rem;
     max-height: 350px;
   }
-}
+}

src/assets/styles/common.css

@@ -11,6 +11,15 @@
   outline-offset: 0.5rem;
 }
 
+.rdb {
+  border: 1px solid red;
+}
+
+.odb {
+  outline: 1px solid red;
+}
+
+
 /* Utilities */
 .sr-only {
   position: absolute;
@@ -61,4 +70,4 @@
   text-size-adjust: auto;
   text-shadow: #fc0 1px 0 10px;
   text-wrap-style: balance;
-}
+}

src/assets/styles/nakshtra.css

@@ -31,4 +31,4 @@
   background-color: rgba(var(--card-bg), 0.5);
   border-left: 4px solid var(--primary-color);
   opacity: 0.8;
-}
+}

src/assets/styles/quote-designer.css

@@ -244,7 +244,8 @@ textarea.metallic-textarea {
 .right-header-buttons {
   display: flex;
   align-items: center;
-  gap: 0.7rem; /* Gap between buttons */
+  gap: 0.7rem;
+  /* Gap between buttons */
 }
 
 .design-container {
@@ -511,24 +512,26 @@ textarea.metallic-textarea {
 }
 
 /* Quote Preview Specific Styles */
-#quotePreview .quote-text {
+.quote-text {
   width: 100%;
   font-weight: normal;
   font-style: normal;
   color: light-dark(#000000, #ffffff);
   text-decoration: none;
   transition: all var(--transition-speed) ease;
+  min-height: 4rem;
+  border-bottom: 1px solid red;
 }
 
-#quotePreview .quote-text.bold {
+.bold {
   font-weight: bold;
 }
 
-#quotePreview .quote-text.italic {
+.italic {
   font-style: italic !important;
 }
 
-#quotePreview .quote-text.underline {
+.quote-text.underline {
   text-decoration: underline;
 }
 
@@ -619,7 +622,7 @@ textarea.metallic-textarea {
   transform: rotate(45deg);
 }
 
-.popover-details[open] > div {
+.popover-details[open]>div {
   padding: 0 1rem 1rem 1rem;
   margin-top: 0.5rem;
 }
@@ -664,7 +667,7 @@ textarea.metallic-textarea {
   transform: rotate(45deg);
 }
 
-.control-section[open] > div {
+.control-section[open]>div {
   padding: 0 1rem 1rem 1rem;
   margin-top: 0.5rem;
 }
@@ -861,4 +864,4 @@ textarea.metallic-textarea {
   #quotePreview {
     padding: 0.5rem;
   }
-}
+}

src/assets/styles/setting.css

@@ -7,7 +7,7 @@
     display: flex;
     justify-items: end;
     justify-content: center;
-    top: 4rem;
+    top: 6rem;
     right: 1.5rem;
     width: max-content;
     height: 3.5rem;
@@ -66,6 +66,7 @@
       padding: 1.5rem;
       cursor: pointer;
       transition: transform 300ms ease-in-out;
+      appearance: auto;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -128,7 +129,7 @@
         justify-content: center;
 
         :where(button, select) {
-          background: linear-gradient(90deg, rgb(17, 255, 247) 0%, rgb(39, 96, 241) 100%);
+          background: linear-gradient(90deg, rgb(17, 255, 247) 0%, rgb(165 39 241) 100%);
           transform: scaleZ(1) rotate(5deg);
           border-radius: 7px;
         }
@@ -147,4 +148,4 @@
       transform: scale(1.05) rotate(45deg);
     }
   }
-}
+}

src/components/NakshtraCard.astro

@@ -30,7 +30,7 @@ const {
     aspect-ratio: 1/1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     position: relative;
   }
 
@@ -48,13 +48,13 @@ const {
     align-items: center;
 
     img {
-      width: 20vw;
-      height: 20vw;
+      width: 100%;
+      aspect-ratio: 1;
     }
+
     h3 {
-      text-align: center;
       font-size: 2rem;
-      color: brown;
+      color: #df9f9f;
       margin: 0;
     }
 
@@ -65,9 +65,15 @@ const {
       width: 100%;
       text-align: left;
       p {
-        margin-bottom: 0.5rem;
+        padding: 0.5rem 1rem;
+        margin: 0;
         font-size: 1.5rem;
-        gap: 0.5rem;
+        &:nth-child(even) {
+          border-block: 1px dashed light-dark(#78818d, #123456);
+        }
+        & span {
+          padding-inline: 0.5rem;
+        }
       }
     }
   }
@@ -77,8 +83,8 @@ const {
   <img src=`/assets/images/nakshatra/${image}` alt={name} />
   <h3>{name}</h3>
   <div class="nakshatra-details">
-    <p><span title="ruling planet">🪐</span> {ruling_planet}</p>
-    <p><span title="deity">📿</span> {deity}</p>
-    <p><span title="symbol">࿊</span> {symbol}</p>
+    <p class="planet"><span title="ruling planet">🪐</span>{ruling_planet}</p>
+    <p class="deity"><span title="deity">📿</span>{deity}</p>
+    <p class="symbol"><span title="symbol">࿊</span>{symbol}</p>
   </div>
 </div>

src/components/SpeechButton.astro

@@ -0,0 +1,75 @@
+---
+// SpeechButtons.astro
+---
+
+<div class="controls">
+  <button id="startBtn" title="Start">&#x25B6;</button>
+  <button id="pauseBtn" title="Pause">&#10074;&#10074;</button>
+  <button id="resumeBtn" title="Resume">&#8635;</button>
+  <button id="stopBtn" title="Stop">&#9632;</button>
+</div>
+
+<style>
+  .controls {
+    display: flex;
+    gap: 8px;
+    margin-top: 10px;
+  }
+  button {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    line-height: 1;
+    border: 1px solid #ccc;
+    background: #f9f9f9;
+    cursor: pointer;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color 0.2s,
+      transform 0.1s;
+  }
+  button:hover {
+    background: #e0e0e0;
+  }
+  button:active {
+    background: #d0d0d0;
+    transform: scale(0.96);
+  }
+  textarea {
+    width: 100%;
+    max-width: 400px;
+    padding: 8px;
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+</style>
+
+<script type="module" is:inline>
+  let utterance;
+
+  document.getElementById("startBtn")?.addEventListener("click", () => {
+    const text = document.getElementById("text").value;
+    utterance = new SpeechSynthesisUtterance(text);
+    speechSynthesis.cancel();
+    speechSynthesis.speak(utterance);
+  });
+
+  document.getElementById("pauseBtn")?.addEventListener("click", () => {
+    if (speechSynthesis.speaking && !speechSynthesis.paused) {
+      speechSynthesis.pause();
+    }
+  });
+
+  document.getElementById("resumeBtn")?.addEventListener("click", () => {
+    if (speechSynthesis.paused) {
+      speechSynthesis.resume();
+    }
+  });
+
+  document.getElementById("stopBtn")?.addEventListener("click", () => {
+    speechSynthesis.cancel();
+  });
+</script>

src/mappers/profession.ts

@@ -6,9 +6,9 @@ const professionData = [
   { letter: "C", text: "Chef", emoji: "🍳", description: "Cooks delicious meals!" },
   { letter: "D", text: "Doctor", emoji: "⚕️", description: "Helps sick people!" },
   { letter: "E", text: "Engineer", emoji: "🛠️", description: "Builds cool machines!" },
-  { letter: "F", text: "Firefighter", emoji: "🚒", description: "Saves people fires!" },
+  { letter: "F", text: "Fire Fighter", emoji: "🚒", description: "Saves people fires!" },
   { letter: "G", text: "Gardener", emoji: "🌱", description: "Grows beautiful plants!" },
-  { letter: "H", text: "Hairdresser", emoji: "💇", description: "Cuts styles hair!" },
+  { letter: "H", text: "Hair Dresser", emoji: "💇", description: "Cuts styles hair!" },
   { letter: "I", text: "Inventor", emoji: "🧪", description: "Creates new things!" },
   { letter: "J", text: "Judge", emoji: "⚖️", description: "Makes fair decisions!" },
   { letter: "K", text: "Knight", emoji: "⚔️", description: "Old-time armor hero!" },

src/pages/canvas/quote.astro

@@ -13,6 +13,25 @@ const meta = {
 };
 ---
 
+<style>
+  .quote-text {
+    height: auto;
+    &::after {
+      content: "";
+      width: 5px;
+      height: 20px;
+      background: #ec7fff;
+      display: inline-block;
+      animation: cursor-blink 1.5s steps(2) infinite;
+    }
+  }
+  @keyframes cursor-blink {
+    0% {
+      opacity: 0;
+    }
+  }
+</style>
+
 <BaseLayout meta={meta}>
   <Fragment slot="header-right">
     <SharePopover title={meta.title} description={meta.description} />
@@ -86,7 +105,7 @@ const meta = {
       <div class="preview-container" id="previewContainer">
         <div id="aspectRatioWrapper" class="aspect-ratio-free">
           <div id="quotePreview">
-            <div class="quote-text"></div>
+            <div class="quote-text" contenteditable="plaintext-only"></div>
             <div class="author-name"></div>
           </div>
         </div>
@@ -444,7 +463,7 @@ const meta = {
       if (!preview || !quoteData || !quoteTextEl || !authorNameEl) return;
       quoteTextEl.textContent = quoteData.quote || "";
       authorNameEl.textContent = quoteData.author ? `- ${quoteData.author}` : "";
-      const selectedTextColor = controls.textColor?.value || "#000000";
+      const selectedTextColor = controls.textColor?.value || "white";
       quoteTextEl.style.color = selectedTextColor;
       authorNameEl.style.color = selectedTextColor;
       preview.style.fontFamily = controls.fontFamily?.value || "'Space Mono', monospace";