Hugging Face's logo

Spaces:
pitangent
/
CIDR-Calculator
Running

App Files Community
CIDR-Calculator
File size: 6,776 Bytes
3668173
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5f2f140
3668173
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d3b94b8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<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>