summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorJibin Thomas <jibin.thomas2706@gmail.com>2018-10-14 14:57:17 +0530
committerYuval Adam <_@yuv.al>2018-10-14 11:27:17 +0200
commit38192d7d93254893ef0e7ec3107c022da8be499f (patch)
tree4401e42fe295cd48f69063dd83875684d68d2ca1 /src
parentd0c28b4b61696f954e8d3372feafda7868e80be9 (diff)
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
Diffstat (limited to 'src')
-rw-r--r--src/index.html35
-rw-r--r--src/index.js114
-rw-r--r--src/style.scss137
3 files changed, 286 insertions, 0 deletions
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 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+
+ <title>CIDR.xyz</title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="robots" content="all">
+ <meta name="keywords" content="cidr, ip address, range, netmask, visualizer">
+ <meta name="description" content="Interactive IP address and CIDR range visualizer">
+ <meta name="author" content="Yuval Adam">
+
+ <link rel="canonical" href="http://cidr.xyz">
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-71263113-1', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </head>
+ <body>
+ <header>
+ <h1>CIDR.xyz<small>An interactive IP address and CIDR range visualizer</small></h1>
+ <p><a href="https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing">CIDR</a> 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.</p>
+ </header>
+ <section id="app"></section>
+ <footer>
+ Created by <a href="https://y3xz.com">Yuval Adam</a>. Source available on <a href="https://github.com/yuvadm/cidr.xyz">Github</a>.
+ </footer>
+ </body>
+</html>
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 (
+ <div className="ip-address">
+ <div className="address">
+ {[...Array(4)].map((x, octet) => (
+ <span className="octet">
+ <input
+ className="octet"
+ type="text"
+ data-octet={octet}
+ onChange={this.handleChange}
+ value={this.state.octets[octet]}
+ />
+ <span className="dot">{octet == '3' ? '/' : '.'}</span>
+ </span>
+ ))}
+ <input
+ className="cidr"
+ type="text"
+ data-octet="cidr"
+ onChange={this.handleChange}
+ value={this.state.cidr}
+ />
+ </div>
+
+ <div className="bits">
+ <ol>
+ {[...Array(4)].map((x, octet) => (
+ <li className="octet">
+ <ol>
+ {[...Array(8)].map((x, bit) => (
+ <li
+ className={
+ octet * 8 + bit > this.state.cidr - 1
+ ? 'bit masked'
+ : 'bit unmasked'
+ }
+ >
+ {(this.state.octets[octet] & (1 << (7 - bit))) >>
+ (7 - bit)}
+ </li>
+ ))}
+ </ol>
+ </li>
+ ))}
+ </ol>
+ </div>
+
+ <div className="details">
+ <span className="netmask">
+ <span className="value">{details.mask}</span>
+ <span className="label">Netmask</span>
+ </span>
+ <span className="first">
+ <span className="value">{details.first}</span>
+ <span className="label">First IP</span>
+ </span>
+ <span className="last">
+ <span className="value">{details.last}</span>
+ <span className="label">Last IP</span>
+ </span>
+ <span className="count">
+ <span className="value">{details.size.toLocaleString()}</span>
+ <span className="label">Count</span>
+ </span>
+ </div>
+ </div>
+ );
+ }
+}
+
+ReactDOM.render(<IPAddress />, 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);
+ }
+}
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 12:40:29 +0000