web boot page
etherware-novice
BIN
personal/webboot/font/Connection-3zA2z.ttf
Normal file
BIN
personal/webboot/font/LcdSolid-VPzB.ttf
Normal file
BIN
personal/webboot/images/ditto.jpg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
personal/webboot/images/ditto.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
personal/webboot/images/goomy.png
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
BIN
personal/webboot/images/icons.aseprite
Normal file
BIN
personal/webboot/images/icons1.png
Normal file
|
After Width: | Height: | Size: 564 B |
BIN
personal/webboot/images/icons2.png
Normal file
|
After Width: | Height: | Size: 379 B |
BIN
personal/webboot/images/icons3.png
Normal file
|
After Width: | Height: | Size: 588 B |
BIN
personal/webboot/images/icons4.png
Normal file
|
After Width: | Height: | Size: 604 B |
BIN
personal/webboot/images/icons5.png
Normal file
|
After Width: | Height: | Size: 494 B |
BIN
personal/webboot/images/icons6.png
Normal file
|
After Width: | Height: | Size: 624 B |
BIN
personal/webboot/images/poketch.png
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
104
personal/webboot/index.css
Normal file
@ -0,0 +1,104 @@
|
||||
@font-face {
|
||||
font-family: LCDNUM;
|
||||
src: url("font/Connection-3zA2z.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: LCD;
|
||||
src: url("font/LcdSolid-VPzB.ttf");
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
background: url("images/ditto.png");
|
||||
image-rendering: pixelated;
|
||||
font-family: LCD;
|
||||
overflow: clip;
|
||||
}
|
||||
#swatchClock { font-family: LCDNUM; }
|
||||
|
||||
#main {
|
||||
position: fixed;
|
||||
width: 90vw;
|
||||
top: 20vh; left: 5vw;
|
||||
|
||||
max-height: 80vh;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#links {
|
||||
position: absolute;
|
||||
top: 15%; left: 6%;
|
||||
width: 75%; height: 65%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px; padding: 10px;
|
||||
}
|
||||
#links>* {
|
||||
background-color: #70b070;
|
||||
border: 5px #385030 solid;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-image-slice: 34% 34% 34% 34%;
|
||||
border-image-width: 20px;
|
||||
border-image-repeat: stretch;
|
||||
border-style: solid;
|
||||
border-image-source: url("https://neoskitties.org/graphics/borders/tile003.png");
|
||||
|
||||
margin: 10vh auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
|
||||
#poketch {
|
||||
margin: auto;
|
||||
position: fixed;
|
||||
height: 60vh; width: 40vw;
|
||||
bottom: -5vw;
|
||||
left: 32vw;
|
||||
|
||||
overflow: scroll;
|
||||
}
|
||||
#poketch>img { width: 100%; }
|
||||
#poketch a { color: inherit; text-decoration: none; }
|
||||
|
||||
#swatchClock {
|
||||
position: absolute;
|
||||
top: 40%; width: 83%;
|
||||
text-align: center;
|
||||
font-size: 6rem;
|
||||
margin: auto;
|
||||
color: #385030;
|
||||
}
|
||||
|
||||
#goomy {
|
||||
position: fixed;
|
||||
left: 0; bottom: 0;
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
#litclock {
|
||||
position: fixed;
|
||||
width: 90vw; margin: auto;
|
||||
left: 5vw;
|
||||
|
||||
background-color: white;
|
||||
padding: 25px;
|
||||
padding-top: 40px; top: -45px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#litclock-pre {
|
||||
margin-top: 5;
|
||||
}
|
||||
|
||||
#litclock-time {
|
||||
font-family: LCDNUM;
|
||||
font-size: 3rem;
|
||||
}
|
||||
99
personal/webboot/index.html
Normal file
@ -0,0 +1,99 @@
|
||||
---
|
||||
layout: null
|
||||
---
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>welcome to the internet</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="/assets/js/swatch.js"></script>
|
||||
|
||||
<div id="litclock" class="border">
|
||||
<p>literature clock:</p>
|
||||
<span id="litclock-pre"></span>
|
||||
<span id="litclock-time"></span>
|
||||
<span id="litclock-post"></span>
|
||||
</div>
|
||||
|
||||
<div id="main" class="border">
|
||||
<p>welcome to the pokenav</p>
|
||||
<p>this goomy will stare at you</p>
|
||||
</div>
|
||||
|
||||
<map name="map">
|
||||
<area coords="550,70,650,220" shape="rect" onclick="dispTime()"></area>
|
||||
<area coords="550,231,650,380" shape="rect" onclick="dispLink()"></area>
|
||||
</map>
|
||||
|
||||
<div id="poketch" class="border">
|
||||
<img src="images/poketch.png" usemap="#map">
|
||||
<p id="swatchClock"></p>
|
||||
<div id="links">
|
||||
<a href="https://bsky.app">
|
||||
<img src="images/icons1.png">
|
||||
<p>bluesky</p>
|
||||
</a>
|
||||
<a href="https://tumblr.com">
|
||||
<img src="images/icons2.png">
|
||||
<p>tumblr</p>
|
||||
</a>
|
||||
<a href="https://forum.melonland.net/index.php">
|
||||
<img src="images/icons3.png">
|
||||
<p>melonforum</p>
|
||||
</a>
|
||||
<a href="https://neocities.org">
|
||||
<img src="images/icons4.png">
|
||||
<p>neocities</p>
|
||||
</a>
|
||||
<a href="https://minesweeper.online">
|
||||
<img src="images/icons5.png">
|
||||
<p>mines</p>
|
||||
</a>
|
||||
<a href="/personal/pokeblog">
|
||||
<img src="images/icons6.png">
|
||||
<p>my pokeblog</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img src="images/goomy.png" id="goomy">
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function dispTime() {
|
||||
document.getElementById("swatchClock").style.display = "block";
|
||||
document.getElementById("links").style.display = "none";
|
||||
}
|
||||
function dispLink() {
|
||||
document.getElementById("swatchClock").style.display = "none";
|
||||
document.getElementById("links").style.display = "flex";
|
||||
}
|
||||
|
||||
function npad(num) {
|
||||
if (num < 10) { num = "0" + num; }
|
||||
return num;
|
||||
}
|
||||
|
||||
async function updateFancyTime() {
|
||||
|
||||
let cdate = new Date();
|
||||
let res = await fetch(`https://raw.githubusercontent.com/lbngoc/literature-clock/master/docs/times/${npad(cdate.getHours())}:${npad(cdate.getMinutes())}.json`);
|
||||
|
||||
let quotedex = await res.json();
|
||||
let quotesel = quotedex[0];
|
||||
document.getElementById("litclock-pre").innerHTML = quotesel.quote_first;
|
||||
document.getElementById("litclock-time").innerHTML = quotesel.time;
|
||||
document.getElementById("litclock-post").innerHTML = quotesel.quote_last;
|
||||
|
||||
return quotesel;
|
||||
}
|
||||
|
||||
dispTime();
|
||||
setInterval(updateFancyTime, 1000);
|
||||
</script>
|
||||
</body>
|
||||