index.html (17553B)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="color-scheme" content="dark"> 7 <meta name="description" content="iuna is an experimental cryptocurrency devnet that combines VDF finalization, a burn lottery, and proof-of-work issuance."> 8 <title>iuna Devnet</title> 9 <style> 10 :root { 11 color-scheme: dark; 12 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 13 background: #0d0f10; 14 color: #edf2f5; 15 --bg: #0d0f10; 16 --panel: #15191b; 17 --panel-2: #101315; 18 --line: #273036; 19 --muted: #98a6ad; 20 --text: #edf2f5; 21 --green: #d5f55f; 22 --cyan: #8de9cd; 23 --blue: #8bdcff; 24 --amber: #ffd070; 25 } 26 * { box-sizing: border-box; } 27 html { 28 max-width: 100%; 29 overflow-x: hidden; 30 scroll-padding-top: 76px; 31 } 32 body { 33 margin: 0; 34 max-width: 100%; 35 overflow-x: hidden; 36 background: var(--bg); 37 color: var(--text); 38 } 39 a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; } 40 code { 41 color: #c7f5ea; 42 overflow-wrap: anywhere; 43 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 44 } 45 pre { 46 margin: 0; 47 overflow-x: auto; 48 border: 1px solid var(--line); 49 border-radius: 8px; 50 padding: 14px; 51 background: #0b0d0e; 52 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); 53 } 54 .wrap { width: min(1060px, calc(100% - 44px)); margin: 0 auto; } 55 .topbar { 56 position: sticky; 57 top: 0; 58 z-index: 2; 59 border-bottom: 1px solid rgba(39, 48, 54, .9); 60 background: rgba(13, 15, 16, .82); 61 backdrop-filter: blur(12px); 62 } 63 .topbar .wrap { 64 display: flex; 65 justify-content: space-between; 66 gap: 18px; 67 align-items: center; 68 min-height: 58px; 69 } 70 .brand { display: flex; gap: 10px; align-items: center; font-weight: 900; } 71 .mark { 72 position: relative; 73 width: 32px; 74 height: 32px; 75 display: grid; 76 place-items: center; 77 overflow: hidden; 78 border: 1px solid #e8ff8d; 79 border-radius: 8px; 80 background: linear-gradient(145deg, #ecff8a 0%, var(--green) 54%, var(--cyan) 100%); 81 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 9px 20px rgba(213, 245, 95, .14); 82 } 83 .mark::after { 84 content: ""; 85 position: absolute; 86 inset: -40% -70%; 87 background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%); 88 transform: translateX(-58%) rotate(8deg); 89 opacity: 0; 90 pointer-events: none; 91 } 92 .mark svg { position: relative; z-index: 1; width: 21px; height: 21px; display: block; } 93 .mark .mark-loop { fill: none; stroke: #101315; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; } 94 .mark .mark-dot { fill: #101315; } 95 .brand:hover .mark::after { animation: mark-sheen .72s ease both; } 96 @keyframes mark-sheen { from { opacity: 0; transform: translateX(-58%) rotate(8deg); } 32% { opacity: 1; } to { opacity: 0; transform: translateX(58%) rotate(8deg); } } 97 nav { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; font-weight: 750; } 98 nav a { color: var(--muted); text-decoration: none; } 99 nav a:hover { color: var(--green); } 100 .hero { padding: 92px 0 48px; } 101 .hero-grid { 102 display: grid; 103 grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr); 104 gap: 32px; 105 align-items: end; 106 } 107 .eyebrow { 108 display: inline-flex; 109 gap: 8px; 110 align-items: center; 111 margin-bottom: 18px; 112 color: var(--green); 113 font-size: 12px; 114 font-weight: 900; 115 text-transform: uppercase; 116 } 117 .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 18px rgba(213, 245, 95, .75); } 118 h1 { 119 max-width: 760px; 120 margin: 0 0 8px; 121 font-size: clamp(48px, 9vw, 104px); 122 line-height: .92; 123 letter-spacing: 0; 124 } 125 .pronunciation { 126 margin: 0 0 20px; 127 color: var(--muted); 128 font-size: 15px; 129 font-weight: 700; 130 } 131 h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.1; letter-spacing: 0; } 132 h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: 0; } 133 p { max-width: 720px; color: #b7c3c9; font-size: 17px; line-height: 1.6; } 134 .lead { color: #eef4f6; font-size: 21px; } 135 .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } 136 .button { 137 display: inline-flex; 138 align-items: center; 139 gap: 8px; 140 min-height: 42px; 141 border: 1px solid var(--line); 142 border-radius: 8px; 143 padding: 0 14px; 144 background: var(--panel); 145 color: var(--text); 146 font-size: 14px; 147 font-weight: 850; 148 text-decoration: none; 149 } 150 .button.primary { border-color: var(--green); background: var(--green); color: #11140c; } 151 .button:hover { border-color: var(--green); } 152 .button.discord { 153 border-color: rgba(88, 101, 242, .72); 154 background: linear-gradient(180deg, rgba(88, 101, 242, .24), rgba(88, 101, 242, .14)); 155 color: #eef1ff; 156 box-shadow: 0 10px 28px rgba(88, 101, 242, .16), inset 0 1px 0 rgba(255, 255, 255, .08); 157 } 158 .button.discord:hover { 159 border-color: #8e99ff; 160 background: linear-gradient(180deg, rgba(88, 101, 242, .34), rgba(88, 101, 242, .2)); 161 box-shadow: 0 12px 34px rgba(88, 101, 242, .22), inset 0 1px 0 rgba(255, 255, 255, .1); 162 } 163 .button-icon { 164 width: 18px; 165 height: 18px; 166 flex: 0 0 auto; 167 fill: currentColor; 168 } 169 .repo-link { 170 color: var(--text); 171 text-decoration: none; 172 } 173 .repo-link:hover { color: var(--green); } 174 .status-panel { 175 border: 1px solid var(--line); 176 border-radius: 8px; 177 overflow: hidden; 178 background: rgba(21, 25, 27, .82); 179 box-shadow: 0 24px 80px rgba(0, 0, 0, .24); 180 } 181 .status-head { 182 display: flex; 183 justify-content: space-between; 184 gap: 10px; 185 align-items: center; 186 padding: 12px 14px; 187 border-bottom: 1px solid var(--line); 188 color: var(--muted); 189 font-size: 12px; 190 font-weight: 850; 191 text-transform: uppercase; 192 } 193 .status-body { display: grid; gap: 1px; background: var(--line); } 194 .stat { 195 display: grid; 196 grid-template-columns: 126px minmax(0, 1fr); 197 gap: 12px; 198 padding: 12px 14px; 199 background: var(--panel-2); 200 } 201 .label { color: #87949b; font-size: 11px; font-weight: 850; text-transform: uppercase; } 202 .value { color: var(--text); font-weight: 850; } 203 .value.green { color: var(--green); } 204 section { padding: 38px 0; border-top: 1px solid rgba(39, 48, 54, .9); scroll-margin-top: 76px; } 205 .section-head { display: grid; gap: 8px; margin-bottom: 18px; } 206 .section-head p { margin: 0; max-width: 680px; font-size: 15px; } 207 .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } 208 .card { 209 min-width: 0; 210 border: 1px solid var(--line); 211 border-radius: 8px; 212 padding: 16px; 213 background: rgba(21, 25, 27, .88); 214 } 215 .card p { margin: 0; font-size: 15px; } 216 .card .button { margin-top: 16px; } 217 .tag { 218 display: inline-flex; 219 margin-bottom: 12px; 220 border: 1px solid #3b464d; 221 border-radius: 999px; 222 padding: 3px 8px; 223 color: var(--muted); 224 font-size: 11px; 225 font-weight: 850; 226 text-transform: uppercase; 227 } 228 .tag.green { border-color: rgba(213, 245, 95, .42); color: var(--green); } 229 .tag.cyan { border-color: rgba(141, 233, 205, .4); color: var(--cyan); } 230 .tag.blue { border-color: rgba(139, 220, 255, .4); color: var(--blue); } 231 .split { 232 display: grid; 233 grid-template-columns: minmax(0, 1fr) minmax(260px, .54fr); 234 gap: 18px; 235 align-items: start; 236 } 237 .steps { 238 display: grid; 239 gap: 18px; 240 margin: 18px 0; 241 } 242 .step { 243 display: grid; 244 gap: 10px; 245 } 246 .step p { margin: 0; } 247 .join-panel { 248 display: grid; 249 grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); 250 gap: 18px; 251 border: 1px solid var(--line); 252 border-radius: 8px; 253 padding: 18px; 254 background: rgba(21, 25, 27, .88); 255 } 256 .join-steps { 257 display: grid; 258 gap: 14px; 259 counter-reset: join-step; 260 } 261 .join-step { 262 position: relative; 263 display: grid; 264 gap: 4px; 265 padding-left: 42px; 266 } 267 .join-step::before { 268 counter-increment: join-step; 269 content: counter(join-step); 270 position: absolute; 271 left: 0; 272 top: 1px; 273 width: 28px; 274 height: 28px; 275 display: grid; 276 place-items: center; 277 border: 1px solid rgba(213, 245, 95, .42); 278 border-radius: 999px; 279 color: var(--green); 280 font-size: 12px; 281 font-weight: 900; 282 } 283 .join-step h3, .role-row h3 { margin: 0; } 284 .join-step p, .role-row p { margin: 0; font-size: 15px; } 285 .join-actions { margin-top: 18px; } 286 .role-list { 287 display: grid; 288 gap: 10px; 289 border-left: 1px solid var(--line); 290 padding-left: 18px; 291 } 292 .role-row { 293 display: grid; 294 gap: 4px; 295 border: 1px solid #2d373d; 296 border-radius: 8px; 297 padding: 12px; 298 background: #101315; 299 } 300 .note { 301 border-left: 3px solid var(--green); 302 padding-left: 14px; 303 color: #cbd3d7; 304 font-size: 15px; 305 } 306 .footer { padding-bottom: 60px; color: #87949b; font-size: 14px; } 307 .footer .wrap { 308 display: flex; 309 justify-content: space-between; 310 gap: 14px; 311 flex-wrap: wrap; 312 } 313 @media (max-width: 820px) { 314 .hero { padding-top: 58px; } 315 .hero-grid, .split, .grid, .join-panel { grid-template-columns: 1fr; } 316 nav { display: none; } 317 .wrap { width: min(100% - 32px, 1060px); } 318 .stat { grid-template-columns: 1fr; gap: 4px; } 319 .role-list { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; } 320 } 321 </style> 322 </head> 323 <body> 324 <svg width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute"> 325 <symbol id="discord-icon" viewBox="0 0 24 24"> 326 <path d="M19.54 5.34A16.9 16.9 0 0 0 15.35 4a11.7 11.7 0 0 0-.54 1.1 15.8 15.8 0 0 0-4.62 0A11.7 11.7 0 0 0 9.65 4a16.9 16.9 0 0 0-4.19 1.34C2.81 9.28 2.09 13.12 2.45 16.9A16.8 16.8 0 0 0 7.59 19.5a12.8 12.8 0 0 0 1.1-1.79 10.9 10.9 0 0 1-1.73-.83c.14-.1.28-.21.42-.32a12.1 12.1 0 0 0 9.24 0c.14.11.28.22.42.32-.55.32-1.13.6-1.74.83.32.63.69 1.23 1.1 1.79a16.8 16.8 0 0 0 5.15-2.6c.42-4.38-.72-8.18-2.01-11.56ZM9.32 14.57c-1 0-1.82-.92-1.82-2.04 0-1.13.8-2.05 1.82-2.05 1.02 0 1.84.92 1.82 2.05 0 1.12-.8 2.04-1.82 2.04Zm5.36 0c-1 0-1.82-.92-1.82-2.04 0-1.13.8-2.05 1.82-2.05 1.02 0 1.84.92 1.82 2.05 0 1.12-.8 2.04-1.82 2.04Z"></path> 327 </symbol> 328 </svg> 329 <div class="topbar"> 330 <div class="wrap"> 331 <a class="brand repo-link" href="/"><span class="mark" aria-label="iuna"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle class="mark-dot" cx="9.4" cy="7.6" r="2.8"></circle><path class="mark-loop" d="M9.4 13v7.1c0 3.7 2.9 6.4 6.6 6.4s6.6-2.7 6.6-6.4V13"></path></svg></span><span>iuna</span></a> 332 <nav aria-label="Page sections"> 333 <a href="#whatisiuna">What is iuna</a> 334 <a href="#howtojoin">Join</a> 335 <a href="/git/iuna/file/docs/protocol.md.html">Protocol</a> 336 <a href="/git/iuna/">Source</a> 337 <a href="/downloads/">Downloads</a> 338 </nav> 339 </div> 340 </div> 341 342 <header class="hero"> 343 <div class="wrap hero-grid"> 344 <div> 345 <div class="eyebrow"><span class="dot"></span> Devnet prototype</div> 346 <h1>iuna</h1> 347 <p class="pronunciation" aria-label="Pronounced yoo-nuh">/ˈjuː.nə/</p> 348 <p class="lead">An experimental cryptocurrency devnet that combines VDF finalization, a burn lottery, and open proof-of-work issuance.</p> 349 <p>iuna is not a mainnet and not money yet. It is a small L1 lab for learning how a wallet, node, finalizer, miner, mempool, and peer network behave when real people run it on real machines.</p> 350 <pre><code>git clone https://iuna.jhx.app/git/iuna.git</code></pre> 351 <div class="actions"> 352 <a class="button primary" href="/downloads/">Download builds</a> 353 <a class="button" href="/git/iuna/file/docs/protocol.md.html">Read protocol</a> 354 <a class="button discord" href="https://discord.gg/JcXRSSDhS" target="_blank" rel="noopener noreferrer"><svg class="button-icon" aria-hidden="true" focusable="false"><use href="#discord-icon"></use></svg><span>Join Discord</span></a> 355 </div> 356 </div> 357 <aside class="status-panel" aria-label="Protocol snapshot"> 358 <div class="status-head"><span>Protocol Snapshot</span><span>devnet</span></div> 359 <div class="status-body"> 360 <div class="stat"><span class="label">Finalize</span><span class="value green">Burn lottery + VDF</span></div> 361 <div class="stat"><span class="label">Issue</span><span class="value">PoW mine actions</span></div> 362 <div class="stat"><span class="label">Wallet</span><span class="value">Encrypted local seed</span></div> 363 <div class="stat"><span class="label">Network</span><span class="value">One P2P TCP port</span></div> 364 </div> 365 </aside> 366 </div> 367 </header> 368 369 <main> 370 <section id="whatisiuna"> 371 <div class="wrap"> 372 <div class="section-head"> 373 <h2>What Is iuna?</h2> 374 <p>iuna combines proof-of-burn finalization, a VDF clock, and proof-of-work issuance. Burns turn capital into temporary timing power that must be paid for again, rather than a permanent stake position.</p> 375 </div> 376 <div class="grid"> 377 <div class="card"> 378 <span class="tag green">PoB</span> 379 <h3>Proof Of Burn</h3> 380 <p>Nodes burn IUNA to enter the block lottery. The top-ranked burner finalizes first; lower ranks can take over with extra VDF delay if the first one disappears.</p> 381 </div> 382 <div class="card"> 383 <span class="tag cyan">VDF</span> 384 <h3>Verifiable Delay</h3> 385 <p>The selected finalizer must run sequential VDF work before publishing a block. That delay is the chain's clock and gives fallback finalizers a clean way to take over.</p> 386 </div> 387 <div class="card"> 388 <span class="tag blue">PoW</span> 389 <h3>Proof Of Work Issuance</h3> 390 <p>PoW mine actions introduce new IUNA. Each action issues 2 IUNA: 1 IUNA goes to the miner and 1 IUNA is paid as a fixed fee to the block finalizer.</p> 391 </div> 392 </div> 393 </div> 394 </section> 395 396 <section id="howtojoin"> 397 <div class="wrap"> 398 <div class="section-head"> 399 <h2>How To Join</h2> 400 <p>Download the latest available build from <a href="/downloads/">Downloads</a>, start it, and follow setup. Choose how much of the network you want to run.</p> 401 </div> 402 <div class="join-panel"> 403 <div> 404 <div class="join-steps"> 405 <div class="join-step"> 406 <h3>Download</h3> 407 <p>Get the latest available build from the local downloads page.</p> 408 </div> 409 <div class="join-step"> 410 <h3>Set Up</h3> 411 <p>Create or import a wallet, back up your recovery phrase, and connect to the devnet.</p> 412 </div> 413 <div class="join-step"> 414 <h3>Choose Your Role</h3> 415 <p>Start simple as a wallet, then switch to node mode whenever you want to do more.</p> 416 </div> 417 </div> 418 <div class="actions join-actions"> 419 <a class="button primary" href="/downloads/">Download builds</a> 420 <a class="button" href="/git/iuna/">Browse source</a> 421 <a class="button discord" href="https://discord.gg/JcXRSSDhS" target="_blank" rel="noopener noreferrer"><svg class="button-icon" aria-hidden="true" focusable="false"><use href="#discord-icon"></use></svg><span>Join Discord</span></a> 422 </div> 423 </div> 424 <div class="role-list" aria-label="iuna roles"> 425 <div class="role-row"> 426 <span class="tag green">Wallet</span> 427 <h3>Wallet</h3> 428 <p>Send, receive, and inspect activity.</p> 429 </div> 430 <div class="role-row"> 431 <span class="tag cyan">Node</span> 432 <h3>Private Node</h3> 433 <p>Mine new coins with PoW actions or earn finalizer rewards by burning, without opening an inbound P2P port.</p> 434 </div> 435 <div class="role-row"> 436 <span class="tag blue">Public Peer</span> 437 <h3>Public Node</h3> 438 <p>Help strengthen the network by opening TCP port <code>9444</code> and sharing your public P2P address.</p> 439 </div> 440 </div> 441 </div> 442 <p class="note">Keep the management UI local. Only the P2P listener should be reachable by other nodes.</p> 443 </div> 444 </section> 445 </main> 446 447 <section class="footer"> 448 <div class="wrap"> 449 <span>iuna devnet prototype.</span> 450 <a href="/git/iuna/">Source</a> 451 </div> 452 </section> 453 </body> 454 </html>