mirror of
https://github.com/telekom-security/tpotce.git
synced 2025-10-13 20:09:13 +00:00
Logos look and feel
This commit is contained in:
pedro
parent
ff74ba91c2
commit
d6a1dbc40a
2 changed files with 134 additions and 40 deletions
BIN
docker/nginx/dist/html/assets/img/Confianza23.png
vendored
Normal file
BIN
docker/nginx/dist/html/assets/img/Confianza23.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
174
docker/nginx/dist/html/index.html
vendored
174
docker/nginx/dist/html/index.html
vendored
|
|
@ -3,24 +3,45 @@
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<!--Setup Font Awesome-->
|
<!-- Font Awesome local -->
|
||||||
<link href="assets/fonts/awesome/css/all.css" rel="stylesheet">
|
<link href="assets/fonts/awesome/css/all.css" rel="stylesheet">
|
||||||
<!--Setup Particles, Particles Conf, Clock-->
|
<!-- Particles, Config y Clock (local) -->
|
||||||
<!-- Check integrity: openssl dgst -sha384 -binary your.file.name | openssl base64 -A-->
|
|
||||||
<script src="assets/js/particles.min.js" defer integrity="sha384-d+UOwmNNIC7V4izkTAKSXzWhjC2GxiS9PTykO1XdOPC3nc2z65UOS7SP6QdKPA70" crossorigin="anonymous"></script>
|
<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/particles_conf.js" defer integrity="sha384-0191YAiOrh905UCYh44ZxeO+pKbvuEOIDEmo3F6qHKDL8FO8s66r6P2w8NGMWp7I" crossorigin="anonymous"></script>
|
||||||
<script src="assets/js/clock.js" defer integrity="sha384-ymJnuq0yExd1vCEQFQAvYDv0IWfHL1XJYSRt2nyK73ofjF6GzG5baOjLN1dLkGLI" crossorigin="anonymous"></script>
|
<script src="assets/js/clock.js" defer integrity="sha384-ymJnuq0yExd1vCEQFQAvYDv0IWfHL1XJYSRt2nyK73ofjF6GzG5baOjLN1dLkGLI" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<title>T-Pot</title>
|
<title>T-Pot</title>
|
||||||
<style>
|
<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-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-family: 'Russo One';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
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 {
|
body, html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -30,25 +51,47 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
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 {
|
.header-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
|
padding: 14px 10px;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.clock-container, .dynamic-text {
|
.clock-container, .dynamic-text {
|
||||||
color: #e20074;
|
color: var(--c23-light);
|
||||||
font-size: 72px;
|
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;
|
text-align: right;
|
||||||
|
color: var(--c23-muted);
|
||||||
|
font-size: 40px;
|
||||||
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Contenedor de logo centrado a la derecha (igual estructura) */
|
||||||
.logo-container {
|
.logo-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -56,79 +99,128 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 45%;
|
top: 45%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 25vw;
|
width: 26vw;
|
||||||
|
max-width: 520px;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
opacity: 0.9;
|
|
||||||
right: 10%;
|
right: 10%;
|
||||||
z-index: 1;
|
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 {
|
#particles-js {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Cajones de enlaces (misma estructura y enlaces) */
|
||||||
.boxes-container {
|
.boxes-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 50px;
|
bottom: 48px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
gap: 20px;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-box {
|
.link-box {
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
padding: 20px;
|
padding: 22px;
|
||||||
padding-top: 60px;
|
padding-top: 64px;
|
||||||
background: rgba(51, 51, 51, 0.3);
|
background: var(--c23-panel);
|
||||||
border-radius: 20px;
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: box-shadow 0.5s ease;
|
transition: box-shadow 280ms ease, background 220ms ease, transform 180ms ease;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 400px; /* Adjust as needed */
|
width: 400px;
|
||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: top;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
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 {
|
.links-box::before, .tools-box::before {
|
||||||
font-family: 'FontAwesome';
|
font-family: 'FontAwesome';
|
||||||
content: attr(data-caption);
|
content: attr(data-caption);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -20px;
|
top: -24px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
background: transparent;
|
background: linear-gradient(90deg, var(--c23-dark), var(--c23-mid));
|
||||||
color: #FFF;
|
color: #fff;
|
||||||
padding: 0 10px;
|
padding: 6px 14px;
|
||||||
font-size: 36px;
|
font-size: 28px;
|
||||||
white-space: nowrap;
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255,255,255,0.10);
|
||||||
|
box-shadow: 0 6px 18px var(--c23-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-box:hover {
|
.link-box:hover {
|
||||||
box-shadow: 0 0 15px 5px rgba(226, 0, 116, 0.6);
|
box-shadow: 0 12px 32px var(--c23-shadow);
|
||||||
background: rgba(51, 51, 51, 0.3);
|
background: var(--c23-panel-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-box:hover::before {
|
.link-box:hover::before {
|
||||||
color: #e20074;
|
background: linear-gradient(90deg, var(--c23-mid), var(--c23-light));
|
||||||
transition: color 0.5s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
display: block;
|
display: block;
|
||||||
color: #FFF;
|
color: var(--c23-text);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin: 10px 0;
|
margin: 12px 0;
|
||||||
font-size: 42px;
|
font-size: 36px;
|
||||||
transition: color 0.5s ease;
|
line-height: 1.25;
|
||||||
|
transition: color 200ms ease, transform 120ms ease;
|
||||||
|
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link:hover {
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -138,11 +230,13 @@
|
||||||
|
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<div class="clock-container" id="clock"></div>
|
<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>
|
||||||
|
|
||||||
<div class="logo-container">
|
<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>
|
||||||
|
|
||||||
<div class="boxes-container">
|
<div class="boxes-container">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue