Add static homelab dashboard with Docker and nginx setup
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
.git
|
||||
.gitignore
|
||||
*.md
|
||||
.dockerignore
|
||||
docker-compose.yml
|
||||
Dockerfile
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
# Lightweight static host for the homelab dashboard.
|
||||
# Builds a small nginx image that serves index.html + assets.
|
||||
FROM nginx:1.27-alpine
|
||||
|
||||
# Copy the site (static files only — no build step needed)
|
||||
COPY index.html style.css script.js /usr/share/nginx/html/
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# nginx listens on port 80
|
||||
EXPOSE 80
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD wget -q --spider http://127.0.0.1:80/ || exit 1
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -0,0 +1,64 @@
|
||||
# Homelab Dashboard
|
||||
|
||||
A small, self-contained single-page dashboard that links all your homelab services.
|
||||
Static site (HTML + CSS + JS), served by a lightweight **nginx** image. No backend, no
|
||||
database, no build step — just static files.
|
||||
|
||||
## Services
|
||||
|
||||
Internal: Open WebUI, ComfyUI, Gitea, Jellyfin, Immich, Home Assistant,
|
||||
Audio Server / Dubplate, Nextcloud, Vaultwarden, Nginx Proxy Manager, Netbird.
|
||||
|
||||
External: gitlab-ixsol, gem360.
|
||||
|
||||
## Features
|
||||
|
||||
- Responsive grid of service cards with icons, categories and a live "Online" indicator
|
||||
- **Open** (new tab) + **Copy URL** per service
|
||||
- Live search / filter across names, categories and URLs
|
||||
- Live local clock
|
||||
- Dark, themeable design; respects `prefers-reduced-motion`
|
||||
|
||||
## Run with Docker
|
||||
|
||||
```bash
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
Then open <http://localhost:8888>.
|
||||
|
||||
### Without Docker (quick dev)
|
||||
|
||||
Any static file server works:
|
||||
|
||||
```bash
|
||||
# from this directory
|
||||
python3 -m http.server 8888
|
||||
# or: npx serve . -l 8888
|
||||
```
|
||||
|
||||
## Edit services
|
||||
|
||||
All services live in one array at the top of [`script.js`](./script.js).
|
||||
Add / remove / reorder entries there:
|
||||
|
||||
```js
|
||||
{ section: "internal", name: "My Service", url: "http://10.0.0.5:9000", cat: "infra", icon: "⚙️" }
|
||||
```
|
||||
|
||||
`section` is either `"internal"` or `"external"`.
|
||||
`cat` is any key from the `CATEGORIES` map (or add your own).
|
||||
|
||||
## Build the image manually
|
||||
|
||||
```bash
|
||||
docker build -t homelab-dashboard .
|
||||
docker run -d --name homelab-dashboard -p 8888:80 --restart unless-stopped homelab-dashboard
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
- The "Online" badge is cosmetic (a static site can't probe your services from the browser
|
||||
due to CORS). If you want real health checks later, a tiny backend that pings each URL
|
||||
would be the next step.
|
||||
- Port 8888 is published by the Compose file; change it there if needed.
|
||||
@@ -0,0 +1,15 @@
|
||||
services:
|
||||
dashboard:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
image: homelab-dashboard:latest
|
||||
container_name: homelab-dashboard
|
||||
ports:
|
||||
- "8888:80"
|
||||
restart: unless-stopped
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "1m"
|
||||
max-file: "2"
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<title>Homelab Dashboard</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-glow" aria-hidden="true"></div>
|
||||
|
||||
<div class="shell">
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<div class="logo-dot" aria-hidden="true"></div>
|
||||
<div class="brand-text">
|
||||
<h1>Homelab</h1>
|
||||
<p class="subtitle">All your services, one place.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<div class="search">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
d="M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm10 2-4.35-4.35"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
id="search"
|
||||
type="search"
|
||||
placeholder="Search services…"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="clock" id="clock" title="Local time">
|
||||
<span id="clock-time">--:--:--</span>
|
||||
<span id="clock-date">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="app">
|
||||
<!-- sections rendered by script.js -->
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<span id="stats"></span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
# Custom nginx config (used by the Dockerfile).
|
||||
# Serves the static dashboard with sensible caching + security headers.
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
|
||||
|
||||
# Hide nginx version
|
||||
server_tokens off;
|
||||
|
||||
access_log off;
|
||||
error_log /var/log/nginx/error.log warn;
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
// Homelab Dashboard
|
||||
// Edit this array to add, remove, or reorganise services.
|
||||
// section : "internal" | "external"
|
||||
// name : display name
|
||||
// url : full URL (with http:// or https://)
|
||||
// cat : a key from the CATEGORIES map below
|
||||
// icon : an emoji (or any short text)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const CATEGORIES = {
|
||||
ai: { label: "AI", color: "#a855f7" },
|
||||
dev: { label: "Development", color: "#3b82f6" },
|
||||
media: { label: "Media", color: "#ec4899" },
|
||||
photos: { label: "Photos", color: "#14b8a6" },
|
||||
smartHome: { label: "Smart Home", color: "#10b981" },
|
||||
audio: { label: "Audio", color: "#f97316" },
|
||||
storage: { label: "Storage", color: "#6366f1" },
|
||||
security: { label: "Security", color: "#f43f5e" },
|
||||
infra: { label: "Infrastructure", color: "#f59e0b" },
|
||||
network: { label: "Networking", color: "#0ea5e9" },
|
||||
external: { label: "External", color: "#22d3ee" },
|
||||
};
|
||||
|
||||
const SERVICES = [
|
||||
// ----- Internal -----
|
||||
{ section: "internal", name: "Open WebUI", url: "http://100.103.83.12:3000", cat: "ai", icon: "🤖" },
|
||||
{ section: "internal", name: "ComfyUI", url: "http://100.103.83.12:8288", cat: "ai", icon: "🎨" },
|
||||
{ section: "internal", name: "Gitea", url: "http://100.103.83.12:3003", cat: "dev", icon: "🐙" },
|
||||
{ section: "internal", name: "Jellyfin", url: "http://100.103.83.12:8096", cat: "media", icon: "🎬" },
|
||||
{ section: "internal", name: "Immich", url: "http://100.103.83.12:2283", cat: "photos", icon: "📸" },
|
||||
{ section: "internal", name: "Home Assistant", url: "http://192.168.178.45:8123", cat: "smartHome", icon: "🏠" },
|
||||
{ section: "internal", name: "Audio Server / Dubplate", url: "http://192.168.178.100:8180", cat: "audio", icon: "🎧" },
|
||||
{ section: "internal", name: "Nextcloud", url: "https://cloud.gg36", cat: "storage", icon: "☁️" },
|
||||
{ section: "internal", name: "Vaultwarden", url: "https://vault.gg36.at", cat: "security", icon: "🔐" },
|
||||
{ section: "internal", name: "Nginx Proxy Manager", url: "http://192.168.178.194:81", cat: "infra", icon: "⚙️" },
|
||||
{ section: "internal", name: "Netbird", url: "https://netbird.gg36.at", cat: "network", icon: "🛰️" },
|
||||
|
||||
// ----- External -----
|
||||
{ section: "external", name: "gitlab-ixsol", url: "https://gitlab.ixsol.wien", cat: "external", icon: "🐙" },
|
||||
{ section: "external", name: "gem360", url: "https://gem360.ixslo.wien", cat: "external", icon: "🎮" },
|
||||
];
|
||||
|
||||
const SECTION_META = {
|
||||
internal: { title: "Internal Services", order: 1 },
|
||||
external: { title: "External", order: 2 },
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Rendering
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const app = document.getElementById("app");
|
||||
const searchInput = document.getElementById("search");
|
||||
const statsEl = document.getElementById("stats");
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function cardTemplate(s, idx) {
|
||||
const meta = CATEGORIES[s.cat] || { label: s.cat || "Service", color: "var(--accent)" };
|
||||
const urlHost = s.url.replace(/^https?:\/\//, "").replace(/\/$/, "");
|
||||
return `
|
||||
<article class="card" data-search="${escapeHtml((s.name + " " + meta.label + " " + s.url).toLowerCase())}"
|
||||
style="--cat:${meta.color}; animation-delay:${Math.min(idx * 35, 400)}ms">
|
||||
<div class="card-head">
|
||||
<div class="card-icon" aria-hidden="true">${s.icon || "🔗"}</div>
|
||||
<span class="status"><span class="dot"></span>Online</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-cat">${escapeHtml(meta.label)}</span>
|
||||
<h3 class="card-name">${escapeHtml(s.name)}</h3>
|
||||
<span class="card-url" title="${escapeHtml(s.url)}">${escapeHtml(urlHost)}</span>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<a class="btn btn-primary" href="${escapeHtml(s.url)}" target="_blank" rel="noopener noreferrer">
|
||||
Open
|
||||
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
|
||||
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M7 17 17 7M9 7h8v8"/>
|
||||
</svg>
|
||||
</a>
|
||||
<button class="btn btn-ghost" type="button" data-copy="${escapeHtml(s.url)}" title="Copy URL"
|
||||
aria-label="Copy URL for ${escapeHtml(s.name)}">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
|
||||
<rect x="9" y="9" width="11" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path fill="none" stroke="currentColor" stroke-width="2" d="M5 15V5a2 2 0 0 1 2-2h10"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const grouped = {};
|
||||
for (const s of SERVICES) (grouped[s.section] ||= []).push(s);
|
||||
|
||||
const sections = Object.keys(grouped).sort(
|
||||
(a, b) => (SECTION_META[a]?.order ?? 99) - (SECTION_META[b]?.order ?? 99),
|
||||
);
|
||||
|
||||
app.innerHTML = sections
|
||||
.map((key) => {
|
||||
const meta = SECTION_META[key] || { title: key };
|
||||
const cards = grouped[key].map((s, i) => cardTemplate(s, i)).join("");
|
||||
return `
|
||||
<section class="section">
|
||||
<h2 class="section-title">${escapeHtml(meta.title)} <span class="count">${grouped[key].length}</span></h2>
|
||||
<div class="grid">${cards}</div>
|
||||
</section>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
statsEl.textContent = `${SERVICES.length} services · ${grouped.internal?.length || 0} internal · ${
|
||||
grouped.external?.length || 0
|
||||
} external`;
|
||||
|
||||
bindCopyButtons();
|
||||
}
|
||||
|
||||
function bindCopyButtons() {
|
||||
app.querySelectorAll("[data-copy]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const url = btn.getAttribute("data-copy");
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
} catch {
|
||||
const ta = document.createElement("textarea");
|
||||
ta.value = url;
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand("copy");
|
||||
ta.remove();
|
||||
}
|
||||
const original = btn.innerHTML;
|
||||
btn.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>`;
|
||||
setTimeout(() => (btn.innerHTML = original), 1300);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Search / filter
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function filter() {
|
||||
const q = searchInput.value.trim().toLowerCase();
|
||||
const cards = app.querySelectorAll(".card");
|
||||
let visible = 0;
|
||||
cards.forEach((card) => {
|
||||
const match = !q || card.getAttribute("data-search").includes(q);
|
||||
card.classList.toggle("hidden", !match);
|
||||
if (match) visible++;
|
||||
});
|
||||
|
||||
// hide sections with no visible cards
|
||||
app.querySelectorAll(".section").forEach((sec) => {
|
||||
const hasVisible = sec.querySelector(".card:not(.hidden)");
|
||||
sec.style.display = hasVisible ? "" : "none";
|
||||
});
|
||||
|
||||
let noRes = document.querySelector(".no-results");
|
||||
if (visible === 0) {
|
||||
if (!noRes) {
|
||||
noRes = document.createElement("div");
|
||||
noRes.className = "no-results";
|
||||
noRes.textContent = "No services match your search.";
|
||||
app.appendChild(noRes);
|
||||
}
|
||||
} else if (noRes) {
|
||||
noRes.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Clock
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function tickClock() {
|
||||
const now = new Date();
|
||||
const time = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||
const date = now.toLocaleDateString([], { weekday: "short", day: "numeric", month: "short", year: "numeric" });
|
||||
document.getElementById("clock-time").textContent = time;
|
||||
document.getElementById("clock-date").textContent = date;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Init
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
render();
|
||||
tickClock();
|
||||
setInterval(tickClock, 1000);
|
||||
searchInput.addEventListener("input", filter);
|
||||
@@ -0,0 +1,448 @@
|
||||
:root {
|
||||
--bg: #070b14;
|
||||
--bg-soft: #0b1220;
|
||||
--surface: rgba(255, 255, 255, 0.035);
|
||||
--surface-hover: rgba(255, 255, 255, 0.06);
|
||||
--border: rgba(255, 255, 255, 0.09);
|
||||
--border-hover: rgba(255, 255, 255, 0.18);
|
||||
--text: #e7ecf5;
|
||||
--muted: #8a94a8;
|
||||
--muted-2: #636e84;
|
||||
--accent: #22d3ee;
|
||||
--accent-2: #a855f7;
|
||||
--online: #34d399;
|
||||
--radius: 18px;
|
||||
--radius-sm: 12px;
|
||||
--shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ambient glow */
|
||||
.bg-glow {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(60% 50% at 12% -5%, rgba(34, 211, 238, 0.14), transparent 60%),
|
||||
radial-gradient(55% 45% at 95% 0%, rgba(168, 85, 247, 0.14), transparent 60%),
|
||||
radial-gradient(70% 60% at 50% 120%, rgba(52, 211, 153, 0.08), transparent 60%);
|
||||
}
|
||||
|
||||
.shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 40px) 60px;
|
||||
}
|
||||
|
||||
/* ---------- header ---------- */
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo-dot {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
box-shadow: 0 10px 30px -8px rgba(34, 211, 238, 0.6);
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.logo-dot::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(7, 11, 20, 0.55);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.brand-text h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(22px, 3.2vw, 30px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 4px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 10px 16px;
|
||||
min-width: 220px;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.search:focus-within {
|
||||
border-color: var(--border-hover);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.search svg {
|
||||
color: var(--muted);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.search input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search input::placeholder {
|
||||
color: var(--muted-2);
|
||||
}
|
||||
|
||||
.clock {
|
||||
text-align: right;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
#clock-time {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
#clock-date {
|
||||
display: block;
|
||||
font-size: 12.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ---------- sections ---------- */
|
||||
main#app {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0 0 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
background: linear-gradient(90deg, var(--border), transparent);
|
||||
}
|
||||
|
||||
.section-title .count {
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--muted-2);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* ---------- grid ---------- */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ---------- card ---------- */
|
||||
.card {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 18px 18px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
border-color 0.2s ease,
|
||||
background 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
animation: rise 0.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes rise {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--cat, var(--accent)), transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--border-hover);
|
||||
background: var(--surface-hover);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 22px;
|
||||
background: color-mix(in srgb, var(--cat, var(--accent)) 16%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 34%, transparent);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--online);
|
||||
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
|
||||
animation: pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 16.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.card-cat {
|
||||
align-self: flex-start;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--cat, var(--accent)) 80%, white);
|
||||
}
|
||||
|
||||
.card-url {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
transform 0.12s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--surface-hover);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
border-color: transparent;
|
||||
color: #05070d;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #38dbf2, #b56bff);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
flex: 0 0 auto;
|
||||
width: 42px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn svg {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* ---------- empty / footer ---------- */
|
||||
.no-results {
|
||||
color: var(--muted);
|
||||
padding: 20px 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
color: var(--muted-2);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
@media (max-width: 640px) {
|
||||
.topbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.top-right {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.search {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.clock {
|
||||
text-align: left;
|
||||
}
|
||||
#clock-time {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.status .dot {
|
||||
animation: none;
|
||||
}
|
||||
.card:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user