Add emotes HTML page at /, health endpoint, Dockerfile, and Docker workflow

Agent-Logs-Url: https://github.com/Open3DLab/mikebase/sessions/349bd27e-61d5-40d4-b4d1-0c552a78a9e2 Co-authored-by: Ganonmaster <168445+Ganonmaster@users.noreply.github.com>
2026-04-07 00:21:42 +00:00
parent 0fd023c9fd
commit 79dc56d179
7 changed files with 183 additions and 3 deletions
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<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; }
+  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; }
+</style>
+</head>
+<body>
+<nav>
+  <div class="logo"><strong>MIKE</strong><span>BASE</span></div>
+</nav>
+<div class="grid" id="grid"></div>
+<div class="toast" id="toast">Copied!</div>
+<script>
+(function(){
+  var toast = document.getElementById('toast');
+  var timer;
+
+  function showToast(text) {
+    toast.textContent = text;
+    toast.classList.add('show');
+    clearTimeout(timer);
+    timer = setTimeout(function(){ toast.classList.remove('show'); }, 1500);
+  }
+
+  function copyCode(code) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(code).then(function(){
+        showToast('Copied ' + code);
+      });
+    } else {
+      var ta = document.createElement('textarea');
+      ta.value = code;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      showToast('Copied ' + code);
+    }
+  }
+
+  fetch('/json')
+    .then(function(r){ return r.json(); })
+    .then(function(data){
+      var grid = document.getElementById('grid');
+      var emotes = data.emotes || [];
+      emotes.forEach(function(emote){
+        var code = ':' + emote.name + ':';
+        var card = document.createElement('div');
+        card.className = 'emote';
+        card.title = code;
+        card.addEventListener('click', function(){ copyCode(code); });
+
+        var img = document.createElement('img');
+        img.alt = emote.name;
+        img.loading = 'lazy';
+        img.width = 64;
+        img.height = 64;
+        img.src = emote.url;
+
+        var span = document.createElement('span');
+        span.className = 'code';
+        span.textContent = code;
+
+        card.appendChild(img);
+        card.appendChild(span);
+        grid.appendChild(card);
+      });
+    });
+})();
+</script>
+</body>
+</html>