chris
07b83c7ae8
This commit introduces a web-based admin UI to manage the store's status, backed by a simple Node.js/Express server for file writing. Key features: - **Admin UI (, ):** A form to update the scrolling message and closed status. It provides a user-friendly experience with loading states, in-page feedback, and change detection. - **Node.js Backend ():** A simple Express server that serves the static site and provides a endpoint. This endpoint receives data from the admin UI, authenticates it, and writes it to . - **Enhanced Security:** The password is no longer hardcoded in the client-side JavaScript. Authentication is handled server-side, and the password is read from a file for local development or an environment variable in production. - **Project Setup (, ):** The project is now a formal Node.js project with dependencies (, , ) and a file to exclude .
81 lines
3.4 KiB
HTML
81 lines
3.4 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 - Store Status</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<style>
|
|
.notification.is-hidden {
|
|
display: none;
|
|
}
|
|
#spinner {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="columns is-centered">
|
|
<div class="column is-half">
|
|
<div class="box">
|
|
<h1 class="title">Update Store Status</h1>
|
|
<h2 class="subtitle">
|
|
Modify the store's status and scrolling message. Enter your password and click "Save Changes" to apply them.
|
|
</h2>
|
|
|
|
<div class="field">
|
|
<label class="label" for="scrolling-message">Scrolling Message</label>
|
|
<div class="control">
|
|
<input class="input" type="text" id="scrolling-message" placeholder="e.g., We are having a sale!">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="is-closed-checkbox">
|
|
Store is Closed (Override)
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field" id="closed-message-field" style="display: none;">
|
|
<label class="label" for="closed-message">Closed Message</label>
|
|
<div class="control">
|
|
<textarea class="textarea" id="closed-message" placeholder="e.g., We are closed for a private event."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="field">
|
|
<label class="label" for="password">Password</label>
|
|
<div class="control">
|
|
<input class="input" type="password" id="password" placeholder="Enter password to save changes">
|
|
</div>
|
|
<p class="help">This is required to save any changes.</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<button class="button is-success" id="save-button" disabled>
|
|
<span class="icon is-small" id="spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
</span>
|
|
<span>Save Changes</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification is-hidden" id="feedback-message"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="admin.js"></script>
|
|
</body>
|
|
</html>
|