From 82971e8d0b1e0e4f05888bce1aba2a58f6caef28 Mon Sep 17 00:00:00 2001
From: Trumeet <yuuta@yuuta.moe>
Date: Mon, 9 Aug 2021 19:32:34 -0700
Subject: feat: new homepage

---
 Prototype.odp                      | Bin 61051 -> 0 bytes
 bg.svg                             |  57 --------
 bg.webp                            | Bin 2880 -> 0 bytes
 index.css                          | 116 ---------------
 index.html                         | 283 +++++++++++++++++++++++++++++--------
 indiHome-noBackground.png          | Bin 253866 -> 0 bytes
 main.js                            |  66 ---------
 rickroll/Prototype.odp             | Bin 0 -> 61051 bytes
 rickroll/bg.svg                    |  57 ++++++++
 rickroll/bg.webp                   | Bin 0 -> 2880 bytes
 rickroll/index.css                 | 116 +++++++++++++++
 rickroll/index.html                |  65 +++++++++
 rickroll/indiHome-noBackground.png | Bin 0 -> 253866 bytes
 rickroll/main.js                   |  66 +++++++++
 topology.png                       | Bin 0 -> 259205 bytes
 15 files changed, 530 insertions(+), 296 deletions(-)
 delete mode 100644 Prototype.odp
 delete mode 100644 bg.svg
 delete mode 100644 bg.webp
 delete mode 100644 index.css
 delete mode 100644 indiHome-noBackground.png
 delete mode 100644 main.js
 create mode 100644 rickroll/Prototype.odp
 create mode 100644 rickroll/bg.svg
 create mode 100644 rickroll/bg.webp
 create mode 100644 rickroll/index.css
 create mode 100644 rickroll/index.html
 create mode 100644 rickroll/indiHome-noBackground.png
 create mode 100644 rickroll/main.js
 create mode 100644 topology.png

