summaryrefslogtreecommitdiff
path: root/extras/html/themes/test_effects.html
diff options
context:
space:
mode:
authorPaul Buetow <paul@buetow.org>2025-06-22 23:02:12 +0300
committerPaul Buetow <paul@buetow.org>2025-06-22 23:02:12 +0300
commit9e985948f171eb58b3c38b4059efb1c436c9a842 (patch)
tree45233db768ea3e87e85bbd02e17e7393e8282211 /extras/html/themes/test_effects.html
parent2b78e5fcdf303f7055a67e13c5968e9ed92f56df (diff)
Fix retro theme visual effects and improve readability
- Fixed CSS validation issues (hex colors with alpha to rgba) - Enhanced visual effects (scanlines, CRT, grid, dots, terminal) for better visibility - Effects now properly display in Firefox and other browsers - Made classic_matrix theme lighter with sharper text for better readability - Enhanced retro glow effects to 125% for stronger vignette effect - Added test_effects.html for testing visual effects - All themes now W3C CSS compliant 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
Diffstat (limited to 'extras/html/themes/test_effects.html')
-rw-r--r--extras/html/themes/test_effects.html239
1 files changed, 239 insertions, 0 deletions
diff --git a/extras/html/themes/test_effects.html b/extras/html/themes/test_effects.html
new file mode 100644
index 0000000..07a3c82
--- /dev/null
+++ b/extras/html/themes/test_effects.html
@@ -0,0 +1,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> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-07 21:26:23 +0000