Games page Made

GreaterThan000 · Sep 15, 2024 · 302012a · 302012a
1 parent 162e0ee
commit 302012a
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -17,8 +17,8 @@ <h1>Controls to Remember</h1>
                 <div>
                     <nav>
                         <ul>
-                            <li><a href="#">Home</a></li>
-                            <li><a href="#">Games</a></li>
+                            <li><div class="current-page">Home</div></li>
+                            <li><a href="pages/game_index.html">Games</a></li>
                         </ul>
                     </nav>
                     <div class="autocomplete">

diff --git a/pages/game_index.html b/pages/game_index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Controls to Remember</title>
+    <link rel="stylesheet" href="../styles/main.css">
+    <link rel="stylesheet" href="../styles/header.css">
+</head>
+
+<body>
+    <header>
+        <div class="header-container">
+            <h1>Controls to Remember</h1>
+            <div class="header-right-box">
+                <div>
+                    <nav>
+                        <ul>
+                            <li><a href="../index.html">Home</a></li>
+                            <li>
+                                <div class="current-page">Games</div>
+                            </li>
+                        </ul>
+                    </nav>
+                    <div class="autocomplete">
+                        <input type="text" id="search-game" placeholder="Search games..." />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+
+    <main>
+        <div id="main_content" class="main-container">
+            <a class="game-index-anchor" href="../index.html?game=minecraft">
+                <div class="game-index-item"><img class="game-title" src="../images/games/minecraft/minecraft_logo.png"
+                        alt="Minecraft Logo">
+
+                    <p><strong>Minecraft</strong> is a popular sandbox game known for its open-world creativity and
+                        survival
+                        aspects. </p>
+                </div>
+            </a>
+        </div>
+    </main>
+    <footer>
+        <div class="container">
+            <p>&copy; 2024 Spideys. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <script src="../scripts/content_manager.js"></script>
+    <script src="../scripts/main.js"></script>
+</body>
+
+</html>
diff --git a/scripts/main.js b/scripts/main.js
@@ -1,17 +1,26 @@
 // scripts/main.js
 const games = [
     //["Suggestion Text","Article Name"]
-    ["Minecraft","minecraft"],
-    
+    ["Minecraft", "minecraft"],
+
 ];
 
 
 
 
 document.addEventListener('DOMContentLoaded', function () {
-   get_article_content("minecraft", document.getElementById("main_content")).then(() => {
+    const params = new URLSearchParams(window.location.search); // Get URLSearchParams object from the query string
+    const gameParam = params.get('game'); // Get the value of 'user' parameter
+
+    if (gameParam) {
+        get_article_content(gameParam, document.getElementById("main_content")).then(() => {
+            active_controls();
+        });
+    }
+    else {
         active_controls();
-   });
+    }
+
 });
 
 function active_controls() {

diff --git a/styles/header.css b/styles/header.css
@@ -97,6 +97,12 @@ nav ul li a {
     margin-right: 20px;
 }
 
+.current-page {
+    color: #61dafb;
+    text-decoration: none;
+    margin-right: 20px;
+}
+
 nav ul li a:hover {
     text-decoration: underline;
 }

diff --git a/styles/main.css b/styles/main.css
@@ -187,6 +187,21 @@ ul li {
     font-size: 24px;
     margin-right: 10px;
 }
+
+.game-index-anchor{
+    text-decoration: none;
+    color:#000000 ;
+}
+.game-index-item{
+    padding: 20px;
+    color:#000000 ;
+    border: #000000;
+    border-width: 7px;
+    border-style: outset;
+    background-color: #dddddd;
+    font-size: 14pt;
+}
+
 @media screen and (max-width: 768px) {
     .gallery {
         display: flex;           /* Use Flexbox for layout */