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>
|
||||||