1 files changed, 70 insertions, 0 deletions
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..3100128
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Submit one image privately for review.">
+    <title>Private Drop</title>
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    <main class="shell">
+      <header class="masthead">
+        <a class="brand" href="/" aria-label="Private Drop home">
+          <span class="brand-mark" aria-hidden="true"></span>
+          Private Drop
+        </a>
+        <span class="privacy-label"><span aria-hidden="true">●</span> Private intake</span>
+      </header>
+
+      <section class="intro" aria-labelledby="page-title">
+        <p class="eyebrow">Secure image submission</p>
+        <h1 id="page-title">Send one image.<br><em>Nothing more.</em></h1>
+        <p class="lede">Your image is delivered directly to our private review queue. It is never published or made available through a public link.</p>
+      </section>
+
+      <section class="upload-card" aria-labelledby="upload-title">
+        <div class="card-heading">
+          <div>
+            <p class="step">01 / Upload</p>
+            <h2 id="upload-title">Choose your image</h2>
+          </div>
+          <p class="formats">JPG · PNG · HEIC<br>10 MB maximum</p>
+        </div>
+
+        <form id="upload-form" novalidate>
+          <input id="image-input" name="image" type="file" accept=".jpg,.jpeg,.png,.heic,image/jpeg,image/png,image/heic,image/heif" required>
+          <label class="drop-zone" for="image-input" id="drop-zone">
+            <span class="upload-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" role="img"><path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14.5V19h14v-4.5"/></svg>
+            </span>
+            <span class="drop-title">Drop an image here</span>
+            <span class="drop-copy">or <u>browse your device</u></span>
+          </label>
+
+          <div class="file-row" id="file-row" hidden>
+            <div class="thumb-wrap"><img id="preview" alt="Selected image preview"></div>
+            <div class="file-details">
+              <strong id="file-name"></strong>
+              <span id="file-size"></span>
+            </div>
+            <button class="remove-button" type="button" id="remove-button" aria-label="Remove selected image">×</button>
+          </div>
+
+          <p class="status" id="status" role="status" aria-live="polite"></p>
+          <button class="submit-button" type="submit" id="submit-button" disabled>
+            <span>Submit image</span><span aria-hidden="true">↗</span>
+          </button>
+        </form>
+      </section>
+
+      <aside class="privacy-note">
+        <span class="lock" aria-hidden="true">⌁</span>
+        <div><strong>Private by design</strong><p>Files are renamed on arrival, stored outside the public website, and available only to the review team.</p></div>
+      </aside>
+
+      <footer><span>Private Drop</span><span>Confidential image intake</span></footer>
+    </main>
+    <script src="/app.js" defer></script>
+  </body>
+</html>