copilot-swe-agent[bot]
6857e1a4db
Agent-Logs-Url: https://github.com/Open3DLab/mikebase/sessions/b79765b4-5ed8-4e74-8826-9b1bd18ee368 Co-authored-by: Ganonmaster <168445+Ganonmaster@users.noreply.github.com>
143 lines
4.5 KiB
HTML
143 lines
4.5 KiB
HTML
<!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: #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; }
|
|
@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>
|
|
<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){
|
|
if (!r.ok) throw new Error('HTTP ' + r.status);
|
|
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);
|
|
});
|
|
})
|
|
.catch(function(err){
|
|
var grid = document.getElementById('grid');
|
|
grid.textContent = 'Failed to load emotes: ' + err.message;
|
|
grid.style.color = '#f66';
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|