Old-Games-I

by velo_ninja

HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Battle-Isle-ähnliche Spiele — interaktive Liste</title>
<style>
  :root{
    --bg:#0f1724; /* dark slate */
    --card:#0b1220;
    --muted:#94a3b8;
    --accent:#60a5fa;
    --accent-2:#7c3aed;
    --glass: rgba(255,255,255,0.04);
    --glass-2: rgba(255,255,255,0.02);
    --success:#10b981;
    --danger:#ef4444;
    --radius:12px;
    --gap:14px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  html,body{height:100%;}
  body{
    margin:0;
    padding:24px;
    background: linear-gradient(180deg, #071026 0%, #081422 60%);
    color:#e6eef8;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .app {
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 320px 1fr;
    gap: var(--gap);
    align-items:start;
  }

  /* Sidebar / Menu */
  .sidebar{
    background: linear-gradient(180deg,var(--card), rgba(10,16,26,0.8));
    border-radius:var(--radius);
    padding:18px;
    box-shadow: 0 6px 24px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    min-height:320px;
  }
  .brand{
    display:flex; gap:12px; align-items:center; margin-bottom:12px;
  }
  .logo{
    width:48px; height:48px; border-radius:10px;
    background: linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex; align-items:center; justify-content:center; font-weight:700;
    box-shadow: 0 6px 18px rgba(96,165,250,0.12);
  }
  .title{
    font-size:16px; line-height:1; font-weight:700;
  }
  .subtitle{ color:var(--muted); font-size:13px; margin-top:3px; }

  .controls{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
  label.small{ font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
  .select, .search, .btn...