94 lines
4.0 KiB
HTML
94 lines
4.0 KiB
HTML
<!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>
|
|
|
|
<aside class="terminal-strip" aria-live="polite">
|
|
<span>STATUS: <strong data-stat="status">SYNCING</strong></span>
|
|
<span>LATENCY: <strong data-stat="latency">--MS</strong></span>
|
|
<span>NODES: <strong data-stat="nodes">--</strong></span>
|
|
<span>MEMES: <strong data-stat="memes">--</strong></span>
|
|
<span class="active">MEMETICALLY_ACTIVE</span>
|
|
</aside>
|
|
|
|
<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>
|
|
|
|
<footer class="repo-footer">
|
|
<a href="https://git.yoonect.com/Nautilus/bitsforfree" rel="noopener noreferrer" target="_blank">
|
|
<img src="/assets/yoonect-logo.png" alt="" aria-hidden="true">
|
|
<span>SOURCE</span>
|
|
</a>
|
|
</footer>
|
|
</main>
|
|
|
|
<aside class="side-terminal" aria-live="polite">
|
|
<div>STATUS: <span data-stat="status">SYNCING</span></div>
|
|
<div>LATENCY: <span data-stat="latency">--MS</span></div>
|
|
<div>NODES: <span data-stat="nodes">--</span></div>
|
|
<div>MEMES: <span data-stat="memes">--</span></div>
|
|
<div class="active">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>
|