mirror of
https://github.com/daveallie/crosspoint-reader.git
synced 2025-12-19 07:37:41 +03:00
Refactor HTML to be mostly pre-generated
This commit is contained in:
Brendan O'Leary
parent
421c5cd30b
commit
21cb8a6731
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,3 +3,4 @@
|
||||
.DS_Store
|
||||
.vscode
|
||||
lib/EpdFont/fontsrc
|
||||
*.generated.h
|
||||
|
||||
@ -31,6 +31,9 @@ board_build.flash_mode = dio
|
||||
board_build.flash_size = 16MB
|
||||
board_build.partitions = partitions.csv
|
||||
|
||||
extra_scripts =
|
||||
pre:scripts/build_html.py
|
||||
|
||||
; Libraries
|
||||
lib_deps =
|
||||
BatteryMonitor=symlink://open-x4-sdk/libs/hardware/BatteryMonitor
|
||||
|
||||
51
scripts/build_html.py
Normal file
51
scripts/build_html.py
Normal file
@ -0,0 +1,51 @@
|
||||
import os
|
||||
import re
|
||||
|
||||
SRC_DIR = "src"
|
||||
|
||||
def minify_html(html: str) -> str:
|
||||
# Tags where whitespace should be preserved
|
||||
preserve_tags = ['pre', 'code', 'textarea']
|
||||
preserve_regex = '|'.join(preserve_tags)
|
||||
|
||||
# Protect preserve blocks with placeholders
|
||||
preserve_blocks = []
|
||||
def preserve(match):
|
||||
preserve_blocks.append(match.group(0))
|
||||
return f"__PRESERVE_BLOCK_{len(preserve_blocks)-1}__"
|
||||
|
||||
html = re.sub(rf'<({preserve_regex})[\s\S]*?</\1>', preserve, html, flags=re.IGNORECASE)
|
||||
|
||||
# Remove HTML comments
|
||||
html = re.sub(r'<!--.*?-->', '', html, flags=re.DOTALL)
|
||||
|
||||
# Collapse all whitespace between tags
|
||||
html = re.sub(r'>\s+<', '><', html)
|
||||
|
||||
# Collapse multiple spaces inside tags
|
||||
html = re.sub(r'\s+', ' ', html)
|
||||
|
||||
# Restore preserved blocks
|
||||
for i, block in enumerate(preserve_blocks):
|
||||
html = html.replace(f"__PRESERVE_BLOCK_{i}__", block)
|
||||
|
||||
return html.strip()
|
||||
|
||||
for root, _, files in os.walk(SRC_DIR):
|
||||
for file in files:
|
||||
if file.endswith(".html"):
|
||||
html_path = os.path.join(root, file)
|
||||
with open(html_path, "r", encoding="utf-8") as f:
|
||||
html_content = f.read()
|
||||
|
||||
# minified = regex.sub("\g<1>", html_content)
|
||||
minified = minify_html(html_content)
|
||||
base_name = f"{os.path.splitext(file)[0]}Html"
|
||||
header_path = os.path.join(root, f"{base_name}.generated.h")
|
||||
|
||||
with open(header_path, "w", encoding="utf-8") as h:
|
||||
h.write(f"// THIS FILE IS AUTOGENERATED, DO NOT EDIT MANUALLY\n\n")
|
||||
h.write(f"#pragma once\n")
|
||||
h.write(f'constexpr char {base_name}[] PROGMEM = R"rawliteral({minified})rawliteral";\n')
|
||||
|
||||
print(f"Generated: {header_path}")
|
||||
@ -6,6 +6,9 @@
|
||||
#include <algorithm>
|
||||
|
||||
#include "config.h"
|
||||
#include "html/HomePageHtml.generated.h"
|
||||
#include "html/FilesPageHeaderHtml.generated.h"
|
||||
#include "html/FilesPageFooterHtml.generated.h"
|
||||
|
||||
// Global instance
|
||||
CrossPointWebServer crossPointWebServer;
|
||||
@ -46,817 +49,10 @@ static String escapeHtml(const String& input) {
|
||||
return output;
|
||||
}
|
||||
|
||||
// HTML page template
|
||||
static const char* HTML_PAGE = R"rawliteral(
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CrossPoint Reader</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
h2 {
|
||||
color: #34495e;
|
||||
margin-top: 0;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.value {
|
||||
color: #2c3e50;
|
||||
}
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.nav-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.nav-links a {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>📚 CrossPoint Reader</h1>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/files">File Manager</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Device Status</h2>
|
||||
<div class="info-row">
|
||||
<span class="label">Version</span>
|
||||
<span class="value">%VERSION%</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">WiFi Status</span>
|
||||
<span class="status">Connected</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">IP Address</span>
|
||||
<span class="value">%IP_ADDRESS%</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">Free Memory</span>
|
||||
<span class="value">%FREE_HEAP% bytes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p style="text-align: center; color: #95a5a6; margin: 0;">
|
||||
CrossPoint E-Reader • Open Source
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
)rawliteral";
|
||||
|
||||
// File listing page template
|
||||
static const char* FILES_PAGE_HEADER = R"rawliteral(
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CrossPoint Reader - Files</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
h2 {
|
||||
color: #34495e;
|
||||
margin-top: 0;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #3498db;
|
||||
}
|
||||
.page-header-left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.breadcrumb-inline {
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.breadcrumb-inline a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
.breadcrumb-inline a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.breadcrumb-inline .sep {
|
||||
margin: 0 6px;
|
||||
color: #bdc3c7;
|
||||
}
|
||||
.breadcrumb-inline .current {
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.nav-links a {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
/* Add dropdown styles */
|
||||
.add-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.add-btn {
|
||||
background-color: #e67e22;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.add-btn:hover {
|
||||
background-color: #d35400;
|
||||
}
|
||||
.add-btn .arrow {
|
||||
font-size: 0.8em;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.add-dropdown.open .add-btn .arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
margin-top: 5px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
min-width: 200px;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
.add-dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
color: #2c3e50;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.dropdown-item .icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin: 0;
|
||||
}
|
||||
/* Upload modal */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 200;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-overlay.open {
|
||||
display: flex;
|
||||
}
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
.modal h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.modal-close {
|
||||
float: right;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
color: #7f8c8d;
|
||||
line-height: 1;
|
||||
}
|
||||
.modal-close:hover {
|
||||
color: #2c3e50;
|
||||
}
|
||||
.file-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.file-table th, .file-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.file-table th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.file-table tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.epub-file {
|
||||
background-color: #e8f6e9 !important;
|
||||
}
|
||||
.epub-file:hover {
|
||||
background-color: #d4edda !important;
|
||||
}
|
||||
.folder-row {
|
||||
background-color: #fff9e6 !important;
|
||||
}
|
||||
.folder-row:hover {
|
||||
background-color: #fff3cd !important;
|
||||
}
|
||||
.epub-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.folder-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.file-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.folder-link {
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.folder-link:hover {
|
||||
color: #3498db;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.upload-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.upload-form input[type="file"] {
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.upload-btn {
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
.upload-btn:hover {
|
||||
background-color: #219a52;
|
||||
}
|
||||
.upload-btn:disabled {
|
||||
background-color: #95a5a6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.file-info {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.85em;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.no-files {
|
||||
text-align: center;
|
||||
color: #95a5a6;
|
||||
padding: 40px;
|
||||
font-style: italic;
|
||||
}
|
||||
.message {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.message.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
.message.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
.contents-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.contents-title {
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
color: #34495e;
|
||||
margin: 0;
|
||||
}
|
||||
.summary-inline {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
#progress-container {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#progress-bar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#progress-fill {
|
||||
height: 100%;
|
||||
background-color: #27ae60;
|
||||
width: 0%;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
#progress-text {
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
font-size: 0.9em;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.folder-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.folder-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.folder-btn {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
.folder-btn:hover {
|
||||
background-color: #d68910;
|
||||
}
|
||||
/* Delete button styles */
|
||||
.delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.1em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
color: #95a5a6;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.delete-btn:hover {
|
||||
background-color: #fee;
|
||||
color: #e74c3c;
|
||||
}
|
||||
.actions-col {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
/* Delete modal */
|
||||
.delete-warning {
|
||||
color: #e74c3c;
|
||||
font-weight: 600;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.delete-item-name {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
word-break: break-all;
|
||||
}
|
||||
.delete-btn-confirm {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
.delete-btn-confirm:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
.delete-btn-cancel {
|
||||
background-color: #95a5a6;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.delete-btn-cancel:hover {
|
||||
background-color: #7f8c8d;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/files">File Manager</a>
|
||||
</div>
|
||||
)rawliteral";
|
||||
|
||||
static const char* FILES_PAGE_FOOTER = R"rawliteral(
|
||||
<div class="card">
|
||||
<p style="text-align: center; color: #95a5a6; margin: 0;">
|
||||
CrossPoint E-Reader • Open Source
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Upload Modal -->
|
||||
<div class="modal-overlay" id="uploadModal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeUploadModal()">×</button>
|
||||
<h3>📤 Upload eBook</h3>
|
||||
<div class="upload-form">
|
||||
<p class="file-info">Select an .epub file to upload to <strong id="uploadPathDisplay"></strong></p>
|
||||
<input type="file" id="fileInput" accept=".epub" onchange="validateFile()">
|
||||
<button id="uploadBtn" class="upload-btn" onclick="uploadFile()" disabled>Upload</button>
|
||||
<div id="progress-container">
|
||||
<div id="progress-bar"><div id="progress-fill"></div></div>
|
||||
<div id="progress-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Folder Modal -->
|
||||
<div class="modal-overlay" id="folderModal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeFolderModal()">×</button>
|
||||
<h3>📁 New Folder</h3>
|
||||
<div class="folder-form">
|
||||
<p class="file-info">Create a new folder in <strong id="folderPathDisplay"></strong></p>
|
||||
<input type="text" id="folderName" class="folder-input" placeholder="Folder name...">
|
||||
<button class="folder-btn" onclick="createFolder()">Create Folder</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal-overlay" id="deleteModal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeDeleteModal()">×</button>
|
||||
<h3>🗑️ Delete Item</h3>
|
||||
<div class="folder-form">
|
||||
<p class="delete-warning">⚠️ This action cannot be undone!</p>
|
||||
<p class="file-info">Are you sure you want to delete:</p>
|
||||
<p class="delete-item-name" id="deleteItemName"></p>
|
||||
<input type="hidden" id="deleteItemPath">
|
||||
<input type="hidden" id="deleteItemType">
|
||||
<button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
|
||||
<button class="delete-btn-cancel" onclick="closeDeleteModal()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Dropdown toggle
|
||||
function toggleDropdown() {
|
||||
const dropdown = document.getElementById('addDropdown');
|
||||
dropdown.classList.toggle('open');
|
||||
}
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
const dropdown = document.getElementById('addDropdown');
|
||||
if (dropdown && !dropdown.contains(e.target)) {
|
||||
dropdown.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
// Modal functions
|
||||
function openUploadModal() {
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
document.getElementById('uploadPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
|
||||
document.getElementById('uploadModal').classList.add('open');
|
||||
document.getElementById('addDropdown').classList.remove('open');
|
||||
}
|
||||
|
||||
function closeUploadModal() {
|
||||
document.getElementById('uploadModal').classList.remove('open');
|
||||
document.getElementById('fileInput').value = '';
|
||||
document.getElementById('uploadBtn').disabled = true;
|
||||
document.getElementById('progress-container').style.display = 'none';
|
||||
document.getElementById('progress-fill').style.width = '0%';
|
||||
document.getElementById('progress-fill').style.backgroundColor = '#27ae60';
|
||||
}
|
||||
|
||||
function openFolderModal() {
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
document.getElementById('folderPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
|
||||
document.getElementById('folderModal').classList.add('open');
|
||||
document.getElementById('addDropdown').classList.remove('open');
|
||||
document.getElementById('folderName').value = '';
|
||||
}
|
||||
|
||||
function closeFolderModal() {
|
||||
document.getElementById('folderModal').classList.remove('open');
|
||||
}
|
||||
|
||||
// Close modals when clicking overlay
|
||||
document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target === overlay) {
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function validateFile() {
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (file) {
|
||||
const fileName = file.name.toLowerCase();
|
||||
if (!fileName.endsWith('.epub')) {
|
||||
alert('Only .epub files are allowed!');
|
||||
fileInput.value = '';
|
||||
uploadBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
uploadBtn.disabled = false;
|
||||
} else {
|
||||
uploadBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function uploadFile() {
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const file = fileInput.files[0];
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
|
||||
if (!file) {
|
||||
alert('Please select a file first!');
|
||||
return;
|
||||
}
|
||||
|
||||
const fileName = file.name.toLowerCase();
|
||||
if (!fileName.endsWith('.epub')) {
|
||||
alert('Only .epub files are allowed!');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const progressContainer = document.getElementById('progress-container');
|
||||
const progressFill = document.getElementById('progress-fill');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
|
||||
progressContainer.style.display = 'block';
|
||||
uploadBtn.disabled = true;
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
// Include path as query parameter since multipart form data doesn't make
|
||||
// form fields available until after file upload completes
|
||||
xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
|
||||
|
||||
xhr.upload.onprogress = function(e) {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100);
|
||||
progressFill.style.width = percent + '%';
|
||||
progressText.textContent = 'Uploading: ' + percent + '%';
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
progressText.textContent = 'Upload complete!';
|
||||
setTimeout(function() {
|
||||
window.location.reload();
|
||||
}, 1000);
|
||||
} else {
|
||||
progressText.textContent = 'Upload failed: ' + xhr.responseText;
|
||||
progressFill.style.backgroundColor = '#e74c3c';
|
||||
uploadBtn.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
progressText.textContent = 'Upload failed - network error';
|
||||
progressFill.style.backgroundColor = '#e74c3c';
|
||||
uploadBtn.disabled = false;
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
function createFolder() {
|
||||
const folderName = document.getElementById('folderName').value.trim();
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
|
||||
if (!folderName) {
|
||||
alert('Please enter a folder name!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate folder name (no special characters except underscore and hyphen)
|
||||
const validName = /^[a-zA-Z0-9_\-]+$/.test(folderName);
|
||||
if (!validName) {
|
||||
alert('Folder name can only contain letters, numbers, underscores, and hyphens.');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('name', folderName);
|
||||
formData.append('path', currentPath);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/mkdir', true);
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Failed to create folder: ' + xhr.responseText);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
alert('Failed to create folder - network error');
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
// Delete functions
|
||||
function openDeleteModal(name, path, isFolder) {
|
||||
document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
|
||||
document.getElementById('deleteItemPath').value = path;
|
||||
document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
|
||||
document.getElementById('deleteModal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
document.getElementById('deleteModal').classList.remove('open');
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
const path = document.getElementById('deleteItemPath').value;
|
||||
const itemType = document.getElementById('deleteItemType').value;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('path', path);
|
||||
formData.append('type', itemType);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/delete', true);
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Failed to delete: ' + xhr.responseText);
|
||||
closeDeleteModal();
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
alert('Failed to delete - network error');
|
||||
closeDeleteModal();
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
)rawliteral";
|
||||
|
||||
// File listing page template - now using generated headers:
|
||||
// - HomePageHtml (from html/HomePage.html)
|
||||
// - FilesPageHeaderHtml (from html/FilesPageHeader.html)
|
||||
// - FilesPageFooterHtml (from html/FilesPageFooter.html)
|
||||
CrossPointWebServer::CrossPointWebServer() {}
|
||||
|
||||
CrossPointWebServer::~CrossPointWebServer() { stop(); }
|
||||
@ -930,7 +126,7 @@ void CrossPointWebServer::handleClient() {
|
||||
}
|
||||
|
||||
void CrossPointWebServer::handleRoot() {
|
||||
String html = HTML_PAGE;
|
||||
String html = HomePageHtml;
|
||||
|
||||
// Replace placeholders with actual values
|
||||
html.replace("%VERSION%", CROSSPOINT_VERSION);
|
||||
@ -1035,7 +231,7 @@ bool CrossPointWebServer::isEpubFile(const String& filename) {
|
||||
}
|
||||
|
||||
void CrossPointWebServer::handleFileList() {
|
||||
String html = FILES_PAGE_HEADER;
|
||||
String html = FilesPageHeaderHtml;
|
||||
|
||||
// Get current path from query string (default to root)
|
||||
String currentPath = "/";
|
||||
@ -1230,7 +426,7 @@ void CrossPointWebServer::handleFileList() {
|
||||
|
||||
html += "</div>";
|
||||
|
||||
html += FILES_PAGE_FOOTER;
|
||||
html += FilesPageFooterHtml;
|
||||
|
||||
server->send(200, "text/html", html);
|
||||
Serial.printf("[%lu] [WEB] Served file listing page for path: %s\n", millis(), currentPath.c_str());
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
#include <string>
|
||||
#include <vector>
|
||||
|
||||
#include "OnScreenKeyboard.h"
|
||||
#include "../Activity.h"
|
||||
#include "OnScreenKeyboard.h"
|
||||
|
||||
// Structure to hold WiFi network information
|
||||
struct WifiNetworkInfo {
|
||||
|
||||
267
src/html/FilesPageFooter.html
Normal file
267
src/html/FilesPageFooter.html
Normal file
@ -0,0 +1,267 @@
|
||||
<div class="card">
|
||||
<p style="text-align: center; color: #95a5a6; margin: 0;">
|
||||
CrossPoint E-Reader • Open Source
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Upload Modal -->
|
||||
<div class="modal-overlay" id="uploadModal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeUploadModal()">×</button>
|
||||
<h3>📤 Upload eBook</h3>
|
||||
<div class="upload-form">
|
||||
<p class="file-info">Select an .epub file to upload to <strong id="uploadPathDisplay"></strong></p>
|
||||
<input type="file" id="fileInput" accept=".epub" onchange="validateFile()">
|
||||
<button id="uploadBtn" class="upload-btn" onclick="uploadFile()" disabled>Upload</button>
|
||||
<div id="progress-container">
|
||||
<div id="progress-bar"><div id="progress-fill"></div></div>
|
||||
<div id="progress-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Folder Modal -->
|
||||
<div class="modal-overlay" id="folderModal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeFolderModal()">×</button>
|
||||
<h3>📁 New Folder</h3>
|
||||
<div class="folder-form">
|
||||
<p class="file-info">Create a new folder in <strong id="folderPathDisplay"></strong></p>
|
||||
<input type="text" id="folderName" class="folder-input" placeholder="Folder name...">
|
||||
<button class="folder-btn" onclick="createFolder()">Create Folder</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal-overlay" id="deleteModal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeDeleteModal()">×</button>
|
||||
<h3>🗑️ Delete Item</h3>
|
||||
<div class="folder-form">
|
||||
<p class="delete-warning">⚠️ This action cannot be undone!</p>
|
||||
<p class="file-info">Are you sure you want to delete:</p>
|
||||
<p class="delete-item-name" id="deleteItemName"></p>
|
||||
<input type="hidden" id="deleteItemPath">
|
||||
<input type="hidden" id="deleteItemType">
|
||||
<button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
|
||||
<button class="delete-btn-cancel" onclick="closeDeleteModal()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Dropdown toggle
|
||||
function toggleDropdown() {
|
||||
const dropdown = document.getElementById('addDropdown');
|
||||
dropdown.classList.toggle('open');
|
||||
}
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
const dropdown = document.getElementById('addDropdown');
|
||||
if (dropdown && !dropdown.contains(e.target)) {
|
||||
dropdown.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
// Modal functions
|
||||
function openUploadModal() {
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
document.getElementById('uploadPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
|
||||
document.getElementById('uploadModal').classList.add('open');
|
||||
document.getElementById('addDropdown').classList.remove('open');
|
||||
}
|
||||
|
||||
function closeUploadModal() {
|
||||
document.getElementById('uploadModal').classList.remove('open');
|
||||
document.getElementById('fileInput').value = '';
|
||||
document.getElementById('uploadBtn').disabled = true;
|
||||
document.getElementById('progress-container').style.display = 'none';
|
||||
document.getElementById('progress-fill').style.width = '0%';
|
||||
document.getElementById('progress-fill').style.backgroundColor = '#27ae60';
|
||||
}
|
||||
|
||||
function openFolderModal() {
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
document.getElementById('folderPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
|
||||
document.getElementById('folderModal').classList.add('open');
|
||||
document.getElementById('addDropdown').classList.remove('open');
|
||||
document.getElementById('folderName').value = '';
|
||||
}
|
||||
|
||||
function closeFolderModal() {
|
||||
document.getElementById('folderModal').classList.remove('open');
|
||||
}
|
||||
|
||||
// Close modals when clicking overlay
|
||||
document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target === overlay) {
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function validateFile() {
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (file) {
|
||||
const fileName = file.name.toLowerCase();
|
||||
if (!fileName.endsWith('.epub')) {
|
||||
alert('Only .epub files are allowed!');
|
||||
fileInput.value = '';
|
||||
uploadBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
uploadBtn.disabled = false;
|
||||
} else {
|
||||
uploadBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function uploadFile() {
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const file = fileInput.files[0];
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
|
||||
if (!file) {
|
||||
alert('Please select a file first!');
|
||||
return;
|
||||
}
|
||||
|
||||
const fileName = file.name.toLowerCase();
|
||||
if (!fileName.endsWith('.epub')) {
|
||||
alert('Only .epub files are allowed!');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const progressContainer = document.getElementById('progress-container');
|
||||
const progressFill = document.getElementById('progress-fill');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
|
||||
progressContainer.style.display = 'block';
|
||||
uploadBtn.disabled = true;
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
// Include path as query parameter since multipart form data doesn't make
|
||||
// form fields available until after file upload completes
|
||||
xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
|
||||
|
||||
xhr.upload.onprogress = function(e) {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100);
|
||||
progressFill.style.width = percent + '%';
|
||||
progressText.textContent = 'Uploading: ' + percent + '%';
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
progressText.textContent = 'Upload complete!';
|
||||
setTimeout(function() {
|
||||
window.location.reload();
|
||||
}, 1000);
|
||||
} else {
|
||||
progressText.textContent = 'Upload failed: ' + xhr.responseText;
|
||||
progressFill.style.backgroundColor = '#e74c3c';
|
||||
uploadBtn.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
progressText.textContent = 'Upload failed - network error';
|
||||
progressFill.style.backgroundColor = '#e74c3c';
|
||||
uploadBtn.disabled = false;
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
function createFolder() {
|
||||
const folderName = document.getElementById('folderName').value.trim();
|
||||
const currentPath = document.getElementById('currentPath').value;
|
||||
|
||||
if (!folderName) {
|
||||
alert('Please enter a folder name!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate folder name (no special characters except underscore and hyphen)
|
||||
const validName = /^[a-zA-Z0-9_\-]+$/.test(folderName);
|
||||
if (!validName) {
|
||||
alert('Folder name can only contain letters, numbers, underscores, and hyphens.');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('name', folderName);
|
||||
formData.append('path', currentPath);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/mkdir', true);
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Failed to create folder: ' + xhr.responseText);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
alert('Failed to create folder - network error');
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
// Delete functions
|
||||
function openDeleteModal(name, path, isFolder) {
|
||||
document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
|
||||
document.getElementById('deleteItemPath').value = path;
|
||||
document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
|
||||
document.getElementById('deleteModal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
document.getElementById('deleteModal').classList.remove('open');
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
const path = document.getElementById('deleteItemPath').value;
|
||||
const itemType = document.getElementById('deleteItemType').value;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('path', path);
|
||||
formData.append('type', itemType);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/delete', true);
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Failed to delete: ' + xhr.responseText);
|
||||
closeDeleteModal();
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
alert('Failed to delete - network error');
|
||||
closeDeleteModal();
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
430
src/html/FilesPageHeader.html
Normal file
430
src/html/FilesPageHeader.html
Normal file
@ -0,0 +1,430 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CrossPoint Reader - Files</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
h2 {
|
||||
color: #34495e;
|
||||
margin-top: 0;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #3498db;
|
||||
}
|
||||
.page-header-left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.breadcrumb-inline {
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.breadcrumb-inline a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
.breadcrumb-inline a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.breadcrumb-inline .sep {
|
||||
margin: 0 6px;
|
||||
color: #bdc3c7;
|
||||
}
|
||||
.breadcrumb-inline .current {
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.nav-links a {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
/* Add dropdown styles */
|
||||
.add-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.add-btn {
|
||||
background-color: #e67e22;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.add-btn:hover {
|
||||
background-color: #d35400;
|
||||
}
|
||||
.add-btn .arrow {
|
||||
font-size: 0.8em;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.add-dropdown.open .add-btn .arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
margin-top: 5px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
min-width: 200px;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
.add-dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
color: #2c3e50;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.dropdown-item .icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin: 0;
|
||||
}
|
||||
/* Upload modal */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 200;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-overlay.open {
|
||||
display: flex;
|
||||
}
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.modal h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.modal-close {
|
||||
float: right;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
color: #7f8c8d;
|
||||
line-height: 1;
|
||||
}
|
||||
.modal-close:hover {
|
||||
color: #2c3e50;
|
||||
}
|
||||
.file-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.file-table th,
|
||||
.file-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.file-table th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.file-table tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.epub-file {
|
||||
background-color: #e8f6e9 !important;
|
||||
}
|
||||
.epub-file:hover {
|
||||
background-color: #d4edda !important;
|
||||
}
|
||||
.folder-row {
|
||||
background-color: #fff9e6 !important;
|
||||
}
|
||||
.folder-row:hover {
|
||||
background-color: #fff3cd !important;
|
||||
}
|
||||
.epub-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.folder-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.file-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.folder-link {
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.folder-link:hover {
|
||||
color: #3498db;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.upload-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.upload-form input[type="file"] {
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.upload-btn {
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
.upload-btn:hover {
|
||||
background-color: #219a52;
|
||||
}
|
||||
.upload-btn:disabled {
|
||||
background-color: #95a5a6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.file-info {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.85em;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.no-files {
|
||||
text-align: center;
|
||||
color: #95a5a6;
|
||||
padding: 40px;
|
||||
font-style: italic;
|
||||
}
|
||||
.message {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.message.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
.message.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
.contents-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.contents-title {
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
color: #34495e;
|
||||
margin: 0;
|
||||
}
|
||||
.summary-inline {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
#progress-container {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#progress-bar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#progress-fill {
|
||||
height: 100%;
|
||||
background-color: #27ae60;
|
||||
width: 0%;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
#progress-text {
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
font-size: 0.9em;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.folder-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.folder-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.folder-btn {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
.folder-btn:hover {
|
||||
background-color: #d68910;
|
||||
}
|
||||
/* Delete button styles */
|
||||
.delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.1em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
color: #95a5a6;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.delete-btn:hover {
|
||||
background-color: #fee;
|
||||
color: #e74c3c;
|
||||
}
|
||||
.actions-col {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
/* Delete modal */
|
||||
.delete-warning {
|
||||
color: #e74c3c;
|
||||
font-weight: 600;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.delete-item-name {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
word-break: break-all;
|
||||
}
|
||||
.delete-btn-confirm {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
.delete-btn-confirm:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
.delete-btn-cancel {
|
||||
background-color: #95a5a6;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.delete-btn-cancel:hover {
|
||||
background-color: #7f8c8d;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/files">File Manager</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
108
src/html/HomePage.html
Normal file
108
src/html/HomePage.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CrossPoint Reader</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
h2 {
|
||||
color: #34495e;
|
||||
margin-top: 0;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.value {
|
||||
color: #2c3e50;
|
||||
}
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.nav-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.nav-links a {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>📚 CrossPoint Reader</h1>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/files">File Manager</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Device Status</h2>
|
||||
<div class="info-row">
|
||||
<span class="label">Version</span>
|
||||
<span class="value">%VERSION%</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">WiFi Status</span>
|
||||
<span class="status">Connected</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">IP Address</span>
|
||||
<span class="value">%IP_ADDRESS%</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">Free Memory</span>
|
||||
<span class="value">%FREE_HEAP% bytes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p style="text-align: center; color: #95a5a6; margin: 0">
|
||||
CrossPoint E-Reader • Open Source
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user