mirror of
https://github.com/coding-horror/basic-computer-games.git
synced 2025-12-21 23:00:43 -08:00
support multible html files per game
This commit is contained in:
Alexander Wunschik
committed by
Alexander Wunschik
Alexander Wunschik
parent
933609a7c3
commit
34e0737d1f
@@ -4,6 +4,8 @@
|
|||||||
*
|
*
|
||||||
* Call this from the root of the project with
|
* Call this from the root of the project with
|
||||||
* `node ./00_Utilities/build-index.js`
|
* `node ./00_Utilities/build-index.js`
|
||||||
|
*
|
||||||
|
* @author Alexander Wunschik <https://github.com/mojoaxel>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
@@ -13,33 +15,65 @@ const TITLE = 'BASIC Computer Games';
|
|||||||
const JAVASCRIPT_FOLDER = 'javascript';
|
const JAVASCRIPT_FOLDER = 'javascript';
|
||||||
const IGNORE_FOLDERS_START_WITH = ['.', '00_', 'buildJvm', 'Sudoku'];
|
const IGNORE_FOLDERS_START_WITH = ['.', '00_', 'buildJvm', 'Sudoku'];
|
||||||
|
|
||||||
function createIndexHtml(title, games) {
|
function createGameLinks(game) {
|
||||||
const listEntries = games.map(game =>
|
if (game.htmlFiles.length > 1) {
|
||||||
`<li><a href="${game.htmlFile}">${game.name}</a></li>`
|
const entries = game.htmlFiles.map(htmlFile => {
|
||||||
).map(entry => `\t\t\t${entry}`).join('\n');
|
const name = path.basename(htmlFile).replace('.html', '');
|
||||||
|
return `
|
||||||
return `
|
<li>
|
||||||
<!DOCTYPE html>
|
<a href="${htmlFile}">${name}</a>
|
||||||
<html lang="en">
|
</li>
|
||||||
<head>
|
`;
|
||||||
<meta charset="UTF-8">
|
});
|
||||||
<title>${title}</title>
|
return `
|
||||||
</head>
|
<li>
|
||||||
<body>
|
<span>${game.name}</span>
|
||||||
<header>
|
<ul>${entries.map(e => `\t\t\t${e}`).join('\n')}</ul>
|
||||||
<h1>${title}</h1>
|
</li>
|
||||||
</header>
|
`;
|
||||||
<main>
|
} else {
|
||||||
<ul>
|
return `<li><a href="${game.htmlFiles}">${game.name}</a></li>`;
|
||||||
${listEntries}
|
}
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
`.replace(/\t/g, ' ').trim();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function findHtmlFileInFolder(folder) {
|
function createIndexHtml(title, games) {
|
||||||
|
const listEntries = games.map(game =>
|
||||||
|
createGameLinks(game)
|
||||||
|
).map(entry => `\t\t\t${entry}`).join('\n');
|
||||||
|
|
||||||
|
const head = `
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>${title}</title>
|
||||||
|
<link rel="stylesheet" href="./00_Utilities/javascript/style_terminal.css" />
|
||||||
|
</head>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const body = `
|
||||||
|
<body>
|
||||||
|
<article id="output">
|
||||||
|
<header>
|
||||||
|
<h1>${title}</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<ul>
|
||||||
|
${listEntries}
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
${head}
|
||||||
|
${body}
|
||||||
|
</html>
|
||||||
|
`.trim().replace(/\s\s+/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function findHtmlFilesInFolder(folder) {
|
||||||
// filter folders that do not include a subfolder called "javascript"
|
// filter folders that do not include a subfolder called "javascript"
|
||||||
const hasJavascript = fs.existsSync(`${folder}/${JAVASCRIPT_FOLDER}`);
|
const hasJavascript = fs.existsSync(`${folder}/${JAVASCRIPT_FOLDER}`);
|
||||||
if (!hasJavascript) {
|
if (!hasJavascript) {
|
||||||
@@ -54,11 +88,9 @@ function findHtmlFileInFolder(folder) {
|
|||||||
|
|
||||||
if (htmlFiles.length == 0) {
|
if (htmlFiles.length == 0) {
|
||||||
throw new Error(`Game "${folder}" is missing a html file in the "${folder}/${JAVASCRIPT_FOLDER}" folder`);
|
throw new Error(`Game "${folder}" is missing a html file in the "${folder}/${JAVASCRIPT_FOLDER}" folder`);
|
||||||
} else if (htmlFiles.length > 1) {
|
|
||||||
console.warn(`Game "${folder}" has multible html files. I'm just taking the first one "${htmlFiles[0]}"`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return path.join(folder, JAVASCRIPT_FOLDER, htmlFiles[0]);
|
return htmlFiles.map(htmlFile => path.join(folder, JAVASCRIPT_FOLDER, htmlFile));
|
||||||
}
|
}
|
||||||
|
|
||||||
function main() {
|
function main() {
|
||||||
@@ -79,10 +111,10 @@ function main() {
|
|||||||
// get name and javascript file from folder
|
// get name and javascript file from folder
|
||||||
const games = folders.map(folder => {
|
const games = folders.map(folder => {
|
||||||
const name = folder.replace('_', ' ');
|
const name = folder.replace('_', ' ');
|
||||||
let htmlFile;
|
let htmlFiles;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
htmlFile = findHtmlFileInFolder(folder);
|
htmlFiles = findHtmlFilesInFolder(folder);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn(`Game "${name}" is missing a javascript implementation: ${error.message}`);
|
console.warn(`Game "${name}" is missing a javascript implementation: ${error.message}`);
|
||||||
return null;
|
return null;
|
||||||
@@ -90,7 +122,7 @@ function main() {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
htmlFile
|
htmlFiles
|
||||||
}
|
}
|
||||||
}).filter(game => game !== null);
|
}).filter(game => game !== null);
|
||||||
|
|
||||||
|
|||||||
@@ -1,188 +1,41 @@
|
|||||||
|
/**
|
||||||
|
* Old school terminal style
|
||||||
|
*
|
||||||
|
* @see https://codepen.io/cvan/pen/Zarmry
|
||||||
|
* @see http://aleclownes.com/2017/02/01/crt-display.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* define the main color theme */
|
||||||
|
:root {
|
||||||
|
--background: rgb(1, 24, 1);
|
||||||
|
--text: rgb(51, 251, 51);
|
||||||
|
--input: yellow;
|
||||||
|
--font: 600 1rem/1.3 Consolas, Andale Mono, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* reset some styles */
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--background: rgb(1, 24, 1);
|
|
||||||
--text: rgb(51, 251, 51);
|
|
||||||
--input: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font: 600 1rem/1.3 Consolas, Andale Mono, monospace;
|
font: var(--font);
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Adapted from source: http://aleclownes.com/2017/02/01/crt-display.html */
|
/* format input fields */
|
||||||
@keyframes flicker {
|
/* TODO: a simple blinking cursor would even better than this! */
|
||||||
0% {
|
|
||||||
opacity: 0.27861;
|
|
||||||
}
|
|
||||||
5% {
|
|
||||||
opacity: 0.34769;
|
|
||||||
}
|
|
||||||
10% {
|
|
||||||
opacity: 0.23604;
|
|
||||||
}
|
|
||||||
15% {
|
|
||||||
opacity: 0.90626;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0.18128;
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
opacity: 0.83891;
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
opacity: 0.65583;
|
|
||||||
}
|
|
||||||
35% {
|
|
||||||
opacity: 0.67807;
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
opacity: 0.26559;
|
|
||||||
}
|
|
||||||
45% {
|
|
||||||
opacity: 0.84693;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.96019;
|
|
||||||
}
|
|
||||||
55% {
|
|
||||||
opacity: 0.08594;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
opacity: 0.20313;
|
|
||||||
}
|
|
||||||
65% {
|
|
||||||
opacity: 0.71988;
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
opacity: 0.53455;
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
opacity: 0.37288;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
opacity: 0.71428;
|
|
||||||
}
|
|
||||||
85% {
|
|
||||||
opacity: 0.70419;
|
|
||||||
}
|
|
||||||
90% {
|
|
||||||
opacity: 0.7003;
|
|
||||||
}
|
|
||||||
95% {
|
|
||||||
opacity: 0.36108;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0.24387;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes textShadow {
|
|
||||||
0% {
|
|
||||||
text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
5% {
|
|
||||||
text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
10% {
|
|
||||||
text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
15% {
|
|
||||||
text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
35% {
|
|
||||||
text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
45% {
|
|
||||||
text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
55% {
|
|
||||||
text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
65% {
|
|
||||||
text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
85% {
|
|
||||||
text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
90% {
|
|
||||||
text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
95% {
|
|
||||||
text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
pre#output {
|
|
||||||
animation: textShadow 1.6s infinite;
|
|
||||||
}
|
|
||||||
pre#output::before {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
|
||||||
z-index: 2;
|
|
||||||
background-size: 100% 2px, 3px 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
pre#output::after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba(18, 16, 16, 0.1);
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
|
||||||
animation: flicker 0.15s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -198,3 +51,194 @@ input {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* format the link list */
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* format the sub-lists */
|
||||||
|
ul > li > ul {
|
||||||
|
margin-left: 1.75rem;
|
||||||
|
}
|
||||||
|
ul > li > ul > li::before {
|
||||||
|
content: "├── ";
|
||||||
|
}
|
||||||
|
ul > li > ul > li:last-child::before {
|
||||||
|
content: "└── ";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* overwrite the default (blue) link styles */
|
||||||
|
a, a:visited {
|
||||||
|
color: var(--text);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* add all the face flicker effects (only on desktop) */
|
||||||
|
@media screen and (min-width: 640px) {
|
||||||
|
@keyframes flicker {
|
||||||
|
0% {
|
||||||
|
opacity: 0.27861;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
opacity: 0.34769;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 0.23604;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
opacity: 0.90626;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 0.18128;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
opacity: 0.83891;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
opacity: 0.65583;
|
||||||
|
}
|
||||||
|
35% {
|
||||||
|
opacity: 0.67807;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 0.26559;
|
||||||
|
}
|
||||||
|
45% {
|
||||||
|
opacity: 0.84693;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.96019;
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
opacity: 0.08594;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 0.20313;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
opacity: 0.71988;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
opacity: 0.53455;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
opacity: 0.37288;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
opacity: 0.71428;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
opacity: 0.70419;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0.7003;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
opacity: 0.36108;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.24387;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes textShadow {
|
||||||
|
0% {
|
||||||
|
text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
35% {
|
||||||
|
text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
45% {
|
||||||
|
text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#output {
|
||||||
|
animation: textShadow 1.6s infinite;
|
||||||
|
}
|
||||||
|
#output::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||||
|
z-index: 2;
|
||||||
|
background-size: 100% 2px, 3px 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#output::after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(18, 16, 16, 0.1);
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
animation: flicker 0.15s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
112
index.html
112
index.html
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user