refactor(ui): redesign with amber CRT terminal theme and mobile responsive
CI / Build Native (push) Successful in 6m52s

- Full visual overhaul: amber phosphor CRT aesthetic (gold on near-black)
- JetBrains Mono font family applied site-wide
- Terminal window style: LED amber dot on every panel header
- Header with 'user@shot-crafter:~$' title bar
- Login/register as terminal window cards
- Responsive: grid-5/grid-8 collapse on mobile, tables scroll horizontally
- Tabs with horizontal scroll on mobile
- Article headers wrap cleanly on small screens
- Custom scrollbars, selection color, focus states in amber theme
- New favicon in amber style
- term-section.html reusable partial created
This commit is contained in:
2026-08-23 23:33:18 -04:00
parent 39e5530da4
commit c9622200a7
16 changed files with 652 additions and 363 deletions
File diff suppressed because it is too large Load Diff
@@ -1,12 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10b981"/>
<stop offset="100%" stop-color="#047857"/>
<stop offset="0%" stop-color="#ffd966"/>
<stop offset="100%" stop-color="#ffb000"/>
</linearGradient>
</defs>
<path d="M32 6 L52 22 L32 58 L12 22 Z" fill="url(#gem)" stroke="#065f46" stroke-width="2"/>
<path d="M32 6 L52 22 L12 22 Z" fill="rgba(255,255,255,0.2)"/>
<path d="M32 58 L52 22 L32 22 Z" fill="rgba(0,0,0,0.12)"/>
<circle cx="40" cy="14" r="3" fill="white" opacity="0.8"/>
<rect width="64" height="64" fill="#0a0606"/>
<path d="M32 8 L52 24 L32 56 L12 24 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
<path d="M32 8 L52 24 L12 24 Z" fill="rgba(255,255,255,0.1)"/>
<path d="M32 56 L52 24 L32 24 Z" fill="rgba(0,0,0,0.15)"/>
<circle cx="44" cy="14" r="4" fill="#ffb000" opacity="0.9"/>
<circle cx="44" cy="14" r="6" fill="none" stroke="#ffb000" stroke-width="1" opacity="0.3"/>
</svg>

Before

Width:  |  Height:  |  Size: 552 B

After

Width:  |  Height:  |  Size: 698 B

