Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="A minimal, modern IPv4 CIDR calculator with Fluent-inspired glassmorphism. Works completely offline as a PWA."> | |
| <meta name="theme-color" content="#334155"> | |
| <title>CIDR Calculator</title> | |
| <!-- Web App Manifest for PWA --> | |
| <link rel="manifest" href="./manifest.json"> | |
| <link rel="apple-touch-icon" href="./icons/icon-192.png"> | |
| <!-- Styling --> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> | |
| <!-- Animated Gradient Mesh Background --> | |
| <div class="bg-mesh"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="blob blob-3"></div> | |
| </div> | |
| <!-- Main Calculator Card --> | |
| <main class="glass-card"> | |
| <header> | |
| <h1>CIDR Calculator</h1> | |
| <p>Enter an IPv4 CIDR address to calculate subnet details</p> | |
| </header> | |
| <!-- Inputs Section --> | |
| <div class="input-section"> | |
| <div class="input-group"> | |
| <div class="input-wrapper"> | |
| <input type="text" id="cidr-input" value="192.168.0.1" placeholder="e.g. 192.168.0.1" autocomplete="off" spellcheck="false"> | |
| </div> | |
| <select id="prefix-dropdown" aria-label="Prefix Length"> | |
| <!-- Prefixes populated via JS --> | |
| </select> | |
| </div> | |
| <span class="error-message" id="error-msg"></span> | |
| </div> | |
| <!-- Results Section --> | |
| <section class="results-container" id="results" aria-live="polite"> | |
| <div class="result-row"> | |
| <span class="result-label">CIDR Notation</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-cidr">-</span> | |
| <button class="copy-btn" data-target="out-cidr" aria-label="Copy CIDR Notation"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-row"> | |
| <span class="result-label">Network Address</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-network">-</span> | |
| <button class="copy-btn" data-target="out-network" aria-label="Copy Network Address"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-row"> | |
| <span class="result-label">Broadcast Address</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-broadcast">-</span> | |
| <button class="copy-btn" data-target="out-broadcast" aria-label="Copy Broadcast Address"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-row"> | |
| <span class="result-label">Subnet Mask</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-mask">-</span> | |
| <button class="copy-btn" data-target="out-mask" aria-label="Copy Subnet Mask"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-row"> | |
| <span class="result-label">Usable Host Range</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-range">-</span> | |
| <button class="copy-btn" data-target="out-range" aria-label="Copy Host Range"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-row"> | |
| <span class="result-label">Usable Hosts</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-hosts">-</span> | |
| <button class="copy-btn" data-target="out-hosts" aria-label="Copy Usable Hosts"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-row"> | |
| <span class="result-label">IP Class</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-class">-</span> | |
| <button class="copy-btn" data-target="out-class" aria-label="Copy IP Class"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-row"> | |
| <span class="result-label">Route Type</span> | |
| <div class="result-value-wrapper"> | |
| <span class="result-value" id="out-type">-</span> | |
| <button class="copy-btn" data-target="out-type" aria-label="Copy Route Type"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Theme Floating Action Button (Cycles Light -> Dark -> System) --> | |
| <button id="theme-toggle" class="theme-fab" aria-label="Switch Color Theme"> | |
| <svg id="theme-icon" viewBox="0 0 24 24"> | |
| <!-- Icon populated dynamically via JS --> | |
| </svg> | |
| </button> | |
| <script src="./app.js"></script> | |
| </body> | |
| </html> | |