-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsign_up.html
142 lines (128 loc) · 4.4 KB
/
sign_up.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Join - Sign Up</title>
<link
rel="shortcut icon"
href="./assets/img/favicon_light.png"
type="image/x-icon"
/>
<script src="./script.js"></script>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./assets/css/sign_up.css" />
</head>
<body>
<section class="signup_page_container">
<header class="signup_page_head">
<img src="./assets/img/logIn/logo_desktop.png" alt="Join Logo" />
</header>
<main id="signupCard" class="signup_page_main">
<form onsubmit="inputValue(); return false" class="signup_card">
<div class="signup_card_head">
<a class="back_arrow" href="./index.html">
<img
id="backArrow"
src="./assets/img/signUp/arrow_left.png"
alt="Pfeil zurück"
/>
</a>
<div class="signup_header">
<h1>Sign up</h1>
<img
src="./assets/img/logIn/seperator.png"
alt="Seperation line"
/>
</div>
</div>
<div class="signup_card_center">
<div class="signup_input_container">
<div id="nameContainer" class="signup_input">
<input
type="text"
id="nameSignup"
placeholder="Name"
required
oninput="toggleBlueOutline()"
/>
<div>
<img src="./assets/img/logIn/person.png" alt="Name" />
</div>
</div>
<div id="emailContainer" class="signup_input">
<input
type="email"
id="emailSignup"
placeholder="Email"
required
oninput="toggleBlueOutline()"
/>
<div>
<img src="./assets/img/logIn/mail.png" alt="E-mail" />
</div>
</div>
<div id="passwordContainer" class="signup_input">
<input
type="password"
id="passwordSignup"
placeholder="Password"
required
oninput="toggleBlueOutline(), togglePwIcon()"
/>
<img
id="signupPwImg"
onclick="togglePwVisibility()"
src="./assets/img/logIn/lock.png"
alt="Passwort"
/>
</div>
<div id="passwordConfirmContainer" class="signup_input">
<input
onchange="checkPasswords()"
onkeyup="toggleConfirmIcon()"
type="password"
id="passwordConfirm"
placeholder="Confirm Password"
required
oninput="toggleBlueOutline(), togglePwIcon()"
/>
<img
id="signupPwImgConfirm"
onclick="toggleConfirmVisibility()"
src="./assets/img/logIn/lock.png"
alt="Confirm Button"
/>
</div>
</div>
<div id="errorTxt" class="match_password"></div>
<div class="signup_check">
<img
id="unchecked"
onclick="toggleCheckboxSignup()"
src="./assets/img/logIn/unchecked.png"
alt="Checkbox"
/>
I accept the <a href="#">Privacy policy</a>
</div>
</div>
<div class="signup_card_foot">
<button id="signUpBtn" class="foot_signup_btn" disabled>
Sign up
</button>
</div>
</form>
</main>
<footer class="signup_page_bottom">
<a href="./privacy_policy.html">Privacy Policy</a>
<a href="./legal_notice.html">Legal notice</a>
</footer>
<div class="signup_success" id="signup_success">
<div class="signup_container" id="signup_container">
<span class="signup_message">Contact successfully created</span>
</div>
</div>
</section>
<script src="./js/signup.js"></script>
</body>
</html>