-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·179 lines (178 loc) · 9.52 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Malone</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="images/malone-icon-152.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Malone">
<meta name="msapplication-TileImage" content="images/malone-icon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<meta name="theme-color" content="#534d99" />
</head>
<body class="fullscreen">
<div class="tab-content">
<div class="container tab-pane active" id="home" role="tabpanel">
<div class="home-content" id="home-content">
</div>
</div>
<div class="container tab-pane" id="modules" role="tabpanel">
<h1>Modules</h1>
<div id="modules-content">
</div>
</div>
<div class="container tab-pane" id="faq" role="tabpanel">
<h1>Frequently Asked Questions</h1>
<div class="search-box mb-3 mt-3">
<input type="text" class="form-control" id="faq-search" placeholder="Search..." autocomplete="off">
<div id="faq-count" class="mt-2"></div>
</div>
<div class="faq-cards"></div>
</div>
<div class="container tab-pane" id="resources" role="tabpanel">
<h1>Resources</h1>
<div class="search-box mb-3 mt-3">
<input type="text" class="form-control" id="resource-search" placeholder="Search resources..." autocomplete="off">
<div id="resource-count" class="mt-2"></div>
</div>
<h2>Lincoln</h2>
<div class="resource-cards lincoln-resources"></div>
<h2>Omaha</h2>
<div class="resource-cards omaha-resources"></div>
</div>
<div class="container tab-pane" id="settings" role="tabpanel">
<h1>Settings</h3>
<div class="settings-controls">
<form id="settings-form">
<div class="mb-3">
<label for="expected-day" class="form-label">Enter your due date/your child's birth date:</label>
<input type="date" id="expected-day" class="form-control" name="expectedDay">
</div>
<div class="mb-3">
<span class="form-label">Are you the...?</span>
<div class="form-check">
<input class="form-check-input" type="radio" name="role" id="role-mother" value="Mother">
<label class="form-check-label" for="role-mother">
Mother
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="role" id="role-father-partner" value="Father/Partner">
<label class="form-check-label" for="role-father-partner">
Father/Partner
</label>
</div>
</div>
<div class="mb-3">
<span class="form-label">Check all topics you wish to receive information on:</span>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-social-support" name="communication" value="Social Support">
<label class="form-check-label" for="communication-social-support">
Social Support
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-physical-health" name="communication" value="Physical Health & Changes">
<label class="form-check-label" for="communication-physical-health">
Physical Health & Changes
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-mental-health" name="communication" value="Mental Health">
<label class="form-check-label" for="communication-mental-health">
Mental Health
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-nutrition" name="communication" value="Nutrition">
<label class="form-check-label" for="communication-nutrition">
Nutrition
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-mindfulness" name="communication" value="Mindfulness">
<label class="form-check-label" for="communication-mindfulness">
Mindfulness
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-sexual-health" name="communication" value="Sexual Health">
<label class="form-check-label" for="communication-sexual-health">
Sexual Health
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-exercise" name="communication" value="Exercise">
<label class="form-check-label" for="communication-exercise">
Exercise
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="communication-breastfeeding" name="communication" value="Breastfeeding">
<label class="form-check-label" for="communication-breastfeeding">
Breastfeeding
</label>
</div>
</div>
<div class="mb-3 form-check">
<span class="form-label">This is not medical advice.</span>
<input type="checkbox" class="form-check-input" id="disclaimer-checkbox">
<label class="form-check-label" for="disclaimer-checkbox">The information, including but not limited to, text, graphics, images and other material contained on this website are for informational purposes only. No material on this site is intended to be a substitute for professional medical advice, diagnosis or treatment. Always seek the advice of your physician or other qualified health care provider with any questions you may have regarding a medical condition or treatment and before undertaking a new health care regimen, and never disregard professional medical advice or delay in seeking it because of something you have read on this website.</label>
</div>
<button type="submit" class="btn btn-primary">Save Settings</button>
</form>
</div>
</div>
</div>
<div id="week-navigation" class="week-navigation">
<button id="prevWeek" class="nav-item nav-link rounded-0 week-nav-button"><</button>
<span id="weekIndicator">Week 1</span>
<button id="nextWeek" class="nav-item nav-link rounded-0 week-nav-button">></button>
</div>
<div id="module-navigation" class="module-navigation">
<button id="backModule" class="nav-item nav-link rounded-0 module-nav-button">< Back</button>
<span id="moduleIndicator">Module</span>
</div>
<nav class="nav nav-pills nav-fill floatingTab">
<a class="nav-item nav-link rounded-0 active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" onclick="updateUrl('home')">
<span class="big-nav-icon fas fa-home icon"></span>
<span class="small-nav-label">Home</span>
</a>
<a class="nav-item nav-link rounded-0" id="modules-tab" data-bs-toggle="tab" href="#modules" role="tab" onclick="updateUrl('modules')">
<span class="big-nav-icon fas fa-cubes icon"></span>
<span class="small-nav-label">Modules</span>
</a>
<a class="nav-item nav-link rounded-0" id="faq-tab" data-bs-toggle="tab" href="#faq" role="tab" onclick="updateUrl('faq')">
<span class="big-nav-icon fas fa-question-circle icon"></span>
<span class="small-nav-label">FAQ</span>
</a>
<a class="nav-item nav-link rounded-0" id="resources-tab" data-bs-toggle="tab" href="#resources" role="tab" onclick="updateUrl('resources')">
<span class="big-nav-icon fas fa-book icon"></span>
<span class="small-nav-label">Resources</span>
</a>
<a class="nav-item nav-link rounded-0" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab" onclick="updateUrl('settings')">
<span class="big-nav-icon fas fa-cog icon"></span>
<span class="small-nav-label">Settings</span>
</a>
</nav>
<script src="js/main.js"></script>
<script>
function updateUrl(tab, module = '') {
let url = `?tab=${tab}`;
if (tab === 'modules' && module) {
url += `&module=${module}`;
}
window.history.pushState({}, '', url);
}
</script>
</body>
</html>