329 lines
9.0 KiB
HTML
329 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>epaper admin — Retro Terminal</title>
|
|
<style>
|
|
/* ============================================================
|
|
DESIGN B: Retro Terminal
|
|
Inspiriert von: CRT-Monitor, lohn Kassensystem,
|
|
grüne/h Bernstein-Phosphor-Displays. Monospace-alles,
|
|
ASCII-Borders, pixelige Akzente.
|
|
============================================================ */
|
|
:root {
|
|
--bg: #0d0d00;
|
|
--surface: #141400;
|
|
--surface-2: #1a1a00;
|
|
--border: #2a2a00;
|
|
--border-light: #3a3a00;
|
|
--fg: #e8c840;
|
|
--fg-muted: #a09020;
|
|
--fg-dim: #605800;
|
|
--accent: #ffcc00;
|
|
--accent-dim: rgba(255, 204, 0, 0.15);
|
|
--ok: #88ff44;
|
|
--warn: #ffaa00;
|
|
--alert: #ff4444;
|
|
--scanline: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: "Courier New", Courier, monospace;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
line-height: 1.5;
|
|
background-image: repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
var(--scanline) 2px,
|
|
var(--scanline) 4px
|
|
);
|
|
}
|
|
|
|
/* --- Header --- */
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 24px;
|
|
border-bottom: 2px solid var(--fg-dim);
|
|
background: var(--surface);
|
|
}
|
|
.logo {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
letter-spacing: 0.1em;
|
|
color: var(--accent);
|
|
}
|
|
.logo::before { content: '> '; }
|
|
.logo::after { content: ' _'; animation: blink 1s step-end infinite; }
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
.header-right { display: flex; gap: 10px; }
|
|
|
|
/* --- Main --- */
|
|
.main { max-width: 1100px; margin: 0 auto; padding: 24px; }
|
|
|
|
/* --- Section title --- */
|
|
h2 {
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
color: var(--accent);
|
|
margin-bottom: 12px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px dashed var(--fg-dim);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
h2::before { content: '## '; color: var(--fg-dim); }
|
|
|
|
/* --- Toolbar --- */
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.add-group {
|
|
display: flex;
|
|
gap: 0;
|
|
border: 1px solid var(--fg-dim);
|
|
}
|
|
.add-group select {
|
|
background: var(--surface);
|
|
border: none;
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 0.85em;
|
|
padding: 5px 10px;
|
|
}
|
|
.add-group button {
|
|
background: var(--accent);
|
|
color: #000;
|
|
border: none;
|
|
font-family: inherit;
|
|
font-size: 0.82em;
|
|
font-weight: bold;
|
|
padding: 5px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* --- ASCII Grid --- */
|
|
.grid-wrap {
|
|
border: 1px solid var(--fg-dim);
|
|
padding: 8px;
|
|
margin-bottom: 24px;
|
|
background: var(--surface);
|
|
overflow-x: auto;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(4, 90px);
|
|
gap: 6px;
|
|
}
|
|
.cell {
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: 0;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
.cell.empty { background: var(--bg); border-style: dashed; }
|
|
.item-name {
|
|
font-size: 0.78em;
|
|
font-weight: bold;
|
|
color: var(--accent);
|
|
}
|
|
.item-meta { font-size: 0.62em; color: var(--fg-dim); }
|
|
.item-controls {
|
|
display: flex;
|
|
gap: 3px;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
}
|
|
.item-controls button {
|
|
background: var(--bg);
|
|
border: 1px solid var(--fg-dim);
|
|
color: var(--fg-dim);
|
|
font-family: inherit;
|
|
font-size: 0.6em;
|
|
padding: 0px 4px;
|
|
cursor: pointer;
|
|
}
|
|
.item-controls button:hover { color: var(--alert); border-color: var(--alert); }
|
|
|
|
/* --- Plugin cards --- */
|
|
.plugin-card {
|
|
border: 1px solid var(--border-light);
|
|
padding: 12px 16px;
|
|
margin-bottom: 8px;
|
|
background: var(--surface);
|
|
}
|
|
.plugin-card h3 {
|
|
font-size: 0.85em;
|
|
color: var(--accent);
|
|
margin-bottom: 2px;
|
|
}
|
|
.plugin-card .desc { font-size: 0.72em; color: var(--fg-muted); margin-bottom: 10px; }
|
|
.plugin-card .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.field { display: flex; flex-direction: column; gap: 3px; }
|
|
.field label { font-size: 0.68em; color: var(--fg-muted); }
|
|
.field input, .field select {
|
|
background: var(--bg);
|
|
border: 1px solid var(--fg-dim);
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 0.82em;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
/* --- Buttons --- */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--fg-dim);
|
|
background: var(--surface);
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 0.8em;
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { background: var(--surface-2); border-color: var(--fg-muted); }
|
|
.btn.primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: bold; }
|
|
.btn.primary:hover { background: #e0b800; }
|
|
.btn.danger { color: var(--alert); border-color: var(--alert); }
|
|
.btn-sm { padding: 3px 8px; font-size: 0.7em; }
|
|
|
|
/* --- Status bar --- */
|
|
.status-bar {
|
|
font-size: 0.72em;
|
|
color: var(--fg-muted);
|
|
margin-left: auto;
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* --- Preview --- */
|
|
.preview {
|
|
border: 1px solid var(--fg-dim);
|
|
padding: 12px;
|
|
background: var(--surface);
|
|
margin-top: 24px;
|
|
}
|
|
.preview img { width: 100%; display: block; }
|
|
|
|
/* --- CRT glow effect on accent elements --- */
|
|
.accent-glow { text-shadow: 0 0 6px var(--accent); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo accent-glow">EPAPER ADMIN</div>
|
|
<div class="header-right">
|
|
<button class="btn">REFRESH</button>
|
|
<button class="btn primary">SAVE</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main">
|
|
<h2>LAYOUT EDITOR [4x4]</h2>
|
|
<div class="toolbar">
|
|
<div class="add-group">
|
|
<select><option>clock</option><option>weather</option><option>system</option></select>
|
|
<button>+ ADD</button>
|
|
</div>
|
|
<button class="btn">AUTO-PACK</button>
|
|
<span class="status-bar">STATUS: 4 ITEMS | GRID: OK</span>
|
|
</div>
|
|
|
|
<div class="grid-wrap">
|
|
<div class="grid">
|
|
<div class="cell">
|
|
<div class="item-name">CLOCK</div>
|
|
<div class="item-meta">2x2 @ (0,0)</div>
|
|
<div class="item-controls">
|
|
<button>▲</button><button>▼</button><button>✕</button>
|
|
</div>
|
|
</div>
|
|
<div class="cell">
|
|
<div class="item-name">WEATHER</div>
|
|
<div class="item-meta">2x2 @ (2,0)</div>
|
|
<div class="item-controls">
|
|
<button>✕</button>
|
|
</div>
|
|
</div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell">
|
|
<div class="item-name">SYSTEM</div>
|
|
<div class="item-meta">2x2 @ (0,2)</div>
|
|
<div class="item-controls">
|
|
<button>✕</button>
|
|
</div>
|
|
</div>
|
|
<div class="cell">
|
|
<div class="item-name">HELLO</div>
|
|
<div class="item-meta">2x2 @ (2,2)</div>
|
|
<div class="item-controls">
|
|
<button>✕</button>
|
|
</div>
|
|
</div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
<div class="cell empty"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>PLUGIN CONFIG</h2>
|
|
<div class="plugin-card">
|
|
<h3>[CLOCK]</h3>
|
|
<div class="desc">System time and date display</div>
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label>> TIMEZONE</label>
|
|
<input type="text" value="Europe/Berlin">
|
|
</div>
|
|
<div class="field">
|
|
<label>> FORMAT</label>
|
|
<select><option>24h</option><option>12h</option></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plugin-card">
|
|
<h3>[WEATHER]</h3>
|
|
<div class="desc">Open-Meteo API — no key required</div>
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label>> LOCATION</label>
|
|
<input type="text" value="52.52,13.41">
|
|
</div>
|
|
<div class="field">
|
|
<label>> FORECAST_H</label>
|
|
<input type="number" value="4">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>LIVE PREVIEW</h2>
|
|
<div class="preview">
|
|
<img src="/snapshot.png">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|