Add index.html

Chase22 · Dec 10, 2024 · c047e41 · c047e41
1 parent 16aae4a
commit c047e41
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 10 deletions.
diff --git a/882nd.html b/882nd.html
@@ -7,6 +7,8 @@
     </script>
   </head>
   <body>
-    <p>If you are not being redirected to 882nd click <a href="https://discord.gg/3WPSt7W2">here</a></p>
+    <p>
+        If you are not being redirected to 882nd click <a href="https://discord.gg/3WPSt7W2">here</a>
+    </p>
   </body>
 </html>
diff --git a/foxhole_logo_large.png b/foxhole_logo_large.png
diff --git a/index.html b/index.html
@@ -1,11 +1,63 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <script>
-      console.log(window.location.host)
-    </script>
-  </head>
-  <body>
-    <p>You will be redirected to w3docs.com soon!</p>
-  </body>
-</html>
+
+<head>
+  <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=Jost:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+  <link href="main.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+  <main>
+    <div class="logo-container">
+      <img src="foxhole_logo_large.png" width="70%">
+      <h1>Community Network</h1>
+    </div>
+    <section>
+      <h2>Welcome to the Foxhole Community Network</h2>
+      <p>
+        This network is a project mainly setup to allow regiments without their own infrastructure to have easily
+        memorable urls for their regiment. For example as a shortlink to their discord server
+      </p>
+    </section>
+    <section>
+      <h3>The Issue</h3>
+      <p>
+        Invite links are really annoying to use. A lot of regiments setup signs in their facilities, bases or at other
+        POIs and regiments will use a discord as their main way to contact them. Since it's not really possible to copy
+        links from foxhole these have to typed in manually, and it's much nicer to type in <code>fhcn.eu/MyRegi</code>
+        than <code>discord.gg/3WSTf7W5</code>
+      </p>
+    </section>
+    <section>
+      <h3>How does it work?</h3>
+      <p>Pretty simple: Every registered regiment get's their regiment tag as the url path. So the fictonal regiment
+        Foo-Bar Brigade get's fhcn.eu/fbb. Which can then forward to any url they want.</p>
+    </section>
+    <section>
+      <h3>How can i register my regiment?</h3>
+      <p>
+        You can contact me on <a href="discord.com/users/253583923769114624">Discord</a> with your regiment name and the
+        link you'd like to forward it to. Tags are given out first-come-first-serve. If there are multiple regiments sharing the same tag the first regiment will be given the link. Keep the following in mind: Only the verified regiment leader can request a regiment link ( This will be checked against the factions
+        high command discord )
+      </p>
+      <p>
+        If you ever want your regiment removed or the link changed, just contact me
+      </p>
+    </section>
+    <section>
+      <h3>Terms</h3>
+      <p>Since I'm offering this service for absolutely free I'm going to lay down some terms for using it:</p>
+      <ol>
+        <li>I reserve the right to remove any link for any reason</li>
+        <li>Regiments using this service agree to follow the Foxhole Terms of Services. Breaking the Foxhole ToS may result in the regiment being removed from fhcn</li>
+        <li>It's not allowed to change the content the link redirects to without notification to me.</li>
+        <li>The fhcn is faction and shard neutral. Any regiment from any faction that fit these terms will be allowed to get registered</li>
+      </ol>
+    </section>
+  </main>
+</body>
+
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,51 @@
+body {
+    font-family: 'Jost', sans-serif;
+    color: white;
+    background-color: rgb(47, 46, 46);
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+
+h1 { font-size: 4em }
+h2 { font-size: 2.5em }
+h3 { font-size: 2em}
+h4 { font-size: 1.5em}
+
+main {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.logo-container h1 {
+    margin-top: 0px;
+}
+
+code {
+    background: lightgray;
+    padding: 2px 4px;
+    border-radius: 4px;
+    color: #b00000;
+}
+
+ol {
+    list-style-position: inside;
+    list-style-type: upper-roman;
+}