EATS_html/JOIN06.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
<!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="main.css">
    <title>검사기기 연결</title>
</head>
<body>
        <nav class="top-nav">
            <div class="nav-container">
                <div class="logo-area">
                    <img src="img/logo.png" alt="Logo" class="logo">
                    <img src="img/letters.svg" alt="Letters" class="letters">
                </div>
                <div class="login-area">
                    <span class="login-text" id="loginText">로그인</span>
                    <div class="user-info" id="userInfo" style="display: none;">
                        <img src="img/profile.svg" alt="프로필" class="profile-icon">
                        <span class="user-name">사용자 이름</span>
                    </div> <!-- 로그인 후 사용자 이름 표시 -->
                </div>
            </div>
        </nav>
        <main class="main-content">
            <div class="box1200">
                <h1 class="title" style="margin-bottom: 32px;">회원 가입이 완료되었습니다!<br> 이제 검사 기기를 연결해주세요. </h1>

                <!-- 추가된 텍스트와 이미지 -->
                <div class="centered-container" style="text-align: center; margin: 0 auto; max-width: 600px;">
                    <div class="box1200" style="margin-top: 32px;">
                        <p style="color: var(--Gray-700, #344054); font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px;">
                            검사 기기에서 로그인한 후 구입 시 받은 라이선스를 입력해주세요. <br>라이선스 입력 시 EATS 웹사이트와 자동으로 연동됩니다.
                        </p>
                    </div>
                    <div class="list-container" style="margin-top: 24px;">
                        <div class="list-item" style="display: flex; align-items: center; margin-bottom: 24px;">
                            <img src="img/check.svg" alt="Checked" style="width: 20px; height: 20px; margin-right: 12px;">
                            <span style="color: var(--Gray-500, #667085); font-size: 16px; font-weight: 800; line-height: 24px;">EATS 회원 가입하기</span>
                        </div>
                        <div class="list-item" style="display: flex; align-items: center; margin-bottom: 24px;">
                            <img src="img/uncheck.svg" alt="Unchecked" style="width: 20px; height: 20px; margin-right: 12px;">
                            <span style="color: var(--Gray-500, #667085); font-size: 16px; font-weight: 800; line-height: 24px;">검사 기기에서 로그인하기</span>
                        </div>
                        <div class="list-item" style="display: flex; align-items: center; margin-bottom: 24px;">
                            <img src="img/uncheck.svg" alt="Unchecked" style="width: 20px; height: 20px; margin-right: 12px;">
                            <span style="color: var(--Gray-500, #667085); font-size: 16px; font-weight: 800; line-height: 24px;">라이선스 키 입력하기</span>
                        </div>
                    </div>

                    <div class="license-key-message" style="margin-top: 32px;">
                        <p style="color: var(--Gray-700, #344054); font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px;">
                            라이선스 키를 찾을 수 없나요?
                            <a href="#" style="color: var(--Brand-700, #3538CD); font-family: Pretendard; font-size: 14px; font-style: normal; font-weight: 800; line-height: 20px; text-decoration: none;">고객 지원 센터</a>
                        </p>
                    </div>
                </div>
            </div>

        </main>
    </div>
    <script>
        // Lottie 애니메이션 설정
        const animationContainer = document.getElementById('lottie-container');

        lottie.loadAnimation({
            container: animationContainer, // 애니메이션을 표시할 컨테이너
            renderer: 'svg', // 렌더링 방식: svg, canvas, html 중 선택 가능
            loop: true, // 애니메이션 반복 여부
            autoplay: true, // 자동 재생 여부
            path: 'Animation - 1734427553032.json' // Lottie JSON 파일 경로
        });
    </script>
</body>
</html>