merge index.html(.bak) + shader.html -> index.html
This commit is contained in:
parent
7e59de380f
commit
3e3211b7e1
4 changed files with 169 additions and 9 deletions
110
www/css/typing-merge.css
Normal file
110
www/css/typing-merge.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,11 +1,22 @@
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
|
<!-- Ref: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -->
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<canvas class="gl-canvas-bg" id="gl-canvas"></canvas>
|
||||||
|
|
||||||
<div class="centered heading">
|
<div class="centered heading">
|
||||||
<div id="typing-wrapper">
|
<div id="typing-wrapper">
|
||||||
|
|
||||||
|
|
@ -34,5 +45,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
38
www/index.html.bak
Normal file
38
www/index.html.bak
Normal 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>
|
||||||
|
|
@ -4,11 +4,11 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>WebGL Demo</title>
|
<title>WebGL Demo</title>
|
||||||
<script
|
<!-- <script -->
|
||||||
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
|
<!-- src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" -->
|
||||||
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
|
<!-- integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" -->
|
||||||
crossorigin="anonymous"
|
<!-- crossorigin="anonymous" -->
|
||||||
defer></script>
|
<!-- defer></script> -->
|
||||||
<script src="js/webgl-demo.js" type="module"></script>
|
<script src="js/webgl-demo.js" type="module"></script>
|
||||||
<link rel="stylesheet" href="css/shader-style.css">
|
<link rel="stylesheet" href="css/shader-style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue