overhaul using augmented-ui
[browser-rts.git] / public / index.html
index 80324ebbef359384c3e0f7ac7cc2da3206cef44e..8cdfc070031c32bdc5f46169b0c92f1cb8845abb 100644 (file)
@@ -1,67 +1,89 @@
 <!doctype html>
 <html>
-    <head>
-        <title>Tick City</title>
-        <meta charset="utf-8">
-        <script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous" defer></script>
-        <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
-        <link rel="stylesheet" href="/stylesheet.css">
-    </head>
-    <body id="home">
-        <h2>Alpha Kingdom Management</h2>
-        <p>Hey, welcome to this alpha version of a kingdom management game. I've always loved building browser based games and this is 
-            one in a long line. There's little to no branding just yet, just a simple time-based kingdom management game
-        </p>
 
-        <table>
-            <tr>
-                <td>
-                    <h4>Signup</h4>
-        <form hx-post="/accounts">
-            <div>
-                <label>Username: </label>
-                <input type="text" name="username">
-            </div>
-            <div>
-                <label>Password: </label>
-                <input type="password" name="password">
-            </div>
-            <button type="submit">Sign Up</button>
-        </form>
+<head>
+    <title>Tick City</title>
+    <meta charset="utf-8">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/htmx.org@1.7.0"
+        integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous"
+        defer></script>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui@2/augmented-ui.min.css">
+    <link rel="stylesheet" href="/scifi.css">
+</head>
+
+<body id="home">
+    <h1 data-augmented-ui="tl-clip bl-clip none">Antares</h1>
+    <div class="row">
+        <div class="col">
+            <p>Welcome to <b>Antares</b>, a free-to-play browser based strategy game.</p>
+            <p>We're very early in development, but are always looking for new players to sign up and test things out. Just note
+                that the likelihood of you running into a broken feature or a bug is quite high at this point. If you do 
+                encouter a bug or issue, feel free to post in our forums and one of the devs will take a look.
+            </p>
 
-                </td>
-                <td>
-                    <h4>Login</h4>
-        <form hx-post="/login">
-            <div>
-                <label>Username: </label>
-                <input type="text" name="username">
+            <h2 data-augmented-ui="tl-clip bl-clip none">Upcoming Features</h2>
+    <h3 data-augmented-ui="tl-clip bl-clip none">Species</h3>
+    <p>
+        Work is being done to add different Species to the game to allow further customization and strategy options. 
+    </p>
+    <h3 data-augmented-ui="tl-clip bl-clip none">More Buildings</h3>
+    <p>We're pretty light on buildings at the moment but we have plans for a few more:</p>
+    <ul>
+        <li>Homes</li>
+        <li>Banks</li>
+        <li>Mills</li>
+        <li>Quarries</li>
+        <li>Spy Hideouts</li>
+        <li>Mage Towers</li>
+    </ul>
+        </div>
+        <div class="col">
+            <div class="row">
+                <div class="col pane" data-augmented-ui="tl-clip tr-2-clip-x br-2-clip-y bl-clip-x border">
+                    <h3 data-augmented-ui="tl-clip bl-clip none">Signup</h3>
+                    <form hx-post="/accounts">
+                        <div>
+                            <label>Username:</label>
+                            <input type="text" name="username">
+                        </div>
+                        <div>
+                            <label>Password:</label>
+                            <input type="password" name="password">
+                        </div>
+                        <button type="submit" class="success">Sign Up</button>
+                    </form>
+                </div>
             </div>
-            <div>
-                <label>Password: </label>
-                <input type="password" name="password">
+            <div class="row">
+                <div class="col pane" style="margin-top: 2rem; " data-augmented-ui="tl-clip tr-2-clip-x br-2-clip-y bl-clip-x border">
+                    <h3 data-augmented-ui="tl-clip bl-clip none">Login</h3>
+                    <form hx-post="/login">
+                        <div>
+                            <label>Username:</label>
+                            <input type="text" name="username">
+                        </div>
+                        <div>
+                            <label>Password:</label>
+                            <input type="password" name="password">
+                        </div>
+                        <button type="submit">Log In</button>
+                    </form>
+                </div>
+
             </div>
-            <button type="submit">Log In</button>
-        </form>
-                </td>
-            </tr>
-        </table>
+        </div>
+    </div>
+
+    <div class="row">
+    </div>
 
-        <h2>Upcoming Features</h2>
-        <h3>Fantasy Races</h3>
-        <p>All good kingdom management games need to give you the ability to pick your fantasy race. Once you decide on the race of your leader you'll be given various perks/units/buildings that differ from all the others. You'll also have access to a "Race Chat" where only other members of your chosen race can see each other speak. </p>
-        <h3>More Buildings</h3>
-        <p>We're pretty light on buildings at the moment but we have plans for a few more:</p>
-        <ul>
-            <li>Banks</li>
-            <li>Mills</li>
-            <li>Quarries</li>
-            <li>Spy Hideouts</li>
-            <li>Mage Towers</li>
-        </ul>
-        <footer>
-            A project by <a href="https://xangelo.ca">xangelo</a>
-        </footer>
-    </body>
+    
+    <footer>
+        A project by <a href="https://xangelo.ca">xangelo</a>
+    </footer>
+</body>
 </html>
\ No newline at end of file