klartraum/index.html at main · fortmeier/klartraum · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>klartraum.ai</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            overflow: hidden;
        }

        .center-text {
            font-family: 'Arial', sans-serif;
            font-size: 4em;
            color: #000000;
            text-align: center;
            padding: 20px;
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.8),
                         0 0 5px rgba(255, 255, 255, 0.6),
                         0 0 10px rgba(255, 255, 255, 0.4);
            z-index: 10;
        }

        .matrix {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f0f0f0;
            overflow: hidden;
            z-index: 1;
        }

        .matrix span {
            position: absolute;
            top: 0;
            width: 5em;
            height: 5em;
            font-family: monospace;
            font-size: 5em;
            color: rgba(0, 0, 0, 0.2);
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
            animation: drop 5s linear infinite;
        }

        @keyframes drop {
            0% {
                transform: translateY(-10%);
            }
            100% {
                transform: translateY(150vh);
            }
        }
    </style>
</head>
<body>
    <div class="matrix" id="matrix"></div>
    <div class="center-text">
        <a href="https://github.com/fortmeier/klartraum/" target="_blank" style="text-decoration: none; color: inherit;">
            ... wake up, dreamer ...
        </a>
    </div></div>

    <script>
        const matrix = document.getElementById('matrix');
        const letters = '☀☁☂☃☄★☆☇☈☉☊☋☌☍☎☏☐☑☒☓☕☖☗☘☙☚☛☜☝☞☟☠☡☢☣☰☱☲☳☴☵☶☷☸☹☺☻☼☽☾☿♀♁♂♃♄♅♆♇♔♕♖♗♘♙♚♛♜♝♞♟♠♡♢♣♤♥♦';


        const createMatrixRain = () => {
            for (let i = 0; i < 200; i++) {
                const span = document.createElement('span');
                span.textContent = letters.charAt(Math.floor(Math.random() * letters.length));
                span.style.left = Math.random() * 100 + 'vw';
         	span.style.top = "-5em";
                span.style.animationDelay = Math.random() * 50 + 's';
                span.style.animationDuration = Math.random() * 5 + 3 + 's';
		a_mod = Math.random();
                span.style.color = "rgba(0, 0, 0, " + (0.3 - 0.3 * a_mod) +")";
                //span.style.text-shadow = "0 0 5px rgba(0, 0, 0, " + (0.3 - 0.25 * a_mod) +")";

                matrix.appendChild(span);

                // Remove span after animation ends
                span.addEventListener('animationend', () => {
                    span.remove();
	            if (span.parentNode) {
        	        span.parentNode.removeChild(span);
	            }
                });
            }
        };

	createMatrixRain();

        // setInterval(createMatrixRain, 500);
    </script>
</body>
</html>