refactor(ui): redesign with amber CRT terminal theme and mobile responsive
CI / Build Native (push) Successful in 6m52s
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:
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">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" stop-color="#10b981"/>
|
<stop offset="0%" stop-color="#ffd966"/>
|
||||||
<stop offset="100%" stop-color="#047857"/>
|
<stop offset="100%" stop-color="#ffb000"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<path d="M32 6 L52 22 L32 58 L12 22 Z" fill="url(#gem)" stroke="#065f46" stroke-width="2"/>
|
<rect width="64" height="64" fill="#0a0606"/>
|
||||||
<path d="M32 6 L52 22 L12 22 Z" fill="rgba(255,255,255,0.2)"/>
|
<path d="M32 8 L52 24 L32 56 L12 24 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
|
||||||
<path d="M32 58 L52 22 L32 22 Z" fill="rgba(0,0,0,0.12)"/>
|
<path d="M32 8 L52 24 L12 24 Z" fill="rgba(255,255,255,0.1)"/>
|
||||||
<circle cx="40" cy="14" r="3" fill="white" opacity="0.8"/>
|
<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>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 552 B After Width: | Height: | Size: 698 B |
@@ -1,10 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Calculadora — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,68 +1,73 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Cambiar contrasena — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body class="login-page" x-data="authChangePassword()">
|
<body class="login-page" x-data="authChangePassword()">
|
||||||
<article class="login-card">
|
<article class="term-window login-card">
|
||||||
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
<div class="term-titlebar"><span>shot-crafter:~$</span></div>
|
||||||
aria-label="Logo">
|
<div class="term-body">
|
||||||
<defs>
|
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
||||||
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
aria-label="Logo">
|
||||||
<stop offset="0%" stop-color="#10b981"/>
|
<defs>
|
||||||
<stop offset="100%" stop-color="#047857"/>
|
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
</linearGradient>
|
<stop offset="0%" stop-color="#ffd966"/>
|
||||||
</defs>
|
<stop offset="100%" stop-color="#ffb000"/>
|
||||||
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
|
</linearGradient>
|
||||||
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
|
</defs>
|
||||||
<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"/>
|
||||||
<g class="sparkle">
|
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
|
||||||
<circle cx="50" cy="18" r="2.5" fill="white"/>
|
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
|
||||||
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
<g class="sparkle">
|
||||||
fill="white" opacity="0.7"/>
|
<circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
|
||||||
</g>
|
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
||||||
</svg>
|
fill="#ffb000" opacity="0.7"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
||||||
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Cambiar contrasena</h1>
|
<h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Cambiar contrasena</h1>
|
||||||
<p style="margin-bottom:0">Debes cambiar tu contrasena antes de continuar.</p>
|
<p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Debes cambiar tu contrasena antes de continuar.</p>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<div x-show="!done">
|
<div x-show="!done">
|
||||||
<form @submit.prevent="handleSubmit">
|
<form @submit.prevent="handleSubmit">
|
||||||
<label>Contrasena actual
|
<label>Contrasena actual
|
||||||
<input type="password" x-model="currentPassword"
|
<input type="password" x-model="currentPassword"
|
||||||
autocomplete="current-password" autofocus required minlength="8"/>
|
autocomplete="current-password" autofocus required minlength="8"/>
|
||||||
</label>
|
</label>
|
||||||
<label>Nueva contrasena
|
<label>Nueva contrasena
|
||||||
<input type="password" x-model="newPassword"
|
<input type="password" x-model="newPassword"
|
||||||
autocomplete="new-password" required minlength="8"/>
|
autocomplete="new-password" required minlength="8"/>
|
||||||
<small>Minimo 8 caracteres.</small>
|
<small style="color:#8b5a00;font-size:0.7rem">Minimo 8 caracteres.</small>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
|
<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">Cambiar contrasena</span>
|
||||||
<span x-show="submitting">Procesando…</span>
|
<span x-show="submitting">Procesando...</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div x-show="done" x-transition class="text-center">
|
<div x-show="done" x-transition class="text-center">
|
||||||
<p class="success-msg mb-4">Contrasena actualizada.</p>
|
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<script src="/static/js/defaults.js?v=5"></script>
|
<script src="/static/js/defaults.js?v=6"></script>
|
||||||
<script src="/static/js/api.js?v=5"></script>
|
<script src="/static/js/api.js?v=6"></script>
|
||||||
<script src="/static/js/app.js?v=5"></script>
|
<script src="/static/js/app.js?v=6"></script>
|
||||||
<script defer src="/static/js/alpine.min.js?v=5"></script>
|
<script defer src="/static/js/alpine.min.js?v=6"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Formulas — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Historial — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Insumos — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,64 +1,69 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Calculadora de Craft de Shots — Lineage 2</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body class="login-page" x-data="authLogin()">
|
<body class="login-page" x-data="authLogin()">
|
||||||
<article class="login-card">
|
<article class="term-window login-card">
|
||||||
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
<div class="term-titlebar"><span>guest@shot-crafter:~$</span></div>
|
||||||
aria-label="Logo">
|
<div class="term-body">
|
||||||
<defs>
|
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
||||||
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
aria-label="Logo">
|
||||||
<stop offset="0%" stop-color="#10b981"/>
|
<defs>
|
||||||
<stop offset="100%" stop-color="#047857"/>
|
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
</linearGradient>
|
<stop offset="0%" stop-color="#ffd966"/>
|
||||||
</defs>
|
<stop offset="100%" stop-color="#ffb000"/>
|
||||||
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
|
</linearGradient>
|
||||||
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
|
</defs>
|
||||||
<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"/>
|
||||||
<g class="sparkle">
|
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
|
||||||
<circle cx="50" cy="18" r="2.5" fill="white"/>
|
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
|
||||||
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
<g class="sparkle">
|
||||||
fill="white" opacity="0.7"/>
|
<circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
|
||||||
</g>
|
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
||||||
</svg>
|
fill="#ffb000" opacity="0.7"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
<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>
|
<h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Calculadora de Craft de Shots</h1>
|
||||||
<p style="margin-bottom:0">Lineage 2 — Interlude / Clasico</p>
|
<p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Lineage 2 — Interlude / Clasico</p>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<form @submit.prevent="handleSubmit">
|
<form @submit.prevent="handleSubmit">
|
||||||
<label>Username
|
<label>Username
|
||||||
<input type="text" x-model="username" autocomplete="username" autofocus
|
<input type="text" x-model="username" autocomplete="username" autofocus
|
||||||
required minlength="3" maxlength="30"/>
|
required minlength="3" maxlength="30"/>
|
||||||
</label>
|
</label>
|
||||||
<label>Contrasena
|
<label>Contrasena
|
||||||
<input type="password" x-model="password" autocomplete="current-password"
|
<input type="password" x-model="password" autocomplete="current-password"
|
||||||
required minlength="8"/>
|
required minlength="8"/>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
|
<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">Iniciar sesion</span>
|
||||||
<span x-show="submitting">Procesando…</span>
|
<span x-show="submitting">Procesando...</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<p class="login-footer">
|
<p class="login-footer">
|
||||||
<a href="/register" class="link-action">No tenes cuenta? Crea una</a>
|
<a href="/register" class="link-action">No tenes cuenta? Crea una</a>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<script src="/static/js/defaults.js?v=5"></script>
|
<script src="/static/js/defaults.js?v=6"></script>
|
||||||
<script src="/static/js/api.js?v=5"></script>
|
<script src="/static/js/api.js?v=6"></script>
|
||||||
<script src="/static/js/app.js?v=5"></script>
|
<script src="/static/js/app.js?v=6"></script>
|
||||||
<script defer src="/static/js/alpine.min.js?v=5"></script>
|
<script defer src="/static/js/alpine.min.js?v=6"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Personajes — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,66 +1,71 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Crear cuenta — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body class="login-page" x-data="authRegister()">
|
<body class="login-page" x-data="authRegister()">
|
||||||
<article class="login-card">
|
<article class="term-window login-card">
|
||||||
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
<div class="term-titlebar"><span>guest@shot-crafter:~$</span></div>
|
||||||
aria-label="Logo">
|
<div class="term-body">
|
||||||
<defs>
|
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
||||||
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
aria-label="Logo">
|
||||||
<stop offset="0%" stop-color="#10b981"/>
|
<defs>
|
||||||
<stop offset="100%" stop-color="#047857"/>
|
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
</linearGradient>
|
<stop offset="0%" stop-color="#ffd966"/>
|
||||||
</defs>
|
<stop offset="100%" stop-color="#ffb000"/>
|
||||||
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
|
</linearGradient>
|
||||||
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
|
</defs>
|
||||||
<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"/>
|
||||||
<g class="sparkle">
|
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
|
||||||
<circle cx="50" cy="18" r="2.5" fill="white"/>
|
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
|
||||||
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
<g class="sparkle">
|
||||||
fill="white" opacity="0.7"/>
|
<circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
|
||||||
</g>
|
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
||||||
</svg>
|
fill="#ffb000" opacity="0.7"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
||||||
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Crear cuenta</h1>
|
<h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Crear cuenta</h1>
|
||||||
<p style="margin-bottom:0">Unete a la comunidad de crafteo</p>
|
<p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Unete a la comunidad de crafteo</p>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<form @submit.prevent="handleSubmit">
|
<form @submit.prevent="handleSubmit">
|
||||||
<label>Username
|
<label>Username
|
||||||
<input type="text" x-model="username" autocomplete="username" autofocus
|
<input type="text" x-model="username" autocomplete="username" autofocus
|
||||||
required minlength="3" maxlength="30"/>
|
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>
|
||||||
<label>Contrasena
|
<label>Contrasena
|
||||||
<input type="password" x-model="password" autocomplete="new-password"
|
<input type="password" x-model="password" autocomplete="new-password"
|
||||||
required minlength="8"/>
|
required minlength="8"/>
|
||||||
<small>Minimo 8 caracteres.</small>
|
<small style="color:#8b5a00;font-size:0.7rem">Minimo 8 caracteres.</small>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
|
<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">Crear cuenta</span>
|
||||||
<span x-show="submitting">Procesando…</span>
|
<span x-show="submitting">Procesando...</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<p class="login-footer">
|
<p class="login-footer">
|
||||||
<a href="/login" class="link-action">Ya tenes cuenta? Inicia sesion</a>
|
<a href="/login" class="link-action">Ya tenes cuenta? Inicia sesion</a>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<script src="/static/js/defaults.js?v=5"></script>
|
<script src="/static/js/defaults.js?v=6"></script>
|
||||||
<script src="/static/js/api.js?v=5"></script>
|
<script src="/static/js/api.js?v=6"></script>
|
||||||
<script src="/static/js/app.js?v=5"></script>
|
<script src="/static/js/app.js?v=6"></script>
|
||||||
<script defer src="/static/js/alpine.min.js?v=5"></script>
|
<script defer src="/static/js/alpine.min.js?v=6"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Usuarios — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" data-theme="light">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Ventas — Calculadora de Craft de Shots</title>
|
<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/pico.min.css"/>
|
||||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -5,6 +5,8 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>{title ?: 'Calculadora de Craft de Shots'}</title>
|
<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"/>
|
<link rel="stylesheet" href="/static/css/styles.css"/>
|
||||||
<script defer src="/static/js/alpine.min.js"></script>
|
<script defer src="/static/js/alpine.min.js"></script>
|
||||||
<script defer src="/static/js/api.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">
|
<div class="container">
|
||||||
<nav class="header-nav">
|
<nav class="header-nav">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
<nav x-data="appTabBar()" class="container">
|
<nav x-data="appTabBar()" class="container">
|
||||||
<ul class="tabs">
|
<div class="tabs-wrap">
|
||||||
<li><a href="/insumos" :class="activeTab('/insumos')">Insumos</a></li>
|
<ul class="tabs">
|
||||||
<li><a href="/formulas" :class="activeTab('/formulas')">Formulas</a></li>
|
<li><a href="/insumos" :class="activeTab('/insumos')">Insumos</a></li>
|
||||||
<li><a href="/calculadora" :class="activeTab('/calculadora')">Calculadora</a></li>
|
<li><a href="/formulas" :class="activeTab('/formulas')">Formulas</a></li>
|
||||||
<li><a href="/historial" :class="activeTab('/historial')">Historial</a></li>
|
<li><a href="/calculadora" :class="activeTab('/calculadora')">Calculadora</a></li>
|
||||||
<li><a href="/ventas" :class="activeTab('/ventas')">Ventas</a></li>
|
<li><a href="/historial" :class="activeTab('/historial')">Historial</a></li>
|
||||||
<li><a href="/personajes" :class="activeTab('/personajes')">Personajes</a></li>
|
<li><a href="/ventas" :class="activeTab('/ventas')">Ventas</a></li>
|
||||||
<li x-show="user()?.isAdmin"><a href="/usuarios" :class="activeTab('/usuarios')">Usuarios</a></li>
|
<li><a href="/personajes" :class="activeTab('/personajes')">Personajes</a></li>
|
||||||
</ul>
|
<li x-show="user()?.isAdmin"><a href="/usuarios" :class="activeTab('/usuarios')">Usuarios</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</nav>
|
</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>
|
||||||
Reference in New Issue
Block a user