Cool select UI

fclauncher/frontend/src/Testpage.svelte

@@ -6,16 +6,81 @@
 
 
 <main>
-    <div class="testLinks">
-        {#each $instances as i}
-            <li>{i}</li>
-        {/each}
+    <div class="container">
+        <div class="tile-group">
+            {#each $instances as i}
+                <div class="input-container">
+                    <input id={i} type="radio" name="radio">
+                    <div class="radio-tile">
+                        <!--icon goes here later-->
+                        <label for={i}>{i}</label>
+                    </div>
+                </div>
+            {/each}
+        </div>
     </div>
 </main>
 <style>
-.testLinks{
-    margin-top: 16rem;
-    margin-left: 3rem;
+* {
+   box-sizing: border-box;
+    font-family: sans-serif;
+    --text-primary: #b6b6b6;
+		--text-secondary: #ececec;
+		--bg-primary: #23232e;
+		--bg-secondary: #141418;
+}
+body{
+    background-color: var(--bg-secondary);   
+}
+.container{
+   display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+.tile-group{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+.input-container{
+    position: relative;
+    height: 7rem;
+    width: 7rem;
+    margin: 0.5rem;
+}
+.input-container input{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    margin-left: -3.5rem;
+    z-index: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+.input-container .radio-tile{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    border: 2px solid purple;
+    border-radius: 8px;
+    transition: all 300ms ease;
+}
+.input-container label{
+    color: purple;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+input:checked + .radio-tile{
+    background-color: purple;
+    box-shadow: 0 0 12px purple;
+}
+input:hover + .radio-tile{
+    box-shadow: 0 0 12px purple;
+}
+input:checked + .radio-tile label{
+    color: var(--text-primary);
 }
-
 </style>