sugakrit6
/

Gallery

Model card Files Files and versions

xet

Community

sugakrit6 commited on Jan 7

Commit

94cab96

verified ·

1 Parent(s): 0bfb93e

Create gallery.html

Browse files

Files changed (1) hide show

gallery.html +385 -0

gallery.html ADDED Viewed

	@@ -0,0 +1,385 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Grain & Gallery Studio</title>
+    <style>
+        :root {
+            --bg: #121212;
+            --surface: #1e1e1e;
+            --primary: #bb86fc;
+            --text: #e0e0e0;
+            --danger: #cf6679;
+        }
+        body {
+            font-family: 'Segoe UI', sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            margin: 0;
+            display: flex;
+            height: 100vh;
+            overflow: hidden;
+        }
+        /* --- Sidebar --- */
+        .sidebar {
+            width: 250px;
+            background-color: var(--surface);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #333;
+        }
+        .sidebar h2 { margin-top: 0; font-size: 1.2rem; color: var(--primary); }
+        .album-list {
+            list-style: none;
+            padding: 0;
+            margin-top: 20px;
+            flex-grow: 1;
+            overflow-y: auto;
+        }
+        .album-item {
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 4px;
+            margin-bottom: 5px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .album-item:hover { background-color: #333; }
+        .album-item.active { background-color: var(--primary); color: #000; }
+        .lock-icon { font-size: 0.8rem; opacity: 0.7; }
+        button {
+            background-color: var(--primary);
+            border: none;
+            color: #000;
+            padding: 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+        button.secondary { background-color: #333; color: white; border: 1px solid #555; }
+        /* --- Main Content --- */
+        .main {
+            flex-grow: 1;
+            padding: 20px;
+            overflow-y: auto;
+            position: relative;
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #333;
+            padding-bottom: 20px;
+        }
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        .img-card {
+            background-color: var(--surface);
+            border-radius: 8px;
+            overflow: hidden;
+            transition: transform 0.2s;
+        }
+        .img-card:hover { transform: translateY(-5px); }
+        .img-card img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            display: block;
+        }
+        .empty-state {
+            text-align: center;
+            opacity: 0.5;
+            margin-top: 50px;
+        }
+        /* --- Editor Modal --- */
+        .modal {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0,0,0,0.9);
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+        .modal.open { display: flex; }
+        .canvas-container {
+            max-width: 80%;
+            max-height: 70%;
+            border: 1px solid #555;
+            margin-bottom: 20px;
+            overflow: hidden;
+        }
+        canvas { max-width: 100%; max-height: 100%; display: block; }
+        .controls {
+            background: var(--surface);
+            padding: 20px;
+            border-radius: 8px;
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+        input[type="range"] { accent-color: var(--primary); }
+        /* Access Badge */
+        .badge {
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            font-weight: bold;
+        }
+        .badge.public { background: #2e7d32; color: white; }
+        .badge.private { background: #c62828; color: white; }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <h2>My Studio</h2>
+        <div class="album-list" id="albumList">
+            </div>
+        <hr style="width:100%; border-color:#333;">
+        <h3>New Album</h3>
+        <input type="text" id="newAlbumName" placeholder="Album Name" style="width: 90%; padding: 8px; margin-bottom: 10px; background: #333; border: none; color: white;">
+        <select id="newAlbumAccess" style="width: 96%; padding: 8px; margin-bottom: 10px; background: #333; border: none; color: white;">
+            <option value="public">Allow All (Public)</option>
+            <option value="private">Request Access (Private)</option>
+        </select>
+        <button onclick="createAlbum()">Create Album</button>
+    </div>
+    <div class="main">
+        <div class="header">
+            <div>
+                <h1 id="currentAlbumTitle">Select an Album</h1>
+                <span id="accessBadge" class="badge public" style="display:none;">Public</span>
+            </div>
+            <div id="uploadSection" style="display:none;">
+                <input type="file" id="fileInput" accept="image/*" style="display:none" onchange="loadImageForEditing(this)">
+                <button onclick="document.getElementById('fileInput').click()">+ Upload & Edit</button>
+            </div>
+        </div>
+        <div class="gallery-grid" id="galleryGrid">
+            <div class="empty-state">Select or create an album to begin.</div>
+        </div>
+    </div>
+    <div class="modal" id="editorModal">
+        <div class="canvas-container">
+            <canvas id="editorCanvas"></canvas>
+        </div>
+        <div class="controls">
+            <div>
+                <label>Grain Amount: <span id="grainValue">0</span></label><br>
+                <input type="range" id="grainRange" min="0" max="100" value="0" oninput="applyGrainEffect()">
+            </div>
+            <div>
+                <button onclick="saveImage()">Save to Album</button>
+                <button class="secondary" onclick="closeModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // --- State Management ---
+        // Using localStorage to persist data in browser
+        let albums = JSON.parse(localStorage.getItem('galleryAlbums')) || [];
+        let currentAlbumId = null;
+        let originalImage = null; // Stores the uploaded image for resetting filters
+        // --- Album Logic ---
+        function renderAlbums() {
+            const list = document.getElementById('albumList');
+            list.innerHTML = '';
+            albums.forEach(album => {
+                const li = document.createElement('li');
+                li.className = `album-item ${currentAlbumId === album.id ? 'active' : ''}`;
+                li.innerHTML = `
+                    <span>${album.name}</span>
+                    ${album.access === 'private' ? '<span class="lock-icon">🔒</span>' : ''}
+                `;
+                li.onclick = () => selectAlbum(album.id);
+                list.appendChild(li);
+            });
+        }
+        function createAlbum() {
+            const name = document.getElementById('newAlbumName').value;
+            const access = document.getElementById('newAlbumAccess').value;
+            if (!name) return alert("Please enter a name");
+            const newAlbum = {
+                id: Date.now(),
+                name: name,
+                access: access,
+                images: []
+            };
+            albums.push(newAlbum);
+            saveData();
+            document.getElementById('newAlbumName').value = '';
+            renderAlbums();
+            selectAlbum(newAlbum.id);
+        }
+        function selectAlbum(id) {
+            currentAlbumId = id;
+            renderAlbums();
+            renderGallery();
+        }
+        function renderGallery() {
+            const album = albums.find(a => a.id === currentAlbumId);
+            const grid = document.getElementById('galleryGrid');
+            const title = document.getElementById('currentAlbumTitle');
+            const uploadSection = document.getElementById('uploadSection');
+            const badge = document.getElementById('accessBadge');
+            if (!album) return;
+            // Update Header
+            title.innerText = album.name;
+            uploadSection.style.display = 'block';
+            // Update Access Badge
+            badge.style.display = 'inline-block';
+            badge.className = `badge ${album.access}`;
+            badge.innerText = album.access === 'public' ? 'Public (Allow All)' : 'Private (Request Only)';
+            // Render Images
+            grid.innerHTML = '';
+            if (album.images.length === 0) {
+                grid.innerHTML = '<div class="empty-state">No images yet. Upload one!</div>';
+            } else {
+                album.images.forEach(imgData => {
+                    const card = document.createElement('div');
+                    card.className = 'img-card';
+                    card.innerHTML = `<img src="${imgData}" />`;
+                    grid.appendChild(card);
+                });
+            }
+        }
+        // --- Editor & Grain Logic ---
+        const modal = document.getElementById('editorModal');
+        const canvas = document.getElementById('editorCanvas');
+        const ctx = canvas.getContext('2d');
+        function loadImageForEditing(input) {
+            if (input.files && input.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const img = new Image();
+                    img.onload = function() {
+                        // Set Canvas size to match image (max 800px width for performance)
+                        const scale = Math.min(1, 800 / img.width);
+                        canvas.width = img.width * scale;
+                        canvas.height = img.height * scale;
+                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                        originalImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                        modal.classList.add('open');
+                        document.getElementById('grainRange').value = 0;
+                    }
+                    img.src = e.target.result;
+                }
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+        function applyGrainEffect() {
+            if (!originalImage) return;
+            const amount = parseInt(document.getElementById('grainRange').value);
+            document.getElementById('grainValue').innerText = amount;
+            // Restore original before applying new noise
+            ctx.putImageData(originalImage, 0, 0);
+            if (amount === 0) return;
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = imageData.data;
+            // Loop through pixels and add noise
+            for (let i = 0; i < data.length; i += 4) {
+                // Generate random noise value (-amount to +amount)
+                const noise = (Math.random() - 0.5) * amount * 2;
+                // Apply to RGB
+                data[i] = Math.min(255, Math.max(0, data[i] + noise));     // Red
+                data[i+1] = Math.min(255, Math.max(0, data[i+1] + noise)); // Green
+                data[i+2] = Math.min(255, Math.max(0, data[i+2] + noise)); // Blue
+            }
+            ctx.putImageData(imageData, 0, 0);
+        }
+        function saveImage() {
+            const album = albums.find(a => a.id === currentAlbumId);
+            if (album) {
+                // Convert canvas back to image URL
+                const newData = canvas.toDataURL('image/jpeg', 0.8);
+                album.images.push(newData);
+                saveData();
+                renderGallery();
+                closeModal();
+            }
+        }
+        function closeModal() {
+            modal.classList.remove('open');
+            document.getElementById('fileInput').value = ''; // Reset input
+        }
+        function saveData() {
+            try {
+                localStorage.setItem('galleryAlbums', JSON.stringify(albums));
+            } catch (e) {
+                alert("Storage full! Cannot save more images in this demo.");
+            }
+        }
+        // Initialize
+        renderAlbums();
+    </script>
+</body>
+</html>