Merge c8cdf5cd5a into 67da8139b3

.gitignore

@@ -3,3 +3,4 @@
 .DS_Store
 .vscode
 lib/EpdFont/fontsrc
+*.generated.h

platformio.ini

@@ -31,8 +31,13 @@ board_build.flash_mode = dio
 board_build.flash_size = 16MB
 board_build.partitions = partitions.csv
 
+extra_scripts =
+  pre:script/build_html.py
+
 ; Libraries
 lib_deps =
+  ESP32Async/AsyncTCP
+  ESP32Async/ESPAsyncWebServer
   BatteryMonitor=symlink://open-x4-sdk/libs/hardware/BatteryMonitor
   InputManager=symlink://open-x4-sdk/libs/hardware/InputManager
   EInkDisplay=symlink://open-x4-sdk/libs/display/EInkDisplay

script/build_html.py

@@ -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}")

src/main.cpp

@@ -21,8 +21,10 @@
 #include "screens/EpubReaderScreen.h"
 #include "screens/FileSelectionScreen.h"
 #include "screens/FullScreenMessageScreen.h"
+#include "screens/HomeScreen.h"
 #include "screens/SettingsScreen.h"
 #include "screens/SleepScreen.h"
+#include "screens/UploadFileScreen.h"
 
 #define SPI_FQ 40000000
 // Display SPI pins (custom pins for XteinkX4, not hardware SPI defaults)
@@ -150,6 +152,7 @@ void enterDeepSleep() {
 }
 
 void onGoHome();
+void onGoToFileSelection();
 void onSelectEpubFile(const std::string& path) {
   exitScreen();
   enterNewScreen(new FullScreenMessageScreen(renderer, inputManager, "Loading..."));
@@ -165,18 +168,28 @@ void onSelectEpubFile(const std::string& path) {
     enterNewScreen(
         new FullScreenMessageScreen(renderer, inputManager, "Failed to load epub", REGULAR, EInkDisplay::HALF_REFRESH));
     delay(2000);
-    onGoHome();
+    onGoToFileSelection();
   }
 }
 
+void onGoToFileSelection() {
+  exitScreen();
+  enterNewScreen(new FileSelectionScreen(renderer, inputManager, onSelectEpubFile, onGoHome));
+}
+
 void onGoToSettings() {
   exitScreen();
   enterNewScreen(new SettingsScreen(renderer, inputManager, onGoHome));
 }
 
+void onGoToUploadFile() {
+  exitScreen();
+  enterNewScreen(new UploadFileScreen(renderer, inputManager, onGoHome));
+}
+
 void onGoHome() {
   exitScreen();
-  enterNewScreen(new FileSelectionScreen(renderer, inputManager, onSelectEpubFile, onGoToSettings));
+  enterNewScreen(new HomeScreen(renderer, inputManager, onGoToFileSelection, onGoToSettings, onGoToUploadFile));
 }
 
 void setup() {
@@ -221,8 +234,7 @@ void setup() {
     }
   }
 
-  exitScreen();
-  enterNewScreen(new FileSelectionScreen(renderer, inputManager, onSelectEpubFile, onGoToSettings));
+  onGoHome();
 
   // Ensure we're not still holding the power button before leaving setup
   waitForPowerRelease();
