blob: 6df6391767186aa07dd955d2f486baad8ad7659e (
plain)
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
|
---
import Cidr from "../components/Cidr";
import "../styles/global.css";
import { GOOGLE_ANALYTICS_ID } from "../config";
const metadata = {
title: "Interactive visual CIDR and IP range calculator",
description:
"Interactive tool for IP and CIDR calculations. Visualize subnet analysis and IP ranges. Educational resource for network planning and IT learning.",
};
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/ico" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<title>{metadata.title}</title>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
></script>
<script define:vars={{ GOOGLE_ANALYTICS_ID }} is:inline>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", GOOGLE_ANALYTICS_ID);
</script>
</head>
<body>
<div
class="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-2"
>
<div class="max-w-6xl w-full sm:p-8 p-2">
<h1
class="my-3 sm:my-1 text-center sm:text-left text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl"
>
IP / CIDR Calculator
</h1>
<Cidr client:idle />
<div class="my-6 text-lg leading-8 text-slate-900">
<p>
CIDR (Classless Inter-Domain Routing) notation is a
compact method for specifying IP address ranges and
network masks. It is widely used in network
configuration and management.
</p>
<p>
An IP address consists of 4 octets, each containing 8
bits that represent values from 0 to 255. In CIDR
notation, a forward slash (/) followed by a number
indicates the length of the network prefix in bits.
</p>
<p>
This prefix length determines the network mask and the
number of available host addresses within the specified
IP range. This calculator helps you visualize and
understand these CIDR blocks, making network planning
and configuration easier.
</p>
</div>
</div>
<footer class="text-left">
<p>
Created by <a
href="https://yuv.al"
class="text-blue-600 hover:underline">Yuval Adam</a
>. Source available on <a
href="https://github.com/yuvadm/cidr.xyz"
class="text-blue-600 hover:underline">Github</a
>.
</p>
</footer>
</div>
</body>
</html>
|
