forked from heatherzurek/wanderlist-camping
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (184 loc) · 8.33 KB
/
index.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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/objects.js"></script>
<script src="js/scripts.js"></script>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>WanderList | Get Packing</title>
</head>
<body>
<div class="bigImg-1">
<div class="bigImg-1-content">
<h1>WanderList</h1>
<h2>Get Packing</h2>
</div>
<div class="bigImg-login">
<div class="login-user hidden">
<button id="submitUser" class="btn btn-dark" type="button" name="button">Login</button>
</div>
<div class="login-new-user hidden">
<input id="newUserNameInput" type="text" name="newUserName" value="" placeholder="New User Name" required>
<button id="submitNewUser" class="btn btn-dark" type="button" name="button">Login New User</button>
</div>
<button id="loginUser" type="button" name="button" class="btn-light ">LogIn</button>
<button id="loginNewUser" type="button" name="button" class="btn-light">Sign Up</button>
</div>
</div>
<div class="box-1">
<h2>Build your camping list!</h2>
<p>Give Wanderlist some information about your trip, and we'll put together a list of gear for you to pack.</p>
<form id="lists">
<div class="form-group">
<label for="season">Season</label>
<select class="form-control" id="season" >
<option disabled selected value>-- What time of year is your trip? --</option>
<option value="winterList">Winter</option>
<option value="springList">Spring</option>
<option value="summerList">Summer</option>
<option value="fallList">Fall</option>
</select>
</div>
<div class="form-group">
<label for="terrain">Terrain Type</label>
<select class="form-control" id="terrain">
<option disabled selected value>-- What type of camping are you doing? --</option>
<option value="mountainList">Mountain</option>
<option value="desertList">Desert</option>
<option value="forestList">Forest</option>
<option value="riverList">River</option>
</select>
</div>
<div class="form-group">
<label for="listName">List Name</label>
<input type="name" class="form-control" id="listName" placeholder="Enter a name for your list">
</div>
<button type="button" class"btn" name="button" id="listMaker" data-target="#listModal" data-backdrop=false data-keyboard=false >Build New List!</button>
</form>
</div>
<div class="bigImg-2">
<h2 id="hideOnClick">Once you make your list, you can mark items as packed, add additional items, or delete them.</h2>
<div class="bigImg-2-content hidden">
<h3 id ="showTripName"></h3>
<output></output>
<!-- <div>
<span id="userPopList"></span>
</div> -->
<div class="addItemButton">
<li><input class="form-control form-control-sm" type="text" placeholder="Additional item" id="addPersonalItem"></li>
<li id="addItemButton"><button type="button" name="button" >Add New Item</button></li>
</div>
</div>
</div>
<div class="box-2">
<h2>Camping With Friends?</h2>
<p>Email them your packing list, or build one specifically for them!</p>
<div class="form-group">
<output id="camperSubmissions" class="hidden">
You have shared your list with these campers!
</output>
<form>
<label for="emailNameInput">Fellow Camper's Name</label>
<input type="text" class="form-control" id="emailNameInput" placeholder="Name">
<label for="emailAddressInput" id="emailAddressInputted">Email Address</label>
<input type="email" class="form-control" id="emailAddressInput" placeholder="[email protected]">
<button type="button" name="button" id="camperSubmit">Email my list!</button>
</form>
</div>
</div>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#listModal">
Launch demo modal
</button> -->
<!-- Modal -->
<div class="modal fade" id="listModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">This list should get you started. Uncheck the items you don't think you'll need and you'll be ready to start packing.</h5>
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button> -->
</div>
<div class="modal-body">
<output name="result"></output>
</div>
<div class="modal-footer">
<button id="modalGoBack"type="button" class="btn btn-secondary" data-dismiss="modal">Go Back</button>
<button id="selectedItemsSubmit" type="button" class="btn btn-primary">Save this list</button>
</div>
</div>
</div>
</div>
</div>
<!-- add "add items" form and button -->
<!-- have to add it into the correct div -->
<!-- <header>
<h1>WanderList</h1>
<h2>Build your list with us</h2>
<div class="header-buttons">
<button type="button" name="button" class="btn-light ">LogIn</button>
<button type="button" name="button" class="btn-light">Start new list</button>
</div>
<img src="img/campappbg.jpg" alt="Camping scene at night">
</header>
<section id="welcome">
</section>
<main>
<form id="lists">
<div class="form-group">
<label for="season">Season</label>
<select class="form-control" id="season" >
<option value="winterList">Winter</option>
<option value="springList">Spring</option>
<option value="summerList">Summer</option>
<option value="fallList">Fall</option>
</select>
</div>
<div class="form-group">
<label for="terrain">Terrain Type</label>
<select class="form-control" id="terrain">
<option value="mountainList">Mountain</option>
<option value="desertList">Desert</option>
<option value="forestList">Forest</option>
<option value="riverList">River</option>
</select>
</div>
<div class="form-group">
<label for="listName">List Name</label>
<input type="name" class="form-control" id="listName" placeholder="Enter a name for your list">
</div>
<button type="button" name="button" id="listMaker">Show Me My List!</button>
</form>
<div class="customList">
<form class="prePopLists">
<h4>Here is your WanderList!</h4>
<h5><span id="userListName"></span></h5>
<br>
<span id="userSeasonSelected"></span>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" name="prePopList" value="Item One">Item One<span id=""></span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" name="prePopList" value="Item Two"><span id="">Item Two</span>
</label>
</div>
<button type="button" name="button" id="selectedItemsList">Save My Lists</button>
</form>
</div>
add extra items form -->
<!-- <li><input class="form-control form-control-sm" type="text" placeholder="Additional item"></li> -->
<!-- <output>
</output> -->
<!-- </main> -->
</body>
</html>