66 lines
2.9 KiB
HTML
66 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Ft Boules</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body class="bg-gray-500 min-h-screen font-[Inter]">
|
|
<!-- Header -->
|
|
<header
|
|
class="fixed top-0 left-0 right-0 h-14 bg-gray-800 text-white flex items-center justify-between px-4 shadow-md z-50">
|
|
<div class="flex-1 flex justify-start">
|
|
<button id="menuBtn" class="flip-btn text-lg font-semibold focus:outline-none">
|
|
<span class="arrow front">></span>
|
|
<span class="arrow back"><</span>
|
|
</button>
|
|
</div>
|
|
<div id="header-title" class="text-white text-lf flex-1 text-center text-semibold ps-4 shadow-md font-mono">
|
|
</div>
|
|
<div class="flex-1 ps-4 flex justify-end">
|
|
<button id="header-profile"
|
|
class="right-0 px-4 inset-y-0 text-white text-right font-mono border border-orange-500 rounded-3xl bg-orange-500 cursor-pointer shadow-[0_2px_0_0_black] transition-all hover:bg-orange-400 active:bg-orange-200 active:translate-y-px active:shadow-[0_2px_0_0_black]">
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar"
|
|
class="fixed top-14 left-0 w-64 h-full bg-gray-900 text-white transform -translate-x-full transition-transform duration-300 ease-in-out z-40">
|
|
<nav class="flex flex-col p-4 space-y-3">
|
|
<a href="/" class="hover:bg-gray-700 rounded-md px-3 py-2">🏠 Home</a>
|
|
<a href="/login" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Login</a>
|
|
<a href="/signin" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Signin</a>
|
|
<a href="/ttt" class="hover:bg-gray-700 rounded-md px-3 py-2">⭕ Tic-Tac-Toe</a>
|
|
<a href="/pong" class="hover:bg-gray-700 rounded-md px-3 py-2">▮•▮ Ping Pong</a>
|
|
<a href="/tour" class="hover:bg-gray-700 rounded-md px-3 py-2">🏆 Tournaments</a>
|
|
<a href="/logout" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
|
|
</nav>
|
|
</aside>
|
|
<div id="chatBox"> </div>
|
|
|
|
<div class="fixed top-0 left-0 opacity-40" hidden>
|
|
<!-- >this is used so tailwind create the class styles... -->
|
|
</div>
|
|
<!-- Overlay -->
|
|
<div id="overlay"
|
|
class="fixed top-14 left-0 right-0 bottom-0 bg-black opacity-0 pointer-events-none transition-opacity duration-300 z-30">
|
|
</div>
|
|
<!-- Main content -->
|
|
<main class="pt-16 px-6 pb-8 w-full h-full container" id="app">
|
|
</main>
|
|
<button id="chatButton" class="chat-button transition">💬</button>
|
|
<div id="chatMessageIn" class="chat-buttonMsg transition">🔴</div>
|
|
<!-- Scripts -->
|
|
<script type="module" src="/src/pages/"></script>
|
|
<script type="module" src="/src/carousel"></script>
|
|
<script type="module" src="/src/routing"></script>
|
|
<script type="module" src="/src/toast"></script>
|
|
<script type="module" src="/src/auth"></script>
|
|
<script type="module" src="/src/chat/chat.ts"> </script>
|
|
</body>
|
|
|
|
</html>
|