mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 13:00:42 +00:00
improve front page
This commit is contained in:
evanpelle
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#5865f2" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
|
||||
|
After Width: | Height: | Size: 764 B |
@@ -0,0 +1,45 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 100 125"
|
||||
style="enable-background:new 0 0 100 100;"
|
||||
xml:space="preserve"
|
||||
id="svg110"
|
||||
sodipodi:docname="QuestionMarkIcon.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs114" /><sodipodi:namedview
|
||||
id="namedview112"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="5.3400704"
|
||||
inkscape:cx="49.812077"
|
||||
inkscape:cy="62.545992"
|
||||
inkscape:window-width="1807"
|
||||
inkscape:window-height="1167"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg110" /><g
|
||||
id="g104"><g
|
||||
id="g102"><g
|
||||
id="g100"><path
|
||||
d="M50,85c-19.3,0-35-15.7-35-35s15.7-35,35-35s35,15.7,35,35C85,69.3,69.3,85,50,85z M50,21C33.9,21,20.9,34,20.9,50 s13,29.1,29.1,29.1s29.1-13,29.1-29.1C79,34,66,21,50,21z"
|
||||
id="path94" /><path
|
||||
d="M49.1,59.7c-1.6,0-3-1.3-3-3c0-4.6,3-8.6,7.3-9.9c1.9-0.6,3.2-2.3,3.1-4.3c0-3.6-3-6.6-6.6-6.6c-3.6,0-6.6,3-6.6,6.6 c0,1.6-1.3,3-3,3c-1.6,0-3-1.3-3-3C37.5,35.6,43.1,30,50,30s12.5,5.6,12.5,12.5c0,4.6-3,8.6-7.3,9.9c-1.9,0.6-3.2,2.3-3.1,4.3 C52.1,58.3,50.7,59.7,49.1,59.7C49.1,59.7,49.1,59.7,49.1,59.7z"
|
||||
id="path96" /><circle
|
||||
cx="49.1"
|
||||
cy="65.9"
|
||||
r="3.6"
|
||||
id="circle98" /></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -64,7 +64,7 @@ export class PublicLobby extends LitElement {
|
||||
return html`
|
||||
<button
|
||||
@click=${() => this.lobbyClicked(lobby)}
|
||||
class="w-full max-w-3xl mx-auto py-3 px-4 md:py-6 md:px-8 ${this.isLobbyHighlighted
|
||||
class="w-full mx-auto p-16 md:py-6 md:px-8 ${this.isLobbyHighlighted
|
||||
? 'bg-gradient-to-r from-green-600 to-green-500'
|
||||
: 'bg-gradient-to-r from-blue-600 to-blue-500'
|
||||
} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90"
|
||||
|
||||
@@ -37,7 +37,7 @@ export class UsernameInput extends LitElement {
|
||||
@change=${this.handleChange}
|
||||
placeholder="Enter your username"
|
||||
maxlength="${MAX_USERNAME_LENGTH}"
|
||||
class="w-72 px-4 py-2 bg-white border border-gray-300 rounded-xl shadow-sm text-2xl text-gray-900 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
class="w-full px-4 py-2 bg-white border border-gray-300 rounded-xl shadow-sm text-2xl text-gray-900 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
${this.validationError
|
||||
? html`<div class="mt-2 px-3 py-1 text-lg text-red-600 bg-white border border-red-600 rounded">${this.validationError}</div>`
|
||||
|
||||
@@ -165,9 +165,9 @@ export class Leaderboard extends LitElement implements Layer {
|
||||
|
||||
players: Entry[] = [];
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
// createRenderRoot() {
|
||||
// return this;
|
||||
// }
|
||||
@state()
|
||||
private _hidden = true;
|
||||
|
||||
|
||||
+92
-36
@@ -5,6 +5,56 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenFront (ALPHA)</title>
|
||||
|
||||
<!-- Preload critical assets -->
|
||||
<link rel="preload" href="../../resources/images/OpenFrontLogo.svg" as="image">
|
||||
<link rel="preload" href="../../resources/images/DiscordIcon.svg" as="image">
|
||||
|
||||
<!-- Critical CSS to prevent FOUC -->
|
||||
<style>
|
||||
.preload * {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
html {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html.preload {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Critical styles to prevent layout shift */
|
||||
.container {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Immediate execution to prevent FOUC -->
|
||||
<script>
|
||||
document.documentElement.className = 'preload';
|
||||
</script>
|
||||
|
||||
<!-- Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
@@ -15,54 +65,55 @@
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="h-full overflow-hidden select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out invisible opacity-0">
|
||||
class="h-full overflow-hidden select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out">
|
||||
<!-- Main container with responsive padding -->
|
||||
<!-- Logo section remains the same -->
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
|
||||
<!-- Logo section with responsive scaling -->
|
||||
<img src="../../resources/images/OpenFrontLogo.svg" alt="OpenFront.io"
|
||||
class="h-auto w-1/2 lg:w-1/4 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
|
||||
class="pt-6 md:pt-12 h-auto w-3/4 lg:w-1/4 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
|
||||
<h3 class="font-sans text-center text-black pb-6 md:pb-12 text-sm sm:text-base lg:text-lg">(v0.14.0)</h3>
|
||||
|
||||
<!-- Version text scales with screen size -->
|
||||
<h3 class="font-sans text-center text-black pb-4 text-sm sm:text-base lg:text-lg">(v0.14.0)</h3>
|
||||
|
||||
<div class="p-2 flex items-center justify-center min-h-full w-full">
|
||||
<username-input></username-input>
|
||||
<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4">
|
||||
<username-input class="w-full"></username-input>
|
||||
</div>
|
||||
|
||||
<!-- Public lobby section with responsive spacing -->
|
||||
<div class="w-full pb-4 p-2 flex items-center justify-center min-h-full">
|
||||
<public-lobby></public-lobby>
|
||||
<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2">
|
||||
<public-lobby class="w-full"></public-lobby>
|
||||
</div>
|
||||
|
||||
<!-- Button container with responsive width and spacing -->
|
||||
<div
|
||||
class="flex flex-col sm:flex-row gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto">
|
||||
<!-- Single Player button -->
|
||||
<button id="single-player" class="bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5
|
||||
font-bold text-lg sm:text-xl lg:text-2xl rounded-lg
|
||||
flex-1 border-none cursor-pointer transition-colors duration-300">
|
||||
<div class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto">
|
||||
<button id="host-lobby-button"
|
||||
class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
|
||||
Create Lobby
|
||||
</button>
|
||||
<button id="join-private-lobby-button"
|
||||
class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
|
||||
Join Lobby
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4 sm:mt-6 lg:mt-8">
|
||||
<button id="single-player"
|
||||
class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300">
|
||||
Single Player
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Secondary buttons container -->
|
||||
<div class="flex flex-col gap-3 sm:gap-4 lg:gap-5 flex-1">
|
||||
<button id="host-lobby-button" class="bg-blue-100 hover:bg-blue-200 text-blue-900
|
||||
p-3 sm:p-4 lg:p-5 font-medium
|
||||
text-sm sm:text-base lg:text-lg rounded-md w-full
|
||||
border-none cursor-pointer transition-colors duration-300">
|
||||
Create Lobby
|
||||
</button>
|
||||
<button id="join-private-lobby-button" class="bg-blue-100 hover:bg-blue-200 text-blue-900
|
||||
p-3 sm:p-4 lg:p-5 font-medium
|
||||
text-sm sm:text-base lg:text-lg rounded-md w-full
|
||||
border-none cursor-pointer transition-colors duration-300">
|
||||
Join Lobby
|
||||
</button>
|
||||
</div>
|
||||
<!-- Links section -->
|
||||
<div class="flex justify-center mt-4">
|
||||
<a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I" id="yt-link" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
|
||||
<img src="../../resources/images/QuestionMarkIcon.svg" alt="Question Mark" class="w-12 h-12" />
|
||||
</a>
|
||||
<a href="https://discord.gg/k22YrnAzGp" id="discord-link" target="_blank" rel="noopener noreferrer"
|
||||
class="flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
|
||||
<img src="../../resources/images/DiscordIcon.svg" alt="Discord" class="w-12 h-12" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game components with appropriate spacing -->
|
||||
<!-- Game components -->
|
||||
<div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
|
||||
<ul></ul>
|
||||
</div>
|
||||
@@ -84,10 +135,15 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.body.classList.remove('invisible', 'opacity-0');
|
||||
// Remove preload class after everything is loaded
|
||||
window.addEventListener('load', function () {
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('preload');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Analytics -->
|
||||
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
||||
data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user