Redesign dashboard UI: modern glassmorphism, new brand identity, responsive layout, refined color palette
Some checks failed
Deploy Discord Bot / deploy (push) Has been cancelled
Some checks failed
Deploy Discord Bot / deploy (push) Has been cancelled
This commit is contained in:
Pepe44DEV
@@ -41,7 +41,13 @@ router.get('/', (req, res) => {
|
|||||||
// - Grenzwerte, Whitelist/Badwords und Log-Ziel in ein Formular ueberfuehren.
|
// - Grenzwerte, Whitelist/Badwords und Log-Ziel in ein Formular ueberfuehren.
|
||||||
const sidebar = `
|
const sidebar = `
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<div class="brand">Papo Control</div>
|
<div class="brand">
|
||||||
|
<div class="brand-mark">P</div>
|
||||||
|
<div class="brand-copy">
|
||||||
|
<strong>Papo Control</strong>
|
||||||
|
<span class="brand-sub">Guild management</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<a class="active" href="#overview" data-target="overview"><span class="icon">🏠</span> Uebersicht</a>
|
<a class="active" href="#overview" data-target="overview"><span class="icon">🏠</span> Uebersicht</a>
|
||||||
<a href="#tickets" data-target="tickets"><span class="icon">🎫</span> Ticketsystem</a>
|
<a href="#tickets" data-target="tickets"><span class="icon">🎫</span> Ticketsystem</a>
|
||||||
@@ -57,7 +63,10 @@ router.get('/', (req, res) => {
|
|||||||
<a href="#events" data-target="events" class="events-link"><span class="icon">📅</span> Events</a>
|
<a href="#events" data-target="events" class="events-link"><span class="icon">📅</span> Events</a>
|
||||||
<a href="#admin" data-target="admin" class="admin-link hidden"><span class="icon">🛠️</span> Admin</a>
|
<a href="#admin" data-target="admin" class="admin-link hidden"><span class="icon">🛠️</span> Admin</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="muted">Angemeldet als <span id="userInfo"></span></div>
|
<div class="sidebar-user">
|
||||||
|
<div class="sidebar-user-label">Angemeldet als</div>
|
||||||
|
<div class="sidebar-user-name" id="userInfo"></div>
|
||||||
|
</div>
|
||||||
<button id="logoutBtn" class="logout">Logout</button>
|
<button id="logoutBtn" class="logout">Logout</button>
|
||||||
</aside>
|
</aside>
|
||||||
`;
|
`;
|
||||||
@@ -71,27 +80,38 @@ router.get('/', (req, res) => {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Papo Dashboard - Auswahl</title>
|
<title>Papo Dashboard - Auswahl</title>
|
||||||
<style>
|
<style>
|
||||||
:root { --bg:#080c15; --card:rgba(18,20,28,0.65); --text:#f8fafc; --accent:#f97316; --accent-strong:#ff9b3d; --muted:#aab4c5; --border:rgba(255,255,255,0.08); }
|
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
|
||||||
body { margin:0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background:radial-gradient(circle at 14% 18%, rgba(249,115,22,0.12), transparent 32%), radial-gradient(circle at 80% -6%, rgba(255,153,73,0.12), transparent 30%), linear-gradient(135deg, #070a11 0%, #0b0f18 50%, #080c15 100%); color:var(--text); min-height:100vh; }
|
:root { --text:#f8f3ed; --muted:#b4ad9f; --border:rgba(255,255,255,0.08); }
|
||||||
.layout { display:flex; width:100%; min-height:100vh; background:radial-gradient(circle at 50% 24%, rgba(255,153,73,0.06), transparent 30%); }
|
* { box-sizing:border-box; }
|
||||||
.sidebar { width:240px; background:linear-gradient(180deg, rgba(12,14,22,0.85), rgba(10,12,18,0.78)); border-right:1px solid var(--border); padding:24px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; backdrop-filter:blur(14px); box-shadow:8px 0 32px rgba(0,0,0,0.45); }
|
body { margin:0; font-family:'Sora', 'Segoe UI', sans-serif; background:radial-gradient(circle at 14% 18%, rgba(249,115,22,0.16), transparent 28%), radial-gradient(circle at 82% 4%, rgba(255,176,102,0.12), transparent 28%), linear-gradient(135deg, #05070d 0%, #0a0f18 45%, #070b12 100%); color:var(--text); min-height:100vh; }
|
||||||
.brand { font-size:20px; font-weight:800; letter-spacing:0.6px; }
|
.layout { display:flex; width:100%; min-height:100vh; }
|
||||||
|
.sidebar { width:270px; padding:28px 18px 20px; display:flex; flex-direction:column; gap:18px; background:linear-gradient(180deg, rgba(8,11,19,0.95), rgba(8,11,19,0.86)); border-right:1px solid rgba(255,255,255,0.05); backdrop-filter:blur(18px); box-shadow:18px 0 48px rgba(0,0,0,0.34); }
|
||||||
|
.brand { display:flex; align-items:center; gap:14px; padding:4px 8px 14px; }
|
||||||
|
.brand-mark { width:42px; height:42px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; color:#1c1207; background:linear-gradient(145deg, #ffbc7a, #f97316 62%, #c2410c); box-shadow:0 14px 28px rgba(249,115,22,0.32); }
|
||||||
|
.brand-copy { display:flex; flex-direction:column; gap:3px; }
|
||||||
|
.brand-copy strong { font-size:20px; letter-spacing:0.02em; }
|
||||||
|
.brand-sub { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; }
|
||||||
.nav { display:flex; flex-direction:column; gap:8px; }
|
.nav { display:flex; flex-direction:column; gap:8px; }
|
||||||
.nav a { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:14px; color:var(--muted); text-decoration:none; font-weight:700; transition:background 140ms ease, color 140ms ease, box-shadow 140ms ease, border 140ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); }
|
.nav a { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:700; transition:background 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); }
|
||||||
.nav a .icon { opacity:0.85; width:18px; display:inline-flex; justify-content:center; }
|
.nav a.active { background:linear-gradient(90deg, rgba(249,115,22,0.34), rgba(249,115,22,0.14)); color:#fff2e6; border-color:rgba(255,176,102,0.26); box-shadow:0 16px 30px rgba(249,115,22,0.22); }
|
||||||
.nav a.active { background:rgba(249,115,22,0.18); color:var(--accent-strong); border-color:rgba(249,115,22,0.45); box-shadow:0 10px 30px rgba(249,115,22,0.28); }
|
.nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.08); }
|
||||||
.nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.08); box-shadow:0 8px 22px rgba(0,0,0,0.28); }
|
.sidebar-user { margin-top:auto; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,0.07); background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); }
|
||||||
.content { flex:1; padding:24px 32px 48px; box-sizing:border-box; }
|
.sidebar-user-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; margin-bottom:6px; }
|
||||||
h1 { margin:0; font-size:24px; letter-spacing:0.5px; font-weight:800; }
|
.sidebar-user-name { font-size:14px; font-weight:700; color:#d4c8b7; }
|
||||||
.muted { color:var(--muted); font-size:13px; }
|
.content { flex:1; padding:32px; }
|
||||||
main { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:18px; }
|
h1 { margin:0; font-size:32px; letter-spacing:-0.03em; font-weight:800; }
|
||||||
.card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px 18px; box-shadow:0 18px 36px rgba(0,0,0,0.35); backdrop-filter:blur(12px); cursor:pointer; transition:transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; }
|
.muted { color:var(--muted); font-size:13px; line-height:1.6; }
|
||||||
.card:hover { transform:translateY(-2px); border-color: rgba(249,115,22,0.35); box-shadow:0 22px 40px rgba(0,0,0,0.4); background:rgba(255,255,255,0.05); }
|
main { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; margin-top:22px; }
|
||||||
|
.card { background:linear-gradient(180deg, rgba(18,24,38,0.82), rgba(12,17,28,0.72)); border:1px solid var(--border); border-radius:24px; padding:18px 20px; box-shadow:0 26px 64px rgba(0,0,0,0.42); backdrop-filter:blur(18px); cursor:pointer; transition:transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; }
|
||||||
|
.card:hover { transform:translateY(-2px); border-color:rgba(255,176,102,0.26); box-shadow:0 30px 70px rgba(0,0,0,0.5); background:linear-gradient(180deg, rgba(255,176,102,0.12), rgba(255,255,255,0.04)); }
|
||||||
.row { display:flex; gap:12px; align-items:center; }
|
.row { display:flex; gap:12px; align-items:center; }
|
||||||
.pill { display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; background:rgba(249,115,22,0.16); color:var(--text); border:1px solid rgba(249,115,22,0.3); box-shadow:0 8px 18px rgba(249,115,22,0.18); }
|
.pill { display:inline-block; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; background:rgba(249,115,22,0.16); color:#fff0df; border:1px solid rgba(249,115,22,0.3); box-shadow:0 8px 18px rgba(249,115,22,0.18); }
|
||||||
img { width:42px; height:42px; border-radius:12px; object-fit:cover; }
|
img { width:46px; height:46px; border-radius:14px; object-fit:cover; }
|
||||||
.logout { margin-top:auto; border:none; color:white; padding:10px 12px; border-radius:12px; cursor:pointer; background:linear-gradient(135deg, #ef4444, #b91c1c); box-shadow:0 12px 28px rgba(239,68,68,0.32); width:100%; transition:transform 120ms ease, box-shadow 120ms ease; }
|
.logout { margin-top:0; border:none; color:white; padding:12px; border-radius:16px; cursor:pointer; background:linear-gradient(135deg, #ef4444, #b91c1c); box-shadow:0 14px 28px rgba(185,28,28,0.28); width:100%; }
|
||||||
.logout:hover { transform:translateY(-1px); box-shadow:0 14px 32px rgba(239,68,68,0.36); }
|
.loading-wrap { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:34px; color:var(--muted); }
|
||||||
|
.spinner { width:28px; height:28px; border:3px solid rgba(255,255,255,0.12); border-top-color:#f97316; border-radius:50%; animation:spin .6s linear infinite; }
|
||||||
|
@keyframes spin { to { transform:rotate(360deg); } }
|
||||||
|
@media (max-width: 1180px) { .layout { flex-direction:column; } .sidebar { width:100%; } .content { padding:22px 18px 36px; } }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -157,128 +177,174 @@ router.get('/', (req, res) => {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Papo Dashboard</title>
|
<title>Papo Dashboard</title>
|
||||||
<style>
|
<style>
|
||||||
:root { --bg:#080c15; --card:rgba(16,19,28,0.65); --text:#f7fafc; --accent:#f97316; --accent-strong:#ff9b3d; --muted:#a8b2c5; --border:rgba(255,255,255,0.08); --surface:rgba(12,15,22,0.75); }
|
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
|
||||||
body { margin:0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background:radial-gradient(circle at 12% 18%, rgba(249,115,22,0.12), transparent 32%), radial-gradient(circle at 78% -6%, rgba(255,153,73,0.12), transparent 32%), linear-gradient(135deg, #070a11 0%, #0b0f18 50%, #080c15 100%); color:var(--text); min-height:100vh; }
|
:root { --bg:#05070d; --bg-soft:#0b101b; --surface:rgba(10,14,24,0.88); --surface-alt:rgba(14,18,29,0.82); --card:rgba(17,22,35,0.78); --card-strong:rgba(21,27,41,0.92); --text:#f8f3ed; --muted:#b4ad9f; --muted-strong:#d4c8b7; --accent:#f97316; --accent-strong:#ffb066; --accent-soft:rgba(249,115,22,0.18); --accent-glow:rgba(249,115,22,0.34); --border:rgba(255,255,255,0.08); --border-strong:rgba(255,176,102,0.26); --shadow:0 26px 64px rgba(0,0,0,0.42); --radius:24px; }
|
||||||
.layout { display:flex; width:100%; min-height:100vh; background:radial-gradient(circle at 50% 20%, rgba(255,153,73,0.08), transparent 30%); }
|
* { box-sizing:border-box; }
|
||||||
.sidebar { width:240px; background:linear-gradient(180deg, rgba(12,14,22,0.85), rgba(10,12,18,0.78)); border-right:1px solid rgba(255,255,255,0.06); padding:24px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; backdrop-filter:blur(14px); box-shadow:8px 0 32px rgba(0,0,0,0.45); }
|
html { scroll-behavior:smooth; }
|
||||||
.brand { font-size:20px; font-weight:800; letter-spacing:0.6px; color:var(--text); }
|
body { margin:0; font-family:'Sora', 'Segoe UI', sans-serif; background:
|
||||||
|
radial-gradient(circle at 14% 18%, rgba(249,115,22,0.16), transparent 24%),
|
||||||
|
radial-gradient(circle at 82% 4%, rgba(255,176,102,0.12), transparent 28%),
|
||||||
|
radial-gradient(circle at 50% 120%, rgba(249,115,22,0.10), transparent 30%),
|
||||||
|
linear-gradient(135deg, #05070d 0%, #0a0f18 45%, #070b12 100%);
|
||||||
|
color:var(--text);
|
||||||
|
min-height:100vh;
|
||||||
|
}
|
||||||
|
body::before { content:''; position:fixed; inset:0; pointer-events:none; background:
|
||||||
|
linear-gradient(120deg, rgba(255,255,255,0.035) 0%, transparent 34%),
|
||||||
|
radial-gradient(circle at 24% 18%, rgba(249,115,22,0.08), transparent 18%);
|
||||||
|
opacity:0.9;
|
||||||
|
}
|
||||||
|
.layout { display:flex; width:100%; min-height:100vh; position:relative; }
|
||||||
|
.sidebar { width:270px; padding:28px 18px 20px; display:flex; flex-direction:column; gap:18px; background:
|
||||||
|
linear-gradient(180deg, rgba(8,11,19,0.95), rgba(8,11,19,0.86));
|
||||||
|
border-right:1px solid rgba(255,255,255,0.05);
|
||||||
|
backdrop-filter:blur(18px);
|
||||||
|
box-shadow:18px 0 48px rgba(0,0,0,0.34);
|
||||||
|
position:sticky;
|
||||||
|
top:0;
|
||||||
|
min-height:100vh;
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
|
.brand { display:flex; align-items:center; gap:14px; padding:4px 8px 14px; }
|
||||||
|
.brand-mark { width:42px; height:42px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; color:#1c1207; background:linear-gradient(145deg, #ffbc7a, #f97316 62%, #c2410c); box-shadow:0 14px 28px rgba(249,115,22,0.32), inset 0 1px 0 rgba(255,255,255,0.28); }
|
||||||
|
.brand-copy { display:flex; flex-direction:column; gap:3px; }
|
||||||
|
.brand-copy strong { font-size:20px; letter-spacing:0.02em; }
|
||||||
|
.brand-sub { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; }
|
||||||
.nav { display:flex; flex-direction:column; gap:8px; }
|
.nav { display:flex; flex-direction:column; gap:8px; }
|
||||||
.nav a { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:14px; color:var(--muted); text-decoration:none; font-weight:700; transition:background 140ms ease, color 140ms ease, box-shadow 140ms ease, border 140ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); }
|
.nav a { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:700; transition:background 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); position:relative; overflow:hidden; }
|
||||||
.nav a .icon { opacity:0.85; width:18px; display:inline-flex; justify-content:center; }
|
.nav a::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0.08), transparent 55%); opacity:0; transition:opacity 160ms ease; }
|
||||||
.nav a.active { background:rgba(249,115,22,0.18); color:var(--accent-strong); border-color:rgba(249,115,22,0.45); box-shadow:0 10px 30px rgba(249,115,22,0.28); }
|
.nav a .icon { opacity:0.9; width:18px; display:inline-flex; justify-content:center; font-size:15px; }
|
||||||
.nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.08); box-shadow:0 8px 22px rgba(0,0,0,0.28); }
|
.nav a.active { background:linear-gradient(90deg, rgba(249,115,22,0.34), rgba(249,115,22,0.14)); color:#fff2e6; border-color:var(--border-strong); box-shadow:0 16px 30px rgba(249,115,22,0.22); transform:translateX(2px); }
|
||||||
.content { flex:1; padding:28px 34px 56px; box-sizing:border-box; background:linear-gradient(145deg, rgba(255,153,73,0.05) 0%, rgba(255,255,255,0) 32%); }
|
.nav a.active::before, .nav a:hover::before { opacity:1; }
|
||||||
h1 { margin:0; font-size:26px; letter-spacing:0.6px; font-weight:800; }
|
.nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.09); }
|
||||||
.muted { color:var(--muted); font-size:13px; }
|
.nav a.hidden { display:none; }
|
||||||
main { padding-top:18px; display:flex; flex-direction:column; gap:18px; }
|
.sidebar-user { margin-top:auto; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,0.07); background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); }
|
||||||
|
.sidebar-user-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; margin-bottom:6px; }
|
||||||
|
.sidebar-user-name { font-size:14px; font-weight:700; color:var(--muted-strong); word-break:break-word; }
|
||||||
|
.content { flex:1; padding:28px 32px 54px; background:
|
||||||
|
linear-gradient(145deg, rgba(249,115,22,0.05) 0%, transparent 34%),
|
||||||
|
linear-gradient(180deg, rgba(255,255,255,0.015), transparent 20%);
|
||||||
|
}
|
||||||
|
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:22px 24px; border:1px solid rgba(255,255,255,0.06); border-radius:26px; background:linear-gradient(180deg, rgba(18,24,38,0.78), rgba(12,17,28,0.72)); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
|
||||||
|
h1 { margin:0; font-size:34px; letter-spacing:-0.03em; font-weight:800; }
|
||||||
|
.muted { color:var(--muted); font-size:13px; line-height:1.6; }
|
||||||
|
main { padding-top:22px; display:flex; flex-direction:column; gap:20px; }
|
||||||
.section { display:none; }
|
.section { display:none; }
|
||||||
.section.active { display:block; }
|
.section.active { display:block; }
|
||||||
.section.hidden { display:none !important; }
|
.section.hidden { display:none !important; }
|
||||||
.grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
|
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
|
||||||
.card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px 20px; box-shadow:0 18px 45px rgba(0,0,0,0.35); backdrop-filter:blur(14px); }
|
.card { background:linear-gradient(180deg, rgba(18,24,38,0.82), rgba(12,17,28,0.72)); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(18px); position:relative; overflow:hidden; }
|
||||||
.stat { font-size:34px; font-weight:800; margin:0; color:var(--text); }
|
.card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,176,102,0.08), transparent 34%); pointer-events:none; }
|
||||||
.label { color:var(--muted); margin:4px 0 0 0; letter-spacing:0.2px; }
|
.card > * { position:relative; z-index:1; }
|
||||||
.tickets-grid { display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap:18px; align-items:start; }
|
.stat { font-size:38px; font-weight:800; margin:0; color:var(--text); letter-spacing:-0.04em; }
|
||||||
|
.label { color:var(--muted); margin:4px 0 0; letter-spacing:0.02em; font-size:12px; text-transform:uppercase; }
|
||||||
|
.tickets-grid { display:grid; grid-template-columns:repeat(3, minmax(260px, 1fr)); gap:18px; align-items:start; }
|
||||||
|
.ticket-list-pane, .log-list { scrollbar-width:thin; scrollbar-color:rgba(255,176,102,0.4) transparent; }
|
||||||
.ticket-list-pane { display:flex; flex-direction:column; gap:10px; max-height:520px; overflow-y:auto; padding:6px; margin-top:12px; }
|
.ticket-list-pane { display:flex; flex-direction:column; gap:10px; max-height:520px; overflow-y:auto; padding:6px; margin-top:12px; }
|
||||||
.ticket-list-pane::-webkit-scrollbar { width:6px; }
|
.ticket-list-pane::-webkit-scrollbar, .log-list::-webkit-scrollbar { width:6px; height:6px; }
|
||||||
.ticket-list-pane::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:10px; }
|
.ticket-list-pane::-webkit-scrollbar-thumb, .log-list::-webkit-scrollbar-thumb { background:rgba(255,176,102,0.36); border-radius:10px; }
|
||||||
.ticket-list-item { border:1px solid var(--border); background:rgba(255,255,255,0.04); border-radius:14px; padding:13px 15px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; box-shadow:0 14px 32px rgba(0,0,0,0.3); }
|
.ticket-list-item, .module-item, .option-card, .detail-tile, .status-card, .log-item { border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025)); border-radius:18px; box-shadow:0 16px 32px rgba(0,0,0,0.24); }
|
||||||
.ticket-list-item:hover { transform:translateY(-2px); border-color:rgba(249,115,22,0.35); background:rgba(255,255,255,0.06); box-shadow:0 16px 38px rgba(0,0,0,0.36); }
|
.ticket-list-item { padding:14px 16px; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
|
||||||
|
.ticket-list-item:hover { transform:translateY(-2px); border-color:var(--border-strong); background:linear-gradient(180deg, rgba(255,176,102,0.12), rgba(255,255,255,0.04)); box-shadow:0 20px 36px rgba(0,0,0,0.3); }
|
||||||
.ticket-item-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
|
.ticket-item-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
|
||||||
.ticket-title { font-weight:750; font-size:15px; }
|
.ticket-title { font-weight:750; font-size:15px; }
|
||||||
.ticket-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }
|
.ticket-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }
|
||||||
.ticket-status-badge { padding:5px 11px; border-radius:999px; font-weight:700; font-size:12px; text-transform:capitalize; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:var(--text); box-shadow:0 10px 22px rgba(0,0,0,0.24); }
|
.ticket-status-badge, .status-badge, .log-level, .badge { padding:6px 11px; border-radius:999px; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; }
|
||||||
.status-open { background:rgba(249,115,22,0.18); color:var(--accent-strong); border-color:rgba(249,115,22,0.45); }
|
.ticket-status-badge { border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:var(--text); box-shadow:0 10px 22px rgba(0,0,0,0.2); }
|
||||||
.status-in-progress { background:rgba(255,184,70,0.16); color:#fbbf24; border-color:rgba(255,184,70,0.42); }
|
.status-open, .badge.active { background:rgba(249,115,22,0.18); color:#ffd7b0; border-color:rgba(249,115,22,0.42); box-shadow:0 8px 20px rgba(249,115,22,0.18); }
|
||||||
.status-closed { background:rgba(239,68,68,0.16); color:#f87171; border-color:rgba(239,68,68,0.42); }
|
.status-in-progress, .log-level.warn { background:rgba(251,191,36,0.16); color:#fcd34d; border:1px solid rgba(251,191,36,0.32); }
|
||||||
.ticket-empty { padding:20px; text-align:center; color:var(--muted); border:1px dashed rgba(255,255,255,0.16); border-radius:14px; background:rgba(255,255,255,0.03); }
|
.status-closed, .status-down, .log-level.error { background:rgba(239,68,68,0.16); color:#fda4af; border:1px solid rgba(239,68,68,0.32); }
|
||||||
|
.status-up { background:rgba(34,197,94,0.16); color:#86efac; border:1px solid rgba(34,197,94,0.28); }
|
||||||
|
.status-unknown, .log-level.info { background:rgba(148,163,184,0.16); color:#cbd5e1; border:1px solid rgba(148,163,184,0.28); }
|
||||||
|
.ticket-empty { padding:22px; text-align:center; color:var(--muted); border:1px dashed rgba(255,255,255,0.14); border-radius:18px; background:rgba(255,255,255,0.03); }
|
||||||
.ticket-tab { display:none; }
|
.ticket-tab { display:none; }
|
||||||
.ticket-tab.active { display:block; }
|
.ticket-tab.active { display:block; }
|
||||||
.ticket-tab-btn.active { background:rgba(249,115,22,0.18); border-color:rgba(249,115,22,0.45); color:var(--accent-strong); }
|
.ticket-tab-btn.active { background:linear-gradient(135deg, rgba(249,115,22,0.24), rgba(255,176,102,0.16)); border-color:var(--border-strong); color:#fff0df; }
|
||||||
form { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
|
form { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
|
||||||
.form-field { display:flex; flex-direction:column; gap:6px; }
|
.form-field { display:flex; flex-direction:column; gap:8px; }
|
||||||
.form-label { font-size:13px; color:var(--muted); letter-spacing:0.2px; font-weight:600; }
|
.form-label { font-size:12px; color:var(--muted); letter-spacing:0.08em; font-weight:700; text-transform:uppercase; }
|
||||||
input, select, textarea { padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); color:var(--text); backdrop-filter:blur(8px); }
|
input, select, textarea { width:100%; padding:13px 14px; border-radius:16px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.045); color:var(--text); backdrop-filter:blur(8px); font:inherit; transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }
|
||||||
input::placeholder, textarea::placeholder { color:rgba(229,231,235,0.65); }
|
input::placeholder, textarea::placeholder { color:rgba(229,231,235,0.48); }
|
||||||
button { padding:12px 14px; border-radius:14px; border:1px solid rgba(249,115,22,0.4); background:linear-gradient(130deg, #ff9b3d, #f97316); color:white; font-weight:800; cursor:pointer; box-shadow:0 14px 30px rgba(249,115,22,0.35); transition:transform 140ms ease, box-shadow 140ms ease, filter 140ms ease; }
|
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--border-strong); box-shadow:0 0 0 4px rgba(249,115,22,0.12); background:rgba(255,255,255,0.06); }
|
||||||
button:hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 18px 40px rgba(249,115,22,0.4); }
|
button { padding:12px 16px; border-radius:16px; border:1px solid rgba(249,115,22,0.42); background:linear-gradient(135deg, #ffb066, #f97316 58%, #ea580c); color:#fff7ed; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 16px 32px rgba(249,115,22,0.28); transition:transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, border-color 140ms ease; }
|
||||||
.secondary-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); box-shadow:0 10px 22px rgba(0,0,0,0.24); color:var(--text); }
|
button:hover { transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 20px 38px rgba(249,115,22,0.34); }
|
||||||
.danger-btn { background:linear-gradient(135deg, #ef4444, #dc2626); box-shadow:0 12px 30px rgba(239,68,68,0.35); border-color:rgba(239,68,68,0.5); }
|
.secondary-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); box-shadow:0 12px 24px rgba(0,0,0,0.22); color:var(--text); }
|
||||||
|
.danger-btn, .logout { background:linear-gradient(135deg, #ef4444, #b91c1c); box-shadow:0 14px 28px rgba(185,28,28,0.28); border-color:rgba(248,113,113,0.3); }
|
||||||
|
.logout { margin-top:0; width:100%; }
|
||||||
.row { display:flex; gap:12px; align-items:center; }
|
.row { display:flex; gap:12px; align-items:center; }
|
||||||
select { min-height:44px; }
|
select { min-height:48px; }
|
||||||
.icon-button { width:40px; height:40px; border-radius:12px; border:1px solid rgba(249,115,22,0.3); background:rgba(249,115,22,0.16); color:var(--text); font-size:18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; box-shadow:0 12px 28px rgba(0,0,0,0.28); }
|
.guild-select-shell { min-width:260px; padding:14px 16px; border-radius:18px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
|
||||||
.icon-button:hover { transform:translateY(-1px); border-color:rgba(249,115,22,0.6); background:rgba(249,115,22,0.22); box-shadow:0 14px 34px rgba(0,0,0,0.32); }
|
.icon-button { width:42px; height:42px; padding:0; border-radius:14px; border:1px solid rgba(249,115,22,0.3); background:rgba(249,115,22,0.16); color:var(--text); font-size:18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; box-shadow:0 12px 28px rgba(0,0,0,0.24); }
|
||||||
#status { margin-top:6px; color:#fbbf77; }
|
.icon-button:hover { transform:translateY(-1px); border-color:rgba(249,115,22,0.52); background:rgba(249,115,22,0.24); }
|
||||||
.logout { margin-top:auto; border:none; color:white; padding:10px 12px; border-radius:12px; cursor:pointer; background:linear-gradient(135deg, #ef4444, #b91c1c); width:100%; box-shadow:0 12px 28px rgba(239,68,68,0.32); }
|
#status { margin-top:8px; color:#f6c28b; }
|
||||||
.nav a.hidden { display:none; }
|
|
||||||
.module-list { display:flex; flex-direction:column; gap:10px; }
|
.module-list { display:flex; flex-direction:column; gap:10px; }
|
||||||
.module-item { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); box-shadow:0 12px 26px rgba(0,0,0,0.25); }
|
.module-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
|
||||||
.toggle { position:relative; width:48px; height:26px; background:rgba(255,255,255,0.14); border-radius:999px; cursor:pointer; transition:background 140ms ease, border 140ms ease, box-shadow 140ms ease; border:1px solid rgba(255,255,255,0.1); box-shadow:inset 0 2px 8px rgba(0,0,0,0.2); }
|
.toggle, .switch { position:relative; width:52px; height:28px; border-radius:999px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.12); cursor:pointer; transition:background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; box-shadow:inset 0 2px 8px rgba(0,0,0,0.2); flex-shrink:0; }
|
||||||
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#9ca3af; transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
|
.toggle::after, .switch::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#9ca3af; transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
|
||||||
.toggle.active { background:rgba(249,115,22,0.3); border-color:rgba(249,115,22,0.6); box-shadow:0 8px 20px rgba(249,115,22,0.24); }
|
.toggle.active, .switch.on { background:rgba(249,115,22,0.32); border-color:rgba(249,115,22,0.58); box-shadow:0 8px 20px rgba(249,115,22,0.22); }
|
||||||
.toggle.active::after { transform:translateX(22px); background:#ffd9b3; box-shadow:0 6px 14px rgba(249,115,22,0.35); }
|
.toggle.active::after, .switch.on::after { transform:translateX(22px); background:#fff1df; box-shadow:0 6px 14px rgba(249,115,22,0.35); }
|
||||||
.module-meta { display:flex; flex-direction:column; gap:4px; }
|
.module-meta { display:flex; flex-direction:column; gap:4px; }
|
||||||
.module-title { font-weight:700; color:var(--text); }
|
.module-title { font-weight:700; color:var(--text); }
|
||||||
.module-desc { color:var(--muted); font-size:13px; }
|
.module-desc { color:var(--muted); font-size:13px; }
|
||||||
.toast { position:fixed; top:20px; right:24px; padding:12px 14px; border-radius:12px; background:rgba(249,115,22,0.18); border:1px solid rgba(249,115,22,0.45); color:#ffe6d0; font-weight:700; box-shadow:0 12px 32px rgba(0,0,0,0.34); opacity:0; transform:translateY(-10px); transition:opacity 150ms ease, transform 150ms ease; z-index:1100; backdrop-filter:blur(10px); }
|
.toast { position:fixed; top:24px; right:24px; padding:12px 14px; border-radius:14px; background:rgba(249,115,22,0.18); border:1px solid rgba(249,115,22,0.4); color:#fff0df; font-weight:700; box-shadow:0 12px 32px rgba(0,0,0,0.34); opacity:0; transform:translateY(-10px); transition:opacity 150ms ease, transform 150ms ease; z-index:1100; backdrop-filter:blur(10px); }
|
||||||
.toast.error { background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.4); color:#ffe4e6; }
|
.toast.error { background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.36); color:#ffe4e6; }
|
||||||
.toast.show { opacity:1; transform:translateY(0); }
|
.toast.show { opacity:1; transform:translateY(0); }
|
||||||
.option-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:10px; }
|
.option-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:10px; }
|
||||||
.option-card { border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:13px; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 12px 26px rgba(0,0,0,0.25); }
|
.option-card { padding:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
|
||||||
.option-card label { font-weight:700; color:var(--text); }
|
.option-card label { font-weight:700; color:var(--text); }
|
||||||
.switch { position:relative; width:52px; height:28px; border-radius:28px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.1); cursor:pointer; transition:background 140ms ease, border 140ms ease, box-shadow 140ms ease; box-shadow:inset 0 2px 8px rgba(0,0,0,0.2); }
|
.admin-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
|
||||||
.switch::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#9ca3af; transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
|
.activity-bars { display:flex; gap:10px; align-items:flex-end; min-height:160px; padding:14px; border-radius:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); overflow:hidden; }
|
||||||
.switch.on { background:rgba(249,115,22,0.32); border-color:rgba(249,115,22,0.6); box-shadow:0 8px 20px rgba(249,115,22,0.22); }
|
.activity-bar { flex:1; background:linear-gradient(180deg, rgba(255,176,102,0.86), rgba(249,115,22,0.26)); border-radius:14px 14px 6px 6px; position:relative; min-height:6px; box-shadow:0 14px 26px rgba(0,0,0,0.26); }
|
||||||
.switch.on::after { transform:translateX(22px); background:#ffd9b3; box-shadow:0 6px 14px rgba(249,115,22,0.35); }
|
.activity-bar span { position:absolute; bottom:100%; left:50%; transform:translate(-50%, -6px); font-size:10px; color:var(--muted); white-space:nowrap; }
|
||||||
.admin-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
|
.log-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; max-height:320px; overflow:auto; }
|
||||||
.activity-bars { display:flex; gap:8px; align-items:flex-end; min-height:140px; padding:10px; border-radius:14px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); overflow:hidden; }
|
.log-item { padding:12px 14px; display:flex; gap:12px; align-items:flex-start; }
|
||||||
.activity-bar { flex:1; background:linear-gradient(130deg, rgba(249,115,22,0.4), rgba(249,115,22,0.24)); border-radius:10px 10px 4px 4px; position:relative; min-height:6px; box-shadow:0 10px 22px rgba(0,0,0,0.26); }
|
.status-card { display:flex; flex-direction:column; gap:6px; padding:12px; }
|
||||||
.activity-bar span { position:absolute; bottom:100%; left:50%; transform:translate(-50%, -4px); font-size:11px; color:var(--muted); white-space:nowrap; }
|
|
||||||
.log-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto; }
|
|
||||||
.log-item { padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); display:flex; gap:10px; align-items:flex-start; }
|
|
||||||
.log-level { padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px; }
|
|
||||||
.log-level.info { background:rgba(59,130,246,0.16); border:1px solid rgba(59,130,246,0.35); color:#bfdbfe; }
|
|
||||||
.log-level.warn { background:rgba(251,191,36,0.18); border:1px solid rgba(251,191,36,0.35); color:#fef08a; }
|
|
||||||
.log-level.error { background:rgba(239,68,68,0.18); border:1px solid rgba(239,68,68,0.4); color:#fecaca; }
|
|
||||||
.status-card { display:flex; flex-direction:column; gap:6px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:12px; background:rgba(255,255,255,0.03); box-shadow:0 12px 28px rgba(0,0,0,0.24); }
|
|
||||||
.status-top { display:flex; justify-content:space-between; gap:8px; align-items:center; }
|
.status-top { display:flex; justify-content:space-between; gap:8px; align-items:center; }
|
||||||
.status-meta { display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
|
.status-meta, .module-badges { display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
|
||||||
.status-badge { padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px; }
|
.badge { border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.06); }
|
||||||
.status-up { background:rgba(34,197,94,0.18); border:1px solid rgba(34,197,94,0.4); color:#bbf7d0; }
|
.inline { display:flex; align-items:center; gap:10px; }
|
||||||
.status-down { background:rgba(239,68,68,0.18); border:1px solid rgba(239,68,68,0.4); color:#fecaca; }
|
|
||||||
.status-unknown { background:rgba(148,163,184,0.18); border:1px solid rgba(148,163,184,0.4); color:#e2e8f0; }
|
|
||||||
.module-badges { display:flex; gap:8px; flex-wrap:wrap; }
|
|
||||||
.badge { padding:6px 10px; border-radius:12px; font-weight:700; font-size:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); }
|
|
||||||
.badge.active { border-color:rgba(249,115,22,0.4); color:#f97316; box-shadow:0 6px 18px rgba(249,115,22,0.25); }
|
|
||||||
.inline { display:flex; align-items:center; gap:8px; }
|
|
||||||
.form-row { display:flex; gap:12px; flex-wrap:wrap; }
|
.form-row { display:flex; gap:12px; flex-wrap:wrap; }
|
||||||
.form-row .form-field { flex:1; min-width:220px; }
|
.form-row .form-field { flex:1; min-width:220px; }
|
||||||
.embed-preview { margin-top:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); border-radius:14px; padding:14px; display:flex; gap:12px; box-shadow:0 12px 28px rgba(0,0,0,0.26); }
|
.embed-preview { margin-top:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); border-radius:18px; padding:14px; display:flex; gap:12px; box-shadow:0 12px 28px rgba(0,0,0,0.24); }
|
||||||
.embed-color { width:6px; border-radius:6px; background:var(--accent); }
|
.embed-color { width:6px; border-radius:999px; background:var(--accent); }
|
||||||
.embed-body { flex:1; display:flex; flex-direction:column; gap:6px; }
|
.embed-body { flex:1; display:flex; flex-direction:column; gap:6px; }
|
||||||
.embed-title { font-weight:750; }
|
.embed-title { font-weight:750; }
|
||||||
.embed-desc { white-space:pre-wrap; color:#d7dce6; }
|
.embed-desc { white-space:pre-wrap; color:#e7dccd; }
|
||||||
.embed-footer { color:#9ca3af; font-size:12px; }
|
.embed-footer { color:#a8a29e; font-size:12px; }
|
||||||
.embed-image { margin-top:8px; max-width:240px; border-radius:10px; display:block; }
|
.embed-image { margin-top:8px; max-width:240px; border-radius:12px; display:block; }
|
||||||
.modal-backdrop { position:fixed; inset:0; background:rgba(4,5,8,0.7); opacity:0; pointer-events:none; transition:opacity 160ms ease; z-index:900; backdrop-filter:blur(4px); }
|
.modal-backdrop { position:fixed; inset:0; background:rgba(4,5,8,0.72); opacity:0; pointer-events:none; transition:opacity 160ms ease; z-index:900; backdrop-filter:blur(8px); }
|
||||||
.modal-backdrop.show { opacity:1; pointer-events:auto; }
|
.modal-backdrop.show { opacity:1; pointer-events:auto; }
|
||||||
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.98); width:min(540px, calc(100% - 32px)); background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:0 25px 70px rgba(0,0,0,0.5); padding:18px 18px 16px; opacity:0; pointer-events:none; transition:opacity 160ms ease, transform 160ms ease; z-index:1000; backdrop-filter:blur(14px); }
|
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.98); width:min(560px, calc(100% - 32px)); background:linear-gradient(180deg, rgba(18,24,38,0.96), rgba(10,14,24,0.92)); border:1px solid rgba(255,255,255,0.08); border-radius:24px; box-shadow:0 28px 80px rgba(0,0,0,0.56); padding:20px 20px 18px; opacity:0; pointer-events:none; transition:opacity 160ms ease, transform 160ms ease; z-index:1000; backdrop-filter:blur(18px); }
|
||||||
.modal.show { opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1); }
|
.modal.show { opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1); }
|
||||||
.modal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
|
.modal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
|
||||||
.modal-body { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
|
.modal-body { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
|
||||||
.modal-actions { margin-top:14px; display:flex; justify-content:flex-end; gap:10px; }
|
.modal-actions { margin-top:14px; display:flex; justify-content:flex-end; gap:10px; }
|
||||||
.detail-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
|
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
|
||||||
.detail-tile { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:10px 12px; box-shadow:0 12px 26px rgba(0,0,0,0.24); }
|
.detail-tile { padding:12px 14px; }
|
||||||
.detail-label { color:var(--muted); font-size:12px; margin:0 0 4px; }
|
.detail-label { color:var(--muted); font-size:11px; margin:0 0 6px; text-transform:uppercase; letter-spacing:0.08em; }
|
||||||
.detail-value { font-weight:700; font-size:14px; }
|
.detail-value { font-weight:700; font-size:14px; }
|
||||||
.linkish { color:var(--accent-strong); text-decoration:none; font-weight:700; }
|
.linkish { color:var(--accent-strong); text-decoration:none; font-weight:700; }
|
||||||
.linkish:hover { text-decoration:underline; }
|
.linkish:hover { text-decoration:underline; }
|
||||||
.section-title { font-size:17px; font-weight:800; margin:0; }
|
.section-title { font-size:18px; font-weight:800; margin:0; letter-spacing:-0.02em; }
|
||||||
.section-sub { color:var(--muted); margin:0; font-size:13px; }
|
.section-sub { color:var(--muted); margin:4px 0 0; font-size:13px; line-height:1.5; }
|
||||||
@media (max-width: 1100px) {
|
|
||||||
.tickets-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
|
|
||||||
}
|
|
||||||
.spinner { width:28px; height:28px; border:3px solid rgba(255,255,255,0.12); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; margin:12px auto; }
|
.spinner { width:28px; height:28px; border:3px solid rgba(255,255,255,0.12); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; margin:12px auto; }
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.layout { flex-direction:column; }
|
||||||
|
.sidebar { width:100%; min-height:auto; position:relative; }
|
||||||
|
.content { padding:22px 18px 40px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.topbar { flex-direction:column; }
|
||||||
|
.guild-select-shell { width:100%; min-width:0; }
|
||||||
|
h1 { font-size:28px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.sidebar { padding:22px 14px 16px; }
|
||||||
|
.content { padding:16px 14px 32px; }
|
||||||
|
.card { padding:18px; border-radius:20px; }
|
||||||
|
.grid, .tickets-grid, .detail-grid { grid-template-columns:1fr; }
|
||||||
|
.row, .inline, .form-row { flex-direction:column; align-items:stretch; }
|
||||||
|
}
|
||||||
@keyframes spin { to { transform:rotate(360deg); } }
|
@keyframes spin { to { transform:rotate(360deg); } }
|
||||||
.loading-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px; color:var(--muted); font-size:13px; }
|
.loading-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px; color:var(--muted); font-size:13px; }
|
||||||
</style>
|
</style>
|
||||||
@@ -287,12 +353,12 @@ router.get('/', (req, res) => {
|
|||||||
<div class="layout">
|
<div class="layout">
|
||||||
${sidebar}
|
${sidebar}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
|
<div class="topbar">
|
||||||
<div>
|
<div>
|
||||||
<h1>Guild Dashboard</h1>
|
<h1>Guild Dashboard</h1>
|
||||||
<div class="muted">Dashboard & Guild-Config</div>
|
<div class="muted">Dashboard & Guild-Config</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="guild-select-shell">
|
||||||
<p class="label" style="margin:0;">Guild</p>
|
<p class="label" style="margin:0;">Guild</p>
|
||||||
<select id="guildSelect"></select>
|
<select id="guildSelect"></select>
|
||||||
<div id="status" class="muted"></div>
|
<div id="status" class="muted"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user