247 lines
13 KiB
HTML
247 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Panel</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
|
<link rel="stylesheet" href="../style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="admin.css">
|
|
</head>
|
|
<body class="admin-page">
|
|
<div id="login-modal" class="modal is-active">
|
|
<!-- <div class="modal-background"></div> -->
|
|
<div class="modal-content">
|
|
<div class="box admin-login-card has-background-light">
|
|
<div class="has-text-centered mb-4">
|
|
<p class="tag is-info is-light">Beach Party Balloons</p>
|
|
<h1 class="title is-4 mt-2">Admin Access</h1>
|
|
<p class="subtitle is-6 has-text-grey">Sign in to manage gallery photos and store status.</p>
|
|
</div>
|
|
<form id="loginForm">
|
|
<div class="field">
|
|
<p class="control has-icons-left">
|
|
<input class="input" id="passwordInput" type="password" placeholder="Password" autocomplete="current-password" required>
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<button class="button is-info is-fullwidth" id="loginButton">Log in</button>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="admin-content" style="display: none;">
|
|
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand is-size-1">
|
|
<a class="navbar-item" href="/">
|
|
<img style="background-color: white;" src="../assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo">
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="admin-hero">
|
|
<div class="container">
|
|
<p class="tag is-light admin-kicker">Control Center</p>
|
|
<h1 class="title is-2 has-text-white">Admin Panel</h1>
|
|
<p class="subtitle is-5 has-text-white-bis">Upload new work, curate your gallery, and update the store status in one place.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container padding">
|
|
<div class="tabs is-boxed">
|
|
<ul>
|
|
<li class="is-active" data-tab="photo-tab"><a>Photo Gallery</a></li>
|
|
<li data-tab="status-tab"><a>Store Status</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="photo-tab" class="tab-content">
|
|
<div class="columns is-variable is-5 photo-columns">
|
|
<div class="column upload-column">
|
|
<div class="box admin-card">
|
|
<p class="is-size-5 has-text-weight-semibold mb-3">Upload new photo</p>
|
|
<p class="is-size-7 has-text-grey mb-4">Add a caption and tags to keep the gallery searchable.</p>
|
|
<form id="uploadForm" novalidate>
|
|
<div class="field">
|
|
<label class="label">Photo</label>
|
|
<div class="control">
|
|
<input class="input has-background-light has-text-black" type="file" id="photoInput" accept="image/*" multiple required>
|
|
<p class="help is-size-7 has-text-grey">Select one or many images; each will be converted to WebP automatically.</p>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label has-text-dark">Caption</label>
|
|
<div class="control">
|
|
<input class="input has-background-light has-text-dark" type="text" id="captionInput" placeholder="A beautiful balloon arrangement." required>
|
|
<p class="help is-size-7 mt-1"><button id="captionToTags" type="button" class="button is-ghost is-small p-0">Use caption words as tags</button></p>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label has-text-dark">Tags (comma-separated)</label>
|
|
<div class="control">
|
|
<input class="input has-background-light has-text-black" type="text" id="tagsInput" placeholder="classic, birthday" list="tagSuggestions" required>
|
|
<datalist id="tagSuggestions"></datalist>
|
|
<p class="help is-size-7 has-text-grey">Pick from the curated list or presets; up to 8 tags per photo.</p>
|
|
</div>
|
|
<div class="buttons are-small mt-2" id="quickTagButtons" aria-label="Quick tag suggestions">
|
|
</div>
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-primary is-fullwidth" id="uploadButton">Upload</button>
|
|
</div>
|
|
<progress id="uploadProgress" class="progress is-primary mt-3" value="0" max="100" style="display: none;"></progress>
|
|
<p id="uploadStatus" class="help mt-3"></p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="column manage-column">
|
|
<div class="box admin-card">
|
|
<div class="is-flex is-justify-content-space-between is-align-items-center mb-3">
|
|
<div>
|
|
<p class="is-size-5 has-text-weight-semibold mb-1">Manage existing photos</p>
|
|
<p class="is-size-7 has-text-grey">Edit captions/tags or delete images you no longer want visible.</p>
|
|
</div>
|
|
<span class="tag is-info is-light"><i class="fas fa-images mr-2"></i>Gallery</span>
|
|
</div>
|
|
<div class="box has-background-light mb-4" id="bulkPanel" style="display: none;">
|
|
<div class="columns is-vcentered is-mobile">
|
|
<div class="column is-narrow">
|
|
<button class="button is-small has-text-dark has-background-primary" id="selectAllPhotos">Select all</button>
|
|
</div>
|
|
<div class="column">
|
|
<p class="is-size-7 has-text-dark" id="selectedCount">0 selected</p>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<button class="button is-text is-small has-text-dark" id="clearSelection">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="columns is-multiline">
|
|
<div class="column is-full-mobile is-half-tablet">
|
|
<label class="label is-size-7 has-text-dark">New caption (optional)</label>
|
|
<input class="input is-small has-background-white has-text-dark" type="text" id="bulkCaption" placeholder="Leave blank to keep captions">
|
|
</div>
|
|
<div class="column is-full-mobile is-half-tablet">
|
|
<label class="label is-size-7 has-text-dark">Tags (comma-separated, optional)</label>
|
|
<input class="input is-small has-background-white has-text-dark" type="text" id="bulkTags" placeholder="e.g. arch, pastel">
|
|
<label class="checkbox is-size-7 mt-1 has-text-dark">
|
|
<input type="checkbox" id="bulkAppendTags"> Append to existing tags (unchecked = replace)
|
|
</label>
|
|
</div>
|
|
<div class="column is-full-mobile">
|
|
<div class="buttons are-small">
|
|
<button class="button is-primary" id="applyBulkEdits" disabled>Apply to selected</button>
|
|
<button class="button is-danger is-light" id="bulkDelete" disabled>Delete selected</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="manage-gallery" class="columns is-multiline is-variable is-4 admin-gallery-grid">
|
|
<!-- Existing photos will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status-tab" class="tab-content" style="display: none;">
|
|
<div class="box admin-card">
|
|
<div class="is-flex is-align-items-center is-justify-content-space-between mb-3">
|
|
<div>
|
|
<p class="is-size-5 has-text-weight-semibold mb-1">Store status & scrolling message</p>
|
|
<p class="is-size-7 has-text-grey">Update the homepage banner and closed message.</p>
|
|
</div>
|
|
<span class="tag is-warning is-light"><i class="fas fa-bell mr-2"></i>Status</span>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label has-text-dark">Scrolling Message</label>
|
|
<div class="control">
|
|
<input class="input has-background-light has-text-dark" id="scrollingMessageInput" type="text" placeholder="Enter message for the scrolling bar">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="isClosedCheckbox">
|
|
Is the store closed?
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label has-text-dark">Closed Message</label>
|
|
<div class="control">
|
|
<input class="input has-background-light has-text-dark" id="closedMessageInput" type="text" placeholder="Enter message to display when closed">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<button id="updateButton" class="button is-primary">Update</button>
|
|
</div>
|
|
|
|
<div id="response" class="notification is-light mt-4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Photo Modal -->
|
|
<div id="editModal" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card has-background-light">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title has-text-dark has-background-light">Edit Photo</p>
|
|
<button class="delete" aria-label="close"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<input type="hidden" id="editPhotoId">
|
|
<div class="field">
|
|
<label class="label">Caption</label>
|
|
<div class="control">
|
|
<input class="input has-background-light has-text-black" type="text" id="editCaption">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Tags</label>
|
|
<div class="control">
|
|
<input class="input has-background-light has-text-black" type="text" id="editTags">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="modal-card-foot">
|
|
<button id="saveChanges" class="button is-success">Save changes</button>
|
|
<button class="button">Cancel</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Delete Confirmation Modal -->
|
|
<div id="bulkDeleteModal" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Confirm Deletion</p>
|
|
<button class="delete" aria-label="close"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<p>Are you sure you want to delete the selected photos? This action cannot be undone.</p>
|
|
<p id="bulk-delete-count" class="has-text-weight-bold"></p>
|
|
</section>
|
|
<footer class="modal-card-foot">
|
|
<button id="confirmBulkDelete" class="button is-danger">Delete</button>
|
|
<button class="button" id="cancelBulkDelete">Cancel</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="admin.js" defer></script>
|
|
</body>
|
|
</html>
|