411 lines
18 KiB
Plaintext
411 lines
18 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ScommettiApp - Accedi</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* ── Tema chiaro (default) ───────────────────────────── */
|
|
:root {
|
|
--bg: #faf4ff;
|
|
--surface: #ffffff;
|
|
--border: #e7e4ed;
|
|
--input-bg: #f8f6fb;
|
|
--primary: #4c49c9;
|
|
--primary-hover: #3d3ab0;
|
|
--text: #32294f;
|
|
--text-secondary: #5f557f;
|
|
--text-placeholder:#9e99bc;
|
|
--autofill-bg: #f8f6fb;
|
|
--autofill-text: #32294f;
|
|
--error: #b41340;
|
|
--error-bg: rgba(180,19,64,0.08);
|
|
--error-border: rgba(180,19,64,0.3);
|
|
--success-bg: rgba(0,106,38,0.08);
|
|
--warning-bg: rgba(138,42,185,0.08);
|
|
--focus-ring: rgba(76,73,201,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
/* ── Tema scuro (preferenza OS) ─────────────────────── */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0F172A;
|
|
--surface: #1E293B;
|
|
--border: #334155;
|
|
--input-bg: #0f172a;
|
|
--primary: #6366F1;
|
|
--primary-hover: #818CF8;
|
|
--text: #F8FAFC;
|
|
--text-secondary: #94A3B8;
|
|
--text-placeholder:#475569;
|
|
--autofill-bg: #0f172a;
|
|
--autofill-text: #f1f5f9;
|
|
--error: #EF4444;
|
|
--error-bg: rgba(239,68,68,0.1);
|
|
--error-border: rgba(239,68,68,0.3);
|
|
--success-bg: rgba(74,222,128,0.1);
|
|
--warning-bg: rgba(251,191,36,0.1);
|
|
--focus-ring: rgba(99,102,241,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
}
|
|
/* ── Override esplicito via classe ─────────────────── */
|
|
html.dark {
|
|
--bg: #0F172A;
|
|
--surface: #1E293B;
|
|
--border: #334155;
|
|
--input-bg: #0f172a;
|
|
--primary: #6366F1;
|
|
--primary-hover: #818CF8;
|
|
--text: #F8FAFC;
|
|
--text-secondary: #94A3B8;
|
|
--text-placeholder:#475569;
|
|
--autofill-bg: #0f172a;
|
|
--autofill-text: #f1f5f9;
|
|
--error: #EF4444;
|
|
--error-bg: rgba(239,68,68,0.1);
|
|
--error-border: rgba(239,68,68,0.3);
|
|
--success-bg: rgba(74,222,128,0.1);
|
|
--warning-bg: rgba(251,191,36,0.1);
|
|
--focus-ring: rgba(99,102,241,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
html.light {
|
|
--bg: #faf4ff;
|
|
--surface: #ffffff;
|
|
--border: #e7e4ed;
|
|
--input-bg: #f8f6fb;
|
|
--primary: #4c49c9;
|
|
--primary-hover: #3d3ab0;
|
|
--text: #32294f;
|
|
--text-secondary: #5f557f;
|
|
--text-placeholder:#9e99bc;
|
|
--autofill-bg: #f8f6fb;
|
|
--autofill-text: #32294f;
|
|
--error: #b41340;
|
|
--error-bg: rgba(180,19,64,0.08);
|
|
--error-border: rgba(180,19,64,0.3);
|
|
--success-bg: rgba(0,106,38,0.08);
|
|
--warning-bg: rgba(138,42,185,0.08);
|
|
--focus-ring: rgba(76,73,201,0.2);
|
|
--btn-text: #ffffff;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: var(--autofill-text);
|
|
-webkit-box-shadow: 0 0 0px 1000px var(--autofill-bg) inset;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.theme-toggle {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text-secondary);
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
.theme-toggle:hover { color: var(--primary); }
|
|
.sc-input {
|
|
width: 100%;
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--text);
|
|
font-size: 0.875rem;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.sc-input::placeholder { color: var(--text-placeholder); }
|
|
.sc-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
.sc-input-pr { padding-right: 3rem; }
|
|
.sc-label {
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.sc-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
|
|
}
|
|
.sc-btn-primary {
|
|
width: 100%;
|
|
background: var(--primary);
|
|
color: var(--btn-text);
|
|
font-weight: 600;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
transition: background 0.2s;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.sc-btn-primary:hover { background: var(--primary-hover); }
|
|
.sc-btn-primary:active { opacity: 0.9; }
|
|
.sc-link { color: var(--primary); font-weight: 500; text-decoration: none; }
|
|
.sc-link:hover { text-decoration: underline; }
|
|
.sc-icon-btn {
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-placeholder);
|
|
padding: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.sc-icon-btn:hover { color: var(--text-secondary); }
|
|
.sc-msg {
|
|
border-radius: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.sc-msg-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error); }
|
|
.sc-msg-success { background: var(--success-bg); border: 1px solid var(--border); color: var(--text); }
|
|
.sc-msg-warning { background: var(--warning-bg); border: 1px solid var(--border); color: var(--text); }
|
|
.sc-msg-info { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
|
|
.sc-checkbox {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid var(--border);
|
|
background: var(--input-bg);
|
|
accent-color: var(--primary);
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center p-4">
|
|
|
|
<!-- Toggle tema -->
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Cambia tema" title="Cambia tema">
|
|
<span id="theme-icon-sun" style="display:none">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="5" stroke-width="2"/>
|
|
<path stroke-width="2" stroke-linecap="round"
|
|
d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42
|
|
M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
|
</svg>
|
|
</span>
|
|
<span id="theme-icon-moon">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-width="2" stroke-linecap="round"
|
|
d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<div class="w-full max-w-md fade-in">
|
|
|
|
<!-- Logo / Header -->
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-4 shadow-lg" style="background:var(--primary)">
|
|
<svg class="w-9 h-9" style="color:var(--btn-text)" viewBox="0 0 24 24" fill="currentColor">
|
|
<rect x="2" y="2" width="9" height="9" rx="2"/>
|
|
<rect x="13" y="2" width="9" height="9" rx="2"/>
|
|
<rect x="2" y="13" width="9" height="9" rx="2"/>
|
|
<rect x="13" y="13" width="9" height="9" rx="2"/>
|
|
<circle cx="6.5" cy="6.5" r="1.2" fill="var(--bg)"/>
|
|
<circle cx="17.5" cy="6.5" r="1.2" fill="var(--bg)"/>
|
|
<circle cx="6.5" cy="17.5" r="1.2" fill="var(--bg)"/>
|
|
<circle cx="17.5" cy="17.5" r="1.2" fill="var(--bg)"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold tracking-tight" style="color:var(--text)">ScommettiApp</h1>
|
|
<p class="text-sm mt-1" style="color:var(--text-secondary)">Sfida i tuoi amici</p>
|
|
</div>
|
|
|
|
<!-- Card -->
|
|
<div class="sc-card">
|
|
<h2 class="text-lg font-semibold mb-6" style="color:var(--text)">Accedi al tuo account</h2>
|
|
|
|
<!-- Messaggio globale (errore / info) -->
|
|
<#if message?has_content>
|
|
<div class="sc-msg
|
|
<#if message.type == 'error'>sc-msg-error
|
|
<#elseif message.type == 'success'>sc-msg-success
|
|
<#elseif message.type == 'warning'>sc-msg-warning
|
|
<#else>sc-msg-info</#if>">
|
|
${message.summary?no_esc}
|
|
</div>
|
|
</#if>
|
|
|
|
<form action="${url.loginAction}" method="post" novalidate>
|
|
|
|
<!-- Campo username / email -->
|
|
<div class="mb-5">
|
|
<label for="username" class="sc-label">
|
|
<#if realm.loginWithEmailAllowed && !realm.registrationEmailAsUsername>
|
|
Email o Username
|
|
<#elseif realm.loginWithEmailAllowed>
|
|
Email
|
|
<#else>
|
|
Username
|
|
</#if>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
value="${(login.username!'')}"
|
|
class="sc-input"
|
|
placeholder="<#if realm.loginWithEmailAllowed>nome@esempio.it<#else>il tuo username</#if>"
|
|
autocomplete="username"
|
|
autofocus
|
|
/>
|
|
</div>
|
|
|
|
<!-- Campo password -->
|
|
<div class="mb-5">
|
|
<label for="password" class="sc-label">Password</label>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
class="sc-input sc-input-pr"
|
|
placeholder="La tua password"
|
|
autocomplete="current-password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onclick="togglePassword('password', this)"
|
|
tabindex="-1"
|
|
class="sc-icon-btn"
|
|
>
|
|
<svg id="eye-icon-password" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ricordami + Password dimenticata -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<#if realm.rememberMe>
|
|
<label class="flex items-center gap-2 cursor-pointer select-none">
|
|
<input
|
|
type="checkbox"
|
|
id="rememberMe"
|
|
name="rememberMe"
|
|
<#if login.rememberMe??>checked</#if>
|
|
class="sc-checkbox"
|
|
/>
|
|
<span class="text-sm" style="color:var(--text-secondary)">Ricordami</span>
|
|
</label>
|
|
<#else>
|
|
<span></span>
|
|
</#if>
|
|
|
|
<#if realm.resetPasswordAllowed>
|
|
<a href="${url.loginResetCredentialsUrl}" class="sc-link text-sm">
|
|
Password dimenticata?
|
|
</a>
|
|
</#if>
|
|
</div>
|
|
|
|
<!-- Bottone accedi -->
|
|
<button type="submit" class="sc-btn-primary">Accedi</button>
|
|
</form>
|
|
|
|
<!-- Link registrazione -->
|
|
<#if realm.registrationAllowed>
|
|
<p class="text-center mt-6 text-sm" style="color:var(--text-secondary)">
|
|
Non hai un account?
|
|
<a href="${url.registrationUrl}" class="sc-link ml-1">Registrati</a>
|
|
</p>
|
|
</#if>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ── Inizializzazione tema ───────────────────────────────────
|
|
(function () {
|
|
var saved = localStorage.getItem('kc-theme');
|
|
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
var isDark = saved ? saved === 'dark' : prefersDark;
|
|
document.documentElement.classList.add(isDark ? 'dark' : 'light');
|
|
updateToggleIcon(isDark);
|
|
})();
|
|
|
|
function updateToggleIcon(isDark) {
|
|
document.getElementById('theme-icon-sun').style.display = isDark ? 'inline' : 'none';
|
|
document.getElementById('theme-icon-moon').style.display = isDark ? 'none' : 'inline';
|
|
}
|
|
|
|
function toggleTheme() {
|
|
var html = document.documentElement;
|
|
var isDark = html.classList.contains('dark');
|
|
html.classList.replace(isDark ? 'dark' : 'light', isDark ? 'light' : 'dark');
|
|
localStorage.setItem('kc-theme', isDark ? 'light' : 'dark');
|
|
updateToggleIcon(!isDark);
|
|
}
|
|
|
|
// ── Toggle visibilità password ──────────────────────────────
|
|
function togglePassword(inputId, btn) {
|
|
var input = document.getElementById(inputId);
|
|
var isHidden = input.type === 'password';
|
|
input.type = isHidden ? 'text' : 'password';
|
|
var svg = btn.querySelector('svg');
|
|
if (isHidden) {
|
|
svg.innerHTML =
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"' +
|
|
' d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7' +
|
|
' a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243' +
|
|
' M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29' +
|
|
' M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7' +
|
|
' a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>';
|
|
} else {
|
|
svg.innerHTML =
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"' +
|
|
' d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>' +
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"' +
|
|
' d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7' +
|
|
' -1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|