230 lines
8.3 KiB
HTML
230 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Photos</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #181818;
|
|
color: #e0e0e0;
|
|
}
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
padding: 20px;
|
|
}
|
|
.gallery img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
|
|
background: #222;
|
|
border: 1px solid #333;
|
|
}
|
|
.gallery-btn {
|
|
position: fixed;
|
|
top: 40px;
|
|
left: 20px;
|
|
display: inline-block;
|
|
padding: 6px 10px;
|
|
background: #222;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
border: 1px solid #444;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
|
}
|
|
#select-images.gallery-btn {
|
|
left: 140px;
|
|
}
|
|
#download-selected.gallery-btn {
|
|
left: 160px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1 style="text-align:center;">Photos</h1>
|
|
<!-- Album selector removed. Album is chosen via URL parameter. -->
|
|
<a href="All_Photos.zip" id="download-all" class="gallery-btn">Download All</a>
|
|
<button id="select-images" class="gallery-btn">Select</button>
|
|
<div class="gallery" id="gallery"></div>
|
|
<footer style="text-align:center;padding:24px 0 12px 0;color:#888;font-size:16px;position:fixed;left:0;bottom:0;width:100%;background:#181818;">
|
|
Made with © <a href="https://github.com/Brandon4466/galpal" target="_blank" style="color:#4fa3ff;text-decoration:none;">GalPal</a>
|
|
</footer>
|
|
|
|
<script>
|
|
const gallery = document.getElementById('gallery');
|
|
const selectBtn = document.getElementById('select-images');
|
|
let downloadBtn = null;
|
|
let albums = {};
|
|
|
|
function getQueryParam(name) {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
return urlParams.get(name);
|
|
}
|
|
|
|
function renderGallery(albumData) {
|
|
gallery.innerHTML = '';
|
|
// Show album title if present
|
|
if (albumData.title) {
|
|
const titleDiv = document.createElement('div');
|
|
titleDiv.innerHTML = `<h2 style="text-align:center;margin-bottom:24px;">${albumData.title}</h2>`;
|
|
gallery.appendChild(titleDiv);
|
|
}
|
|
albumData.images.forEach((imgObj, idx) => {
|
|
const itemDiv = document.createElement('div');
|
|
itemDiv.style.position = 'relative';
|
|
|
|
const checkbox = document.createElement('input');
|
|
checkbox.type = 'checkbox';
|
|
checkbox.className = 'img-checkbox';
|
|
checkbox.style.position = 'absolute';
|
|
checkbox.style.top = '8px';
|
|
checkbox.style.left = '8px';
|
|
checkbox.value = imgObj.full;
|
|
checkbox.style.display = 'none';
|
|
|
|
const link = document.createElement('a');
|
|
link.href = imgObj.full;
|
|
link.target = '_blank';
|
|
const img = document.createElement('img');
|
|
img.src = imgObj.thumb;
|
|
img.alt = imgObj.full;
|
|
link.appendChild(img);
|
|
|
|
itemDiv.addEventListener('click', function(e) {
|
|
if (checkbox.style.display === 'block') {
|
|
if (e.target === img || e.target === itemDiv) {
|
|
checkbox.checked = !checkbox.checked;
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
});
|
|
|
|
itemDiv.appendChild(checkbox);
|
|
itemDiv.appendChild(link);
|
|
gallery.appendChild(itemDiv);
|
|
});
|
|
}
|
|
|
|
function setupSelectButton() {
|
|
selectBtn.style.display = 'inline-block';
|
|
selectBtn.onclick = function() {
|
|
document.querySelectorAll('.img-checkbox').forEach(cb => {
|
|
cb.style.display = 'block';
|
|
cb.checked = false;
|
|
});
|
|
selectBtn.style.display = 'none';
|
|
if (downloadBtn) downloadBtn.remove();
|
|
downloadBtn = document.createElement('button');
|
|
downloadBtn.id = 'download-selected';
|
|
downloadBtn.textContent = 'Download Selected';
|
|
downloadBtn.className = 'gallery-btn';
|
|
// Match the style of the Select button
|
|
downloadBtn.style.left = '140px';
|
|
downloadBtn.style.position = 'fixed';
|
|
downloadBtn.style.top = '40px';
|
|
downloadBtn.style.display = 'inline-block';
|
|
downloadBtn.style.padding = '6px 10px';
|
|
downloadBtn.style.background = '#0078d4';
|
|
downloadBtn.style.color = '#fff';
|
|
downloadBtn.style.textDecoration = 'none';
|
|
downloadBtn.style.borderRadius = '5px';
|
|
downloadBtn.style.fontWeight = 'bold';
|
|
downloadBtn.style.fontSize = '14px';
|
|
downloadBtn.style.border = 'none';
|
|
downloadBtn.style.cursor = 'pointer';
|
|
document.body.appendChild(downloadBtn);
|
|
downloadBtn.onclick = function() {
|
|
const selected = Array.from(document.querySelectorAll('.img-checkbox:checked'));
|
|
if (selected.length === 0) {
|
|
alert('Please select at least one image to download.');
|
|
return;
|
|
}
|
|
selected.forEach(checkbox => {
|
|
const link = document.createElement('a');
|
|
link.href = checkbox.value;
|
|
link.download = checkbox.value.split('/').pop();
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
});
|
|
// After download, hide checkboxes and show selectBtn again
|
|
document.querySelectorAll('.img-checkbox').forEach(cb => {
|
|
cb.style.display = 'none';
|
|
cb.checked = false;
|
|
});
|
|
selectBtn.style.display = 'inline-block';
|
|
downloadBtn.remove();
|
|
};
|
|
};
|
|
}
|
|
|
|
fetch('list-images.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
albums = data;
|
|
const albumName = getQueryParam('album');
|
|
if (!albumName) {
|
|
window.location.href = 'landing.html';
|
|
return;
|
|
}
|
|
if (!albums[albumName]) {
|
|
gallery.innerHTML = '<p style="color:red;">Album not found. Please specify a valid album in the URL (e.g., ?album=Album1).</p>';
|
|
selectBtn.style.display = 'none';
|
|
return;
|
|
}
|
|
// Check if album is protected
|
|
if (albums[albumName].protected) {
|
|
let password = localStorage.getItem('album_pw_' + albumName) || '';
|
|
function requestImages(pw) {
|
|
fetch(`list-images.php?album=${encodeURIComponent(albumName)}&password=${encodeURIComponent(pw)}`)
|
|
.then(resp => {
|
|
if (resp.status === 403) {
|
|
throw new Error('Password required');
|
|
}
|
|
return resp.json();
|
|
})
|
|
.then(albumData => {
|
|
renderGallery(albumData);
|
|
setupSelectButton();
|
|
localStorage.setItem('album_pw_' + albumName, pw);
|
|
})
|
|
.catch(() => {
|
|
gallery.innerHTML = `<div style='text-align:center;padding:40px 0;'><h2>Password Required</h2><form id='pwform'><input type='password' id='album_pw' placeholder='Enter album password' style='padding:8px;font-size:18px;border-radius:4px;border:1px solid #ccc;width:220px;'><button type='submit' style='margin-left:12px;padding:8px 16px;background:#0078d4;color:#fff;border:none;border-radius:4px;font-weight:bold;cursor:pointer;'>View Album</button></form><div id='pwerror' style='color:red;margin-top:12px;'></div></div>`;
|
|
selectBtn.style.display = 'none';
|
|
if (downloadBtn) downloadBtn.remove();
|
|
document.getElementById('pwform').onsubmit = function(e) {
|
|
e.preventDefault();
|
|
const pwTry = document.getElementById('album_pw').value;
|
|
requestImages(pwTry);
|
|
};
|
|
});
|
|
}
|
|
requestImages(password);
|
|
return;
|
|
}
|
|
// Not protected, fetch images
|
|
fetch(`list-images.php?album=${encodeURIComponent(albumName)}`)
|
|
.then(resp => resp.json())
|
|
.then(albumData => {
|
|
renderGallery(albumData);
|
|
setupSelectButton();
|
|
});
|
|
})
|
|
.catch(() => {
|
|
gallery.innerHTML = '<p style="color:red;">Could not load images.</p>';
|
|
selectBtn.style.display = 'none';
|
|
if (downloadBtn) downloadBtn.remove();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|