From de7fbd3c0ba38937a8a40d8d49e11de2cd3aae98 Mon Sep 17 00:00:00 2001
From: SemvdH <semmer99@gmail.com>
Date: Tue, 18 Nov 2025 21:32:22 +0100
Subject: [PATCH] Add css

---
 index.html | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 133 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index ed6bf41..762138a 100644
--- 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";
