From 38192d7d93254893ef0e7ec3107c022da8be499f Mon Sep 17 00:00:00 2001 From: Jibin Thomas Date: Sun, 14 Oct 2018 14:57:17 +0530 Subject: Refactor and modernize code base (#5) Fixes #3 - * Updated all the dependencies to latest version * Config files updated * Moved the files to src directory * Updated README file * Configured package.json and README.md for production build * Added gh-pages package * Added production details in README.md * Removed unnecessary script tag from index.html * Change the fonts to ubuntu --- src/index.html | 35 +++++++++++++++ src/index.js | 114 +++++++++++++++++++++++++++++++++++++++++++++++ src/style.scss | 137 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 286 insertions(+) create mode 100644 src/index.html create mode 100644 src/index.js create mode 100644 src/style.scss (limited to 'src') diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..15e017c --- /dev/null +++ b/src/index.html @@ -0,0 +1,35 @@ + + + + + + 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.

+ + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..c1c6825 --- /dev/null +++ b/src/index.js @@ -0,0 +1,114 @@ +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); + } + + 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 + }); + } + } + } + + getPretty() { + return this.state.octets.join('.') + '/' + this.state.cidr; + } + + render() { + var details = new Netmask(this.getPretty()); + + return ( +

+ {[...Array(4)].map((x, octet) => ( + + + {octet == '3' ? '/' : '.'} + + ))} + +

+ +

+
1. this.state.cidr - 1 + ? 'bit masked' + : 'bit unmasked' + } + > + {(this.state.octets[octet] & (1 << (7 - bit))) >> + (7 - bit)} +
+

+ +

+ + {details.mask} + Netmask + + + {details.first} + First IP + + + {details.last} + Last IP + + + {details.size.toLocaleString()} + Count + +

+ ); + } +} + +ReactDOM.render(, document.getElementById('app')); diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..3e05831 --- /dev/null +++ b/src/style.scss @@ -0,0 +1,137 @@ +@import url('https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono'); + +$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 { + font-size: modular-scale(2); + small { + text-transform: uppercase; + color: #669; + display: block; + } + } + p { + margin-right: 90px; + font-size: modular-scale(-1); + } + } + + 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; + text-align: center; + border: 0px; + border-radius: 3px; + } + span.octet { + span.dot { + font-size: 2.7em; + text-align: center; + padding: 0.1em 0.13em; + } + &: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.4em 0.6em; + 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); + color: lighten($color_e, 22%); + } + } + } + } + div.details { + span.netmask { + display: inline-block; + width: 20%; + } + span.first { + display: inline-block; + width: 20%; + } + span.last { + display: inline-block; + width: 20%; + } + span.count { + display: inline-block; + width: 20%; + } + span.value { + font-size: modular-scale(1); + } + span.label { + display: block; + font-family: 'Ubuntu', sans-serif; + text-transform: uppercase; + font-size: modular-scale(2); + font-weight: bold; + color: #779; + } + } + } + + footer { + margin-top: 50px; + text-align: center; + font-size: modular-scale(-1); + } +} -- cgit v1.3.1