Skip to content

Commit

Permalink
add terminal-stylesheet for javascript html
Browse files Browse the repository at this point in the history
  • Loading branch information
mojoaxel committed Mar 13, 2022
1 parent fc9ea8e commit f2b3d6f
Show file tree
Hide file tree
Showing 99 changed files with 397 additions and 98 deletions.
200 changes: 200 additions & 0 deletions 00_Utilities/javascript/style_terminal.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

:root {
--background: rgb(1, 24, 1);
--text: rgb(51, 251, 51);
--input: yellow;
}

html {
font-size: 16px;
}

body {
background-color: var(--background);
color: var(--text);
font: 600 1rem/1.3 Consolas, Andale Mono, monospace;
padding: 3rem;
}

/* Adapted from source: http://aleclownes.com/2017/02/01/crt-display.html */
@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;
}
}
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 {
display: inline-block;
position: relative;
caret-color: var(--input);
background: none;
border: none;
outline: none;
border-bottom: 1px solid var(--input);
border-style: none none dashed none;
color: var(--input);
font: 900 1rem/1.3 Consolas, Andale Mono, monospace;
animation: textShadow 1.6s infinite;
text-transform: uppercase;
}

8 changes: 5 additions & 3 deletions 01_Acey_Ducey/javascript/aceyducey.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<head>
<title>ACEY DUCEY</title>

<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt"></pre>
<script src="aceyducey.js"></script>
</body>
3 changes: 2 additions & 1 deletion 02_Amazing/javascript/amazing.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>AMAZING</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="amazing.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 03_Animal/javascript/animal.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>ANIMAL</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<!--<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>-->
<script src="animal.js"></script>
</body>
Expand Down
3 changes: 2 additions & 1 deletion 04_Awari/javascript/awari.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>AWARI</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="awari.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 05_Bagels/javascript/bagels.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BAGELS</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="bagels.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 06_Banner/javascript/banner.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BANNER</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="banner.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 07_Basketball/javascript/basketball.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BASKETBALL</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="basketball.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 08_Batnum/javascript/batnum.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BATNUM</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="batnum.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 09_Battle/javascript/battle.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BATTLE</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="battle.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 10_Blackjack/javascript/blackjack.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BLACKJACK</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="blackjack.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 11_Bombardment/javascript/bombardment.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BOMBARDMENT</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="bombardment.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 12_Bombs_Away/javascript/bombsaway.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BOMBARDMENT</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="bombsaway.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 13_Bounce/javascript/bounce.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BOUNCE</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="bounce.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 14_Bowling/javascript/bowling.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BOWLING</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="bowling.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 15_Boxing/javascript/boxing.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BOXING</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="boxing.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion 16_Bug/javascript/bug.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<title>BUG</title>
<link rel="stylesheet" href="../../00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<pre id="output" style="font-size: 12pt;"></pre>
<pre id="output"></pre>
<script src="bug.js"></script>
</body>
</html>
Loading

0 comments on commit f2b3d6f

Please sign in to comment.