<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery - Modern Album Collection</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<!-- RSS Feed Discovery -->
<link rel="alternate" type="application/rss+xml" title="Photo Gallery RSS Feed" href="api.php?action=getRSSFeed" id="rss-feed-link">
</head>
<body>
<div class="app">
<!-- Header -->
<header class="header">
<div class="container">
<h1 class="logo">Photo Gallery</h1>
<div class="header-info">
<span id="album-count">Loading...</span>
<!-- Authentication Controls -->
<div class="auth-controls" id="auth-section">
<button class="btn btn-outline" id="login-btn">Login</button>
<div class="user-info" id="user-info" style="display: none;">
<span id="username-display"></span>
<button class="btn btn-outline" id="logout-btn">Logout</button>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main">
<div class="container">
<!-- Admin Controls -->
<div class="admin-controls">
<button class="btn btn-primary" id="create-album-btn">Create Album</button>
<button class="btn btn-secondary" id="manage-tags-btn">Manage Tags</button>
<button class="btn btn-secondary" id="rss-config-btn">RSS Settings</button>
<div class="upload-zone" id="upload-zone">
<div class="upload-content">
<div class="upload-icon">📁</div>
<p>Drag & drop photos here or click to select</p>
<input type="file" id="file-input" multiple accept="image/*" style="display: none;">
</div>
</div>
</div>
<!-- Albums Grid -->
<div class="albums-section">
<h2 class="section-title">Albums</h2>
<div class="tag-filter" id="tag-filter">
<!-- Tag filters will be loaded here -->
</div>
<div class="albums-grid" id="albums-grid">
<!-- Albums will be loaded here -->
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>Loading albums...</p>
</div>
</div>
</div>
</main>
<!-- Album Modal -->
<div class="modal" id="album-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Album 1</h3>
<div class="modal-header-actions">
<button class="btn btn-outline btn-sm" id="copy-album-link-btn" title="Copy album link">🔗 Copy Link</button>
<button class="close-btn" id="close-modal">×</button>
</div>
</div>
<div class="modal-body">
<div class="photos-grid" id="photos-grid">
<!-- Photos will be loaded here -->
</div>
<div class="modal-loading" id="modal-loading">
<div class="spinner"></div>
<p>Loading photos...</p>
</div>
</div>
</div>
</div>
<!-- Slideshow Modal -->
<div class="slideshow-modal" id="slideshow-modal">
<div class="slideshow-content">
<button class="slideshow-close" id="slideshow-close">×</button>
<button class="slideshow-delete" id="slideshow-delete" style="display: none;" title="Delete photo">🗑️</button>
<button class="slideshow-prev" id="slideshow-prev">‹</button>
<button class="slideshow-next" id="slideshow-next">›</button>
<div class="slideshow-image-container">
<img class="slideshow-image" id="slideshow-image" alt="Photo">
</div>
<!-- Auto-play controls -->
<div class="slideshow-controls">
<button class="play-pause-btn" id="play-pause-btn">⏸️</button>
<div class="slideshow-progress">
<div class="slideshow-progress-bar" id="slideshow-progress-bar"></div>
</div>
<div class="slideshow-timer" id="slideshow-timer">4s</div>
<span id="slideshow-counter">1 / 10</span>
</div>
</div>
</div>
<!-- Create/Edit Album Modal -->
<div class="modal" id="album-form-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="album-form-title">Create Album</h3>
<button class="close-btn" id="close-album-form">×</button>
</div>
<div class="modal-body">
<form id="album-form">
<div class="form-group">
<label for="album-title">Album Title</label>
<input type="text" id="album-title" name="title" required maxlength="100">
</div>
<div class="form-group">
<label for="album-description">Description</label>
<textarea id="album-description" name="description" rows="3" maxlength="500"></textarea>
</div>
<div class="form-group">
<label>Tags</label>
<div class="tag-selector" id="album-tag-selector">
<!-- Tags will be loaded here -->
</div>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="album-rss-enabled" name="is_rss_enabled">
<span class="checkmark"></span>
Include in RSS feed
</label>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancel-album-form">Cancel</button>
<button type="submit" class="btn btn-primary" id="save-album">Save Album</button>
</div>
</form>
</div>
</div>
</div>
<!-- Tag Management Modal -->
<div class="modal" id="tag-management-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Manage Tags</h3>
<button class="close-btn" id="close-tag-management">×</button>
</div>
<div class="modal-body">
<div class="tag-creation">
<h4>Create New Tag</h4>
<form id="tag-form">
<div class="form-row">
<div class="form-group">
<label for="tag-name">Tag Name</label>
<input type="text" id="tag-name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="tag-color">Color</label>
<input type="color" id="tag-color" name="color" value="#3498db">
</div>
<button type="submit" class="btn btn-primary">Add Tag</button>
</div>
</form>
</div>
<div class="existing-tags">
<h4>Existing Tags</h4>
<div class="tags-list" id="tags-list">
<!-- Existing tags will be loaded here -->
</div>
</div>
</div>
</div>
</div>
<!-- RSS Configuration Modal -->
<div class="modal" id="rss-config-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">RSS Feed Configuration</h3>
<button class="close-btn" id="close-rss-config">×</button>
</div>
<div class="modal-body">
<form id="rss-config-form">
<div class="form-group">
<label for="rss-title">RSS Feed Title</label>
<input type="text" id="rss-title" name="rss_title" required maxlength="100">
</div>
<div class="form-group">
<label for="rss-description">RSS Feed Description</label>
<textarea id="rss-description" name="rss_description" rows="3" maxlength="500"></textarea>
</div>
<div class="form-group">
<label for="rss-max-items">Maximum Items in Feed</label>
<input type="number" id="rss-max-items" name="rss_max_items" min="1" max="100" value="50">
</div>
<div class="form-group">
<label for="rss-base-url">Base URL</label>
<input type="url" id="rss-base-url" name="rss_base_url" required>
</div>
<div class="form-group">
<label>Albums in RSS Feed</label>
<div class="album-selector" id="rss-album-selector">
<!-- Albums will be loaded here -->
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancel-rss-config">Cancel</button>
<button type="submit" class="btn btn-primary">Save RSS Settings</button>
</div>
</form>
</div>
</div>
</div>
<!-- Upload Progress Modal -->
<div class="modal" id="upload-progress-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Uploading Photos</h3>
</div>
<div class="modal-body">
<div class="upload-progress">
<div class="progress-bar">
<div class="progress-fill" id="upload-progress-fill"></div>
</div>
<div class="upload-status" id="upload-status">Preparing upload...</div>
<div class="upload-details" id="upload-details"></div>
</div>
</div>
</div>
</div>
<!-- Album Selection Modal for Upload -->
<div class="modal" id="album-selection-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Select Album for Upload</h3>
<button class="close-btn" id="close-album-selection">×</button>
</div>
<div class="modal-body">
<div class="album-selection-grid" id="album-selection-grid">
<!-- Albums will be loaded here -->
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancel-upload">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Login Modal -->
<div class="modal" id="login-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Login</h3>
<button class="close-btn" id="close-login">×</button>
</div>
<div class="modal-body">
<form id="login-form">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-secondary" id="cancel-login">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>