IntrotoTechS2LabCollab.github.io/about.html at main · Fred-CodeCrafts/IntrotoTechS2LabCollab.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UTS PTI</title>
    <link rel="stylesheet" href="aboutpage.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="container">
        <div id="top">
            <div id="logo">
                <img src="imgW/moneybag.png" width="75" height="75" />
            </div>
             <p id="hellomsg" class="fun-font"></p>
            <div class="menu">
                <ul>
                    <li><a href="main.html">Main</a></li>
                    <li><a href="income.html">Income</a></li>
                    <li><a href="outcome.html">Outcome</a></li>
                    <li ><a class ="active" href="about.html">About Us</a></li>
                </ul>
            </div>
        </div>
        <div id="mid">
            <div id="image-container">
                <div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
                    <img class="image" src="imgW/umn1.png" draggable="false" />
                    <img class="image" src="imgW/umn2.jpg" draggable="false"/>
                    <img class="image" src="imgW/umn3.png" draggable="false"/>
                    <img class="image" src="imgW/umn4.jpg" draggable="false"/>
                    <img class="image" src="imgW/umn5.jpg" draggable="false"/>
                    <img class="image" src="imgW/umn6.jpg" draggable="false"/>
                    <img class="image" src="imgW/umn7.jpg" draggable="false"/>
                    <img class="image" src="imgW/umn8.jpg" draggable="false"/>
                </div>
            </div>
        </div>
        <div id="aboutteam">
            <img src="imgW/utspti.jpg" />
            <ul>
                <li>
                    <h1 id="subtitle">PTI Midterm Exam</h1>
                </li>
                <li id="subreal">
                    Selamat datang di halaman kami! Kami adalah Kelompok 1 dari kelas I yang mengikuti mata kuliah Introduction to Internet Technology. Kami sangat antusias untuk berbagi tentang proyek UTS lab kami melalui halaman ini.
                </li>
            </ul>
        </div>
        <div class="wrapper">
            <h1 class="fontext">Our Team</h1>

            <div class="team">
                <div class="team_member">
                    <div class="team_img">
                        <img src="imgW/erick.jpg" />
                    </div>
                    <h3>Frederick</h3>
                    <p class="role">Team Leader</p
                    <p>Favorite Song: WYS - Snowman</p>
                    <p>"Hidup seperti "Coding": Anda menghabiskan berjam-jam melakukan debugging, hanya untuk menemukan Semicolon yang kurang."</p>
                </div>
                <div class="team_member">
                    <div class="team_img">
                        <img src="imgW/davin.jpg" />
                    </div>
                    <h3>Davin</h3>
                    <p class="role">Team Member</p>
                    <p>Seorang manusia yang bercita - cita menjadi pembuat game</p>
                    <p><bold>"Jangan terburu-buru dalam hidup ini. karena kadang kebahagiaan terselip di antara langkah yang tenang dan momen yang diam."</bold></p>
                </div>
                <div class="team_member">
                    <div class="team_img">
                        <img src="imgW/jojo.jpg" />
                    </div>
                    <h3>Jonathan</h3>
                    <p class="role">Team Member</p>
                    <p>"戦わなければ、生き残れない!"</p>
                </div>
                <div class="team_member">
                    <div class="team_img">
                        <img src="imgW/wilson.jpg" />
                    </div>
                    <h3>Wilson</h3>
                    <p class="role">Team Member</p>
                    <p>"Jalanin hidup itu kayak main game, kalo lawan musuh yang sama terus menerus tanpa tantangan, kapan level up"</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const track = document.getElementById("image-track");
        let nextPercentage = 0;

        window.addEventListener("mousedown", e => {
            track.dataset.mouseDownAt = e.clientX;
        });

        window.addEventListener("mousemove", e => {
            if (track.dataset.mouseDownAt === "0") return;

            const mouseDelta = parseFloat(track.dataset.mouseDownAt) - e.clientX,
                maxDelta = window.innerWidth / 2;

            let percentage = (mouseDelta / maxDelta) * -100;
            nextPercentage = parseFloat(track.dataset.prevPercentage) + percentage;

            // Limit the slider's movement
            const maxPercentage = 0;
            const minPercentage = (window.innerWidth - track.offsetWidth) / window.innerWidth * 70;
            nextPercentage = Math.min(maxPercentage, Math.max(minPercentage, nextPercentage));

            track.style.transform = `translate(${nextPercentage}%, -50%)`;

            for (const image of track.getElementsByClassName("image")) {
                image.style.objectPosition = `${100 + nextPercentage}% center`;
            }
        });

        window.addEventListener("mouseup", () => {
            track.dataset.mouseDownAt = "0";
            track.dataset.prevPercentage = nextPercentage;
        });

        name_user = localStorage.getItem('name_user');
        welcomemsg = document.getElementById('hellomsg');
        welcomemsg.textContent = 'Hello, ' + name_user + '!';
    </script>
</body>
</html>