1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="language" content="en">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
@font-face {
font-family: "Sixtyfour Web";
src: url("fonts/Sixtyfour[wdth,wght].woff2") format("woff2");
}
:root {
--light-blue: #68a4ff;
--dark-blue: #083ccf;
--bleed: 100;
--scan: 400;
}
body {
background: #202020;
font-family: "Sixtyfour Web";
font-size: 24px;
margin: 0;
padding: 1em;
}
#screen {
background: var(--light-blue);
/*background-image: linear-gradient(0deg, var(--light-blue) 33.33%, #000000 33.33%, #000000 50%, var(--light-blue) 50%, var(--light-blue) 83.33%, #000000 83.33%, #000000 100%);
background-size: 6px 6px; */
display: inline-block;
margin: 0;
padding: 3em;
}
div.controls {
background: #404040;
display: flex;
flex-direction: column;
margin: 1em 0 0 0;
padding: 1em;
}
div.controls > div {
background: #808080;
margin: 0;
padding: 1em;
}
label {
color: #f0f0f0;
margin-left: 1em;
padding: 0;
}
pre {
background: var(--dark-blue);
/* background-image: linear-gradient(0deg, var(--dark-blue) 33.33%, #000000 33.33%, #000000 50%, var(--dark-blue) 50%, var(--dark-blue) 83.33%, #000000 83.33%, #000000 100%);
background-size: 6px 6px; */
color: var(--light-blue);
font-family: "Sixtyfour Web";
font-variation-settings: "wdth" var(--bleed), "wght" var(--scan);
line-height: 1em;
margin: 0;
padding: 0;
width: 40em;
word-wrap: break-word;
}
</style>
<script type="text/javascript">
const changeBleed = function (e) {
html.style.setProperty("--bleed", e.target.value);
}
const changeBlur = function (e) {
const v = e.target.value
const blur = "blur(" + v + "px)"
document.querySelector('#screen').style.filter = blur
}
const changeGlow = function (e) {
const v = e.target.value
const shadow = "0 0 " + v + "em #68a4ff"
document.querySelector('#screen').style.boxShadow = shadow
document.querySelector('pre').style.boxShadow = shadow
document.querySelector('pre').style.textShadow = shadow
}
const changeScan = function (e) {
html.style.setProperty("--scan", e.target.value);
}
var html
document.addEventListener("DOMContentLoaded", function() {
html = document.querySelector('html')
document.querySelector('#bleed').addEventListener('input', changeBleed)
document.querySelector('#blur').addEventListener('input', changeBlur)
document.querySelector('#glow').addEventListener('input', changeGlow)
document.querySelector('#scan').addEventListener('input', changeScan)
});
</script>
</head>
<body>
<div id="screen">
<pre contenteditable="true">
**** COMMODORE 64 BASIC V2 ****
64K RAM SYSTEM 38911 BASIC BYTES FREE
READY.
█
</pre>
</div>
<div class="controls">
<div><input type="range" id="bleed" min="100" max="200" step="1" value="100"><label for="bleed">Bleed</label></div>
<div><input type="range" id="scan" min="200" max="900" step="1" value="400"><label for="scan">Scanline</label></div>
<div><input type="range" id="glow" min="0" max="0.8" step="0.01" value="0"><label for="glow">Glow</label></div>
<div><input type="range" id="blur" min="0" max="20" step="0.2" value="0"><label for="blur">Blur</label></div>
</div>
</body>
</html>
|