@@ -1,10 +1,12 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Calculadora — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
@@ -1,36 +1,40 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cambiar contrasena — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
<body class="login-page" x-data="authChangePassword()">
<article class="login-card">
<article class="term-window login-card">
<div class="term-titlebar"><span>shot-crafter:~$</span></div>
<div class="term-body">
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
aria-label="Logo">
<defs>
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10b981"/>
<stop offset="100%" stop-color="#047857"/>
<stop offset="0%" stop-color="#ffd966"/>
<stop offset="100%" stop-color="#ffb000"/>
</linearGradient>
</defs>
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
<g class="sparkle">
<circle cx="50" cy="18" r="2.5" fill="white"/>
<circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
fill="white" opacity="0.7"/>
fill="#ffb000" opacity="0.7"/>
</g>
</svg>
<hgroup style="text-align:center;margin-bottom:1.5rem">
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Cambiar contrasena</h1>
<p style="margin-bottom:0">Debes cambiar tu contrasena antes de continuar.</p>
<h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Cambiar contrasena</h1>
<p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Debes cambiar tu contrasena antes de continuar.</p>
</hgroup>
<div x-show="!done">
@@ -42,27 +46,28 @@
<label>Nueva contrasena
<input type="password" x-model="newPassword"
autocomplete="new-password" required minlength="8"/>
<small>Minimo 8 caracteres.</small>
<small style="color:#8b5a00;font-size:0.7rem">Minimo 8 caracteres.</small>
</label>
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
<button type="submit" :disabled="submitting">
<button type="submit" :disabled="submitting" class="contrast" style="width:100%;margin-top:0.5rem">
<span x-show="!submitting">Cambiar contrasena</span>
<span x-show="submitting">Procesando…</span>
<span x-show="submitting">Procesando...</span>
</button>
</form>
</div>
<div x-show="done" x-transition class="text-center">
<p class="success-msg mb-4">Contrasena actualizada.</p>
<p class="text-sm text-muted">Redirigiendo a la app…</p>
<p class="text-sm text-muted">Redirigiendo a la app...</p>
</div>
</div>
</article>
<script src="/static/js/defaults.js?v=5"></script>
<script src="/static/js/api.js?v=5"></script>
<script src="/static/js/app.js?v=5"></script>
<script defer src="/static/js/alpine.min.js?v=5"></script>
<script src="/static/js/defaults.js?v=6"></script>
<script src="/static/js/api.js?v=6"></script>
<script src="/static/js/app.js?v=6"></script>
<script defer src="/static/js/alpine.min.js?v=6"></script>
</body>
</html>
@@ -1,10 +1,12 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Formulas — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
@@ -1,10 +1,12 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Historial — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
@@ -1,10 +1,12 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Insumos — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
@@ -1,36 +1,40 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Calculadora de Craft de Shots — Lineage 2</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
<body class="login-page" x-data="authLogin()">
<article class="login-card">
<article class="term-window login-card">
<div class="term-titlebar"><span>guest@shot-crafter:~$</span></div>
<div class="term-body">
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
aria-label="Logo">
<defs>
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10b981"/>
<stop offset="100%" stop-color="#047857"/>
<stop offset="0%" stop-color="#ffd966"/>
<stop offset="100%" stop-color="#ffb000"/>
</linearGradient>
</defs>
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
<g class="sparkle">
<circle cx="50" cy="18" r="2.5" fill="white"/>
<circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
fill="white" opacity="0.7"/>
fill="#ffb000" opacity="0.7"/>
</g>
</svg>
<hgroup style="text-align:center;margin-bottom:1.5rem">
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Calculadora de Craft de Shots</h1>
<p style="margin-bottom:0">Lineage 2 — Interlude / Clasico</p>
<h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Calculadora de Craft de Shots</h1>
<p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Lineage 2 — Interlude / Clasico</p>
</hgroup>
<form @submit.prevent="handleSubmit">
@@ -45,20 +49,21 @@
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
<button type="submit" :disabled="submitting">
<button type="submit" :disabled="submitting" class="contrast" style="width:100%;margin-top:0.5rem">
<span x-show="!submitting">Iniciar sesion</span>
<span x-show="submitting">Procesando…</span>
<span x-show="submitting">Procesando...</span>
</button>
</form>
<p class="login-footer">
<a href="/register" class="link-action">No tenes cuenta? Crea una</a>
</p>
</div>
</article>
<script src="/static/js/defaults.js?v=5"></script>
<script src="/static/js/api.js?v=5"></script>
<script src="/static/js/app.js?v=5"></script>
<script defer src="/static/js/alpine.min.js?v=5"></script>
<script src="/static/js/defaults.js?v=6"></script>
<script src="/static/js/api.js?v=6"></script>
<script src="/static/js/app.js?v=6"></script>
<script defer src="/static/js/alpine.min.js?v=6"></script>
</body>
</html>
@@ -1,10 +1,12 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Personajes — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
@@ -1,66 +1,71 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Crear cuenta — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
<body class="login-page" x-data="authRegister()">
<article class="login-card">
<article class="term-window login-card">
<div class="term-titlebar"><span>guest@shot-crafter:~$</span></div>
<div class="term-body">
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
aria-label="Logo">
<defs>
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10b981"/>
<stop offset="100%" stop-color="#047857"/>
<stop offset="0%" stop-color="#ffd966"/>
<stop offset="100%" stop-color="#ffb000"/>
</linearGradient>
</defs>
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
<g class="sparkle">
<circle cx="50" cy="18" r="2.5" fill="white"/>
<circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
fill="white" opacity="0.7"/>
fill="#ffb000" opacity="0.7"/>
</g>
</svg>
<hgroup style="text-align:center;margin-bottom:1.5rem">
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Crear cuenta</h1>
<p style="margin-bottom:0">Unete a la comunidad de crafteo</p>
<h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Crear cuenta</h1>
<p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Unete a la comunidad de crafteo</p>
</hgroup>
<form @submit.prevent="handleSubmit">
<label>Username
<input type="text" x-model="username" autocomplete="username" autofocus
required minlength="3" maxlength="30"/>
<small>3-30 caracteres, letras, numeros y guion bajo.</small>
<small style="color:#8b5a00;font-size:0.7rem">3-30 caracteres, letras, numeros y guion bajo.</small>
</label>
<label>Contrasena
<input type="password" x-model="password" autocomplete="new-password"
required minlength="8"/>
<small>Minimo 8 caracteres.</small>
<small style="color:#8b5a00;font-size:0.7rem">Minimo 8 caracteres.</small>
</label>
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
<button type="submit" :disabled="submitting">
<button type="submit" :disabled="submitting" class="contrast" style="width:100%;margin-top:0.5rem">
<span x-show="!submitting">Crear cuenta</span>
<span x-show="submitting">Procesando…</span>
<span x-show="submitting">Procesando...</span>
</button>
</form>
<p class="login-footer">
<a href="/login" class="link-action">Ya tenes cuenta? Inicia sesion</a>
</p>
</div>
</article>
<script src="/static/js/defaults.js?v=5"></script>
<script src="/static/js/api.js?v=5"></script>
<script src="/static/js/app.js?v=5"></script>
<script defer src="/static/js/alpine.min.js?v=5"></script>
<script src="/static/js/defaults.js?v=6"></script>
<script src="/static/js/api.js?v=6"></script>
<script src="/static/js/app.js?v=6"></script>
<script defer src="/static/js/alpine.min.js?v=6"></script>
</body>
</html>
@@ -1,10 +1,12 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Usuarios — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
@@ -1,10 +1,12 @@
<!doctype html>
<html lang="es" data-theme="light">
<html lang="es">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Ventas — Calculadora de Craft de Shots</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/pico.min.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
</head>
@@ -5,6 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{title ?: 'Calculadora de Craft de Shots'}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/styles.css"/>
<script defer src="/static/js/alpine.min.js"></script>
<script defer src="/static/js/api.js"></script>
@@ -1,4 +1,7 @@
<header x-data="appHeader()">
<header x-data="appHeader()" class="term-window">
<div class="term-titlebar">
<span>shot-crafter@<span x-text="user()?.username || 'local'"></span>:~$</span>
</div>
<div class="container">
<nav class="header-nav">
<div>
@@ -1,4 +1,5 @@
<nav x-data="appTabBar()" class="container">
<div class="tabs-wrap">
<ul class="tabs">
<li><a href="/insumos" :class="activeTab('/insumos')">Insumos</a></li>
<li><a href="/formulas" :class="activeTab('/formulas')">Formulas</a></li>
@@ -8,4 +9,5 @@
<li><a href="/personajes" :class="activeTab('/personajes')">Personajes</a></li>
<li x-show="user()?.isAdmin"><a href="/usuarios" :class="activeTab('/usuarios')">Usuarios</a></li>
</ul>
</div>
</nav>
@@ -0,0 +1,6 @@
<section class="term-window">
<div class="term-titlebar"><span>{title ?: ''}</span></div>
<div class="term-body">
{#insert body /}
</div>
</section>