More levels; jump button; better stats (#249)

Author: jbampton

src/_includes/footer.njk

@@ -84,6 +84,26 @@
             <span class="opacity-50">5S</span>
         </button>
     </div>
+<div class="mt-4 pt-4 border-t border-white/10">
+    <label class="text-[8px] text-white/60 uppercase tracking-widest mb-1.5 block font-bold">Coordinate Jump (0-200)</label>
+    <div class="flex gap-2">
+        <input
+            type="number"
+            id="jump-lvl"
+            placeholder="0"
+            min="0"
+            max="200"
+            style="background-color: #000 !important; color: #00ffcc !important; border: 1px solid #00ffcc !important; width: 60px !important; height: 30px !important; font-size: 14px !important; padding: 0 5px !important; border-radius: 4px !important;"
+        >
+        <button
+            onclick="jumpToLevel()"
+            class="flex-1 bg-accent/20 hover:bg-accent/40 text-accent text-[10px] font-black py-1 rounded transition-all border border-accent/40 uppercase"
+            style="height: 30px !important;"
+        >
+            EXECUTE
+        </button>
+    </div>
+</div>
 
     <div class="flex gap-1.5 pt-2 border-t border-white/10">
         <button id="self-destruct-btn" onclick="startSelfDestruct()" class="flex-1 py-1.5 bg-red-600/10 hover:bg-red-600/30 text-red-500 text-[8px] border border-red-500/30 rounded flex justify-center gap-1">

src/assets/css/style.css

@@ -422,3 +422,61 @@ body[data-level="6"]::after {
     transform: scale(1.3);
     color: white !important;
 }
+#jump-lvl {
+    font-family: 'Courier New', monospace;
+    text-shadow: 0 0 5px var(--accent);
+}/* Ensure the text inside the jump box is always visible */
+#jump-lvl {
+    appearance: textfield; /* Removes default arrows */
+    -webkit-appearance: none;
+    line-height: 30px !important;
+}
+
+#jump-lvl::placeholder {
+    color: rgba(0, 255, 204, 0.3) !important;
+}
+
+/* Force standard text color even on focus */
+#jump-lvl:focus {
+    outline: 2px solid #00ffcc !important;
+    background-color: #000 !important;
+    color: #00ffcc !important;
+}
+/* Base Force Aura Animation */
+@keyframes force-pulse {
+    0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 5px var(--glow-color)); }
+    50% { transform: scale(1.1); filter: brightness(1.4) drop-shadow(0 0 20px var(--glow-color)); }
+    100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 5px var(--glow-color)); }
+}
+
+/* The Active Class */
+.force-glow {
+    --glow-color: #38bdf8; /* Default Jedi Blue */
+    position: relative;
+    z-index: 10;
+    transition: all 0.3s ease;
+    animation: force-pulse 5s infinite ease-in-out;
+}
+
+/* Sith Variant (Red Glow) */
+[data-level^="13"], [data-level^="14"], [data-level^="15"] .force-glow {
+    --glow-color: #ef4444; /* Sith Red */
+}
+
+/* Force Shadow ripple for the container */
+.force-glow::after {
+    content: "";
+    position: absolute;
+    inset: -10px;
+    border-radius: 50%;
+    background: var(--glow-color);
+    opacity: 0.2;
+    filter: blur(15px);
+    z-index: -1;
+}
+#level-progress {
+    height: 100%;
+    width: 0%; /* Initial state */
+    transition: width 0.3s ease-in-out; /* This makes it "fill" instead of "jump" */
+    box-shadow: 0 0 10px var(--accent);
+}