register.html 3.76 KB
Newer Older
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    
<head>
	<title>Login</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
9

Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
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
	<style>
		body,
		html {
			margin: 0;
			padding: 0;
			height: 100%;
			background: #FFFFFF !important;
		}
		.user_card {
			width: 350px;
			margin-top: auto;
			margin-bottom: auto;
			background: #74cfbf;
			position: relative;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 10px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			border-radius: 5px;

		}

		.form_container {
			margin-top: 20px;
		}

		#form-title{
			color: #fff;
		}
		.login_btn {
			width: 100%;
			background: #33ccff !important;
			color: white !important;
		}
		.login_btn:focus {
			box-shadow: none !important;
			outline: 0px !important;
		}
		.login_container {
			padding: 0 2rem;
		}
		.input-group-text {
			background: #f7ba5b !important;
			color: white !important;
			border: 0 !important;
			border-radius: 0.25rem 0 0 0.25rem !important;
		}
		.input_user,
		.input_pass:focus {
			box-shadow: none !important;
			outline: 0px !important;
		}

	</style>

</head>
<body>
	<div class="container h-100">
		<div class="d-flex justify-content-center h-100">
			<div class="user_card">
				<div class="d-flex justify-content-center">
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
74
					<h3 id="form-title">REGISTER ACCOUNT</h3>
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
75
76
				</div>
				<div class="d-flex justify-content-center form_container">
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
77

Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
78
					<form method="POST" action="">
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
79
                        {% csrf_token %}
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
80
81
82
83
						<div class="input-group mb-3">
							<div class="input-group-append">
								<span class="input-group-text"><i class="fas fa-user"></i></span>
							</div>
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
84
85
86
87
88
89
90
							<input type="text" name="username">
						</div>
						<div class="input-group mb-2">
							<div class="input-group-append">
								<span class="input-group-text"><i class="fas fa-envelope-square"></i></span>
							</div>
							<input type="email" name="email">
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
91
92
93
94
95
						</div>
						<div class="input-group mb-2">
							<div class="input-group-append">
								<span class="input-group-text"><i class="fas fa-key"></i></span>
							</div>
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
96
97
98
99
100
101
102
							<input type="text" name="password1">
						</div>
						<div class="input-group mb-2">
							<div class="input-group-append">
								<span class="input-group-text"><i class="fas fa-key"></i></span>
							</div>
							<input type="text" name="password2">
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
103
104
						</div>

Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
105
106
107
				   		<div class="d-flex justify-content-center mt-3 login_container">
				 			<input class="btn login_btn" type="submit" value="Register Account">
				   		</div>
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
108
109
					</form>
				</div>
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
110
111
112

                {{ form.errors }}

Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
113
114
				<div class="mt-4">
					<div class="d-flex justify-content-center links">
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
115
						Noch kein Konto? <a href="{% url 'login' %}" class="ml-2">Login</a>
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
116
117
118
119
120
					</div>
				</div>
			</div>
		</div>
	</div>
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
121
122
123
	<script>
		//Query All input fields
		var form_fields = document.getElementsByTagName('input')
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
124
125
126
127
		form_fields[1].placeholder='Username..';
		form_fields[2].placeholder='Email..';
		form_fields[3].placeholder='Passwort eingeben...';
		form_fields[4].placeholder='Nochmal eingeben..';
Hänzelmann, Antje's avatar
Hänzelmann, Antje committed
128
129
130
131
132
133
134

		for (var field in form_fields){
			form_fields[field].className += ' form-control'
		}
	</script>
</body>
</html>