From e2a047bdf0a060916cdc45984ee4b5af7bb083af Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Sat, 21 Sep 2024 15:11:01 +0200 Subject: Remove all legacy files --- old/index.html | 40 ------------ old/index.js | 201 --------------------------------------------------------- old/style.scss | 167 ----------------------------------------------- 3 files changed, 408 deletions(-) delete mode 100644 old/index.html delete mode 100644 old/index.js delete mode 100644 old/style.scss diff --git a/old/index.html b/old/index.html deleted file mode 100644 index ae027a6..0000000 --- a/old/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - 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/index.js b/old/index.js deleted file mode 100644 index c7017aa..0000000 --- a/old/index.js +++ /dev/null @@ -1,201 +0,0 @@ -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/style.scss b/old/style.scss deleted file mode 100644 index 0476a3e..0000000 --- a/old/style.scss +++ /dev/null @@ -1,167 +0,0 @@ -@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