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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Retro Effects</title>
<style>
body {
font-family: monospace;
background: #000;
color: #0f0;
padding: 20px;
margin: 0;
min-width: 1200px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}
.effect-demo {
border: 1px solid #0f0;
padding: 20px;
height: 300px;
position: relative;
overflow: hidden;
background: #0a0a0a;
}
h2 {
color: #0ff;
margin-top: 0;
text-transform: uppercase;
}
/* Scanlines Effect */
.scanlines::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 0, 0.1) 2px,
rgba(0, 255, 0, 0.1) 4px
);
pointer-events: none;
z-index: 1;
animation: scanline-move 8s linear infinite;
}
@keyframes scanline-move {
0% { background-position: 0 0; }
100% { background-position: 0 10px; }
}
/* CRT Effect */
.crt::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
z-index: 1;
}
.crt::after {
content: "";
position: absolute;
top: -5%;
left: -5%;
right: -5%;
bottom: -5%;
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
z-index: 2;
}
/* Grid Effect */
.grid-effect {
background-image:
linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1);
}
/* Dots Effect */
.dots {
background-image: radial-gradient(circle, rgba(0, 255, 0, 0.3) 2px, transparent 2px);
background-size: 20px 20px;
}
.dots::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(0, 255, 0, 0.2) 1px, transparent 1px);
background-size: 40px 40px;
background-position: 20px 20px;
opacity: 0.5;
animation: dot-pulse 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes dot-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
/* Terminal Effect */
.terminal {
text-shadow: 0 0 3px #0f0;
}
.terminal::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 255, 0, 0.05) 50%,
transparent 100%
);
pointer-events: none;
animation: terminal-scan 8s linear infinite;
}
@keyframes terminal-scan {
0% { transform: translateY(-100%); }
100% { transform: translateY(400%); }
}
/* Terminal cursor */
.terminal h2::after {
content: "_";
animation: blink 1s infinite;
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* No effect reference */
.none {
border-color: #ff0;
}
p {
position: relative;
z-index: 3;
margin: 10px 0;
}
.info {
text-align: center;
padding: 20px;
margin: 20px auto;
max-width: 800px;
border: 1px solid #0f0;
background: rgba(0, 255, 0, 0.05);
}
</style>
</head>
<body>
<div class="info">
<h1>RETRO THEME EFFECTS TEST</h1>
<p>If you can see the visual effects below, they are working correctly in your browser.</p>
<p>Each effect should be clearly visible and animated.</p>
</div>
<div class="grid">
<div class="effect-demo scanlines">
<h2>Scanlines</h2>
<p>You should see horizontal lines moving slowly downward.</p>
<p>This simulates old CRT monitor scanlines.</p>
</div>
<div class="effect-demo crt">
<h2>CRT Effect</h2>
<p>You should see fine horizontal lines and darkened edges.</p>
<p>This creates a curved CRT monitor appearance.</p>
</div>
<div class="effect-demo grid-effect">
<h2>Grid</h2>
<p>You should see a green grid pattern overlay.</p>
<p>This creates a retro computer grid aesthetic.</p>
</div>
<div class="effect-demo dots">
<h2>Dots</h2>
<p>You should see pulsing dot patterns.</p>
<p>This simulates old dot-matrix displays.</p>
</div>
<div class="effect-demo terminal">
<h2>Terminal</h2>
<p>You should see text glow and a scanning line.</p>
<p>This recreates classic terminal aesthetics.</p>
</div>
<div class="effect-demo none">
<h2>No Effect</h2>
<p>This box has no special effects for comparison.</p>
<p>Yellow border indicates no retro effects.</p>
</div>
</div>
<div class="info" style="margin-top: 40px;">
<h3>Testing Individual Themes</h3>
<p>To test a specific theme, open its example.html file directly:</p>
<p>e.g., phosphor_stream/example.html</p>
<p>The effects should now be clearly visible in Firefox and other modern browsers.</p>
</div>
</body>
</html>
|
