diff --git a/static/css/web3.css b/static/css/web3.css
index 90491f9..e4941ee 100644
--- a/static/css/web3.css
+++ b/static/css/web3.css
@@ -1,37 +1,39 @@
-div.scroll-banner {
- background-color: black;
- position: absolute;
- top: 0.2em;
- left: 0.1%;
- width: 99.8%;
- overflow: hidden;
+html {
+ background-image: url("../pics/bg-web3.gif");
+ background-repeat: revert;
+ color: white;
}
-div.scroll-text {
+div#scroll-banner {
+ overflow: hidden;
+ border: 3px double white;
+}
+
+div#scroll-text {
text-align: right;
white-space: nowrap;
- animation: marquee 13s linear infinite;
+ animation: marquee 8s linear infinite;
}
-div.scroll-banner > div.scroll-text > * {
- color: #ff6161;
- font-size: 150%;
+div#scroll-banner > div#scroll-text > * {
+ font-size: 200%;
+ margin: 0;
}
@keyframes marquee {
from {
- transform: translateX(55%);
+ transform: translateX(100%);
}
to {
- transform: translateX(-100%);
+ transform: translateX(-140%);
}
}
@media only screen and (max-width: 850px) {
/* Mobile display */
- div.info-text {
+ div#scroll-text {
animation: marquee 9s linear infinite;
}
@@ -45,3 +47,24 @@ div.scroll-banner > div.scroll-text > * {
}
}
}
+
+h1 {
+ font-size: 250%;
+}
+
+p,
+a {
+ font-size: 125%;
+}
+
+a {
+ color: rgb(147, 107, 255);
+}
+
+img {
+ vertical-align: middle;
+}
+
+footer {
+ text-align: center;
+}
diff --git a/static/cursors/0.png b/static/cursors/0.png
new file mode 100644
index 0000000..b46ce8c
--- /dev/null
+++ b/static/cursors/0.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:98e87b49dd167096b4da164c389026a76be91f3340ba99881b16f6abf95b64dc
+size 204
diff --git a/static/cursors/1.png b/static/cursors/1.png
new file mode 100644
index 0000000..47ea8b8
--- /dev/null
+++ b/static/cursors/1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0e7b054ed4fc86f5194aa591882f52048dd60193216537ddd555725e8769f8c8
+size 224
diff --git a/static/js/web3.js b/static/js/web3.js
index 9de9c0c..3827a90 100644
--- a/static/js/web3.js
+++ b/static/js/web3.js
@@ -1,7 +1,7 @@
window.addEventListener("load", () => main());
const main = () => {
- // Handle change of focus
+ /* Handle change of focus */
const title = document.title;
const blurMessage = "Hey.. come back!";
@@ -12,4 +12,223 @@ const main = () => {
window.addEventListener("focus", function () {
document.title = title;
});
+
+ /* Mouse cursor */
+ const nb_available_cursors = 2;
+ const id = Math.floor(Math.random() * nb_available_cursors);
+ document.body.style = `cursor: url('/cursors/${id}.png'), default;`;
+ new cursoreffects.fairyDustCursor();
+ oneko();
+
+ /* Nb of visitors */
+ document.getElementById("visitors-number").innerHTML =
+ Math.floor(Math.random() * 3578) + 1312;
+
+ /* Scroll text */
+ document.getElementById("scroll-text").firstElementChild.innerHTML =
+ "WELCOME HERE IN MY WEBSPACE! ".repeat(3);
+};
+
+/** https://github.com/adryd325/oneko.js */
+const oneko = () => {
+ const nekoEl = document.createElement("div");
+ let nekoPosX = 32;
+ let nekoPosY = 32;
+ let mousePosX = 0;
+ let mousePosY = 0;
+ let frameCount = 0;
+ let idleTime = 0;
+ let idleAnimation = null;
+ let idleAnimationFrame = 0;
+ const nekoSpeed = 10;
+ const spriteSets = {
+ idle: [[-3, -3]],
+ alert: [[-7, -3]],
+ scratchSelf: [
+ [-5, 0],
+ [-6, 0],
+ [-7, 0],
+ ],
+ scratchWallN: [
+ [0, 0],
+ [0, -1],
+ ],
+ scratchWallS: [
+ [-7, -1],
+ [-6, -2],
+ ],
+ scratchWallE: [
+ [-2, -2],
+ [-2, -3],
+ ],
+ scratchWallW: [
+ [-4, 0],
+ [-4, -1],
+ ],
+ tired: [[-3, -2]],
+ sleeping: [
+ [-2, 0],
+ [-2, -1],
+ ],
+ N: [
+ [-1, -2],
+ [-1, -3],
+ ],
+ NE: [
+ [0, -2],
+ [0, -3],
+ ],
+ E: [
+ [-3, 0],
+ [-3, -1],
+ ],
+ SE: [
+ [-5, -1],
+ [-5, -2],
+ ],
+ S: [
+ [-6, -3],
+ [-7, -2],
+ ],
+ SW: [
+ [-5, -3],
+ [-6, -1],
+ ],
+ W: [
+ [-4, -2],
+ [-4, -3],
+ ],
+ NW: [
+ [-1, 0],
+ [-1, -1],
+ ],
+ };
+
+ const create = () => {
+ nekoEl.id = "oneko";
+ nekoEl.style.width = "32px";
+ nekoEl.style.height = "32px";
+ nekoEl.style.position = "fixed";
+ nekoEl.style.pointerEvents = "none";
+ nekoEl.style.backgroundImage = "url('./pics/oneko.gif')";
+ nekoEl.style.imageRendering = "pixelated";
+ nekoEl.style.left = `${nekoPosX - 16}px`;
+ nekoEl.style.top = `${nekoPosY - 16}px`;
+ nekoEl.style.zIndex = "999";
+
+ document.body.appendChild(nekoEl);
+
+ document.onmousemove = (event) => {
+ mousePosX = event.clientX;
+ mousePosY = event.clientY;
+ };
+
+ window.onekoInterval = setInterval(frame, 100);
+ };
+
+ const setSprite = (name, frame) => {
+ const sprite = spriteSets[name][frame % spriteSets[name].length];
+ nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
+ };
+
+ const resetIdleAnimation = () => {
+ idleAnimation = null;
+ idleAnimationFrame = 0;
+ };
+
+ const idle = () => {
+ idleTime++;
+
+ // every ~ 20 seconds
+ if (
+ idleTime > 10 &&
+ Math.floor(Math.random() * 200) == 0 &&
+ idleAnimation == null
+ ) {
+ let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
+ if (nekoPosX < 32) {
+ avalibleIdleAnimations.push("scratchWallW");
+ }
+ if (nekoPosY < 32) {
+ avalibleIdleAnimations.push("scratchWallN");
+ }
+ if (nekoPosX > window.innerWidth - 32) {
+ avalibleIdleAnimations.push("scratchWallE");
+ }
+ if (nekoPosY > window.innerHeight - 32) {
+ avalibleIdleAnimations.push("scratchWallS");
+ }
+ idleAnimation =
+ avalibleIdleAnimations[
+ Math.floor(Math.random() * avalibleIdleAnimations.length)
+ ];
+ }
+
+ switch (idleAnimation) {
+ case "sleeping":
+ if (idleAnimationFrame < 8) {
+ setSprite("tired", 0);
+ break;
+ }
+ setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
+ if (idleAnimationFrame > 192) {
+ resetIdleAnimation();
+ }
+ break;
+ case "scratchWallN":
+ case "scratchWallS":
+ case "scratchWallE":
+ case "scratchWallW":
+ case "scratchSelf":
+ setSprite(idleAnimation, idleAnimationFrame);
+ if (idleAnimationFrame > 9) {
+ resetIdleAnimation();
+ }
+ break;
+ default:
+ setSprite("idle", 0);
+ return;
+ }
+ idleAnimationFrame++;
+ };
+
+ const frame = () => {
+ frameCount++;
+ const diffX = nekoPosX - mousePosX;
+ const diffY = nekoPosY - mousePosY;
+ const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
+
+ if (distance < nekoSpeed || distance < 48) {
+ idle();
+ return;
+ }
+
+ idleAnimation = null;
+ idleAnimationFrame = 0;
+
+ if (idleTime > 1) {
+ setSprite("alert", 0);
+ // count down after being alerted before moving
+ idleTime = Math.min(idleTime, 7);
+ idleTime -= 1;
+ return;
+ }
+
+ direction = diffY / distance > 0.5 ? "N" : "";
+ direction += diffY / distance < -0.5 ? "S" : "";
+ direction += diffX / distance > 0.5 ? "W" : "";
+ direction += diffX / distance < -0.5 ? "E" : "";
+ setSprite(direction, frameCount);
+
+ nekoPosX -= (diffX / distance) * nekoSpeed;
+ nekoPosY -= (diffY / distance) * nekoSpeed;
+
+ nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
+ nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
+
+ nekoEl.style.left = `${nekoPosX - 16}px`;
+ nekoEl.style.top = `${nekoPosY - 16}px`;
+ };
+
+ create();
};
diff --git a/static/pics/bg-web3.gif b/static/pics/bg-web3.gif
new file mode 100644
index 0000000..45192a9
--- /dev/null
+++ b/static/pics/bg-web3.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:90af1a375171c0bc8bc7bdaadf28dfb1fd12d384c936f9b817fa8777f4de5888
+size 311045
diff --git a/static/pics/oneko.gif b/static/pics/oneko.gif
new file mode 100644
index 0000000..4a73a7a
--- /dev/null
+++ b/static/pics/oneko.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f4c5688eb8ee6f22b08ab8df361222307dc6fe2d5bdcfa12582cea694707e66d
+size 3316
diff --git a/templates/web3.html b/templates/web3.html
index 4141006..003cba3 100644
--- a/templates/web3.html
+++ b/templates/web3.html
@@ -46,12 +46,37 @@
{{#data}}
-
+
+ anri's website
+
+
+ idk if you know but i do love
+ 
(RUST)
+
+
+ in fact the whole website backend is 🦀🦀
+
+
+
+welcome to my web3 space feel free to send me nfts as jpeg format
+
+
+
+
{{/data}}
(RUST)
+