EATS_html/2VID04.html at main · Atflow-Corp/EATS_html · 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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/Logo.png" type="image/png">
    <link rel="stylesheet" href="main2.css">
    <title>화면조정</title>
</head>
<body><div class="content">

    <div class="device-background">

    <div class="precali-headbox">
        <h1 class="h2">화면 조정을 시작합니다.</h1>
        <div class="precali-container">

                <div class="precali-box">
                    <img src="img/guide1.png" width="312px">
                    <div class="precali-text">아래 버튼을 누르면 시선 유도 영상이 재생됩니다.<p>
                        화면을 쳐다볼 때, 하단의 조정 시작 버튼을 눌러주시면 됩니다.</div>
                </div>
                <div class="precali-box">
                    <img src="img/guide2.png" width="312px">
                    <div class="precali-text">대상자의 얼굴 크기를 맞춘 후 <font color="#01E7DB">[CALIBRATE]</font>을 선택하세요.<p>진행 후, 재조정이 필요없으면 <font color="#01E7DB">[USE CALIBRATION]</font>을 선택해주세요.</p></div>
                </div>

        </div> <button class="button-basic">시선유도 영상 재생 시작</button>


        <script>

                    document.addEventListener("DOMContentLoaded", () => {
    const menuIcon = document.getElementById("menu-icon");
    const menu = document.getElementById("menu");

    menuIcon.addEventListener("click", () => {
        menu.classList.toggle("hidden");
    });
             // 다른 곳을 클릭하면 메뉴 닫기
    document.addEventListener("click", (event) => {
        if (!menu.contains(event.target) && event.target !== menuIcon) {
            menu.classList.add("hidden");
        }
    });

document.addEventListener("DOMContentLoaded", () => {
    const currentAccountElement = document.getElementById("current-account");
    const otherAccounts = ["efdgd@abc.com", "test123@abc.com", "example@abc.com"]; // 초기 계정 리스트
    const otherAccountsList = document.getElementById("other-accounts");

    // 다른 계정 동적으로 추가
    otherAccounts.forEach((account) => {
        const accountItem = document.createElement("li");
        accountItem.textContent = account;
        accountItem.classList.add("switch-account");
        accountItem.addEventListener("click", () => {
            // 현재 계정 업데이트
            const currentAccount = currentAccountElement.querySelector("strong").textContent;
            currentAccountElement.querySelector("strong").textContent = account;

            // 선택한 계정을 다른 계정 리스트로 이동
            accountItem.textContent = currentAccount;
            otherAccountsList.appendChild(accountItem);

            alert(`계정 전환 완료: ${account}`);
        });
        otherAccountsList.appendChild(accountItem);
    });

    // 로그아웃 이벤트
    document.querySelector(".logout").addEventListener("click", () => {
        alert("로그아웃 되었습니다.");
    });

    // 계정 추가 이벤트
    document.querySelector(".add-account").addEventListener("click", () => {
        alert("새 계정을 추가합니다.");
    });
});
                    })
</script></div>

        </body>
        </html>