7.55 kB


	<!DOCTYPE html>
	<html>
	<head>
	<title>Visualiseur de Maillages FEniCS</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f5f5f5;
	}
	h1 {
	color: #333;
	text-align: center;
	}
	.image-container {
	background: white;
	padding: 20px;
	margin: 20px 0;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 10px auto;
	}
	h2 {
	color: #555;
	margin-top: 0;
	}
	.info {
	background: #e3f2fd;
	padding: 15px;
	border-radius: 5px;
	margin: 20px 0;
	}
	</style>
	<!-- Login Modal Styles -->
	<style>
	#loginModal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 1000;
	justify-content: center;
	align-items: center;
	}
	#loginModal > div {
	background: rgba(255, 255, 255, 0.95);
	padding: 40px;
	border-radius: 20px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	text-align: center;
	max-width: 400px;
	width: 90%;
	}
	</style>
	</head>
	<body>
	<h1>🔬 Visualiseur de Maillages FEniCS</h1>

	<div class="info">
	<strong>Serveur local démarré avec succès!</strong><br>
	Les images se rafraîchissent automatiquement. Relancez le script pour mettre à jour.
	</div>

	<div class="image-container">
	<h2>📊 Vue complète du maillage</h2>
	<img src="viewer_mesh_full.png" alt="Maillage complet">
	</div>

	<div class="image-container">
	<h2>🔍 Vue zoomée</h2>
	<img src="viewer_mesh_zoom.png" alt="Maillage zoomé">
	</div>

	<div class="info">
	<p><strong>Instructions:</strong></p>
	<ul>
	<li>Utilisez Ctrl+C dans le terminal pour arrêter le serveur</li>
	<li>Relancez le script pour générer de nouvelles images</li>
	<li>Rafraîchissez cette page (F5) pour voir les mises à jour</li>
	</ul>
	</div>

	<!-- Login Modal -->
	<div id="loginModal">
	<div>
	<h2 style="color: #333; margin-bottom: 10px;">🔐 Accès Administrateur</h2>
	<p style="color: #666; margin-bottom: 30px;">Entrez le code secret pour accéder aux fonctionnalités administrateur</p>

	<form id="modalLoginForm">
	<input type="password" id="modalAdminCode" placeholder="Code secret" required style="width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 10px; font-size: 1.1em; box-sizing: border-box; margin-bottom: 20px;">
	<button type="submit" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 1.1em; cursor: pointer; width: 100%;">Se connecter</button>
	</form>

	<div id="modalMessage" style="margin-top: 15px;"></div>
	<button onclick="closeLoginModal()" style="background: none; border: none; color: #666; cursor: pointer; margin-top: 15px; text-decoration: underline;">Annuler</button>
	</div>
	</div>

	<script>
	// Fonction pour vérifier l'authentification admin
	function checkAdminAuth() {
	const isLoggedIn = localStorage.getItem('adminLoggedIn') === 'true';
	const loginTime = localStorage.getItem('adminLoginTime');
	const now = Date.now();
	const oneHour = 60 * 60 * 1000; // 1 heure en millisecondes

	// Vérifier si la session a expiré (1 heure)
	if (isLoggedIn && loginTime && (now - parseInt(loginTime)) < oneHour) {
	return true;
	} else {
	// Nettoyer les données expirées
	localStorage.removeItem('adminLoggedIn');
	localStorage.removeItem('adminLoginTime');
	return false;
	}
	}

	// Fonction pour afficher le modal de connexion
	function showLoginModal() {
	document.getElementById('loginModal').style.display = 'flex';
	document.getElementById('modalAdminCode').focus();
	}

	// Fonction pour fermer le modal
	function closeLoginModal() {
	document.getElementById('loginModal').style.display = 'none';
	document.getElementById('modalMessage').innerHTML = '';
	document.getElementById('modalAdminCode').value = '';
	}

	// Gestionnaire pour le formulaire du modal
	document.getElementById('modalLoginForm').addEventListener('submit', function(e) {
	e.preventDefault();

	const code = document.getElementById('modalAdminCode').value;
	const messageDiv = document.getElementById('modalMessage');

	if (code === '180201') {
	localStorage.setItem('adminLoggedIn', 'true');
	localStorage.setItem('adminLoginTime', Date.now());
	messageDiv.innerHTML = '<div style="color: #2ed573;">✓ Connexion réussie !</div>';
	setTimeout(() => {
	closeLoginModal();
	// Recharger la page pour mettre à jour l'état admin
	location.reload();
	}, 1000);
	} else {
	messageDiv.innerHTML = '<div style="color: #ff4757;">✗ Code incorrect. Veuillez réessayer.</div>';
	document.getElementById('modalAdminCode').value = '';
	document.getElementById('modalAdminCode').focus();
	}
	});

	// Fermer le modal en cliquant en dehors
	document.getElementById('loginModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeLoginModal();
	}
	});

	// Vérifier au chargement de la page
	window.addEventListener('load', function() {
	if (!checkAdminAuth()) {
	// Si pas connecté, afficher le modal après un court délai
	setTimeout(() => {
	showLoginModal();
	}, 500);
	}
	});

	// Ajouter un bouton admin dans le header si connecté
	if (checkAdminAuth()) {
	const h1 = document.querySelector('h1');
	if (h1) {
	const adminBtn = document.createElement('div');
	adminBtn.style.textAlign = 'right';
	adminBtn.style.marginBottom = '10px';
	adminBtn.innerHTML = '<a href="#" onclick="logoutAdmin()" style="color: #555; text-decoration: none; font-weight: bold; background: #e3f2fd; padding: 5px 10px; border-radius: 5px;">🚪 Déconnexion Admin</a>';
	h1.parentNode.insertBefore(adminBtn, h1);
	}
	}

	// Fonction de déconnexion
	function logoutAdmin() {
	localStorage.removeItem('adminLoggedIn');
	localStorage.removeItem('adminLoginTime');
	location.reload();
	}
	</script>
	</body>
	</html>

Xet Storage Details

Size:: 7.55 kB
Xet hash:: 5f5f6f066984fda88c924efc2b4416045049a76d10aaeb43e3aeb77e2368f9bf

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.