-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathform.html
More file actions
222 lines (203 loc) · 9.93 KB
/
form.html
File metadata and controls
222 lines (203 loc) · 9.93 KB
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<!-- Gotta make sure this is set so things look good on mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="icon" href="imgs/sh-square.png">
<link rel="apple-touch-icon" href="imgs/sh-square.png">
<meta name="msapplication-TileColor" content="#ff1f8c">
<meta name="theme-color" content="#ff1f8c">
<!--BEGIN Schema tags-->
<meta itemprop="name" content="ShellHacks">
<meta itemprop="description" content="A Miami-based hackathon run by FIU's UPE Chapter and open to all hackers, both local and abroad!">
<meta itemprop="image" content="https://cdn.discordapp.com/attachments/399554513767235587/551122355536003082/fullsizeoutput_19a3.jpeg">
<!--END Schema tags-->
<!--BEGIN Opengraph-->
<meta property="og:site_name" content="ShellHacks">
<meta property="og:url" content="https://shellhacks.net">
<meta property="og:description" content="ShellHacks, Florida International University's Fall Hackathon!">
<meta property="og:type" content="website">
<meta property="og:image" content="https://cdn.discordapp.com/attachments/399554513767235587/551122355536003082/fullsizeoutput_19a3.jpeg">
<meta property="og:image:width" content="auto">
<meta property="og:image:height" content="367">
<!--END Opengraph-->
<!--BEGIN Twitter Card-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@upefiu">
<meta name="twitter:title" content="ShellHacks">
<meta name="twitter:description" content="ShellHacks, Florida International University's Fall Hackathon!">
<meta name="twitter:image" content="https://cdn.discordapp.com/attachments/399554513767235587/551122355536003082/fullsizeoutput_19a3.jpeg">
<!--END Twitter Card-->
<!-- --- ADDITIONAL RESOURCES BELOW --- -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Select2 imports -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- EMOJI CSS -->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<!-- CSS Styles -->
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="./styles/form.css">
<link rel="stylesheet" href="./styles/main.css">
</head>
<body>
<!--Background & decoration objects-->
<div id="backgroundObjects">
<div id="shore">
<div id="wetsand">
<img id="wetsand3" class="decor" src="imgs/frontpage/wetsand3.svg">
<img id="wetsand2" class="decor" src="imgs/frontpage/wetsand2.svg">
<img id="wetsand1" class="decor" src="imgs/frontpage/wetsand1.svg">
</div>
<div id="surf">
<img id="surf3" class="decor" src="imgs/frontpage/surf3.svg">
<img id="surf2" class="decor" src="imgs/frontpage/surf2.svg">
<img id="surf1" class="decor" src="imgs/frontpage/surf1.svg">
</div>
</div>
</div>
<!--Background End-->
<!-- Main content -->
<div class="form-container" id="form-container">
<h1 class="brand"> <i class="em-svg em-beach_with_umbrella"></i> Pre-Registration<br /></h1>
<h3 class="details">Can't wait for ShellHacks? Pre-register to keep up with the wave! </h3>
<h3 id="errorMessage" style="display:none"><i class="em em-warning"></i>
<span id="error-text"></span>
</h3>
<form class="fade-in one" autocomplete="on" id="form">
<div class="txtInput">
<label>First Name<br /></label>
<input id="fname" placeholder="John" autocomplete="on" autofocus required>
</div>
<div class="txtInput">
<label>Last Name<br /></label>
<input id="lname" placeholder="Doe" autocomplete="on" required>
</div>
<div class="txtInput">
<label>School Email Address<br /></label>
<input id="email" type="email" placeholder="roary001@fiu.edu" autocomplete="on" required>
</div>
<div class="selectBox">
<label class="selectBoxLabel">Any workshops you would like to see?<br /></label>
<select class="selectpicker" id="workshop" name="states[]" multiple="multiple" data-placeholder="working!">
<option disabled>Select all that apply</option>
<option value="AL">Git</option>
<option value="WY">Unity</option>
<option value="AL">Machine Learning</option>
<option value="WY">ReactJS</option>
<option value="AL">UI/UX</option>
<option value="WY">HTML/CSS</option>
<option value="AL">Swift</option>
<option value="WY">JavaScript</option>
<option value="AL">Arduino</option>
<option value="WY">Unreal Engine</option>
<option value="AL">TypeScript</option>
<option value="WY">NodeJS</option>
<option value="AL">Android Development</option>
<option value="WY">GraphQL</option>
<option value="AL">React Native</option>
<option value="WY">Python</option>
<option value="AL">Flask</option>
<option value="WY">Raspberry Pi</option>
<option value="AL">Amazon Web Services</option>
<option value="WY">Microsoft Azure</option>
<option value="AL">Google Cloud Platform</option>
<option value="WY">Cybersecurity</option>
<option value="WY">Linux/Unix</option>
</select>
</div>
<div class="selectBox">
<label class="selectBoxLabel">What about hardware?<br /></label>
<select class="selectpicker" id="hardware" name="states[]" multiple="multiple">
<option disabled>Select all that apply</option>
<option value="AL">Matrix Creators</option>
<option value="WY">Matrix Voices</option>
<option value="AL">Arduinos</option>
<option value="WY">Raspberry Pi Model 3 B+</option>
<option value="WY">Raspberry Pi Zero</option>
<option value="AL">3-D Printer</option>
</select>
</div>
<div class="selectBox">
<label class="selectBoxLabel">Activities?<br /></label>
<select class="selectpicker" id="activity" name="states[]" multiple="multiple">
<option disabled>Select all that apply</option>
<option value="AL">Werewolf</option>
<option value="WY">Yoga</option>
<option value="WY">Paper Plane Competition</option>
<option value="WY">Scavenger Hunt</option>
<option value="AL">Carnival Fishing Game</option>
<option value="WY">Gaming Lounge</option>
<option value="AL">Super Smash Bros Tournament</option>
<option value="WY">Karaoke</option>
<option value="AL">Cup Stacking</option>
<option value="WY">4square / Box Ball</option>
<option value="AL">Soylent Pong</option>
<option value="WY">Mechanical Keyboard Meetup</option>
<option value="AL">Dominoes</option>
<option value="WY">Volleyball</option>
<option value="AL">Sand Castle Building Contest</option>
<option value="WY">Team Jeopardy</option>
<option value="WY">Midnight Campus Hike</option>
</select>
</div>
<div class="selectBox">
<label class="selectBoxLabel">And swag?<br /></label>
<select class="selectpicker" id="swag" name="states[]" multiple="multiple">
<option disabled>Select all that apply</option>
<option value="AL">Hats</option>
<option value="WY">Beanies</option>
<option value="AL">Socks</option>
<option value="WY">Water Bottles</option>
<option value="AL">Totebags</option>
<option value="WY">PopSockets</option>
<option value="AL">Sunglasses</option>
<option value="WY">Mugs</option>
<option value="AL">Keychains</option>
<option value="WY">Phone Wallets</option>
<option value="AL">USBs</option>
<option value="WY">Webcam Covers</option>
<option value="AL">Lanyards</option>
<option value="WY">Sleeping Masks</option>
<option value="AL">Earphones</option>
<option value="WY">Cards</option>
<option value="AL">Drink Cozies</option>
<option value="WY">Coasters</option>
<option value="AL">Shell Plushies</option>
<option value="WY">Power Banks</option>
<option value="WY">Pens</option>
<option value="WY">Blankets</option>
</select>
</div>
<div class="txtInput">
<label>Anything else you'd like to see?<br /></label>
<textarea id="message" autocomplete="on" placeholder="Drop those sweet ideas here!"></textarea>
</div>
<div class="bottomButtons">
<input class="submit" id="submit" type="button" value="Submit">
<input class="submit" id="cancel" type="button" value="Back">
</div>
</form>
</div>
<div id="success" style="display:none">
<h1 class="brand"><i class="em em-tada"></i> Success!<br /></h1>
<h3 class="details">The wave is coming, keep an eye out for our upcoming emails<br/><br/>
<span class="emojies">
<div class="successButton"><input onclick="location.href = 'index.html';" class="submit" id="cancel" type="button" value="Home"></div>
</span>
</h3>
<div class="socialMedia">
<img src="./imgs/frontpage/discord.svg" />
</div>
</div>
<!-- Main Content End -->
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase.js"></script>
<script src="js/form.js">
</script>
</body>
</html>