AuthAutoFill/popup.html at master · ParkJeongseop/AuthAutoFill · 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
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <div class="container">
        <!-- 헤더 -->
        <div class="header">
            <div class="header-icon">
                <i class="fas fa-shield-alt"></i>
            </div>
            <h1 id="header_title" class="header-title">본인인증 자동완성</h1>
        </div>

        <!-- 토글 스위치 -->
        <div class="toggle-section">
            <div class="toggle-wrapper">
                <span id="toggle_label" class="toggle-label">자동완성 활성화</span>
                <label class="switch">
                    <input type="checkbox" id="onoffswitch">
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <!-- 프로필 목록 -->
        <div class="profiles-section">
            <div class="section-header">
                <i class="fas fa-users"></i>
                <span id="saved_profiles_title">저장된 프로필</span>
            </div>
            <ul id="profilesUL" class="profiles-list">
                <!-- 프로필들이 여기에 동적으로 추가됩니다 -->
            </ul>

            <!-- 새 프로필 추가 버튼 -->
            <div class="add-profile-button-container">
                <button id="showAddProfileForm" type="button" class="btn-add-profile">
                    <i class="fas fa-plus"></i>
                    <span id="add_new_profile_btn">새 프로필 추가</span>
                </button>
            </div>
        </div>

        <!-- 프로필 추가 폼 (기본 숨김) -->
        <div id="addProfileSection" class="add-profile-section" style="display: none;">
            <div class="section-header">
                <i class="fas fa-plus-circle"></i>
                <span id="add_new_profile_title">새 프로필 추가</span>
            </div>

            <form class="profile-form">
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-user"></i>
                        <span id="name_label">이름</span>
                    </label>
                    <input id="name" type="text" class="form-input" placeholder="이름을 입력하세요" required>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-mobile-alt"></i>
                        <span id="phone_label">휴대폰번호</span>
                    </label>
                    <input id="phone_number" type="tel" class="form-input" placeholder="01012345678" maxlength="13">
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-signal"></i>
                        <span id="carrier_label">통신사</span>
                    </label>
                    <select id="carrier" class="form-select">
                        <option id="op_carrier" value="-1">통신사 선택</option>
                        <option id="op_skt" value="1">SKT</option>
                        <option id="op_kt" value="2">KT</option>
                        <option id="op_lgu" value="3">LGU+</option>
                        <option id="op_skt_mvno" value="4">SKT 알뜰폰</option>
                        <option id="op_kt_mvno" value="5">KT 알뜰폰</option>
                        <option id="op_lgu_mvno" value="6">LGU+ 알뜰폰</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-calendar-alt"></i>
                        <span id="birth_label">생년월일</span>
                    </label>
                    <input id="birth" type="text" class="form-input" placeholder="1990/01/01" maxlength="10">
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-globe"></i>
                            <span id="nationality_label">국적</span>
                        </label>
                        <select id="foreigner" class="form-select">
                            <option id="op_citizen" value="0">내국인</option>
                            <option id="op_foreigner" value="1">외국인</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-venus-mars"></i>
                            <span id="gender_label">성별</span>
                        </label>
                        <select id="gender" class="form-select">
                            <option id="op_gender" value="-1">성별 선택</option>
                            <option id="op_male" value="1">남성</option>
                            <option id="op_female" value="2">여성</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-key"></i>
                        <span id="auth_method_label">인증방식</span>
                    </label>
                    <select id="way" class="form-select">
                        <option id="op_method" value="-1">인증방식 선택</option>
                        <option id="op_sms" value="1">SMS</option>
                        <option id="op_pass" value="2">통신사 PASS앱</option>
                    </select>
                </div>

                <div class="form-actions">
                    <button id="addProfile" type="button" class="btn-primary">
                        <i class="fas fa-check"></i>
                        <span id="create_profile_btn">프로필 생성</span>
                    </button>
                    <button id="cancelAddProfile" type="button" class="btn-secondary">
                        <i class="fas fa-times"></i>
                        <span id="cancel_btn">취소</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>