cin-escape / index.html
Perseaa's picture
undefined - Initial Deployment
dbee0b9 verified
Raw History Blame Contribute Delete
31.8 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cin'Escape - Escape Game à Fougères et Bar à loisirs</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>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&display=swap');
body {
font-family: 'Orbitron', sans-serif;
scroll-behavior: smooth;
background-color: #0f0f1a;
color: #e0e0ff;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Press Start 2P', cursive;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}
.hero {
background:
linear-gradient(135deg, rgba(255,0,255,0.3) 0%, rgba(0,204,255,0.3) 100%),
url('https://cin-escape.fr/wp-content/uploads/2023/09/game-room.jpg');
background-size: cover;
background-position: center;
border-bottom: 4px solid #ff00ff;
box-shadow: 0 0 30px #ff00ff;
}
.room-card {
transition: all 0.3s ease;
background: linear-gradient(145deg, #1a1a2e, #16213e);
border: 1px solid #ff00ff;
box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}
.room-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 0 30px #ff00ff, 0 0 60px rgba(255, 0, 255, 0.3);
border-color: #00ccff;
}
.stats-item {
position: relative;
background: rgba(0, 0, 0, 0.7) !important;
border: 1px solid #00ccff;
}
.stats-item::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background: #00ccff;
box-shadow: 0 0 10px #00ccff;
}
/* Effets néon globaux */
a, button {
transition: all 0.3s ease;
text-shadow: 0 0 5px currentColor;
}
a:hover, button:hover {
color: #ff00ff !important;
text-shadow: 0 0 15px #ff00ff;
}
/* Boutons */
button {
background: linear-gradient(90deg, #ff00ff 0%, #00ccff 100%) !important;
border: none !important;
color: black !important;
font-weight: bold !important;
letter-spacing: 1px;
}
button:hover {
background: linear-gradient(90deg, #ff66ff 0%, #66ffff 100%) !important;
box-shadow: 0 0 20px #ff00ff;
}
/* Barres de séparation */
hr {
border: none;
height: 2px;
background: linear-gradient(90deg, transparent, #ff00ff, #00ccff, transparent);
}
</style>
</head>
<body class="bg-gray-100">
<!-- Navigation -->
<nav class="bg-black text-white py-4 sticky top-0 z-50 shadow-lg" style="border-bottom: 2px solid #ff00ff; box-shadow: 0 0 20px #ff00ff;">
<div class="container mx-auto px-4 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-film text-2xl text-yellow-500 mr-2"></i>
<span class="text-xl font-bold">CIN'ESCAPE</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#rooms" class="hover:text-yellow-400 transition">Nos Salles</a>
<a href="#pricing" class="hover:text-yellow-400 transition">Tarifs</a>
<a href="#bar" class="hover:text-yellow-400 transition">Bar à Loisirs</a>
<a href="#business" class="hover:text-yellow-400 transition">Entreprises</a>
</div>
<div class="md:hidden">
<button id="menu-btn" class="text-white focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-black pb-4 px-4">
<a href="#rooms" class="block py-2 hover:text-yellow-400 transition">Nos Salles</a>
<a href="#pricing" class="block py-2 hover:text-yellow-400 transition">Tarifs</a>
<a href="#bar" class="block py-2 hover:text-yellow-400 transition">Bar à Loisirs</a>
<a href="#business" class="block py-2 hover:text-yellow-400 transition">Entreprises</a>
</div>
</nav>
<!-- Hero Section -->
<section class="hero text-white py-20 md:py-32 flex items-center">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">L'escape game qui va vous rendre accro!</h1>
<p class="text-xl md:text-2xl mb-8">10 000 escape-gamers depuis l'ouverture !</p>
<div class="flex flex-wrap justify-center gap-4">
<div class="stats-item px-6 py-4 bg-black bg-opacity-50 rounded-lg">
<i class="fas fa-door-open text-3xl mb-2 text-yellow-400"></i>
<p class="text-xl font-bold">4 Salles</p>
<p class="text-sm">Tout est pensé comme au cinéma</p>
</div>
<div class="stats-item px-6 py-4 bg-black bg-opacity-50 rounded-lg">
<i class="fas fa-glass-cheers text-3xl mb-2 text-yellow-400"></i>
<p class="text-xl font-bold">Bar à loisirs</p>
<p class="text-sm">Bien plus qu'un simple bar</p>
</div>
<div class="stats-item px-6 py-4 bg-black bg-opacity-50 rounded-lg">
<i class="fas fa-briefcase text-3xl mb-2 text-yellow-400"></i>
<p class="text-xl font-bold">Entreprise</p>
<p class="text-sm">Team building exceptionnel</p>
</div>
</div>
</div>
</section>
<!-- New Room Section -->
<section class="py-16" style="background: linear-gradient(135deg, #1a0033, #33001a); border-top: 2px solid #ff00ff; border-bottom: 2px solid #00ccff;">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<span class="bg-yellow-400 text-black px-4 py-1 rounded-full text-sm font-bold">Nouveauté 2025</span>
<h2 class="text-3xl md:text-4xl font-bold mt-4">La colère de Zeus</h2>
</div>
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<img src="https://cin-escape.fr/wp-content/uploads/2025/03/affiche-colere-zeus.jpg" alt="La colère de Zeus" class="rounded-lg shadow-xl w-full">
</div>
<div class="md:w-1/2">
<p class="mb-6 text-lg">
Plusieurs mois après <strong>un premier cambriolage dans le Sky Atrium Museum</strong>, la direction du musée a estimé que la sécurité du bâtiment devait être renforcée. C'est le moment qu'à choisi <strong>le Marionnettiste</strong> pour vous obliger à dérober le <strong>véritable Cœur de Zeus</strong> dans sa salle d'exposition en rénovation.
</p>
<p class="mb-6 text-lg">
Vous avez une heure pour faire preuve d'une grande dextérité physique, d'une logique imparable et d'un sang-froid remarquable face aux évènements dévastateurs qui se déroulent autour de vous.
</p>
<div class="bg-black text-white p-6 rounded-lg">
<p class="mb-2"><strong>La Foudre de Zeus fermera officiellement ses portes le dimanche 11 mai 2025 après la dernière séance de 20h15.</strong></p>
<p class="mb-2"><strong>La Colère de Zeus ouvrira, elle, ses portes le vendredi 4 juillet 2025 (pour les vacances d'été).</strong></p>
<p>Niveau Intermédiaire. Capacité : de 2 à 6 joueurs</p>
</div>
</div>
</div>
</div>
</section>
<!-- Rooms Section -->
<section id="rooms" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold">Nos 4 salles d'Escape Game</h2>
<p class="text-xl mt-4 max-w-2xl mx-auto">
Le cinéma est au cœur de cet escape game de Fougères. Tout est pensé, décoré, conçu, scénarisé comme au cinéma !
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Room 1 -->
<div class="room-card bg-white rounded-lg overflow-hidden shadow-lg">
<img src="https://cin-escape.fr/wp-content/uploads/2025/03/affiche-colere-zeus.jpg" alt="La colère de Zeus" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">LA COLERE DE ZEUS</h3>
<ul class="space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-6 Joueurs</li>
<li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min</li>
<li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau intermédiaire</li>
<li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> 45 à 65% de réussite</li>
</ul>
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition">
Réserver
</button>
</div>
</div>
<!-- Room 2 -->
<div class="room-card bg-white rounded-lg overflow-hidden shadow-lg">
<img src="https://cin-escape.fr/wp-content/uploads/2023/09/affiche-epee.jpg" alt="L'Épée enchantée de Fougères" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">L'ÉPÉE ENCHANTÉE DE FOUGÉRES</h3>
<ul class="space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-6 Joueurs</li>
<li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min</li>
<li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau Intermédiaire</li>
<li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> 50% de réussite</li>
</ul>
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition">
Réserver
</button>
</div>
</div>
<!-- Room 3 -->
<div class="room-card bg-white rounded-lg overflow-hidden shadow-lg">
<img src="https://cin-escape.fr/wp-content/uploads/2025/01/sequestrum.jpg" alt="Sequestrum Edition Ultime" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">SEQUESTRUM EDITION ULTIME</h3>
<ul class="space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-6 Joueurs</li>
<li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min</li>
<li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau Semi-intermédiaire</li>
<li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> 25 à 40% de réussite</li>
</ul>
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition">
Réserver
</button>
</div>
</div>
<!-- Room 4 -->
<div class="room-card bg-white rounded-lg overflow-hidden shadow-lg">
<img src="https://cin-escape.fr/wp-content/uploads/2025/05/nuit-comete-cover.jpg" alt="La Nuit de la Comète" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">LA NUIT DE LA COMETE</h3>
<ul class="space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-4 Joueurs</li>
<li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min ou +</li>
<li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau aléatoire</li>
<li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> Taux variable</li>
</ul>
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition">
Réserver
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-16 text-white" style="background: linear-gradient(135deg, #000033, #330033); border-top: 2px solid #00ccff; box-shadow: 0 0 30px rgba(0, 204, 255, 0.3);">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold">Tarifs Salles / Par Personne</h2>
</div>
<div class="flex flex-col lg:flex-row gap-8">
<!-- Weekday Pricing -->
<div class="lg:w-1/2 bg-gray-700 p-8 rounded-lg">
<h3 class="text-2xl font-bold mb-6 text-center border-b-2 border-yellow-500 pb-2">Du lundi au jeudi</h3>
<ul class="space-y-4">
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>2 personnes</span>
<span class="font-bold text-yellow-400">30 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>3 personnes</span>
<span class="font-bold text-yellow-400">23 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>4 personnes</span>
<span class="font-bold text-yellow-400">21 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>5 personnes</span>
<span class="font-bold text-yellow-400">19 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>6 personnes ou +</span>
<span class="font-bold text-yellow-400">18 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>Tarif enfant (8-12 ans)</span>
<span class="font-bold text-yellow-400">12 €</span>
</li>
<li class="flex justify-between items-center py-2">
<span>Tarif étudiant (-20%)</span>
<span class="font-bold text-yellow-400">Sur justificatif</span>
</li>
</ul>
</div>
<!-- Weekend Pricing -->
<div class="lg:w-1/2 bg-gray-700 p-8 rounded-lg">
<h3 class="text-2xl font-bold mb-6 text-center border-b-2 border-yellow-500 pb-2">Du vendredi au dimanche</h3>
<ul class="space-y-4">
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>2 personnes</span>
<span class="font-bold text-yellow-400">32 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>3 personnes</span>
<span class="font-bold text-yellow-400">24 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>4 personnes</span>
<span class="font-bold text-yellow-400">22 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>5 personnes</span>
<span class="font-bold text-yellow-400">20 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>6 personnes ou +</span>
<span class="font-bold text-yellow-400">19 €</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-600">
<span>Tarif enfant (8-12 ans)</span>
<span class="font-bold text-yellow-400">12 €</span>
</li>
<li class="flex justify-between items-center py-2">
<span>Tarif étudiant (-20%)</span>
<span class="font-bold text-yellow-400">Sur justificatif</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Offers Section -->
<section class="py-16 bg-yellow-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold">Nos Offres</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Offer 1 -->
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="text-4xl mb-4 text-yellow-500">
<i class="fas fa-hat-cowboy"></i>
</div>
<h3 class="text-xl font-bold mb-4">Game Master 10 €</h3>
<p class="mb-4">
Vous connaissez déjà nos salles, mais vous souhaitez faire découvrir celles-ci à vos amis, famille ou collègues : soyez leur GameMaster.
</p>
<p class="text-sm text-gray-600">
ATTENTION: Cette offre n'est valable que pour une seule personne par groupe
</p>
</div>
<!-- Offer 2 -->
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="text-4xl mb-4 text-yellow-500">
<i class="fas fa-fire"></i>
</div>
<h3 class="text-xl font-bold mb-4">Moitié prix pour une deuxième chance 50%</h3>
<p>
Vous avez envie de tenter votre chance pour résoudre une seconde fois l'énigme de l'une de nos salles ? Bonne nouvelle, c'est moitié prix pour cette deuxième tentative.
</p>
</div>
<!-- Offer 3 -->
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="text-4xl mb-4 text-yellow-500">
<i class="fas fa-birthday-cake"></i>
</div>
<h3 class="text-xl font-bold mb-4">Pack Anniversaire 12 €/ Enfant</h3>
<p class="mb-4">
Le pack comprend le gâteau et une boisson offerte par enfant. Accès aux jeux-vidéos et jeux de société. Un accompagnateur est obligatoire (gratuit).
</p>
<p class="text-sm text-gray-600">
ATTENTION: le pack n'est valable que le MERCREDI APRES-MIDI. Maximum de 8 enfants. De 8 ans à 14 ans.
</p>
</div>
</div>
</div>
</section>
<!-- Bar Section -->
<section id="bar" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2">
<img src="https://cin-escape.fr/wp-content/uploads/2023/10/bar-cin-escape.jpg" alt="Bar Cin'Escape" class="rounded-lg shadow-xl w-full">
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Cin'Escape Bar à Loisirs</h2>
<p class="text-xl italic mb-6">Pour ne plus jamais vous ennuyer à Fougères !</p>
<p class="mb-6">
Un bar à loisirs ? C'est un peu comme un bar mais c'est bien plus que ça ! Dans notre espace convivial de 100 m2, plusieurs coins vous attendent selon votre humeur et votre envie du jour. On y vient pour se rencontrer, échanger, s'amuser, jouer avec les jeux de société et de consoles mis à disposition.
</p>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center">
<i class="fas fa-utensils text-yellow-500 mr-2 text-xl"></i>
<span>Restauration</span>
</div>
<div class="flex items-center">
<i class="fas fa-dice text-yellow-500 mr-2 text-xl"></i>
<span>Jeux de société</span>
</div>
<div class="flex items-center">
<i class="fas fa-gamepad text-yellow-500 mr-2 text-xl"></i>
<span>Console</span>
</div>
<div class="flex items-center">
<i class="fas fa-couch text-yellow-500 mr-2 text-xl"></i>
<span>Espace Cosy</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 text-white" style="background: #000; border-top: 2px solid #00ccff; border-bottom: 2px solid #ff00ff; box-shadow: 0 0 40px rgba(255, 0, 255, 0.3);">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<img src="https://cin-escape.fr/wp-content/uploads/2023/09/dry-tree-SFCFQRP.png" alt="Escape Room" class="h-16 mx-auto mb-4">
<p class="text-4xl font-bold">4</p>
<p>Escape Room</p>
</div>
<div>
<img src="https://cin-escape.fr/wp-content/uploads/2023/09/candle-SFCFQRP.png" alt="M2" class="h-16 mx-auto mb-4">
<p class="text-4xl font-bold">100</p>
<p>M2</p>
</div>
<div>
<img src="https://cin-escape.fr/wp-content/uploads/2023/09/magic-circle-SFCFQRP.png" alt="Activités" class="h-16 mx-auto mb-4">
<p class="text-4xl font-bold">10+</p>
<p>Activités</p>
</div>
<div>
<img src="https://cin-escape.fr/wp-content/uploads/2023/09/skull-SFCFQRP.png" alt="Capacité" class="h-16 mx-auto mb-4">
<p class="text-4xl font-bold">6</p>
<p>Capacité d'accueil</p>
</div>
</div>
</div>
</section>
<!-- Business Section -->
<section id="business" class="py-16 text-white" style="background: linear-gradient(135deg, #330033, #003333); border-top: 2px solid #ff00ff; border-bottom: 2px solid #00ccff;">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Pour les Entreprises & CE</h2>
<p class="mb-6">
Envie de faire jouer vos collaborateurs ? Ça tombe bien, le jeu en équipe est un formidable outil même dans un cadre professionnel. Profitez de cette expérience unique pour tisser des liens autrement.
</p>
<p class="mb-6">
Vous êtes membre du CSE (Comité Social et Économique) de votre entreprise et vous cherchez des idées originales de loisirs pour vos collègues ? Vous êtes au bon endroit !
</p>
<p class="font-bold text-yellow-400 mb-6">Nous nous adaptons à chaque demande.</p>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check text-yellow-400 mt-1 mr-2"></i>
<span>Séance de team building dans nos 3 salles</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-400 mt-1 mr-2"></i>
<span>Privatisation du lieu</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-400 mt-1 mr-2"></i>
<span>Offres spéciales CSE</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-yellow-400 mt-1 mr-2"></i>
<span>Escape Mobile en décor naturel</span>
</li>
</ul>
</div>
<div class="lg:w-1/2">
<img src="https://cin-escape.fr/wp-content/uploads/2023/09/bar-fougeres.jpg" alt="Espace entreprise" class="rounded-lg shadow-xl w-full">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-white py-12" style="background: #000; border-top: 2px solid #00ccff; box-shadow: 0 0 30px rgba(0, 204, 255, 0.3);">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Cin'Escape</h3>
<p>L'escape game qui va vous rendre accro!</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-yellow-400 hover:text-yellow-300 text-xl"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-yellow-400 hover:text-yellow-300 text-xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-yellow-400 hover:text-yellow-300 text-xl"><i class="fab fa-tripadvisor"></i></a>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Contact</h3>
<p class="mb-2"><i class="fas fa-map-marker-alt mr-2 text-yellow-400"></i> Fougères, France</p>
<p class="mb-2"><i class="fas fa-phone mr-2 text-yellow-400"></i> +33 XX XX XX XX</p>
<p><i class="fas fa-envelope mr-2 text-yellow-400"></i> contact@cin-escape.fr</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Horaires</h3>
<p class="mb-2">Lundi - Jeudi: 14h - 20h</p>
<p class="mb-2">Vendredi - Samedi: 14h - 22h</p>
<p>Dimanche: 14h - 19h</p>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
<p>&copy; 2023 Cin'Escape. Tous droits réservés.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('menu-btn').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
</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=Perseaa/cin-escape" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>