From fa63f3c735f381ca480a879f382fe0b68e1d16cc Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Sat, 21 Sep 2024 13:26:56 +0200
Subject: Reduce old srcs
---
old/index.html | 40 +++++++++++
old/index.js | 201 +++++++++++++++++++++++++++++++++++++++++++++++++++++
old/src/index.html | 40 -----------
old/src/index.js | 201 -----------------------------------------------------
old/src/style.scss | 167 --------------------------------------------
old/style.scss | 167 ++++++++++++++++++++++++++++++++++++++++++++
6 files changed, 408 insertions(+), 408 deletions(-)
create mode 100644 old/index.html
create mode 100644 old/index.js
delete mode 100644 old/src/index.html
delete mode 100644 old/src/index.js
delete mode 100644 old/src/style.scss
create mode 100644 old/style.scss
diff --git a/old/index.html b/old/index.html
new file mode 100644
index 0000000..ae027a6
--- /dev/null
+++ b/old/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/index.js b/old/index.js
new file mode 100644
index 0000000..c7017aa
--- /dev/null
+++ b/old/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) => (
+
+
+ {[...Array(8)].map((x, bit) => (
+ this.state.cidr - 1
+ ? 'bit masked'
+ : 'bit unmasked'
+ }
+ >
+ {(this.state.octets[octet] & (1 << (7 - bit))) >>
+ (7 - bit)}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {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
+
+
+
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
deleted file mode 100644
index c7017aa..0000000
--- a/old/src/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) => (
-
-
- {[...Array(8)].map((x, bit) => (
- this.state.cidr - 1
- ? 'bit masked'
- : 'bit unmasked'
- }
- >
- {(this.state.octets[octet] & (1 << (7 - bit))) >>
- (7 - bit)}
-
- ))}
-
-
- ))}
-
-
-
-
-
- {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
-
-
-