diff --git a/Prototype.odp b/Prototype.odp
deleted file mode 100644
index 887a71e..0000000
Binary files a/Prototype.odp and /dev/null differ
diff --git a/bg.svg b/bg.svg
deleted file mode 100644
index 6fd659b..0000000
--- a/bg.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.0"
-   width="363.000000pt"
-   height="360.000000pt"
-   viewBox="0 0 363.000000 360.000000"
-   preserveAspectRatio="xMidYMid meet"
-   id="svg76"
-   sodipodi:docname="bg.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
-  <defs
-     id="defs80" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1021"
-     id="namedview78"
-     showgrid="false"
-     inkscape:zoom="1.2948893"
-     inkscape:cx="178.38048"
-     inkscape:cy="252.69201"
-     inkscape:window-x="0"
-     inkscape:window-y="34"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg76" />
-  <metadata
-     id="metadata70">
-Created by potrace 1.16, written by Peter Selinger 2001-2019
-<rdf:RDF>
-  <cc:Work
-     rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type
-       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-  </cc:Work>
-</rdf:RDF>
-</metadata>
-  <path
-     d="M 0,360 H 181.5 363 V 180 l -2,-7 h -2.3 c -2.1,0 -10.1,2.8 -18.2,6.5 -1.6,0.7 -5.2,2 -7.9,2.9 -2.7,0.9 -6.1,2.5 -7.5,3.5 -1.4,1 -7.5,4.2 -13.6,7.1 -6,3 -11.1,5.7 -11.3,6.2 -0.2,0.4 -1.1,0.8 -2,0.8 -0.9,0 -3.3,1 -5.2,2.2 -7.1,4.5 -9.6,5.9 -14,7.9 -2.4,1.1 -4.7,2.4 -5,2.9 -0.5,0.7 -2.5,2.1 -9.9,6.5 -8.3,4.9 -21.7,14 -22.3,15 -0.4,0.7 -2.1,1.8 -3.8,2.5 -1.6,0.7 -3,1.6 -3,2.1 0,0.5 -0.6,0.9 -1.4,0.9 -0.7,0 -3.4,1.8 -5.9,4 -2.5,2.2 -4.8,4 -5.1,4 -0.4,0 -23,16 -27.1,19.2 -5.1,4 -16.7,12.4 -29,21 -3.3,2.3 -6.2,4.4 -6.5,4.8 -0.3,0.4 -3.2,2.5 -6.5,4.6 -7.8,5.2 -24.7,16.7 -26,17.7 -3,2.2 -8.7,5.7 -9.5,5.7 -0.5,0 -2.1,1 -3.7,2.3 C 110.9,326.1 85,339 76,342.4 45.8,353.8 23.5,351.8 6.2,336.2 L 1,331.4 v -8.1 -8.2 l 8.3,3.9 c 12.3,5.7 21.4,7.4 36.6,6.7 10.4,-0.5 14.3,-1.1 22.1,-3.7 10.9,-3.5 28.4,-11.9 32.6,-15.5 1.6,-1.4 3.2,-2.5 3.6,-2.5 2.1,0 24,-17.5 30.3,-24 3.8,-4 3.4,-3.9 -6.5,2.8 -14.5,9.7 -30.6,17.5 -45.2,21.8 -11.4,3.4 -13.3,3.7 -25.8,3.8 -11.3,0 -14.9,-0.3 -22,-2.3 C 25.9,303.6 12.4,297 5.4,291.7 l -4.3,-3.2 z"
-     id="path72"
-     sodipodi:nodetypes="cccccscssccsccccccssssccsccsccccccccccscccccccc"
-     style="fill:#ff0000;stroke:none;stroke-width:0.1" />
-</svg>
diff --git a/bg.webp b/bg.webp
deleted file mode 100644
index d3bd193..0000000
Binary files a/bg.webp and /dev/null differ
diff --git a/index.css b/index.css
deleted file mode 100644
index 9ef04e7..0000000
--- a/index.css
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
-html {
-    display: table;
-    margin: auto;
-}
-
-
-body{
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-image: url("indiHome-noBackground.png");
-    background-size: cover;
-    background-position: center bottom;
-}
-
-
-
-
-h1{
-    font-size: 2.0em;
-    margin-block-end: 0.05em;
-    margin-block-start: 0.05em;
-    font-weight: bold;
-}
-.highlight{
-    font-size: 2em;
-    font-weight: bold;
-}
-
-h2{
-    font-size: 1em;
-    margin-block-end: 0.1em;
-    margin-block-start: 0.1em;
-}
-
-
-
-
-.indihome-content{
-    position: absolute;
-    left: 5%;
-    top: 25%;
-}
-
-
-
-
-
-
-.indihome-line{
-    height: 4em;
-}
-
-.indihome-left{
-    float: left;
-    width: 45%;
-    text-align: right;
-}
-
-.node-left{
-    padding-right: 0.5em;
-}
-
-
-.node-head{
-    font-size: 0.8em;
-}
-.node-highlight{
-    font-size: 1.2em;
-    color: red;
-    font-weight: bold;
-}
-.node-geo{
-    font-size: 1.0em;
-    font-weight: bold;
-}
-
-
-.indihome-right{
-    float: right;
-    width: 55%;
-    height: 4em;
-    display: flex;
-    align-items: center;
-}
-.node-right{
-    padding-left: 0.5em;
-}
-.node-url{
-    text-align: left;
-    font-size: 1.4em;
-    font-weight: bold;
-}
-
-
-
-
-
-.header{
-    margin: auto;
-    left: 0;
-    right: 0;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    text-align: left;
-    width:auto;
-    display:inline-block;
-}
-
-.red{
-    color: red;
-    text-shadow: 0.05em 0.05em #0008;
-}
-
-
diff --git a/index.html b/index.html
index cadb91f..6e6138c 100644
--- a/index.html
+++ b/index.html
@@ -1,65 +1,234 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Yuuta Network Services</title>
-    <link rel="stylesheet" href="index.css">
-</head>
-<body>
-<div style="text-align: center;">
-    <div class="header">
-        <h1>Yuuta</h1>
-        <h1 style="font-size: 2.2em" class="red">Network Services</h1>
-        <h2><b>AS4242422980 <span style="color: gray; ">at</span> DN42</b></h2>
-        <h2>Global <span style="color: gray">Network</span> Infrastructure</h2>
-    </div>
-</div>
+<meta charset="utf-8">
+<title>Yuuta Network</title>
+<style>
+        html {
+            box-sizing: border-box;
+            font-size: 16px;
+        }
 
