First Commit

7 files changed, 304 insertions, 0 deletions

diff --git a/Prototype.odp b/Prototype.odp
new file mode 100644
index 0000000..887a71e
--- /dev/null
+++ b/Prototype.odp
diff --git a/bg.svg b/bg.svg
new file mode 100644
index 0000000..6fd659b
--- /dev/null
+++ b/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/bg.webp b/bg.webp
new file mode 100644
index 0000000..d3bd193
--- /dev/null
+++ b/bg.webp
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..9ef04e7
--- /dev/null
+++ b/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/index.html b/index.html
new file mode 100644
index 0000000..cadb91f
--- /dev/null
+++ b/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/indiHome-noBackground.png b/indiHome-noBackground.png
new file mode 100644
index 0000000..e48046a
--- /dev/null
+++ b/indiHome-noBackground.png
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..8f867fb
--- /dev/null
+++ b/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