Add css

2025-11-18 21:32:22 +01:00
parent e45cc25759
commit de7fbd3c0b
1 changed files with 133 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -1,7 +1,134 @@
 <html>
+<style>
+    body {
+        background: #111;
+        color: #f2f2f2;
+        font-family: "Press Start 2P", monospace;
+        /* retro pixel font */
+        padding: 20px;
+        text-shadow: 0 0 8px #ff00ff;
+    }
+
+    /* Import pixel font */
+    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+    h1 {
+        color: #00eaff;
+        margin-top: 25px;
+        margin-bottom: 10px;
+        /* font-size: 18px; */
+        text-shadow: 0 0 6px #00eaff;
+    }
+
+    /* Retro select elements */
+    select {
+        background: #222;
+        color: #00f6ff;
+        border: 2px solid #00eaff;
+        padding: 6px 8px;
+        font-size: 12px;
+        font-family: "Press Start 2P", monospace;
+        border-radius: 4px;
+        cursor: pointer;
+        text-shadow: 0 0 6px #00eaff;
+        margin-right: 6px;
+    }
+
+    select:hover {
+        box-shadow: 0 0 10px #00eaff;
+    }
+
+    /* Buttons */
+    button {
+        background: #330044;
+        color: #ff00ff;
+        border: 2px solid #ff00ff;
+        padding: 8px 12px;
+        margin-top: 10px;
+        font-family: "Press Start 2P", monospace;
+        font-size: 12px;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: 0.15s;
+        text-shadow: 0 0 8px #ff00ff;
+    }
+
+    button:hover {
+        background: #550066;
+        box-shadow: 0 0 12px #ff00ff, 0 0 20px #ff00ff inset;
+    }
+
+    /* Car block layout */
+    .car-block {
+        margin-top: 15px;
+        padding: 12px;
+        background: #1a001f;
+        border: 2px solid #660099;
+        border-radius: 6px;
+        box-shadow: 0 0 12px #660099;
+        animation-name: appear_animation;
+        animation-duration: 0.5s;
+    }
+
+    .car-block.remove-anim {
+        animation: disappear_animation 0.35s forwards;
+    }
+
+    .car-select,
+    .skin-select {
+        min-width: 140px;
+    }
+
+    /* Car list container */
+    #carList {
+        margin-top: 20px;
+    }
+
+    /* Image previews */
+    .parent {
+        display: flex;
+        gap: 20px;
+        margin-top: 10px;
+    }
+
+    #preview,
+    #outline {
+        border: 2px solid #00eaff;
+        box-shadow: 0 0 12px #00eaff;
+    }
+
+    /* Glow for images on hover */
+    img:hover {
+        box-shadow: 0 0 16px #00eaff;
+    }
+
+    @keyframes appear_animation {
+        from {
+            opacity: 0;
+            transform: scale(0.95);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes disappear_animation {
+        from {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        to {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+    }
+</style>

 <body>
-    <h2>Choose a track</h2>
+    <h1>Choose a track</h1>

    <select id="trackSelect">
        {{tracks}}
@@ -18,7 +145,7 @@
        <img id="outline" src="" width="400">
    </div>

-    <h2>Choose cars</h2>
+    <h1>Choose cars</h1>
    <button id="addCarBtn">Add Car</button>
    <button id="applyCarsBtn">Change cars</button>

@@ -150,7 +277,10 @@
            const delBtn = document.createElement("button");
            delBtn.textContent = "Remove";
            delBtn.style.marginLeft = "10px";
-            delBtn.onclick = () => wrapper.remove();
+            delBtn.onclick = () => {
+                wrapper.classList.add("remove-anim");
+                setTimeout(() => wrapper.remove(), 350);
+            };

            const copyBtn = document.createElement("button");
            copyBtn.textContent = "Copy";