Spaces:

dannyboy84
/

wormate-io-clone

Running

App Files Files Community

dannyboy84 commited on Oct 31, 2025

Commit

e92b0de

verified ·

1 Parent(s): cbd2f7a

new project

Browse files

Files changed (4) hide show

about.html +53 -0
components/wormate-nav.js +4 -3
index.html +6 -2
style.css +80 -1

about.html ADDED Viewed

	@@ -0,0 +1,53 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Wormate.io Clone</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="components/wormate-nav.js"></script>
+    <script src="components/game-footer.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+    </style>
+</head>
+<body>
+    <wormate-nav></wormate-nav>
+    <main class="about-container">
+        <h1>About Wormate.io Clone</h1>
+        <section class="about-section">
+            <h2>The Game</h2>
+            <p>This is a fan-made clone of the popular online multiplayer game Wormate.io where you control a worm and try to grow as large as possible by eating food while avoiding other players.</p>
+            <img src="http://static.photos/gaming/640x360/1" alt="Gameplay screenshot">
+        </section>
+        <section class="about-section">
+            <h2>How to Play</h2>
+            <ul class="game-instructions">
+                <li>Use arrow keys to control your worm</li>
+                <li>Eat colored food pellets to grow longer</li>
+                <li>Avoid crashing into walls or other worms</li>
+                <li>Compete for the highest score on the leaderboard</li>
+            </ul>
+        </section>
+        <section class="about-section">
+            <h2>Features</h2>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <h3>Multiplayer</h3>
+                    <p>Play against real opponents worldwide</p>
+                </div>
+                <div class="feature-card">
+                    <h3>Custom Skins</h3>
+                    <p>Personalize your worm's appearance</p>
+                </div>
+                <div class="feature-card">
+                    <h3>Leaderboards</h3>
+                    <p>Track top players globally</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <game-footer></game-footer>
+    <script src="script.js"></script>
+</body>
+</html>

components/wormate-nav.js CHANGED Viewed

@@ -64,11 +64,12 @@ class WormateNav extends HTMLElement {
                     <a href="#" class="logo">WORMATE.IO</a>
                     <div class="nav-links">
-                        <a href="#" class="nav-link">HOME</a>
-                        <a href="#" class="nav-link">PLAY</a>
                         <a href="#" class="nav-link">SKINS</a>
                         <a href="#" class="nav-link">LEADERBOARD</a>
-                    </div>
                 </div>
             </nav>
         `;

                     <a href="#" class="logo">WORMATE.IO</a>
                     <div class="nav-links">
+                        <a href="index.html" class="nav-link">HOME</a>
+                        <a href="index.html#play" class="nav-link">PLAY</a>
                         <a href="#" class="nav-link">SKINS</a>
                         <a href="#" class="nav-link">LEADERBOARD</a>
+                        <a href="about.html" class="nav-link">ABOUT</a>
+</div>
                 </div>
             </nav>
         `;

index.html CHANGED Viewed

@@ -23,8 +23,12 @@
             <button id="play-btn" class="wormate-btn">PLAY</button>
         </div>
     </div>
-    <game-footer></game-footer>
     <script src="script.js"></script>
 </body>
 </html>

             <button id="play-btn" class="wormate-btn">PLAY</button>
         </div>
     </div>
+    <section id="about-preview" class="info-section">
+        <h2>About the Game</h2>
+        <p>Grow your worm, compete with others, and dominate the leaderboard!</p>
+        <a href="about.html" class="info-link">Learn More →</a>
+    </section>
+<game-footer></game-footer>
     <script src="script.js"></script>
 </body>
 </html>

style.css CHANGED Viewed

@@ -10,6 +10,59 @@ body {
     flex-direction: column;
 }
 #game-container {
     flex: 1;
     position: relative;
@@ -84,6 +137,33 @@ body {
     background: #ff5252;
     transform: translate(-50%, -50%) scale(1.05);
 }
 /* Animations */
 @keyframes pulse {
@@ -91,7 +171,6 @@ body {
     50% { transform: scale(1.1); }
     100% { transform: scale(1); }
 }
 .pulse {
     animation: pulse 1s infinite;
 }

     flex-direction: column;
 }
+.about-container {
+    max-width: 1200px;
+    margin: 2rem auto;
+    padding: 1rem;
+    flex: 1;
+}
+.about-section {
+    margin-bottom: 3rem;
+}
+.about-section h2 {
+    color: #ff6b6b;
+    margin-bottom: 1.5rem;
+}
+.about-section p {
+    line-height: 1.6;
+    margin-bottom: 1rem;
+}
+.game-instructions {
+    padding-left: 1.5rem;
+}
+.game-instructions li {
+    margin-bottom: 0.8rem;
+}
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+.feature-card {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.feature-card h3 {
+    color: #69f0ae;
+    margin-bottom: 0.5rem;
+}
+.about-section img {
+    max-width: 100%;
+    border-radius: 8px;
+    margin-top: 1rem;
+    border: 2px solid #ff6b6b;
+}
 #game-container {
     flex: 1;
     position: relative;
     background: #ff5252;
     transform: translate(-50%, -50%) scale(1.05);
 }
+/* Info Sections */
+.info-section {
+    max-width: 1200px;
+    margin: 2rem auto;
+    padding: 2rem;
+    text-align: center;
+    background: rgba(255,255,255,0.05);
+    border-radius: 8px;
+}
+.info-section h2 {
+    color: #ff6b6b;
+    margin-bottom: 1rem;
+}
+.info-link {
+    display: inline-block;
+    margin-top: 1rem;
+    color: #69f0ae;
+    text-decoration: none;
+    transition: all 0.3s;
+}
+.info-link:hover {
+    color: #ff6b6b;
+    transform: translateX(5px);
+}
 /* Animations */
 @keyframes pulse {
     50% { transform: scale(1.1); }
     100% { transform: scale(1); }
 }
 .pulse {
     animation: pulse 1s infinite;
 }