idk?
This commit is contained in:
parent
9412c03ad1
commit
c4049313d4
7 changed files with 312 additions and 12 deletions
8
www/css-old/shader-style.css
Normal file
8
www/css-old/shader-style.css
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
.gl-canvas-bg {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
72
www/css-old/typing-long.css
Normal file
72
www/css-old/typing-long.css
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #0e0d14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 13ch; /* prompt + command + cursor length */
|
||||||
|
text-align: start;
|
||||||
|
|
||||||
|
border: 0.5ch solid #ffc0cb; /* #ac4aed */
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typing-prompt {
|
||||||
|
width: 12ch; /* prompt + command length */
|
||||||
|
animation: typing 3s steps(10), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
border-right: 1ch solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typing-result {
|
||||||
|
/* "3.8s" means the result is shown 0.8s after typing ends */
|
||||||
|
animation: unhide 1s 3.8s forwards;
|
||||||
|
visibility: hidden;
|
||||||
|
white-space: pre-wrap; /* preserve linebreaks */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes typing {
|
||||||
|
from {
|
||||||
|
width: 5ch /* ignore prompt width */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cursor-blink {
|
||||||
|
50% {
|
||||||
|
border-color: transparent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes unhide {
|
||||||
|
to {
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
}
|
||||||
74
www/css-old/typing.css
Normal file
74
www/css-old/typing.css
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #0e0d14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 39ch; /* prompt + command + cursor length */
|
||||||
|
height: 10ch;
|
||||||
|
text-align: start;
|
||||||
|
|
||||||
|
border: 0.5ch solid #ffc0cb; /* #ac4aed */
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: start;
|
||||||
|
align-content: center;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typing-prompt {
|
||||||
|
width: 38ch; /* prompt + command length */
|
||||||
|
animation: typing 3s steps(36), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
border-right: 1ch solid;
|
||||||
|
margin-bottom: 0.5ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typing-result {
|
||||||
|
/* "1.8s" means the result is shown 1.8s after typing ends */
|
||||||
|
animation: unhide 1s 4.8s forwards;
|
||||||
|
visibility: hidden;
|
||||||
|
/* white-space: pre-wrap; /* preserve linebreaks */ */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes typing {
|
||||||
|
from {
|
||||||
|
width: 2ch /* ignore prompt width */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cursor-blink {
|
||||||
|
50% {
|
||||||
|
border-color: transparent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes unhide {
|
||||||
|
to {
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
}
|
||||||
114
www/css-old/typing2.css
Normal file
114
www/css-old/typing2.css
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #0e0d14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 */
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
www/index-old.html
Normal file
21
www/index-old.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="css-old/typing.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="centered heading">
|
||||||
|
<div id="typing-wrapper">
|
||||||
|
|
||||||
|
<div id="typing-prompt">
|
||||||
|
$ do butterflies cry when they're sad?
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="typing-result">
|
||||||
|
Segmentation fault (core dumped)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="css/typing.css">
|
<link rel="stylesheet" href="css/tty_intro.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="centered heading">
|
<div class="centered heading">
|
||||||
<div id="typing-wrapper">
|
<div id="typing-wrapper-2ch-36ch">
|
||||||
|
|
||||||
<div id="typing-prompt">
|
<div id="typing-prompt-2ch-36ch-3s-0_6s">
|
||||||
$ Do butterflies cry when they're sad?
|
$ Do butterflies cry when they're sad?
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="typing-result">
|
<div id="typing-result-3s-0_8s">
|
||||||
Segmentation fault (core dumped)
|
Segmentation fault (core dumped)
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,35 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="css/typing.css">
|
<link rel="stylesheet" href="css-old/typing2.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="centered heading">
|
<div class="centered heading">
|
||||||
<div id="typing-wrapper">
|
<div id="typing-wrapper">
|
||||||
|
|
||||||
<div id="typing-prompt">
|
<div id="typing-prompt">
|
||||||
grub> boot
|
<span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="typing-result">
|
<div id="typing-result" style="color: #f6c177;">
|
||||||
ERROR: Root device mounted successfully, but /sbin/init does not exist.
|
ERROR: Root device mounted successfully, but /sbin/init does not exist.<br/><br/>
|
||||||
|
|
||||||
Bailing out, you are on your own.
|
<i style="color: #eb6f92;">Bailing out, you are on your own.</i><br/>
|
||||||
Good luck
|
<i style="color: #eb6f92;">Good luck</i><br/><br/>
|
||||||
|
|
||||||
sh: can't access tty; job control turned off
|
sh: can't access tty; job control turned off<br/><br/>
|
||||||
[rootfs ]#
|
</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>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue