Snapmart - Home

Discover & Share Beautiful Photos

Join our community of photographers and explore stunning visuals.

Featured Photos

Share Your Photos

Snapmart - Explore

Explore Photos

Discover new and exciting photos from our community.

Latest Photos

Snapmart - Upload

Upload Your Photos

Share your amazing photos with the Snapmart community.

Upload a Photo

body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #fff; padding: 1rem 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; /* Make header sticky */ top: 0; z-index: 100; /* Ensure it stays on top of other content */ } nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .logo { font-size: 1.7rem; /* Slightly larger logo */ font-weight: bold; color: #e44d26; transition: transform 0.3s ease; /* Smooth transform for logo */ } .logo:hover { transform: scale(1.1); /* Scale up logo on hover */ } nav ul { list-style: none; padding: 0; margin: 0; display: flex; } nav ul li { margin-left: 2rem; } nav ul li a { text-decoration: none; color: #333; font-weight: bold; transition: color 0.3s ease, padding-bottom 0.3s ease; /* Transition for color and padding */ padding-bottom: 2px; /* Slight padding for underline effect */ } nav ul li a:hover { color: #e44d26; /* Change color on hover */ border-bottom: 2px solid #e44d26; /* Underline effect on hover */ padding-bottom: 0; /* Adjust padding to make underline appear smoothly */ } nav ul li a:active { color: #c83d1a; /* Darker color on active/click */ } main { max-width: 1200px; margin: 2rem auto; padding: 2rem; } .hero, .explore-hero, .upload-hero { text-align: center; padding: 4rem 0; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .hero h1, .explore-hero h1, .upload-hero h1 { font-size: 2.5rem; margin-bottom: 1rem; } .hero p, .explore-hero p, .upload-hero p { font-size: 1.2rem; color: #666; margin-bottom: 2rem; } .cta-button, .upload-button { background-color: #e44d26; color: #fff; border: none; padding: 1rem 2rem; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; /* Add transform transition */ } .cta-button:hover, .upload-button:hover { background-color: #d1431e; } .cta-button:active, .upload-button:active { transform: scale(0.95); /* Scale down slightly when active */ } .gallery { margin-top: 2rem; text-align: center; } .gallery h2, .upload-form h2 { margin-bottom: 1rem; } .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .image-item { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .image-item:hover { transform: scale(1.03); } .image-item img { width: 100%; height: auto; display: block; } .image-item-content { padding: 1rem; text-align: left; } .image-item-title { font-size: 1rem; font-weight: bold; margin-bottom: 0.5rem; } .image-item-author { font-size: 0.9rem; color: #666; } .upload-section, .upload-form { text-align: center; margin-top: 3rem; padding: 3rem 0; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .upload-form { max-width: 600px; margin: 2rem auto; padding: 2rem; } .form-group { margin-bottom: 1.5rem; text-align: left; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; } .form-group input[type="text"], .form-group input[type="file"] { width: 100%; padding: 0.7rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; } footer { text-align: center; padding: 1rem 0; background-color: #333; color: #fff; width: 100%; } document.addEventListener('DOMContentLoaded', () => { const imageGrids = document.querySelectorAll('.image-grid'); const photos = [ { src: 'https://images.unsplash.com/photo-1682685797298-c141944751fa?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NzY4MzQzNA&ixlib=rb-4.0.3&q=80&w=400', alt: 'Photo 1', title: 'Serene Landscape', author: 'John Doe' }, { src: 'https://images.unsplash.com/photo-1696539353534-03539494b199?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NzY4MzQ1MA&ixlib=rb-4.0.3&q=80&w=400', alt: 'Photo 2', title: 'City at Night', author: 'Jane Smith' }, { src: 'https://images.unsplash.com/photo-1695624755158-68f6c9989914?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NzY4MzQ2Nw&ixlib=rb-4.0.3&q=80&w=400', alt: 'Photo 3', title: 'Mountain View', author: 'Peter Jones' }, { src: 'https://images.unsplash.com/photo-1697502987918-52074d3403c8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NzY4MzQ4My&ixlib=rb-4.0.3&q=80&w=400', alt: 'Photo 4', title: 'Abstract Art', author: 'Laura Davis' }, { src: 'https://images.unsplash.com/photo-1697175991727-89e199a84992?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NzY4MzQ5Nw&ixlib=rb-4.0.3&q=80&w=400', alt: 'Photo 5', title: 'Forest Path', author: 'David Wilson' }, { src: 'https://images.unsplash.com/photo-1697490826998-77942473d44e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NzY4MzUxMA&ixlib=rb-4.0.3&q=80&w=400', alt: 'Photo 6', title: 'Coastal Sunset', author: 'Emily White' }, ]; imageGrids.forEach(imageGrid => { function loadImages() { let imageElements = ''; let storedImages = JSON.parse(localStorage.getItem('snapmartImages') || '[]'); const allImages = [...photos, ...storedImages]; allImages.forEach(photo => { imageElements += `

${photo.title}

By ${photo.author || 'User'}

`; }); imageGrid.innerHTML = imageElements; } loadImages(); }); const uploadForm = document.getElementById('uploadForm'); if (uploadForm) { uploadForm.addEventListener('submit', function(event) { event.preventDefault(); const imageFile = document.getElementById('image').files[0]; const title = document.getElementById('title').value; if (imageFile) { const reader = new FileReader(); reader.onload = function(e) { const imageDataURL = e.target.result; storeImage(title, imageDataURL); alert('Photo uploaded successfully!'); uploadForm.reset(); // Reload images on explore page if we are there if (window.location.pathname.includes('explore.html')) { const exploreImageGrid = document.querySelector('#exploreGallery .image-grid'); if (exploreImageGrid) { loadImagesForGrid(exploreImageGrid); // Reload images for explore grid } } } reader.readAsDataURL(imageFile); } }); } function storeImage(title, imageDataURL) { let storedImages = JSON.parse(localStorage.getItem('snapmartImages') || '[]'); storedImages.push({ title: title, url: imageDataURL }); localStorage.setItem('snapmartImages', JSON.stringify(storedImages)); } function loadImagesForGrid(gridElement) { let imageElements = ''; let storedImages = JSON.parse(localStorage.getItem('snapmartImages') || '[]'); const allImages = [...photos, ...storedImages]; allImages.forEach(photo => { imageElements += `

${photo.title}

By ${photo.author || 'User'}

`; }); gridElement.innerHTML = imageElements; } });