Add rotateMirror to rotate element 45°

Add a small utility function in web/assets/js/index.js that increments an element's CSS rotation by 45 degrees. The function reads the element's inline transform (handling an empty value), parses the current rotation angle modulo 360, and sets the new rotate(angle+45) value.

web/assets/css/index.css

@@ -1,244 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
-
-* {
-    --clr-light-a0: #ffffff;
-    --clr-light-a10: #f4f4f4;
-    --clr-light-a20: #e0e0e0;
-    --clr-light-a30: #c2c2c2;
-    --clr-light-a40: #a3a3a3;
-    --clr-light-a50: #858585;
-    --clr-dark: #000000;
-
-    --clr-surface-a0: #FFF6E5;
-    --clr-surface-a10: #f7f7f7;
-    --clr-surface-a20: #DADEEF;
-    --clr-surface-a30: #e0e0e0;
-    --clr-surface-a40: #d1d1d1;
-    --clr-surface-a50: #c2c2c2;
-    box-sizing: border-box;
-}
-
-html {
-    font-size: 100%;
-}
-
-body {
-    background-color: var(--clr-surface-a0);
-    font-family: 'Inter', sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-.hero {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    gap: 3rem;
-    padding: 2rem clamp(1rem, 4vw, 3rem);
-    box-sizing: border-box;
-    background: var(--clr-surface-a10);
-}
-
-.adsbanner {
-    position: absolute;
-    top: 50%;
-    left: clamp(0.75rem, 3vw, 2.5rem);
-    transform: translateY(-50%);
-    z-index: 5;
-    width: clamp(160px, 22vw, 300px);
-    aspect-ratio: 9 / 16;
-    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
-}
-
-.adsbanner.is-hidden {
-    display: none;
-}
-
-.leftadsbanner {
-    position: absolute;
-    top: 50%;
-    right: clamp(0.75rem, 3vw, 2.5rem);
-    transform: translateY(-50%);
-    z-index: 5;
-    width: clamp(160px, 22vw, 300px);
-    aspect-ratio: 9 / 16;
-}
-
-.hero-content {
-    max-width: 90vw;
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: var(--clr-surface-a20);
-    border-radius: 1.5rem;
-    padding: 2rem clamp(2rem, 8vw, 10rem);
-    box-shadow: 0px 0px 27px 14px rgba(0,0,0,0.2);
-}
-
-.hero-content-text {
-    width: 100%;
-}
-
-.hero h1 {
-    color: var(--clr-dark);
-    font-size: clamp(2.5rem, 7vw, 4rem);
-    margin: 0 0 1rem 0;
-    line-height: 1.1;
-    word-break: break-word;
-    text-shadow: none;
-}
-
-.hero-content button {
-    margin-top: 2rem;
-    align-self: center;
-}
-
-.hero img {
-    max-width: 400px;
-    width: 35vw;
-    min-width: 180px;
-    height: auto;
-    border-radius: 1.5rem;
-    box-shadow: 0 6px 32px rgba(0,0,0,.10);
-    flex-shrink: 1;
-    background: var(--clr-surface-a0);
-}
-
-/* --- RESPONSIVE HERO-PLAY-BUTTON FIXES --- */
-
-@media (max-width: 900px) {
-    .hero {
-        flex-direction: column;
-        text-align: center;
-        gap: 2rem;
-        padding: 1.5rem;
-    }
-    .hero-content {
-        max-width: 100vw;
-        text-align: center;
-        padding: 2rem;
-    }
-    .hero-content {
-        align-items: center;
-    }
-    .adsbanner {
-        left: 1rem;
-        width: clamp(130px, 24vw, 220px);
-    }
-    .leftadsbanner {
-        right: 1rem;
-        width: clamp(130px, 24vw, 220px);
-    }
-    .hero img {
-        max-width: 70vw;
-        min-width: 0;
-    }
-    .hero-play-button {
-        padding: 1rem 4vw;
-        font-size: 1.1rem;
-        min-width: min(220px, 70vw);
-        max-width: 90vw;
-    }
-    .hero-play-button svg {
-        width: 2em;
-        height: 1em;
-        min-width: 1.25em;
-        min-height: 1em;
-        margin-right: 0.5em;
-        flex-shrink: 0;
-    }
-}
-
-@media (max-width: 600px) {
-    .hero {
-        min-height: 70vh;
-        padding: 0.5rem;
-    }
-    .hero-content {
-        padding: 1.5rem;
-    }
-    .hero h1 {
-        font-size: clamp(2rem, 9vw, 2.5rem);
-    }
-    .hero p {
-        font-size: clamp(1rem, 5vw, 1.15rem);
-    }
-    .adsbanner {
-        top: 1rem;
-        left: 0.75rem;
-        transform: none;
-        width: clamp(110px, 30vw, 170px);
-        border-radius: 1rem;
-    }
-    .leftadsbanner {
-        right: 0.75rem;
-        width: clamp(110px, 30vw, 170px);
-        border-radius: 1rem;
-    }
-    .hero img {
-        max-width: 100%;
-        border-radius: 1rem;
-        box-shadow: 0 2px 12px rgba(0,0,0,.07);
-    }
-    .hero-play-button {
-        padding: 0.85rem 3vw;
-        min-width: min(120px, 92vw);
-        max-width: 96vw;
-        font-size: 1rem;
-    }
-    .hero-play-button svg {
-        width: 1.3em;
-        height: 1em;
-        min-width: 1em;
-        min-height: 1em;
-        margin-right: 0.45em;
-        flex-shrink: 0;
-    }
-}
-
-.hero-play-button {
-  font-family: inherit;
-  font-size: 20px;
-  background: #8ea3fd;
-  color: white;
-  padding: 1rem 10rem;
-  display: flex;
-  align-items: center;
-  justify-content: center; /* Ensure SVG/button content is horizontally centered */
-  border: none;
-  border-radius: 50px;
-  overflow: hidden;
-  transition: all 0.2s;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(30, 80, 255, 0.10);
-  /* Button grows/shrinks with container at low widths */
-  width: 100%;
-  max-width: 500px;
-  min-width: 180px;
-  box-sizing: border-box;
-}
-.hero-play-button:hover {
-  background: #7286e0;
-  transform: translateY(-2px);
-}
-
-.hero-play-button:active {
-  transform: scale(0.95);
-}
-
-.hero-play-button svg {
-  width: 2em;
-  height: 1em;
-  min-width: 1.2em;
-  min-height: 1em;
-  margin-right: 0.6em;
-  color: var(--clr-surface-a0);
-  flex-shrink: 0;
-  flex-grow: 0;
-  display: inline-block;
-  vertical-align: middle;
-}

web/assets/js/index.js

@@ -0,0 +1,9 @@
+function rotateMirror(mirror) {
+    let angle = 0;
+    if (mirror.style.transform == "") {
+        angle = 0;
+    } else {
+        angle = parseInt(mirror.style.transform.split("(")[1].split("deg")[0])%360;
+    }
+    mirror.style.transform = `rotate(${angle+45}deg)`;
+}