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,41 +6,112 @@
    <title>Backend A2</title>
    <style>
      :root {
-        --bg: #102335;
-        --card: #1d3f61;
-        --line: #4f86b3;
-        --text: #e9f2fb;
-        --muted: #c0d5e8;
+        --bg: #f3f3f6;
+        --surface: #ffffff;
+        --text: #16161a;
+        --muted: #65656e;
+        --magenta: #e20074;
+        --accent: #4b9fc4;
+        --line: #e5e5ea;
+        --shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 10px 30px rgba(20, 20, 40, 0.06);
      }

-      * { box-sizing: border-box; }
+      * {
+        box-sizing: border-box;
+      }

      body {
        margin: 0;
        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 left, #315e86, 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;
      }

-      h1 { margin-top: 0; }
-      p { color: var(--muted); }
+      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: 0.2rem 0 0.6rem;
+        font-weight: 800;
+        letter-spacing: -0.01em;
+      }
+
+      p {
+        color: var(--muted);
+        line-height: 1.55;
+      }
+
+      .tag {
+        display: inline-block;
+        background: var(--accent);
+        color: #ffffff;
+        border-radius: 999px;
+        padding: 0.2rem 0.65rem;
+        font-weight: 700;
+        font-size: 0.8rem;
+        letter-spacing: 0.03em;
+      }
    </style>
  </head>
  <body>
    <!-- INSTANCE=A2 -->
    <main>
+      <div class="brand">
+        <span class="tmark"><b>T</b></span>
+        <span>Telekom Security</span>
+      </div>
+      <span class="tag">Backend A2</span>
      <h1>Reverse Proxy Target A2</h1>
      <p>Use this page to validate load balancing between backend-a and backend-a2.</p>
    </main>