initial commit

EsraaAlzoghby · Jan 8, 2025 · 160e817 · 160e817
commit 160e817
Show file tree

Hide file tree

Showing 33 changed files with 2,983 additions and 0 deletions.
diff --git a/css/all.min.css b/css/all.min.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/home.css b/css/home.css
@@ -0,0 +1,17 @@
+.FormContainer {
+  background-image: url("../images/home-bg.jpg");
+  background-size: 100% 50%;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+}
+.nav-link {
+  transition: all 0.3s ease;
+}
+.nav-link:hover {
+  text-decoration: none; 
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
+  transform: scale(1.05); 
+}
+.cardShow{
+  background-color: #7767F5;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,46 @@
+.FormContainer {
+  background-image: url("../images/home-bg.jpg");
+  background-size: 100% 50%;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+}
+*{
+    font-family: "Lustria", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+.Form {
+  backdrop-filter: blur(5px);
+}
+.display__Products img {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+}
+
+#tableBody tr {
+  transform: translateY(10px);
+  animation: rowsAnimation forwards 0.5s;
+  opacity: 0;
+}
+
+@keyframes rowsAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.nav-link {
+  transition: all 0.3s ease;
+}
+
+.nav-link:hover {
+  text-decoration: none; 
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  transform: scale(1.05); 
+}
+
diff --git a/images/1.jpg b/images/1.jpg
diff --git a/images/2.jpg b/images/2.jpg
diff --git a/images/3.jpg b/images/3.jpg
diff --git a/images/4.jpg b/images/4.jpg
diff --git a/images/6.jpg b/images/6.jpg
diff --git a/images/8.jpg b/images/8.jpg
diff --git a/images/employee-1.jpg b/images/employee-1.jpg
diff --git a/images/employee-2.jpg b/images/employee-2.jpg
diff --git a/images/employee-3.jpg b/images/employee-3.jpg
diff --git a/images/home-bg.jpg b/images/home-bg.jpg
diff --git a/images/login.svg b/images/login.svg
diff --git a/images/mini-market-logo.png b/images/mini-market-logo.png
diff --git a/images/signup.svg b/images/signup.svg
diff --git a/images/team-bg.jpg b/images/team-bg.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mini - Market</title>
+     <!-- fonts google-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Big+Shoulders+Text:wght@100..900&family=Caveat:wght@400..700&family=Cedarville+Cursive&family=Fredericka+the+Great&family=Ga+Maamli&family=Lustria&family=Playwrite+AU+SA:wght@100..400&family=Playwrite+AU+TAS+Guides&family=Playwrite+DE+Grund+Guides&family=Playwrite+US+Modern+Guides&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Shadows+Into+Light&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet"
+>
+        <!-- logo -->
+        <link rel="shortcut icon" href="images/mini-market-logo.png" type="image/x-icon" />
+        <!-- Bootstrap -->
+        <link rel="stylesheet" href="css/bootstrap.min.css">
+        <!-- font awesome -->
+        <link rel="stylesheet" href="css/all.min.css" />
+        <!-- Main Styles -->
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel="stylesheet" href="css/home-style.css" />
+
+
+</head>
+
+<body style="background-color: #FEB5B1; ">
+  <header class="FormContainer">
+    <nav class="navbar navbar-expand-sm navbar-light z-3" style="background-color:rgba(254,181,177);">
+      <div class="container">
+        <img src="images/mini-market-logo.png" alt="" style="width: 30px; height: 30px; object-fit: cover;" >
+        <a class="navbar-brand ps-1 fs-5" href="./index.html">Mini Market</a>
+        <button
+          class="navbar-toggler d-lg-none"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#collapsibleNavId"
+          aria-controls="collapsibleNavId"
+          aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="collapsibleNavId">
+          <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
+            <li class="nav-item">
+              <a class="nav-link fs-6" href="./pages/products.html">Products</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <section class="my-5">
+      <div class="container">
+        <h1 class="text-white">
+          <img class="align-middle" width="50px" src="images/mini-market-logo.png" alt="" />
+          <span class="align-middle" id="textOne" style="color: #604cf8;">Welcome to Mini - Market</span>
+        </h1>
+        <h2 class="text-white my-4">
+          <span class=" rounded-3 px-4 text-white p-2" style="background-color: #604cf8;">All Products: [ <span id="counter"></span> ]</span>
+        </h2>
+        <div class="row g-4" id="productContainer"></div>
+      </div>
+    </section>
+  </header>
+
+
+    <!-- Bootstrap -->
+<script src="js/bootstrap.bundle.min.js"></script>
+    <!-- script.js -->
+<script src="js/script.js"></script>
+</body>
+</html>
diff --git a/js/all.min.js b/js/all.min.js
diff --git a/js/auth.js b/js/auth.js
@@ -0,0 +1,100 @@
+/** Helper Functions */
+function validateEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+
+  function validatePassword(password) {
+    return password.length >= 6; // Minimum password length
+  }
+
+  /** Handle Sign Up */
+  const signUpForm = document.getElementById("signUpForm");
+  if (signUpForm) {
+    signUpForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+
+      const name = document.getElementById("signUpName").value.trim();
+      const email = document.getElementById("signUpEmail").value.trim();
+      const password = document.getElementById("signUpPassword").value.trim();
+
+      // Validation
+      if (!name || !email || !password) {
+        alert("All fields are required!");
+        return;
+      }
+      if (!validateEmail(email)) {
+        alert("Please enter a valid email address!");
+        return;
+      }
+      if (!validatePassword(password)) {
+        alert("Password must be at least 6 characters long!");
+        return;
+      }
+
+      let users = JSON.parse(localStorage.getItem("users")) || [];
+      if (users.some((user) => user.email === email)) {
+        alert("User already exists with this email!");
+      } else {
+        users.push({ name, email, password });
+        localStorage.setItem("users", JSON.stringify(users));
+        alert("Sign Up Successful! You can now sign in.");
+        signUpForm.reset();
+        window.location.href = "./sign-in.html"; // Redirect to Sign In page
+      }
+    });
+  }
+
+  /** Handle Sign In */
+  const signInForm = document.getElementById("signInForm");
+  if (signInForm) {
+    signInForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+
+      const email = document.getElementById("signInEmail").value.trim();
+      const password = document.getElementById("signInPassword").value.trim();
+
+      // Validation
+      if (!email || !password) {
+        alert("All fields are required!");
+        return;
+      }
+      if (!validateEmail(email)) {
+        alert("Please enter a valid email address!");
+        return;
+      }
+
+      let users = JSON.parse(localStorage.getItem("users")) || [];
+      const user = users.find((user) => user.email === email && user.password === password);
+
+      if (user) {
+        alert(`Welcome back, ${user.name}!`);
+        localStorage.setItem("currentUser", JSON.stringify(user));
+        window.location.href = "../index.html"; // Redirect to Home page
+      } else {
+        alert("Invalid email or password!");
+      }
+    });
+  }
+
+  /** Check Authentication on Protected Pages */
+  function checkAuthentication() {
+    const currentUser = localStorage.getItem("currentUser");
+    if (!currentUser) {
+      alert("You must be logged in to access this page!");
+      window.location.href = "./sign-in.html"; // Redirect to Sign In page
+    }
+  }
+
+  /** Example: Run checkAuthentication on protected pages */
+  if (window.location.pathname.includes("index.html")) {
+    checkAuthentication();
+  }
+
+  /** Handle Logout */
+  function logout() {
+    localStorage.removeItem("currentUser");
+    alert("You have been logged out!");
+    window.location.href = "./sign-in.html"; // Redirect to Sign In page
+  }
+
diff --git a/js/bootstrap.bundle.min.js b/js/bootstrap.bundle.min.js