brandon/PhotoDisplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvements to appearance

Browse Source 
additions to administrator mode

added a landing page for main page
This commit is contained in:
Brandon4466
2025-07-28 17:01:59 -07:00
parent ce8c47d50d
commit c76247119b
6 changed files with 534 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
index.html
View File

@@ -3,11 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Album Viewer</title>
<title>Photos</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
background: #181818;
color: #e0e0e0;
}
.gallery {
display: grid;
@@ -19,17 +20,44 @@
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
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;">Album Viewer</h1>
<h1 style="text-align:center;">Photos</h1>
<!-- Album selector removed. Album is chosen via URL parameter. -->
<a href="Download_All_Photos.zip" id="download-all" style="position:fixed;top:20px;left:20px;z-index:1000;display:inline-block;padding:8px 16px;background:#0078d4;color:#fff;text-decoration:none;border-radius:4px;font-weight:bold;">Download All</a>
<button id="select-images" style="position:fixed;top:20px;left:160px;z-index:1000;display:inline-block;padding:8px 16px;background:#0078d4;color:#fff;border:none;border-radius:4px;font-weight:bold;cursor:pointer;">Select</button>
<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 &copy; <a href="https://github.com/Brandon4466/galpal" target="_blank" style="color:#4fa3ff;text-decoration:none;">GalPal</a>
</footer>
<script>
const gallery = document.getElementById('gallery');
@@ -42,9 +70,15 @@
return urlParams.get(name);
}
function renderGallery(images) {
function renderGallery(albumData) {
gallery.innerHTML = '';
images.forEach((imgObj, idx) => {
// 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';
@@ -80,36 +114,66 @@
});
}
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) {
// Landing page: show album links
gallery.innerHTML = '<div style="text-align:center;padding:40px 0;"><h2>Welcome!</h2><p>Select an album to view photos:</p></div>';
const albumList = document.createElement('div');
albumList.style.display = 'flex';
albumList.style.flexWrap = 'wrap';
albumList.style.justifyContent = 'center';
albumList.style.gap = '20px';
Object.keys(albums).forEach(album => {
const link = document.createElement('a');
link.href = `index.html?album=${encodeURIComponent(album)}`;
link.textContent = album + (albums[album].protected ? ' 🔒' : '');
link.style.display = 'inline-block';
link.style.padding = '16px 32px';
link.style.background = '#0078d4';
link.style.color = '#fff';
link.style.borderRadius = '8px';
link.style.fontWeight = 'bold';
link.style.fontSize = '20px';
link.style.textDecoration = 'none';
link.style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)';
albumList.appendChild(link);
});
gallery.appendChild(albumList);
selectBtn.style.display = 'none';
window.location.href = 'landing.html';
return;
}
if (!albums[albumName]) {
@@ -128,14 +192,15 @@
}
return resp.json();
})
.then(images => {
renderGallery(images);
selectBtn.style.display = 'inline-block';
.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;
@@ -149,52 +214,15 @@
// Not protected, fetch images
fetch(`list-images.php?album=${encodeURIComponent(albumName)}`)
.then(resp => resp.json())
.then(images => {
renderGallery(images);
selectBtn.style.display = 'inline-block';
.then(albumData => {
renderGallery(albumData);
setupSelectButton();
});
selectBtn.addEventListener('click', () => {
document.querySelectorAll('.img-checkbox').forEach(cb => {
cb.style.display = 'block';
});
selectBtn.style.display = 'none';
downloadBtn = document.createElement('button');
downloadBtn.id = 'download-selected';
downloadBtn.textContent = 'Download Selected';
downloadBtn.style.position = 'fixed';
downloadBtn.style.top = '20px';
downloadBtn.style.left = '160px';
downloadBtn.style.zIndex = '1000';
downloadBtn.style.display = 'inline-block';
downloadBtn.style.padding = '8px 16px';
downloadBtn.style.background = '#0078d4';
downloadBtn.style.color = '#fff';
downloadBtn.style.border = 'none';
downloadBtn.style.borderRadius = '4px';
downloadBtn.style.fontWeight = 'bold';
downloadBtn.style.cursor = 'pointer';
document.body.appendChild(downloadBtn);
downloadBtn.addEventListener('click', () => {
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);
});
});
});
})
.catch(() => {
gallery.innerHTML = '<p style="color:red;">Could not load images.</p>';
selectBtn.style.display = 'none';
if (downloadBtn) downloadBtn.remove();
});
</script>
</body>