website/random/welcome/index.html
2024-04-22 03:13:17 -05:00

161 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>G2's Website | welcome.sh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="G2">
<meta name="description" content="A nice welcome script for Bash and Zsh ">
<meta name="theme-color" content="#2ec2c2">
<meta property="og:title" content="G2's Website | welcome.sh">
<meta property="og:description" content="A nice welcome script for Bash and Zsh ">
<meta property="og:image" content="/assets/shell3.png">
<meta name="twitter:title" content="G2's Website | welcome.sh">
<link rel="icon" href="https://g2games.dev/icon.webp">
<link rel="stylesheet" href="/assets/main-style.css">
<style>
figure {
position: relative;
margin: auto;
font-family: 'Hack Nerd Font', monospace;
font-size: 14pt;
border: solid 2px;
padding: 20px 10px;
margin: 0px;
border-radius: 8px;
background-color: #212324;
box-shadow: 0 5px 15px 4px #666;
resize: both;
overflow: auto;
}
@font-face {
font-family: "Hack Nerd Font";
src: url(HackNerdFont-Regular.ttf);
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
<script>
function startTime() {
const today = new Date();
let hour = today.getHours();
let minute = today.getMinutes();
let ampm = hour >= 12 ? 'PM' : 'AM';
hour = hour % 12;
hour = hour ? hour : 12;
if (minute < 10) {minute = "0" + minute};
document.getElementById('hour').innerHTML = hour;
document.getElementById('minute').innerHTML = minute;
document.getElementById('ampm').innerHTML = ampm;
setTimeout(startTime, 1000);
}
function greeting() {
const today = new Date();
let hour = today.getHours();
console.log(hour);
let time = document.getElementById('fuzzytime');
let clock = document.getElementById('clock');
if (hour <= 11 && hour > 6) {
time.innerHTML = "morning";
time.style.color = "rgb(255, 164, 74)";
} else if (hour == 12) {
time.innerHTML = "noon";
time.style.color = "rgb(250, 245, 110)";
clock.style.color = "rgb(200, 107, 209)";
} else if (hour < 16 && hour > 12) {
time.innerHTML = "afternoon";
time.style.color = "rgb(250, 245, 110)";
clock.style.color = "rgb(200, 107, 209)";
} else if (hour < 19 && hour > 17) {
time.innerHTML = "evening";
time.style.color = "rgb(171, 54, 3)";
clock.style.color = "rgb(200, 107, 209)";
} else {
time.innerHTML = "night";
time.style.color = "rgb(200, 107, 209)";
clock.style.color = "rgb(200, 107, 209)";
}
}
function randColor() {
var cluma = 0;
while (cluma <= 100) {
var cr = Math.floor(Math.random() * (255));
var crl = cr * 0.299;
var cg = Math.floor(Math.random() * (255));
var cgl = cr * 0.587;
var cb = Math.floor(Math.random() * (255));
var cbl = cr * 0.114;
var cluma = crl + cgl + cbl;
}
return "rgb(" + cr + ", " + cg + ", " + cb + ")"
}
function setColors() {
document.getElementById('user').style.color = randColor();
}
function battery() {
let battery_level = 0;
let batspan = document.getElementById('batlev');
navigator.getBattery()
.then(function(battery) {
console.log(battery.level);
battery_level = battery.level;
batspan.innerHTML = "The battery level is " + Math.floor(battery_level * 100) + "%";
});
}
function updates() {
var updates = Math.floor(Math.random() * (50));
document.getElementById('updates').innerHTML = "~<span style='color:#11d016;'>" + updates + "</span>"
}
</script>
</head>
<body onload="startTime(); setColors(); greeting(); updates(); battery()">
<header>
<a href="https://github.com/G2-Games/welcome.sh"><h1>welcome.sh</h1></a>
<ul class="navigation">
<a href="/"><li>Home</li></a>
<a href="/random"><li>Random</li></a>
<a href="/portfolio"><li>Portfolio</li></a>
<a href="/blog"><li>Blog</li></a>
</ul>
</header>
<main style="height:100%;">
<section class="centered">
<figure>
Welcome, <span id="user" style="color:#dd23c5;font-weight:700;"><span spellcheck="false" role="textbox" contenteditable/>g2</span></span>. It's <span id="fuzzytime" style="color:#faf56e;">afternoon</span>. The time is <span id="clock" style="font-weight:700;color:rgb(200, 107, 209);"><clock id="hour">3</clock><span style="animation: blinker 1s step-end infinite;">:</span><clock id="minute">47</clock> <clock id="ampm">PM</clock></span>. You have <span id="updates">no</span> pending updates. <span id="batlev"></span>
<br>
<span style="background-color:#0087d7;">&nbsp;g2 </span><span style="color:#0087d7;background-color:#585858;"></span><span style="background-color:#585858;"> ~ </span><span style="color:#585858;"></span> <a href="https://github.com/G2-Games/welcome.sh">get welcome.sh</a>
<br>
bash: get: command not found
<br>
<span style="background-color:#0087d7;">&nbsp;g2 </span><span style="color:#0087d7;background-color:#585858;"></span><span style="background-color:#585858;"> ~ </span><span style="color:#585858;"></span> <span style="animation: blinker 1.2s infinite;animation-timing-function:ease-out;"></span>
</figure>
</section>
</main>
<br>
<footer>
<p>&copy;2023 G2</p>
<p>Powered by <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg"></a> and <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg"></a></p>
</footer>
</body>
</html>