init

2026-05-08 18:18:36 -03:00
parent c4bb073ca1
commit 5e10af882b
26 changed files with 3150 additions and 0 deletions
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>The Meme Protocol</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/assets/styles.css">
+    <script type="module" src="/assets/app.js"></script>
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="brand">THE_MEME_PROTOCOL</div>
+      <button class="primary-action" id="open-upload" type="button">SUBMIT</button>
+    </header>
+
+    <main class="shell">
+      <div class="status-line" aria-live="polite">
+        <span>PROTOCOL_STREAM_V.1.04</span>
+        <span class="live"><span class="pulse"></span>LIVE_FEED</span>
+      </div>
+
+      <section class="meme-grid" id="meme-grid" aria-label="Meme feed"></section>
+
+      <div class="feed-loader" id="feed-loader" aria-live="polite">
+        <div class="loader-ring" aria-hidden="true"></div>
+        <span id="feed-loader-label">FETCHING_NEXT_BLOCK...</span>
+      </div>
+    </main>
+
+    <aside class="side-terminal" aria-live="polite">
+      <div>STATUS: <span id="stat-status">SYNCING</span></div>
+      <div>LATENCY: <span id="stat-latency">--MS</span></div>
+      <div>NODES: <span id="stat-nodes">--</span></div>
+      <div>MEMES: <span id="stat-memes">--</span></div>
+      <div class="active" id="stat-pun">MEMETICALLY_ACTIVE</div>
+    </aside>
+
+    <div class="scroll-indicator" id="scroll-indicator" aria-hidden="true">
+      <span class="active"></span><span></span><span></span><span></span>
+    </div>
+
+    <dialog class="modal" id="upload-modal" aria-labelledby="upload-title">
+      <form class="modal-panel" id="upload-form" method="dialog">
+        <div class="modal-header">
+          <h2 id="upload-title">SUBMIT_MEME</h2>
+          <button class="icon-action" id="close-upload" type="button" aria-label="Close">X</button>
+        </div>
+        <label class="file-drop" for="meme-input">
+          <span id="file-label">SELECT PNG / JPEG</span>
+          <input id="meme-input" name="meme" type="file" accept="image/png,image/jpeg" required>
+        </label>
+        <div class="upload-rules">
+          <span>MAX_SIZE: 5MB</span>
+          <span>REQUIRED_RATIO: 1:1 SQUARE</span>
+          <span>OUTPUT_FORMAT: WEBP</span>
+          <span>MAX_DIMENSIONS: 6000x6000</span>
+        </div>
+        <div class="modal-actions">
+          <button class="secondary-action" id="cancel-upload" type="button">CANCEL</button>
+          <button class="primary-action" id="submit-upload" type="submit">UPLOAD</button>
+        </div>
+        <p class="form-status" id="form-status" role="status"></p>
+      </form>
+    </dialog>
+
+    <dialog class="lightbox" id="lightbox" aria-label="Meme viewer">
+      <div class="lightbox-toolbar">
+        <span id="lightbox-id"></span>
+        <button class="icon-action" id="close-lightbox" type="button" aria-label="Close">X</button>
+      </div>
+      <img id="lightbox-image" alt="">
+      <a class="primary-action lightbox-download" id="lightbox-download" href="#"><span class="material-symbols-outlined" aria-hidden="true">download</span><span>DOWNLOAD</span></a>
+    </dialog>
+  </body>
+</html>