diff options
| author | Yuval Adam <_@yuv.al> | 2025-05-08 21:31:00 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-05-08 22:27:03 +0200 |
| commit | c8d6dc54e2ee44daa00b11c6300f4f0d6ef32186 (patch) | |
| tree | 0073da7bc68f5308610ed7d6d7bdc455ad4c6cf7 /src/pages | |
| parent | 7450fe585f1253bf30b9ccb7254019aafc5db088 (diff) | |
Initial migration to AstroJS
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/index.astro | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..39e0043 --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,69 @@ +--- +import Cidr from "../components/Cidr.tsx"; + +import "../styles/global.css"; + +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" /> + <meta name="generator" content={Astro.generator} /> + <title>{metadata.title}</title> + </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> |