+        *,
+        *:before,
+        *:after {
+            box-sizing: inherit;
+        }
+
+        body,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        ol,
+        ul {
+            margin: 0;
+            padding: 0;
+            font-weight: normal;
+        }
+
+        ol,
+        ul {
+            list-style: none;
+        }
+
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        a {
+            color: #333;
+        }
+
+        header {
+            font-size: 1em;
+            margin-bottom: 1em;
+        }
+
+        section {
+            margin-bottom: 1em;
+        }
+
+        h1.small {
+            font-size: 1.4em;
+        }
+
+        h1 {
+            line-height: 1.2em;
+            margin-bottom: .2em;
+        }
+
+        .container {
+            padding: 1em;
+            background-color: #fcfcfc;
+            color: #333;
+            max-width: 1024px;
+            margin: 0 auto;
+        }
+
+        h2 {
+            font-size: 1.25em;
+            line-height: 1.25em;
+            padding-top: .12em;
+            padding-bottom: .12em;
+            padding-left: .25em;
+            margin-bottom: .5em;
+            background-color: #eee;
+            border-left: 4px solid #333;
+        }
 
-<div class="indihome-content" id="indihome-content">
-    <div class="indihome-line">
-        <div class="indihome-left">
-            <div class="node-head node-left"><b>Yuuta</b></div>
-            <div class="node-highlight node-left red">Network Services</div>
-            <div class="node-geo node-left">Tokyo, Japan</div>
-        </div>
-        <div class="indihome-right">
-            <div class="node-url node-right red">tyo1.jp.dn42.yuuta.moe</div>
-        </div>
-    </div>
-    <div class="indihome-line">
-        <div class="indihome-left">
-            <div class="node-head node-left"><b>Yuuta</b></div>
-            <div class="node-highlight node-left red">Network Services</div>
-            <div class="node-geo node-left">San Jose, United States</div>
-        </div>
-        <div class="indihome-right">
-            <div class="node-url node-right red">sjc1.us.dn42.yuuta.moe</div>
-        </div>
-    </div>
-    <div class="indihome-line">
-        <div class="indihome-left">
-            <div class="node-head node-left"><b>Yuuta</b></div>
-            <div class="node-highlight node-left red">Network Services</div>
-            <div class="node-geo node-left">Toronto, Canada</div>
-        </div>
-        <div class="indihome-right">
-            <div class="node-url node-right red">yyz1.ca.dn42.yuuta.moe</div>
-        </div>
-    </div>
-    <div class="indihome-line">
-        <div class="indihome-left">
-            <div class="node-head node-left"><b>Yuuta</b></div>
-            <div class="node-highlight node-left red">Network Services</div>
-            <div class="node-geo node-left">Frankfurt, Germany</div>
-        </div>
-        <div class="indihome-right">
-            <div class="node-url node-right red">fra1.de.dn42.yuuta.moe</div>
-        </div>
-    </div>
-</div>
 
-<script src="main.js"></script>
+        p {
+            font-size: 1em;
+            line-height: 1.2em;
+            margin-bottom: .5em;
+        }
 
