sciencesproject-/leftsection.html at master · sciencesproject/sciencesproject- · 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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Left Section</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #000000;
            color: #ffffff;
        }

        #container {
            display: flex;
            flex-direction: column;
            height: 300vh;
            transition: transform 1s ease;
        }

        .section {
            width: 100%;
            height: 100vh;
            flex-shrink: 0;
            box-sizing: border-box;
            padding: 20px;
            transition: opacity 1s ease, transform 1s ease, filter 1s ease;
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0.8) rotateX(10deg);
            filter: brightness(70%) blur(10px);
            overflow: hidden;
        }

        .iframe-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .iframe-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="section">
            <div class="iframe-container">
                <iframe src="solarsystem.html" tabindex="-1"></iframe>
            </div>
        </div>
        <div class="section">
            <div class="iframe-container">
                <iframe src="presentation.html" tabindex="-1"></iframe>
            </div>
        </div>
        <div class="section">
            <div class="iframe-container">
                <iframe src="chatgpt.html" tabindex="-1"></iframe>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('container');
            const sections = document.querySelectorAll('.section');
            let currentSectionIndex = 0;

            function updateSection() {
                sections.forEach((section, index) => {
                    if (index === currentSectionIndex) {
                        section.style.opacity = 1;
                        section.style.transform = 'scale(1) rotateX(0deg)';
                        section.style.filter = 'brightness(100%) blur(0)';
                    } else {
                        section.style.opacity = 0;
                        section.style.transform = 'scale(0.8) rotateX(10deg)';
                        section.style.filter = 'brightness(70%) blur(10px)';
                    }
                });
                container.style.transform = `translateY(-${currentSectionIndex * 100}vh)`;
            }

            updateSection();

            function handleKeyDown(event) {
                if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
                    event.preventDefault();
                    if (event.key === 'ArrowUp' && currentSectionIndex > 0) {
                        currentSectionIndex--;
                        updateSection();
                    } else if (event.key === 'ArrowDown' && currentSectionIndex < sections.length - 1) {
                        currentSectionIndex++;
                        updateSection();
                    }
                }
            }

            document.addEventListener('keydown', handleKeyDown);
            window.addEventListener('keydown', handleKeyDown);

            window.addEventListener('message', (event) => {
                if (event.data.key === 'ArrowUp' || event.data.key === 'ArrowDown') {
                    handleKeyDown({ key: event.data.key, preventDefault: () => {} });
                }
            });
        });
    </script>
</body>
</html>