Spaces:

docto41
/

gaming

Running

App Files Files Community

gaming / index.html

docto41

Add 3 files

040399c verified 10 months ago

raw

history blame contribute delete

32 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GameSite Generator - Créez votre site de jeux automatiquement</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
	}
	.floating {
	animation: float 3s ease-in-out infinite;
	}
	.game-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.gradient-bg {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.preview-container {
	background-image: radial-gradient(circle at 50% 50%, #4b5563 0%, #1f2937 100%);
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<!-- Navigation -->
	<nav class="gradient-bg text-white shadow-lg">
	<div class="container mx-auto px-4 py-4">
	<div class="flex items-center justify-between">
	<div class="flex items-center space-x-3">
	<i class="fas fa-gamepad text-2xl"></i>
	<span class="text-xl font-bold">GameSite Generator</span>
	</div>
	<div class="hidden md:flex space-x-6">
	<a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a>
	<a href="#generator" class="hover:text-gray-200 transition">Générateur</a>
	<a href="#templates" class="hover:text-gray-200 transition">Modèles</a>
	</div>
	<button class="md:hidden text-xl">
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="gradient-bg text-white py-16">
	<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 mb-10 md:mb-0">
	<h1 class="text-4xl md:text-5xl font-bold mb-4">Créez votre site de jeux en quelques clics</h1>
	<p class="text-xl mb-8">Notre générateur automatique vous permet de créer un site de jeux professionnel sans aucune connaissance en programmation.</p>
	<div class="flex space-x-4">
	<a href="#generator" class="bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Essayer maintenant</a>
	<a href="#features" class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition">En savoir plus</a>
	</div>
	</div>
	<div class="md:w-1/2 flex justify-center">
	<div class="relative floating">
	<div class="w-64 h-64 bg-white rounded-xl shadow-2xl transform rotate-6"></div>
	<div class="absolute top-0 left-0 w-64 h-64 bg-purple-200 rounded-xl shadow-2xl transform -rotate-6 opacity-70"></div>
	</div>
	</div>
	</div>
	</section>

	<!-- Features Section -->
	<section id="features" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-12">Fonctionnalités puissantes</h2>
	<div class="grid md:grid-cols-3 gap-8">
	<div class="bg-gray-50 p-6 rounded-xl">
	<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-magic text-purple-600 text-xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Génération automatique</h3>
	<p class="text-gray-600">Notre algorithme crée un site complet basé sur vos préférences en quelques secondes.</p>
	</div>
	<div class="bg-gray-50 p-6 rounded-xl">
	<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-palette text-blue-600 text-xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Design personnalisable</h3>
	<p class="text-gray-600">Choisissez parmi des dizaines de thèmes et couleurs pour un look unique.</p>
	</div>
	<div class="bg-gray-50 p-6 rounded-xl">
	<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-gamepad text-green-600 text-xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Intégration de jeux</h3>
	<p class="text-gray-600">Ajoutez facilement des jeux HTML5 populaires à votre site sans codage.</p>
	</div>
	<div class="bg-gray-50 p-6 rounded-xl">
	<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-mobile-alt text-yellow-600 text-xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Optimisé mobile</h3>
	<p class="text-gray-600">Votre site sera parfaitement adapté à tous les appareils mobiles.</p>
	</div>
	<div class="bg-gray-50 p-6 rounded-xl">
	<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-chart-line text-red-600 text-xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Analytiques intégrés</h3>
	<p class="text-gray-600">Suivez les performances de votre site avec des outils d'analyse intégrés.</p>
	</div>
	<div class="bg-gray-50 p-6 rounded-xl">
	<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-cloud-upload-alt text-indigo-600 text-xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Hébergement inclus</h3>
	<p class="text-gray-600">Publiez votre site instantanément avec notre hébergement cloud gratuit.</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Generator Section -->
	<section id="generator" class="py-16 bg-gray-50">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-12">Créez votre site de jeux</h2>
	<div class="flex flex-col lg:flex-row gap-8">
	<!-- Form -->
	<div class="lg:w-1/2 bg-white p-8 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold mb-6">Personnalisez votre site</h3>

	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Nom du site</label>
	<input type="text" id="site-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition" placeholder="Mon Super Site de Jeux">
	</div>

	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Catégorie principale</label>
	<select id="site-category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
	<option value="arcade">Jeux d'arcade</option>
	<option value="puzzle">Jeux de puzzle</option>
	<option value="adventure">Jeux d'aventure</option>
	<option value="multiplayer">Jeux multijoueurs</option>
	<option value="retro">Jeux rétro</option>
	</select>
	</div>

	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Thème de couleur</label>
	<div class="flex space-x-3">
	<div class="color-option w-8 h-8 rounded-full bg-purple-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="purple"></div>
	<div class="color-option w-8 h-8 rounded-full bg-blue-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="blue"></div>
	<div class="color-option w-8 h-8 rounded-full bg-green-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="green"></div>
	<div class="color-option w-8 h-8 rounded-full bg-red-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="red"></div>
	<div class="color-option w-8 h-8 rounded-full bg-yellow-500 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="yellow"></div>
	</div>
	</div>

	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Style de navigation</label>
	<div class="flex space-x-4">
	<div class="nav-style-option p-2 border rounded-lg cursor-pointer hover:bg-gray-50" data-style="simple">
	<div class="w-24 h-2 bg-gray-300 mb-1"></div>
	<div class="w-16 h-2 bg-gray-300"></div>
	<p class="text-xs mt-2 text-center">Simple</p>
	</div>
	<div class="nav-style-option p-2 border rounded-lg cursor-pointer hover:bg-gray-50" data-style="modern">
	<div class="w-full h-2 bg-gray-300 mb-1"></div>
	<div class="w-full h-8 bg-gray-200 rounded"></div>
	<p class="text-xs mt-2 text-center">Moderne</p>
	</div>
	<div class="nav-style-option p-2 border rounded-lg cursor-pointer hover:bg-gray-50" data-style="gaming">
	<div class="w-full h-8 bg-gray-800 rounded-t-lg"></div>
	<div class="w-full h-2 bg-gray-700 rounded-b-lg"></div>
	<p class="text-xs mt-2 text-center">Gaming</p>
	</div>
	</div>
	</div>

	<div class="mb-6">
	<label class="flex items-center">
	<input type="checkbox" id="dark-mode" class="rounded text-purple-600 focus:ring-purple-500">
	<span class="ml-2 text-gray-700">Activer le mode sombre</span>
	</label>
	</div>

	<button id="generate-btn" class="w-full py-3 bg-purple-600 text-white rounded-lg font-semibold hover:bg-purple-700 transition focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
	<i class="fas fa-magic mr-2"></i> Générer mon site
	</button>
	</div>

	<!-- Preview -->
	<div class="lg:w-1/2">
	<div class="preview-container p-6 rounded-xl shadow-md h-full flex flex-col">
	<h3 class="text-xl font-semibold mb-4 text-white">Aperçu en direct</h3>
	<div id="site-preview" class="flex-1 bg-white rounded-lg overflow-hidden">
	<div class="h-8 bg-gray-200 flex items-center px-4">
	<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
	<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
	<div class="w-3 h-3 rounded-full bg-green-500"></div>
	</div>
	<div class="p-4">
	<div class="text-center py-10 text-gray-400">
	<i class="fas fa-laptop-code text-4xl mb-3"></i>
	<p>Votre aperçu apparaîtra ici</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Templates Section -->
	<section id="templates" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Modèles populaires</h2>
	<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Choisissez parmi nos modèles pré-conçus ou créez le vôtre à partir de zéro</p>

	<div class="grid md:grid-cols-3 gap-8">
	<div class="template-card bg-gray-50 rounded-xl overflow-hidden cursor-pointer transition hover:shadow-lg">
	<div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
	<i class="fas fa-gamepad text-white text-5xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-semibold mb-2">Arcade Pro</h3>
	<p class="text-gray-600 mb-4">Parfait pour les jeux d'arcade classiques avec des couleurs vives.</p>
	<button class="template-select-btn w-full py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition" data-template="arcade">
	Sélectionner
	</button>
	</div>
	</div>

	<div class="template-card bg-gray-50 rounded-xl overflow-hidden cursor-pointer transition hover:shadow-lg">
	<div class="h-48 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center">
	<i class="fas fa-puzzle-piece text-white text-5xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-semibold mb-2">Puzzle Master</h3>
	<p class="text-gray-600 mb-4">Design épuré pour les jeux de réflexion et casse-têtes.</p>
	<button class="template-select-btn w-full py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition" data-template="puzzle">
	Sélectionner
	</button>
	</div>
	</div>

	<div class="template-card bg-gray-50 rounded-xl overflow-hidden cursor-pointer transition hover:shadow-lg">
	<div class="h-48 bg-gradient-to-r from-green-500 to-emerald-400 flex items-center justify-center">
	<i class="fas fa-users text-white text-5xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-semibold mb-2">Multiplayer Hub</h3>
	<p class="text-gray-600 mb-4">Optimisé pour les jeux en ligne et communautés de joueurs.</p>
	<button class="template-select-btn w-full py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition" data-template="multiplayer">
	Sélectionner
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Generated Site Modal -->
	<div id="generated-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
	<div class="p-6 border-b border-gray-200 flex justify-between items-center">
	<h3 class="text-xl font-semibold">Votre site est prêt !</h3>
	<button id="close-modal" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="p-6">
	<div id="generated-site" class="mb-6 border border-gray-200 rounded-lg overflow-hidden">
	<!-- Generated site will be shown here -->
	</div>
	<div class="grid md:grid-cols-2 gap-6">
	<div>
	<h4 class="font-semibold mb-3">Étapes suivantes</h4>
	<ul class="space-y-2">
	<li class="flex items-start">
	<i class="fas fa-cloud-upload-alt text-purple-600 mt-1 mr-2"></i>
	<span>Publiez votre site avec notre hébergement gratuit</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-palette text-purple-600 mt-1 mr-2"></i>
	<span>Personnalisez davantage avec notre éditeur avancé</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-gamepad text-purple-600 mt-1 mr-2"></i>
	<span>Ajoutez plus de jeux à votre collection</span>
	</li>
	</ul>
	</div>
	<div>
	<h4 class="font-semibold mb-3">Téléchargement</h4>
	<p class="mb-4 text-gray-600">Vous pouvez télécharger le code source complet de votre site pour l'héberger vous-même.</p>
	<div class="flex space-x-3">
	<button class="flex-1 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
	<i class="fas fa-file-archive mr-2"></i> Télécharger ZIP
	</button>
	<button class="flex-1 py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition">
	<i class="fab fa-github mr-2"></i> Voir sur GitHub
	</button>
	</div>
	</div>
	</div>
	</div>
	<div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
	<button id="edit-site" class="px-6 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
	<i class="fas fa-edit mr-2"></i> Modifier
	</button>
	<button id="publish-site" class="px-6 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
	<i class="fas fa-rocket mr-2"></i> Publier maintenant
	</button>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<footer class="bg-gray-800 text-white py-12">
	<div class="container mx-auto px-4">
	<div class="grid md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-xl font-bold mb-4 flex items-center">
	<i class="fas fa-gamepad mr-2"></i> GameSite Generator
	</h3>
	<p class="text-gray-400">La solution la plus simple pour créer des sites de jeux professionnels en quelques minutes.</p>
	</div>
	<div>
	<h4 class="font-semibold mb-4">Navigation</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
	<li><a href="#features" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
	<li><a href="#generator" class="text-gray-400 hover:text-white transition">Générateur</a></li>
	<li><a href="#templates" class="text-gray-400 hover:text-white transition">Modèles</a></li>
	</ul>
	</div>
	<div>
	<h4 class="font-semibold mb-4">Ressources</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Tutoriels</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
	</ul>
	</div>
	<div>
	<h4 class="font-semibold mb-4">Contact</h4>
	<ul class="space-y-2">
	<li class="flex items-center">
	<i class="fas fa-envelope mr-2 text-gray-400"></i>
	<span class="text-gray-400">contact@gamesitegen.com</span>
	</li>
	<li class="flex items-center">
	<i class="fab fa-twitter mr-2 text-gray-400"></i>
	<span class="text-gray-400">@gamesitegen</span>
	</li>
	<li class="flex items-center">
	<i class="fab fa-discord mr-2 text-gray-400"></i>
	<span class="text-gray-400">Discord</span>
	</li>
	</ul>
	</div>
	</div>
	<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
	<p>© 2023 GameSite Generator. Tous droits réservés.</p>
	</div>
	</div>
	</footer>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Color selection
	const colorOptions = document.querySelectorAll('.color-option');
	let selectedColor = 'purple';

	colorOptions.forEach(option => {
	option.addEventListener('click', function() {
	colorOptions.forEach(opt => opt.classList.remove('border-gray-700', 'scale-110'));
	this.classList.add('border-gray-700', 'scale-110');
	selectedColor = this.getAttribute('data-color');
	updatePreview();
	});
	});

	// Nav style selection
	const navStyleOptions = document.querySelectorAll('.nav-style-option');
	let selectedNavStyle = 'simple';

	navStyleOptions.forEach(option => {
	option.addEventListener('click', function() {
	navStyleOptions.forEach(opt => opt.classList.remove('border-purple-500', 'bg-purple-50'));
	this.classList.add('border-purple-500', 'bg-purple-50');
	selectedNavStyle = this.getAttribute('data-style');
	updatePreview();
	});
	});

	// Template selection
	const templateButtons = document.querySelectorAll('.template-select-btn');

	templateButtons.forEach(button => {
	button.addEventListener('click', function() {
	const template = this.getAttribute('data-template');
	applyTemplate(template);
	});
	});

	// Generate button
	const generateBtn = document.getElementById('generate-btn');
	const generatedModal = document.getElementById('generated-modal');
	const closeModal = document.getElementById('close-modal');
	const generatedSite = document.getElementById('generated-site');

	generateBtn.addEventListener('click', function() {
	generateSite();
	});

	closeModal.addEventListener('click', function() {
	generatedModal.classList.add('hidden');
	});

	// Update preview
	function updatePreview() {
	// In a real implementation, this would update the preview panel
	console.log('Updating preview with:', {
	color: selectedColor,
	navStyle: selectedNavStyle
	});
	}

	// Apply template
	function applyTemplate(template) {
	let color, category, navStyle;

	switch(template) {
	case 'arcade':
	color = 'purple';
	category = 'arcade';
	navStyle = 'gaming';
	break;
	case 'puzzle':
	color = 'blue';
	category = 'puzzle';
	navStyle = 'modern';
	break;
	case 'multiplayer':
	color = 'green';
	category = 'multiplayer';
	navStyle = 'modern';
	break;
	}

	// Update form values
	document.getElementById('site-category').value = category;
	selectedColor = color;
	selectedNavStyle = navStyle;

	// Update color selection
	colorOptions.forEach(opt => {
	opt.classList.remove('border-gray-700', 'scale-110');
	if(opt.getAttribute('data-color') === color) {
	opt.classList.add('border-gray-700', 'scale-110');
	}
	});

	// Update nav style selection
	navStyleOptions.forEach(opt => {
	opt.classList.remove('border-purple-500', 'bg-purple-50');
	if(opt.getAttribute('data-style') === navStyle) {
	opt.classList.add('border-purple-500', 'bg-purple-50');
	}
	});

	updatePreview();
	}

	// Generate site
	function generateSite() {
	const siteName = document.getElementById('site-name').value \|\| "Mon Site de Jeux";
	const category = document.getElementById('site-category').value;
	const darkMode = document.getElementById('dark-mode').checked;

	// Show loading state
	generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Génération en cours...';
	generateBtn.disabled = true;

	// Simulate generation delay
	setTimeout(() => {
	// Create generated site HTML
	generatedSite.innerHTML = `
	<div class="border-b border-gray-200 bg-${selectedColor}-600 text-white p-4">
	<div class="container mx-auto flex justify-between items-center">
	<div class="flex items-center">
	<i class="fas fa-gamepad text-xl mr-2"></i>
	<span class="font-bold text-xl">${siteName}</span>
	</div>
	<nav>
	<ul class="flex space-x-6">
	<li><a href="#" class="hover:underline">Accueil</a></li>
	<li><a href="#" class="hover:underline">Jeux</a></li>
	<li><a href="#" class="hover:underline">Catégories</a></li>
	<li><a href="#" class="hover:underline">À propos</a></li>
	</ul>
	</nav>
	</div>
	</div>
	<div class="bg-gray-${darkMode ? '800' : '50'} min-h-64 p-8">
	<div class="container mx-auto">
	<h1 class="text-3xl font-bold text-${darkMode ? 'white' : 'gray-800'} mb-6">Bienvenue sur ${siteName}</h1>
	<div class="grid md:grid-cols-3 gap-6">
	${[1, 2, 3].map(i => `
	<div class="bg-${darkMode ? 'gray-700' : 'white'} rounded-lg shadow-md overflow-hidden">
	<div class="h-32 bg-${selectedColor}-500 flex items-center justify-center">
	<i class="fas fa-gamepad text-white text-4xl"></i>
	</div>
	<div class="p-4">
	<h3 class="font-semibold text-${darkMode ? 'white' : 'gray-800'} mb-2">Jeu ${i}</h3>
	<p class="text-${darkMode ? 'gray-300' : 'gray-600'} text-sm">Un super jeu ${category} à découvrir.</p>
	</div>
	</div>
	`).join('')}
	</div>
	</div>
	</div>
	<div class="bg-gray-${darkMode ? '900' : '100'} text-${darkMode ? 'gray-400' : 'gray-600'} p-4 text-center">
	<p>© ${new Date().getFullYear()} ${siteName}. Tous droits réservés.</p>
	</div>
	`;

	// Reset button
	generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Générer mon site';
	generateBtn.disabled = false;

	// Show modal
	generatedModal.classList.remove('hidden');
	}, 2000);
	}

	// Initialize first color and nav style as selected
	colorOptions[0].classList.add('border-gray-700', 'scale-110');
	navStyleOptions[0].classList.add('border-purple-500', 'bg-purple-50');
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/gaming" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>