AI_overview/index.html at main · DistintiveLab/AI_overview · 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
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
<!DOCTYPE html>
<html>
<head>
    <title>IOOAIEU</title>
    <meta charset="UTF-8">
    <meta name="description" content="Interactive overview of AIs for educational use">
    <meta name="keywords" content="Artificial, Intelligence">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="hal.ico" />
    <link rel="stylesheet" media="all" href="https://cdn.jsdelivr.net/npm/beercss@latest/dist/cdn/beer.min.css" />
    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@latest/dist/cdn/beer.min.js"></script>
    <script async src="https://unpkg.com/typer-dot-js@0.1.0/typer.js"></script>
    <style>
        .escape-img {
            position: absolute;
            transition: transform 0.2s ease, transform 0.5s ease-in-out;
            cursor: pointer;
            animation: zoom-in-out 1s infinite alternate;
        }
        .blinking {
            animation: blink 1s infinite;
        }
        @keyframes zoom-in-out {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.1);
            }
        }
        @keyframes blink {
            50% {
                opacity: 0;
            }
        }
    </style>
</head>
<body class="black" style="overflow: hidden;">

    <nav class="grey9 top bottom-shadow white-text">
        <button class="circle large transparent s m" data-ui="#menu-menu">
            <i>menu</i>
            <menu id="menu-menu" data-ui="menu-menu" class="no-wrap">
            </menu>
        </button>
        <div class="max"></div>
    </nav>
    <main class="black responsive max center-align">
        <progress class="red10 light-green-text"></progress>
        <div class="large-space"></div>
        <h3 class="responsive black light-green-text center-align" style="font-family:monospace">
            <span class="typer white-text" id="main" data-words=">, > loading data..., > analysis in progress..., *error* human not ready, > refining current state..." data-delay="100" data-deleteDelay="1000"></span>
            <span class="cursor" data-owner="main"></span>
        </h3>
        <h3 id="countdown" class="responsive black error-text center-align" style="font-family:monospace"></h3>
        <div class="large-space"></div>
        <img id="escapeImg" class="circle escape-img" style="width:13vw;height: auto;" src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExYnM1NjZyemh1MzBkZ25pYmNlMGdyNnAzdmZnOHc1ZnZjemticW5sNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/wypKXPQggwaCA/giphy.webp">
        <div class="large-space"></div>
        <div class="large-space"></div>
        <div class="large-space"></div>
    </main>

    <script>
        function startCountdown() {
            const countdownElement = document.getElementById('countdown');
            const targetDate = new Date('2024-07-03T12:35:00Z').getTime();

            const countdownInterval = setInterval(() => {
                const now = new Date().getTime();
                const distance = targetDate - now;

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                if (distance >= 0) {
                    countdownElement.innerHTML = `Countdown: ${days}d ${hours}h ${minutes}m ${seconds}s`;
                } else {
                    clearInterval(countdownInterval);
                    countdownElement.innerHTML = 'Countdown: 0d 0h 0m 0s';

                    setTimeout(() => {
                        countdownElement.innerHTML = '<h1 class="responsive black error-text center-align blinking" style="font-family:monospace">#FATAL ERORORlybgvg)=_çè$*!Unhandled exception has occured</h1>';
                        setTimeout(() => {
                            document.querySelector('main').innerHTML = '<iframe src="https://embed.kumu.io/f85df6dabc6b9e0794ca42342663c66b" style="width:100%; border:none; height:100vh;"></iframe>';
                        }, 15000);
                    }, 3000);
                }
            }, 1000);
        }

        document.addEventListener('DOMContentLoaded', startCountdown);

        const escapeImg = document.getElementById('escapeImg');

        function getRandomPosition() {
            const main = document.querySelector('main');
            const mainRect = main.getBoundingClientRect();
            const imgRect = escapeImg.getBoundingClientRect();

            const maxX = mainRect.width - imgRect.width;
            const maxY = mainRect.height - imgRect.height;

            const randomX = Math.random() * maxX;
            const randomY = Math.random() * maxY;

            return { x: randomX, y: randomY };
        }

        function moveImage() {
            const { x, y } = getRandomPosition();
            escapeImg.style.left = `${x}px`;
            escapeImg.style.top = `${y}px`;
        }

        function resetPosition() {
            const main = document.querySelector('main');
            const mainRect = main.getBoundingClientRect();
            const imgRect = escapeImg.getBoundingClientRect();

            const centerX = (mainRect.width / 2) - (imgRect.width / 2);
            const centerY = (mainRect.height / 2) - (imgRect.height / 2);

            escapeImg.style.left = `${centerX}px`;
            escapeImg.style.top = `${centerY}px`;
        }

        escapeImg.addEventListener('mouseenter', moveImage);
        escapeImg.addEventListener('click', moveImage);
        escapeImg.addEventListener('mouseleave', resetPosition);

        // Initial position at the center
        window.addEventListener('resize', resetPosition);
        window.addEventListener('load', resetPosition);

        // Initial call to center the image
        resetPosition();
    </script>
</body>
</html>