Initial commit
This commit is contained in:
parent
dc05464e9e
commit
30e47c4ff0
3 changed files with 155 additions and 0 deletions
23
index.html
Normal file
23
index.html
Normal file
|
|
@ -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>
|
||||||
49
script.js
Normal file
49
script.js
Normal file
|
|
@ -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);
|
||||||
83
style.css
Normal file
83
style.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue