dongho/photo-showcase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Dongho Kim
2025-12-13 20:08:01 +01:00
commit cc34dd0fd9
21 changed files with 5645 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/App.jsx Normal file
View File

@@ -0,0 +1,100 @@
import React, { useState, useEffect } from 'react';
import Timeline from './components/Timeline';
import PhotoDetail from './components/PhotoDetail';
import Admin from './components/Admin';
import { fetchPhotos } from './data/photos';
import { Settings, Sun, Moon } from 'lucide-react';
function App() {
const [view, setView] = useState(() => {
return window.location.pathname === '/admin' ? 'admin' : 'timeline';
});
const [activePhoto, setActivePhoto] = useState(null);
const [photos, setPhotos] = useState([]);
// Theme State
const [theme, setTheme] = useState(() => {
return localStorage.getItem('theme_preference') || 'dark';
});
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme_preference', theme);
}, [theme]);
const toggleTheme = () => {
setTheme(prev => prev === 'dark' ? 'light' : 'dark');
};
const loadPhotos = async () => {
const data = await fetchPhotos();
setPhotos(data);
};
useEffect(() => {
loadPhotos();
}, [view]);
// Handle browser back/forward
useEffect(() => {
const handlePopState = () => {
setView(window.location.pathname === '/admin' ? 'admin' : 'timeline');
};
window.addEventListener('popstate', handlePopState);
return () => window.removeEventListener('popstate', handlePopState);
}, []);
// Update URL when view changes
useEffect(() => {
const path = view === 'admin' ? '/admin' : '/';
if (window.location.pathname !== path) {
window.history.pushState({}, '', path);
}
}, [view]);
if (view === 'admin') {
return <Admin onBack={() => setView('timeline')} onUpdate={loadPhotos} />;
}
return (
<div className="app-container">
{/* Theme Toggle */}
<div style={{ position: 'fixed', top: '20px', right: '20px', zIndex: 50 }}>
<button
onClick={toggleTheme}
style={{
background: 'transparent',
color: 'var(--text-primary)',
padding: '8px',
borderRadius: '50%',
border: 'none',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
opacity: 0.7,
transition: 'opacity 0.2s'
}}
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.7'}
>
{theme === 'dark' ? <Sun size={20} color="white" /> : <Moon size={20} color="black" />}
</button>
</div>
{/* Main Timeline View */}
<Timeline photos={photos} onSelectPhoto={setActivePhoto} />
{/* Detail Overlay */}
{activePhoto && (
<PhotoDetail
photo={activePhoto}
onClose={() => setActivePhoto(null)}
/>
)}
</div>
);
}
export default App;

1
src/assets/react.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

443
src/components/Admin.jsx Normal file
View File

