From f9075b4fe34c1ef8e96b1798703e1a2d9fc894dc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 7 Apr 2026 00:40:02 +0000
Subject: [PATCH] Spice up HTML page styling with accent colors, drop shadow,
 and glow effects

Agent-Logs-Url: https://github.com/Open3DLab/mikebase/sessions/b79765b4-5ed8-4e74-8826-9b1bd18ee368

Co-authored-by: Ganonmaster <168445+Ganonmaster@users.noreply.github.com>
---
 src/templates/index.html | 66 +++++++++++++++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/templates/index.html b/src/templates/index.html
index 72abe77..e18bfe3 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -6,18 +6,62 @@
 <title>MIKEBASE</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: system-ui, -apple-system, sans-serif; background: #1a1a2e; color: #eee; }
-  nav { height: 60px; display: flex; align-items: center; padding: 0 20px; background: #16213e; }
-  nav .logo { font-size: 1.4rem; letter-spacing: 0.05em; color: #fff; }
-  nav .logo strong { font-weight: 700; }
+  body { font-family: system-ui, -apple-system, sans-serif; background: #222222; color: #ffffff; }
+  nav {
+    height: 60px; display: flex; align-items: center; padding: 0 24px;
+    background: #171717; border-bottom: 2px solid #4a0000;
+    box-shadow: 0 2px 12px rgba(74, 0, 0, 0.5);
+    position: relative; z-index: 10;
+  }
+  nav .logo { font-size: 1.5rem; letter-spacing: 0.08em; color: #ffffff; }
+  nav .logo strong { font-weight: 700; color: #ff4d4d; text-shadow: 0 0 8px rgba(74, 0, 0, 0.8); }
   nav .logo span { font-weight: 300; }
-  .grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px; justify-content: center; }
-  .emote { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 8px; border-radius: 8px; transition: background 0.15s; }
-  .emote:hover { background: rgba(255,255,255,0.08); }
-  .emote img { width: 64px; height: 64px; object-fit: contain; }
-  .emote .code { font-size: 0.7rem; margin-top: 4px; color: #aaa; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
-  .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #0f3460; color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
-  .toast.show { opacity: 1; }
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .grid { display: flex; flex-wrap: wrap; gap: 14px; padding: 24px; justify-content: center; }
+  .emote {
+    display: flex; flex-direction: column; align-items: center;
+    cursor: pointer; padding: 10px; border-radius: 10px;
+    border: 1px solid transparent;
+    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
+    animation: fadeInUp 0.4s ease both;
+  }
+  .emote:hover {
+    background: rgba(74, 0, 0, 0.15);
+    border-color: #4a0000;
+    box-shadow: 0 0 14px rgba(74, 0, 0, 0.6);
+    transform: translateY(-2px);
+  }
+  .emote:active {
+    transform: scale(0.95);
+    box-shadow: 0 0 20px rgba(74, 0, 0, 0.9);
+  }
+  .emote img {
+    width: 64px; height: 64px; object-fit: contain;
+    transition: filter 0.25s ease, transform 0.25s ease;
+  }
+  .emote:hover img {
+    filter: drop-shadow(0 0 6px rgba(74, 0, 0, 0.7));
+    transform: scale(1.08);
+  }
+  .emote .code {
+    font-size: 0.7rem; margin-top: 6px; color: #999;
+    max-width: 80px; overflow: hidden; text-overflow: ellipsis;
+    white-space: nowrap; text-align: center;
+    transition: color 0.25s ease;
+  }
+  .emote:hover .code { color: #ff4d4d; }
+  .toast {
+    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
+    background: #4a0000; color: #ffffff; padding: 10px 20px; border-radius: 8px;
+    font-size: 0.85rem; opacity: 0;
+    box-shadow: 0 0 16px rgba(74, 0, 0, 0.7);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    pointer-events: none;
+  }
+  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
 </style>
 </head>
 <body>