prova 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
<!doctype html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Samb Fan Zone - U.S. Sambenedettese</title>
<script src="/_sdk/data_sdk.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background: #ffffff;
}
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
.samb-app-wrapper {
width: 100%;
min-height: 100vh;
background: #f9fafb;
position: relative;
}
/* WordPress compatibility - reset common WP styles */
.samb-app-wrapper * {
box-sizing: border-box;
}
.samb-app-wrapper input,
.samb-app-wrapper select,
.samb-app-wrapper textarea,
.samb-app-wrapper button {
font-family: 'Montserrat', sans-serif;
}
/* Override WordPress default styles */
.samb-app-wrapper input[type="text"],
.samb-app-wrapper input[type="email"],
.samb-app-wrapper input[type="password"],
.samb-app-wrapper input[type="url"],
.samb-app-wrapper select {
margin: 0;
max-width: 100%;
}
.header-red {
background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);
box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
}
.card {
background: white;
border: 2px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.card:hover {
border-color: #c8102e;
box-shadow: 0 6px 16px rgba(200, 16, 46, 0.15);
transform: translateY(-2px);
}
.btn-red {
background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);
color: white;
padding: 14px 32px;
border-radius: 8px;
font-weight: 700;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all 0.3s;
letter-spacing: 0.5px;
}
.btn-red:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(200, 16, 46, 0.4);
}
.btn-red:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-white {
background: white;
color: #c8102e;
padding: 10px 24px;
border-radius: 6px;
font-weight: 700;
border: 2px solid #c8102e;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-white:hover {
background: #c8102e;
color: white;
}
.btn-secondary {
background: #6b7280;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-secondary:hover {
background: #4b5563;
}
.badge {
display: inline-flex;
align-items: center;
padding: 6px 16px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.badge-bronze { background: #cd7f32; color: white; }
.badge-silver { background: #c0c0c0; color: #1f2937; }
.badge-gold { background: #ffd700; color: #7f1d1d; }
.badge-goat { background: #9333ea; color: white; }
.badge-hall-of-fame { background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%); color: white; border: 2px solid gold; }
.match-btn {
padding: 12px 24px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
font-size: 16px;
}
.match-btn.selected {
border-color: #c8102e;
box-shadow: 0 0 16px rgba(200, 16, 46, 0.5);
transform: scale(1.05);
}
.match-btn-1 { background: #c8102e; color: white; }
.match-btn-x { background: #6b7280; color: white; }
.match-btn-2 { background: #1e40af; color: white; }
.nav-tab {
padding: 16px 28px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.2s;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: white;
opacity: 0.8;
}
.nav-tab.active {
border-bottom-color: white;
opacity: 1;
}
.nav-tab:hover:not(.active) {
opacity: 1;
}
.progress-bar-container {
background: #e5e7eb;
height: 40px;
border-radius: 20px;
position: relative;
overflow: hidden;
border: 2px solid #c8102e;
}
.progress-bar-fill {
background: linear-gradient(90deg, #c8102e 0%, #8b0000 100%);
height: 100%;
transition: width 0.5s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 8px;
}
.boat-icon {
font-size: 28px;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-4px); }
}
.level-up-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.level-up-card {
background: white;
border-radius: 24px;
padding: 60px;
text-align: center;
transform: scale(0.5);
animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
box-shadow: 0 20px 60px rgba(200, 16, 46, 0.5);
position: relative;
overflow: visible;
}
@keyframes popIn {
0% {
transform: scale(0.5) rotate(-10deg);
opacity: 0;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
.level-up-icon {
font-size: 120px;
animation: bounce 1s infinite;
display: inline-block;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.level-up-text {
font-size: 48px;
font-weight: 900;
background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 20px 0;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background: #c8102e;
animation: confettiFall 3s linear forwards;
}
@keyframes confettiFall {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(800px) rotate(720deg);
opacity: 0;
}
}
.stars {
position: absolute;
font-size: 40px;
animation: starBurst 1s ease-out forwards;
}
@keyframes starBurst {
0% {
transform: translate(0, 0) scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: var(--burst-translate) scale(1);
opacity: 0;
}
}
.samb-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 15px;
transition: all 0.2s;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
}
.samb-input:focus {
outline: none;
border-color: #c8102e;
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
.toast-message {
position: fixed;
top: 24px;
right: 24px;
padding: 16px 24px;
border-radius: 8px;
color: white;
font-weight: 700;
z-index: 1000;
animation: slideIn 0.3s ease-out;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
font-size: 14px;
}
@keyframes slideIn {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.scorer-btn {
padding: 16px;
background: white;
border: 3px solid #e5e7eb;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #1f2937;
}
.scorer-btn:hover {
border-color: #c8102e;
transform: translateY(-2px);
}
.scorer-btn.selected {
background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);
color: white;
border-color: #c8102e;
box-shadow: 0 4px 12px rgba(200, 16, 46, 0.4);
}
.jersey-btn {
padding: 20px;
background: white;
border: 3px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.jersey-btn:hover {
border-color: #c8102e;
transform: translateY(-2px);
}
.jersey-btn.selected {
border-color: #c8102e;
box-shadow: 0 4px 16px rgba(200, 16, 46, 0.3);
background: #fef2f2;
}
.attendance-btn {
padding: 12px 20px;
background: white;
border: 2px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
text-align: center;
}
.attendance-btn:hover {
border-color: #c8102e;
transform: scale(1.05);
}
.attendance-btn.selected {
background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);
color: white;
border-color: #c8102e;
box-shadow: 0 4px 12px rgba(200, 16, 46, 0.4);
}
.modal-backdrop {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
}
.leaderboard-item {
transition: all 0.2s;
border-bottom: 1px solid #e5e7eb;
}
.leaderboard-item:hover {
background: #fef2f2;
border-left: 4px solid #c8102e;
padding-left: 16px;
}
.admin-data-table {
width: 100%;
border-collapse: collapse;
}
.admin-data-table th {
background: #f9fafb;
padding: 12px;
text-align: left;
font-weight: 700;
border-bottom: 2px solid #e5e7eb;
text-transform: uppercase;
font-size: 12px;
color: #6b7280;
}
.admin-data-table td {
padding: 12px;
border-bottom: 1px solid #e5e7eb;
}
.delete-action-btn {
background: #dc2626;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
border: none;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.delete-action-btn:hover {
background: #b91c1c;
}
.admin-nav-tab {
padding: 12px 24px;
background: #e5e7eb;
border: none;
cursor: pointer;
font-weight: 700;
transition: all 0.2s;
text-transform: uppercase;
font-size: 14px;
color: #6b7280;
}
.admin-nav-tab.active {
background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);
color: white;
}
.admin-nav-tab:hover {
opacity: 0.8;
}
.link-text {
color: #c8102e;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.link-text:hover {
color: #8b0000;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: #c8102e;
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}
</style>
<style>@view-transition { navigation: auto; }</style>
<script src="/_sdk/element_sdk.js" type="text/javascript"></script>
</head>
<body>
<div id="app" class="samb-app-wrapper"></div>
<script>
let currentUser = null;
let currentPage = 'home';
let isAdminAuthenticated = false;
let adminTab = 'matches';
let userPredictions = {};
let selectedScorer = null;
let selectedJersey = null;
let selectedAttendance = null;
const ADMIN_PASSWORD_KEY = 'samb_admin_password';
const DEFAULT_ADMIN_PASSWORD = "samb2025";
const ATTENDANCE_ENABLED_KEY = 'samb_attendance_enabled';
const LEVEL_THRESHOLDS = {
bronze: 150,
silver: 450,
gold: 900,
goat: 1350,
hallOfFame: 1900
};
const SCORERS = ['EUSEPI', 'SBAFFO', 'KONATE', 'TOURE', 'LESCANO', 'MARRANZINO', 'CANDELLORI'];
const JERSEYS = [
{ id: 'home', name: 'Rossobl (Home)', emoji: '🔴' },
{ id: 'away', name: 'Bianca (Away)', emoji: '⚪' },
{ id: 'third', name: 'Azzurra (Third)', emoji: '🔵' }
];
const ATTENDANCE_RANGES = [];
for (let i = 0; i <= 13700; i += 1000) {
ATTENDANCE_RANGES.push({
min: i,
max: i === 13700 ? 13700 : i + 999,
label: i === 13700 ? '13.000+' : `${(i/1000).toFixed(0)}-${((i+999)/1000).toFixed(1)}K`
});
}
function getAdminPassword() {
return localStorage.getItem(ADMIN_PASSWORD_KEY) || DEFAULT_ADMIN_PASSWORD;
}
function setAdminPassword(password) {
localStorage.setItem(ADMIN_PASSWORD_KEY, password);
}
function isAttendanceEnabled() {
const stored = localStorage.getItem(ATTENDANCE_ENABLED_KEY);
return stored === null ? true : stored === 'true';
}
function setAttendanceEnabled(enabled) {
localStorage.setItem(ATTENDANCE_ENABLED_KEY, enabled.toString());
}
function getMatches() {
return JSON.parse(localStorage.getItem('samb_matches') || '[]');
}
function saveMatches(matches) {
localStorage.setItem('samb_matches', JSON.stringify(matches));
}
function getPredictions() {
return JSON.parse(localStorage.getItem('samb_predictions') || '[]');
}
function savePredictions(predictions) {
localStorage.setItem('samb_predictions', JSON.stringify(predictions));
}
function getGiornataStatus() {
const status = localStorage.getItem('samb_giornata_status');
return status ? JSON.parse(status) : { active: false, giornata: null, startedAt: null };
}
function saveGiornataStatus(status) {
localStorage.setItem('samb_giornata_status', JSON.stringify(status));
}
function getGiornataExtras() {
const extras = localStorage.getItem('samb_giornata_extras');
return extras ? JSON.parse(extras) : { jersey: null, attendance: null };
}
function saveGiornataExtras(extras) {
localStorage.setItem('samb_giornata_extras', JSON.stringify(extras));
}
function getCustomTexts() {
const texts = localStorage.getItem('samb_custom_texts');
return texts ? JSON.parse(texts) : {
welcome_title: 'Fantasy Game Ufficiale dei tifosi rossoblù',
welcome_desc_1: '🎯 PREVEDI',
welcome_subdesc_1: 'Da 1 a 4 partite',
welcome_desc_2: '⚽ INDOVINA',
welcome_subdesc_2: 'Marcatore, maglia e spettatori',
welcome_desc_3: '🏆 VINCI',
welcome_subdesc_3: 'Punti Lancetta',
premi_title: ' PREMI IN PALIO',
premi_subtitle: 'I migliori tifosi rossoblù saranno premiati!',
primo_premio_title: '1° CLASSIFICATO',
primo_premio_value: '300€ di Buono Spesa',
primo_premio_desc: 'da spendere presso il SAMB STORE',
secondo_premio_title: '2° CLASSIFICATO',
secondo_premio_value: '150€ di Buono Spesa',
secondo_premio_desc: 'da spendere presso il SAMB STORE',
terzo_premio_title: '3° CLASSIFICATO',
terzo_premio_value: '50€ di Buono Spesa',
terzo_premio_desc: 'da spendere presso il SAMB STORE',
valore_totale_title: 'VALORE TOTALE PREMI',
valore_totale_value: '500€',
valore_totale_desc: 'in buoni spesa presso il SAMB STORE',
footer_text: 'Gaming di proprietà della U.S. Sambenedettese - All rights reserved'
};
}
function saveCustomTexts(texts) {
localStorage.setItem('samb_custom_texts', JSON.stringify(texts));
}
function getSponsorData() {
const data = localStorage.getItem('samb_sponsor');
return data ? JSON.parse(data) : { text: 'MATCHGAME SPONSOR', imageUrl: '' };
}
function setSponsorData(text, imageUrl) {
localStorage.setItem('samb_sponsor', JSON.stringify({ text, imageUrl }));
}
let allUsers = [];
const dataHandler = {
onDataChanged(users) {
allUsers = users;
if (!currentUser && users.length > 0) {
const savedUserId = localStorage.getItem('samb_current_user_id');
if (savedUserId) {
currentUser = users.find(u => u.__backendId === savedUserId);
}
}
if (currentUser) {
const updated = users.find(u => u.__backendId === currentUser.__backendId);
if (updated) {
currentUser = updated;
}
}
render();
}
};
async function initApp() {
const result = await window.dataSdk.init(dataHandler);
if (!result.isOk) {
console.error("Failed to initialize Data SDK");
return;
}
render();
}
function getLevelInfo(points) {
if (points >= LEVEL_THRESHOLDS.hallOfFame) return { name: 'Hall of Fame', class: 'badge-hall-of-fame', icon: '👑' };
if (points >= LEVEL_THRESHOLDS.goat) return { name: 'Goat', class: 'badge-goat', icon: '⭐' };
if (points >= LEVEL_THRESHOLDS.gold) return { name: 'Oro', class: 'badge-gold', icon: '🥇' };
if (points >= LEVEL_THRESHOLDS.silver) return { name: 'Argento', class: 'badge-silver', icon: '🥈' };
return { name: 'Bronzo', class: 'badge-bronze', icon: '🥉' };
}
function getNextLevel(points) {
if (points < LEVEL_THRESHOLDS.bronze) return { name: 'Bronzo', threshold: LEVEL_THRESHOLDS.bronze };
if (points < LEVEL_THRESHOLDS.silver) return { name: 'Argento', threshold: LEVEL_THRESHOLDS.silver };
if (points < LEVEL_THRESHOLDS.gold) return { name: 'Oro', threshold: LEVEL_THRESHOLDS.gold };
if (points < LEVEL_THRESHOLDS.goat) return { name: 'Goat', threshold: LEVEL_THRESHOLDS.goat };
if (points < LEVEL_THRESHOLDS.hallOfFame) return { name: 'Hall of Fame', threshold: LEVEL_THRESHOLDS.hallOfFame };
return null;
}
function showToast(message, type = 'success') {
const toast = document.createElement('div');
toast.className = `toast-message ${type === 'success' ? 'bg-green-500' : 'bg-red-500'}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 3000);
}
function showLevelUpAnimation(newLevel) {
const overlay = document.createElement('div');
overlay.className = 'level-up-overlay';
const levelInfo = getLevelInfo(newLevel.threshold);
overlay.innerHTML = `
<div class="level-up-card">
<div class="level-up-icon">${levelInfo.icon}</div>
<div class="level-up-text">LIVELLO AUMENTATO!</div>
<div class="badge ${levelInfo.class} text-2xl px-8 py-4 mb-4 inline-block">
${levelInfo.icon} ${levelInfo.name}
</div>
<div class="text-gray-600 text-xl mb-6">Hai raggiunto un nuovo traguardo!</div>
<button onclick="this.closest('.level-up-overlay').remove()" class="btn-red text-xl px-12 py-4">
FANTASTICO! 🎉
</button>
</div>
`;
// Aggiungi stelle che esplodono
const card = overlay.querySelector('.level-up-card');
for (let i = 0; i < 8; i++) {
const star = document.createElement('div');
star.className = 'stars';
star.textContent = '⭐';
const angle = (i * 45) * Math.PI / 180;
const distance = 200;
star.style.setProperty('--burst-translate', `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`);
star.style.top = '50%';
star.style.left = '50%';
card.appendChild(star);
}
// Aggiungi coriandoli
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.top = '-20px';
confetti.style.animationDelay = Math.random() * 0.5 + 's';
confetti.style.background = ['#c8102e', '#ffd700', '#8b0000', '#ff6b6b'][Math.floor(Math.random() * 4)];
overlay.appendChild(confetti);
}
document.body.appendChild(overlay);
// Rimuovi automaticamente dopo 5 secondi
setTimeout(() => {
if (overlay.parentElement) {
overlay.remove();
}
}, 5000);
}
function showLoginModal() {
const modal = document.createElement('div');
modal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
modal.style.zIndex = '1000';
modal.innerHTML = `
<div class="card max-w-md w-full p-8">
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">ACCEDI</h2>
<p class="mb-6 text-gray-600">Bentornato tifoso rossoblù</p>
<form id="loginForm">
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">EMAIL</label>
<input type="email" id="loginEmail" class="samb-input" placeholder="email@esempio.it" required>
</div>
<div class="mb-6">
<label class="block mb-2 font-semibold text-gray-700">PASSWORD</label>
<input type="password" id="loginPassword" class="samb-input" placeholder="La tua password" required>
</div>
<button type="submit" class="btn-red w-full mb-4">
ACCEDI
</button>
<div class="text-center">
<span class="link-text" onclick="this.closest('.modal-backdrop').remove(); showRecoverPasswordModal();">
Password dimenticata?
</span>
</div>
<div class="text-center mt-4">
<span class="text-gray-600">Non hai un account? </span>
<span class="link-text" onclick="this.closest('.modal-backdrop').remove(); showRegistrationModal();">
Registrati
</span>
</div>
</form>
</div>
`;
modal.querySelector('#loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const email = modal.querySelector('#loginEmail').value;
const password = modal.querySelector('#loginPassword').value;
const user = allUsers.find(u => u.email === email && u.password === password);
if (user) {
currentUser = user;
localStorage.setItem('samb_current_user_id', user.__backendId);
showToast('Accesso effettuato con successo');
modal.remove();
render();
} else {
showToast('Email o password errati', 'error');
}
});
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
document.body.appendChild(modal);
}
function showRecoverPasswordModal() {
const modal = document.createElement('div');
modal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
modal.style.zIndex = '1000';
modal.innerHTML = `
<div class="card max-w-md w-full p-8">
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">RECUPERA PASSWORD</h2>
<p class="mb-6 text-gray-600">Inserisci la tua email per recuperare la password</p>
<form id="recoverForm">
<div class="mb-6">
<label class="block mb-2 font-semibold text-gray-700">EMAIL</label>
<input type="email" id="recoverEmail" class="samb-input" placeholder="email@esempio.it" required>
</div>
<button type="submit" class="btn-red w-full mb-4">
RECUPERA PASSWORD
</button>
<div class="text-center">
<span class="link-text" onclick="this.closest('.modal-backdrop').remove(); showLoginModal();">
Torna al login
</span>
</div>
</form>
</div>
`;
modal.querySelector('#recoverForm').addEventListener('submit', (e) => {
e.preventDefault();
const email = modal.querySelector('#recoverEmail').value;
const user = allUsers.find(u => u.email === email);
if (user) {
const recoveryModal = document.createElement('div');
recoveryModal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
recoveryModal.style.zIndex = '1001';
recoveryModal.innerHTML = `
<div class="card max-w-md w-full p-8">
<div class="text-center">
<div class="text-6xl mb-4">OK</div>
<h2 class="text-2xl font-bold mb-3" style="color: #10b981">Password Recuperata</h2>
<p class="mb-4 text-gray-700">La tua password è:</p>
<div class="card p-4 mb-6" style="background: #f0fdf4">
<div class="text-2xl font-black" style="color: #c8102e">${user.password}</div>
</div>
<button onclick="this.closest('.modal-backdrop').remove(); showLoginModal();" class="btn-red w-full">
VAI AL LOGIN
</button>
</div>
</div>
`;
recoveryModal.addEventListener('click', (e) => {
if (e.target === recoveryModal) {
recoveryModal.remove();
showLoginModal();
}
});
modal.remove();
document.body.appendChild(recoveryModal);
} else {
showToast('Email non trovata', 'error');
}
});
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
document.body.appendChild(modal);
}
async function showRegistrationModal() {
const modal = document.createElement('div');
modal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
modal.style.zIndex = '1000';
modal.innerHTML = `
<div class="card max-w-md w-full p-8">
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">REGISTRAZIONE</h2>
<p class="mb-6 text-gray-600">Unisciti al Fantasy Game rossoblù</p>
<form id="registrationForm">
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">NOME UTENTE</label>
<input type="text" id="username" class="samb-input" placeholder="Il tuo nickname" required>
</div>
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">EMAIL</label>
<input type="email" id="email" class="samb-input" placeholder="email@esempio.it" required>
</div>
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">PASSWORD</label>
<input type="password" id="password" class="samb-input" placeholder="Scegli una password" minlength="6" required>
</div>
<div class="mb-6">
<label class="block mb-2 font-semibold text-gray-700">AVATAR</label>
<select id="avatar" class="samb-input">
<option value="⚽">Pallone</option>
<option value="🔴">Rossoblu</option>
<option value="⛵">Barca</option>
<option value="⭐">Stella</option>
<option value=" ️">Stadio</option>
</select>
</div>
<button type="submit" class="btn-red w-full mb-4">
REGISTRATI ORA
</button>
<div class="text-center">
<span class="text-gray-600">Hai già un account? </span>
<span class="link-text" onclick="this.closest('.modal-backdrop').remove(); showLoginModal();">
Accedi
</span>
</div>
</form>
</div>
`;
modal.querySelector('#registrationForm').addEventListener('submit', async (e) => {
e.preventDefault();
const username = modal.querySelector('#username').value;
const email = modal.querySelector('#email').value;
const password = modal.querySelector('#password').value;
const avatar = modal.querySelector('#avatar').value;
const existingUser = allUsers.find(u => u.email === email);
if (existingUser) {
showToast('Email già registrata', 'error');
return;
}
const newUser = {
id: Date.now().toString(),
username,
email,
password,
avatar,
points: 0,
level: 'Bronzo',
lastActivity: new Date().toISOString(),
createdAt: new Date().toISOString()
};
const result = await window.dataSdk.create(newUser);
if (result.isOk) {
showToast('Registrazione completata Benvenuto');
setTimeout(() => {
const users = allUsers;
const registeredUser = users.find(u => u.email === email);
if (registeredUser) {
currentUser = registeredUser;
localStorage.setItem('samb_current_user_id', registeredUser.__backendId);
render();
}
}, 500);
modal.remove();
} else {
showToast('Errore nella registrazione', 'error');
}
});
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
document.body.appendChild(modal);
}
function togglePrediction(matchId, prediction) {
if (!userPredictions[matchId]) {
userPredictions[matchId] = prediction;
} else if (userPredictions[matchId] === prediction) {
delete userPredictions[matchId];
} else {
userPredictions[matchId] = prediction;
}
renderPredictions();
}
function selectScorer(scorer) {
selectedScorer = scorer;
renderScorers();
}
function selectJersey(jersey) {
selectedJersey = jersey;
renderJerseys();
}
function selectAttendance(attendance) {
selectedAttendance = attendance;
renderAttendance();
}
async function submitPredictions() {
if (!currentUser) return;
const selectedCount = Object.keys(userPredictions).length;
if (selectedCount === 0) {
showToast('Devi selezionare almeno 1 partita', 'error');
return;
}
if (!selectedScorer) {
showToast('Devi selezionare anche il marcatore', 'error');
return;
}
if (!selectedJersey) {
showToast('Devi selezionare la maglia', 'error');
return;
}
const attendanceEnabled = isAttendanceEnabled();
if (attendanceEnabled && selectedAttendance === null) {
showToast('Devi selezionare la fascia spettatori', 'error');
return;
}
const matches = getMatches();
const giornata = matches.length > 0 ? matches[0].giornata : 'G1';
const predictions = getPredictions();
const alreadySubmitted = predictions.find(p => p.userId === currentUser.__backendId && p.giornata === giornata && !p.processed);
if (alreadySubmitted) {
showToast('Hai già inviato i pronostici per questa giornata', 'error');
return;
}
predictions.push({
userId: currentUser.__backendId,
giornata: giornata,
predictions: JSON.stringify(userPredictions),
scorer: selectedScorer,
jersey: selectedJersey,
attendance: attendanceEnabled ? selectedAttendance : null,
processed: false,
submittedAt: new Date().toISOString()
});
savePredictions(predictions);
showToast('Pronostici inviati con successo');
userPredictions = {};
selectedScorer = null;
selectedJersey = null;
selectedAttendance = null;
render();
}
function navigateTo(page) {
currentPage = page;
render();
}
function setAdminTab(tab) {
adminTab = tab;
render();
}
function showAdminLogin() {
const modal = document.createElement('div');
modal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
modal.style.zIndex = '1000';
modal.innerHTML = `
<div class="card max-w-md w-full p-8">
<h2 class="text-2xl font-bold mb-6" style="color: #c8102e">Accesso Admin</h2>
<form id="adminLoginForm">
<div class="mb-6">
<label class="block mb-2 font-semibold text-gray-700">Password</label>
<input type="password" id="adminPassword" class="samb-input" placeholder="Inserisci password" required>
</div>
<button type="submit" class="btn-red w-full">
ACCEDI
</button>
</form>
</div>
`;
modal.querySelector('#adminLoginForm').addEventListener('submit', (e) => {
e.preventDefault();
const password = modal.querySelector('#adminPassword').value;
if (password === getAdminPassword()) {
isAdminAuthenticated = true;
modal.remove();
navigateTo('admin');
showToast('Accesso admin autorizzato');
} else {
showToast('Password errata', 'error');
}
});
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
document.body.appendChild(modal);
}
function showChangePasswordModal() {
const modal = document.createElement('div');
modal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
modal.style.zIndex = '1000';
modal.innerHTML = `
<div class="card max-w-md w-full p-8">
<h2 class="text-2xl font-bold mb-6" style="color: #c8102e">Cambia Password Admin</h2>
<form id="changePasswordForm">
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">Password Attuale</label>
<input type="password" id="currentPassword" class="samb-input" required>
</div>
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">Nuova Password</label>
<input type="password" id="newPassword" class="samb-input" minlength="6" required>
</div>
<div class="mb-6">
<label class="block mb-2 font-semibold text-gray-700">Conferma Nuova Password</label>
<input type="password" id="confirmPassword" class="samb-input" minlength="6" required>
</div>
<div class="flex gap-3">
<button type="submit" class="btn-red flex-1">
CAMBIA PASSWORD
</button>
<button type="button" onclick="this.closest('.modal-backdrop').remove()" class="btn-secondary">
ANNULLA
</button>
</div>
</form>
</div>
`;
modal.querySelector('#changePasswordForm').addEventListener('submit', (e) => {
e.preventDefault();
const currentPassword = modal.querySelector('#currentPassword').value;
const newPassword = modal.querySelector('#newPassword').value;
const confirmPassword = modal.querySelector('#confirmPassword').value;
if (currentPassword !== getAdminPassword()) {
showToast('Password attuale errata', 'error');
return;
}
if (newPassword !== confirmPassword) {
showToast('Le password non corrispondono', 'error');
return;
}
if (newPassword.length < 6) {
showToast('La password deve essere almeno 6 caratteri', 'error');
return;
}
setAdminPassword(newPassword);
modal.remove();
showToast('Password cambiata con successo');
});
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
document.body.appendChild(modal);
}
function renderNavigation() {
return `
<nav class="w-full header-red">
<div class="flex items-center justify-between px-6">
<div class="flex items-center gap-4 py-3">
<img decoding="async" src="https://www.ussambenedettese.it/wp-content/uploads/2025/12/logo-samb-1-scaled.png"
alt="U.S. Sambenedettese"
class="h-20 object-contain"
onerror="this.style.display='none'; this.alt='Logo non disponibile';">
</div>
<div class="flex">
<div class="nav-tab ${currentPage === 'home' ? 'active' : ''}" onclick="navigateTo('home')">HOME</div>
<div class="nav-tab ${currentPage === 'leaderboard' ? 'active' : ''}" onclick="navigateTo('leaderboard')">CLASSIFICA</div>
<div class="nav-tab ${currentPage === 'levels' ? 'active' : ''}" onclick="navigateTo('levels')">LIVELLI</div>
<div class="nav-tab ${currentPage === 'premi' ? 'active' : ''}" onclick="navigateTo('premi')">PREMI</div>
<div class="nav-tab ${currentPage === 'admin' ? 'active' : ''}" onclick="${isAdminAuthenticated ? "navigateTo('admin')" : "showAdminLogin()"}">ADMIN</div>
</div>
</div>
</nav>
`;
}
function renderDashboard() {
if (!currentUser) return '';
const level = getLevelInfo(currentUser.points);
const nextLevel = getNextLevel(currentUser.points);
const progress = nextLevel ? ((currentUser.points / nextLevel.threshold) * 100) : 100;
const matches = getMatches();
const giornataStatus = getGiornataStatus();
const attendanceEnabled = isAttendanceEnabled();
const seasonStatus = getSeasonStatus();
const currentGiornata = matches.length > 0 ? matches[0].giornata : null;
const predictions = getPredictions();
const alreadySubmitted = currentGiornata && predictions.find(p =>
p.userId === currentUser.__backendId &&
p.giornata === currentGiornata &&
!p.processed
);
const userProcessedPredictions = predictions
.filter(p => p.userId === currentUser.__backendId && p.processed)
.sort((a, b) => new Date(b.submittedAt) - new Date(a.submittedAt))
.slice(0, 5);
const sponsorData = getSponsorData();
return `
<div class="w-full" style="background: #f9fafb">
<div class="w-full py-6 px-6" style="background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%); border-bottom: 3px solid #c8102e;">
<div class="card p-6 flex items-center justify-center gap-6" style="max-width: 800px; margin: 0 auto;">
<div class="text-2xl font-black text-gray-700" style="letter-spacing: 1px;">
${sponsorData.text}
</div>
${sponsorData.imageUrl ? `
<img decoding="async" src="${sponsorData.imageUrl}"
alt="Sponsor"
class="h-16 object-contain"
onerror="this.style.display='none'; this.alt='Immagine non disponibile';">
` : ''}
</div>
</div>
<div class="p-6">
<div class="card p-8 mb-6" style="background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-4">
<div class="text-6xl font-black text-white">${currentUser.avatar || 'SAMB'}</div>
<div>
<div class="flex items-center gap-3">
<h1 class="text-4xl font-black text-white">${currentUser.username}</h1>
</div>
<p class="text-white opacity-90">${currentUser.email}</p>
</div>
</div>
<div class="text-center">
<div class="badge ${level.class} text-lg px-6 py-3 mb-2">
${level.icon} ${level.name}
</div>
<div class="text-white text-sm font-semibold opacity-90">
Livello Attuale
</div>
</div>
</div>
<div class="mt-6">
<div class="flex justify-between mb-2 text-white">
<span class="font-bold">PUNTI LANCETTA</span>
<span class="font-bold">${currentUser.points} ${nextLevel ? `/ ${nextLevel.threshold}` : ''}</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar-fill" style="width: ${progress}%">
<span class="boat-icon"> </span>
</div>
</div>
</div>
</div>
${!seasonStatus.active ? `
<div class="card p-12 text-center">
<div class="text-6xl mb-4">🔒</div>
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">CAMPIONATO CHIUSO</h2>
<p class="text-gray-600 mb-4">
Il Campionato #${seasonStatus.seasonNumber} è stato chiuso dall'amministratore.
</p>
<div class="card p-6 max-w-md mx-auto" style="background: #fef2f2">
<div class="text-4xl mb-3">🏆</div>
<div class="font-bold mb-2 text-gray-700">Grazie per aver partecipato!</div>
<div class="text-sm text-gray-600">Attendi che l'admin apra un nuovo campionato per ricominciare a giocare.</div>
</div>
</div>
` : matches.length === 0 || !giornataStatus.active ? `
<div class="card p-12 text-center">
<div class="text-6xl mb-4">⏳</div>
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">
${matches.length === 0 ? 'Nessuna giornata creata' : 'Giornata non ancora avviata'}
</h2>
<p class="text-gray-600">
${matches.length === 0
? "L'admin deve creare le partite della prossima giornata"
: "L'admin deve avviare la giornata per permetterti di inserire i pronostici"}
</p>
${matches.length > 0 && !giornataStatus.active ? `
<div class="card p-6 mt-6 max-w-md mx-auto" style="background: #fef2f2">
<div class="text-4xl mb-3"> </div>
<div class="font-bold mb-2 text-gray-700">GIORNATA CREATA: ${currentGiornata}</div>
<div class="text-sm text-gray-600">In attesa che l'admin la avvii ufficialmente</div>
</div>
` : ''}
</div>
` : alreadySubmitted ? `
<div class="card p-12 text-center">
<div class="text-6xl mb-4">✅</div>
<h2 class="text-3xl font-bold mb-2" style="color: #10b981">Pronostici Inviati!</h2>
<p class="text-gray-600 mb-6">Hai già inviato i tuoi pronostici per ${currentGiornata}</p>
<div class="card p-6 max-w-md mx-auto" style="background: #f0fdf4">
<h3 class="font-bold mb-4 text-gray-700">I TUOI PRONOSTICI:</h3>
<div class="space-y-3 text-left">
${(() => {
const userPreds = JSON.parse(alreadySubmitted.predictions);
return matches.map(match => {
const pred = userPreds[match.id];
if (!pred) return '';
return `
<div class="flex items-center justify-between p-3 bg-white rounded-lg">
<div class="text-sm font-semibold text-gray-700">${match.home} vs ${match.away}</div>
<div class="badge ${pred === '1' ? 'bg-red-500' : pred === 'X' ? 'bg-gray-500' : 'bg-blue-700'} text-white px-4 py-1">
${pred}
</div>
</div>
`;
}).join('');
})()}
<div class="flex items-center justify-between p-3 bg-white rounded-lg border-2 border-yellow-400">
<div class="text-sm font-semibold text-gray-700">⚽ Marcatore:</div>
<div class="badge bg-yellow-400 text-gray-900 px-4 py-1 font-black">
${alreadySubmitted.scorer}
</div>
</div>
<div class="flex items-center justify-between p-3 bg-white rounded-lg border-2 border-purple-400">
<div class="text-sm font-semibold text-gray-700">👕 Maglia:</div>
<div class="badge bg-purple-400 text-white px-4 py-1 font-black">
${JERSEYS.find(j => j.id === alreadySubmitted.jersey)?.name || alreadySubmitted.jersey}
</div>
</div>
${attendanceEnabled && alreadySubmitted.attendance !== null ? `
<div class="flex items-center justify-between p-3 bg-white rounded-lg border-2 border-green-400">
<div class="text-sm font-semibold text-gray-700">👥 Spettatori:</div>
<div class="badge bg-green-400 text-white px-4 py-1 font-black">
${ATTENDANCE_RANGES[alreadySubmitted.attendance]?.label || alreadySubmitted.attendance}
</div>
</div>
` : ''}
</div>
</div>
<p class="text-gray-500 text-sm mt-6">Attendi che l'admin inserisca i risultati per vedere i punti guadagnati</p>
</div>
` : `
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-3xl font-bold" style="color: #1f2937">🎯 PREVEDI</h2>
<div class="card px-6 py-3">
<span class="font-bold text-2xl" style="color: ${Object.keys(userPredictions).length > 0 ? '#10b981' : '#c8102e'}">
${Object.keys(userPredictions).length}/4
</span>
</div>
</div>
<div class="card p-6 mb-4" style="background: linear-gradient(to right, #fef2f2, #fee2e2);">
<h3 class="font-bold text-lg mb-3" style="color: #c8102e">📊 Sistema Punteggio</h3>
<div class="grid grid-cols-4 gap-3">
<div class="text-center p-3 bg-white rounded-lg">
<div class="text-2xl font-bold mb-1" style="color: #c8102e">1 pt</div>
<div class="text-sm text-gray-600">1 esatto</div>
</div>
<div class="text-center p-3 bg-white rounded-lg">
<div class="text-2xl font-bold mb-1" style="color: #c8102e">5 pt</div>
<div class="text-sm text-gray-600">2 esatti</div>
</div>
<div class="text-center p-3 bg-white rounded-lg">
<div class="text-2xl font-bold mb-1" style="color: #c8102e">7 pt</div>
<div class="text-sm text-gray-600">3 esatti</div>
</div>
<div class="text-center p-3 bg-white rounded-lg">
<div class="text-2xl font-bold mb-1" style="color: #c8102e">10 pt</div>
<div class="text-sm text-gray-600">4 esatti</div>
</div>
</div>
</div>
<div id="matchesList" class="space-y-4 mb-6"></div>
</div>
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-3xl font-bold" style="color: #1f2937">⚽ INDOVINA</h2>
<div class="card px-6 py-3" style="background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);">
<span class="font-bold text-white">+50 PUNTI</span>
</div>
</div>
<div class="card p-6 mb-4">
<p class="mb-4 text-gray-700 font-semibold">
Chi segnerà per la Sambenedettese? Scegli il tuo marcatore:
</p>
<div id="scorersList" class="grid grid-cols-2 md:grid-cols-4 gap-3"></div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-3xl font-bold" style="color: #1f2937">👕 Indovina la Maglia</h2>
<div class="card px-6 py-3" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
<span class="font-bold text-white">+20 PUNTI</span>
</div>
</div>
<div class="card p-6 mb-4">
<p class="mb-4 text-gray-700 font-semibold">
Con quale maglia scenderà in campo la Samb?
</p>
<div id="jerseysList" class="grid grid-cols-3 gap-4"></div>
</div>
</div>
${attendanceEnabled ? `
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-3xl font-bold" style="color: #1f2937">👥 Indovina gli Spettatori</h2>
<div class="card px-6 py-3" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
<span class="font-bold text-white">+30 PUNTI</span>
</div>
</div>
<div class="card p-6 mb-4">
<p class="mb-4 text-gray-700 font-semibold">
Quanti spettatori ci saranno allo stadio? (0 - 13.700)
</p>
<div id="attendanceList" class="grid grid-cols-3 md:grid-cols-5 gap-3"></div>
</div>
</div>
` : ''}
<button
id="submitPredictionsBtn"
onclick="submitPredictions()"
class="btn-red w-full text-xl py-5"
>
INVIA PRONOSTICI 🚀
</button>
`}
${userProcessedPredictions.length > 0 ? `
<div class="card p-8 mb-6 mt-8">
<h2 class="text-2xl font-bold mb-4" style="color: #1f2937">📊 ULTIME 5 GIORNATE</h2>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b-2 border-gray-200">
<th class="text-left py-3 px-4 font-bold text-gray-700">GIORNATA</th>
<th class="text-center py-3 px-4 font-bold text-gray-700">DATA</th>
<th class="text-center py-3 px-4 font-bold text-gray-700">PRONOSTICI</th>
<th class="text-right py-3 px-4 font-bold text-gray-700">PUNTI</th>
</tr>
</thead>
<tbody>
${userProcessedPredictions.map(pred => `
<tr class="border-b border-gray-100 hover:bg-red-50">
<td class="py-4 px-4">
<div class="font-bold" style="color: #c8102e">${pred.giornata}</div>
</td>
<td class="text-center py-4 px-4 text-gray-600 text-sm">
${new Date(pred.submittedAt).toLocaleDateString('it-IT')}
</td>
<td class="text-center py-4 px-4">
<div class="inline-flex items-center gap-2 bg-gray-100 px-3 py-1 rounded-full">
<span class="text-sm font-semibold text-gray-700">
${Object.values(JSON.parse(pred.predictions)).join(' - ')}
</span>
</div>
</td>
<td class="text-right py-4 px-4">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full font-black text-xl"
style="background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%); color: white;">
${pred.pointsEarned || 0}
</div>
</td>
</tr>
`).join('')}
</tbody>
</table>
</div>
</div>
` : ''}
<div class="mt-8 text-center p-6">
<p class="text-gray-600 text-sm font-semibold">
${getCustomTexts().footer_text}
</p>
</div>
</div>
`;
}
function updateSubmitButton() {
const submitBtn = document.getElementById('submitPredictionsBtn');
if (!submitBtn) return;
const hasMinimumPredictions = Object.keys(userPredictions).length >= 1;
const hasScorer = selectedScorer !== null;
const hasJersey = selectedJersey !== null;
const attendanceEnabled = isAttendanceEnabled();
const hasAttendance = !attendanceEnabled || selectedAttendance !== null;
const isValid = hasMinimumPredictions && hasScorer && hasJersey && hasAttendance;
if (isValid) {
submitBtn.disabled = false;
submitBtn.style.opacity = '1';
submitBtn.style.cursor = 'pointer';
} else {
submitBtn.disabled = true;
submitBtn.style.opacity = '0.5';
submitBtn.style.cursor = 'not-allowed';
}
}
function renderPredictions() {
const matchesListEl = document.getElementById('matchesList');
if (!matchesListEl) return;
const matches = getMatches();
matchesListEl.innerHTML = matches.map(match => {
const selectedPrediction = userPredictions[match.id];
return `
<div class="card p-6">
<div class="text-center mb-4">
<div class="font-bold text-xl text-gray-800">${match.home}</div>
<div class="text-sm text-gray-500 my-2">VS</div>
<div class="font-bold text-xl text-gray-800">${match.away}</div>
</div>
<div class="flex gap-3 justify-center">
<button
onclick="togglePrediction('${match.id}', '1')"
class="match-btn match-btn-1 ${selectedPrediction === '1' ? 'selected' : ''}"
>
1
</button>
<button
onclick="togglePrediction('${match.id}', 'X')"
class="match-btn match-btn-x ${selectedPrediction === 'X' ? 'selected' : ''}"
>
X
</button>
<button
onclick="togglePrediction('${match.id}', '2')"
class="match-btn match-btn-2 ${selectedPrediction === '2' ? 'selected' : ''}"
>
2
</button>
</div>
</div>
`;
}).join('');
updateSubmitButton();
}
function renderScorers() {
const scorersListEl = document.getElementById('scorersList');
if (!scorersListEl) return;
scorersListEl.innerHTML = SCORERS.map(scorer => `
<button
onclick="selectScorer('${scorer}')"
class="scorer-btn ${selectedScorer === scorer ? 'selected' : ''}"
>
${scorer}
</button>
`).join('');
updateSubmitButton();
}
function renderJerseys() {
const jerseysListEl = document.getElementById('jerseysList');
if (!jerseysListEl) return;
jerseysListEl.innerHTML = JERSEYS.map(jersey => `
<button
onclick="selectJersey('${jersey.id}')"
class="jersey-btn ${selectedJersey === jersey.id ? 'selected' : ''}"
>
<div class="text-4xl mb-2">${jersey.emoji}</div>
<div class="font-bold text-sm text-gray-800">${jersey.name}</div>
</button>
`).join('');
updateSubmitButton();
}
function renderAttendance() {
const attendanceListEl = document.getElementById('attendanceList');
if (!attendanceListEl) return;
attendanceListEl.innerHTML = ATTENDANCE_RANGES.map((range, index) => `
<button
onclick="selectAttendance(${index})"
class="attendance-btn ${selectedAttendance === index ? 'selected' : ''}"
>
${range.label}
</button>
`).join('');
updateSubmitButton();
}
function renderPremiPage() {
const texts = getCustomTexts();
return `
<div class="w-full p-6" style="background: #f9fafb">
<div class="mb-6">
<h1 class="text-4xl font-black mb-2" style="color: #c8102e">${texts.premi_title}</h1>
<p class="text-gray-600 text-lg">${texts.premi_subtitle}</p>
</div>
<div class="card p-8 mb-6" style="background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);">
<div class="flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="text-8xl">🥇</div>
<div>
<div class="text-4xl font-black mb-2" style="color: #7f1d1d">${texts.primo_premio_title}</div>
<div class="text-2xl font-bold" style="color: #991b1b">${texts.primo_premio_value}</div>
<div class="text-lg mt-2" style="color: #7f1d1d">${texts.primo_premio_desc}</div>
</div>
</div>
<div class="text-6xl font-black" style="color: #7f1d1d">${texts.primo_premio_value.split(' ')[0]}</div>
</div>
</div>
<div class="card p-8 mb-6" style="background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);">
<div class="flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="text-8xl">🥈</div>
<div>
<div class="text-4xl font-black mb-2" style="color: #374151">${texts.secondo_premio_title}</div>
<div class="text-2xl font-bold" style="color: #4b5563">${texts.secondo_premio_value}</div>
<div class="text-lg mt-2" style="color: #374151">${texts.secondo_premio_desc}</div>
</div>
</div>
<div class="text-6xl font-black" style="color: #374151">${texts.secondo_premio_value.split(' ')[0]}</div>
</div>
</div>
<div class="card p-8 mb-6" style="background: linear-gradient(135deg, #cd7f32 0%, #e9a55d 100%);">
<div class="flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="text-8xl">🥉</div>
<div>
<div class="text-4xl font-black mb-2 text-white">${texts.terzo_premio_title}</div>
<div class="text-2xl font-bold text-white">${texts.terzo_premio_value}</div>
<div class="text-lg mt-2 text-white opacity-90">${texts.terzo_premio_desc}</div>
</div>
</div>
<div class="text-6xl font-black text-white">${texts.terzo_premio_value.split(' ')[0]}</div>
</div>
</div>
<div class="card p-8 mb-6" style="background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);">
<div class="text-center text-white">
<div class="text-5xl mb-4">🎁</div>
<h2 class="text-3xl font-black mb-3">${texts.valore_totale_title}</h2>
<div class="text-7xl font-black mb-2">${texts.valore_totale_value}</div>
<p class="text-xl opacity-90">${texts.valore_totale_desc}</p>
</div>
</div>
<div class="card p-8">
<h2 class="text-2xl font-bold mb-4" style="color: #1f2937">📋 REGOLAMENTO PREMI</h2>
<div class="space-y-4 text-gray-700">
<div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
<div class="text-2xl">✅</div>
<div>
<div class="font-bold mb-1">Classifica Finale</div>
<div class="text-sm">I premi saranno assegnati ai primi 3 classificati al termine delle 22 giornate di campionato</div>
</div>
</div>
<div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
<div class="text-2xl">🏪</div>
<div>
<div class="font-bold mb-1">SAMB STORE</div>
<div class="text-sm">I buoni spesa sono validi esclusivamente presso il SAMB STORE ufficiale per l'acquisto di merchandising rossoblù</div>
</div>
</div>
<div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
<div class="text-2xl">🎯</div>
<div>
<div class="font-bold mb-1">Validità</div>
<div class="text-sm">I buoni spesa dovranno essere utilizzati entro la data specificata dalla società al momento della consegna</div>
</div>
</div>
<div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
<div class="text-2xl">📞</div>
<div>
<div class="font-bold mb-1">Contatti</div>
<div class="text-sm">Per informazioni sui premi, contattare la segreteria della U.S. Sambenedettese</div>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center card p-8" style="background: linear-gradient(to right, #fef2f2, #fee2e2);">
<div class="text-4xl mb-3">⚽</div>
<h3 class="text-2xl font-bold mb-2" style="color: #c8102e">Continua a Pronosticare!</h3>
<p class="text-gray-700 font-semibold">Accumula Punti Lancetta ad ogni giornata e scala la classifica verso la vittoria</p>
</div>
</div>
`;
}
function renderLevelsPage() {
const maxGiornate = 22;
const maxPointsPerRound = 110;
const maxPoints = maxPointsPerRound * maxGiornate;
return `
<div class="w-full p-6" style="background: #f9fafb">
<div class="mb-6">
<h1 class="text-4xl font-black mb-2" style="color: #c8102e">SISTEMA LIVELLI</h1>
<p class="text-gray-600 text-lg">Graduatoria per ${maxGiornate} giornate di campionato</p>
</div>
<div class="card p-8 mb-6">
<h2 class="text-2xl font-bold mb-4" style="color: #1f2937">PUNTEGGI</h2>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div class="card p-6" style="background: #fef2f2">
<div class="text-sm font-bold mb-3" style="color: #c8102e">PRONOSTICI (1-4 PARTITE)</div>
<div class="space-y-2 text-gray-700">
<div>1 esatto = 1 punto</div>
<div>2 esatti = 5 punti</div>
<div>3 esatti = 7 punti</div>
<div>4 esatti = 10 punti</div>
</div>
</div>
<div class="card p-6" style="background: #fffbeb">
<div class="text-sm font-bold mb-3" style="color: #f59e0b">BONUS</div>
<div class="space-y-2 text-gray-700">
<div>Marcatore esatto = <strong style="color: #f59e0b">+50 punti</strong></div>
<div>Maglia esatta = <strong style="color: #8b5cf6">+20 punti</strong></div>
<div>Fascia spettatori esatta = <strong style="color: #10b981">+30 punti</strong></div>
</div>
</div>
</div>
<div class="p-6 rounded-xl text-center" style="background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);">
<div class="text-sm font-bold mb-2 text-white">PUNTI TOTALI POSSIBILI (${maxGiornate} GIORNATE)</div>
<div class="text-5xl font-black text-white">${maxPoints}</div>
<div class="text-sm text-white opacity-90 mt-2">Punti Lancetta</div>
</div>
</div>
<div class="card p-8">
<h2 class="text-2xl font-bold mb-6" style="color: #1f2937">LIVELLI TIFOSI</h2>
<div class="space-y-4">
${[
{ name: 'Bronzo', threshold: LEVEL_THRESHOLDS.bronze, class: 'badge-bronze', icon: '🥉' },
{ name: 'Argento', threshold: LEVEL_THRESHOLDS.silver, class: 'badge-silver', icon: '🥈' },
{ name: 'Oro', threshold: LEVEL_THRESHOLDS.gold, class: 'badge-gold', icon: '🥇' },
{ name: 'Goat', threshold: LEVEL_THRESHOLDS.goat, class: 'badge-goat', icon: '⭐' },
{ name: 'Hall of Fame', threshold: LEVEL_THRESHOLDS.hallOfFame, class: 'badge-hall-of-fame', icon: ' ' }
].map(level => {
const percentage = ((level.threshold / maxPoints) * 100).toFixed(1);
return `
<div class="card p-6 flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="text-5xl">${level.icon}</div>
<div>
<div class="badge ${level.class} mb-2 text-sm">${level.icon} ${level.name}</div>
<div class="text-sm text-gray-600">Richiede ${level.threshold} Punti Lancetta (${percentage}% del massimo)</div>
</div>
</div>
<div class="text-right">
<div class="text-4xl font-black" style="color: #c8102e">${level.threshold}</div>
<div class="text-xs text-gray-500">PUNTI</div>
</div>
</div>
`;
}).join('')}
</div>
</div>
</div>
`;
}
function renderLeaderboard() {
const users = allUsers;
const sortedUsers = users.sort((a, b) => b.points - a.points);
return `
<div class="w-full p-6" style="background: #f9fafb">
<div class="mb-6">
<h1 class="text-4xl font-black mb-2" style="color: #c8102e">CLASSIFICA</h1>
<p class="text-gray-600 text-lg">Tutti i tifosi rossoblù</p>
</div>
${sortedUsers.length === 0 ? `
<div class="card p-12 text-center">
<div class="text-6xl mb-4">VUOTO</div>
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">Nessun utente registrato</h2>
<p class="text-gray-600">Sii il primo a unirti</p>
</div>
` : `
<div class="card p-6">
${sortedUsers.map((user, index) => {
const level = getLevelInfo(user.points);
const position = index + 1;
const isCurrentUser = currentUser && user.__backendId === currentUser.__backendId;
return `
<div class="leaderboard-item flex items-center justify-between p-5 ${isCurrentUser ? 'bg-red-50' : ''}">
<div class="flex items-center gap-6 flex-1">
<div class="text-3xl font-black w-16 text-center" style="color: #c8102e">${position}</div>
<div class="text-4xl font-black">${user.avatar || 'U'}</div>
<div class="flex-1">
<div class="flex items-center gap-3">
<div class="font-bold text-xl text-gray-800">
${user.username} ${isCurrentUser ? '(Tu)' : ''}
</div>
<div class="badge ${level.class} text-xs px-3 py-1">${level.name}</div>
</div>
</div>
</div>
<div class="text-right">
<div class="text-3xl font-black" style="color: #c8102e">${user.points}</div>
<div class="text-sm text-gray-500">Punti Lancetta</div>
</div>
</div>
`;
}).join('')}
</div>
`}
</div>
`;
}
function renderAdmin() {
if (!isAdminAuthenticated) {
return `
<div class="w-full p-6 flex items-center justify-center" style="background: #f9fafb; min-height: 600px">
<div class="card p-12 text-center max-w-md">
<div class="text-6xl mb-4">BLOCCATO</div>
<h2 class="text-3xl font-bold mb-4" style="color: #c8102e">Accesso Richiesto</h2>
<p class="mb-6 text-gray-600">Devi effettuare il login come amministratore</p>
<button onclick="showAdminLogin()" class="btn-red">
LOGIN ADMIN
</button>
</div>
</div>
`;
}
const matches = getMatches();
return `
<div class="w-full p-6" style="background: #f9fafb">
<div class="mb-6">
<h1 class="text-4xl font-black mb-2" style="color: #c8102e">PANNELLO ADMIN</h1>
<p class="text-gray-600 text-lg">Gestisci partite, risultati e impostazioni</p>
</div>
<div class="card mb-6">
<div class="flex gap-2 p-2">
<button onclick="setAdminTab('matches')" class="admin-nav-tab flex-1 ${adminTab === 'matches' ? 'active' : ''}">
PARTITE
</button>
<button onclick="setAdminTab('results')" class="admin-nav-tab flex-1 ${adminTab === 'results' ? 'active' : ''}" ${matches.length === 0 ? 'disabled style="opacity: 0.5; cursor: not-allowed;"' : ''}>
RISULTATI
</button>
<button onclick="setAdminTab('settings')" class="admin-nav-tab flex-1 ${adminTab === 'settings' ? 'active' : ''}">
IMPOSTAZIONI
</button>
<button onclick="setAdminTab('testi')" class="admin-nav-tab flex-1 ${adminTab === 'testi' ? 'active' : ''}">
TESTI
</button>
</div>
</div>
${adminTab === 'matches' ? renderAdminMatches() : ''}
${adminTab === 'results' ? renderAdminResults() : ''}
${adminTab === 'settings' ? renderAdminSettings() : ''}
${adminTab === 'testi' ? renderAdminTexts() : ''}
</div>
`;
}
function renderAdminMatches() {
const matches = getMatches();
const giornataStatus = getGiornataStatus();
return `
<div class="card p-8 mb-6">
<h2 class="text-2xl font-bold mb-6" style="color: #1f2937">GESTIONE GIORNATA</h2>
${matches.length > 0 && !giornataStatus.active ? `
<div class="mb-6 p-6 border-2 border-green-300 rounded-lg" style="background: #f0fdf4">
<div class="flex items-center justify-between">
<div>
<div class="text-2xl font-bold mb-2 text-green-800">Giornata Creata: ${matches[0].giornata}</div>
<p class="text-green-700 mb-3">Le 4 partite sono state create. Ora puoi avviare ufficialmente la giornata.</p>
<div class="text-sm text-gray-600 italic">
Una volta avviata, gli utenti potranno inserire i loro pronostici.
</div>
</div>
<button onclick="startGiornata()" class="btn-red whitespace-nowrap ml-4">
AVVIA GIORNATA
</button>
</div>
</div>
` : ''}
${matches.length > 0 && giornataStatus.active ? `
<div class="mb-6 p-6 border-2 border-blue-300 rounded-lg" style="background: #eff6ff">
<div class="flex items-center justify-between">
<div>
<div class="text-2xl font-bold mb-2 text-blue-800">Giornata In Corso: ${matches[0].giornata}</div>
<p class="text-blue-700 mb-2">Gli utenti possono inviare i pronostici.</p>
<div class="text-sm text-gray-600">
Avviata il: ${new Date(giornataStatus.startedAt).toLocaleString('it-IT')}
</div>
</div>
<div class="text-4xl text-red-600">ATTIVO</div>
</div>
</div>
<div class="mb-6 p-4 bg-yellow-50 border-2 border-yellow-300 rounded-lg">
<p class="text-yellow-800 font-semibold">ATTENZIONE: C'è già una giornata attiva (${matches[0].giornata}). Completa o elimina prima di crearne una nuova.</p>
</div>
` : ''}
${matches.length === 0 ? `
<div class="mb-6">
<h3 class="font-bold text-lg mb-4 text-gray-700">CREA NUOVA GIORNATA</h3>
</div>
` : ''}
<form id="addMatchesForm">
<div class="mb-6">
<label class="block mb-2 font-bold text-gray-700">GIORNATA</label>
<input type="text" id="giornataN" class="samb-input" placeholder="es: G1, G2, G3..." required ${matches.length > 0 ? 'disabled' : ''}>
</div>
<div class="space-y-4 mb-6">
${[1,2,3,4].map(i => `
<div class="grid grid-cols-2 gap-4">
<input type="text" id="home${i}" class="samb-input" placeholder="Squadra Casa ${i}" required ${matches.length > 0 ? 'disabled' : ''}>
<input type="text" id="away${i}" class="samb-input" placeholder="Squadra Ospite ${i}" required ${matches.length > 0 ? 'disabled' : ''}>
</div>
`).join('')}
</div>
<button type="submit" class="btn-red w-full" ${matches.length > 0 ? 'disabled' : ''}>
CREA 4 PARTITE
</button>
</form>
${matches.length > 0 ? `
<div class="mt-8">
<h3 class="font-bold mb-4 text-gray-700">PARTITE ATTUALI (${matches[0].giornata})</h3>
<table class="admin-data-table">
<thead>
<tr>
<th>CASA</th>
<th>OSPITE</th>
<th>RISULTATO</th>
<th>AZIONI</th>
</tr>
</thead>
<tbody>
${matches.map(m => `
<tr>
<td class="font-semibold">${m.home}</td>
<td class="font-semibold">${m.away}</td>
<td>${m.result || '-'}</td>
<td><button onclick="deleteMatch('${m.id}')" class="delete-action-btn">Elimina</button></td>
</tr>
`).join('')}
</tbody>
</table>
</div>
` : ''}
</div>
`;
}
function renderAdminResults() {
const matches = getMatches();
if (matches.length === 0) {
return `
<div class="card p-12 text-center">
<div class="text-6xl mb-4">ALERT</div>
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">Nessuna giornata attiva</h2>
<p class="text-gray-600 mb-6">Vai alla sezione PARTITE per creare una nuova giornata</p>
<button onclick="setAdminTab('matches')" class="btn-red">
VAI A PARTITE
</button>
</div>
`;
}
const currentGiornata = matches[0].giornata;
const predictions = getPredictions();
const usersWithPredictions = predictions.filter(p => p.giornata === currentGiornata && !p.processed);
const totalUsers = allUsers.length;
const usersWithoutPredictions = totalUsers - usersWithPredictions.length;
const attendanceEnabled = isAttendanceEnabled();
return `
<div class="card p-8">
<h2 class="text-2xl font-bold mb-6" style="color: #1f2937">INSERISCI RISULTATI (${currentGiornata})</h2>
<div class="card p-6 mb-6" style="background: ${usersWithoutPredictions > 0 ? '#fef2f2' : '#f0fdf4'}">
<div class="flex items-center justify-between mb-4">
<div>
<div class="text-sm font-bold mb-1" style="color: ${usersWithoutPredictions > 0 ? '#c8102e' : '#10b981'}">
PRONOSTICI RICEVUTI
</div>
<div class="text-4xl font-black" style="color: ${usersWithoutPredictions > 0 ? '#c8102e' : '#10b981'}">
${usersWithPredictions.length} / ${totalUsers}
</div>
</div>
<div class="text-6xl">
${usersWithoutPredictions > 0 ? 'ATTESA' : 'OK'}
</div>
</div>
${usersWithoutPredictions > 0 ? `
<div class="p-4 bg-white rounded-lg">
<div class="font-bold text-orange-600 mb-2">ATTENZIONE: ${usersWithoutPredictions} ${usersWithoutPredictions === 1 ? 'utente non ha' : 'utenti non hanno'} ancora inviato i pronostici</div>
<div class="text-sm text-gray-600">Puoi comunque procedere. Gli utenti senza pronostici non riceveranno punti per questa giornata.</div>
</div>
` : `
<div class="p-4 bg-white rounded-lg">
<div class="font-bold text-green-600 mb-2">CONFERMATO: Tutti gli utenti hanno inviato i pronostici</div>
<div class="text-sm text-gray-600">Puoi procedere con l'inserimento dei risultati.</div>
</div>
`}
</div>
${usersWithoutPredictions > 0 ? `
<div class="card p-6 mb-6" style="background: #fffbeb">
<div class="font-bold mb-3 text-gray-700">UTENTI SENZA PRONOSTICI (${usersWithoutPredictions}):</div>
<div class="space-y-2">
${allUsers.filter(user => !usersWithPredictions.find(p => p.userId === user.__backendId)).map(user => `
<div class="flex items-center gap-3 p-3 bg-white rounded-lg border border-orange-200">
<div class="text-2xl font-black">${user.avatar || 'U'}</div>
<div class="font-semibold text-gray-800">${user.username}</div>
<div class="text-sm text-gray-500">${user.email}</div>
</div>
`).join('')}
</div>
<div class="mt-3 text-sm text-gray-600 italic">
Questi utenti rimarranno nella classifica ma non riceveranno punti per questa giornata.
</div>
</div>
` : ''}
<form id="setResultsForm">
<div class="space-y-4 mb-6">
${matches.map(match => `
<div class="card p-4">
<div class="font-semibold mb-2 text-gray-800">${match.home} vs ${match.away}</div>
<select id="result_${match.id}" class="samb-input" required>
<option value="">Seleziona risultato</option>
<option value="1">1 - Vittoria ${match.home}</option>
<option value="X">X - Pareggio</option>
<option value="2">2 - Vittoria ${match.away}</option>
</select>
</div>
`).join('')}
</div>
<div class="mb-4">
<label class="block mb-2 font-bold text-gray-700">MARCATORE SAMB</label>
<select id="realScorer" class="samb-input" required>
<option value="">Seleziona marcatore</option>
<option value="nessuno">Nessuno</option>
${SCORERS.map(s => `<option value="${s}">${s}</option>`).join('')}
</select>
</div>
<div class="mb-4">
<label class="block mb-2 font-bold text-gray-700">MAGLIA SAMB</label>
<select id="realJersey" class="samb-input" required>
<option value="">Seleziona maglia</option>
${JERSEYS.map(j => `<option value="${j.id}">${j.name}</option>`).join('')}
</select>
</div>
${attendanceEnabled ? `
<div class="mb-6">
<label class="block mb-2 font-bold text-gray-700">FASCIA SPETTATORI</label>
<select id="realAttendance" class="samb-input" required>
<option value="">Seleziona fascia spettatori</option>
${ATTENDANCE_RANGES.map((range, index) => `<option value="${index}">${range.label} (${range.min} - ${range.max})</option>`).join('')}
</select>
</div>
` : ''}
<button type="submit" class="btn-red w-full">
CALCOLA PUNTI E CHIUDI GIORNATA
</button>
</form>
</div>
`;
}
function renderAdminTexts() {
const texts = getCustomTexts();
return `
<div class="card p-8">
<h2 class="text-2xl font-bold mb-6" style="color: #1f2937">MODIFICA TESTI</h2>
<p class="mb-6 text-gray-600">Personalizza i testi visualizzati nelle varie pagine dell'applicazione</p>
<form id="textsForm">
<div class="mb-8 card p-6" style="background: #fef2f2">
<h3 class="text-lg font-bold mb-4 text-gray-700">PAGINA BENVENUTO (Non loggati)</h3>
<div class="space-y-4">
<div>
<label class="block mb-2 font-semibold text-gray-700">Titolo Principale</label>
<input type="text" id="welcome_title" class="samb-input" value="${texts.welcome_title}" required>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block mb-2 font-semibold text-gray-700">Sezione 1 - Titolo</label>
<input type="text" id="welcome_desc_1" class="samb-input" value="${texts.welcome_desc_1}" required>
</div>
<div>
<label class="block mb-2 font-semibold text-gray-700">Sezione 1 - Descrizione</label>
<input type="text" id="welcome_subdesc_1" class="samb-input" value="${texts.welcome_subdesc_1}" required>
</div>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block mb-2 font-semibold text-gray-700">Sezione 2 - Titolo</label>
<input type="text" id="welcome_desc_2" class="samb-input" value="${texts.welcome_desc_2}" required>
</div>
<div>
<label class="block mb-2 font-semibold text-gray-700">Sezione 2 - Descrizione</label>
<input type="text" id="welcome_subdesc_2" class="samb-input" value="${texts.welcome_subdesc_2}" required>
</div>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block mb-2 font-semibold text-gray-700">Sezione 3 - Titolo</label>
<input type="text" id="welcome_desc_3" class="samb-input" value="${texts.welcome_desc_3}" required>
</div>
<div>
<label class="block mb-2 font-semibold text-gray-700">Sezione 3 - Descrizione</label>
<input type="text" id="welcome_subdesc_3" class="samb-input" value="${texts.welcome_subdesc_3}" required>
</div>
</div>
</div>
</div>
<div class="mb-8 card p-6" style="background: #fffbeb">
<h3 class="text-lg font-bold mb-4 text-gray-700">PAGINA PREMI</h3>
<div class="space-y-4">
<div>
<label class="block mb-2 font-semibold text-gray-700">Titolo Pagina</label>
<input type="text" id="premi_title" class="samb-input" value="${texts.premi_title}" required>
</div>
<div>
<label class="block mb-2 font-semibold text-gray-700">Sottotitolo Pagina</label>
<input type="text" id="premi_subtitle" class="samb-input" value="${texts.premi_subtitle}" required>
</div>
<div class="p-4 bg-yellow-100 rounded-lg mt-4 mb-4">
<div class="font-bold mb-2">🥇 Primo Premio</div>
<div class="grid md:grid-cols-3 gap-3">
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Titolo</label>
<input type="text" id="primo_premio_title" class="samb-input" value="${texts.primo_premio_title}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Valore</label>
<input type="text" id="primo_premio_value" class="samb-input" value="${texts.primo_premio_value}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Descrizione</label>
<input type="text" id="primo_premio_desc" class="samb-input" value="${texts.primo_premio_desc}" required>
</div>
</div>
</div>
<div class="p-4 bg-gray-200 rounded-lg mb-4">
<div class="font-bold mb-2">🥈 Secondo Premio</div>
<div class="grid md:grid-cols-3 gap-3">
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Titolo</label>
<input type="text" id="secondo_premio_title" class="samb-input" value="${texts.secondo_premio_title}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Valore</label>
<input type="text" id="secondo_premio_value" class="samb-input" value="${texts.secondo_premio_value}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Descrizione</label>
<input type="text" id="secondo_premio_desc" class="samb-input" value="${texts.secondo_premio_desc}" required>
</div>
</div>
</div>
<div class="p-4 bg-orange-200 rounded-lg mb-4">
<div class="font-bold mb-2">🥉 Terzo Premio</div>
<div class="grid md:grid-cols-3 gap-3">
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Titolo</label>
<input type="text" id="terzo_premio_title" class="samb-input" value="${texts.terzo_premio_title}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Valore</label>
<input type="text" id="terzo_premio_value" class="samb-input" value="${texts.terzo_premio_value}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Descrizione</label>
<input type="text" id="terzo_premio_desc" class="samb-input" value="${texts.terzo_premio_desc}" required>
</div>
</div>
</div>
<div class="p-4 bg-red-100 rounded-lg">
<div class="font-bold mb-2">🎁 Valore Totale</div>
<div class="grid md:grid-cols-3 gap-3">
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Titolo</label>
<input type="text" id="valore_totale_title" class="samb-input" value="${texts.valore_totale_title}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Valore</label>
<input type="text" id="valore_totale_value" class="samb-input" value="${texts.valore_totale_value}" required>
</div>
<div>
<label class="block mb-1 text-sm font-semibold text-gray-700">Descrizione</label>
<input type="text" id="valore_totale_desc" class="samb-input" value="${texts.valore_totale_desc}" required>
</div>
</div>
</div>
</div>
</div>
<div class="mb-8 card p-6" style="background: #f0f9ff">
<h3 class="text-lg font-bold mb-4 text-gray-700">FOOTER</h3>
<div>
<label class="block mb-2 font-semibold text-gray-700">Testo Footer (visualizzato in tutte le pagine)</label>
<input type="text" id="footer_text" class="samb-input" value="${texts.footer_text}" required>
</div>
</div>
<button type="submit" class="btn-red w-full text-xl">
SALVA TUTTI I TESTI
</button>
</form>
</div>
`;
}
function getSeasonStatus() {
const status = localStorage.getItem('samb_season_status');
return status ? JSON.parse(status) : { active: true, seasonNumber: 1, startedAt: new Date().toISOString() };
}
function saveSeasonStatus(status) {
localStorage.setItem('samb_season_status', JSON.stringify(status));
}
function renderAdminSettings() {
const sponsorData = getSponsorData();
const attendanceEnabled = isAttendanceEnabled();
const seasonStatus = getSeasonStatus();
return `
<div class="card p-8">
<h2 class="text-2xl font-bold mb-6" style="color: #1f2937">IMPOSTAZIONI ADMIN</h2>
<div class="mb-8">
<h3 class="text-lg font-bold mb-4 text-gray-700">GESTIONE CAMPIONATO</h3>
<div class="card p-6" style="background: ${seasonStatus.active ? '#f0fdf4' : '#fef2f2'}">
<div class="flex items-center justify-between mb-4">
<div>
<div class="text-2xl font-bold mb-2" style="color: ${seasonStatus.active ? '#10b981' : '#c8102e'}">
${seasonStatus.active ? '🏆 CAMPIONATO ATTIVO' : '🔒 CAMPIONATO CHIUSO'}
</div>
<div class="text-gray-700 mb-2">
<strong>Campionato #${seasonStatus.seasonNumber}</strong>
</div>
<div class="text-sm text-gray-600">
${seasonStatus.active
? `Iniziato il: ${new Date(seasonStatus.startedAt).toLocaleDateString('it-IT')}`
: seasonStatus.closedAt
? `Chiuso il: ${new Date(seasonStatus.closedAt).toLocaleDateString('it-IT')}`
: ''}
</div>
</div>
<div class="text-6xl">
${seasonStatus.active ? '✅' : '🔒'}
</div>
</div>
${seasonStatus.active ? `
<div class="p-4 bg-white rounded-lg mb-4">
<div class="font-bold text-gray-800 mb-2">📊 STATISTICHE CAMPIONATO CORRENTE</div>
<div class="space-y-2 text-sm text-gray-700">
<div class="flex justify-between">
<span>Utenti Partecipanti:</span>
<span class="font-bold">${allUsers.length}</span>
</div>
<div class="flex justify-between">
<span>Pronostici Totali:</span>
<span class="font-bold">${getPredictions().length}</span>
</div>
<div class="flex justify-between">
<span>Giornate Completate:</span>
<span class="font-bold">${getPredictions().filter(p => p.processed).length > 0 ? [...new Set(getPredictions().filter(p => p.processed).map(p => p.giornata))].length : 0}</span>
</div>
</div>
</div>
<button onclick="showCloseSeasonModal()" class="btn-red w-full">
🏁 CHIUDI CAMPIONATO
</button>
<div class="mt-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
<div class="text-sm text-yellow-800">
<strong>⚠️ Attenzione:</strong> Chiudendo il campionato, tutti i punteggi verranno azzerati e i pronostici archiviati. Questa operazione è irreversibile.
</div>
</div>
` : `
<div class="p-4 bg-white rounded-lg mb-4">
<div class="font-bold text-gray-800 mb-2">🎯 AVVIA NUOVO CAMPIONATO</div>
<div class="text-sm text-gray-700 mb-3">
Il campionato precedente è stato chiuso. Puoi avviare un nuovo campionato per iniziare una nuova stagione.
</div>
<div class="text-xs text-gray-500">
I punti di tutti gli utenti verranno azzerati e verrà creato un nuovo campionato #${seasonStatus.seasonNumber + 1}
</div>
</div>
<button onclick="showOpenSeasonModal()" class="btn-red w-full">
🚀 APRI NUOVO CAMPIONATO
</button>
`}
</div>
</div>
<div class="mb-8">
<h3 class="text-lg font-bold mb-4 text-gray-700">FUNZIONI UTENTE</h3>
<div class="card p-6" style="background: #f0f9ff">
<p class="mb-4 text-gray-700">Gestisci le funzionalità disponibili per gli utenti</p>
<div class="flex items-center justify-between p-4 bg-white rounded-lg border-2 ${attendanceEnabled ? 'border-green-400' : 'border-gray-300'}">
<div>
<div class="font-bold text-gray-800 mb-1">Indovina Spettatori</div>
<div class="text-sm text-gray-600">Permetti agli utenti di pronosticare gli spettatori (+30 punti)</div>
</div>
<label class="toggle-switch">
<input type="checkbox" id="attendanceToggle" ${attendanceEnabled ? 'checked' : ''} onchange="toggleAttendanceFeature(this.checked)">
<span class="toggle-slider"></span>
</label>
</div>
<div class="mt-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
<div class="text-sm text-yellow-800">
<strong>Nota:</strong> La modifica avrà effetto immediato. Se disabiliti questa funzione, gli utenti non vedranno più la sezione spettatori nella dashboard.
</div>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-lg font-bold mb-4 text-gray-700">SPONSOR</h3>
<div class="card p-6" style="background: #f0f9ff">
<p class="mb-4 text-gray-700">Gestisci il banner sponsor visualizzato nella home degli utenti</p>
<form id="sponsorForm">
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">TESTO SPONSOR</label>
<input type="text" id="sponsorText" class="samb-input" placeholder="es: MATCHGAME SPONSOR" value="${sponsorData.text}" required>
</div>
<div class="mb-4">
<label class="block mb-2 font-semibold text-gray-700">URL IMMAGINE SPONSOR</label>
<input type="url" id="sponsorImageUrl" class="samb-input" placeholder="https://esempio.com/logo.png" value="${sponsorData.imageUrl}">
<div class="text-sm text-gray-500 mt-2">Inserisci l'URL completo dell'immagine del logo sponsor (lascia vuoto per non mostrare immagine)</div>
</div>
${sponsorData.imageUrl ? `
<div class="mb-4 p-4 bg-white rounded-lg border-2 border-gray-200">
<div class="text-sm font-semibold mb-2 text-gray-700">ANTEPRIMA:</div>
<div class="flex items-center gap-4">
<div class="font-bold text-gray-700">${sponsorData.text}</div>
<img decoding="async" src="${sponsorData.imageUrl}" alt="Sponsor Preview" class="h-12 object-contain" onerror="this.style.display='none';">
</div>
</div>
` : ''}
<button type="submit" class="btn-red">
SALVA SPONSOR
</button>
</form>
</div>
</div>
<div class="mb-8">
<h3 class="text-lg font-bold mb-4 text-gray-700">SICUREZZA</h3>
<div class="card p-6" style="background: #fef2f2">
<p class="mb-4 text-gray-700">Cambia la password di accesso al pannello amministratore</p>
<button onclick="showChangePasswordModal()" class="btn-red">
CAMBIA PASSWORD
</button>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-gray-700">INFORMAZIONI</h3>
<div class="card p-6">
<div class="space-y-3 text-gray-700">
<div class="flex justify-between py-2 border-b">
<span class="font-semibold">Utenti Registrati:</span>
<span class="font-bold" style="color: #c8102e">${allUsers.length}</span>
</div>
<div class="flex justify-between py-2 border-b">
<span class="font-semibold">Pronostici Totali:</span>
<span class="font-bold" style="color: #c8102e">${getPredictions().length}</span>
</div>
<div class="flex justify-between py-2">
<span class="font-semibold">Giornate Completate:</span>
<span class="font-bold" style="color: #c8102e">${getPredictions().filter(p => p.processed).length > 0 ? Math.max(...getPredictions().filter(p => p.processed).map(p => parseInt(p.giornata.replace('G', '')))) : 0}</span>
</div>
</div>
</div>
</div>
</div>
`;
}
function toggleAttendanceFeature(enabled) {
setAttendanceEnabled(enabled);
showToast(enabled ? 'Funzione spettatori attivata' : 'Funzione spettatori disattivata');
render();
}
function showCloseSeasonModal() {
const seasonStatus = getSeasonStatus();
const modal = document.createElement('div');
modal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
modal.style.zIndex = '1000';
const sortedUsers = allUsers.sort((a, b) => b.points - a.points).slice(0, 3);
modal.innerHTML = `
<div class="card max-w-2xl w-full p-8">
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">🏁 CHIUDI CAMPIONATO</h2>
<p class="mb-6 text-gray-600">Stai per chiudere il Campionato #${seasonStatus.seasonNumber}</p>
${sortedUsers.length > 0 ? `
<div class="card p-6 mb-6" style="background: #fffbeb">
<h3 class="font-bold mb-4 text-gray-700">🏆 CLASSIFICA FINALE</h3>
<div class="space-y-3">
${sortedUsers.map((user, index) => {
const level = getLevelInfo(user.points);
const medals = ['🥇', '🥈', '🥉'];
return `
<div class="flex items-center justify-between p-4 bg-white rounded-lg">
<div class="flex items-center gap-4">
<div class="text-3xl">${medals[index]}</div>
<div>
<div class="font-bold text-lg text-gray-800">${user.username}</div>
<div class="badge ${level.class} text-xs px-2 py-1 mt-1">${level.name}</div>
</div>
</div>
<div class="text-2xl font-black" style="color: #c8102e">${user.points}</div>
</div>
`;
}).join('')}
</div>
</div>
` : ''}
<div class="p-4 bg-red-50 rounded-lg border-2 border-red-300 mb-6">
<div class="font-bold text-red-800 mb-2">⚠️ ATTENZIONE - OPERAZIONE IRREVERSIBILE</div>
<div class="text-sm text-red-700 space-y-1">
<div>✓ Tutti i punteggi degli utenti saranno azzerati</div>
<div>✓ Tutti i pronostici saranno cancellati</div>
<div>✓ Le partite in corso saranno eliminate</div>
<div>✓ Il campionato sarà chiuso e non potrà essere riaperto</div>
</div>
</div>
<div class="mb-6">
<label class="block mb-2 font-bold text-gray-700">Digita "CHIUDI" per confermare:</label>
<input type="text" id="closeConfirmInput" class="samb-input" placeholder="Scrivi CHIUDI per confermare">
</div>
<div class="flex gap-3">
<button onclick="confirmCloseSeason()" class="btn-red flex-1">
🏁 CONFERMA CHIUSURA
</button>
<button onclick="this.closest('.modal-backdrop').remove()" class="btn-secondary">
ANNULLA
</button>
</div>
</div>
`;
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
document.body.appendChild(modal);
}
async function confirmCloseSeason() {
const input = document.getElementById('closeConfirmInput');
if (!input || input.value !== 'CHIUDI') {
showToast('Devi digitare "CHIUDI" per confermare', 'error');
return;
}
const seasonStatus = getSeasonStatus();
// Azzera i punti di tutti gli utenti
for (const user of allUsers) {
const result = await window.dataSdk.update({
...user,
points: 0,
level: 'Bronzo',
lastActivity: new Date().toISOString()
});
if (!result.isOk) {
showToast('Errore durante l\'azzeramento punti', 'error');
return;
}
}
// Cancella tutti i pronostici
savePredictions([]);
// Cancella tutte le partite
saveMatches([]);
// Resetta lo stato della giornata
saveGiornataStatus({ active: false, giornata: null, startedAt: null });
// Chiudi il campionato
saveSeasonStatus({
active: false,
seasonNumber: seasonStatus.seasonNumber,
startedAt: seasonStatus.startedAt,
closedAt: new Date().toISOString()
});
// Chiudi il modale
document.querySelector('.modal-backdrop').remove();
showToast('🏁 Campionato chiuso con successo');
// Aggiorna la vista
render();
}
function showOpenSeasonModal() {
const seasonStatus = getSeasonStatus();
const modal = document.createElement('div');
modal.className = 'modal-backdrop fixed inset-0 flex items-center justify-center p-4';
modal.style.zIndex = '1000';
modal.innerHTML = `
<div class="card max-w-xl w-full p-8">
<h2 class="text-3xl font-bold mb-2" style="color: #c8102e">🚀 APRI NUOVO CAMPIONATO</h2>
<p class="mb-6 text-gray-600">Stai per iniziare il Campionato #${seasonStatus.seasonNumber + 1}</p>
<div class="p-4 bg-green-50 rounded-lg border-2 border-green-300 mb-6">
<div class="font-bold text-green-800 mb-2">✅ COSA SUCCEDERÀ</div>
<div class="text-sm text-green-700 space-y-1">
<div>✓ Verrà creato il Campionato #${seasonStatus.seasonNumber + 1}</div>
<div>✓ Tutti gli utenti partiranno da 0 punti</div>
<div>✓ Le classifiche saranno azzerate</div>
<div>✓ Gli utenti potranno iniziare a fare nuovi pronostici</div>
</div>
</div>
<div class="p-4 bg-blue-50 rounded-lg border border-blue-200 mb-6">
<div class="text-sm text-blue-800">
<strong>ℹ️ Info:</strong> Tutti gli utenti registrati verranno mantenuti e potranno continuare a giocare nel nuovo campionato.
</div>
</div>
<div class="flex gap-3">
<button onclick="confirmOpenSeason()" class="btn-red flex-1">
🚀 APRI CAMPIONATO
</button>
<button onclick="this.closest('.modal-backdrop').remove()" class="btn-secondary">
ANNULLA
</button>
</div>
</div>
`;
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
document.body.appendChild(modal);
}
function confirmOpenSeason() {
const seasonStatus = getSeasonStatus();
// Apri il nuovo campionato
saveSeasonStatus({
active: true,
seasonNumber: seasonStatus.seasonNumber + 1,
startedAt: new Date().toISOString()
});
// Chiudi il modale
document.querySelector('.modal-backdrop').remove();
showToast(`🚀 Campionato #${seasonStatus.seasonNumber + 1} avviato con successo`);
// Aggiorna la vista
render();
}
function startGiornata() {
const matches = getMatches();
if (matches.length === 0) {
showToast('Nessuna giornata da avviare', 'error');
return;
}
const giornataStatus = {
active: true,
giornata: matches[0].giornata,
startedAt: new Date().toISOString()
};
saveGiornataStatus(giornataStatus);
showToast(`Giornata ${matches[0].giornata} avviata Gli utenti possono inviare i pronostici`);
render();
}
function deleteMatch(matchId) {
const matches = getMatches();
const updated = matches.filter(m => m.id !== matchId);
saveMatches(updated);
if (updated.length === 0) {
saveGiornataStatus({ active: false, giornata: null, startedAt: null });
}
showToast('Partita eliminata');
render();
}
async function calculateResults() {
const matches = getMatches();
const results = {};
for (const match of matches) {
const result = document.getElementById(`result_${match.id}`).value;
if (!result) {
showToast('Inserisci tutti i risultati', 'error');
return;
}
results[match.id] = result;
}
const realScorer = document.getElementById('realScorer').value;
if (!realScorer) {
showToast('Seleziona il marcatore', 'error');
return;
}
const realJersey = document.getElementById('realJersey').value;
if (!realJersey) {
showToast('Seleziona la maglia', 'error');
return;
}
const attendanceEnabled = isAttendanceEnabled();
let realAttendance = null;
if (attendanceEnabled) {
realAttendance = document.getElementById('realAttendance').value;
if (!realAttendance) {
showToast('Seleziona la fascia spettatori', 'error');
return;
}
}
const updatedMatches = matches.map(m => ({
...m,
result: results[m.id]
}));
saveMatches(updatedMatches);
if (attendanceEnabled) {
saveGiornataExtras({
jersey: realJersey,
attendance: parseInt(realAttendance)
});
} else {
saveGiornataExtras({
jersey: realJersey,
attendance: null
});
}
const predictions = getPredictions();
const unprocessed = predictions.filter(p => !p.processed && p.giornata === matches[0].giornata);
for (const pred of unprocessed) {
const userPreds = JSON.parse(pred.predictions);
let correct = 0;
Object.keys(userPreds).forEach(matchId => {
if (userPreds[matchId] === results[matchId]) {
correct++;
}
});
let points = 0;
if (correct === 1) points = 1;
else if (correct === 2) points = 5;
else if (correct === 3) points = 7;
else if (correct === 4) points = 10;
if (pred.scorer === realScorer && realScorer !== 'nessuno') {
points += 50;
}
if (pred.jersey === realJersey) {
points += 20;
}
if (attendanceEnabled && pred.attendance !== null && pred.attendance === parseInt(realAttendance)) {
points += 30;
}
pred.processed = true;
pred.pointsEarned = points;
const user = allUsers.find(u => u.__backendId === pred.userId);
if (user) {
const oldLevel = getLevelInfo(user.points);
const newPoints = user.points + points;
const newLevel = getLevelInfo(newPoints);
const result = await window.dataSdk.update({
...user,
points: newPoints,
level: newLevel.name,
lastActivity: new Date().toISOString()
});
if (!result.isOk) {
showToast('Errore aggiornamento punti', 'error');
} else {
// Controlla se l'utente corrente ha cambiato livello
if (currentUser && user.__backendId === currentUser.__backendId && oldLevel.name !== newLevel.name) {
// Mostra animazione dopo un breve ritardo
setTimeout(() => {
showLevelUpAnimation(newLevel);
}, 1000);
}
}
}
}
savePredictions(predictions);
saveMatches([]);
saveGiornataStatus({ active: false, giornata: null, startedAt: null });
showToast(`Giornata chiusa ${unprocessed.length} pronostici elaborati`);
adminTab = 'matches';
render();
}
function setupAdminForms() {
const addMatchesForm = document.getElementById('addMatchesForm');
if (addMatchesForm) {
addMatchesForm.addEventListener('submit', (e) => {
e.preventDefault();
const giornata = document.getElementById('giornataN').value;
const matches = [];
for (let i = 1; i <= 4; i++) {
matches.push({
id: Date.now().toString() + i,
home: document.getElementById(`home${i}`).value,
away: document.getElementById(`away${i}`).value,
giornata: giornata,
result: null
});
}
saveMatches(matches);
showToast(`${giornata} creata con 4 partite`);
render();
});
}
const setResultsForm = document.getElementById('setResultsForm');
if (setResultsForm) {
setResultsForm.addEventListener('submit', async (e) => {
e.preventDefault();
await calculateResults();
});
}
const sponsorForm = document.getElementById('sponsorForm');
if (sponsorForm) {
sponsorForm.addEventListener('submit', (e) => {
e.preventDefault();
const text = document.getElementById('sponsorText').value;
const imageUrl = document.getElementById('sponsorImageUrl').value;
setSponsorData(text, imageUrl);
showToast('Sponsor aggiornato con successo');
render();
});
}
const textsForm = document.getElementById('textsForm');
if (textsForm) {
textsForm.addEventListener('submit', (e) => {
e.preventDefault();
const newTexts = {
welcome_title: document.getElementById('welcome_title').value,
welcome_desc_1: document.getElementById('welcome_desc_1').value,
welcome_subdesc_1: document.getElementById('welcome_subdesc_1').value,
welcome_desc_2: document.getElementById('welcome_desc_2').value,
welcome_subdesc_2: document.getElementById('welcome_subdesc_2').value,
welcome_desc_3: document.getElementById('welcome_desc_3').value,
welcome_subdesc_3: document.getElementById('welcome_subdesc_3').value,
premi_title: document.getElementById('premi_title').value,
premi_subtitle: document.getElementById('premi_subtitle').value,
primo_premio_title: document.getElementById('primo_premio_title').value,
primo_premio_value: document.getElementById('primo_premio_value').value,
primo_premio_desc: document.getElementById('primo_premio_desc').value,
secondo_premio_title: document.getElementById('secondo_premio_title').value,
secondo_premio_value: document.getElementById('secondo_premio_value').value,
secondo_premio_desc: document.getElementById('secondo_premio_desc').value,
terzo_premio_title: document.getElementById('terzo_premio_title').value,
terzo_premio_value: document.getElementById('terzo_premio_value').value,
terzo_premio_desc: document.getElementById('terzo_premio_desc').value,
valore_totale_title: document.getElementById('valore_totale_title').value,
valore_totale_value: document.getElementById('valore_totale_value').value,
valore_totale_desc: document.getElementById('valore_totale_desc').value,
footer_text: document.getElementById('footer_text').value
};
saveCustomTexts(newTexts);
showToast('Testi aggiornati con successo');
render();
});
}
}
function render() {
const app = document.getElementById('app');
if (!app) return;
let content = '';
if (currentUser) {
content = renderNavigation();
if (currentPage === 'home') {
content += renderDashboard();
} else if (currentPage === 'leaderboard') {
content += renderLeaderboard();
} else if (currentPage === 'levels') {
content += renderLevelsPage();
} else if (currentPage === 'premi') {
content += renderPremiPage();
} else if (currentPage === 'admin') {
content += renderAdmin();
}
} else {
const texts = getCustomTexts();
content = `
<div class="w-full h-full flex items-center justify-center p-6" style="background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);">
<div class="card max-w-3xl w-full p-12 text-center">
<img decoding="async" src="https://www.ussambenedettese.it/wp-content/uploads/2025/12/logo-samb-1-scaled.png"
alt="U.S. Sambenedettese"
class="h-32 object-contain mx-auto mb-6"
onerror="this.style.display='none'; this.alt='Logo non disponibile';">
<p class="text-xl mb-8 text-gray-600 font-semibold">
${texts.welcome_title}
</p>
<div class="grid md:grid-cols-3 gap-6 mb-10">
<div class="card p-6">
<div class="text-4xl mb-3">🎯</div>
<div class="font-bold text-gray-800">${texts.welcome_desc_1}</div>
<div class="text-sm text-gray-600 mt-2">${texts.welcome_subdesc_1}</div>
</div>
<div class="card p-6">
<div class="text-4xl mb-3">⚽</div>
<div class="font-bold text-gray-800">${texts.welcome_desc_2}</div>
<div class="text-sm text-gray-600 mt-2">${texts.welcome_subdesc_2}</div>
</div>
<div class="card p-6">
<div class="text-4xl mb-3">🏆</div>
<div class="font-bold text-gray-800">${texts.welcome_desc_3}</div>
<div class="text-sm text-gray-600 mt-2">${texts.welcome_subdesc_3}</div>
</div>
</div>
<div class="flex gap-4 justify-center">
<button onclick="showRegistrationModal()" class="btn-red text-2xl px-12 py-5">
REGISTRATI
</button>
<button onclick="showLoginModal()" class="btn-white text-2xl px-12 py-5">
ACCEDI
</button>
</div>
</div>
</div>
`;
}
app.innerHTML = content;
if (currentUser && currentPage === 'home') {
setTimeout(() => {
renderPredictions();
renderScorers();
renderJerseys();
if (isAttendanceEnabled()) {
renderAttendance();
}
}, 0);
}
setupAdminForms();
}
window.togglePrediction = togglePrediction;
window.selectScorer = selectScorer;
window.selectJersey = selectJersey;
window.selectAttendance = selectAttendance;
window.submitPredictions = submitPredictions;
window.navigateTo = navigateTo;
window.showAdminLogin = showAdminLogin;
window.showRegistrationModal = showRegistrationModal;
window.showLoginModal = showLoginModal;
window.showRecoverPasswordModal = showRecoverPasswordModal;
window.deleteMatch = deleteMatch;
window.setAdminTab = setAdminTab;
window.showChangePasswordModal = showChangePasswordModal;
window.startGiornata = startGiornata;
window.toggleAttendanceFeature = toggleAttendanceFeature;
window.showCloseSeasonModal = showCloseSeasonModal;
window.confirmCloseSeason = confirmCloseSeason;
window.showOpenSeasonModal = showOpenSeasonModal;
window.confirmOpenSeason = confirmOpenSeason;
initApp();
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9a8bc4fd52e05237',t:'MTc2NDg1NjE5MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
Italian