diff --git a/src/App.js b/src/App.js
index a6d1b39..ed52653 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
import "./css/main.css";
+import "./css/rain.css";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
@@ -15,13 +16,7 @@ function App() {
return (
-
-
-
-
-
-
-
+
root@igna.rocks
@@ -56,7 +51,7 @@ function App() {
-
+
);
}
diff --git a/src/assets/favicon.png b/src/assets/favicon.png
new file mode 100644
index 0000000..bad089a
Binary files /dev/null and b/src/assets/favicon.png differ
diff --git a/src/assets/image.gif b/src/assets/image.gif
new file mode 100644
index 0000000..81ef892
Binary files /dev/null and b/src/assets/image.gif differ
diff --git a/src/css/rain.css b/src/css/rain.css
new file mode 100644
index 0000000..df4249f
--- /dev/null
+++ b/src/css/rain.css
@@ -0,0 +1,178 @@
+html {
+ height: 100%;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+ overflow: hidden;
+ background: linear-gradient(to bottom, #202020, #111119);
+}
+
+.rain {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+}
+
+.rain.back-row {
+ display: none;
+ z-index: 1;
+ bottom: 60px;
+ opacity: 0.5;
+}
+
+body.back-row-toggle .rain.back-row {
+ display: block;
+}
+
+.drop {
+ position: absolute;
+ bottom: 100%;
+ width: 15px;
+ height: 120px;
+ pointer-events: none;
+ animation: drop 0.5s linear infinite;
+}
+
+@keyframes drop {
+ 0% {
+ transform: translateY(0vh);
+ }
+
+ 75% {
+ transform: translateY(90vh);
+ }
+
+ 100% {
+ transform: translateY(90vh);
+ }
+}
+
+.stem {
+ width: 1px;
+ height: 60%;
+ margin-left: 7px;
+ background: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 0),
+ rgba(255, 255, 255, 0.25)
+ );
+ animation: stem 0.5s linear infinite;
+}
+
+@keyframes stem {
+ 0% {
+ opacity: 1;
+ }
+
+ 65% {
+ opacity: 1;
+ }
+
+ 75% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+.splat {
+ width: 15px;
+ height: 10px;
+ border-top: 2px dotted rgba(255, 255, 255, 0.5);
+ border-radius: 50%;
+ opacity: 1;
+ transform: scale(0);
+ animation: splat 0.5s linear infinite;
+ display: none;
+}
+
+body.splat-toggle .splat {
+ display: block;
+}
+
+@keyframes splat {
+ 0% {
+ opacity: 1;
+ transform: scale(0);
+ }
+
+ 80% {
+ opacity: 1;
+ transform: scale(0);
+ }
+
+ 90% {
+ opacity: 0.5;
+ transform: scale(1);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: scale(1.5);
+ }
+}
+
+.toggles {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 3;
+}
+
+.toggle {
+ position: absolute;
+ left: 20px;
+ width: 50px;
+ height: 50px;
+ line-height: 51px;
+ box-sizing: border-box;
+ text-align: center;
+ font-family: sans-serif;
+ font-size: 10px;
+ font-weight: bold;
+ background-color: rgba(255, 255, 255, 0.2);
+ color: rgba(0, 0, 0, 0.5);
+ border-radius: 50%;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.toggle:hover {
+ background-color: rgba(255, 255, 255, 0.25);
+}
+
+.toggle:active {
+ background-color: rgba(255, 255, 255, 0.3);
+}
+
+.toggle.active {
+ background-color: rgba(255, 255, 255, 0.4);
+}
+
+.splat-toggle {
+ top: 20px;
+}
+
+.back-row-toggle {
+ top: 90px;
+ line-height: 12px;
+ padding-top: 14px;
+}
+
+.single-toggle {
+ top: 160px;
+}
+
+body.single-toggle .drop {
+ display: none;
+}
+
+body.single-toggle .drop:nth-child(10) {
+ display: block;
+}