Upload project

Zohreh-sa · Dec 3, 2024 · 297fcb7 · 297fcb7
1 parent f0e5da8
commit 297fcb7
Show file tree

Hide file tree

Showing 66 changed files with 890 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/Images/AI/ai-gen (1).jpg b/Images/AI/ai-gen (1).jpg
diff --git a/Images/AI/ai-gen (10).jpg b/Images/AI/ai-gen (10).jpg
diff --git a/Images/AI/ai-gen (2).jpg b/Images/AI/ai-gen (2).jpg
diff --git a/Images/AI/ai-gen (3).jpg b/Images/AI/ai-gen (3).jpg
diff --git a/Images/AI/ai-gen (4).jpg b/Images/AI/ai-gen (4).jpg
diff --git a/Images/AI/ai-gen (5).jpg b/Images/AI/ai-gen (5).jpg
diff --git a/Images/AI/ai-gen (6).jpg b/Images/AI/ai-gen (6).jpg
diff --git a/Images/AI/ai-gen (7).jpg b/Images/AI/ai-gen (7).jpg
diff --git a/Images/AI/ai-gen (8).jpg b/Images/AI/ai-gen (8).jpg
diff --git a/Images/AI/ai-gen (9).jpg b/Images/AI/ai-gen (9).jpg
diff --git a/Images/Animals/Birds.jpg b/Images/Animals/Birds.jpg
diff --git a/Images/Animals/Elephant.jpg b/Images/Animals/Elephant.jpg
diff --git a/Images/Animals/Polar bear.jpg b/Images/Animals/Polar bear.jpg
diff --git a/Images/Animals/Tiger.jpg b/Images/Animals/Tiger.jpg
diff --git a/Images/Animals/bird.jpg b/Images/Animals/bird.jpg
diff --git a/Images/Animals/deer.jpg b/Images/Animals/deer.jpg
diff --git a/Images/Animals/eagle.jpg b/Images/Animals/eagle.jpg
diff --git a/Images/Animals/fish.jpg b/Images/Animals/fish.jpg
diff --git a/Images/Animals/fox.jpg b/Images/Animals/fox.jpg
diff --git a/Images/Animals/monkey.jpg b/Images/Animals/monkey.jpg
diff --git a/Images/Landscape/beachLandscape.jpg b/Images/Landscape/beachLandscape.jpg
diff --git a/Images/Landscape/cityLandscape.jpg b/Images/Landscape/cityLandscape.jpg
diff --git a/Images/Landscape/forestLandscape.jpg b/Images/Landscape/forestLandscape.jpg
diff --git a/Images/Landscape/frozenSeaLandscape.jpg b/Images/Landscape/frozenSeaLandscape.jpg
diff --git a/Images/Landscape/landscape1.jpg b/Images/Landscape/landscape1.jpg
diff --git a/Images/Landscape/portLandscape.jpg b/Images/Landscape/portLandscape.jpg
diff --git a/Images/Landscape/snowyForestLandscape.jpg b/Images/Landscape/snowyForestLandscape.jpg
diff --git a/Images/Landscape/winterLandscape.jpg b/Images/Landscape/winterLandscape.jpg
diff --git a/Images/Night/night1.jpg b/Images/Night/night1.jpg
diff --git a/Images/Night/night2.jpg b/Images/Night/night2.jpg
diff --git a/Images/Night/night3.jpg b/Images/Night/night3.jpg
diff --git a/Images/Night/night4.jpg b/Images/Night/night4.jpg
diff --git a/Images/Night/night5.jpg b/Images/Night/night5.jpg
diff --git a/Images/Night/night6.jpg b/Images/Night/night6.jpg
diff --git a/Images/Night/night7.jpg b/Images/Night/night7.jpg
diff --git a/Images/People/People (1).jpg b/Images/People/People (1).jpg
diff --git a/Images/People/People (2).jpg b/Images/People/People (2).jpg
diff --git a/Images/People/People (3).jpg b/Images/People/People (3).jpg
diff --git a/Images/People/People (4).jpg b/Images/People/People (4).jpg
diff --git a/Images/People/People (5).jpg b/Images/People/People (5).jpg
diff --git a/Images/People/people.jpg b/Images/People/people.jpg
diff --git a/Images/foodAndDrink/f.a.d (1).jpg b/Images/foodAndDrink/f.a.d (1).jpg
diff --git a/Images/foodAndDrink/f.a.d (2).jpg b/Images/foodAndDrink/f.a.d (2).jpg
diff --git a/Images/foodAndDrink/f.a.d (3).jpg b/Images/foodAndDrink/f.a.d (3).jpg
diff --git a/Images/foodAndDrink/f.a.d (4).jpg b/Images/foodAndDrink/f.a.d (4).jpg
diff --git a/Images/foodAndDrink/f.a.d (5).jpg b/Images/foodAndDrink/f.a.d (5).jpg
diff --git a/Images/logo.svg b/Images/logo.svg
diff --git a/Images/profileAvatar.eps b/Images/profileAvatar.eps
diff --git a/Images/profileAvatar.jpg b/Images/profileAvatar.jpg
diff --git a/Images/wallpaper/WP (1).jpg b/Images/wallpaper/WP (1).jpg
diff --git a/Images/wallpaper/WP (10).jpg b/Images/wallpaper/WP (10).jpg
diff --git a/Images/wallpaper/WP (2).jpg b/Images/wallpaper/WP (2).jpg
diff --git a/Images/wallpaper/WP (3).jpg b/Images/wallpaper/WP (3).jpg
diff --git a/Images/wallpaper/WP (4).jpg b/Images/wallpaper/WP (4).jpg
diff --git a/Images/wallpaper/WP (5).jpg b/Images/wallpaper/WP (5).jpg
diff --git a/Images/wallpaper/WP (6).jpg b/Images/wallpaper/WP (6).jpg
diff --git a/Images/wallpaper/WP (7).jpg b/Images/wallpaper/WP (7).jpg
diff --git a/Images/wallpaper/WP (8).jpg b/Images/wallpaper/WP (8).jpg
diff --git a/Images/wallpaper/WP (9).jpg b/Images/wallpaper/WP (9).jpg
diff --git a/README.md b/README.md
@@ -0,0 +1,20 @@
+This project features an interactive online photo gallery inspired by the dynamic layouts of popular platforms like Pinterest, Unsplash, Behance, and Dribbble. The gallery uses a Masonry layout, chosen for its ability to elegantly organize photos of varying sizes, creating a visually appealing, responsive, and space-efficient design. This layout enhances the user experience through its artistic arrangement, adaptability across different devices, and seamless integration with interactive features like hover effects and lightbox pop-ups.
+
+Future enhancements include the integration of a database, enabling user sign-ups for personalized experiences and additional functionality.
+
+Click on link below to see the final look.
+
+https://zohreh-sa.github.io/PhotoGallery-finalProject-RediSchool/
+
+
+laptop view:
+![laptop view](https://github.com/user-attachments/assets/3ad115e2-5787-40c7-9db7-bdfeda3dd756)
+
+
+Login view
+![Login view](https://github.com/user-attachments/assets/aea67581-2dd8-4404-846e-1996b1971669)
+
+
+
+tablet view
+![tablet view](https://github.com/user-attachments/assets/cd521637-7c6f-47f7-89ed-747132ddb5ee)
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Final Project -FE- Fall2024- ReDi School</title>
+    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+
+<body>
+    <header class="baseHead">
+        <div class="header-div">
+            <a aria-current="page" class="lo-design" title="Home-Pictalbum" href="./index.html">
+                <img src="./Images/logo.svg" alt="logo" class="svg-logo" width="70">
+            </a>
+
+            <div class="search-div">
+                <form class="search-container" method="get" role="search">
+
+                    <input type="text" class="search-input" name="searchBox" autocomplete="off" autocapitalize="off"
+                        autocorrect="off" placeholder="   search photos ...">
+                    <button id="search-button" class="search-button" class="search-button" type="submit">
+                        <i class="fas fa-search"></i>
+                    </button>
+
+                </form>
+            </div>
+            <div class="subImage">
+                <a class="submit-image">Submit an image</a>
+            </div>
+            <a class="logIn" title="Login-button" href="./login.html">Login</a>
+            <button class="toggle">&#9776;</button>
+
+            <div class="toggle-items">
+                <a class="about-us" href="#">About us </a>
+                <a class="contact-us" href="#"> Contact us</a>
+
+            </div>
+        </div>
+
+    </header>
+
+    <main>
+        <div class="catListContainer">
+            <nav id="tabs">
+                <div class="sbe"></div>
+                <div class="sbe"></div>
+                <a href="#" data-category="all" class="tab">All photos</a>
+                <a href="#" data-category="AI" class="tab">AI generated</a>
+                <a href="#" data-category="Animals" class="tab">Animals</a>
+                <a href="#" data-category="foodAndDrink" class="tab">Food & Drink</a>
+                <a href="#" data-category="Landscape" class="tab">Landscape</a>
+                <a href="#" data-category="Night" class="tab">Night</a>
+                <a href="#" data-category="People" class="tab">People</a>
+                <a href="#" data-category="wallpaper" class="tab">Wallpapers</a>
+                <div class="sbe"></div>
+                <div class="sbe"></div>
+            </nav>
+        </div>
+        <div class="photo-gallery" id="photo-gallery"></div>
+
+
+
+    </main>
+
+
+
+
+    <footer>
+        <div id="foflex">
+            <div class="fNote">&copy;Redi School- Fall semester- Frontend development</div>
+        </div>
+    </footer>
+
+    <!--Image loading layout  -->
+    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
+    <!-- Masonry Layout -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
+
+    <script src="./scripts.js"></script>
+</body>
+
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body>
+
+    <header class="baseHead">
+        <div class="header-div">
+            <a aria-current="page" class="lo-design" title="Home-Pictalbum" href="./index.html">
+                <img src="./Images/logo.svg" alt="logo" class="svg-logo" width="70">
+            </a>
+
+            <div class="search-div">
+                <form class="search-container" method="get" role="search">
+
+                    <input type="text" class="search-input" name="searchBox" autocomplete="off" autocapitalize="off"
+                        autocorrect="off" placeholder="   search photos ...">
+                    <button id="search-button" class="search-button" class="search-button" type="submit">
+                        <i class="fas fa-search"></i>
+                    </button>
+
+                </form>
+            </div>
+            <a class="submit-image">Submit an image</a>
+
+            <a class="logIn" title="Login-button" href="./login.html">Login</a>
+
+        </div>
+
+    </header>
+    <!--  login container -->
+
+
+    <div data-testid="login-route" class="l-route">
+        <div class="sfn">
+            <div class="gmb"><!-- login member -->
+                <div class="wlog">
+                    <h1 class="l-h1">Login</h1>
+                    <P class="l-w">Welcome back</P>
+                    <div class="span-box">
+                        <span id="log-alert"></span>
+                    </div>
+
+                </div>
+
+            </div>
+            <form class="log-form" method="post" id="loginForm"> <!-- flex -->
+                <label class="uil">Email
+                    <div class="uinf" placeholder=""></div>
+                    <input type="email" name="email" class="w800b" id="email" required>
+                </label>
+                <label class="uil">
+                    <div class="pass">
+                        Password
+                        <a href="/" class="fmp">Forget your password?</a>
+                    </div>
+                    <div class="uinf" placeholder=""></div>
+                    <input type="password" name="password" class="w800b" id="password" autocomplete="off" required>
+
+                </label>
+
+                <button class="btn-login" type="submit" value="login">Login</button>
+
+
+            </form>
+            <div class="nasi">
+                <p>
+                    Don't have an account?<a href="">Join</a>
+                </p>
+            </div>
+        </div>
+
+    </div>
+
+
+
+
+
+
+    <script src="./login.js"></script>
+
+</body>
+
+</html>
diff --git a/login.js b/login.js
@@ -0,0 +1,53 @@
+// console.log("Hello user!");
+
+// Array of users (add more users as needed)
+const users = [
+    {
+        email: "[email protected]",
+        username: "Zohreh",
+        password: "123456"
+    }
+];
+
+
+const span = document.getElementById("log-alert")
+// Add an event listener for the form submission
+document.getElementById("loginForm").addEventListener("submit", function (event) {
+    event.preventDefault(); // Prevent the default form submission behavior
+
+    // Get email and password values
+    const email = document.getElementById("email").value.trim(); /* Trim used to remove white spaces */
+    const password = document.getElementById("password").value.trim();
+
+    // Validation checks
+    if (email === "" || password === "") {
+        alert("Both email and password fields are required.");
+        return false;
+    }
+
+    // Validate email format using a regular expression
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+        span.innerHTML = ("Please enter a valid email address.");
+        return;
+    }
+
+    // Check if the user exists in the array
+    const user = users.find(user => user.email === email && user.password === password);
+
+
+    if (user) {
+
+        //save user's data in localStorage
+        localStorage.setItem("loggedInUser", JSON.stringify(user));
+
+        // Redirect to index.html
+        window.location.href = "./index.html";
+
+    } else {
+
+
+        span.innerHTML = ("Invalid email or password. Please try again.");
+    }
+});
+