bratergit · sshah135 · Dec 9, 2023 · Dec 9, 2023
diff --git a/dirs/games_portal/html/games.html b/dirs/games_portal/html/games.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Games Portal</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="games.html">Games</a></li>
+        </ul>
+    </nav>
+    <div class="game-list">
+        <div class="game">
+            <img src="../images/game1.jpg" alt="Game 1">
+            <h3>Game 1</h3>
+            <p>Description of Game 1.</p>
+            <br>
+           <p> BATTLEGROUNDS for free. Land on strategic locations, loot weapons and supplies, and survive to become the last team standing across various, diverse Battlegrounds. Squad up and join the Battlegrounds for the original Battle Royale experience that only PUBG: BATTLEGROUNDS can offer.
+
+6/10 (2.3M)
+Publishers: KRAFTON, Inc.
+Developer: KRAFTON, Inc.
+ReleaseData: Dec 21, 2017</p>
+        </div>
+        <div class="game">
+            <img src="../images/game2.jpg" alt="Game 1">
+            <h3>Game 2</h3>
+            <p>Description of Game 2.</p>
+            <br>
+           <p> Ludo ( / ˈljuːdoʊ /; from Latin ludo ' [I] play') is a strategy board game for two to four [a] players, in which the players race their four tokens from start to finish according to the rolls of a single die. Like other cross and circle games, Ludo is derived from the Indian game Pachisi.</p>
+        </div>
+        <div class="game">
+            <img src="../images/game3.jpg" alt="Game 1">
+            <h3>Game 3</h3>
+            <p>Description of Game 3.</p>
+            <br>
+           <p> Battlegrounds (previously known as PlayerUnknown's Battlegrounds) is a battle royale game developed by PUBG Studios and published by Krafton.</p>
+        </div>
+    </div>
+    <script src="js/javascript.js"></script>
+</body>
+</html>
diff --git a/dirs/games_portal/html/index.html b/dirs/games_portal/html/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Games Portal</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="news.html">News</a></li>
+            <li><a href="games.html">Games</a></li>
+            <li><a href="reviews.html">Reviews</a></li>
+            <li><a href="contact.html">Contact</a></li>
+            </ul>
+            </nav>
+
+    <div class="card" onmouseover="highlightCard(this)" onmouseout="unhighlightCard(this)">
+        <h2>Last News</h2>
+        <img src="images/game1.jpg" alt="Game 1">
+        <img src="images/game2.jpg" alt="Game 2">
+        <img src="images/game3.jpg" alt="Game 3">
+    </div>
+    <script src="js/javascript.js"></script>
+</body>
+</html>
diff --git a/dirs/games_portal/index.html → dirs/games_portal/html/location.html b/dirs/games_portal/index.html → dirs/games_portal/html/location.html
@@ -5,14 +5,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Games Portal</title>
     <link rel="stylesheet" href="css/style.css">
+
+    <script src="js/location.js" defer></script>
+
+
+    <script src="js/javascript.js"></script>
 </head>
 <body>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="news.html">News</a></li>
+            <li><a href="games.html">Games</a></li>
+            <li><a href="reviews.html">Reviews</a></li>
+            <li><a href="contact.html">Contact</a></li>
+            </ul>
+            </nav>
+
     <div class="card" onmouseover="highlightCard(this)" onmouseout="unhighlightCard(this)">
         <h2>Last News</h2>
         <img src="img/game1.jpg" alt="Game 1">
         <img src="img/game2.jpg" alt="Game 2">
         <img src="img/game3.jpg" alt="Game 3">
     </div>
-    <script src="js/javascript.js"></script>
 </body>
 </html>
diff --git a/dirs/games_portal/html/news.html b/dirs/games_portal/html/news.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Your existing head content -->
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="games.html">Games</a></li>
+            <li><a href="reviews.html">Reviews</a></li>
+            <li><a href="news.html">News</a></li>
+
+        </ul>
+    </nav>
+    <div class="news-list">
+
+        <div class="news-item">
+            <h3>News 1</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+        <div class="news-item">
+            <h3>News 2</h3>
+            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </div>
+        <!-- Add more news items as needed -->
+    </div>
+    <script src="js/javascript.js"></script>
+</body>
+</html>
diff --git a/dirs/games_portal/html/reviews.html b/dirs/games_portal/html/reviews.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Games Portal</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="games.html">Games</a></li>
+            <li><a href="reviews.html">Reviews</a></li>
+
+        </ul>
+    </nav>
+    <div class="review-list">
+        <!-- Static reviews will be added here -->
+        <div class="review">
+            <h3>Review 1</h3>
+            <p>PUBG grows with our users and the great community so we have many channels to provide suggestions and feedback about the game. Along with our support center here, you can also voice your opinions on our official Twitter, Facebook, Discord and other community channels</p>
+        </div>
+        <div class="review">
+            <h3>Review 2</h3>
+            <p>Ludo King Game Review Ludo King has become a trending game now, due to the lock down. Everyone are at home, and it’s interesting to note that things which were not so much of concern or interest to people are now becoming popular. </p>
+        </div>
+        <div class="review">
+            <h3>Review 2</h3>
+            <p>The Star Ocean franchise has been an underappreciated one within the Japanese RPG genre. Despite being around for more than 25 years, it's never had the breakout success that elevated it to new heights, as something like Persona or Tales have had in more recent years. Many longtime fans consider 1999's Star Ocean: The Second Story to be the best entry, and now Square Enix has remade it for modern consoles. Star Ocean: The Second Story R is a remake that manages to not only have the retro feel of its older PS1 and PSP incarnations, but also make it feel fresh with new battle mechanics, as well as audio and visuals updates. It may not be the big break that’ll finally make the Star Ocean franchise explode in popularity, but it’s a fine Japanese RPG on its own terms.</p>
+        </div>
+
+    </div>
+    <script src="js/javascript.js"></script>
+</body>
+</html>
diff --git a/dirs/games_portal/images/game1.jpg b/dirs/games_portal/images/game1.jpg
diff --git a/dirs/games_portal/images/game2.jpg b/dirs/games_portal/images/game2.jpg
diff --git a/dirs/games_portal/images/game3.jpg b/dirs/games_portal/images/game3.jpg
diff --git a/dirs/games_portal/js/javascript.js b/dirs/games_portal/js/javascript.js
@@ -1,7 +1,67 @@
+// Function to highlight the active navigation link
+function highlightNavLink(pageName) {
+  const navLinks = document.querySelectorAll('nav a');
+  navLinks.forEach(link => {
+    if (link.getAttribute('href') === pageName) {
+      link.classList.add('active');
+    } else {
+      link.classList.remove('active');
+    }
+  });
+}
+
+// Function to handle common card highlighting
 function highlightCard(element) {
   element.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
 }
 
 function unhighlightCard(element) {
   element.style.boxShadow = "none";
 }
+// Function to handle page-specific tasks
+function handlePageTasks(locationData) {
+  const currentPath = window.location.pathname;
+
+  // Highlight the active navigation link based on the current page
+  highlightNavLink(currentPath);
+
+  if (locationData) {
+    personalizeContentWithLocation(locationData);
+  }
+}
+
+// Call the function to handle page-specific tasks
+handlePageTasks();
+
+// Function to populate game listings
+function populateGameList() {
+  const gameList = document.querySelector('.game-list');
+
+    const games = [
+    { title: 'Game 1', description: 'Description of Game 1.', image: 'img/game1.jpg' },
+    { title: 'Game 2', description: 'Description of Game 2.', image: 'img/game2.jpg' },
+    { title: 'Game 3', description: 'Description of Game 3.', image: 'img/game3.jpg' },
+  ];
+
+  games.forEach(game => {
+    const gameElement = document.createElement('div');
+    gameElement.classList.add('game');
+    gameElement.innerHTML = `
+      <img src="${game.image}" alt="${game.title}">
+      <h3>${game.title}</h3>
+      <p>${game.description}</p>
+    `;
+    gameList.appendChild(gameElement);
+  });
+}
+
+// Function to handle page-specific tasks
+function handlePageTasks() {
+  const currentPath = window.location.pathname;
+
+  highlightNavLink(currentPath);
+
+}
+
+// Call the function to handle page-specific tasks
+handlePageTasks();
diff --git a/dirs/games_portal/js/location.js b/dirs/games_portal/js/location.js
@@ -0,0 +1,60 @@
+// location.js
+
+// Function to fetch user's IP address using ipify API
+async function getUserIPAddress() {
+    try {
+      const response = await fetch('https://api.ipify.org?format=json');
+      const data = await response.json();
+      return data.ip;
+    } catch (error) {
+      console.error('Error fetching IP address:', error);
+      return null;
+    }
+  }
+
+  // Function to fetch user's geographical coordinates using navigator.geolocation API
+  async function getUserGeolocation() {
+    return new Promise((resolve, reject) => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+          position => {
+            const { latitude, longitude } = position.coords;
+            resolve({ latitude, longitude });
+          },
+          error => {
+            console.error('Error getting geolocation:', error);
+            reject(error);
+          }
+        );
+      } else {
+        console.error('Geolocation is not supported by this browser.');
+        reject('Geolocation not supported');
+      }
+    });
+  }
+
+  // Function to handle the entire process of fetching IP and geolocation
+  async function getUserLocation() {
+    try {
+      const ipAddress = await getUserIPAddress();
+      const geolocation = await getUserGeolocation();
+
+      if (ipAddress && geolocation) {
+        console.log('User IP Address:', ipAddress);
+        console.log('User Geographical Location:', geolocation);
+
+      } else {
+        console.error('Unable to fetch user location.');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  }
+
+  // Call the function to initiate the process
+getUserLocation().then(locationData => {
+    // After getting the location, call handlePageTasks with location data
+    handlePageTasks(locationData);
+  });
+
+