Stelle HTML-Seiten auf Telekom Security CI um

Helles, modernes Layout (weisse Cards, dezente Schatten) statt des dunklen Themes. Magenta nur als Akzent (Links, Nav-Hover, T-Marke). Brand: kompaktes magenta "T" + Wortmarke "Telekom Security". Difficulty-Badges auf Telekom-Funktionsfarben, Backends mit eigenem Akzentstreifen je Service. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-05-31 23:11:00 +02:00
parent 90c9ef648b
commit a0e6dec8f4
8 changed files with 955 additions and 298 deletions
@@ -6,12 +6,16 @@
    <title>Backend A</title>
    <style>
      :root {
-        --bg: #0f1b2e;
-        --card: #173252;
-        --line: #3a6e96;
-        --text: #e9f2fb;
-        --muted: #b6cce0;
-        --accent: #4ecdc4;
+        --bg: #f3f3f6;
+        --surface: #ffffff;
+        --text: #16161a;
+        --muted: #65656e;
+        --magenta: #e20074;
+        --accent: #00739f;
+        --line: #e5e5ea;
+        --code-bg: #f4f4f7;
+        --code-line: #e2e2e8;
+        --shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 10px 30px rgba(20, 20, 40, 0.06);
      }

      * {
@@ -23,49 +27,101 @@
        min-height: 100vh;
        display: grid;
        place-items: center;
-        padding: 1rem;
-        font-family: "Fira Sans", "Segoe UI", sans-serif;
+        padding: 1.5rem;
+        font-family: "TeleNeo", "Segoe UI", system-ui, -apple-system, sans-serif;
        color: var(--text);
-        background: radial-gradient(circle at top right, #22456b, var(--bg) 60%);
+        background: var(--bg);
      }

      main {
+        position: relative;
        width: min(760px, 100%);
-        background: var(--card);
+        background: var(--surface);
        border: 1px solid var(--line);
-        border-radius: 14px;
-        padding: 1.1rem;
+        border-radius: 16px;
+        padding: 1.8rem;
+        box-shadow: var(--shadow);
+        overflow: hidden;
+      }
+
+      main::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 5px;
+        background: var(--accent);
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 0.65rem;
+        margin-bottom: 1.4rem;
+      }
+
+      .tmark {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+      }
+
+      .tmark b {
+        font-size: 1.45rem;
+        font-weight: 800;
+        color: var(--magenta);
+        margin: 0 1px;
+        line-height: 1;
+      }
+
+      .brand span {
+        font-size: 0.78rem;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--muted);
      }

      h1 {
-        margin-top: 0;
+        margin: 0.2rem 0 0.6rem;
+        font-weight: 800;
+        letter-spacing: -0.01em;
      }

      p {
        color: var(--muted);
+        line-height: 1.55;
      }

      code {
-        background: #0f2438;
-        border: 1px solid #2d587a;
+        font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
+        background: var(--code-bg);
+        border: 1px solid var(--code-line);
        border-radius: 6px;
        padding: 0.1rem 0.35rem;
+        color: #2a2a30;
      }

      .tag {
        display: inline-block;
        background: var(--accent);
-        color: #072420;
+        color: #ffffff;
        border-radius: 999px;
-        padding: 0.15rem 0.55rem;
+        padding: 0.2rem 0.65rem;
        font-weight: 700;
-        font-size: 0.85rem;
+        font-size: 0.8rem;
+        letter-spacing: 0.03em;
      }
    </style>
  </head>
  <body>
    <!-- INSTANCE=A -->
    <main>
+      <div class="brand">
+        <span class="tmark"><b>T</b></span>
+        <span>Telekom Security</span>
+      </div>
      <span class="tag">Backend A</span>
      <h1>Reverse Proxy Target A</h1>
      <p>This page is served by backend A and reached through Nginx reverse proxy.</p>