508 lines
No EOL
32 KiB
HTML
508 lines
No EOL
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it" class="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ADM WiFi Login</title>
|
|
<link rel="shortcut icon" href="/favicon/favicon.png">
|
|
<script>
|
|
// Applica tema prima del caricamento per evitare flash
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
</script>
|
|
<script src="/css/tailwind.min.js"></script>
|
|
<script>
|
|
// Configurazione Tailwind per dark mode
|
|
tailwind.config = {
|
|
darkMode: 'class'
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Transizioni smooth per il dark mode */
|
|
* {
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 min-h-screen">
|
|
<!-- Header con bottoni theme e admin -->
|
|
<header class="w-full py-4">
|
|
<div class="container mx-auto px-4 flex justify-between items-center">
|
|
<!-- Bottone Dark/Light Mode -->
|
|
<button
|
|
id="themeToggle"
|
|
class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-semibold py-2 px-4 rounded-lg shadow-md transition-colors duration-200 flex items-center space-x-2"
|
|
aria-label="Toggle dark mode"
|
|
>
|
|
<svg id="sunIcon" class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
</svg>
|
|
<svg id="moonIcon" class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
|
|
</svg>
|
|
<span class="hidden sm:inline">Tema</span>
|
|
</button>
|
|
|
|
<!-- Bottone Admin -->
|
|
<a
|
|
href="/admin"
|
|
class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition-colors duration-200 flex items-center space-x-2"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
<span class="hidden sm:inline">Admin</span>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container mx-auto px-4 py-4 sm:py-8">
|
|
<div class="flex flex-col lg:flex-row gap-4 lg:gap-8 items-stretch justify-center max-w-7xl mx-auto">
|
|
<!-- Sezione Info -->
|
|
<div id="info-section" class="w-full lg:w-auto lg:flex-1 lg:max-w-md">
|
|
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 sm:p-6 space-y-4 sm:space-y-6 h-full">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-blue-500 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 110 20 10 10 0 010-20z" />
|
|
</svg>
|
|
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100">Benvenuto al WiFi ADM</h2>
|
|
</div>
|
|
|
|
<!-- Guida passo-passo -->
|
|
<div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-4 sm:p-5 space-y-3">
|
|
<h3 class="text-base sm:text-lg font-semibold text-blue-900 dark:text-blue-300 flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
|
|
</svg>
|
|
Come accedere:
|
|
</h3>
|
|
|
|
<div class="space-y-2 sm:space-y-3">
|
|
<!-- Passo 1 -->
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-blue-600 dark:bg-blue-500 text-white text-sm font-bold">1</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base"><span class="font-semibold">Hai già un account?</span></p>
|
|
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Inserisci username/email e password nel form</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passo 2 -->
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-green-600 dark:bg-green-500 text-white text-sm font-bold">2</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base"><span class="font-semibold">Primo accesso?</span></p>
|
|
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Clicca su "Registrati qui" e usa le tue credenziali UniBo</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passo 3 -->
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-yellow-600 dark:bg-yellow-500 text-white text-sm font-bold">3</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base"><span class="font-semibold">Attendi approvazione</span></p>
|
|
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Uno staff ADM autorizzerà il tuo account</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passo 4 -->
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
<div class="flex items-center justify-center w-6 h-6 rounded-full bg-purple-600 dark:bg-purple-500 text-white text-sm font-bold">4</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base"><span class="font-semibold">Accedi e naviga!</span></p>
|
|
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Una volta approvato, effettua il login per usare il WiFi</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info privacy e sicurezza -->
|
|
<div class="space-y-3 sm:space-y-4">
|
|
<div class="flex items-start space-x-3">
|
|
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-500 dark:text-green-400 mt-1 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
<div>
|
|
<p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Privacy garantita</p>
|
|
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
|
|
I tuoi dati non vengono tracciati. Registriamo solo l'accesso per prevenire abusi della rete UniBo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
href="https://students.cs.unibo.it/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="flex items-center space-x-2 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors group text-sm sm:text-base"
|
|
>
|
|
<svg class="w-4 h-4 sm:w-5 sm:h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
<span class="font-medium group-hover:underline">Visita il sito ADM Staff</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-200 dark:border-gray-600">
|
|
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 italic">
|
|
Questo servizio è parte dell'infrastruttura ADM. La tua collaborazione nel mantenere la sicurezza della rete è fondamentale.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form di Login -->
|
|
<div class="w-full lg:w-auto lg:flex-1 lg:max-w-md">
|
|
<form id="loginForm" class="bg-white dark:bg-gray-800 shadow-xl rounded-lg px-4 sm:px-8 pt-4 sm:pt-6 pb-6 sm:pb-8 mb-4 h-full">
|
|
<div class="text-center mb-6 sm:mb-8">
|
|
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100">Accedi al WiFi ADM</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mt-2 text-sm sm:text-base">Accedi o registrati</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 dark:text-gray-300 text-xs sm:text-sm font-bold mb-2" for="username">
|
|
Username o Email (registrata in ADM)
|
|
</label>
|
|
<input
|
|
class="shadow appearance-none border dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500 dark:focus:border-blue-400 text-sm sm:text-base"
|
|
id="username"
|
|
type="text"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 dark:text-gray-300 text-xs sm:text-sm font-bold mb-2" for="password">
|
|
Password
|
|
</label>
|
|
<input
|
|
class="shadow appearance-none border dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500 dark:focus:border-blue-400 text-sm sm:text-base"
|
|
id="password"
|
|
type="password"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div class="mb-6" id="macAddressField">
|
|
<label class="block text-gray-700 dark:text-gray-300 text-xs sm:text-sm font-bold mb-2" for="mac">
|
|
MAC Address
|
|
</label>
|
|
<input
|
|
class="shadow appearance-none border dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500 dark:focus:border-blue-400 text-sm sm:text-base"
|
|
id="mac"
|
|
type="text"
|
|
>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<button
|
|
id="submitBtn"
|
|
class="w-full bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 text-sm sm:text-base disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
|
|
type="submit"
|
|
>
|
|
<svg id="loadingSpinner" class="hidden animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span id="btnText">Accedi</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm">
|
|
Non hai un account?
|
|
<a href="register.html" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold">
|
|
Registrati qui
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="loginError" class="mt-4 text-red-500 dark:text-red-400 text-xs sm:text-sm text-center"></div>
|
|
</form>
|
|
<div id="errorAlert" class="hidden fixed top-20 right-4 z-50 max-w-md w-full sm:w-96 px-4 transition-all duration-300">
|
|
<div class="bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-700 rounded-lg p-3 sm:p-4 shadow-lg">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-4 w-4 sm:h-5 sm:w-5 text-red-400 dark:text-red-500" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-xs sm:text-sm leading-5 font-medium text-red-800 dark:text-red-400">
|
|
Errore di connessione
|
|
</h3>
|
|
<div class="mt-1 text-xs sm:text-sm leading-5 text-red-700 dark:text-red-300" id="errorAlertMessage">
|
|
Si è verificato un errore durante la connessione al server.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Servizi Disponibili -->
|
|
<div class="w-full lg:w-auto lg:flex-1 lg:max-w-md">
|
|
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 sm:p-6 h-full">
|
|
<div class="text-center mb-6">
|
|
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 flex items-center justify-center">
|
|
<svg class="w-6 h-6 sm:w-8 sm:h-8 mr-3 text-blue-600 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
Servizi
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2">
|
|
Accedi con le tue credenziali
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Sasso -->
|
|
<a href="https://sasso.students.cs.unibo.it" target="_blank" rel="noopener noreferrer" class="group block mb-4">
|
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-700 dark:to-gray-800 hover:from-blue-100 hover:to-blue-200 dark:hover:from-gray-600 dark:hover:to-gray-700 rounded-lg p-4 transition-all duration-300 transform group-hover:scale-105">
|
|
<div class="flex items-start space-x-3">
|
|
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-2 flex items-center justify-center flex-shrink-0" style="width: 40px; height: 40px;">
|
|
<img src="https://sasso.students.cs.unibo.it/sasso-icon.png" alt="Sasso" class="w-full h-full object-contain">
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<h3 class="text-base sm:text-lg font-bold text-gray-800 dark:text-gray-100">Sasso</h3>
|
|
<span class="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 text-xs font-semibold px-2 py-0.5 rounded">New!</span>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm">
|
|
Server VPS per sviluppo. Ambiente Linux con SSH/VPN.
|
|
</p>
|
|
<div class="flex items-center text-blue-600 dark:text-blue-400 font-semibold text-xs sm:text-sm mt-2 group-hover:underline">
|
|
Accedi →
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Placeholder per servizi futuri
|
|
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 text-center">
|
|
<svg class="w-8 h-8 text-gray-400 dark:text-gray-600 mx-auto mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
<p class="text-gray-600 dark:text-gray-400 font-semibold text-xs sm:text-sm">
|
|
Altri servizi in arrivo
|
|
</p>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sezione rimossa - ora nella sidebar -->
|
|
<div class="container mx-auto px-4 py-8 sm:py-12 hidden">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="text-center mb-8 sm:mb-12">
|
|
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">
|
|
<svg class="w-8 h-8 sm:w-10 sm:h-10 inline-block mr-3 text-blue-600 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
Servizi Disponibili
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">
|
|
Accedi con le stesse credenziali a questi servizi della comunità ADM
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-4 sm:gap-6 justify-center max-w-6xl mx-auto">
|
|
<!-- Sasso -->
|
|
<a href="https://sasso.students.cs.unibo.it" target="_blank" rel="noopener noreferrer" class="group w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)] max-w-sm">
|
|
<div class="bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl rounded-lg p-6 sm:p-8 h-full transition-all duration-300 transform group-hover:scale-105">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-2 flex items-center justify-center" style="width: 48px; height: 48px;">
|
|
<img src="https://sasso.students.cs.unibo.it/sasso-icon.png" alt="Sasso" class="w-full h-full object-contain">
|
|
</div>
|
|
<h3 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100">Sasso</h3>
|
|
<span class="ml-auto bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 text-xs font-semibold px-2 py-1 rounded">New !</span>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4">
|
|
Server VPS per lo sviluppo e hosting dei tuoi progetti. Ambiente Linux completo con accesso SSH/VPN e risorse dedicate.
|
|
</p>
|
|
<div class="flex items-center text-blue-600 dark:text-blue-400 font-semibold group-hover:underline">
|
|
Accedi a Sasso
|
|
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Slot generico per future espansioni -->
|
|
<!--
|
|
<div class="bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900 shadow-lg rounded-lg p-6 sm:p-8 h-full border-2 border-dashed border-gray-300 dark:border-gray-700 flex flex-col items-center justify-center text-center">
|
|
<svg class="w-12 h-12 text-gray-400 dark:text-gray-600 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m0-6h6" />
|
|
</svg>
|
|
<p class="text-gray-600 dark:text-gray-400 font-semibold text-sm sm:text-base">
|
|
Nuovi servizi in arrivo
|
|
</p>
|
|
<p class="text-gray-500 dark:text-gray-500 text-xs sm:text-sm mt-1">
|
|
Resta aggiornato per scoprire nuove funzionalità
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900 shadow-lg rounded-lg p-6 sm:p-8 h-full border-2 border-dashed border-gray-300 dark:border-gray-700 flex flex-col items-center justify-center text-center">
|
|
<svg class="w-12 h-12 text-gray-400 dark:text-gray-600 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m0-6h6" />
|
|
</svg>
|
|
<p class="text-gray-600 dark:text-gray-400 font-semibold text-sm sm:text-base">
|
|
Nuovi servizi in arrivo
|
|
</p>
|
|
<p class="text-gray-500 dark:text-gray-500 text-xs sm:text-sm mt-1">
|
|
Resta aggiornato per scoprire nuove funzionalità
|
|
</p>
|
|
</div>
|
|
|
|
-->
|
|
</div>
|
|
|
|
<!-- Info aggiuntiva -->
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Dark mode toggle - deve eseguirsi dopo che il DOM è caricato
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
const htmlElement = document.documentElement;
|
|
|
|
// Event listener per il toggle
|
|
themeToggle.addEventListener('click', () => {
|
|
htmlElement.classList.toggle('dark');
|
|
const newTheme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
|
|
localStorage.setItem('theme', newTheme);
|
|
console.log('Tema cambiato a:', newTheme);
|
|
});
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
const macData = await getClientIP();
|
|
document.getElementById('mac').value = macData;
|
|
|
|
// Nascondi campo MAC in sviluppo
|
|
if (macData === "00:00:00:00:00:00") {
|
|
const macField = document.getElementById('macAddressField');
|
|
macField.style.display = 'none';
|
|
console.log('Development mode: MAC address field hidden');
|
|
}
|
|
});
|
|
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const loadingSpinner = document.getElementById('loadingSpinner');
|
|
const btnText = document.getElementById('btnText');
|
|
|
|
// Previeni doppio click - se già in caricamento, esci
|
|
if (submitBtn.disabled) {
|
|
return;
|
|
}
|
|
|
|
// Disabilita il pulsante e mostra lo spinner
|
|
submitBtn.disabled = true;
|
|
loadingSpinner.classList.remove('hidden');
|
|
btnText.textContent = 'Accesso in corso...';
|
|
|
|
// Nascondi eventuali errori precedenti
|
|
document.getElementById('errorAlert').classList.add('hidden');
|
|
document.getElementById('loginError').textContent = '';
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const mac = document.getElementById('mac').value;
|
|
|
|
try {
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ username, password, mac })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success=="success") {
|
|
document.getElementById('loginError').textContent = 'Accesso riuscito! Reindirizzamento...';
|
|
document.getElementById('loginError').classList.remove('text-red-500');
|
|
document.getElementById('loginError').classList.add('text-green-500');
|
|
btnText.textContent = 'Accesso riuscito!';
|
|
setTimeout(() => {
|
|
window.location.href = 'https://start.duckduckgo.com/'; // Sostituisci con l'URL della destinazione
|
|
}, 2000);
|
|
} else {
|
|
// Riabilita il pulsante in caso di errore
|
|
submitBtn.disabled = false;
|
|
loadingSpinner.classList.add('hidden');
|
|
btnText.textContent = 'Accedi';
|
|
|
|
document.getElementById('loginError').textContent = 'Errore durante il login';
|
|
document.getElementById('loginError').classList.add('text-red-500');
|
|
document.getElementById('loginError').classList.remove('text-green-500');
|
|
document.getElementById('errorAlert').classList.remove('hidden');
|
|
document.getElementById('errorAlertMessage').textContent = "Errore durante l'accesso: "+ data.message;
|
|
setTimeout(() => {
|
|
document.getElementById('errorAlert').classList.add('hidden');
|
|
document.getElementById('loginError').textContent = '';
|
|
}, 5000);
|
|
}
|
|
} catch (error) {
|
|
// Riabilita il pulsante in caso di errore
|
|
submitBtn.disabled = false;
|
|
loadingSpinner.classList.add('hidden');
|
|
btnText.textContent = 'Accedi';
|
|
|
|
console.error('Errore:', error);
|
|
document.getElementById('loginError').textContent = 'Errore di connessione al server';
|
|
document.getElementById('loginError').classList.add('text-red-500');
|
|
document.getElementById('loginError').classList.remove('text-green-500');
|
|
setTimeout(() => {
|
|
document.getElementById('loginError').textContent = '';
|
|
}, 5000);
|
|
}
|
|
});
|
|
|
|
// Aggiungi questa funzione per ottenere l'IP del client dal server
|
|
async function getClientIP() {
|
|
try {
|
|
const response = await fetch('/api/client-ip');
|
|
const data = await response.json();
|
|
|
|
if (data.status === "error") {
|
|
document.getElementById('errorAlert').classList.remove('hidden');
|
|
document.getElementById('errorAlertMessage').textContent = 'Impossibile recuperare il MAC address. '+ data.message;
|
|
setTimeout(() => {
|
|
document.getElementById('errorAlert').classList.add('hidden');
|
|
}, 5000);
|
|
return "FF:FF:FF:FF:FF:FF";
|
|
}
|
|
|
|
// In development mode, nascondi il messaggio di errore se presente
|
|
if (data.mac === "00:00:00:00:00:00") {
|
|
console.log('Development mode detected');
|
|
}
|
|
|
|
return data.mac;
|
|
} catch (error) {
|
|
console.error('Errore nel recupero del MAC:', error);
|
|
return "FF:FF:FF:FF:FF:FF";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |