Forráskód Böngészése

started first page

Lucas 7 hónapja
commit
8ed5fc4586
4 módosított fájl, 310 hozzáadás és 0 törlés
  1. 1 0
      .gitignore
  2. 37 0
      background.js
  3. 186 0
      index.html
  4. 86 0
      style.css

+ 1 - 0
.gitignore

@@ -0,0 +1 @@
+images/

+ 37 - 0
background.js

@@ -0,0 +1,37 @@
+const images = [
+  'images/bg1.png',
+  'images/bg2.png',
+  'images/bg3.png'
+];
+
+let index = 0;
+
+// Preload the images
+const preloadImages = () => {
+  images.forEach(src => {
+    const img = new Image();
+    img.src = src;
+  });
+};
+
+preloadImages();
+
+const bg = document.getElementById('background');
+
+// Initially set background image without transition (to avoid flicker)
+bg.style.backgroundImage = `url("${images[index]}")`;
+bg.style.opacity = 1;  // Ensure it's visible immediately
+
+// Change background image every 10 seconds with fade effect
+setInterval(() => {
+  index = (index + 1) % images.length;  // Cycle through images
+
+  // Fade out first
+  bg.style.opacity = 0;
+
+  // After fade-out, switch image and fade-in
+  setTimeout(() => {
+    bg.style.backgroundImage = `url("${images[index]}")`;
+    bg.style.opacity = 1;
+  }, 1000);  // Wait 1 second before applying the new background
+}, 10000);  // 10-second interval for image change

+ 186 - 0
index.html

