ptr.pet
forked from
ptr.pet/faunu
endpoint 2.0
dysnomia.ptr.pet
add crt-ish css and change font
+207
-6
www/public/Web437_EverexME_5x8.woff
www/public/Web437_EverexME_5x8.woff
This is a binary file and will not be displayed.
+11
-4
www/src/main.ts
+11
-4
www/src/main.ts
···
46
46
});
47
47
};
48
48
49
+
await document.fonts.load("16px EverexME");
50
+
49
51
const term = new Terminal({
50
52
cursorBlink: true,
51
-
cursorStyle: "bar",
53
+
cursorStyle: "block",
52
54
cursorInactiveStyle: "block",
53
-
fontFamily: '"Comic Mono", monospace',
54
-
fontSize: 15,
55
+
customGlyphs: true,
56
+
fontFamily: "EverexME",
57
+
fontSize: 16,
58
+
lineHeight: 1,
59
+
letterSpacing: 0,
55
60
scrollback: 100000,
56
61
theme: {
57
62
background: "#000000",
···
313
318
}
314
319
};
315
320
316
-
// 1. Setup Input Handler immediately so terminal isn't blocked
317
321
term.onData(async (e) => {
318
322
// SEARCH MODE INPUT
319
323
if (searchState !== "none" && e >= " " && e <= "~") {
···
664
668
.catch((e) => {
665
669
term.write(`\r\n\x1b[31mfatal: failed to load engine: ${e}\x1b[0m\r\n`);
666
670
});
671
+
672
+
fitAddon.fit();
673
+
// setTimeout(() => fitAddon.fit(), 1000);
667
674
}
668
675
669
676
bootstrap().catch(console.error);
+196
-2
www/src/style.css
+196
-2
www/src/style.css
···
1
+
@font-face {
2
+
font-family: "EverexME";
3
+
src: url("/Web437_EverexME_5x8.woff") format("woff");
4
+
font-weight: normal;
5
+
font-style: normal;
6
+
}
7
+
8
+
:root {
9
+
--screen-background: #121010;
10
+
11
+
--flicker-opacity: 0.3;
12
+
--flicker-speed: 0.1s;
13
+
14
+
--scanline-opacity: 0.25;
15
+
--scanline-size: 2px;
16
+
17
+
--rgb-red-opacity: 0.12;
18
+
--rgb-green-opacity: 0.08;
19
+
--rgb-blue-opacity: 0.18;
20
+
--rgb-stripe-size: 3px;
21
+
22
+
--crt-contrast: 1;
23
+
--crt-brightness: 1.2;
24
+
--crt-saturation: 1.3;
25
+
}
26
+
1
27
body {
2
28
margin: 0;
3
29
padding: 0;
4
-
background-color: #000000;
30
+
background-color: var(--screen-background);
5
31
height: 100vh;
6
32
width: 100vw;
7
33
overflow: hidden;
8
34
}
9
35
36
+
@keyframes flicker {
37
+
0% {
38
+
opacity: 0.27861;
39
+
}
40
+
3% {
41
+
opacity: 0.34769;
42
+
}
43
+
6% {
44
+
opacity: 0.23604;
45
+
}
46
+
7% {
47
+
opacity: 0.90626;
48
+
}
49
+
8% {
50
+
opacity: 0.18128;
51
+
}
52
+
11% {
53
+
opacity: 0.83891;
54
+
}
55
+
19% {
56
+
opacity: 0.65583;
57
+
}
58
+
20% {
59
+
opacity: 0.67807;
60
+
}
61
+
24% {
62
+
opacity: 0.26559;
63
+
}
64
+
27% {
65
+
opacity: 0.84693;
66
+
}
67
+
40% {
68
+
opacity: 0.96019;
69
+
}
70
+
41% {
71
+
opacity: 0.08594;
72
+
}
73
+
43% {
74
+
opacity: 0.20313;
75
+
}
76
+
53% {
77
+
opacity: 0.71988;
78
+
}
79
+
57% {
80
+
opacity: 0.53455;
81
+
}
82
+
64% {
83
+
opacity: 0.37288;
84
+
}
85
+
68% {
86
+
opacity: 0.71428;
87
+
}
88
+
76% {
89
+
opacity: 0.70419;
90
+
}
91
+
81% {
92
+
opacity: 0.7003;
93
+
}
94
+
86% {
95
+
opacity: 0.36108;
96
+
}
97
+
95% {
98
+
opacity: 0.24387;
99
+
}
100
+
100% {
101
+
opacity: 0.27861;
102
+
}
103
+
}
104
+
105
+
@keyframes flicker-speed {
106
+
0% {
107
+
animation-duration: 0.12s;
108
+
}
109
+
10% {
110
+
animation-duration: 0.08s;
111
+
}
112
+
20% {
113
+
animation-duration: 0.15s;
114
+
}
115
+
30% {
116
+
animation-duration: 0.09s;
117
+
}
118
+
40% {
119
+
animation-duration: 0.13s;
120
+
}
121
+
50% {
122
+
animation-duration: 0.11s;
123
+
}
124
+
60% {
125
+
animation-duration: 0.14s;
126
+
}
127
+
70% {
128
+
animation-duration: 0.07s;
129
+
}
130
+
80% {
131
+
animation-duration: 0.16s;
132
+
}
133
+
90% {
134
+
animation-duration: 0.1s;
135
+
}
136
+
100% {
137
+
animation-duration: 0.12s;
138
+
}
139
+
}
140
+
10
141
#terminal {
142
+
font-family: "EverexME", monospace;
143
+
font-size: 16px;
144
+
145
+
image-rendering: pixelated;
146
+
-webkit-font-smoothing: none;
147
+
-moz-osx-font-smoothing: grayscale;
148
+
font-smooth: never;
149
+
150
+
position: relative;
151
+
overflow: hidden;
152
+
filter: contrast(var(--crt-contrast)) brightness(var(--crt-brightness))
153
+
saturate(var(--crt-saturation));
154
+
155
+
width: 100vw;
11
156
height: 100vh;
12
-
width: 100vw;
157
+
}
158
+
159
+
#terminal::after {
160
+
content: " ";
161
+
display: block;
162
+
position: absolute;
163
+
top: 0;
164
+
left: 0;
165
+
bottom: 0;
166
+
right: 0;
167
+
background: rgba(18, 16, 16, var(--flicker-opacity));
168
+
opacity: 0;
169
+
z-index: 2;
170
+
pointer-events: none;
171
+
animation:
172
+
flicker var(--flicker-speed) steps(2, jump-none) infinite,
173
+
flicker-speed 3.7s steps(10, jump-none) infinite;
174
+
}
175
+
176
+
@media (prefers-reduced-motion: reduce) {
177
+
#terminal::after {
178
+
animation: none;
179
+
opacity: 0.1;
180
+
}
181
+
}
182
+
183
+
#terminal::before {
184
+
content: " ";
185
+
display: block;
186
+
position: absolute;
187
+
top: 0;
188
+
left: 0;
189
+
bottom: 0;
190
+
right: 0;
191
+
background:
192
+
linear-gradient(
193
+
rgba(18, 16, 16, 0) 50%,
194
+
rgba(0, 0, 0, var(--scanline-opacity)) 50%
195
+
),
196
+
linear-gradient(
197
+
90deg,
198
+
rgba(255, 0, 0, var(--rgb-red-opacity)),
199
+
rgba(0, 255, 0, var(--rgb-green-opacity)),
200
+
rgba(0, 0, 255, var(--rgb-blue-opacity))
201
+
);
202
+
z-index: 2;
203
+
background-size:
204
+
100% var(--scanline-size),
205
+
var(--rgb-stripe-size) 100%;
206
+
pointer-events: none;
13
207
}