@@ -0,0 +1,443 @@
import React, { useState, useEffect } from 'react';
import { Upload, X, Save, Trash2, ArrowLeft, CheckCircle, AlertCircle } from 'lucide-react';
import { uploadPhoto, fetchPhotos, deletePhotoById } from '../data/photos';
import exifr from 'exifr';
const Admin = ({ onBack, onUpdate }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [pin, setPin] = useState('');
// Form State
const [imageFile, setImageFile] = useState(null);
const [preview, setPreview] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [notification, setNotification] = useState(null); // { type: 'success'|'error', message: '' }
const [deleteTarget, setDeleteTarget] = useState(null);
const showNotification = (type, message) => {
setNotification({ type, message });
setTimeout(() => setNotification(null), 3000);
};
const [formData, setFormData] = useState({
title: '',
date: new Date().toISOString().split('T')[0],
location: '',
camera: '',
lens: '',
iso: '',
aperture: '',
shutter: '',
focalLength: '',
description: '',
gps: null
});
const [localPhotos, setLocalPhotos] = useState([]);
useEffect(() => {
// Refresh list on mount
refreshList();
}, []);
const refreshList = async () => {
const all = await fetchPhotos();
setLocalPhotos(all);
};
const handleLogin = (e) => {
e.preventDefault();
const envPin = import.meta.env.VITE_ADMIN_PIN || '1234';
if (pin === envPin) {
setIsAuthenticated(true);
} else {
alert('Invalid PIN');
}
};
const handleImageChange = async (e) => {
const file = e.target.files[0];
if (file) {
setImageFile(file);
// Extract Metadata
try {
const exifData = await exifr.parse(file);
if (exifData) {
const make = exifData.Make || '';
const model = exifData.Model || '';
const camera = (make + ' ' + model).trim();
const date = exifData.DateTimeOriginal ? new Date(exifData.DateTimeOriginal).toISOString().split('T')[0] : formData.date;
let location = '';
if (exifData.latitude && exifData.longitude) {
try {
const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${exifData.latitude}&lon=${exifData.longitude}`, {
headers: {
'User-Agent': 'PhotoShowcaseApp/1.0'
}
});
if (res.ok) {
const data = await res.json();
const address = data.address;
if (address) {
const city = address.city || address.town || address.village || address.suburb;
const country = address.country;
if (city && country) {
location = `${city}, ${country}`;
} else if (country) {
location = country;
}
}
}
} catch (err) {
console.warn("Failed to fetch location name", err);
}
}
setFormData(prev => ({
...prev,
date: date,
camera: camera,
iso: exifData.ISO ? exifData.ISO.toString() : prev.iso,
aperture: exifData.FNumber ? `f/${exifData.FNumber}` : prev.aperture,
shutter: exifData.ExposureTime ? (exifData.ExposureTime < 1 ? `1/${Math.round(1 / exifData.ExposureTime)}` : exifData.ExposureTime.toString()) : prev.shutter,
focalLength: exifData.FocalLength ? `${exifData.FocalLength}mm` : prev.focalLength,
lens: exifData.LensModel || prev.lens,
location: location || prev.location,
gps: (exifData.latitude && exifData.longitude) ? { lat: exifData.latitude, lng: exifData.longitude } : prev.gps
}));
}
} catch (error) {
console.warn("Failed to extract EXIF data", error);
}
// Handle Image Preview (Supports DNG/Raw via embedded thumbnail)
let imageSource = null;
let isBlob = false;
try {
// Try to extract thumbnail if it looks like a raw file
if (file.name.toLowerCase().endsWith('.dng')) {
const thumb = await exifr.thumbnail(file);
if (thumb) {
imageSource = URL.createObjectURL(new Blob([thumb]));
isBlob = true;
}
}
} catch (e) {
console.warn("Could not extract thumbnail from DNG", e);
}
// Fallback to standard FileReader if no thumbnail found or not a DNG
if (!imageSource) {
imageSource = await new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => resolve(e.target.result);
reader.readAsDataURL(file);
});
}
const img = new Image();
img.src = imageSource;
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = 1200; // Limit width
const scale = maxWidth / img.width;
if (scale < 1) {
canvas.width = maxWidth;
canvas.height = img.height * scale;
} else {
canvas.width = img.width;
canvas.height = img.height;
}
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
setPreview(canvas.toDataURL('image/jpeg', 0.8)); // Compress quality
if (isBlob) {
URL.revokeObjectURL(imageSource);
}
};
}
};
const handleSubmit = async (e) => {
e.preventDefault();
if (isSubmitting) return;
if (!preview) {
showNotification('error', "Please select an image");
return;
}
setIsSubmitting(true);
const metadata = {
title: formData.title,
date: formData.date,
location: formData.location,
camera: formData.camera,
lens: formData.lens,
settings: {
iso: formData.iso,
aperture: formData.aperture,
shutter: formData.shutter,
focalLength: formData.focalLength
},
description: formData.description,
gps: formData.gps
};
try {
await uploadPhoto(imageFile, metadata);
showNotification('success', 'Photo added successfully!');
// Reset form
setFormData({
title: '',
date: new Date().toISOString().split('T')[0],
location: '',
camera: '',
lens: '',
iso: '',
aperture: '',
shutter: '',
focalLength: '',
description: '',
gps: null
});
setPreview('');
setImageFile(null);
refreshList();
if (onUpdate) onUpdate();
} catch (err) {
showNotification('error', 'Failed to upload.');
console.error(err);
} finally {
setIsSubmitting(false);
}
};
const handleDelete = (id) => {
setDeleteTarget(id);
};
const confirmDelete = async () => {
if (!deleteTarget) return;
try {
await deletePhotoById(deleteTarget);
showNotification('success', 'Photo deleted');
refreshList();
if (onUpdate) onUpdate();
} catch (error) {
console.error(error);
showNotification('error', 'Failed to delete photo');
} finally {
setDeleteTarget(null);
}
};
if (!isAuthenticated) {
return (
<div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-primary)' }}>
<form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '300px' }}>
<h2 style={{ textAlign: 'center' }}>Admin Access</h2>
<input
type="password"
value={pin}
onChange={(e) => setPin(e.target.value)}
placeholder="Enter PIN (1234)"
style={{ padding: '0.8rem', borderRadius: '8px', border: '1px solid var(--border)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
/>
<button type="submit" style={{ padding: '0.8rem', background: 'var(--accent)', borderRadius: '8px', fontWeight: 'bold' }}>Unlock</button>
<button type="button" onClick={onBack} style={{ marginTop: '1rem', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Back to Site</button>
</form>
</div>
);
}
return (
<div style={{ minHeight: '100vh', background: 'var(--bg-primary)', padding: '2rem' }}>
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '2rem' }}>
<h1 style={{ fontSize: '1.5rem' }}>Admin Dashboard</h1>
<button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: '8px', background: 'var(--bg-secondary)', padding: '8px 16px', borderRadius: '8px' }}>
<ArrowLeft size={16} /> Back
</button>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
{/* Upload Form */}
<div style={{ background: 'var(--bg-secondary)', padding: '1.5rem', borderRadius: '12px' }}>
<h2 style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '8px' }}>
<Upload size={20} /> Upload Photo
</h2>
{notification && (
<div style={{
padding: '1rem',
borderRadius: '8px',
marginBottom: '1rem',
background: notification.type === 'success' ? 'rgba(34, 197, 94, 0.1)' : 'rgba(239, 68, 68, 0.1)',
color: notification.type === 'success' ? '#22c55e' : '#ef4444',
border: `1px solid ${notification.type === 'success' ? '#22c55e' : '#ef4444'}`,
display: 'flex',
alignItems: 'center',
gap: '8px',
fontSize: '0.9rem'
}}>
{notification.type === 'success' ? <CheckCircle size={18} /> : <AlertCircle size={18} />}
{notification.message}
</div>
)}
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<div style={{ border: '2px dashed var(--border)', borderRadius: '8px', padding: '1rem', textAlign: 'center', cursor: 'pointer', position: 'relative', overflow: 'hidden' }}>
<input
type="file"
accept="image/*,.dng,.DNG"
onChange={handleImageChange}
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0, cursor: 'pointer' }}
/>
{preview ? (
<img src={preview} alt="Preview" style={{ width: '100%', maxHeight: '200px', objectFit: 'contain' }} />
) : (
<div style={{ padding: '2rem', color: 'var(--text-secondary)' }}>
Click to select image
</div>
)}
</div>
<input required placeholder="Title" value={formData.title} onChange={e => setFormData({ ...formData, title: e.target.value })} className="input-field" />
<input type="date" required value={formData.date} onChange={e => setFormData({ ...formData, date: e.target.value })} className="input-field" />
<input placeholder="Location" value={formData.location} onChange={e => setFormData({ ...formData, location: e.target.value })} className="input-field" />
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<input placeholder="Camera" value={formData.camera} onChange={e => setFormData({ ...formData, camera: e.target.value })} className="input-field" />
<input placeholder="Lens" value={formData.lens} onChange={e => setFormData({ ...formData, lens: e.target.value })} className="input-field" />
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<input placeholder="ISO" value={formData.iso} onChange={e => setFormData({ ...formData, iso: e.target.value })} className="input-field" />
<input placeholder="Aperture" value={formData.aperture} onChange={e => setFormData({ ...formData, aperture: e.target.value })} className="input-field" />
<input placeholder="Shutter Speed" value={formData.shutter} onChange={e => setFormData({ ...formData, shutter: e.target.value })} className="input-field" />
<input placeholder="Focal Length" value={formData.focalLength} onChange={e => setFormData({ ...formData, focalLength: e.target.value })} className="input-field" />
</div>
<textarea
placeholder="Description"
value={formData.description}
onChange={e => setFormData({ ...formData, description: e.target.value })}
className="input-field"
rows={3}
/>
<button type="submit" disabled={isSubmitting} style={{ background: isSubmitting ? 'var(--text-secondary)' : 'var(--accent)', color: 'white', padding: '1rem', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', fontWeight: 600, cursor: isSubmitting ? 'not-allowed' : 'pointer' }}>
{isSubmitting ? 'Saving...' : <><Save size={18} /> Save Photo</>}
</button>
</form>
</div>
{/* List of uploaded photos */}
<div style={{ background: 'var(--bg-secondary)', padding: '1.5rem', borderRadius: '12px' }}>
<h2 style={{ marginBottom: '1.5rem' }}>Your Uploads</h2>
{localPhotos.length === 0 ? (
<p style={{ color: 'var(--text-secondary)' }}>No local uploads yet.</p>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{localPhotos.map(photo => (
<div key={photo.id} style={{ display: 'flex', gap: '1rem', padding: '1rem', background: 'var(--bg-primary)', borderRadius: '8px' }}>
<img src={photo.url} alt={photo.title} style={{ width: '60px', height: '60px', objectFit: 'cover', borderRadius: '4px' }} />
<div style={{ flex: 1 }}>
<div style={{ fontWeight: 'bold' }}>{photo.title}</div>
<div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>{photo.date}</div>
</div>
<button onClick={() => handleDelete(photo.id)} style={{ color: '#ef4444' }}>
<Trash2 size={18} />
</button>
</div>
))}
</div>
)}
</div>
</div>
</div>
{/* Delete Confirmation Modal */}
{deleteTarget && (
<div style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'rgba(0,0,0,0.7)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1000
}}>
<div style={{
background: 'var(--bg-secondary)',
padding: '2rem',
borderRadius: '12px',
maxWidth: '400px',
width: '90%',
textAlign: 'center',
border: '1px solid var(--border)'
}}>
<h3 style={{ marginBottom: '1rem' }}>Delete Photo?</h3>
<p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>Are you sure you want to delete this photo? This action cannot be undone.</p>
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
<button
onClick={() => setDeleteTarget(null)}
style={{
padding: '0.8rem 1.5rem',
borderRadius: '8px',
background: 'var(--bg-primary)',
color: 'var(--text-primary)',
border: '1px solid var(--border)'
}}
>
Cancel
</button>
<button
onClick={confirmDelete}
style={{
padding: '0.8rem 1.5rem',
borderRadius: '8px',
background: '#ef4444',
color: 'white',
fontWeight: 'bold'
}}
>
Delete
</button>
</div>
</div>
</div>
)}
<style>{`
.input-field {
background: var(--bg-primary);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.8rem;
border-radius: 6px;
font-size: 0.9rem;
}
.input-field:focus {
outline: 2px solid var(--accent);
}
`}</style>
</div>
);
};
export default Admin;

164
src/components/PhotoDetail.jsx Normal file
View File

@@ -0,0 +1,164 @@
import React, { useEffect, useState } from 'react';
import { X, Camera, Aperture, Clock, Gauge, ArrowLeft, MapPin } from 'lucide-react';
const PhotoDetail = ({ photo, onClose }) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
setLoaded(true);
// Disable scroll on body when modal is open
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = 'auto';
};
}, []);
if (!photo) return null;
return (
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
background: 'var(--bg-primary)',
zIndex: 100,
display: 'flex',
flexDirection: 'column',
opacity: loaded ? 1 : 0,
transition: 'opacity 0.3s ease',
overflowY: 'auto'
}}>
{/* Navbar/Header for the modal */}
<div style={{
padding: '1.5rem',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 10,
background: 'linear-gradient(to bottom, rgba(0,0,0,0.6), transparent)'
}}>
<button
onClick={onClose}
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
color: 'white',
background: 'rgba(0,0,0,0.3)',
padding: '8px 16px',
borderRadius: '20px',
backdropFilter: 'blur(4px)'
}}
>
<ArrowLeft size={20} /> <span style={{ fontSize: '0.9rem' }}>Back</span>
</button>
</div>
<div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
{/* Main Image Area */}
<div style={{
height: '60vh',
width: '100%',
position: 'relative',
background: '#000'
}}>
<img
src={photo.url}
alt={photo.title}
style={{
width: '100%',
height: '100%',
objectFit: 'contain'
}}
/>
</div>
{/* Content/Metadata Area */}
<div style={{
padding: '2rem',
maxWidth: '800px',
width: '100%',
margin: '0 auto',
animation: 'slideUp 0.4s ease-out 0.2s backwards'
}}>
<div style={{
marginBottom: '2rem',
borderBottom: '1px solid var(--border)',
paddingBottom: '2rem'
}}>
<h1 style={{ fontSize: '2.5rem', fontWeight: 700, marginBottom: '0.5rem', lineHeight: 1.1 }}>{photo.title}</h1>
<p style={{ color: 'var(--text-secondary)', fontSize: '1.1rem' }}>{photo.description}</p>
<div style={{ marginTop: '1rem', display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--accent)' }}>
<MapPin size={18} /> {photo.location}
</div>
<div style={{ marginTop: '0.5rem', color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
Captured on {photo.date}
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1.5rem' }}>
<MetadataItem icon={<Camera />} label="Camera" value={photo.camera} />
<MetadataItem icon={<Gauge />} label="Lens" value={photo.lens} />
<MetadataItem icon={<Clock />} label="Shutter" value={photo.settings.shutter} />
<MetadataItem icon={<Aperture />} label="Aperture" value={photo.settings.aperture} />
<MetadataItem icon={<div style={{ fontWeight: 'bold', fontSize: '0.8rem' }}>ISO</div>} label="ISO" value={photo.settings.iso} />
<MetadataItem icon={<div style={{ fontWeight: 'bold', fontSize: '0.8rem' }}>mm</div>} label="Focal Length" value={photo.settings.focalLength} />
</div>
{photo.gps && (
<div style={{ marginTop: '3rem' }}>
<h3 style={{ fontSize: '1.2rem', marginBottom: '1rem', fontWeight: 600 }}>Location</h3>
<div style={{
width: '100%',
height: '300px',
background: 'var(--bg-secondary)',
borderRadius: '12px',
overflow: 'hidden',
position: 'relative'
}}>
<iframe
width="100%"
height="100%"
frameBorder="0"
scrolling="no"
marginHeight="0"
marginWidth="0"
src={`https://www.openstreetmap.org/export/embed.html?bbox=${photo.gps.lng - 0.01}%2C${photo.gps.lat - 0.01}%2C${photo.gps.lng + 0.01}%2C${photo.gps.lat + 0.01}&layer=mapnik&marker=${photo.gps.lat}%2C${photo.gps.lng}`}
style={{ border: 0, filter: 'var(--map-filter)', transition: 'filter 0.3s ease' }}
title="Location Map"
></iframe>
</div>
</div>
)}
</div>
</div>
<style>{`
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
`}</style>
</div>
);
};
const MetadataItem = ({ icon, label, value }) => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
<div style={{ color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.875rem' }}>
{icon} {label}
</div>
<div style={{ fontSize: '1.1rem', fontWeight: 500 }}>
{value}
</div>
</div>
);
export default PhotoDetail;

114
src/components/Timeline.jsx Normal file
View File

@@ -0,0 +1,114 @@
import React from 'react';
import { Camera, Calendar, MapPin } from 'lucide-react';
const Timeline = ({ photos, onSelectPhoto }) => {
return (
<div className="timeline-container">
<header style={{
padding: '2rem',
textAlign: 'center',
position: 'sticky',
top: 0,
zIndex: 10,
background: 'var(--header-bg)',
backdropFilter: 'blur(10px)',
borderBottom: '1px solid var(--border)'
}}>
<h1 style={{ fontSize: '1.5rem', fontWeight: 600, letterSpacing: '-0.02em' }}>
{import.meta.env.VITE_APP_TITLE || 'Chronicle'}
</h1>
<p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem', marginTop: '0.5rem' }}>
{import.meta.env.VITE_APP_DESCRIPTION || 'A visual journey through time'}
</p>
</header>
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '2rem 1rem' }}>
{photos.map((photo, index) => (
<div
key={photo.id}
onClick={() => onSelectPhoto(photo)}
style={{
marginBottom: '4rem',
cursor: 'pointer',
opacity: 0,
animation: `fadeInUp 0.6s ease-out forwards ${index * 0.1}s`,
position: 'relative'
}}
className="timeline-item"
>
{/* Timeline connector line (optional, purely aesthetic) */}
{index !== photos.length - 1 && (
<div style={{
position: 'absolute',
left: '50%',
bottom: '-4rem',
top: 'calc(100% + 1rem)',
width: '1px',
background: 'linear-gradient(to bottom, var(--border), transparent)',
transform: 'translateX(-50%)',
zIndex: -1
}} />
)}
<div style={{
position: 'relative',
borderRadius: '12px',
overflow: 'hidden',
boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'scale(1.02)';
e.currentTarget.style.boxShadow = '0 12px 30px rgba(0,0,0,0.3)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'scale(1)';
e.currentTarget.style.boxShadow = '0 4px 20px rgba(0,0,0,0.2)';
}}
>
<img
src={photo.url}
alt={photo.title}
style={{
width: '100%',
height: 'auto',
aspectRatio: '3/2',
objectFit: 'cover',
display: 'block'
}}
/>
<div style={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
padding: '1.5rem',
background: 'linear-gradient(to top, rgba(0,0,0,0.9), transparent)',
color: 'white'
}}>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.5rem' }}>{photo.title}</h3>
<div style={{ display: 'flex', gap: '1rem', fontSize: '0.875rem', opacity: 0.8 }}>
<span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
<Calendar size={14} /> {photo.date}
</span>
<span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
<MapPin size={14} /> {photo.location}
</span>
</div>
</div>
</div>
</div>
))}
</div>
<style>{`
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
`}</style>
</div>
);
};
export default Timeline;

44
src/data/photos.js Normal file
View File

@@ -0,0 +1,44 @@
// API Client
const API_BASE = '/api/photos';
export const fetchPhotos = async () => {
try {
const res = await fetch(API_BASE);
if (!res.ok) throw new Error('Failed to fetch photos');
return await res.json();
} catch (error) {
console.error(error);
return [];
}
};
export const uploadPhoto = async (file, metadata) => {
const formData = new FormData();
formData.append('image', file);
formData.append('metadata', JSON.stringify(metadata));
const res = await fetch(API_BASE, {
method: 'POST',
body: formData
});
if (!res.ok) throw new Error('Upload failed');
return await res.json();
};
export const deletePhotoById = async (id) => {
const res = await fetch(`${API_BASE}/${id}`, {
method: 'DELETE'
});
if (!res.ok) throw new Error('Delete failed');
return true;
};
// Legacy exports to prevent instant crash before refactoring components
// But these will now throw errors or do nothing if called synchronously
export const getPhotos = () => [];
export const addPhoto = () => { };
export const deletePhoto = () => { };
export const PHOTOS = [];

81
src/index.css Normal file
View File

@@ -0,0 +1,81 @@
:root {
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--accent: #3b82f6;
/* Subtle blue, can be changed */
--border: #27272a;
/* Spacing */
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
/* Transitions */
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* Component Colors */
--header-bg: rgba(10, 10, 10, 0.8);
/* Map Tile Filter: Dark Mode */
--map-filter: grayscale(0.5) invert(1) hue-rotate(180deg) brightness(0.9) contrast(1.1);
}
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f4f4f5;
--text-primary: #0a0a0a;
--text-secondary: #52525b;
--border: #e4e4e7;
--header-bg: rgba(255, 255, 255, 0.8);
/* Map Tile Filter: Light Mode */
--map-filter: grayscale(0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
button {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-family: inherit;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}

10
src/main.jsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)