improved panel page ui

Author: Ciphrox

src/assets/styles/panel.css

@@ -33,33 +33,34 @@
     gap: 1rem;
   }
 
-  & label {
+  & label .icon {
     width: 3rem;
     height: 3rem;
     border-radius: 0.5rem;
-    display: grid;
-    place-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: var(--bg);
     cursor: pointer;
     transition: 0.2s;
     position: relative;
   }
 
-  & label:hover,
-  & label:focus-within {
+  & label:focus-within,
+  & .icon:hover {
     background: var(--primary);
   }
 
-  & input[type="radio"]:focus-visible + .icon {
+  & input[type="radio"]:focus-visible+.icon {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
-    border-radius: 0.25rem;
+    border-radius: 0.5rem;
   }
 
-  & input[type="radio"]:checked + .icon {
+  & input[type="radio"]:checked+.icon {
     color: white;
     background: var(--primary);
-    border-radius: 0.25rem;
+    border-radius: 0.5rem;
     padding: 0.25rem;
   }
 
@@ -79,7 +80,7 @@
     display: none;
   }
 
-  & input[type="radio"]:checked + .icon {
+  & input[type="radio"]:checked+.icon {
     color: white;
   }
 
@@ -125,7 +126,7 @@
     perspective: 1000px;
     margin: auto;
 
-    & > letter-panel {
+    &>letter-panel {
       display: block;
       width: 100%;
       height: 100%;
@@ -147,58 +148,64 @@
     width: var(--panel-width);
     height: var(--panel-height);
     backface-visibility: visible;
-    display: grid;
-    place-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 3rem;
     color: var(--text);
     background: var(--surface);
     border-radius: 0.5rem;
     box-shadow: 0 2px 8px var(--shadow);
-    transition: transform 0.6s;
+    transition: transform 0.6s, font-size 0.6s, background-color 0.6s;
     opacity: 0.7;
   }
 
   & .panel__cell:nth-child(10n + 1) {
-    background: var(--color-1);
+    background-color: #3b82f6;
   }
 
   & .panel__cell:nth-child(10n + 2) {
-    background: var(--color-2);
+    background-color: #8b5cf6;
   }
 
   & .panel__cell:nth-child(10n + 3) {
-    background: var(--color-3);
+    background-color: #ec4899;
   }
 
   & .panel__cell:nth-child(10n + 4) {
-    background: var(--color-4);
+    background-color: #f43f5e;
   }
 
   & .panel__cell:nth-child(10n + 5) {
-    background: var(--color-5);
+    background-color: #f97316;
   }
 
   & .panel__cell:nth-child(10n + 6) {
-    background: var(--color-6);
+    background-color: #84cc16;
   }
 
   & .panel__cell:nth-child(10n + 7) {
-    background: var(--color-7);
+    background-color: #06b6d4;
   }
 
   & .panel__cell:nth-child(10n + 8) {
-    background: var(--color-8);
+    background-color: #6366f1;
   }
 
   & .panel__cell:nth-child(10n + 9) {
-    background: var(--color-9);
+    background-color: #0ea5e9;
   }
 
   & .panel__cell:nth-child(10n + 0) {
-    background: var(--color-10);
+    background-color: #14b8a6;
+  }
+
+  & .panel__cell.front {
+    font-size: 10rem;
+    background-color: black;
+    transition: font-size 0.6s, background-color 0.6s;
   }
 
-  /* Add rotation values back */
   & .panel__cell:nth-child(1) {
     --ry: var(--ry, 0deg);
   }
@@ -238,4 +245,4 @@
   & .panel__cell:nth-child(10) {
     --ry: 360deg;
   }
-}
+}

src/pages/panel.astro

@@ -165,6 +165,17 @@ import "@/assets/styles/common.css";
           cell.style.transform = transformString;
         });
         this.rotatePanel({ by: this.#orientation });
+        this.updateFrontCell(); // update front cell styling
+      }
+
+      updateFrontCell() {
+        const cells = this.#panel.querySelectorAll(".panel__cell") as NodeListOf<HTMLElement>;
+        if (!cells.length) return;
+        cells.forEach((cell) => cell.classList.remove("front"));
+        const count = cells.length;
+        const normalizedIndex = ((this.#selectedIndex % count) + count) % count;
+        const frontIndex = (count - normalizedIndex) % count;
+        cells[frontIndex].classList.add("front");
       }
 
       rotatePanel({ by = "X" }) {