Remove all legacy files

author: Yuval Adam <_@yuv.al> 2024-09-21 15:11:01 +0200
committer: Yuval Adam <_@yuv.al> 2024-09-21 15:13:25 +0200
commit: e2a047bdf0a060916cdc45984ee4b5af7bb083af (patch)
tree: 4926786310eaae2210be590721ab3e541c7ac92e
parent: 552c0dd15d8e780913b44ffb57e8e877783c7f31 (diff)
3 files changed, 0 insertions, 408 deletions
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 @@
-<!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="https://cidr.xyz">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-31LHNP2G97"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-        gtag('config', 'G-31LHNP2G97');
-    </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>
-
-    </footer>
-</body>
-
-</html>
-\ 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 (
-      <div className="ip-address">
-        <div className="address">
-          {[...Array(4)].map((x, octet) => (
-            <span className="octet">
-              <input
-                className="octet"
-                type="text"
-                data-octet={octet}
-                aria-label={"octet "+ octet}
-                onChange={this.handleChange}
-                onKeyDown={this.handleKeyDown}
-                onPaste={this.handlePaste}
-                onWheel={this.handleWheel}
-                value={this.state.octets[octet]}
-              />
-              <span className="dot">{octet == '3' ? '/' : '.'}</span>
-            </span>
-          ))}
-          <input
-            className="cidr"
-            type="text"
-            data-octet="cidr"
-            aria-label="cidr mask"
-            onChange={this.handleChange}
-            onKeyDown={this.handleKeyDown}
-            onPaste={this.handlePaste}
-            onWheel={this.handleWheel}
-            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="base">
-            <span className="value">{details.base}</span>
-            <span className="label">CIDR Base IP</span>
-          </span>
-          <span className="broadcast">
-            <span className="value">{details.broadcast}</span>
-            <span className="label">Broadcast IP</span>
-          </span>
-          <span className="count">
-            <span className="value">{details.size.toLocaleString()}</span>
-            <span className="label">Count</span>
-          </span>
-        </div>
-
-        <div className="break">
-        </div>
-
-        <div className="usable">
-          <span className="first">
-            <span className="value">{details.first}</span>
-            <span className="label">First Usable IP</span>
-          </span>
-          <span className="last">
-            <span className="value">{details.last}</span>
-            <span className="label">Last Usable IP</span>
-          </span>
-        </div>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<IPAddress />, 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;
-  }
-}
author	Yuval Adam <_@yuv.al>	2024-09-21 15:11:01 +0200
committer	Yuval Adam <_@yuv.al>	2024-09-21 15:13:25 +0200
commit	e2a047bdf0a060916cdc45984ee4b5af7bb083af (patch)
tree	4926786310eaae2210be590721ab3e541c7ac92e
parent	552c0dd15d8e780913b44ffb57e8e877783c7f31 (diff)