-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
138 lines (131 loc) · 6.39 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
<!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 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="name@example.com">
<button type="button" name="button" id="camperSubmit">Email my list!</button>
</form>
</div>
</div>
<!-- <div class="form-group">
<form id="camperForm">
<output id="camperSubmissions" class="hidden">
You have shared your list with these campers!
</output>
<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="name@example.com">
<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>
</body>
</html>