+        .section-content {
+            margin-top: .25em;
+            margin-bottom: .25em;
+        }
+
+        .peertable {
+            border: 1px solid #333;
+            border-collapse: collapse;
+            text-align: center;
+        }
+
+        .peertable th,
+        .peertable td {
+            border: 1px solid #333;
+            text-align: center;
+            padding: .25em .5em .25em .5em;
+        }
+
+        .connected {
+            color: white;
+            background-color: rgb(26, 153, 121);
+        }
+
+        .connecting {
+            color: white;
+            background-color: rgb(23, 101, 218);
+        }
+
+        .disconnected {
+            color: white;
+            background-color: rgb(202, 30, 53);
+        }
+
+        .unknow {
+            background-color: #ccc;
+        }
+    </style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
+</head>
+<body>
+	<a class="github-fork-ribbon right-top" href="rickroll" data-ribbon="Rickroll" title="Rickroll">Rickroll</a>
+<div class="container">
+<header>
+<h1 class="en">Yuuta Network / AS142281 / AS4242422980</h1>
+</header>
+<section>
+<h2 class="en">About</h2>
+<div class="section-content en">
+<p><a href="https://yuuta.moe">Yuuta Liang (ID: YuutaW)</a>'s personal educational and research network.</p>
+<p>The main purpose running YuutaNet is to learn some networking skills.</p>
+<p>I run a few nodes and personal services on my network and I am open for peering.</p>
+<p><a href="https://peeringdb.com/net/27094">View on PeeringDB</a></p>
+</div>
+</section>
+<section>
+	<h2 class="en">Topology</h2>
+	<div class="section-content en">
+		<p>We have seven nodes across the world:</p>
+		<br />
+		<p>Legend:</p>
+		<ul>
+			<li><b>DN42</b>: This node is available to DN42 network (AS4242422980)</li>
+			<li><b>UIX</b>: This node is connected to <a href="https://unmetered.exchange">Unmetered Exchange</a>. Infers clearnet connectivity.</li>
+			<li><b>EVIX</b>: This node is connected to <a href="https://evix.org">EVIX</a>. Infers clearnet connectivity.</li>
+			<li><b>OPTiX</b>: This node is connected to <a href="https://www.optix.co.rs/">OPTiX</a>. Infers clearnet connectivity.</li>
+			<li><b>XXX Transit</b>: This node connectes to XXX upstream ISP and serves as an ABR in YuutaNet. Infers clearnet connectivity.</li>
+			<li><b>Peering</b>: This node is available for peering. See the Peering section below.</li>
+			<li><b>Core</b>: This node is a part of the backbone network and is full-meshed.</li>
+		</ul>
+		<br />
+		<h3>North America:</h3>
+		<p>United States:</p>
+		<ul>
+			<li>San Jose 1: sjc1.us.nodes.yuuta.network, sjc1.us.yuuta.dn42 <b>(DN42, EVIX, Peering, Core)</b></li>
+			<li>New Jersey 1: pis1.us.nodes.yuuta.network <b>(Vultr Transit, LSHIY Transit)</b></li>
+			<li>Chicago: us-1.yuuta.dn42 <b>(DN42)</b></li>
+		</ul>
+		<br />
+		<p>Canada:</p>
+		<ul>
+			<li>Toronto 1: yyz1.ca.yuuta.dn42 <b>(DN42, Peeing, Core)</b></li>
+			<li>Vancouver 1: yvr1.ca.nodes.yuuta.network <b>(UIX, EVIX, OPTiX, HE Transit, Peering)</b></li>
+			<li>My home: ca-1.yuuta.dn42 <b>(DN42)</b></li>
+		</ul>
+		<br />
+		<h3>East Asia:</h3>
+		<p>Japan:</p>
+		<ul>
+			<li>Tokyo 1: tyo1.jp.yuuta.dn42 <b>(DN42, Peering, Core)</b></li>
+		</ul>
+		<br />
+		<h3>Europe:</h3>
+		<p>Germany:</p>
+		<ul>
+			<li>Frankfurt 1: fra1.de.yuuta.dn42 <b>(DN42, Peering, Core)</b></li>
+		</ul>
+		<br />
+		<p>I deployed a /56 subnet to each geographical region. Currently, some random backbone nodes are full-meshed. Most nodes are intra-connected by iBGP and OSPF (all area 0).<p>
+		<p>I am planning to move away from full-meshing and give each geographical region an OSPF area. An upgrade to switch all clearnet regions from /56 to /48 for easier announcement is on the way.</p>
+		<p>Most nodes run Arch Linux at this time. We are considering to upgrade our architecture to VyOS for simpler management.</p>
+		<p>Particial topology diagram:</p>
+		<img src="topology.png" />
+	</div>	
+</section>
+<section>
+	<h2 class="en">Administration</h2>
+	<div class="section-content en">
+		<p><a href="https://yuuta.moe">YuutaW</a> is the only NOC of YuutaNet. You may contact me at <a href="mailto:noc@yuuta.moe"</a>noc@yuuta.moe</a>.</p>
+		<p>GPG Key: <a href="https://blog.yuuta.moe/F99854A5DAA0D15DF2FEF89CBCD2B4B9E853C284.gpg">F99854A5DAA0D15DF2FEF89CBCD2B4B9E853C284</a>.</p>
+	</div>
+</section>
+<section>
+	<h2 class="en">Peering</h2>
+	<div class="section-content en">
+		<p>We are open for peering!</p>
+		<p>For DN42 peering, you may use our <a href="https://peering.yuuta.moe">auto peering system</a>. It will setup our nodes immediatedly when you submit the peering form. Moreover, you may update your peering information or delete the connections at any time without contacting the NOC.</p>
+		<p>For clearnet peering, our most connections are established at IXs. For most IXs, we established the connection between our nodes with their route servers, which means you can just connect to their route server and you are ready to go. The whole list of peering locations could be found at our <a href="https://peeringdb.com/net/27094">PeeringDB page</a>. However, if you require some custom setup that require a dedicated BGP session, email our NOC. Keep in mind that this is a personal network so response time is not guaranteed.</p>
+	</div>
+</section>
+<section>
+<h2 class="en">Services</h2>
+<div class="section-content en">
+<p>YuutaNet provides:</p>
+<ul>
+	<li>DNS for yuuta.network., yuuta.dn42. and rDNS.</li>
+	<li><a href="https://ymc.moe">YMC Minecraft Server</a> is available via YuutaNet.</li>
+</ul>
+</div>
+</section>
+<hr />
+<section>
+<h2 class="en">External Links</h2>
+<div class="section-content en">
+	<p><a href="https://peeringdb.com/net/27094">PeeringDB: Yuuta Network</a></p>
+	<p><a href="https://bgp.he.net/AS142281">bgp.he.net: AS142281</a></p>
+	<p><a href="https://bgp.tools/as/142281">bgp.tools: AS142281</a></p>
+</div>
+</section>
+</div>
+</div>
 </body>
