Initial commit

2024-01-06 20:47:35 +00:00 · 2024-01-06 20:47:35 +00:00 · 30e47c4ff0
parent dc05464e9e
commit 30e47c4ff0
3 changed files with 155 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ramses Coffee - Now with NaN more coffee flavor!</title>
+  <link rel="shortcut icon" type="image/png" href="neocat_floof_mug_2048.png">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <script src="script.js"></script>
+  <div class="container">
+    <a href="https://corteximplant.com/@revengeday">
+    <img class="neocat" src="neocat_floof_mug_2048.png">
+  </a>
+  </div>
+  <footer>
+    Images was created by <a href="https://volpeon.ink/emojis/neocat/">Volpeon</a> and is licensed under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> license. 
+  </footer>
+</body>
+
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,49 @@
+    document.addEventListener(
+      "DOMContentLoaded",
+      function() {
+        const randomNeocat = document
+          .querySelector(".neocat");
+        const images = [
+          "neocat_floof_happy_2048.png",
+          "neocat_floof_owo_2048.png"
+        ];
+
+        randomNeocat.addEventListener(
+          "mouseover",
+          function() {
+            const randomIndex = Math
+              .floor(Math.random() *
+                images.length);
+            const randomImage =
+              images[randomIndex];
+
+            randomNeocat.src =
+              randomImage;
+          });
+
+        randomNeocat.addEventListener(
+          "mouseout",
+          function() {
+            randomNeocat.src =
+              "neocat_floof_mug_2048.png";
+          });
+      });
+
+    var icons = [
+      "neocat_floof_happy_2048.png",
+      "neocat_floof_owo_2048.png"
+    ];
+    var currentIndex = 0;
+
+    function changeFavicon() {
+      var favicon = document
+        .querySelector(
+          "link[rel*='icon']");
+      favicon.href = icons[
+        currentIndex];
+
+      currentIndex = (currentIndex +
+        1) % icons.length;
+    }
+
+    setInterval(changeFavicon, 2000);
--- a/style.css
+++ b/style.css
@ -0,0 +1,83 @@
+:root {
+    --gradient-start: #FCAE4E;
+    --gradient-end: #FFC95C;
+    --neocat-scale: 0.2;
+    --footer-height: 100px;
+    --color-text-default: #000000;
+    --color-footer: #3d3d3d;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: monospace, sans-serif;
+    background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
+    background-size: 200% 200%;
+    animation: gradientAnimation 5s ease-in-out infinite;
+    color: var(--color-text-default);
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: linear-gradient(to bottom, var(--gradient-end), var(--gradient-start));
+        color: #FFFFFF;
+    }
+}
+
+@keyframes gradientAnimation {
+    0%, 100% {
+        background-position: 0% 0%;
+    }
+    50% {
+        background-position: 100% 100%;
+    }
+}
+
+.container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.neocat {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(var(--neocat-scale));
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translate(-50%, -50%) scale(var(--neocat-scale)) rotate(0deg);
+    }
+    50% {
+        transform: translate(-50%, calc(-50% - 5%)) scale(var(--neocat-scale)) rotate(-5deg);
+    }
+}
+
+a {
+    color: var(--color-text-default);
+    text-decoration: none; 
+    transition: color 0.3s; 
+}
+
+a:hover,
+a:focus {
+    color: #FFC95C; 
+}
+
+footer {
+    color: var(--color-footer);
+    position: absolute;
+    left: 0;
+    text-align: center;
+    bottom: 0;
+    height: var(--footer-height);
+    width: 100%;
+    overflow: hidden;
+}