alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-19 14:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

new front page UI

Browse Source
This commit is contained in:
evanpelle
2024-10-10 17:27:00 -07:00
parent eec2b73c34
commit 64d956bda4
6 changed files with 76 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/index.html
+42 -12
View File
@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenFront (ALPHA)</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763">
</script>
@@ -26,19 +27,48 @@
fill="#ffffff" />
</svg>
</a>
<h1>OpenFront.io</h1>
<h2>(v0.6.5)</h2>
<div id="username-container">
<input type="text" id="username" placeholder="Enter your username">
<h1 class="text-9xl">OpenFront.io</h1>
<h2 class="text-6xl mb-2">(v0.6.5)</h2>
<div class="flex justify-center items-start">
<div class="w-full max-w-3xl p-4 space-y-4">
<!-- Username input -->
<input type="text" id="username" placeholder="Enter your username"
class="w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<!-- Button layout -->
<div class="flex space-x-4 max-w-xs mx-auto">
<!-- Single Player button -->
<button id="single-player"
class="flex-1 h-31 px-6 py-8 text-xl font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-300 ease-in-out">
Single Player
</button>
<!-- Create and Join Lobby buttons stacked -->
<div class="flex-1 space-y-4">
<button id="create-lobby"
class="w-full h-12 px-4 py-4 text-sm font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out">
Create Lobby
</button>
<button id="join-lobby"
class="w-full h-12 px-4 py-4 text-sm font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out">
Join Lobby
</button>
</div>
</div>
<h3 class="text-6xl mt-8 tracking-wide pt-8">Public Games</h3>
<div id="lobbies-container" class="p-4">
<button id="lobby-button"
class="w-full max-w-md mx-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-6 px-8 rounded-lg shadow-lg transition duration-300 ease-in-out flex flex-col items-center justify-center space-y-3 group"
data-selected="false">
<div id="lobby-name" class="text-2xl group-data-[selected=true]:text-green-200"></div>
<div id="lobby-timer" class="text-xl group-data-[selected=true]:text-green-200"></div>
<div id="player-count" class="text-lg group-data-[selected=true]:text-green-200"></div>
</button>
</div>
</div>
</div>
<div id="lobbies-container">
<button id="lobby-button" class="lobby-button">
<div id="lobby-name" class="lobby-name"></div>
<div id="lobby-timer" class="lobby-timer"></div>
<div id="player-count" class="player-count"></div>
</button>
</div>
<h3 id="next-game"> </h3>
<h3 id="next-game" class="invisible"> </h3>
</div>
<div id="customMenu">