190 lines
9.1 KiB
Plaintext
190 lines
9.1 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>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #f1f5f9;
|
|
-webkit-box-shadow: 0 0 0px 1000px #0f172a 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); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#0f172a] min-h-screen flex items-center justify-center p-4">
|
|
<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 bg-cyan-500 rounded-2xl mb-4 shadow-lg shadow-cyan-500/20">
|
|
<svg class="w-9 h-9 text-[#0f172a]" 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="#06b6d4"/>
|
|
<circle cx="17.5" cy="6.5" r="1.2" fill="#06b6d4"/>
|
|
<circle cx="6.5" cy="17.5" r="1.2" fill="#06b6d4"/>
|
|
<circle cx="17.5" cy="17.5" r="1.2" fill="#06b6d4"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-white tracking-tight">ScommettiApp</h1>
|
|
<p class="text-[#94a3b8] text-sm mt-1">Sfida i tuoi amici</p>
|
|
</div>
|
|
|
|
<!-- Card -->
|
|
<div class="bg-[#1e293b] border border-[#334155] rounded-2xl p-8 shadow-xl">
|
|
<h2 class="text-lg font-semibold text-white mb-6">Accedi al tuo account</h2>
|
|
|
|
<!-- Messaggio globale (errore / info) -->
|
|
<#if message?has_content>
|
|
<div class="rounded-xl p-4 mb-6 text-sm
|
|
<#if message.type == 'error'>bg-red-500/10 border border-red-500/30 text-red-400
|
|
<#elseif message.type == 'success'>bg-green-500/10 border border-green-500/30 text-green-400
|
|
<#elseif message.type == 'warning'>bg-yellow-500/10 border border-yellow-500/30 text-yellow-400
|
|
<#else>bg-blue-500/10 border border-blue-500/30 text-blue-400</#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="block text-[#cbd5e1] text-sm font-medium mb-2">
|
|
<#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="w-full bg-[#0f172a] border border-[#334155] rounded-xl px-4 py-3 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm"
|
|
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="block text-[#cbd5e1] text-sm font-medium mb-2">
|
|
Password
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
class="w-full bg-[#0f172a] border border-[#334155] rounded-xl px-4 py-3 pr-12 text-[#f1f5f9] placeholder-[#475569] focus:outline-none focus:border-cyan-500 transition-colors text-sm"
|
|
placeholder="La tua password"
|
|
autocomplete="current-password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onclick="togglePassword('password', this)"
|
|
tabindex="-1"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 text-[#475569] hover:text-[#94a3b8] transition-colors p-1"
|
|
>
|
|
<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="w-4 h-4 rounded border-[#334155] bg-[#0f172a] accent-cyan-500 cursor-pointer"
|
|
/>
|
|
<span class="text-[#94a3b8] text-sm">Ricordami</span>
|
|
</label>
|
|
<#else>
|
|
<span></span>
|
|
</#if>
|
|
|
|
<#if realm.resetPasswordAllowed>
|
|
<a href="${url.loginResetCredentialsUrl}"
|
|
class="text-cyan-400 text-sm hover:text-cyan-300 transition-colors">
|
|
Password dimenticata?
|
|
</a>
|
|
</#if>
|
|
</div>
|
|
|
|
<!-- Bottone accedi -->
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-cyan-500 hover:bg-cyan-400 active:bg-cyan-600 text-[#0f172a] font-semibold py-3 rounded-xl transition-colors text-sm"
|
|
>
|
|
Accedi
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Link registrazione -->
|
|
<#if realm.registrationAllowed>
|
|
<p class="text-center text-[#94a3b8] mt-6 text-sm">
|
|
Non hai un account?
|
|
<a href="${url.registrationUrl}"
|
|
class="text-cyan-400 hover:text-cyan-300 transition-colors font-medium ml-1">
|
|
Registrati
|
|
</a>
|
|
</p>
|
|
</#if>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(inputId, btn) {
|
|
const input = document.getElementById(inputId);
|
|
const isHidden = input.type === 'password';
|
|
input.type = isHidden ? 'text' : 'password';
|
|
const 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>
|