-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (138 loc) · 3.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-92RPHGQKXC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-92RPHGQKXC');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checklist Generator</title>
<style>
.button {
display: inline-block;
background-color: #ff6b6b;
color: white;
padding: 0px 20px;
border-radius: 20px;
font-size: 16px;
text-decoration: none;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #e04f4f;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: url('mountain.jpg') no-repeat center center fixed;
background-size: cover;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form_kiana {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
max-height: 100vh; /* Limit the maximum height of the form */
overflow: auto; /* Add a scrollbar if content overflows */
}
.form_kiana input[type="text"] {
padding: 10px;
width: 100%;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form_kiana button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form_kiana button:hover {
background-color: #0056b3;
}
#result {
text-align: left;
margin-top: 20px; /* Add some spacing between form and result */
}
</style>
</head>
<body>
<div class="container">
<div class="form_kiana">
<h2>What Should I pack?</h2>
<form id="questions">
<script src="script.js"></script>
<p>Is this an overnight trip?</p>
<select id="overnight">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>Are you going to rock climb?</p>
<select id="rock">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>Are you going to ice climb?</p>
<select id="ice">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>Are you going to cross glaciers?</p>
<select id="glacier">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>Do you have snow to cross?</p>
<select id="snow">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>Are you skiing?</p>
<select id="ski">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>Do you have deep snow on this trip?</p>
<select id="deep_snow">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>Are there wildlife on this trip?</p>
<select id="bear">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<p>What's your gender?</p>
<select id="gender">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="non-binary">Non Binary</option>
</select>
<p><button onclick="checkAnswer(event)">Let's Go!</button></p>
<!-- <input type="text" placeholder="Your Name">-->
<!-- <input type="text" placeholder="Email">-->
<!-- <textarea placeholder="Message"></textarea>-->
<!-- <button type="submit">Submit</button>-->
</form>
<p id="result" style="text-align: left;"></p>
<a href="feedback.html" class="button">Give Feedback!</a>
</div>
</div>
</body>
</html>