From 65e7041a3c88a5b2d1ae76e7023807537775cb1b Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Sat, 21 Sep 2024 13:15:44 +0200 Subject: Initial NextJS project creation with basic structure --- app/favicon.ico | Bin 0 -> 25931 bytes app/fonts/GeistMonoVF.woff | Bin 0 -> 67864 bytes app/fonts/GeistVF.woff | Bin 0 -> 66268 bytes app/globals.css | 27 ++++++++++++ app/layout.tsx | 35 +++++++++++++++ app/page.tsx | 107 +++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 169 insertions(+) create mode 100644 app/favicon.ico create mode 100644 app/fonts/GeistMonoVF.woff create mode 100644 app/fonts/GeistVF.woff create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx (limited to 'app') diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/fonts/GeistMonoVF.woff b/app/fonts/GeistMonoVF.woff new file mode 100644 index 0000000..f2ae185 Binary files /dev/null and b/app/fonts/GeistMonoVF.woff differ diff --git a/app/fonts/GeistVF.woff b/app/fonts/GeistVF.woff new file mode 100644 index 0000000..1b62daa Binary files /dev/null and b/app/fonts/GeistVF.woff differ diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..13d40b8 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,27 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --background: #ffffff; + --foreground: #171717; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + } +} + +body { + color: var(--foreground); + background: var(--background); + font-family: Arial, Helvetica, sans-serif; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..b41b50f --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,35 @@ +import type { Metadata } from "next"; +import localFont from "next/font/local"; +import "./globals.css"; + +const geistSans = localFont({ + src: "./fonts/GeistVF.woff", + variable: "--font-geist-sans", + weight: "100 900", +}); +const geistMono = localFont({ + src: "./fonts/GeistMonoVF.woff", + variable: "--font-geist-mono", + weight: "100 900", +}); + +export const metadata: Metadata = { + title: "Interactive IP address and CIDR range calculator and visualizer - cidr.xyz", + description: "Explore our interactive tool for calculating and visualizing IP addresses and CIDR ranges. Perfect for network administrators and IT professionals, cidr.xyz offers easy-to-use features for subnet analysis, IP range calculations, and network planning.", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + {children} + + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..091d2f6 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,107 @@ +"use client" + +import React, { useState } from 'react'; +import { Netmask } from 'netmask'; + +export default function Cidr() { + const [ip, setIp] = useState([10, 88, 135, 144]); + const [cidr, setCidr] = useState(28); + const [cols, _setCols] = useState(["bg-purple-400", "bg-red-400", "bg-green-400", "bg-yellow-400"]); + + const bits = ip.map(octet => Array.from({ length: 8 }, (_, i) => (octet >> (7 - i)) & 1)); + + const parseOctet = (val: string, max: number) => { + const num = parseInt(val); + if (isNaN(num) || num < 0) return 0; + if (num > max) return max; + return num; + } + + const setIpOctet = (i: number, val: number) => { + const newIp = [...ip]; + newIp[i] = val; + setIp(newIp); + } + + // const handleChange(event) { + // var octets = this.state.octets; + // var val = +event.target.value.replace(/[^0-9]/g, ''); + // var octet = event.target.attributes['data-octet'].value; + // if (octet == 'cidr') { + // if (val <= 32) { + // this.setState({ + // cidr: val + // }); + // } + // } else { + // if (val <= 255) { + // octets[+octet] = val; + // this.setState({ + // octets: octets + // }); + // } + // } + // } + + return ( +

CIDR / IP Visualizer

+ CIDR is a notation for describing + blocks of IP addresses and is used heavily in various networking configurations. IP addresses contain 4 + octets, each consisting of 8 bits giving values between 0 and 255. The decimal value that comes after the + slash is the number of bits consisting of the routing prefix. This in turn can be translated into a netmask, + and also designates how many available addresses are in the block. +

+ +

+ {ip.map((octet, i) => ( +

+ setIpOctet(i, parseOctet(e.target.value, 255))} + className={`w-20 h-20 text-3xl text-center rounded-md ${cols[i]}`} + maxLength={3} + /> + {i == 3 ? "/" : "."} +

+ ))} + setCidr(parseOctet(e.target.value, 32))} + className="w-20 h-20 text-3xl text-center rounded-md bg-slate-300" + maxLength={2} + /> +

+ +

+ {bits.map((octet, i) => + {octet.map((bit, j) => {bit})} + )} +

+ +

+ IP Address: + {ip.join('.')} + CIDR: /{cidr} +

+ + +

+ ); +} -- cgit v1.3.1