-
Notifications
You must be signed in to change notification settings - Fork 18
/
signup.html
180 lines (179 loc) · 6.82 KB
/
signup.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="image_src" type="image/jpeg" href="/images/logo.png" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<!-- Site Properities -->
<meta name="generator" content="Visual Studio" />
<title>Sign Up | Golgi Admin</title>
<meta name="description" content="Golgi Admin Theme" />
<meta name="keywords" content="html5, ,semantic,ui, library, framework, javascript,jquery,admin,theme" />
<link href="dist/semantic.min.css" rel="stylesheet" />
<link href="css/main.min.css" rel="stylesheet" />
</head>
<body class="signup">
<div class="ui container">
<div class="ui segments">
<div class="ui segment no-padding">
<h5 class="ui top attached center aligned blueli inverted header">
Sign Up Now
</h5>
</div>
<div class="ui segment">
<form class="ui form segment">
<p>Sign up to your Golgi Account</p>
<div class="two fields">
<div class="required field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="required field">
<label>Gender</label>
<select class="ui dropdown" name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="two fields">
<div class="required field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="required field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="required field">
<label>Skills</label>
<select name="skills" multiple="" class="ui dropdown">
<option value="">Select Skills</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="design">Graphic Design</option>
<option value="plumbing">Plumbing</option>
<option value="mech">Mechanical Engineering</option>
<option value="repair">Kitchen Repair</option>
</select>
</div>
<div class="inline required field">
<div class="ui checkbox">
<input type="checkbox" name="terms">
<label class="modalTerms" style="text-decoration:underline;cursor:pointer">I agree to the terms and conditions</label>
</div>
</div>
<div class="ui blue submit fluid button">Sign Up</div>
<div class="ui error message"></div>
</form>
</div>
<div class="ui center aligned segment">
Already have an account? <a href="signin.html" class="ui">Sign In</a>
</div>
</div>
</div>
<div class="ui standard test modal">
<div class="header">
Select a Photo
</div>
<div class="image content">
<div class="ui medium image">
<img src="http://semantic-ui.com/images/avatar2/large/rachel.png">
</div>
<div class="description">
<div class="ui header">Default Profile Image</div>
<p>We've found the following <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="dist/semantic.min.js"></script>
<script>
$('.ui.dropdown')
.dropdown()
;
$('.ui.form')
.form({
fields: {
name: {
identifier: 'name',
rules: [
{
type: 'empty',
prompt: 'Please enter your name'
}
]
},
skills: {
identifier: 'skills',
rules: [
{
type: 'minCount[2]',
prompt: 'Please select at least two skills'
}
]
},
gender: {
identifier: 'gender',
rules: [
{
type: 'empty',
prompt: 'Please select a gender'
}
]
},
username: {
identifier: 'username',
rules: [
{
type: 'empty',
prompt: 'Please enter a username'
}
]
},
password: {
identifier: 'password',
rules: [
{
type: 'empty',
prompt: 'Please enter a password'
},
{
type: 'minLength[6]',
prompt: 'Your password must be at least {ruleValue} characters'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type: 'checked',
prompt: 'You must agree to the terms and conditions'
}
]
}
}
})
;
$('.ui.modal.standard').modal('attach events', '.modalTerms', 'show');
</script>
</body>
</html>