csbot styly

2026-05-27 13:01:56 +02:00
parent 8585690de0
commit dcc1a2f3ad
3 changed files with 84 additions and 24 deletions
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW SE -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="99.9999mm" height="29.0014mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 6437.05 1866.84"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil1 {fill:#C83676}
+    .fil2 {fill:#1E516B}
+    .fil0 {fill:#C83676;fill-rule:nonzero}
+    .fil3 {fill:#1E516B;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Vrstva_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M6437.05 46.98l-1596.61 0c66.44,40.31 127.71,87.45 182.9,140.57 88.97,85.65 161.96,186.57 215.15,299.17l222.07 0 0 1335.01 471.31 0 0 -1335.01 505.18 0 0 -439.75z"/>
+  <path class="fil1" d="M4248.95 1866.84c553.63,0 975.32,-400.28 975.32,-929.09 0,-533.7 -421.69,-937.74 -974.2,-937.74 -361.38,0 -666.78,172.88 -834.83,441.83 2.98,21.97 4.51,44.23 4.51,66.7 0,62.36 -11.29,120.5 -29.64,172.17 -12.3,34.68 -27.97,66.57 -45.66,95.02 49.75,29.38 96.2,67.68 136.4,113.53 87.06,99.29 146.12,234.48 146.12,390.51 0,109.19 -29.04,215.73 -82.5,310.17 174.95,172.52 422.58,276.9 704.48,276.9zm1.13 -448.76c-282.25,0 -498.37,-210.47 -498.37,-483.71 0,-274.75 216.12,-486.35 498.37,-486.35 282.26,0 498.39,211.61 498.39,486.35 0,273.24 -216.12,483.71 -498.39,483.71z"/>
+  <path class="fil1" d="M4373.97 825.35c120.2,-32.2 243.76,39.13 275.97,159.34 32.2,120.19 -39.12,243.76 -159.34,275.96 -120.2,32.2 -243.75,-39.12 -275.97,-159.33 -32.2,-120.2 39.13,-243.76 159.34,-275.97zm-11.6 167.99c-33.56,39.2 -47.91,93.74 -33.49,147.33 9.49,35.25 -12.37,17.75 -26.22,-0.54 -12.11,-16 -21.29,-34.64 -26.8,-55.22 -13.5,-50.39 -1.67,-101.63 27.69,-140.15 43.77,-57.44 129.73,-34.19 58.81,48.59z"/>
+  <path class="fil1" d="M3112.01 821.98c30.83,0 70.26,-23.46 105.5,-64.31l0.24 0c48.12,-55.76 88.43,-143.94 88.43,-249.15 0,-244.3 -235.28,-461.16 -557.38,-461.16l-583.69 0 0 21.09 0 504.53 0 125.01 0 47.04c45,26.76 85.86,52.95 105.93,69.42 73.91,60.7 133.14,130.2 174.35,210.08 42.25,81.95 65.18,172.98 65.18,274.41 0,199.37 -89.26,362.25 -230.35,477.47 -19.71,16.11 -40.45,31.22 -62.09,45.33l705.58 0c354.41,0 589.7,-260.84 589.7,-541.97 0,-267.6 -212.36,-457.78 -401.4,-457.78zm-200.45 -228.88c0,91.33 -77.42,141.69 -180.4,141.69l-112.76 0 0 -277.75 116.14 0c101.86,0 177.03,50.36 177.03,136.06zm-60.77 800.18l-232.65 0 0 -337.13 236.03 1.13c133.41,0 208.21,62.76 208.21,166.49 0,116.89 -103.35,169.51 -211.59,169.51z"/>
+  <path class="fil2" d="M968.93 1859.7c88.14,0 171.59,-11.39 249.9,-32.1 -98.89,-59.59 -178.36,-137.41 -227.9,-229.16 -10.85,-18.7 -50.51,-87.56 -58.7,-181.17l0.25 -0.03c-0.13,-1.58 -0.23,-3.15 -0.3,-4.72 -239.09,-18.42 -454.1,-214.49 -454.1,-475.9 0,-271.74 227.75,-479.58 501,-479.58 20.97,0 42.28,1.68 63.74,4.89 21.71,-150.03 100.72,-278.78 215.6,-374.92 9.36,-7.85 18.99,-15.46 28.83,-22.85 -101.65,-37.37 -207.11,-58.13 -309.29,-59.65 -552.87,0 -977.94,404.03 -977.94,928.72 0,556.63 467.93,926.46 968.93,926.46z"/>
+  <path class="fil3" d="M1726.5 1846.54c355.56,0 670.52,-209.71 670.52,-547.61 0,-165.95 -73.57,-295.06 -197.83,-397.1 -39.59,-32.51 -216.03,-132.45 -263.33,-152.39 -191.68,-80.42 -317.22,-107.11 -317.22,-188.67 0,-60.51 69.54,-110.13 166.13,-110.13 81.15,0 209.33,37.07 266.8,122.34l0 -504.53c-79.76,-30.98 -171.82,-48.52 -272.05,-48.52 -337.15,0 -629.17,219.12 -629.17,526.56 0,267.98 192.8,416.06 417.56,513.03 174.01,77.42 355.55,157.86 355.55,249.56 0,72.54 -97.72,108.99 -198.07,108.99 -148.45,0 -286.06,-68.48 -359.72,-177.47 -98.8,88.9 -199.57,143.87 -320.31,166.89 6.6,75.61 41.44,129.94 45.36,137.19 98.74,182.94 354.95,301.85 635.8,301.85z"/>
+ </g>
+</svg>
@@ -1,14 +1,17 @@
 :root {
-    --bg: #f6f7fb;
+    --bg: #f4f8fa;
    --card: #ffffff;
-    --text: #1f2937;
-    --muted: #6b7280;
-    --border: #e5e7eb;
-    --primary: #2563eb;
-    --primary-dark: #1d4ed8;
-    --danger: #dc2626;
-    --danger-dark: #b91c1c;
-    --success: #16a34a;
+    --text: #183747;
+    --muted: #627987;
+    --border: #d8e5eb;
+    --primary: #c83676;
+    --primary-dark: #a92a62;
+    --secondary: #1e516b;
+    --secondary-dark: #173d51;
+    --danger: #b8223e;
+    --danger-dark: #941a31;
+    --success: #188654;
+    --success-bg: #e7f5ee;
 }

 * {
@@ -18,29 +21,51 @@
 body {
    margin: 0;
    font-family: Arial, sans-serif;
-    background: var(--bg);
+    background: linear-gradient(180deg, #eef6f9 0, var(--bg) 220px);
    color: var(--text);
 }

 header {
-    background: #111827;
+    background: var(--secondary);
    color: white;
-    padding: 18px 32px;
+    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
+    border-bottom: 5px solid var(--primary);
+    box-shadow: 0 10px 26px rgba(30, 81, 107, 0.16);
 }

-header h1 {
-    margin: 0;
-    font-size: 22px;
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+    color: white;
+    text-decoration: none;
+    font-weight: 800;
+    font-size: 19px;
+}
+
+.brand:hover {
+    text-decoration: none;
+}
+
+.brand img {
+    display: block;
+    width: 148px;
+    height: auto;
+    background: white;
+    border-radius: 6px;
+    padding: 6px 8px;
 }

 nav a {
    color: white;
    text-decoration: none;
-    margin-left: 18px;
+    margin-left: 8px;
    font-weight: 600;
+    padding: 9px 12px;
+    border-radius: 8px;
 }

 main {
@@ -52,12 +77,16 @@ main {
 .card {
    background: var(--card);
    border: 1px solid var(--border);
-    border-radius: 14px;
+    border-radius: 8px;
    padding: 22px;
-    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+    box-shadow: 0 8px 24px rgba(30, 81, 107, 0.07);
    margin-bottom: 24px;
 }

+.card h2 {
+    color: var(--secondary);
+}
+
 .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -83,7 +112,8 @@ th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
-    background: #f9fafb;
+    background: #eef6f9;
+    border-top: 1px solid var(--border);
 }

 a {
@@ -133,8 +163,8 @@ button:hover,
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
-    background: #dcfce7;
-    color: #166534;
+    background: var(--success-bg);
+    color: var(--success);
    font-weight: 700;
 }

@@ -149,7 +179,8 @@ select {
 input[readonly] {
    width: 100%;
    font-family: monospace;
-    background: #f9fafb;
+    background: #f8fbfc;
+    color: var(--secondary-dark);
 }

 .cmd-row {
@@ -192,7 +223,7 @@ details summary {
 }

 pre {
-    background: #111827;
+    background: var(--secondary-dark);
    color: #e5e7eb;
    padding: 18px;
    border-radius: 12px;
@@ -13,7 +13,10 @@ def page(title: str, body: str) -> str:
    </head>
    <body>
        <header>
-            <h1>AppFactory</h1>
+            <a class="brand" href="/portal" aria-label="AppFactory Portal">
+                <img src="{PORTAL_PREFIX}/static/csbot-logo.svg" alt="CSBOT">
+                <span>AppFactory</span>
+            </a>
            <nav>
                <a href="/portal">Apps</a>
                <a href="/portal/new-app">New App</a>