cry/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge index.html(.bak) + shader.html -> index.html

Browse source
This commit is contained in:
Emile Clark-Boman 2026-01-31 13:28:26 +10:00
parent 7e59de380f
commit 3e3211b7e1
4 changed files with 169 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

110
www/css/typing-merge.css Normal file
View file

@ -0,0 +1,110 @@
.centered {
position: absolute;
inset: 0 0 0 0;
margin: auto;
display: flex;
}
.heading {
font-family: monospace;
font-size: 2em;
font-weight: bold;
color: #ffc0cb; /* #ac4aed */
}
/* =========================================================== *
* Type Writer Effect *
/* =========================================================== */
#typing-wrapper {
margin: auto auto;
width: 71ch; /* prompt + command + cursor length */
height: 21ch;
text-align: start;
border: 0.5ch solid #ffc0cb; /* #ac4aed */
background-color: #0e0d14;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: start;
align-content: center;
align-items: start;
}
#typing-prompt {
width: 10ch; /* prompt + command length */
animation: kfs-typing 0.5s steps(4), kfs-cursor-blink 1.2s steps(1, start) 0.6s forwards;
white-space: nowrap;
overflow: hidden;
border-right: 1ch solid;
margin-bottom: 0.5ch;
}
#typing-result {
/* "4.8s" means the result is shown 1.8s after typing ends */
animation: unhide 1s 1.8s forwards;
visibility: hidden;
white-space: nowrap; /* preserve linebreaks */
}
#typing-prompt-segfault {
width: 47ch; /* prompt + command length */
/* animation: kfs-typing-segfault 3s steps(36) 2.6s, cursor-blink 0.6s steps(1, start) 3s infinite alternate; */
animation: kfs-typing-segfault 3s steps(36) 4s forwards, cursor-blink-segfault 0.6s steps(1, start) 7.1s infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 1ch solid;
margin-bottom: 0.5ch;
visibility: hidden;
}
#typing-result-segfault {
/* "4.8s" means the result is shown 1.8s after typing ends */
animation: unhide 1s 8.3s forwards;
visibility: hidden;
white-space: nowrap; /* preserve linebreaks */
}
@keyframes kfs-typing {
from {
width: 6ch; /* ignore prompt width */
}
}
@keyframes kfs-typing-segfault {
from {
width: 11ch; /* ignore prompt width */
visibility: visible;
}
to {
visibility: visible;
}
}
@keyframes kfs-cursor-blink {
from {
border-color: transparent;
}
50% {
border-color: currentColor;
}
to {
border-color: transparent;
}
}
@keyframes cursor-blink-segfault {
50% {
border-color: transparent;
}
}
@keyframes unhide {
to {
visibility: visible;
}
}

20
www/index.html
View file

@ -1,11 +1,22 @@
<!DOCTYPE html>
<html>
<!doctype html>
<!-- Ref: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -->
<html lang="en">
<head>
<link rel="stylesheet" href="css/typing.css">
<meta charset="utf-8" />
<title>WebGL Demo</title>
<!-- <script -->
<!-- src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" -->
<!-- integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" -->
<!-- crossorigin="anonymous" -->
<!-- defer></script> -->
<script src="js/webgl-demo.js" type="module"></script>
<link rel="stylesheet" href="css/shader-style.css">
<link rel="stylesheet" href="css/typing-merge.css">
</head>
<body>
<canvas class="gl-canvas-bg" id="gl-canvas"></canvas>
<div class="centered heading">
<div id="typing-wrapper">
@ -34,5 +45,6 @@
</div>
</div>
</body>
</html>

38
www/index.html.bak Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/typing.css">
</head>
<body>
<div class="centered heading">
<div id="typing-wrapper">
<div id="typing-prompt">
<span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span>
</div>
<div id="typing-result" style="color: #f6c177;">
ERROR: Root device mounted successfully, but /sbin/init does not exist.<br/><br/>
<i style="color: #eb6f92;">Bailing out, you are on your own.</i><br/>
<i style="color: #eb6f92;">Good luck</i><br/><br/>
sh: can't access tty; job control turned off<br/><br/>
</div>
<div id="typing-prompt-segfault">
<span style="color: #9ccfd8;">[rootfs ]#</span>
<span style="color: #c4a7e7;">do butterflies cry when they're sad?</span>
</div>
<div id="typing-result-segfault">
<i style="color: #eb6f92;">Segmentation fault (core dumped)</i>
</div>
</div>
</div>
</body>
</html>

10
www/shader.html
View file

@ -4,11 +4,11 @@
<head>
<meta charset="utf-8" />
<title>WebGL Demo</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
crossorigin="anonymous"
defer></script>
<!-- <script -->
<!-- src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" -->
<!-- integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" -->
<!-- crossorigin="anonymous" -->
<!-- defer></script> -->
<script src="js/webgl-demo.js" type="module"></script>
<link rel="stylesheet" href="css/shader-style.css">
</head>