From d6a1dbc40ad6db58feaaa3dc3f7291ba6f1fb4d8 Mon Sep 17 00:00:00 2001
From: pedro <pedro.gallego@mobadoo.com>
Date: Thu, 4 Sep 2025 19:19:10 +0200
Subject: [PATCH] Logos look and feel

---
 .../dist/html/assets/img/Confianza23.png      | Bin 0 -> 5903 bytes
 docker/nginx/dist/html/index.html             | 174 ++++++++++++++----
 2 files changed, 134 insertions(+), 40 deletions(-)
 create mode 100644 docker/nginx/dist/html/assets/img/Confianza23.png

diff --git a/docker/nginx/dist/html/assets/img/Confianza23.png b/docker/nginx/dist/html/assets/img/Confianza23.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f88c6c5f2d479c42dab7d90bad51e6e5df454c8
GIT binary patch
literal 5903
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

literal 0
HcmV?d00001

diff --git a/docker/nginx/dist/html/index.html b/docker/nginx/dist/html/index.html
index a93c3744..c25ebdf3 100644
--- a/docker/nginx/dist/html/index.html
+++ b/docker/nginx/dist/html/index.html
@@ -3,24 +3,45 @@
 <head>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">
     <meta charset="UTF-8">
-    <!--Setup Font Awesome-->
+    <!-- Font Awesome local -->
     <link href="assets/fonts/awesome/css/all.css" rel="stylesheet">
-    <!--Setup Particles, Particles Conf, Clock-->
-    <!-- Check integrity: openssl dgst -sha384 -binary your.file.name | openssl base64 -A-->
+    <!-- Particles, Config y Clock (local) -->
     <script src="assets/js/particles.min.js" defer integrity="sha384-d+UOwmNNIC7V4izkTAKSXzWhjC2GxiS9PTykO1XdOPC3nc2z65UOS7SP6QdKPA70" crossorigin="anonymous"></script>
     <script src="assets/js/particles_conf.js" defer integrity="sha384-0191YAiOrh905UCYh44ZxeO+pKbvuEOIDEmo3F6qHKDL8FO8s66r6P2w8NGMWp7I" crossorigin="anonymous"></script>
     <script src="assets/js/clock.js" defer integrity="sha384-ymJnuq0yExd1vCEQFQAvYDv0IWfHL1XJYSRt2nyK73ofjF6GzG5baOjLN1dLkGLI" crossorigin="anonymous"></script>
 
     <title>T-Pot</title>
     <style>
