lux/templates/base.html at feat-readme-badges · ghzhost/lux · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Lux Learning Platform</title>
    <style>
      :root {
        color-scheme: dark;
        --bg: #081120;
        --panel: rgba(14, 22, 40, 0.92);
        --panel-alt: rgba(18, 29, 53, 0.96);
        --border: rgba(148, 163, 184, 0.16);
        --text: #e5eefb;
        --muted: #94a3b8;
        --accent: #7c3aed;
        --accent-2: #38bdf8;
        --success: #22c55e;
        --warning: #f59e0b;
        --danger: #ef4444;
        --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        min-height: 100vh;
        background:
          radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 35%),
          radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 26%),
          linear-gradient(180deg, #05101f 0%, #081120 40%, #0b1220 100%);
        color: var(--text);
      }
      a { color: inherit; text-decoration: none; }
      .shell { max-width: 1200px; margin: 0 auto; padding: 24px; }
      header {
        display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
        margin-bottom: 24px; padding: 18px 22px; background: var(--panel); border: 1px solid var(--border);
        border-radius: 22px; box-shadow: var(--shadow);
      }
      .brand { display: flex; flex-direction: column; gap: 4px; }
      .brand h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.02em; }
      .brand p { margin: 0; color: var(--muted); }
      nav { display: flex; flex-wrap: wrap; gap: 12px; }
      nav a {
        padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border);
        background: rgba(255,255,255,0.03);
      }
      nav a:hover { border-color: rgba(56, 189, 248, 0.35); }
      .grid { display: grid; gap: 20px; }
      .grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
      .grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
      .panel {
        background: var(--panel); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow);
        padding: 22px;
      }
      .panel.alt { background: var(--panel-alt); }
      .muted { color: var(--muted); }
      .badge, .chip {
        display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
        border: 1px solid var(--border); background: rgba(255,255,255,0.04); font-size: 0.86rem;
      }
      .badge.success { border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
      .badge.warning { border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; }
      .badge.danger { border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }
      .muted-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
      .card {
        display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px;
        background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      }
      .card:hover { border-color: rgba(124, 58, 237, 0.34); transform: translateY(-1px); transition: 150ms ease; }
      h2, h3, h4 { margin: 0; }
      p { line-height: 1.6; }
      .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
      .stat { padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
      .stat .value { display: block; font-size: 1.5rem; font-weight: 700; margin-top: 6px; }
      .filters { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
      input, select, textarea, button {
        width: 100%; border-radius: 14px; border: 1px solid var(--border); background: rgba(7, 12, 24, 0.8);
        color: var(--text); padding: 12px 14px; font: inherit;
      }
      textarea { min-height: 120px; resize: vertical; }
      button, .button {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
        background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; font-weight: 700;
        border: none;
      }
      .button.secondary { background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
      .status { padding: 14px 16px; border-radius: 16px; margin-bottom: 18px; }
      .status.ok { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); }
      .status.error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); }
      footer { margin: 26px 0 8px; color: var(--muted); text-align: center; }
      @media (max-width: 720px) {
        .shell { padding: 14px; }
        header { padding: 16px; }
      }
    </style>
  </head>
  <body>
    <div class="shell">
      <header>
        <div class="brand">
          <h1>Lux</h1>
          <p>Puzzle-driven learning for Linux, programming, security, and DevOps.</p>
        </div>
        <nav>
          <a href="/web">Puzzles</a>
          <a href="/dashboard">Dashboard</a>
          <a href="/profile">Profile</a>
          <a href="/leaderboard">Leaderboard</a>
          <a href="/contributors">Contributors</a>
          <a href="/levels">API</a>
        </nav>
      </header>

      {% block content %}{% endblock %}

      <footer>
        Built for local-first learning with CLI, web, and API access.
      </footer>
    </div>
  </body>
</html>