tledeum/medieval-queue-master
0
1<!DOCTYPE html>2<html lang="fr" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Throne Queue - Chargement</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <link rel="stylesheet" href="style.css">11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 fuchsia: {18 500: '#d946ef',19 }20 }21 }22 }23 }24 </script>25</head>26<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">27 <custom-header></custom-header>28 29 <main class="flex-1 flex items-center justify-center p-4">30 <div class="max-w-2xl w-full bg-gray-800 rounded-lg shadow-2xl overflow-hidden border border-fuchsia-500/30">31 <div class="p-8 text-center">32 <div class="flex justify-center mb-8">33 <img src="http://static.photos/vintage/320x240/42" alt="Dragon Sigil" class="h-32 w-32 object-contain animate-pulse">34 </div>35 36 <h1 class="text-3xl font-bold mb-2 text-fuchsia-500 font-serif">Chargement du Royaume</h1>37 <p class="text-lg mb-8">Préparez-vous à entrer dans Westeros</p>38 39 <div class="relative pt-1 mb-8">40 <div class="flex items-center justify-between">41 <span class="text-xs font-semibold inline-block text-fuchsia-500">2/30</span>42 </div>43 <div class="overflow-hidden h-4 mb-4 text-xs flex rounded bg-gray-700">44 <div style="width:7%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-fuchsia-500 animate-pulse"></div>45 </div>46 </div>47 48 <div class="bg-gray-700 rounded-lg p-4 mb-6 border border-fuchsia-500/20">49 <p class="text-xl font-medium">Tu es 2e sur 30 dans la file d'attente</p>50 </div>51 52 <div class="flex items-center justify-center space-x-2 text-gray-400">53 <i data-feather="clock"></i>54 <span>Temps estimé: <span class="text-fuchsia-500">~1 minute</span></span>55 </div>56 </div>57 </div>58 </main>59 60 <custom-footer></custom-footer>61 62 <script src="components/header.js"></script>63 <script src="components/footer.js"></script>64 <script src="script.js"></script>65 <script>66 feather.replace();67 </script>68</body>69</html>