@@ -0,0 +1,186 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My Minecraft Server</title>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <div id="background"></div>
+
+        <div class="container">
+            <header>
+                <h1>
+                    Welcome to the
+                    <span class="gold">TVHS</span>
+                    <span class="green">Minecraft Server</span>
+                    Website
+                </h1>
+                <p class="ipaddress">
+                    IP Address: <strong>tspmo.lucason.top</strong>
+                </p>
+            </header>
+
+            <section class="textsection announcements">
+                <h2>📢 Announcements</h2>
+                <p><strong>April 30:</strong> The Server Has Gone Public!</p>
+            </section>
+
+            <section class="textsection info">
+                <h2>ℹ️ Server Info</h2>
+                <ul>
+                    <li>🌍 Version: 1.20.5 (Java)</li>
+                    <li>
+                        ☕ You can join with vanilla clients as it is, there are
+                        no required client-side mods
+                    </li>
+                    <li>👥 Max Players: 40</li>
+                </ul>
+            </section>
+
+            <section class="textsection rules">
+                <h2>📜 Rules</h2>
+                <menu>
+                    <li>No Griefing</li>
+                    <li>No Cheating</li>
+                    <li>No Exploiting or Lagging the Server</li>
+                    <li>Keep it peaceful</li>
+                    <li>
+                        If you make me intervene with your beefs, I reserve the
+                        right to do whatever I want to you
+                    </li>
+                </menu>
+            </section>
+
+            <section class="textsection client-mods">
+                <h2>🛠️ Recommended Client-sided Mods</h2>
+                <p>
+                    If you can install mods, your experience might be a little
+                    better. Here are some mods that I recommend (MAKE SURE YOU
+                    ARE USING THE FABRIC VERSIONS):
+                </p>
+                <menu>
+                    <li><strong>AppleSkin</strong></li>
+                    <li><strong>Better F3</strong></li>
+                    <li><strong>Iris (shaders)</strong></li>
+                    <li>
+                        <strong
+                            >Lithium, Krypton, and Sodium (Optimization)</strong
+                        >
+                    </li>
+                    <li><strong>Zoomify</strong></li>
+                    <li><strong>Dynamic FPS</strong></li>
+                    <li>
+                        <strong
+                            >Simple Voice Chat (doesn't work on the server
+                            rn)</strong
+                        >
+                    </li>
+                </menu>
+            </section>
+
+            <section class="textsection server-mods">
+                <h2>🗄️ Server-sided Mods</h2>
+
+                <h3>Terralith</h3>
+                <ul>
+                    <li>Overhauls/adds a bunch of new biomes</li>
+                    <li>Completely based on already-existing blocks</li>
+                </ul>
+
+                <h3>Factions</h3>
+                <ul>
+                    <li>
+                        Provides protection from griefing, join a faction with
+                        friends and claim chunks with your faction power
+                    </li>
+                    <li>
+                        Faction power is based on number of players, number of
+                        allies, deaths, and time played
+                    </li>
+                    <li>Command: <code>/factions</code> or <code>/f</code></li>
+                </ul>
+
+                <h3>PolyFactory</h3>
+                <ul>
+                    <li>
+                        An engineering mod similar to Create, but server-side.
+                    </li>
+                    <li>
+                        Information can be found using
+                        <code>/polyfactory wiki</code> and by using
+                        <code>/polydex</code>
+                    </li>
+                </ul>
+
+                <h3>Poly Decorations</h3>
+                <ul>
+                    <li>
+                        Similar to PolyFactory, but just for decorative blocks
+                    </li>
+                    <li>
+                        Blocks to make can be found by unlocking recipes or
+                        using <code>/polydex</code>
+                    </li>
+                </ul>
+
+                <h3>Veinminer</h3>
+                <ul>
+                    <li>
+                        This is automatically enabled and allows you to mine ore
+                        veins and trees by breaking one block
+                    </li>
+                    <li>
+                        Be careful using this with precious tools since it takes
+                        the whole vein's worth of durability at once, things
+                        break easily
+                    </li>
+                    <li>
+                        You can toggle it with <code>/veinminer toggle</code>,
+                        and modify other settings with <code>/veinminer</code>
+                    </li>
+                </ul>
+
+                <h3>Inventory Sorter</h3>
+                <ul>
+                    <li>Sorts your inventory and chests</li>
+                    <li>Configure with <code>/invsort</code></li>
+                    <li>
+                        Tip: use <code>/invsort doubleClickSort</code> to sort
+                        inventories by double-clicking an empty slot
+                    </li>
+                </ul>
+
+                <h3>Apple Skin</h3>
+                <ul>
+                    <li>
+                        Install the client-side mod of the same name to take
+                        advantage of upgraded tooltips and a saturation
+                        indicator
+                    </li>
+                </ul>
+
+                <h3>Simple Voice Chat</h3>
+                <ul>
+                    <li>
+                        I haven't gotten this working, but I may fix it later.
+                        Ignore it for now.
+                    </li>
+                </ul>
+
+                <h3>Administrative Mods</h3>
+                <ul>
+                    <li>
+                        I have optimization mods, anticheat mods, inventory
+                        viewers, admin permissions for your factions, and block
+                        logs
+                    </li>
+                    <li>I will use these if I have to</li>
+                </ul>
+            </section>
+        </div>
+
+        <script src="./background.js"></script>
+    </body>
+</html>

+ 86 - 0
style.css

@@ -0,0 +1,86 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    overflow: scroll;
+    display: flex; /* This makes the html and body containers flex containers */
+    align-items: center; /* Vertically center content */
+    justify-content: center; /* Horizontally center content */
+    color: floralwhite;
+}
+
+#background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-position: center;
+    z-index: 1;
+    filter: blur(3px) brightness(0.8); /* Apply blur and dimming */
+    opacity: 1;
+    transition:
+        opacity 1s ease-in-out,
+        background-image 1s ease-in-out;
+}
+
+.container {
+    position: relative;
+    z-index: 2; /* Ensure container stays on top of background */
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 2em;
+    border-radius: 10px;
+    max-width: 800px;
+    width: 90%;
+    margin: auto;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
+
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+    min-height: 50vh;
+    /* Optional: Use min-height for responsiveness or switch to a fixed height */
+}
+
+header {
+    text-align: center;
+    margin-bottom: 2em;
+}
+
+h1 {
+    font-size: 3em;
+    margin: 0.2em 0;
+}
+
+section {
+    margin-bottom: 2em;
+}
+
+ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+li {
+    font-size: 1.25em;
+}
+
+p {
+    font-size: 1.25em;
+}
+
+.green {
+    color: limegreen;
+}
+
+.gold {
+    color: gold;
+}