smileBeda
48f05bcf8a
Add one-click meme copying, complete viewer actions, fixed-footer pagination, protocol lore, and the Homo Reseticus download chooser. Install dedicated social and favicon assets, expand local demo data, and synchronize the changelog, documentation, package, and OpenAPI release metadata.
205 lines
11 KiB
HTML
205 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>__SEO_TITLE__</title>
|
|
<meta name="description" content="__SEO_DESCRIPTION__">
|
|
<meta name="robots" content="index,follow,max-image-preview:large">
|
|
<meta name="application-name" content="__SEO_TITLE__">
|
|
<meta name="theme-color" content="#00ff41">
|
|
<link rel="canonical" href="__SEO_CANONICAL__">
|
|
<link rel="manifest" href="/site.webmanifest?v=20260814">
|
|
<link rel="service-desc" type="application/openapi+json" href="/openapi.json">
|
|
<link rel="help" type="text/markdown" href="/meme-api.skill.md">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="__SEO_TITLE__">
|
|
<meta property="og:title" content="__SEO_TITLE__">
|
|
<meta property="og:description" content="__SEO_DESCRIPTION__">
|
|
<meta property="og:url" content="__SEO_CANONICAL__">
|
|
<meta property="og:image" content="__SEO_IMAGE__">
|
|
<meta property="og:image:type" content="__SEO_IMAGE_TYPE__">
|
|
<meta property="og:image:width" content="__SEO_IMAGE_WIDTH__">
|
|
<meta property="og:image:height" content="__SEO_IMAGE_HEIGHT__">
|
|
<meta property="og:image:alt" content="__SEO_IMAGE_ALT__">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="__SEO_TITLE__">
|
|
<meta name="twitter:description" content="__SEO_DESCRIPTION__">
|
|
<meta name="twitter:image" content="__SEO_IMAGE__">
|
|
<meta name="twitter:image:alt" content="__SEO_IMAGE_ALT__">
|
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg?v=20260814">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png?v=20260814">
|
|
<link rel="shortcut icon" href="/favicon.ico?v=20260814">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png?v=20260814">
|
|
<meta name="apple-mobile-web-app-title" content="Meme Protocol">
|
|
<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="application/ld+json" nonce="__CSP_NONCE__">__SEO_JSON_LD__</script>
|
|
<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">ADD MEME</button>
|
|
</header>
|
|
|
|
<main class="shell">
|
|
<div class="status-line" aria-live="polite">
|
|
<nav class="protocol-menu" aria-label="Protocol menu">
|
|
<button id="open-pet" type="button">DOWNLOAD PET</button>
|
|
<button id="open-lore" type="button">READ LORE</button>
|
|
</nav>
|
|
<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>
|
|
|
|
</main>
|
|
|
|
<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>
|
|
|
|
<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">ADD_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>RATIO: ANY</span>
|
|
<span>OUTPUT_FORMAT: WEBP</span>
|
|
<span>MAX_INPUT_EDGE: 6000PX</span>
|
|
<span>MAX_PIXELS: 20MP</span>
|
|
<span>OUTPUT_MAX_EDGE: 1600PX</span>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-action" id="cancel-upload" type="button">CANCEL</button>
|
|
<button class="primary-action" id="add-meme-button" type="submit">ADD MEME</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="">
|
|
<div class="lightbox-actions">
|
|
<div class="stats">
|
|
<span class="card-stat" id="lightbox-view-count"><span class="material-symbols-outlined" aria-hidden="true">visibility</span><span data-count>0</span></span>
|
|
<span class="card-stat" id="lightbox-download-count"><span class="material-symbols-outlined" aria-hidden="true">download</span><span data-count>0</span></span>
|
|
</div>
|
|
<div class="action-group">
|
|
<button class="text-action icon-only-action" id="lightbox-copy" type="button" aria-label="Copy meme image" title="Copy meme image"><span class="material-symbols-outlined" aria-hidden="true">content_copy</span></button>
|
|
<a class="text-action icon-only-action" id="lightbox-download" href="#" aria-label="Download meme" title="Download meme"><span class="material-symbols-outlined" aria-hidden="true">download</span></a>
|
|
<button class="text-action icon-only-action" id="lightbox-share" type="button" aria-label="Share meme" title="Share meme"><span class="material-symbols-outlined" aria-hidden="true">share</span></button>
|
|
</div>
|
|
</div>
|
|
<p class="viewer-status" data-action-status role="status" aria-live="polite"></p>
|
|
</dialog>
|
|
|
|
<dialog class="modal" id="pet-modal" aria-labelledby="pet-title">
|
|
<div class="modal-panel pet-panel">
|
|
<div class="modal-header">
|
|
<h2 id="pet-title">DOWNLOAD_PET</h2>
|
|
<button class="icon-action" id="close-pet" type="button" aria-label="Close">X</button>
|
|
</div>
|
|
<div class="pet-downloads">
|
|
<p class="pet-prompt">SELECT_PET_BUILD</p>
|
|
<a class="pet-download" href="/assets/downloads/homo-reseticus.zip" download="homo-reseticus.zip">
|
|
<span>
|
|
<strong>HOMO_RESETICUS</strong>
|
|
<small>ORIGINAL // ZIP // 805 KB</small>
|
|
</span>
|
|
<span class="material-symbols-outlined" aria-hidden="true">download</span>
|
|
</a>
|
|
<a class="pet-download" href="/assets/downloads/homo-reseticus-v2.zip" download="homo-reseticus-v2.zip">
|
|
<span>
|
|
<strong>HOMO_RESETICUS_V2</strong>
|
|
<small>VERSION_2 // ZIP // 731 KB</small>
|
|
</span>
|
|
<span class="material-symbols-outlined" aria-hidden="true">download</span>
|
|
</a>
|
|
<p class="pet-footnote">This pet can also be downloaded from <a href="https://petdex.dev/u/homo-reseticus" rel="noopener noreferrer" target="_blank">petdex.dev/u/homo-reseticus</a>.</p>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog class="lightbox lorebox" id="lore-modal" aria-labelledby="lore-title">
|
|
<div class="lightbox-toolbar">
|
|
<span id="lore-title">MEME_PROTOCOL_LORE.TXT</span>
|
|
<button class="icon-action" id="close-lore" type="button" aria-label="Close">X</button>
|
|
</div>
|
|
<pre class="lore-text" id="lore-text">FETCHING_LORE...</pre>
|
|
<div class="lightbox-actions lore-actions">
|
|
<div class="action-group">
|
|
<button class="text-action icon-only-action" id="lore-copy" type="button" aria-label="Copy lore" title="Copy lore"><span class="material-symbols-outlined" aria-hidden="true">content_copy</span></button>
|
|
<a class="text-action icon-only-action" href="/assets/meme-protocol-lore.txt" download="meme-protocol-lore.txt" aria-label="Download lore" title="Download lore"><span class="material-symbols-outlined" aria-hidden="true">download</span></a>
|
|
<button class="text-action icon-only-action" id="lore-share" type="button" aria-label="Share lore" title="Share lore"><span class="material-symbols-outlined" aria-hidden="true">share</span></button>
|
|
</div>
|
|
</div>
|
|
<p class="viewer-status" data-action-status role="status" aria-live="polite"></p>
|
|
</dialog>
|
|
|
|
<dialog class="modal" id="share-modal" aria-labelledby="share-title">
|
|
<div class="modal-panel share-panel">
|
|
<div class="modal-header">
|
|
<h2 id="share-title">SHARE_MEME</h2>
|
|
<button class="icon-action" id="close-share" type="button" aria-label="Close">X</button>
|
|
</div>
|
|
<div class="share-body">
|
|
<label for="share-link" id="share-link-label">MEME_LINK</label>
|
|
<div class="share-link-row">
|
|
<input id="share-link" type="text" readonly spellcheck="false" aria-describedby="share-status">
|
|
<button class="primary-action share-copy" id="copy-share-link" type="button">
|
|
<span class="material-symbols-outlined" data-copy-icon aria-hidden="true">content_copy</span>
|
|
<span data-copy-label>COPY</span>
|
|
</button>
|
|
</div>
|
|
<p class="share-status" id="share-status" role="status" aria-live="polite"></p>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<p class="action-toast" id="action-status" role="status" aria-live="polite"></p>
|
|
</body>
|
|
</html>
|