This repository has been archived on 2023-07-08. You can view files and clone it, but cannot push or open issues or pull requests.
awesome/index.html

128 lines
3.4 KiB
HTML
Raw Normal View History

2023-07-07 17:12:12 +01:00
<!DOCTYPE html>
<html>
<head>
2023-07-07 21:03:47 +01:00
<title>awesome</title>
2023-07-07 18:23:11 +01:00
<style>
2023-07-07 18:29:08 +01:00
@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600;700&display=swap');
2023-07-07 18:23:11 +01:00
2023-07-07 18:29:08 +01:00
:root {
font-family: 'Belanosima', sans-serif;
}
2023-07-07 18:23:11 +01:00
body {
text-align: center;
color: white;
background: #090524;
2023-07-07 21:23:05 +01:00
overflow-x: hidden;
2023-07-07 18:23:11 +01:00
}
ul {
border: 1px solid lightgray;
border-radius: 10px;
padding: 10px;
width: 400px;
margin: auto;
list-style-type: none;
}
2023-07-07 21:14:06 +01:00
#header {
2023-07-07 18:36:21 +01:00
//text-transform: uppercase;
color: #fff;
}
2023-07-07 22:54:21 +01:00
#awdog {
cursor: pointer;
}
2023-07-07 20:58:14 +01:00
/* unvisited link */
a:link {
2023-07-07 21:03:47 +01:00
color: pink;
2023-07-07 20:58:14 +01:00
}
/* visited link */
a:visited {
2023-07-07 21:03:47 +01:00
color: lightgray;
}
a:visited::after {
content: " (visited)";
2023-07-07 20:58:14 +01:00
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
2023-07-07 21:03:47 +01:00
color: white;
2023-07-07 18:43:05 +01:00
}
2023-07-07 18:23:11 +01:00
</style>
2023-07-07 17:12:12 +01:00
</head>
2023-07-07 18:23:11 +01:00
<body>
2023-07-07 17:12:12 +01:00
2023-07-07 21:14:06 +01:00
<h1 id="header">awesome.colean.cc</h1>
2023-07-07 17:12:12 +01:00
2023-07-07 22:49:01 +01:00
<img id="awdog" src="res/awdog.png" width="160" onclick="pet()"><br>
2023-07-07 18:14:59 +01:00
awdog, the mascot of awesome
<br><br>
2023-07-07 17:59:44 +01:00
2023-07-07 18:23:11 +01:00
<ul>
2023-07-07 18:04:43 +01:00
<li><a href="https://git.colean.cc/awesomeuser/awesome.git">@gitrepo</a></li>
2023-07-07 18:00:52 +01:00
<li><a href="proj/wolfystein.html">@Wolfystein3D</a></li>
2023-07-07 17:59:44 +01:00
</ul>
2023-07-07 21:14:06 +01:00
<script>
var header = document.getElementById("header");
2023-07-07 22:49:01 +01:00
var awdog = document.getElementById("awdog");
2023-07-07 22:52:13 +01:00
var intensity = 0;
2023-07-07 22:49:01 +01:00
function pet() {
2023-07-07 22:52:13 +01:00
intensity = 10;
2023-07-07 22:49:01 +01:00
}
2023-07-07 21:14:06 +01:00
2023-07-07 22:52:13 +01:00
var prevTime = 0;
2023-07-07 21:14:06 +01:00
async function update(timestamp) {
2023-07-07 22:52:13 +01:00
let dt = (timestamp - prevTime) / 1000;
prevTime = timestamp;
2023-07-07 22:49:01 +01:00
// petting shake
let a = Math.random() * Math.PI * 2;
awdog.style.transform = "translate(" + (Math.cos(a) * intensity) + "px, " + (Math.sin(a) * intensity) + "px)";
2023-07-07 22:52:13 +01:00
if (intensity > 0) {
2023-07-07 22:54:21 +01:00
intensity -= 20 * dt;
2023-07-07 22:52:13 +01:00
} else {
intensity = 0;
}
2023-07-07 22:49:01 +01:00
// header
2023-07-07 21:19:57 +01:00
let t = timestamp / 500;
2023-07-07 21:23:05 +01:00
let x = Math.cos(t) * 20;
let y = Math.sin(t) * 20;
2023-07-07 21:26:58 +01:00
header.style.transform = "translate(" + x + "px, " + y + "px)";// rotate(" + (Math.cos(t) * -5) + "deg)";
2023-07-07 21:23:05 +01:00
2023-07-07 21:30:51 +01:00
header.style.textShadow = (Math.cos(t - 0.2) * 20 - x) + "px " + (Math.sin(t - 0.2) * 20 - y) + "px #c91a29,"
2023-07-07 21:31:39 +01:00
+ (Math.cos(t - 0.4) * 20 - x) + "px " + (Math.sin(t - 0.4) * 20 - y) + "px #c94f1a,"
+ (Math.cos(t - 0.6) * 20 - x) + "px " + (Math.sin(t - 0.6) * 20 - y) + "px #a6c91a,"
+ (Math.cos(t - 0.8) * 20 - x) + "px " + (Math.sin(t - 0.8) * 20 - y) + "px #1ac95a,"
+ (Math.cos(t - 1.0) * 20 - x) + "px " + (Math.sin(t - 1.0) * 20 - y) + "px #1a60c9";
2023-07-07 21:14:06 +01:00
// loop
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
2023-07-07 17:12:12 +01:00
</body>
</html>