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 --- old/src/index.html | 40 +++++++++++ old/src/index.js | 201 +++++++++++++++++++++++++++++++++++++++++++++++++++++ old/src/style.scss | 167 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 408 insertions(+) create mode 100644 old/src/index.html create mode 100644 old/src/index.js create mode 100644 old/src/style.scss (limited to 'old/src') diff --git a/old/src/index.html b/old/src/index.html new file mode 100644 index 0000000..ae027a6 --- /dev/null +++ b/old/src/index.html @@ -0,0 +1,40 @@ + + + + + + + CIDR.xyz + + + + + + + + + + + + + +
+

CIDR.xyzAn interactive IP address and CIDR range 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.

+
+
+ + + + \ No newline at end of file diff --git a/old/src/index.js b/old/src/index.js new file mode 100644 index 0000000..c7017aa --- /dev/null +++ b/old/src/index.js @@ -0,0 +1,201 @@ +import './style.scss'; + +import { Netmask } from 'netmask'; +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; + +class IPAddress extends Component { + constructor(props) { + super(props); + this.state = { + octets: [10, 88, 135, 144], + cidr: 28 + }; + this.handleChange = this.handleChange.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + this.handlePaste = this.handlePaste.bind(this); + this.handleWheel = this.handleWheel.bind(this); + } + + 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 + }); + } + } + } + + handleKeyDown(event) { + var lowerOctetValue = 0; + var higherOctetValue = event.target.dataset.octet === 'cidr' ? 32 : 255; + if (event.key === 'ArrowDown' && event.target.value > lowerOctetValue) { + event.target.value = +event.target.value - 1; + this.handleChange(event); + } + if (event.key === 'ArrowUp' && event.target.value < higherOctetValue) { + event.target.value = +event.target.value + 1; + this.handleChange(event); + } + if (event.key === '.') { + event.preventDefault() + var octet_input = event.target.parentNode.nextSibling.firstChild + if (octet_input instanceof HTMLInputElement) { + octet_input.select() + octet_input.focus() + } + } + if (event.key === '/') { + event.preventDefault() + var mask_input = event.target.parentNode.nextSibling + if (mask_input instanceof HTMLInputElement) { + mask_input.select() + mask_input.focus() + } + } + } + + handlePaste(event) { + const pasteText = event.clipboardData.getData('Text'); + var details = new Netmask(pasteText); + const cidrParts = details.toString().split('/'); + var octets = this.state.octets; + const octetParts = cidrParts[0].split('.'); + octetParts.map((octet, i) => { + octets[i] = octet; + }) + this.setState({ + octets: octets + }); + + if (+cidrParts[1] <= 32) { + this.setState({ + cidr: +cidrParts[1] + }); + } + } + + handleWheel(event) { + var lowerOctetValue = 0; + var higherOctetValue = event.target.dataset.octet === 'cidr' ? 32 : 255; + if (event.deltaY > 0 && event.target.value > lowerOctetValue) { + event.target.value = +event.target.value - 1; + this.handleChange(event); + } + if (event.deltaY < 0 && event.target.value < higherOctetValue) { + event.target.value = +event.target.value + 1; + this.handleChange(event); + } + } + + getPretty() { + return this.state.octets.join('.') + '/' + this.state.cidr; + } + + render() { + var details = new Netmask(this.getPretty()); + + return ( +
+
+ {[...Array(4)].map((x, octet) => ( + + + {octet == '3' ? '/' : '.'} + + ))} + +
+ +
+
    + {[...Array(4)].map((x, octet) => ( +
  1. +
      + {[...Array(8)].map((x, bit) => ( +
    1. this.state.cidr - 1 + ? 'bit masked' + : 'bit unmasked' + } + > + {(this.state.octets[octet] & (1 << (7 - bit))) >> + (7 - bit)} +
      2. + ))} +
    +
    2. + ))} +
+
+ +
+ + {details.mask} + Netmask + + + {details.base} + CIDR Base IP + + + {details.broadcast} + Broadcast IP + + + {details.size.toLocaleString()} + Count + +
+ +
+
+ +
+ + {details.first} + First Usable IP + + + {details.last} + Last Usable IP + +
+
+ ); + } +} + +ReactDOM.render(, document.getElementById('app')); diff --git a/old/src/style.scss b/old/src/style.scss new file mode 100644 index 0000000..0476a3e --- /dev/null +++ b/old/src/style.scss @@ -0,0 +1,167 @@ +@import url('https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono'); + +$xl: 87.5em; // 4k and hi-res desktop +$lg: 60em; // 1080 and hi-res laptops +$med: 40em; // hi-res tablets and low-res laptops +$sm: 28em; // mobile and low-res tablets +$xs: 20em; // mobile only + +$color_a: #a101a6; +$color_b: #d9005b; +$color_c: #84e900; +$color_d: #cff700; +$color_e: #aaa; +$octet_lighten: 15%; + +body { + background: #eee; + font-family: 'Ubuntu', sans-serif; + header { + margin-bottom: 30px; + margin-left: 40px; + h1 { + small { + text-transform: uppercase; + color: #669; + display: block; + } + } + p { + margin-right: 30px; + @media ( min-width: $med ) { + margin-right: 60px; + } + } + } + + div.ip-address { + text-align: center; + font-family: 'Ubuntu Mono', monospace; + div { + margin-top: 65px; + } + div.address { + input { + width: 2.5em; + font-size: 2.7em; + @media (max-width: $xl) { + font-size: calc(1em + 1.9vw); + } + text-align: center; + border: 0px; + border-radius: 3px; + } + span.octet { + span.dot { + text-align: center; + padding: 0.1em 0.13em; + font-size: 2.7em; + @media (max-width: $xl) { + font-size: calc(1em + 1.7vw); + } + } + &:nth-child(1) input.octet { + background-color: $color_a; + } + &:nth-child(2) input.octet { + background-color: $color_b; + } + &:nth-child(3) input.octet { + background-color: $color_c; + } + &:nth-child(4) input.octet { + background-color: $color_d; + } + } + input.cidr { + background-color: $color_e; + } + } + div.bits { + ol { + display: inline; + padding-left: 0px; + padding-right: 15px; + li.octet { + display: inline; + ol { + li.bit { + display: inline; + padding: 0.6em; + @media (max-width: $xl) { + padding: calc(-0.1em + 0.7vw); + } + margin-left: -1px; + border: 1px black solid; + } + } + &:nth-child(1) ol li.bit.unmasked { + background-color: lighten($color_a, $octet_lighten); + } + &:nth-child(2) ol li.bit.unmasked { + background-color: lighten($color_b, $octet_lighten); + } + &:nth-child(3) ol li.bit.unmasked { + background-color: lighten($color_c, $octet_lighten); + } + &:nth-child(4) ol li.bit.unmasked { + background-color: lighten($color_d, $octet_lighten); + } + ol li.bit.masked { + background-color: lighten($color_e, $octet_lighten); + } + } + } + } + div.details { + display: inline-flex; + justify-content: space-around; + width: 100%; + @media (min-width: 640px) { + width: 640px; + } + span { + display: block; + } + } + div.break { + width: 100%; + height: 0px; + margin: 0px; + } + div.usable { + display: inline-flex; + justify-content: space-around; + margin-top: 30px; + width: 100%; + @media (min-width: 640px) { + width: 640px; + } + span { + display: block; + } + } + span.value { + font-size: 1.22em; + @media (max-width: $xl) { + font-size: calc(0.7em + 0.6vw); + } + } + span.label { + display: block; + font-family: 'Ubuntu', sans-serif; + text-transform: uppercase; + font-size: 1.22em; + @media (max-width: $xl) { + font-size: calc(0.7em + 0.6vw); + } + font-weight: bold; + color: #656582; + } + } + + footer { + margin-top: 30px; + text-align: center; + } +} -- cgit v1.3.1