ok i see you

2025-03-12 04:07:16 +00:00
parent 36dd4a436e
commit 3f2a4ec0d3
6 changed files with 138 additions and 4 deletions
@@ -4,6 +4,17 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/WebGames-master/WebGames-master/main.css">
+    <style>
+        .one {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .game {
+            flex: 1 1 150px;
+            text-align: center;
+        }
+    </style>
    <script>
        function filterGames() {
            const searchInput = document.getElementById('searchBar').value.toLowerCase();
@@ -22,7 +33,7 @@
 </head>
 <center>
 <body>
-    <input type="text" id="searchBar" onkeyup="filterGames()" placeholder="Search for games...">
+    <input type="text" id="searchBar" onkeyup="filterGames()" placeholder="Search For Games...">
    <div class="one">
        <div class="two"></div>
        <div class="game">
@@ -24,11 +24,9 @@ div.one {
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
-  text-align: left;
  position: absolute;
-  z-index: 1;
 }

 a:hover {
-  background-color: aquamarine;
+  border-bottom: 8px solid aquamarine;
 }
@@ -0,0 +1,43 @@
+document.getElementById('loginForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    const username = document.getElementById('loginUsername').value;
+    const password = document.getElementById('loginPassword').value;
+
+    fetch('/login', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ username, password })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert('Login successful');
+        } else {
+            alert('Login failed: ' + data.message);
+        }
+    });
+});
+
+document.getElementById('signUpForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    const username = document.getElementById('signUpUsername').value;
+    const password = document.getElementById('signUpPassword').value;
+
+    fetch('/signup', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ username, password })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert('Sign up successful');
+        } else {
+            alert('Sign up failed: ' + data.message);
+        }
+    });
+});
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login and Sign Up</title>
+    <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Login</h1>
+        <form id="loginForm">
+            <label for="loginUsername">Username:</label>
+            <input type="text" id="loginUsername" required>
+            <label for="loginPassword">Password:</label>
+            <input type="password" id="loginPassword" required>
+            <button type="submit">Login</button>
+        </form>
+
+        <h1>Sign Up</h1>
+        <form id="signUpForm">
+            <label for="signUpUsername">Username:</label>
+            <input type="text" id="signUpUsername" required>
+            <label for="signUpPassword">Password:</label>
+            <input type="password" id="signUpPassword" required>
+            <button type="submit">Sign Up</button>
+        </form>
+    </div>
+    <script src="./app.js"></script>
+</body>
+</html>
@@ -0,0 +1,51 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+h1 {
+    text-align: center;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+label {
+    margin-top: 10px;
+}
+
+input {
+    padding: 8px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    margin-top: 15px;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007BFF;
+    color: white;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}