admin/ScommettiApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aggiornamento grafica

Browse Source
This commit is contained in:
Lorenzo Sanesi
2026-04-04 01:40:43 +02:00
parent e2fe8b264f
commit 162e0de62a
83 changed files with 16246 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
keycloak/themes/scommettiapp/login/login.ftl
+278 -57
View File
@@ -4,14 +4,107 @@
<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>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
/* ── 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: #f1f5f9;
-webkit-box-shadow: 0 0 0px 1000px #0f172a inset;
-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 {
@@ -21,40 +114,156 @@
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="bg-[#0f172a] min-h-screen flex items-center justify-center p-4">
<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 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">
<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="#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"/>
<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 text-white tracking-tight">ScommettiApp</h1>
<p class="text-[#94a3b8] text-sm mt-1">Sfida i tuoi amici</p>
<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="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>
<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="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>">
<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>
@@ -63,7 +272,7 @@
<!-- Campo username / email -->
<div class="mb-5">
<label for="username" class="block text-[#cbd5e1] text-sm font-medium mb-2">
<label for="username" class="sc-label">
<#if realm.loginWithEmailAllowed && !realm.registrationEmailAsUsername>
Email o Username
<#elseif realm.loginWithEmailAllowed>
@@ -77,7 +286,7 @@
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"
class="sc-input"
placeholder="<#if realm.loginWithEmailAllowed>nome@esempio.it<#else>il tuo username</#if>"
autocomplete="username"
autofocus
@@ -86,15 +295,13 @@
<!-- Campo password -->
<div class="mb-5">
<label for="password" class="block text-[#cbd5e1] text-sm font-medium mb-2">
Password
</label>
<label for="password" class="sc-label">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"
class="sc-input sc-input-pr"
placeholder="La tua password"
autocomplete="current-password"
/>
@@ -102,7 +309,7 @@
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"
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"
@@ -123,65 +330,79 @@
id="rememberMe"
name="rememberMe"
<#if login.rememberMe??>checked</#if>
class="w-4 h-4 rounded border-[#334155] bg-[#0f172a] accent-cyan-500 cursor-pointer"
class="sc-checkbox"
/>
<span class="text-[#94a3b8] text-sm">Ricordami</span>
<span class="text-sm" style="color:var(--text-secondary)">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">
<a href="${url.loginResetCredentialsUrl}" class="sc-link text-sm">
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>
<button type="submit" class="sc-btn-primary">Accedi</button>
</form>
<!-- Link registrazione -->
<#if realm.registrationAllowed>
<p class="text-center text-[#94a3b8] mt-6 text-sm">
<p class="text-center mt-6 text-sm" style="color:var(--text-secondary)">
Non hai un account?
<a href="${url.registrationUrl}"
class="text-cyan-400 hover:text-cyan-300 transition-colors font-medium ml-1">
Registrati
</a>
<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) {
const input = document.getElementById(inputId);
const isHidden = input.type === 'password';
var input = document.getElementById(inputId);
var isHidden = input.type === 'password';
input.type = isHidden ? 'text' : 'password';
const svg = btn.querySelector('svg');
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"/>`;
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"/>`;
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>