-</html>
\ No newline at end of file
+</html>
+
diff --git a/indiHome-noBackground.png b/indiHome-noBackground.png
deleted file mode 100644
index e48046a..0000000
Binary files a/indiHome-noBackground.png and /dev/null differ
diff --git a/main.js b/main.js
deleted file mode 100644
index 8f867fb..0000000
--- a/main.js
+++ /dev/null
@@ -1,66 +0,0 @@
-const css = window.document.styleSheets[0]
-
-
-let currentTarget={
-    fromLeft: 5,
-    toLeft: 5, // left: 5%;
-    fromTop:25,
-    toTop: 25, // top: 25%;
-    time: 0,
-}
-
-function genTarget(){
-    currentTarget.fromLeft = currentTarget.toLeft;
-    currentTarget.fromTop = currentTarget.toTop;
-    currentTarget.toLeft = 5 + (randn_bm() - 0.5)*10
-    currentTarget.toTop = 25 + (randn_bm()-0.5)*10
-    currentTarget.time = randn_bm() * 0.4 +0.05
-}
-cssIndex = undefined;
-
-const toMove = document.getElementById("indihome-content");
-let keyframeId = 0;
-function move(){
-    genTarget()
-    if(cssIndex!=undefined){
-        css.deleteRule(cssIndex)
-    }
-    cssIndex = css.cssRules.length
-    toMove.style.animation = ""
-    css.insertRule(
-        "@keyframes move"+keyframeId+" {\n" +
-        "    0% {\n" +
-        "        left: "+currentTarget.fromLeft+"%;\n" +
-        "        top: "+currentTarget.fromTop+"%;\n" +
-        "    }\n" +
-        "    100% {\n" +
-        "        left: "+currentTarget.toLeft+"%;\n" +
-        "        top: "+currentTarget.toTop+"%;\n" +
-        "    }\n" +
-        "}"
-        ,cssIndex)
-
-    toMove.style.animation = "move"+keyframeId+" "+currentTarget.time+"s linear"
-    keyframeId++;
-}
-
-function moveLoop(){
-    move()
-    setTimeout(moveLoop, currentTarget.time*1000)
-}
-moveLoop()
-
-
-/**
- * this code uses the Box–Muller transform to give you a normal distribution between 0 and 1 inclusive.
- * https://stackoverflow.com/questions/25582882/javascript-math-random-normal-distribution-gaussian-bell-curve
- */
-function randn_bm() {
-    let u = 0, v = 0;
-    while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
-    while(v === 0) v = Math.random();
-    let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
-    num = num / 10.0 + 0.5; // Translate to 0 -> 1
-    if (num > 1 || num < 0) return randn_bm() // resample between 0 and 1
-    return num
-}
\ No newline at end of file
diff --git a/rickroll/Prototype.odp b/rickroll/Prototype.odp
new file mode 100644
index 0000000..887a71e
Binary files /dev/null and b/rickroll/Prototype.odp differ
diff --git a/rickroll/bg.svg b/rickroll/bg.svg
new file mode 100644
index 0000000..6fd659b
--- /dev/null
+++ b/rickroll/bg.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="363.000000pt"
+   height="360.000000pt"
+   viewBox="0 0 363.000000 360.000000"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg76"
+   sodipodi:docname="bg.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <defs
+     id="defs80" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1021"
+     id="namedview78"
+     showgrid="false"
+     inkscape:zoom="1.2948893"
+     inkscape:cx="178.38048"
+     inkscape:cy="252.69201"
+     inkscape:window-x="0"
+     inkscape:window-y="34"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg76" />
+  <metadata
+     id="metadata70">
+Created by potrace 1.16, written by Peter Selinger 2001-2019
+<rdf:RDF>
+  <cc:Work
+     rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+  </cc:Work>
+</rdf:RDF>
+</metadata>
+  <path
+     d="M 0,360 H 181.5 363 V 180 l -2,-7 h -2.3 c -2.1,0 -10.1,2.8 -18.2,6.5 -1.6,0.7 -5.2,2 -7.9,2.9 -2.7,0.9 -6.1,2.5 -7.5,3.5 -1.4,1 -7.5,4.2 -13.6,7.1 -6,3 -11.1,5.7 -11.3,6.2 -0.2,0.4 -1.1,0.8 -2,0.8 -0.9,0 -3.3,1 -5.2,2.2 -7.1,4.5 -9.6,5.9 -14,7.9 -2.4,1.1 -4.7,2.4 -5,2.9 -0.5,0.7 -2.5,2.1 -9.9,6.5 -8.3,4.9 -21.7,14 -22.3,15 -0.4,0.7 -2.1,1.8 -3.8,2.5 -1.6,0.7 -3,1.6 -3,2.1 0,0.5 -0.6,0.9 -1.4,0.9 -0.7,0 -3.4,1.8 -5.9,4 -2.5,2.2 -4.8,4 -5.1,4 -0.4,0 -23,16 -27.1,19.2 -5.1,4 -16.7,12.4 -29,21 -3.3,2.3 -6.2,4.4 -6.5,4.8 -0.3,0.4 -3.2,2.5 -6.5,4.6 -7.8,5.2 -24.7,16.7 -26,17.7 -3,2.2 -8.7,5.7 -9.5,5.7 -0.5,0 -2.1,1 -3.7,2.3 C 110.9,326.1 85,339 76,342.4 45.8,353.8 23.5,351.8 6.2,336.2 L 1,331.4 v -8.1 -8.2 l 8.3,3.9 c 12.3,5.7 21.4,7.4 36.6,6.7 10.4,-0.5 14.3,-1.1 22.1,-3.7 10.9,-3.5 28.4,-11.9 32.6,-15.5 1.6,-1.4 3.2,-2.5 3.6,-2.5 2.1,0 24,-17.5 30.3,-24 3.8,-4 3.4,-3.9 -6.5,2.8 -14.5,9.7 -30.6,17.5 -45.2,21.8 -11.4,3.4 -13.3,3.7 -25.8,3.8 -11.3,0 -14.9,-0.3 -22,-2.3 C 25.9,303.6 12.4,297 5.4,291.7 l -4.3,-3.2 z"
+     id="path72"
+     sodipodi:nodetypes="cccccscssccsccccccssssccsccsccccccccccscccccccc"
+     style="fill:#ff0000;stroke:none;stroke-width:0.1" />
+</svg>
diff --git a/rickroll/bg.webp b/rickroll/bg.webp
new file mode 100644
index 0000000..d3bd193
Binary files /dev/null and b/rickroll/bg.webp differ
diff --git a/rickroll/index.css b/rickroll/index.css
new file mode 100644
index 0000000..9ef04e7
--- /dev/null
+++ b/rickroll/index.css
@@ -0,0 +1,116 @@
+
+
+html {
+    display: table;
+    margin: auto;
+}
+
+
+body{
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-image: url("indiHome-noBackground.png");
+    background-size: cover;
+    background-position: center bottom;
+}
+
+
+
+
+h1{
+    font-size: 2.0em;
+    margin-block-end: 0.05em;
+    margin-block-start: 0.05em;
+    font-weight: bold;
+}
+.highlight{
+    font-size: 2em;
+    font-weight: bold;
+}
+
+h2{
+    font-size: 1em;
+    margin-block-end: 0.1em;
+    margin-block-start: 0.1em;
+}
+
+
+
+
+.indihome-content{
+    position: absolute;
+    left: 5%;
+    top: 25%;
+}
+
+
+
+
+
+
+.indihome-line{
+    height: 4em;
+}
+
+.indihome-left{
+    float: left;
+    width: 45%;
+    text-align: right;
+}
+
+.node-left{
+    padding-right: 0.5em;
+}
+
+
+.node-head{
+    font-size: 0.8em;
+}
+.node-highlight{
+    font-size: 1.2em;
+    color: red;
+    font-weight: bold;
+}
+.node-geo{
+    font-size: 1.0em;
+    font-weight: bold;
+}
+
+
+.indihome-right{
+    float: right;
+    width: 55%;
+    height: 4em;
+    display: flex;
+    align-items: center;
+}
+.node-right{
+    padding-left: 0.5em;
+}
+.node-url{
+    text-align: left;
+    font-size: 1.4em;
+    font-weight: bold;
+}
+
+
+
+
+
+.header{
+    margin: auto;
+    left: 0;
+    right: 0;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    text-align: left;
+    width:auto;
+    display:inline-block;
+}
+
+.red{
+    color: red;
+    text-shadow: 0.05em 0.05em #0008;
+}
+
+
diff --git a/rickroll/index.html b/rickroll/index.html
new file mode 100644
index 0000000..cadb91f
--- /dev/null
+++ b/rickroll/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Yuuta Network Services</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+<div style="text-align: center;">
+    <div class="header">
+        <h1>Yuuta</h1>
+        <h1 style="font-size: 2.2em" class="red">Network Services</h1>
+        <h2><b>AS4242422980 <span style="color: gray; ">at</span> DN42</b></h2>
+        <h2>Global <span style="color: gray">Network</span> Infrastructure</h2>
+    </div>
+</div>
+
+
+<div class="indihome-content" id="indihome-content">
+    <div class="indihome-line">
+        <div class="indihome-left">
+            <div class="node-head node-left"><b>Yuuta</b></div>
+            <div class="node-highlight node-left red">Network Services</div>
+            <div class="node-geo node-left">Tokyo, Japan</div>
+        </div>
+        <div class="indihome-right">
+            <div class="node-url node-right red">tyo1.jp.dn42.yuuta.moe</div>
+        </div>
+    </div>
+    <div class="indihome-line">
+        <div class="indihome-left">
+            <div class="node-head node-left"><b>Yuuta</b></div>
+            <div class="node-highlight node-left red">Network Services</div>
+            <div class="node-geo node-left">San Jose, United States</div>
+        </div>
+        <div class="indihome-right">
+            <div class="node-url node-right red">sjc1.us.dn42.yuuta.moe</div>
+        </div>
+    </div>
+    <div class="indihome-line">
+        <div class="indihome-left">
+            <div class="node-head node-left"><b>Yuuta</b></div>
+            <div class="node-highlight node-left red">Network Services</div>
+            <div class="node-geo node-left">Toronto, Canada</div>
+        </div>
+        <div class="indihome-right">
+            <div class="node-url node-right red">yyz1.ca.dn42.yuuta.moe</div>
+        </div>
+    </div>
+    <div class="indihome-line">
+        <div class="indihome-left">
+            <div class="node-head node-left"><b>Yuuta</b></div>
+            <div class="node-highlight node-left red">Network Services</div>
+            <div class="node-geo node-left">Frankfurt, Germany</div>
+        </div>
+        <div class="indihome-right">
+            <div class="node-url node-right red">fra1.de.dn42.yuuta.moe</div>
+        </div>
+    </div>
+</div>
+
+<script src="main.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/rickroll/indiHome-noBackground.png b/rickroll/indiHome-noBackground.png
new file mode 100644
index 0000000..e48046a
Binary files /dev/null and b/rickroll/indiHome-noBackground.png differ
diff --git a/rickroll/main.js b/rickroll/main.js
new file mode 100644
index 0000000..8f867fb
--- /dev/null
+++ b/rickroll/main.js
@@ -0,0 +1,66 @@
+const css = window.document.styleSheets[0]
+
+
+let currentTarget={
+    fromLeft: 5,
+    toLeft: 5, // left: 5%;
+    fromTop:25,
+    toTop: 25, // top: 25%;
+    time: 0,
+}
+
+function genTarget(){
+    currentTarget.fromLeft = currentTarget.toLeft;
+    currentTarget.fromTop = currentTarget.toTop;
+    currentTarget.toLeft = 5 + (randn_bm() - 0.5)*10
+    currentTarget.toTop = 25 + (randn_bm()-0.5)*10
+    currentTarget.time = randn_bm() * 0.4 +0.05
+}
+cssIndex = undefined;
+
+const toMove = document.getElementById("indihome-content");
+let keyframeId = 0;
+function move(){
+    genTarget()
+    if(cssIndex!=undefined){
+        css.deleteRule(cssIndex)
+    }
+    cssIndex = css.cssRules.length
+    toMove.style.animation = ""
+    css.insertRule(
+        "@keyframes move"+keyframeId+" {\n" +
+        "    0% {\n" +
+        "        left: "+currentTarget.fromLeft+"%;\n" +
+        "        top: "+currentTarget.fromTop+"%;\n" +
+        "    }\n" +
+        "    100% {\n" +
+        "        left: "+currentTarget.toLeft+"%;\n" +
+        "        top: "+currentTarget.toTop+"%;\n" +
+        "    }\n" +
+        "}"
+        ,cssIndex)
+
+    toMove.style.animation = "move"+keyframeId+" "+currentTarget.time+"s linear"
+    keyframeId++;
+}
+
+function moveLoop(){
+    move()
+    setTimeout(moveLoop, currentTarget.time*1000)
+}
+moveLoop()
+
+
+/**
+ * this code uses the Box–Muller transform to give you a normal distribution between 0 and 1 inclusive.
+ * https://stackoverflow.com/questions/25582882/javascript-math-random-normal-distribution-gaussian-bell-curve
+ */
+function randn_bm() {
+    let u = 0, v = 0;
+    while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
+    while(v === 0) v = Math.random();
+    let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
+    num = num / 10.0 + 0.5; // Translate to 0 -> 1
+    if (num > 1 || num < 0) return randn_bm() // resample between 0 and 1
+    return num
+}
\ No newline at end of file
diff --git a/topology.png b/topology.png
new file mode 100644
index 0000000..a1375b7
Binary files /dev/null and b/topology.png differ
-- 
cgit v1.2.3