ipfs storage for images and other nontext items. for use with etica - runs on etica network and currencys
https://collect.etica-stats.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
6.9 KiB
153 lines
6.9 KiB
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<title>collect — Etica IPFS Collections</title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<meta name="theme-color" content="#0b0f14" /> |
|
<link rel="icon" href="./etica.png" type="image/png" /> |
|
<link rel="stylesheet" href="./theme.css" /> |
|
<style> |
|
:root { --bg:#0b0f14; --card:#0f141a; --muted:#98a2b3; --line:#1e2935; --txt:#e6edf3; --tag:#223040; } |
|
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";} |
|
header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0d1218;position:sticky;top:0;z-index:2;} |
|
header .brand{display:flex;align-items:center;gap:10px;font-weight:600;} |
|
header .spacer{flex:1} |
|
.btn{background:#1b2836;border:1px solid var(--line);color:var(--txt);padding:8px 12px;border-radius:10px;cursor:pointer} |
|
.btn[disabled]{opacity:.5;cursor:not-allowed} |
|
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace} |
|
main{max-width:1200px;margin:18px auto;padding:0 16px;display:grid;gap:16px} |
|
.grid{display:grid;gap:16px} |
|
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} |
|
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} |
|
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px} |
|
h2{margin:0 0 10px 0;font-size:16px} |
|
label{color:var(--muted);font-size:12px} |
|
input[type="text"],input[type="number"],select,input[type="file"]{width:100%;box-sizing:border-box;background:#0c1117;border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:10px} |
|
table{width:100%;border-collapse:collapse} |
|
thead th{font-size:12px;color:var(--muted);text-align:left;border-bottom:1px solid var(--line);padding:8px} |
|
tbody td{padding:8px;border-bottom:1px solid #14202b} |
|
.small{font-size:12px;color:var(--muted)} |
|
.tag{background:var(--tag);border:1px solid var(--line);padding:3px 8px;border-radius:99px;font-size:12px} |
|
.log{font:12px/1.35 ui-monospace,monospace;background:#0b0f14;border:1px solid var(--line);border-radius:10px;height:180px;overflow:auto;padding:10px;white-space:pre} |
|
.hidden{display:none} |
|
.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} |
|
.card-thumb{background:#0f141a;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:220px} |
|
.thumb-box{flex:1;display:flex;align-items:center;justify-content:center;background:#0b0f14;border:1px dashed #223040;border-radius:10px;overflow:hidden;min-height:120px} |
|
.thumb-box img{max-width:100%;max-height:200px;display:block} |
|
.kv{display:grid;grid-template-columns:180px 1fr;gap:6px} |
|
@media (max-width:1100px){ .gallery{grid-template-columns:repeat(3,minmax(0,1fr));} .cols-2{grid-template-columns:1fr} } |
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<div class="brand"> |
|
<img src="./etica.png" alt="Etica" width="20" height="20"/> |
|
<span>collect</span> |
|
</div> |
|
<div id="tbAcct" class="small mono">wallet: not connected</div> |
|
<div class="spacer"></div> |
|
<button id="btnConnectTop" class="btn">MetaMask Login</button> |
|
</header> |
|
|
|
<main> |
|
<!-- Uploaded Files (table) --> |
|
<div class="card"> |
|
<h2>Uploaded Files</h2> |
|
<div id="filesStatus" class="small" style="margin-bottom:8px;color:var(--muted)">—</div> |
|
<div id="filesEmpty" class="small" style="color:var(--muted)">No files yet.</div> |
|
<div id="filesTableWrap" class="hidden"> |
|
<table> |
|
<thead> |
|
<tr> |
|
<th>Filename</th> |
|
<th>Size</th> |
|
<th>CID</th> |
|
<th>Path</th> |
|
<th>Label</th> |
|
<th>Status</th> |
|
<th>When</th> |
|
</tr> |
|
</thead> |
|
<tbody id="filesTbody"></tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
<!-- Upload & Pay (existing inputs kept minimal; your backend endpoints unchanged) --> |
|
<div class="grid cols-2"> |
|
<div class="card"> |
|
<h2>Upload & Pay</h2> |
|
<div class="grid"> |
|
<div> |
|
<label>Choose file</label><br/> |
|
<input type="file" id="file" /> |
|
</div> |
|
<div> |
|
<label>Collection path (optional) — e.g. photos/2025/august/</label><br/> |
|
<input type="text" id="vpath" placeholder="e.g. photos/2025/august/" /> |
|
</div> |
|
<div> |
|
<label>Human-readable label (optional)</label><br/> |
|
<input type="text" id="label" placeholder="e.g. beach-sunset" maxlength="150" /> |
|
</div> |
|
<div style="display:flex;gap:8px;align-items:center"> |
|
<button class="btn" id="btnGetQuote">Get Quote</button> |
|
<button class="btn" id="btnPay">Pay</button> |
|
<div id="quoteStatus" class="small" style="color:var(--muted)">No quote yet.</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<h2>Recent uploads</h2> |
|
<div id="recentBox" class="thumb-box" style="min-height:260px;color:var(--muted)">No preview</div> |
|
<div class="small" id="recentFor" style="color:var(--muted)"></div> |
|
</div> |
|
</div> |
|
|
|
<!-- Gallery (thumbnails that were missing before) --> |
|
<div class="card"> |
|
<h2>Gallery</h2> |
|
<div id="galleryStatus" class="small" style="margin-bottom:8px;color:var(--muted)">—</div> |
|
<div id="gallery" class="gallery"></div> |
|
</div> |
|
|
|
<!-- Config & Health --> |
|
<div class="grid cols-2"> |
|
<div class="card"> |
|
<h2>Config</h2> |
|
<div class="kv small"> |
|
<div>Chain</div><div id="cfgChain">–</div> |
|
<div>RPC</div><div id="cfgRpc" class="mono">–</div> |
|
<div>Pay To</div><div id="cfgPayTo" class="mono">–</div> |
|
<div>Gateway</div><div id="cfgGateway" class="mono">–</div> |
|
<div>Tier</div><div id="cfgTier">–</div> |
|
<div>Price/Tier</div><div id="cfgPpt">–</div> |
|
<div>Confirmations</div><div id="cfgConf">–</div> |
|
</div> |
|
</div> |
|
<div class="card"> |
|
<h2>Health & Rates</h2> |
|
<div class="kv small"> |
|
<div>Latest block</div><div id="healthBlock" class="mono">–</div> |
|
<div>Conf required</div><div id="healthReq">–</div> |
|
<div>Server time</div><div id="healthNow">–</div> |
|
<div>Rates source</div><div id="rateSrc">–</div> |
|
<div>1 EGAZ ≈</div><div id="rateEgazUsd">–</div> |
|
<div>1 ETI ≈</div><div id="rateEtiUsd">–</div> |
|
<div>1 EGAZ =</div><div id="rateEtiPerEgaz">–</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Logs --> |
|
<div class="card"> |
|
<h2>Logs</h2> |
|
<div id="log" class="log"></div> |
|
</div> |
|
</main> |
|
|
|
<script src="./app.js!v=2025-08-31-01"></script> |
|
</body> |
|
</html>
|
|
|