@@ -233,8 +245,8 @@ void loop() {
 
   static unsigned long lastMemPrint = 0;
   if (Serial && millis() - lastMemPrint >= 10000) {
-    Serial.printf("[%lu] [MEM] Free: %d bytes, Total: %d bytes, Min Free: %d bytes\n", millis(), ESP.getFreeHeap(),
-                  ESP.getHeapSize(), ESP.getMinFreeHeap());
+    Serial.printf("[%lu] [MEM] Free: %d bytes, Total: %d bytes, Min Free: %d bytes, Max alloc: %d\n", millis(),
+                  ESP.getFreeHeap(), ESP.getHeapSize(), ESP.getMinFreeHeap(), ESP.getMaxAllocHeap());
     lastMemPrint = millis();
   }
 

src/screens/FileSelectionScreen.cpp

@@ -98,8 +98,8 @@ void FileSelectionScreen::handleInput() {
       loadFiles();
       updateRequired = true;
     } else {
-      // At root level, go to settings
-      onSettingsOpen();
+      // At root level, go back home
+      onGoHome();
     }
   } else if (prevPressed) {
     selectorIndex = (selectorIndex + files.size() - 1) % files.size();
@@ -129,7 +129,7 @@ void FileSelectionScreen::render() const {
   renderer.drawCenteredText(READER_FONT_ID, 10, "CrossPoint Reader", true, BOLD);
 
   // Help text
-  renderer.drawText(SMALL_FONT_ID, 20, GfxRenderer::getScreenHeight() - 30, "Press BACK for Settings");
+  renderer.drawText(SMALL_FONT_ID, 20, GfxRenderer::getScreenHeight() - 30, "Press BACK for Home");
 
   if (files.empty()) {
     renderer.drawText(UI_FONT_ID, 20, 60, "No EPUBs found");

src/screens/FileSelectionScreen.h

@@ -17,7 +17,7 @@ class FileSelectionScreen final : public Screen {
   int selectorIndex = 0;
   bool updateRequired = false;
   const std::function<void(const std::string&)> onSelect;
-  const std::function<void()> onSettingsOpen;
+  const std::function<void()> onGoHome;
 
   static void taskTrampoline(void* param);
   [[noreturn]] void displayTaskLoop();
@@ -27,8 +27,8 @@ class FileSelectionScreen final : public Screen {
  public:
   explicit FileSelectionScreen(GfxRenderer& renderer, InputManager& inputManager,
                                const std::function<void(const std::string&)>& onSelect,
-                               const std::function<void()>& onSettingsOpen)
-      : Screen(renderer, inputManager), onSelect(onSelect), onSettingsOpen(onSettingsOpen) {}
+                               const std::function<void()>& onGoHome)
+      : Screen(renderer, inputManager), onSelect(onSelect), onGoHome(onGoHome) {}
   void onEnter() override;
   void onExit() override;
   void handleInput() override;

src/screens/HomeScreen.cpp

@@ -0,0 +1,87 @@
+#include "HomeScreen.h"
+
+#include <GfxRenderer.h>
+#include <SD.h>
+
+#include "config.h"
+
+void HomeScreen::taskTrampoline(void* param) {
+  auto* self = static_cast<HomeScreen*>(param);
+  self->displayTaskLoop();
+}
+
+void HomeScreen::onEnter() {
+  renderingMutex = xSemaphoreCreateMutex();
+
+  selectorIndex = 0;
+
+  // Trigger first update
+  updateRequired = true;
+
+  xTaskCreate(&HomeScreen::taskTrampoline, "HomeScreenTask",
+              2048,               // Stack size
+              this,               // Parameters
+              1,                  // Priority
+              &displayTaskHandle  // Task handle
+  );
+}
+
+void HomeScreen::onExit() {
+  // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  if (displayTaskHandle) {
+    vTaskDelete(displayTaskHandle);
+    displayTaskHandle = nullptr;
+  }
+  vSemaphoreDelete(renderingMutex);
+  renderingMutex = nullptr;
+}
+
+void HomeScreen::handleInput() {
+  const bool prevPressed =
+      inputManager.wasPressed(InputManager::BTN_UP) || inputManager.wasPressed(InputManager::BTN_LEFT);
+  const bool nextPressed =
+      inputManager.wasPressed(InputManager::BTN_DOWN) || inputManager.wasPressed(InputManager::BTN_RIGHT);
+
+  if (inputManager.wasPressed(InputManager::BTN_CONFIRM)) {
+    if (selectorIndex == 0) {
+      onFileSelectionOpen();
+    } else if (selectorIndex == 1) {
+      onUploadFileOpen();
+    } else if (selectorIndex == 2) {
+      onSettingsOpen();
+    }
+  } else if (prevPressed) {
+    selectorIndex = (selectorIndex + menuItemCount - 1) % menuItemCount;
+    updateRequired = true;
+  } else if (nextPressed) {
+    selectorIndex = (selectorIndex + 1) % menuItemCount;
+    updateRequired = true;
+  }
+}
+
+void HomeScreen::displayTaskLoop() {
+  while (true) {
+    if (updateRequired) {
+      updateRequired = false;
+      xSemaphoreTake(renderingMutex, portMAX_DELAY);
+      render();
+      xSemaphoreGive(renderingMutex);
+    }
+    vTaskDelay(10 / portTICK_PERIOD_MS);
+  }
+}
+
+void HomeScreen::render() const {
+  renderer.clearScreen();
+
+  const auto pageWidth = GfxRenderer::getScreenWidth();
+  renderer.drawCenteredText(READER_FONT_ID, 10, "CrossPoint Reader", true, BOLD);
+
+  // Draw selection
+  renderer.fillRect(0, 60 + selectorIndex * 30 + 2, pageWidth - 1, 30);
+  renderer.drawText(UI_FONT_ID, 20, 60, "Read", selectorIndex != 0);
+  renderer.drawText(UI_FONT_ID, 20, 90, "Upload", selectorIndex != 1);
+  renderer.drawText(UI_FONT_ID, 20, 120, "Settings", selectorIndex != 2);
+  renderer.displayBuffer();
+}

src/screens/HomeScreen.h

@@ -0,0 +1,38 @@
+#pragma once
+#include <freertos/FreeRTOS.h>
+#include <freertos/semphr.h>
+#include <freertos/task.h>
+
+#include <functional>
+#include <string>
+#include <vector>
+
+#include "Screen.h"
+
+class HomeScreen final : public Screen {
+  TaskHandle_t displayTaskHandle = nullptr;
+  SemaphoreHandle_t renderingMutex = nullptr;
+  int selectorIndex = 0;
+  bool updateRequired = false;
+  const std::function<void()> onFileSelectionOpen;
+  const std::function<void()> onSettingsOpen;
+  const std::function<void()> onUploadFileOpen;
+
+  static constexpr int menuItemCount = 3;
+
+  static void taskTrampoline(void* param);
+  [[noreturn]] void displayTaskLoop();
+  void render() const;
+
+ public:
+  explicit HomeScreen(GfxRenderer& renderer, InputManager& inputManager,
+                      const std::function<void()>& onFileSelectionOpen, const std::function<void()>& onSettingsOpen,
+                      const std::function<void()>& onUploadFileOpen)
+      : Screen(renderer, inputManager),
+        onFileSelectionOpen(onFileSelectionOpen),
+        onSettingsOpen(onSettingsOpen),
+        onUploadFileOpen(onUploadFileOpen) {}
+  void onEnter() override;
+  void onExit() override;
+  void handleInput() override;
+};

src/screens/UploadFileScreen.cpp

@@ -0,0 +1,138 @@
+#include "UploadFileScreen.h"
+
+#include <GfxRenderer.h>
+#include <SD.h>
+
+#include "config.h"
+#include "images/CrossLarge.h"
+#include "server/UploadServer.h"
+
+void UploadFileScreen::taskTrampoline(void* param) {
+  auto* self = static_cast<UploadFileScreen*>(param);
+  self->displayTaskLoop();
+}
+
+void UploadFileScreen::displayTaskLoop() {
+  while (true) {
+    if (updateRequired) {
+      updateRequired = false;
+      xSemaphoreTake(renderingMutex, portMAX_DELAY);
+      render();
+      xSemaphoreGive(renderingMutex);
+    }
+    vTaskDelay(10 / portTICK_PERIOD_MS);
+  }
+}
+
+void UploadFileScreen::render() const {
+  const auto pageWidth = GfxRenderer::getScreenWidth();
+  const auto pageHeight = GfxRenderer::getScreenHeight();
+
+  renderer.clearScreen();
+  renderer.drawImage(CrossLarge, (pageWidth - 128) / 2, (pageHeight - 128) / 2, 128, 128);
+  renderer.drawCenteredText(UI_FONT_ID, pageHeight / 2 + 70, "CrossPoint", true, BOLD);
+  renderer.drawCenteredText(SMALL_FONT_ID, pageHeight / 2 + 95, "UPLOADING");
+
+  if (currentUploadStatus == InProgress) {
+    const double complete =
+        static_cast<double>(currentUploadCompleteSize) / static_cast<double>(currentUploadTotalSize);
+    renderer.drawRect(20, pageHeight / 2 + 110, pageWidth - 40, 50);
+    renderer.fillRect(22, pageHeight / 2 + 112, (pageWidth - 44) * complete, 46);
+  }
+
+  renderer.displayBuffer();
+}
+
+void UploadFileScreen::onFileUploadStart(AsyncWebServerRequest* request, const String& filename) {
+  if (request->hasHeader("Content-Length")) {
+    const String contentLengthStr = request->header("Content-Length");
+    currentUploadTotalSize = contentLengthStr.toInt();
+  } else {
+    currentUploadTotalSize = 0;
+  }
+  currentUploadCompleteSize = 0;
+  currentUploadFilename = filename;
+  currentUploadStatus = InProgress;
+  updateRequired = true;
+
+  // First chunk of data: open the file in write mode
+  // Use request->_tempFile to manage the file object across chunks
+  // Writing to SD uses SPI, so lock the screen
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  request->_tempFile = SD.open("/" + filename, FILE_WRITE, true);
+  xSemaphoreGive(renderingMutex);
+}
+
+void UploadFileScreen::onFileUploadPart(AsyncWebServerRequest* request, const uint8_t* data, const size_t len) {
+  // Write the received chunk of data to the file
+  // Writing to SD uses SPI, so lock the screen
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  request->_tempFile.write(data, len);
+  xSemaphoreGive(renderingMutex);
+
+  const int oldPercent =
+      static_cast<double>(currentUploadCompleteSize) / static_cast<double>(currentUploadTotalSize) * 100;
+  currentUploadCompleteSize += len;
+  const int newPercent =
+      static_cast<double>(currentUploadCompleteSize) / static_cast<double>(currentUploadTotalSize) * 100;
+
+  // Only update the screen at most every 5% to avoid blocking the SPI channel
+  if (oldPercent / 5 < newPercent / 5) {
+    updateRequired = true;
+  }
+}
+
+void UploadFileScreen::onFileUploadEnd(AsyncWebServerRequest* request) {
+  currentUploadStatus = Complete;
+
+  // Final chunk of data: close the file and send a response
+  // Writing to SD uses SPI, so lock the screen
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  request->_tempFile.close();
+  xSemaphoreGive(renderingMutex);
+
+  updateRequired = true;
+}
+
+void UploadFileScreen::onEnter() {
+  renderingMutex = xSemaphoreCreateMutex();
+
+  uploadServer.reset(new UploadServer(
+      [this](AsyncWebServerRequest* request, const String& filename) { onFileUploadStart(request, filename); },
+      [this](AsyncWebServerRequest* request, const uint8_t* data, const size_t len) {
+        onFileUploadPart(request, data, len);
+      },
+      [this](AsyncWebServerRequest* request) { onFileUploadEnd(request); }));
+  uploadServer->begin();
+
+  // Trigger first update
+  updateRequired = true;
+
+  xTaskCreate(&UploadFileScreen::taskTrampoline, "UploadFileScreenTask",
+              2048,               // Stack size
+              this,               // Parameters
+              1,                  // Priority
+              &displayTaskHandle  // Task handle
+  );
+}
+
+void UploadFileScreen::onExit() {
+  // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  if (displayTaskHandle) {
+    vTaskDelete(displayTaskHandle);
+    displayTaskHandle = nullptr;
+  }
+  uploadServer->end();
+  uploadServer.reset();
+  vSemaphoreDelete(renderingMutex);
+  renderingMutex = nullptr;
+}
+
+void UploadFileScreen::handleInput() {
+  uploadServer->loop();
+
+  if (inputManager.wasPressed(InputManager::BTN_BACK)) {
+    onGoHome();
+  }
+}

src/screens/UploadFileScreen.h

@@ -0,0 +1,33 @@
+#pragma once
+#include <memory>
+
+#include "Screen.h"
+#include "server/UploadServer.h"
+
+class UploadFileScreen final : public Screen {
+  enum UploadStatus { Idle, InProgress, Complete };
+
+  TaskHandle_t displayTaskHandle = nullptr;
+  SemaphoreHandle_t renderingMutex = nullptr;
+  std::unique_ptr<UploadServer> uploadServer = nullptr;
+  size_t currentUploadTotalSize = 0;
+  size_t currentUploadCompleteSize = 0;
+  String currentUploadFilename = "";
+  UploadStatus currentUploadStatus = Idle;
+  bool updateRequired = false;
+  const std::function<void()> onGoHome;
+
+  static void taskTrampoline(void* param);
+  [[noreturn]] void displayTaskLoop();
+  void render() const;
+  void onFileUploadStart(AsyncWebServerRequest* request, const String& filename);
+  void onFileUploadPart(AsyncWebServerRequest* request, const uint8_t* data, size_t len);
+  void onFileUploadEnd(AsyncWebServerRequest* request);
+
+ public:
+  explicit UploadFileScreen(GfxRenderer& renderer, InputManager& inputManager, const std::function<void()>& onGoHome)
+      : Screen(renderer, inputManager), onGoHome(onGoHome) {}
+  void onEnter() override;
+  void onExit() override;
+  void handleInput() override;
+};

src/server/UploadServer.cpp

@@ -0,0 +1,59 @@
+#include "UploadServer.h"
+
+#include <WiFi.h>
+
+#include "html/UploadHtml.generated.h"
+#include "html/UploadSuccessHtml.generated.h"
+
+void UploadServer::begin() {
+  dnsServer.reset(new DNSServer());
+  server.reset(new AsyncWebServer(80));
+
+  WiFi.mode(WIFI_AP);
+  WiFi.softAP("CrossPoint");
+
+  server->on("/upload", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(200, "text/html", UploadHtml); });
+
+  server->on(
+      "/upload", HTTP_POST, [](AsyncWebServerRequest* request) { request->send(200, "text/html", UploadSuccessHtml); },
+      [this](AsyncWebServerRequest* request, const String& filename, const size_t index, const uint8_t* data,
+             const size_t len, const bool final) {
+        // This function is called multiple times as data chunks are received
+        if (!index) {
+          onStart(request, filename);
+        }
+
+        if (len) {
+          onPart(request, data, len);
+        }
+
+        if (final) {
+          onEnd(request);
+        }
+      });
+
+  server->onNotFound([](AsyncWebServerRequest* request) { request->redirect("/upload"); });
+
+  dnsServer->start(53, "*", WiFi.softAPIP());
+  server->begin();
+  running = true;
+}
+
+void UploadServer::loop() {
+  if (running) {
+    dnsServer->processNextRequest();
+  }
+}
+
+void UploadServer::end() {
+  if (running) {
+    server->reset();
+    server->end();
+    dnsServer->stop();
+    WiFi.softAPdisconnect(true);
+    WiFi.mode(WIFI_OFF);
+    server.reset();
+    dnsServer.reset();
+    running = false;
+  }
+}

src/server/UploadServer.h

@@ -0,0 +1,24 @@
+#pragma once
+#include <DNSServer.h>
+#include <ESPAsyncWebServer.h>
+
+#include <memory>
+
+class UploadServer {
+  bool running = false;
+  std::unique_ptr<DNSServer> dnsServer = nullptr;
+  std::unique_ptr<AsyncWebServer> server = nullptr;
+  std::function<void(AsyncWebServerRequest* request, const String& filename)> onStart;
+  std::function<void(AsyncWebServerRequest* request, const uint8_t* data, size_t len)> onPart;
+  std::function<void(AsyncWebServerRequest* request)> onEnd;
+
+ public:
+  UploadServer(const std::function<void(AsyncWebServerRequest* request, const String& filename)>& onStart,
+               const std::function<void(AsyncWebServerRequest* request, const uint8_t* data, size_t len)>& onPart,
+               const std::function<void(AsyncWebServerRequest* request)>& onEnd)
+      : onStart(onStart), onPart(onPart), onEnd(onEnd) {}
+  ~UploadServer() = default;
+  void begin();
+  void loop();
+  void end();
+};

src/server/html/Upload.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CrossPoint File Upload</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f0f2f5;
+      color: #333;
+      text-align: center;
+    }
+
+    .container {
+      max-width: 400px;
+      margin: 40px auto;
+      padding: 30px;
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    h1 {
+      color: #1a73e8;
+      font-size: 1.5em;
+      margin-bottom: 20px;
+    }
+
+    input[type="file"] {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 20px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+    .upload-button {
+      background-color: #1a73e8;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+      transition: background-color 0.3s, opacity 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .upload-button:hover:not(:disabled) {
+      background-color: #145cb3;
+    }
+
+    .note {
+      margin-top: 20px;
+      font-size: 0.85em;
+      color: #666;
+    }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <h1>CrossPoint Upload</h1>
+
+  <form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
+
+    <label for="file-input" style="display: none;">Choose File:</label>
+    <input type="file" id="file-input" name="file" required>
+
+    <button type="submit" id="uploadButton" class="upload-button">
+      <span id="buttonText" class="button-text">Upload File</span>
+    </button>
+  </form>
+
+  <p class="note">Check your device for upload progress.</p>
+</div>
+</body>
+</html>

src/server/html/UploadSuccess.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Upload Successful</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f0f2f5;
+      color: #333;
+      text-align: center;
+    }
+
+    .container {
+      max-width: 400px;
+      margin: 80px auto;
+      padding: 30px;
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      animation: fadeIn 0.5s ease-in-out;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    h1 {
+      color: #28a745; /* Green for success */
+      font-size: 1.8em;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 1.1em;
+      margin-bottom: 30px;
+    }
+
+    a.button {
+      display: inline-block;
+      background-color: #1a73e8;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      text-decoration: none; /* Remove underline */
+      font-size: 1em;
+      transition: background-color 0.3s;
+    }
+
+    a.button:hover {
+      background-color: #145cb3;
+    }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <h1>🎉 Success!</h1>
+  <p>Your file has been uploaded to your device.</p>
+
+  <a href="/upload" class="button">Upload Another File</a>
+</div>
+
+</body>
+</html>