-        /* russo-one-regular - latin */
+        /* === Paleta Confianza23 ===
+           Azul oscuro: #003366
+           Azul medio:  #00539A
+           Azul claro:  #0A79D1
+           Acento (bandera): #E31E24 (rojo) / #F7C600 (amarillo) — usar muy sutil
+        */
+
+        /* russo-one-regular - latin (local) */
         @font-face {
-          font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+          font-display: swap;
           font-family: 'Russo One';
           font-style: normal;
           font-weight: 400;
-          src: url('assets/fonts/russo-one-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+          src: url('assets/fonts/russo-one-v16-latin-regular.woff2') format('woff2');
         }
+
+        :root{
+            --c23-dark:#003366;
+            --c23-mid:#00539A;
+            --c23-light:#0A79D1;
+            --c23-bg:#0b1220; /* fondo base muy oscuro azulado */
+            --c23-panel: rgba(255,255,255,0.08);
+            --c23-panel-hover: rgba(255,255,255,0.12);
+            --c23-text:#EAF2FF;
+            --c23-muted:#A9C4E6;
+            --c23-shadow: rgba(10,121,209,0.45);
+        }
+
+        *{ box-sizing: border-box; }
+
         body, html {
             margin: 0;
             padding: 0;
@@ -30,25 +51,47 @@
             justify-content: center;
             align-items: center;
             overflow: hidden;
-            background-color: #000;
-            font-family: 'Russo One', normal;
+
+            /* Fondo con gradiente corporativo + fallback color */
+            background: var(--c23-bg);
+            background-image: radial-gradient(1200px 600px at 80% 30%, rgba(10,121,209,0.18), transparent 60%),
+                              radial-gradient(900px 500px at 20% 70%, rgba(0,83,154,0.22), transparent 60%),
+                              linear-gradient(180deg, #091326 0%, #070C17 100%);
+            color: var(--c23-text);
+            font-family: 'Russo One', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
+            letter-spacing: .2px;
         }
+
+        /* Cabecera (reutiliza estructura original) */
         .header-container {
             display: flex;
             justify-content: space-between;
             align-items: center;
             position: absolute;
-            top: 0px;
+            top: 0;
             left: 20px;
             right: 20px;
+            padding: 14px 10px;
+            border-bottom: 1px solid rgba(255,255,255,0.06);
+            backdrop-filter: blur(6px);
         }
+
         .clock-container, .dynamic-text {
-            color: #e20074;
-            font-size: 72px;
+            color: var(--c23-light);
+            font-size: 64px;
+            line-height: 1;
+            text-shadow: 0 0 14px rgba(10,121,209,0.35);
         }
-        .dynamic-text {
+
+        /* Subtítulo versión */
+        .dynamic-text{
             text-align: right;
+            color: var(--c23-muted);
+            font-size: 40px;
+            text-shadow: none;
         }
+
+        /* Contenedor de logo centrado a la derecha (igual estructura) */
         .logo-container {
             width: 100%;
             display: flex;
@@ -56,79 +99,128 @@
             position: absolute;
             top: 45%;
             transform: translateY(-50%);
+            pointer-events: none;
         }
+
         .logo {
-            width: 25vw;
+            width: 26vw;
+            max-width: 520px;
             height: auto;
             position: relative;
-            opacity: 0.9;
             right: 10%;
             z-index: 1;
+            opacity: 0.92;
+            filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
         }
+
+        /* Partículas por detrás */
         #particles-js {
             position: absolute;
             width: 100%;
             height: 100%;
             z-index: 1;
         }
+
+        /* Cajones de enlaces (misma estructura y enlaces) */
         .boxes-container {
             display: flex;
             justify-content: flex-start;
             position: absolute;
-            bottom: 50px;
+            bottom: 48px;
             left: 20px;
             padding: 0 20px;
+            gap: 20px;
+            z-index: 10;
         }
+
         .link-box {
             margin: 0 10px;
-            padding: 20px;
-            padding-top: 60px;
-            background: rgba(51, 51, 51, 0.3);
-            border-radius: 20px;
+            padding: 22px;
+            padding-top: 64px;
+            background: var(--c23-panel);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 16px;
             text-align: center;
-            transition: box-shadow 0.5s ease;
+            transition: box-shadow 280ms ease, background 220ms ease, transform 180ms ease;
             z-index: 10;
-            box-sizing: border-box;
             position: relative;
-            width: 400px; /* Adjust as needed */
+            width: 400px;
             min-height: 500px;
             max-width: 100%;
             display: flex;
             flex-direction: column;
-            justify-content: top;
+            justify-content: flex-start;
             align-items: center;
+            backdrop-filter: blur(6px);
         }
+
+        /* Títulos con iconos (no se tocan los data-caption ni clases) */
         .links-box::before, .tools-box::before {
             font-family: 'FontAwesome';
             content: attr(data-caption);
             position: absolute;
-            top: -20px;
+            top: -24px;
             left: 50%;
             transform: translateX(-50%);
-            background: transparent;
-            color: #FFF;
-            padding: 0 10px;
-            font-size: 36px;
-            white-space: nowrap;
+            background: linear-gradient(90deg, var(--c23-dark), var(--c23-mid));
+            color: #fff;
+            padding: 6px 14px;
+            font-size: 28px;
+            border-radius: 999px;
+            border: 1px solid rgba(255,255,255,0.10);
+            box-shadow: 0 6px 18px var(--c23-shadow);
         }
+
         .link-box:hover {
-            box-shadow: 0 0 15px 5px rgba(226, 0, 116, 0.6);
-            background: rgba(51, 51, 51, 0.3);
+            box-shadow: 0 12px 32px var(--c23-shadow);
+            background: var(--c23-panel-hover);
+            transform: translateY(-2px);
         }
+
         .link-box:hover::before {
-            color: #e20074;
-            transition: color 0.5s ease;
+            background: linear-gradient(90deg, var(--c23-mid), var(--c23-light));
         }
+
         .link {
             display: block;
-            color: #FFF;
+            color: var(--c23-text);
             text-decoration: none;
-            margin: 10px 0;
-            font-size: 42px;
-            transition: color 0.5s ease;
+            margin: 12px 0;
+            font-size: 36px;
+            line-height: 1.25;
+            transition: color 200ms ease, transform 120ms ease;
+            text-shadow: 0 1px 0 rgba(0,0,0,0.2);
         }
+
         .link:hover {
-            color: #e20074;
+            color: var(--c23-light);
+            transform: translateY(-1px);
+        }
+
+        /* Micro-detalle de acento “bandera” en la parte baja de las cajas */
+        .link-box::after{
+            content: "";
+            position: absolute;
+            bottom: 10px; left: 50%;
+            transform: translateX(-50%);
+            width: 46px; height: 4px;
+            background: linear-gradient(90deg, #E31E24 0 50%, #F7C600 50% 100%);
+            border-radius: 2px;
+            opacity: .85;
+        }
+
+        /* Responsivo básico */
+        @media (max-width: 1200px){
+            .clock-container{ font-size: 48px; }
+            .dynamic-text{ font-size: 28px; }
+            .logo{ width: 38vw; right: 6%; }
+            .link{ font-size: 28px; }
+            .link-box{ width: 340px; min-height: 440px; }
+        }
+        @media (max-width: 860px){
+            .boxes-container{ flex-direction: column; left: 50%; transform: translateX(-50%); }
+            .link-box{ width: 86vw; }
+            .logo{ display:none; }
         }
     </style>
 </head>
@@ -138,11 +230,13 @@
 
 <div class="header-container">
     <div class="clock-container" id="clock"></div>
-    <div class="dynamic-text">T-Pot 24.04.1</div>
+    <div class="dynamic-text">Confianza23 · T-Pot 24.04.1</div>
 </div>
 
 <div class="logo-container">
-    <img src="assets/img/logo.webp" alt="T-Pot Logo" class="logo">
+    <!-- OPCIONAL: cambia a tu logo corporativo si ya lo tienes en assets -->
+    <!-- <img src="assets/img/confianza23_logo.png" alt="Confianza23" class="logo"> -->
+    <img src="assets/img/Confianza23.png" alt="C23 Logo" class="logo">
 </div>
 
 <div class="boxes-container">