diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/Images/AI/ai-gen (1).jpg b/Images/AI/ai-gen (1).jpg new file mode 100644 index 0000000..6f26235 Binary files /dev/null and b/Images/AI/ai-gen (1).jpg differ diff --git a/Images/AI/ai-gen (10).jpg b/Images/AI/ai-gen (10).jpg new file mode 100644 index 0000000..06be761 Binary files /dev/null and b/Images/AI/ai-gen (10).jpg differ diff --git a/Images/AI/ai-gen (2).jpg b/Images/AI/ai-gen (2).jpg new file mode 100644 index 0000000..10175f5 Binary files /dev/null and b/Images/AI/ai-gen (2).jpg differ diff --git a/Images/AI/ai-gen (3).jpg b/Images/AI/ai-gen (3).jpg new file mode 100644 index 0000000..25dd014 Binary files /dev/null and b/Images/AI/ai-gen (3).jpg differ diff --git a/Images/AI/ai-gen (4).jpg b/Images/AI/ai-gen (4).jpg new file mode 100644 index 0000000..78b936b Binary files /dev/null and b/Images/AI/ai-gen (4).jpg differ diff --git a/Images/AI/ai-gen (5).jpg b/Images/AI/ai-gen (5).jpg new file mode 100644 index 0000000..13072a7 Binary files /dev/null and b/Images/AI/ai-gen (5).jpg differ diff --git a/Images/AI/ai-gen (6).jpg b/Images/AI/ai-gen (6).jpg new file mode 100644 index 0000000..3fecf0f Binary files /dev/null and b/Images/AI/ai-gen (6).jpg differ diff --git a/Images/AI/ai-gen (7).jpg b/Images/AI/ai-gen (7).jpg new file mode 100644 index 0000000..031bb38 Binary files /dev/null and b/Images/AI/ai-gen (7).jpg differ diff --git a/Images/AI/ai-gen (8).jpg b/Images/AI/ai-gen (8).jpg new file mode 100644 index 0000000..3bfc869 Binary files /dev/null and b/Images/AI/ai-gen (8).jpg differ diff --git a/Images/AI/ai-gen (9).jpg b/Images/AI/ai-gen (9).jpg new file mode 100644 index 0000000..31518b6 Binary files /dev/null and b/Images/AI/ai-gen (9).jpg differ diff --git a/Images/Animals/Birds.jpg b/Images/Animals/Birds.jpg new file mode 100644 index 0000000..6156b01 Binary files /dev/null and b/Images/Animals/Birds.jpg differ diff --git a/Images/Animals/Elephant.jpg b/Images/Animals/Elephant.jpg new file mode 100644 index 0000000..8dd6962 Binary files /dev/null and b/Images/Animals/Elephant.jpg differ diff --git a/Images/Animals/Polar bear.jpg b/Images/Animals/Polar bear.jpg new file mode 100644 index 0000000..a2a9aa7 Binary files /dev/null and b/Images/Animals/Polar bear.jpg differ diff --git a/Images/Animals/Tiger.jpg b/Images/Animals/Tiger.jpg new file mode 100644 index 0000000..f8ace3c Binary files /dev/null and b/Images/Animals/Tiger.jpg differ diff --git a/Images/Animals/bird.jpg b/Images/Animals/bird.jpg new file mode 100644 index 0000000..a16bfac Binary files /dev/null and b/Images/Animals/bird.jpg differ diff --git a/Images/Animals/deer.jpg b/Images/Animals/deer.jpg new file mode 100644 index 0000000..054e7e0 Binary files /dev/null and b/Images/Animals/deer.jpg differ diff --git a/Images/Animals/eagle.jpg b/Images/Animals/eagle.jpg new file mode 100644 index 0000000..fd66602 Binary files /dev/null and b/Images/Animals/eagle.jpg differ diff --git a/Images/Animals/fish.jpg b/Images/Animals/fish.jpg new file mode 100644 index 0000000..0370acb Binary files /dev/null and b/Images/Animals/fish.jpg differ diff --git a/Images/Animals/fox.jpg b/Images/Animals/fox.jpg new file mode 100644 index 0000000..532c891 Binary files /dev/null and b/Images/Animals/fox.jpg differ diff --git a/Images/Animals/monkey.jpg b/Images/Animals/monkey.jpg new file mode 100644 index 0000000..a256806 Binary files /dev/null and b/Images/Animals/monkey.jpg differ diff --git a/Images/Landscape/beachLandscape.jpg b/Images/Landscape/beachLandscape.jpg new file mode 100644 index 0000000..1682ad2 Binary files /dev/null and b/Images/Landscape/beachLandscape.jpg differ diff --git a/Images/Landscape/cityLandscape.jpg b/Images/Landscape/cityLandscape.jpg new file mode 100644 index 0000000..5d90d1c Binary files /dev/null and b/Images/Landscape/cityLandscape.jpg differ diff --git a/Images/Landscape/forestLandscape.jpg b/Images/Landscape/forestLandscape.jpg new file mode 100644 index 0000000..61226f6 Binary files /dev/null and b/Images/Landscape/forestLandscape.jpg differ diff --git a/Images/Landscape/frozenSeaLandscape.jpg b/Images/Landscape/frozenSeaLandscape.jpg new file mode 100644 index 0000000..15308ad Binary files /dev/null and b/Images/Landscape/frozenSeaLandscape.jpg differ diff --git a/Images/Landscape/landscape1.jpg b/Images/Landscape/landscape1.jpg new file mode 100644 index 0000000..55cfad5 Binary files /dev/null and b/Images/Landscape/landscape1.jpg differ diff --git a/Images/Landscape/portLandscape.jpg b/Images/Landscape/portLandscape.jpg new file mode 100644 index 0000000..49abdb1 Binary files /dev/null and b/Images/Landscape/portLandscape.jpg differ diff --git a/Images/Landscape/snowyForestLandscape.jpg b/Images/Landscape/snowyForestLandscape.jpg new file mode 100644 index 0000000..b52920c Binary files /dev/null and b/Images/Landscape/snowyForestLandscape.jpg differ diff --git a/Images/Landscape/winterLandscape.jpg b/Images/Landscape/winterLandscape.jpg new file mode 100644 index 0000000..6bd4018 Binary files /dev/null and b/Images/Landscape/winterLandscape.jpg differ diff --git a/Images/Night/night1.jpg b/Images/Night/night1.jpg new file mode 100644 index 0000000..548d6b1 Binary files /dev/null and b/Images/Night/night1.jpg differ diff --git a/Images/Night/night2.jpg b/Images/Night/night2.jpg new file mode 100644 index 0000000..899eae2 Binary files /dev/null and b/Images/Night/night2.jpg differ diff --git a/Images/Night/night3.jpg b/Images/Night/night3.jpg new file mode 100644 index 0000000..55c851d Binary files /dev/null and b/Images/Night/night3.jpg differ diff --git a/Images/Night/night4.jpg b/Images/Night/night4.jpg new file mode 100644 index 0000000..6d8ddab Binary files /dev/null and b/Images/Night/night4.jpg differ diff --git a/Images/Night/night5.jpg b/Images/Night/night5.jpg new file mode 100644 index 0000000..2d4dd4d Binary files /dev/null and b/Images/Night/night5.jpg differ diff --git a/Images/Night/night6.jpg b/Images/Night/night6.jpg new file mode 100644 index 0000000..40c53ae Binary files /dev/null and b/Images/Night/night6.jpg differ diff --git a/Images/Night/night7.jpg b/Images/Night/night7.jpg new file mode 100644 index 0000000..043c7a7 Binary files /dev/null and b/Images/Night/night7.jpg differ diff --git a/Images/People/People (1).jpg b/Images/People/People (1).jpg new file mode 100644 index 0000000..cfe3499 Binary files /dev/null and b/Images/People/People (1).jpg differ diff --git a/Images/People/People (2).jpg b/Images/People/People (2).jpg new file mode 100644 index 0000000..bc014fe Binary files /dev/null and b/Images/People/People (2).jpg differ diff --git a/Images/People/People (3).jpg b/Images/People/People (3).jpg new file mode 100644 index 0000000..9d85f54 Binary files /dev/null and b/Images/People/People (3).jpg differ diff --git a/Images/People/People (4).jpg b/Images/People/People (4).jpg new file mode 100644 index 0000000..aca01b4 Binary files /dev/null and b/Images/People/People (4).jpg differ diff --git a/Images/People/People (5).jpg b/Images/People/People (5).jpg new file mode 100644 index 0000000..35800a2 Binary files /dev/null and b/Images/People/People (5).jpg differ diff --git a/Images/People/people.jpg b/Images/People/people.jpg new file mode 100644 index 0000000..43065a9 Binary files /dev/null and b/Images/People/people.jpg differ diff --git a/Images/foodAndDrink/f.a.d (1).jpg b/Images/foodAndDrink/f.a.d (1).jpg new file mode 100644 index 0000000..a41d1e9 Binary files /dev/null and b/Images/foodAndDrink/f.a.d (1).jpg differ diff --git a/Images/foodAndDrink/f.a.d (2).jpg b/Images/foodAndDrink/f.a.d (2).jpg new file mode 100644 index 0000000..b27b3f0 Binary files /dev/null and b/Images/foodAndDrink/f.a.d (2).jpg differ diff --git a/Images/foodAndDrink/f.a.d (3).jpg b/Images/foodAndDrink/f.a.d (3).jpg new file mode 100644 index 0000000..7285998 Binary files /dev/null and b/Images/foodAndDrink/f.a.d (3).jpg differ diff --git a/Images/foodAndDrink/f.a.d (4).jpg b/Images/foodAndDrink/f.a.d (4).jpg new file mode 100644 index 0000000..5f37c54 Binary files /dev/null and b/Images/foodAndDrink/f.a.d (4).jpg differ diff --git a/Images/foodAndDrink/f.a.d (5).jpg b/Images/foodAndDrink/f.a.d (5).jpg new file mode 100644 index 0000000..6c095a1 Binary files /dev/null and b/Images/foodAndDrink/f.a.d (5).jpg differ diff --git a/Images/logo.svg b/Images/logo.svg new file mode 100644 index 0000000..e729245 --- /dev/null +++ b/Images/logo.svg @@ -0,0 +1,50 @@ + + + + + + + + + + diff --git a/Images/profileAvatar.eps b/Images/profileAvatar.eps new file mode 100644 index 0000000..3dfe02d Binary files /dev/null and b/Images/profileAvatar.eps differ diff --git a/Images/profileAvatar.jpg b/Images/profileAvatar.jpg new file mode 100644 index 0000000..160af3e Binary files /dev/null and b/Images/profileAvatar.jpg differ diff --git a/Images/wallpaper/WP (1).jpg b/Images/wallpaper/WP (1).jpg new file mode 100644 index 0000000..77bc228 Binary files /dev/null and b/Images/wallpaper/WP (1).jpg differ diff --git a/Images/wallpaper/WP (10).jpg b/Images/wallpaper/WP (10).jpg new file mode 100644 index 0000000..7f22a2d Binary files /dev/null and b/Images/wallpaper/WP (10).jpg differ diff --git a/Images/wallpaper/WP (2).jpg b/Images/wallpaper/WP (2).jpg new file mode 100644 index 0000000..6c42076 Binary files /dev/null and b/Images/wallpaper/WP (2).jpg differ diff --git a/Images/wallpaper/WP (3).jpg b/Images/wallpaper/WP (3).jpg new file mode 100644 index 0000000..2073678 Binary files /dev/null and b/Images/wallpaper/WP (3).jpg differ diff --git a/Images/wallpaper/WP (4).jpg b/Images/wallpaper/WP (4).jpg new file mode 100644 index 0000000..4ad6773 Binary files /dev/null and b/Images/wallpaper/WP (4).jpg differ diff --git a/Images/wallpaper/WP (5).jpg b/Images/wallpaper/WP (5).jpg new file mode 100644 index 0000000..d8d53e2 Binary files /dev/null and b/Images/wallpaper/WP (5).jpg differ diff --git a/Images/wallpaper/WP (6).jpg b/Images/wallpaper/WP (6).jpg new file mode 100644 index 0000000..0b67716 Binary files /dev/null and b/Images/wallpaper/WP (6).jpg differ diff --git a/Images/wallpaper/WP (7).jpg b/Images/wallpaper/WP (7).jpg new file mode 100644 index 0000000..4fb6253 Binary files /dev/null and b/Images/wallpaper/WP (7).jpg differ diff --git a/Images/wallpaper/WP (8).jpg b/Images/wallpaper/WP (8).jpg new file mode 100644 index 0000000..af4d973 Binary files /dev/null and b/Images/wallpaper/WP (8).jpg differ diff --git a/Images/wallpaper/WP (9).jpg b/Images/wallpaper/WP (9).jpg new file mode 100644 index 0000000..2de6c11 Binary files /dev/null and b/Images/wallpaper/WP (9).jpg differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..9f37e6c --- /dev/null +++ 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 new file mode 100644 index 0000000..2e9ddc7 --- /dev/null +++ b/index.html @@ -0,0 +1,85 @@ + + + + + + + Final Project -FE- Fall2024- ReDi School + + + + + +
+
+ + + + +
+ +
+
+ Submit an image +
+ + + +
+ About us + Contact us + +
+
+ +
+ +
+
+ +
+ + + + +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..6fc91b3 --- /dev/null +++ b/login.html @@ -0,0 +1,90 @@ + + + + + + + Login + + + + + +
+
+ + + + +
+ +
+ Submit an image + + + +
+ +
+ + + +
+
+
+
+

