diff --git a/adminer/adminer.css b/adminer/adminer.css index daecd2a..7c9bdbf 100644 --- a/adminer/adminer.css +++ b/adminer/adminer.css @@ -1,113 +1,353 @@ -/* Adminer Mini-Admin UI – angelehnt an style.css (Glassmorphism + Accent) */ -:root{ - --bg:#0b1020; - --text:#e5e7eb; - --muted:#94a3b8; - --card:rgba(255,255,255,.06); - --cardBorder:rgba(255,255,255,.10); - --accent:#6366f1; - --accent2:#22d3ee; - --danger:#ef4444; - --success:#22c55e; +/* ===== ADMINER – gleicher Look wie style.css ===== */ + +/* ── RESET & BASE ─────────────────────────────── */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + --bg: #0f0f13; + --surface: #1a1a24; + --surface-hover: #22222f; + --border: rgba(255,255,255,0.07); + --text: #e8e8f0; + --text-muted: #8888a8; + --radius: 16px; + --transition: 0.25s ease; + --accent: #6366f1; } -*{box-sizing:border-box} -html,body{height:100%} -body{ - margin:0; - font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; - background:radial-gradient(1200px 600px at 20% 10%, rgba(99,102,241,.25), transparent 60%), - radial-gradient(900px 600px at 80% 30%, rgba(34,211,238,.18), transparent 60%), - radial-gradient(900px 700px at 40% 90%, rgba(168,85,247,.14), transparent 60%), - var(--bg); - color:var(--text); +html { scroll-behavior: smooth; overflow-x: hidden; } + +body { + background-color: var(--bg); + color: var(--text); + font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem 1rem 4rem; + position: relative; + overflow-x: hidden; + overflow-y: auto; } -.wrap{max-width:1100px;margin:34px auto;padding:0 16px} - -.top{ - display:flex; - align-items:center; - justify-content:space-between; - gap:12px; - margin-bottom:16px; +/* ── BACKGROUND ───────────────────────────────── */ +@keyframes bgShift { + 0% { opacity:1; transform:scale(1) translate(0,0); } + 33% { opacity:.85; transform:scale(1.15) translate(2%,3%); } + 66% { opacity:.9; transform:scale(1.08) translate(-3%,-2%); } + 100% { opacity:1; transform:scale(1) translate(0,0); } } -h1{font-size:28px;letter-spacing:.2px;margin:0} - -a{color:#93c5fd;text-decoration:none} -a:hover{text-decoration:underline} - -.pill{ - font-size:12px; - background:rgba(255,255,255,.10); - border:1px solid rgba(255,255,255,.14); - padding:5px 10px; - border-radius:999px; +.background-blur { + position:fixed; inset:-25%; z-index:-1; pointer-events:none; + background: + radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99,102,241,.18), transparent), + radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14,165,233,.13), transparent), + radial-gradient(ellipse 40% 30% at 60% 40%, rgba(168,85,247,.08), transparent); + animation: bgShift 12s ease-in-out infinite; } -.card{ - background:var(--card); - border:1px solid var(--cardBorder); - border-radius:16px; - padding:16px; - backdrop-filter: blur(14px); - box-shadow:0 18px 40px rgba(0,0,0,.35); +#particle-canvas { + position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55; } -.grid{display:grid;grid-template-columns:320px 1fr;gap:16px} -@media (max-width: 900px){.grid{grid-template-columns:1fr}} - -.muted{color:var(--muted)} - -label{display:block;color:#cbd5e1;font-weight:600} - -input,textarea,select{ - width:100%; - padding:10px 12px; - margin-top:6px; - border-radius:12px; - background:rgba(0,0,0,.35); - border:1px solid rgba(255,255,255,.14); - color:var(--text); - outline:none; +/* ── ORBS ─────────────────────────────────────── */ +.orb { + position:fixed; border-radius:50%; pointer-events:none; z-index:-1; + filter:blur(70px); opacity:0; + animation:orbFloat var(--dur,18s) ease-in-out infinite var(--delay,0s); } -input:focus,textarea:focus,select:focus{border-color:rgba(99,102,241,.75);box-shadow:0 0 0 3px rgba(99,102,241,.20)} - -hr{border:0;border-top:1px solid rgba(255,255,255,.10);margin:16px 0} - -.btn{ - display:inline-flex; - align-items:center; - justify-content:center; - gap:8px; - padding:10px 12px; - border-radius:12px; - border:1px solid rgba(255,255,255,.16); - cursor:pointer; - background:linear-gradient(135deg, rgba(99,102,241,.95), rgba(34,211,238,.55)); - color:white; - text-decoration:none; - transition:transform .12s ease, filter .12s ease; -} -.btn:hover{filter:brightness(1.06)} -.btn:active{transform:translateY(1px)} -.btn.secondary{ - background:rgba(255,255,255,.08); +.orb-1 { width:320px;height:320px; background:radial-gradient(circle,rgba(99,102,241,.25),transparent 70%); top:-80px;left:-80px; --dur:20s;--delay:0s; } +.orb-2 { width:260px;height:260px; background:radial-gradient(circle,rgba(14,165,233,.2), transparent 70%); bottom:5%;right:-60px; --dur:17s;--delay:-6s; } +.orb-3 { width:200px;height:200px; background:radial-gradient(circle,rgba(168,85,247,.18),transparent 70%); top:45%;left:-40px; --dur:23s;--delay:-11s;} +.orb-4 { width:180px;height:180px; background:radial-gradient(circle,rgba(236,72,153,.15), transparent 70%); top:20%;right:-30px; --dur:19s;--delay:-4s; } +@keyframes orbFloat { + 0% {opacity:0; transform:translate(0,0) scale(1); } + 10% {opacity:1;} + 50% {opacity:1; transform:translate(20px,25px) scale(1.08); } + 90% {opacity:1;} + 100%{opacity:0; transform:translate(0,0) scale(1); } } -.notice{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14)} -.notice.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25);color:#bbf7d0} -.notice.err{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25);color:#fecaca} +/* Grid lines */ +body::before { + content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; + background-image: + linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); + background-size:60px 60px; + mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); + -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); +} -.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px} -.table th,.table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:top} -.table th{color:#cbd5e1;text-align:left;font-weight:700;background:rgba(255,255,255,.04)} -.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace} +/* ── LAYOUT ───────────────────────────────────── */ +.wrap { + width: 100%; + max-width: 900px; +} -.list{list-style:none;margin:0;padding:0} -.list li{margin:6px 0} -.list a{display:block;padding:8px 10px;border-radius:12px} -.list a:hover{background:rgba(255,255,255,.06)} -.list a.active{background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.25)} +/* ── ANIMATIONS ───────────────────────────────── */ +@keyframes fadeDown { + from { opacity:0; transform:translateY(-20px); } + to { opacity:1; transform:translateY(0); } +} +@keyframes fadeUp { + from { opacity:0; transform:translateY(24px); } + to { opacity:1; transform:translateY(0); } +} +@keyframes shimmerText { + from { background-position:0% center; } + to { background-position:200% center; } +} +/* ── HEADER ───────────────────────────────────── */ +.admin-header { + text-align:center; + margin-bottom: 2.5rem; + margin-top: 1.5rem; + animation: fadeDown .7s ease both; +} + +@keyframes avatarPulse { + 0%,100% { box-shadow:0 0 0 4px rgba(99,102,241,.2),0 0 20px rgba(99,102,241,.1); } + 50% { box-shadow:0 0 0 8px rgba(99,102,241,.12),0 0 40px rgba(99,102,241,.2); } +} + +.admin-avatar { + width:72px; height:72px; border-radius:50%; + background:linear-gradient(135deg,#6366f1,#0ea5e9); + display:flex; align-items:center; justify-content:center; + font-size:1.6rem; font-weight:700; + margin:0 auto 1rem; + animation:avatarPulse 3s ease-in-out infinite; + transition:transform .3s ease; + cursor:default; user-select:none; +} +.admin-avatar:hover { transform:scale(1.08) rotate(6deg); } + +.admin-title { + font-size: clamp(1.5rem,3.5vw,2.2rem); + font-weight:700; + background:linear-gradient(90deg,#e8e8f0 0%,#6366f1 40%,#0ea5e9 60%,#e8e8f0 100%); + background-size:200% auto; + -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; + letter-spacing:-.5px; + animation:shimmerText 5s linear infinite; +} + +.admin-subtitle { + color:var(--text-muted); + margin-top:.4rem; + font-size:.95rem; + animation: fadeDown .9s ease .3s both; +} + +/* ── PILL / TAG ───────────────────────────────── */ +.pill { + display:inline-block; + font-size:.72rem; font-weight:600; + text-transform:uppercase; letter-spacing:1px; + color:var(--text-muted); + background:rgba(255,255,255,.06); + border:1px solid var(--border); + padding:3px 10px; border-radius:999px; + vertical-align:middle; margin-left:8px; +} + +/* ── CARD ─────────────────────────────────────── */ +.card { + background:var(--surface); + border:1px solid var(--border); + border-radius:var(--radius); + padding:1.4rem 1.6rem; + position:relative; + overflow:hidden; + animation: fadeUp .5s ease both; +} +.card::before { + content:''; position:absolute; inset:0; border-radius:var(--radius); + opacity:0; transition:opacity var(--transition); + background:linear-gradient(135deg,rgba(99,102,241,.07),transparent 60%); + pointer-events:none; +} +.card:hover::before { opacity:1; } + +/* ── GRID LAYOUT ──────────────────────────────── */ +.admin-grid { + display:grid; + grid-template-columns:240px 1fr; + gap:16px; + align-items:start; +} +@media(max-width:700px){ .admin-grid{ grid-template-columns:1fr; } } + +/* ── TYPOGRAPHY ───────────────────────────────── */ +h2 { + font-size:1rem; font-weight:700; + color:var(--text-muted); + text-transform:uppercase; letter-spacing:1.2px; + margin-bottom:.75rem; + padding-bottom:.5rem; + border-bottom:1px solid var(--border); +} +h3 { + font-size:.95rem; font-weight:600; color:var(--text-muted); + text-transform:uppercase; letter-spacing:1px; + margin-bottom:.6rem; +} +a { color:#93c5fd; text-decoration:none; } +a:hover { text-decoration:underline; } +.muted { color:var(--text-muted); font-size:.88rem; } +code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em; + background:rgba(255,255,255,.06); border:1px solid var(--border); padding:1px 5px; border-radius:5px; } + +hr { border:0; border-top:1px solid var(--border); margin:1.2rem 0; } + +/* ── FORM ─────────────────────────────────────── */ +label { + display:block; + font-size:.82rem; font-weight:600; color:var(--text-muted); + text-transform:uppercase; letter-spacing:.8px; + margin-bottom:.35rem; +} +input, textarea, select { + width:100%; padding:10px 14px; + border-radius:12px; + background:rgba(255,255,255,.04); + border:1px solid var(--border); + color:var(--text); + font-family:inherit; font-size:.95rem; + outline:none; + transition:border-color var(--transition), box-shadow var(--transition); +} +input:focus, textarea:focus, select:focus { + border-color:rgba(99,102,241,.7); + box-shadow:0 0 0 3px rgba(99,102,241,.15); +} +textarea { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; resize:vertical; } + +.field { margin-bottom:1rem; } + +/* ── BUTTONS ──────────────────────────────────── */ +.btn { + display:inline-flex; align-items:center; justify-content:center; gap:6px; + padding:10px 18px; border-radius:var(--radius); + border:1px solid rgba(255,255,255,.12); + cursor:pointer; font-size:.9rem; font-weight:600; letter-spacing:.2px; + background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(14,165,233,.65)); + color:#fff; + text-decoration:none; + transition:transform var(--transition), filter var(--transition), box-shadow var(--transition); + box-shadow:0 4px 18px rgba(99,102,241,.25); + white-space:nowrap; +} +.btn:hover { filter:brightness(1.1); transform:translateY(-1px); text-decoration:none; } +.btn:active { transform:translateY(1px); } + +.btn-sm { padding:7px 12px; font-size:.82rem; border-radius:10px; } + +.btn-ghost { + background:rgba(255,255,255,.06); + border:1px solid var(--border); + box-shadow:none; +} +.btn-ghost:hover { background:rgba(255,255,255,.1); filter:none; } + +/* ── TABS ─────────────────────────────────────── */ +.tabs { display:flex; gap:6px; margin-bottom:1.4rem; } +.tab { + padding:8px 18px; border-radius:10px; font-size:.88rem; font-weight:600; + border:1px solid var(--border); + background:rgba(255,255,255,.04); color:var(--text-muted); + text-decoration:none; transition:background var(--transition), color var(--transition), border-color var(--transition); + cursor:pointer; +} +.tab:hover { background:rgba(255,255,255,.08); color:var(--text); text-decoration:none; } +.tab.active { + background:rgba(99,102,241,.18); border-color:rgba(99,102,241,.4); + color:#a5b4fc; +} + +/* ── NOTICE / ALERTS ──────────────────────────── */ +.notice { + padding:10px 14px; border-radius:12px; font-size:.88rem; + border:1px solid var(--border); margin-bottom:1rem; +} +.notice-ok { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.25); color:#86efac; } +.notice-err { background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.25); color:#fca5a5; } + +/* ── NAV LIST (Tabellenliste) ─────────────────── */ +.nav-list { list-style:none; } +.nav-list li { margin:3px 0; } +.nav-list a { + display:block; padding:8px 12px; border-radius:12px; + color:var(--text-muted); font-size:.88rem; + border:1px solid transparent; + transition:background var(--transition), color var(--transition), border-color var(--transition); +} +.nav-list a:hover { background:var(--surface-hover); color:var(--text); text-decoration:none; } +.nav-list a.active { + background:rgba(99,102,241,.12); + border-color:rgba(99,102,241,.25); + color:#a5b4fc; +} + +/* ── TABLE ────────────────────────────────────── */ +.db-table { + width:100%; border-collapse:collapse; font-size:.85rem; + overflow:hidden; +} +.db-table thead th { + padding:9px 10px; text-align:left; + font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; + color:var(--text-muted); + background:rgba(255,255,255,.03); + border-bottom:1px solid var(--border); +} +.db-table tbody td { + padding:9px 10px; + border-bottom:1px solid var(--border); + vertical-align:top; + font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; + font-size:.82rem; + color:var(--text); + word-break:break-word; + max-width:280px; + overflow:hidden; text-overflow:ellipsis; white-space:nowrap; +} +.db-table tbody tr:hover td { background:rgba(255,255,255,.025); } +.db-table tbody tr:last-child td { border-bottom:none; } +.null-val { color:var(--text-muted); font-style:italic; font-size:.8rem; } + +/* ── PAGINATION ───────────────────────────────── */ +.pagination { display:flex; gap:8px; margin-top:12px; align-items:center; } + +/* ── TOP BAR ──────────────────────────────────── */ +.top-bar { + display:flex; align-items:center; justify-content:space-between; gap:12px; + margin-bottom:1.4rem; + flex-wrap:wrap; +} +.top-bar-left { display:flex; align-items:center; gap:10px; } +.top-bar-actions { display:flex; gap:8px; flex-wrap:wrap; } + +/* ── LOGIN CARD CENTERED ──────────────────────── */ +.login-wrap { + width:100%; max-width:420px; + margin:0 auto; + animation: fadeUp .5s ease both; +} + +/* ── BACK LINK ────────────────────────────────── */ +.back-link { + display:inline-flex; align-items:center; gap:5px; + color:var(--text-muted); font-size:.85rem; + margin-bottom:1.2rem; +} +.back-link:hover { color:var(--text); text-decoration:none; } + +@media(max-width:480px) { + body { padding:1.2rem .75rem 3rem; } + .admin-grid { grid-template-columns:1fr; } +} diff --git a/adminer/index.php b/adminer/index.php index e51669d..29672d1 100644 --- a/adminer/index.php +++ b/adminer/index.php @@ -10,131 +10,117 @@ adminer_app_session_start(); try { adminer_app_bootstrap(); } catch (Throwable $e) { - admin_layout('DB-Verwaltung', '
FabianWebsite.adminer_users gespeichert.Bereits ein Konto? Login
'; } else { - if ($appError) $body .= 'Noch kein Konto? Registrieren
'; } + $body .= 'Zuerst Verbindungsdaten prüfen (ohne DB), dann bekommst du eine Datenbank-Auswahl. Defaults kommen aus .env.
Keine Tabellen gefunden.
'; } else { - $body .= '' . h($table) . '(keine Zeilen)
'; $cols = array_keys((array)$rows[0]); - $html = '| ' . h((string)$c) . ' | '; - } + $html = '
|---|
| ' . h((string)$c) . ' | '; $html .= '
|---|
| ' . $cell . ' | '; } $html .= '