Open3DLab/mikebase
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Activity

Spice up HTML page styling with accent colors, drop shadow, and glow effects

Browse Source
This commit is contained in:
Ganonmaster
2026-04-07 00:40:02 +00:00
committed by GitHub
parent 2d4ad79857
commit 85498a357f
1 changed files with 55 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/templates/index.html
+55 -11
View File
@@ -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>