Login

+

Welcome back

+
+ +
+ +
+ +
+
+ + + + + + +
+
+

+ Don't have an account?Join +

+
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/login.js b/login.js new file mode 100644 index 0000000..8eaa727 --- /dev/null +++ b/login.js @@ -0,0 +1,53 @@ +// console.log("Hello user!"); + +// Array of users (add more users as needed) +const users = [ + { + email: "user@gmail.com", + 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."); + } +}); + diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..9421c42 --- /dev/null +++ b/scripts.js @@ -0,0 +1,192 @@ +// // console.log("Hello World!"); + + +const photoDatabase = [ + ["fish.jpg", "Animals"], ["bird.jpg", "Animals"], ["Elephant.jpg", "Animals"], ["deer.jpg", "Animals"], ["Tiger.jpg", "Animals"], ["monkey.jpg", "Animals"], ["eagle.jpg", "Animals"], ["fox.jpg", "Animals"], ["Polar bear.jpg", "Animals"], + ["ai-gen (1).jpg", "AI"], ["ai-gen (2).jpg", "AI"], ["ai-gen (3).jpg", "AI"], ["ai-gen (4).jpg", "AI"], ["ai-gen (5).jpg", "AI"], ["ai-gen (6).jpg", "AI"], ["ai-gen (7).jpg", "AI"], ["ai-gen (8).jpg", "AI"], ["ai-gen (9).jpg", "AI"], ["ai-gen (10).jpg", "AI"], ["f.a.d (1).jpg", "foodAndDrink"], ["f.a.d (2).jpg", "foodAndDrink"], ["f.a.d (3).jpg", "foodAndDrink"], ["f.a.d (4).jpg", "foodAndDrink"], ["f.a.d (5).jpg", "foodAndDrink"], + ["landscape1.jpg", "Landscape"], ["beachLandscape.jpg", "Landscape"], ["cityLandscape.jpg", "Landscape"], ["forestLandscape.jpg", "Landscape"], ["portLandscape.jpg", "Landscape"], ["snowyForestLandscape.jpg", "Landscape"], ["winterLandscape.jpg", "Landscape"], ["frozenSeaLandscape.jpg", "Landscape"], + ["night1.jpg", "Night"], ["night2.jpg", "Night"], ["night3.jpg", "Night"], ["night4.jpg", "Night"], ["night5.jpg", "Night"], ["night6.jpg", "Night"], ["night7.jpg", "Night"], + ["people.jpg", "People"], ["People (1).jpg", "People"], ["People (2).jpg", "People"], ["People (3).jpg", "People"], ["People (4).jpg", "People"], ["People (5).jpg", "People"], + ["WP (1).jpg", "wallpaper"], ["WP (2).jpg", "wallpaper"], ["WP (3).jpg", "wallpaper"], ["WP (4).jpg", "wallpaper"], ["WP (5).jpg", "wallpaper"], ["WP (6).jpg", "wallpaper"], ["WP (7).jpg", "wallpaper"], ["WP (8).jpg", "wallpaper"], ["WP (9).jpg", "wallpaper"], ["WP (10).jpg", "wallpaper"] +] + +const baseFolder = "./Images/"; +const gallery = document.getElementById('photo-gallery'); + + +// Function to render photos dynamically +function renderPhotos(categories) { + gallery.innerHTML = ''; + + + // Loop through the selected categories and generate photos + photoDatabase.forEach(([filename, category]) => { + if (categories.includes('all') || categories.includes(category)) { + // Create a photo container + const photoDiv = document.createElement('div'); + photoDiv.className = 'photo'; + + // Create an image element + const img = document.createElement('img'); + img.src = `${baseFolder}${category}/${filename}`; + img.alt = `${category} photo`; + img.loading = "lazy"; + + + photoDiv.appendChild(img); + gallery.appendChild(photoDiv); + } + }); + + + // Wait for images to load before initializing Masonry + imagesLoaded(gallery, function () { + new Masonry(gallery, { + itemSelector: '.photo', // Target photo elements + columnWidth: '.photo', // Use photo width for columns + gutter: 10, // Space between items + fitWidth: true // Center the gallery + }); + }); + + +} + +// Function to manage tab clicks +function manageTabs() { + const tabs = document.querySelectorAll('.tab'); + for (let i = 0; i < tabs.length; i++) { + const tab = tabs[i]; + tab.addEventListener('click', () => { + const category = tab.dataset.category; + let selectedCategories; + if (category === 'all') { + selectedCategories = ['all']; + } else { + selectedCategories = [category]; + } + renderPhotos(selectedCategories); + }); + } +} + + + +document.addEventListener('DOMContentLoaded', () => { + //manage userProfile + const loggedInUser = JSON.parse(localStorage.getItem("loggedInUser")); + + if (loggedInUser) { + const loginLink = document.querySelector(".logIn"); + + if (loginLink) { + const profileElement = document.createElement("a"); + profileElement.className = "profile-info"; + profileElement.innerHTML = `Profile + ${loggedInUser.username}
+ + `; + loginLink.parentNode.replaceChild(profileElement, loginLink); + + const logoutButton = document.querySelector(".logout-button"); + logoutButton.addEventListener("click", () => { + localStorage.removeItem("loggedInUser"); + window.location.href = "./login.html"; + }); + } + } + + + //render all photos on page load + manageTabs(); // Set up tab click listeners + renderPhotos(['all']); // Initial render of all categories +}); + + + +const toggleButton = document.querySelector('.toggle'); +const toggleItems = document.querySelector('.toggle-items'); + +// Toggle menu visibility when the button is clicked +toggleButton.addEventListener('click', (event) => { + toggleItems.classList.toggle('active'); + event.stopPropagation(); // Stop click from propagating +}); + +// Close the menu when clicking outside +document.addEventListener('click', () => { + if (toggleItems.classList.contains('active')) { + toggleItems.classList.remove('active'); + } +}); + +// Prevent menu clicks from closing it +toggleItems.addEventListener('click', (event) => { + event.stopPropagation(); +}); + + + + + + +const submitImageButton = document.querySelector(".submit-image"); + +submitImageButton.addEventListener("click", () => { + const loggedInUser = JSON.parse(localStorage.getItem("loggedInUser")); + if (!loggedInUser) { + window.location.href = "./login.html"; + return; + } + const dialogBox = document.createElement("dialog"); + dialogBox.className = "SDialog"; + document.body.appendChild(dialogBox); + + + const closeButton = document.createElement("button"); + closeButton.className = "close-button"; + closeButton.innerHTML = "×"; + closeButton.addEventListener("click", () => dialogBox.close()); + dialogBox.appendChild(closeButton); + + + //create container to take image Url + const urlDiv = document.createElement("div"); + urlDiv.className = "urlDiv" + + const urlInput = document.createElement("input"); + urlInput.type = "url"; + urlInput.placeholder = "Enter Image URL"; + urlInput.style.width = "100%"; + urlInput.style.height = "300px" + urlInput.required = true; + urlDiv.appendChild(urlInput); + + + const imageCat = document.createElement("select"); + const categoriesOption = ["AI generated", "Animals", "foodAndDrink", "Landscape", "Night", "People", "Wallpaper"]; + + categoriesOption.forEach(cat => { + const option = document.createElement("option"); + option.value = cat.toLowerCase().replace(/ /g, ""); + option.textContent = cat; + imageCat.appendChild(option); + }) + + + const submitButton = document.createElement("button"); + submitButton.textContent = "Submit"; + submitButton.style.marginTop = "10px" + + + dialogBox.appendChild(urlDiv); + dialogBox.appendChild(imageCat); + dialogBox.appendChild(submitButton); + + dialogBox.showModal(); + + +}); + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b052030 --- /dev/null +++ b/styles.css @@ -0,0 +1,397 @@ +/* body{ + background-color: aqua; +} */ + +#foflex { + width: 100%; + height: fit-content; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + +} + + + +.fNote { + flex-direction: row; + width: 100%; + height: fit-content; + text-align: center; + position: -ms-page bottom; +} + +.lo-design { + width: 100px; + +} + + + +.baseHead { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + width: 100%; + padding-top: 15px; + +} + +.header-div { + display: flex; + justify-items: center; + justify-content: space-between; + text-align: center; + align-items: center; + flex-direction: row; + font-size: 16px; + width: 95%; + +} + +.catListContainer { + display: block; + font-size: 12pt; + margin: 30px 0; + width: 100%; +} + + +nav { + display: flex; + justify-items: center; + justify-content: space-between; + gap: 20px; + /* space between items*/ + color: black; +} + +nav a { + color: black; + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +.toggle { + font-size: 30px; + cursor: pointer; + background: none; + border: none; + color: #333; +} + +.toggle:hover { + color: #007Baa; +} + +.toggle-items { + display: none; + flex-direction: column; + background-color: #f9f9f9; + position: absolute; + padding: 10px; + top: 50px; + right: 10px; + border: 1px solid #ccc; + border-radius: 5px; + z-index: 1000; +} + +.toggle-items.active { + display: block; +} + +.about-us, +.contact-us { + display: block; + margin: 5px 0; + text-decoration: none; + color: #333; + font-size: 1em; + text-align: left; +} + +/* space between elements */ +.sbe { + flex-shrink: 0; + width: 10px; +} + +.search-container { + display: block; + position: relative; + width: 400px; + /* visibility: hidden; */ + +} + + +.search-input { + width: 300px; + padding: 10px 15px; + border: 2px solid #ccc; + border-radius: 25px; + outline: none; + transition: border-color 0.3s; + +} + + +.search-input:focus { + border-color: #007BFF; +} + +.search-button { + top: 50%; + border: none; + background: none; + cursor: pointer; +} + +.search-button i { + font-size: 18px; + color: #888; +} + +.subImage { + display: block; + width: max-content; +} + +/* Login button */ +.logIn { + padding-top: 5px; + color: azure; + border-radius: 10px; + height: 30px; + width: 80px; + border: 0; + background-color: rgba(132, 20, 20, 0.9); +} + +.signUp { + + font-size: 18px; + border: 0; + height: 30px; + width: 80px; + border-radius: 10px; + background-color: red; +} + +.photo-gallery { + margin: 20px auto; + display: block; + /* Fallback if Masonry fails */ + gap: 10px; + +} + +.photo { + width: 300px; + margin-bottom: 10px; +} + +.photo img { + width: 100%; + height: auto; + display: block; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease, z-index 0s 0.3s; +} + + +.photo:hover { + transform: scale(1.50); + z-index: 10; + position: relative; + +} + + + +.SDialog { + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; + position: relative; + width: 300px; + max-width: 100%; +} + +.urlDiv { + margin-top: 20px; + margin-bottom: 10px; +} + +.submit-image { + cursor: pointer; + display: inline-block; + padding: 10px 20px; + border: none; + border-radius: 5px; + text-decoration: none; +} + +.close-button { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 20px; + font-weight: bold; + cursor: pointer; + color: red; + + +} + +.close-button:hover { + color: #000; +} + + + + + +/* Login page */ + + +.l-route { + display: flex; + flex-shrink: 0; + margin-inline: auto; + box-sizing: border-box; + flex-direction: column; + align-items: center; + align-content: center; + margin-top: 45px; +} + + +.sfn { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + text-align: center; + width: 300px; + border: 30px; +} + + + +.gmb { + padding: 32px 32px 40px; + display: block; + width: inherit; + +} + +.l-h1 { + margin-block: 0; +} + +.log-form { + display: flex; + flex-direction: column; + align-content: center; + margin-top: 24px; + text-align: left; + gap: 24px; + +} + +.uil { + display: flex; + flex-direction: column; + + +} + +.uinf { + display: flex; + flex-shrink: 0; + width: 350px; + + +} + +.fmp { + font-size: 12px; + margin-left: 160px; + +} + +.w800b { + height: 30px; + + +} + +.btn-login { + height: 40px; + font-size: medium; + +} + +.span-box { + display: block; + height: 20px; + margin-top: 20px; + color: rgb(255, 0, 0); +} + + +/* Responsive to smaller screens */ + +@media (max-width:430px) { + + .search-container { + display: none; + } + + .catListContainer { + display: none; + } + + .photo-gallery { + width: 100%; + align-content: center; + } + + .photo { + width: 10em; + margin-bottom: 10px; + + } + + + .subImage { + font-size: 10pt; + } + +} + +@media(max-width:768px) { + .search-container { + width: 250px; + } + + .search-input { + width: 150px; + } + + .catListContainer { + font-size: 10pt; + } +} \ No newline at end of file