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
|
.DS_Store
|
||||||
.vscode
|
.vscode
|
||||||
lib/EpdFont/fontsrc
|
lib/EpdFont/fontsrc
|
||||||
|
*.generated.h
|
||||||
|
|||||||
@ -31,6 +31,9 @@ board_build.flash_mode = dio
|
|||||||
board_build.flash_size = 16MB
|
board_build.flash_size = 16MB
|
||||||
board_build.partitions = partitions.csv
|
board_build.partitions = partitions.csv
|
||||||
|
|
||||||
|
extra_scripts =
|
||||||
|
pre:scripts/build_html.py
|
||||||
|
|
||||||
; Libraries
|
; Libraries
|
||||||
lib_deps =
|
lib_deps =
|
||||||
BatteryMonitor=symlink://open-x4-sdk/libs/hardware/BatteryMonitor
|
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 <algorithm>
|
||||||
|
|
||||||
#include "config.h"
|
#include "config.h"
|
||||||
|
#include "html/HomePageHtml.generated.h"
|
||||||
|
#include "html/FilesPageHeaderHtml.generated.h"
|
||||||
|
#include "html/FilesPageFooterHtml.generated.h"
|
||||||
|
|
||||||
// Global instance
|
// Global instance
|
||||||
CrossPointWebServer crossPointWebServer;
|
CrossPointWebServer crossPointWebServer;
|
||||||
@ -46,817 +49,10 @@ static String escapeHtml(const String& input) {
|
|||||||
return output;
|
return output;
|
||||||
}
|
}
|
||||||
|
|
||||||
// HTML page template
|
// File listing page template - now using generated headers:
|
||||||
static const char* HTML_PAGE = R"rawliteral(
|
// - HomePageHtml (from html/HomePage.html)
|
||||||
<!DOCTYPE html>
|
// - FilesPageHeaderHtml (from html/FilesPageHeader.html)
|
||||||
<html>
|
// - FilesPageFooterHtml (from html/FilesPageFooter.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";
|
|
||||||
|
|
||||||
CrossPointWebServer::CrossPointWebServer() {}
|
CrossPointWebServer::CrossPointWebServer() {}
|
||||||
|
|
||||||
CrossPointWebServer::~CrossPointWebServer() { stop(); }
|
CrossPointWebServer::~CrossPointWebServer() { stop(); }
|
||||||
@ -930,7 +126,7 @@ void CrossPointWebServer::handleClient() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
void CrossPointWebServer::handleRoot() {
|
void CrossPointWebServer::handleRoot() {
|
||||||
String html = HTML_PAGE;
|
String html = HomePageHtml;
|
||||||
|
|
||||||
// Replace placeholders with actual values
|
// Replace placeholders with actual values
|
||||||
html.replace("%VERSION%", CROSSPOINT_VERSION);
|
html.replace("%VERSION%", CROSSPOINT_VERSION);
|
||||||
@ -1035,7 +231,7 @@ bool CrossPointWebServer::isEpubFile(const String& filename) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
void CrossPointWebServer::handleFileList() {
|
void CrossPointWebServer::handleFileList() {
|
||||||
String html = FILES_PAGE_HEADER;
|
String html = FilesPageHeaderHtml;
|
||||||
|
|
||||||
// Get current path from query string (default to root)
|
// Get current path from query string (default to root)
|
||||||
String currentPath = "/";
|
String currentPath = "/";
|
||||||
@ -1230,7 +426,7 @@ void CrossPointWebServer::handleFileList() {
|
|||||||
|
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
|
|
||||||
html += FILES_PAGE_FOOTER;
|
html += FilesPageFooterHtml;
|
||||||
|
|
||||||
server->send(200, "text/html", html);
|
server->send(200, "text/html", html);
|
||||||
Serial.printf("[%lu] [WEB] Served file listing page for path: %s\n", millis(), currentPath.c_str());
|
Serial.printf("[%lu] [WEB] Served file listing page for path: %s\n", millis(), currentPath.c_str());
|
||||||
|
|||||||
@ -9,8 +9,8 @@
|
|||||||
#include <string>
|
#include <string>
|
||||||
#include <vector>
|
#include <vector>
|
||||||
|
|
||||||
#include "OnScreenKeyboard.h"
|
|
||||||
#include "../Activity.h"
|
#include "../Activity.h"
|
||||||
|
#include "OnScreenKeyboard.h"
|
||||||
|
|
||||||
// Structure to hold WiFi network information
|
// Structure to hold WiFi network information
|
||||||
struct WifiNetworkInfo {
|
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