Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 14.9 KB
Newer Older
Porter Libby's avatar
add boilerplate    
Porter Libby committed
1
2
3
4
5
6
7
8
9
10
11 
<!doctype html>
<html class="no-js" lang="">
    <head>
        <title>EPIC Journey</title>

        <!-- META INFO -->
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CDN STYLES-->
Porter Libby's avatar
reformat head    
Porter Libby committed
12
13
14
15 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >
        <link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css">
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
16
Porter Libby's avatar
add boilerplate    
Porter Libby committed
17 
        <!-- CDN SCRIPTS -->
Porter Libby's avatar
reformat head    
Porter Libby committed
18
19
20 
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Porter Libby's avatar
add jq keyboard :D    
Porter Libby committed
21
22
23 
        <script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
        <script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
        <script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
24
Porter Libby's avatar
reformat head    
Porter Libby committed
25 
        <!-- LOCAL CSS -->
Porter Libby's avatar
add boilerplate    
Porter Libby committed
26 
        <link rel="apple-touch-icon" href="icon.png">
Porter Libby's avatar
add fonts, apply to body    
Porter Libby committed
27 
        <link rel="stylesheet" href="publiic/css/fonts.css">
Porter Libby's avatar
update keyboard events    
Porter Libby committed
28 
        <link rel="stylesheet" href="public/css/keyb.css">
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
29 
        <link rel="stylesheet" href="public/css/input.css">
Porter Libby's avatar
add boilerplate    
Porter Libby committed
30 
        <link rel="stylesheet" href="public/css/main.css">
Porter Libby's avatar
update keyboard events    
Porter Libby committed
31
Porter Libby's avatar
reformat head    
Porter Libby committed
32 
        <!-- LOCAL JS -->
Porter Libby's avatar
add framework + data    
Porter Libby committed
33 
        <script src="public/js/index.js"></script>
Porter Libby's avatar
add data and searchbar js    
Porter Libby committed
34 
        <script src="public/js/searchBar.js"></script>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
35
Porter Libby's avatar
reformat head    
Porter Libby committed
36
37 
        <!-- LOCAL DATA -->
        <script src="public/data/data.js"></script>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
38
39
40 
    </head>

    <body>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
41 
        <!-- NAV BAR -->
Porter Libby's avatar
add some custom styles to bootstrap    
Porter Libby committed
42 
        <nav class="navbar navbar-expand-lg navbar-dark navbar-ec justify-content-betweenu">
Porter Libby's avatar
add pointer to earlham.edu to logo    
Porter Libby committed
43 
            <a class="navbar-brand" href="https://earlham.edu/">
Porter Libby's avatar
fix more colors    
Porter Libby committed
44
45 
                <img height='35px' src='public/img/ec-logo.png'>
            </a>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            About
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
61
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
62
63
64
65
66
67
68
69
70
71 
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Your Journey
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
72
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
73
74
75
76
77
78
79
80
81
82
83
84
85 
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Resources
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
                <form id='search-bar' class="form-inline">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
Porter Libby's avatar
fix border on search btn    
Porter Libby committed
86 
                    <button style='border:none' class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
87
88
89 
                </form>
            </div>
        </nav>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
90
Porter Libby's avatar
fix icon size    
Porter Libby committed
91
92 
        <!-- MAIN CONTENT AREA (padded scrollable area) -->
        <div id='main-content'>
pelibby16's avatar
Revert "add data and searchbar js"    
pelibby16 committed
93 
            <!-- Block 1 -->
Porter Libby's avatar
fix icon size    
Porter Libby committed
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111 
            <div id="create-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#create-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#create-carousel" data-slide-to="1"></li>
                    <li data-target="#create-carousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner"> <!-- slides go here -->
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="public/img/ec-1.jpg" alt="First slide">
                    </div>

                    <div class="carousel-item">
                        <img class="d-block w-100" src="public/img/ec-2.jpg" alt="Second slide">
                    </div>

                    <div class="carousel-item">
                        <img class="d-block w-100" src="public/img/ec-3.jpg" alt="Third slide">
                    </div>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
112
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
113 
                </div>
Porter Libby's avatar
fix icon size    
Porter Libby committed
114
115
116
117
118
119
120
121 
                <a class="carousel-control-prev" href="#create-carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#create-carousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
122 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
123
Porter Libby's avatar
fix icon size    
Porter Libby committed
124 
            <!-- Block 1 -->
Dana Yao's avatar
add styles    
Dana Yao committed
125 
            <div class='block' id="block1">
Porter Libby's avatar
some more small stuff    
Porter Libby committed
126
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
127
128
129
130
131 
                <div style='position:absolute' id='search_parent' >
                    <span class='section-prompt'></br>1. What major are you interested in?</span>
                </div>
                <div style='position:absolute; left:30%; margin-top:200px;font-size:20px;'>
                    <span>Not sure? See <mark><a href='https://earlham.edu/academics/majors-minors/'>full list</a></mark></span>
Porter Libby's avatar
some more small stuff    
Porter Libby committed
132 
                </div>
Porter Libby's avatar
conflicts    
Porter Libby committed
133 
                <script>
Porter Libby's avatar
some more small stuff    
Porter Libby committed
134 
                    var parent = document.getElementById('search_parent');
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
135
Porter Libby's avatar
conflicts    
Porter Libby committed
136 
                    create_searchbar(parent,'major_selection');
Porter Libby's avatar
fix keyboard    
Porter Libby committed
137
138 
                    if (('ontouchstart' in document.documentElement)){
                        $("#search_parent #searchbar").keyboard({
Porter Libby's avatar
conflicts    
Porter Libby committed
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161 
                            usePreview: false,
                            autoAccept: true,
                            autoAcceptOnEsc: true,
                            keyBinding: 'mousedown touchstart',
                            accepted      : function(e, keyboard, el) {
                                var event = new Event('input', {
                                    bubbles: true,
                                    cancelable: true,
                                });

                                el.dispatchEvent(event);
                            },
                            change        : function(e, keyboard, el) {
                                var event = new Event('input', {
                                    bubbles: true,
                                    cancelable: true,
                                });

                                el.dispatchEvent(event);
                            }
                        }); // create virtual keyboard if touchscreen is detected
                    }
                </script>
Porter Libby's avatar
some more small stuff    
Porter Libby committed
162 
                <iframe style='' width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
Dana Yao's avatar
add styles    
Dana Yao committed
163
164 
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
                picture-in-picture" allowfullscreen></iframe>
Porter Libby's avatar
fix icon size    
Porter Libby committed
165 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
166
Porter Libby's avatar
fix icon size    
Porter Libby committed
167 
            <!-- Block 2 -->
Dana Yao's avatar
add styles    
Dana Yao committed
168 
            <div class='block' id="block2">
Porter Libby's avatar
add framework + data    
Porter Libby committed
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183 
                <div style='position:absolute;'>
                    <span class='section-prompt'>2. Pursue a passion project</span>
                    <form"> 
                        <input type="radio" id="1" name="gender" value="entrepreneurship_innovation" onchange="section_two(this.value)">
                        <label for="1">Center for Entrepreneurship & Innovation</label><br>

                        <input type="radio" id="2" name="gender" value="environmental_leadership" onchange="section_two(this.value)">
                        <label for="2">Center for Environmental Leadership</label><br>

                        <input type="radio" id="3" name="gender" value="global_health" onchange="section_two(this.value)">
                        <label for="3">Center for Global Health</label><br>

                        <input type="radio" id="4" name="gender" value="social_justice" onchange="section_two(this.value)">
                        <label for="4">Center for Social Justice</label>
                    </form>
Porter Libby's avatar
fix icon size    
Porter Libby committed
184 
                </div>
Porter Libby's avatar
fix video urls    
Porter Libby committed
185 
                <iframe id='block-2-frame' allow_embedding=true width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
Porter Libby's avatar
add framework + data    
Porter Libby committed
186
187 
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
                picture-in-picture" allowfullscreen></iframe>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
188 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
189
Porter Libby's avatar
fix icon size    
Porter Libby committed
190 
            <!-- Block 3 -->
Dana Yao's avatar
add styles    
Dana Yao committed
191 
            <div class='block' id="block3">
Porter Libby's avatar
fix icon size    
Porter Libby committed
192 
                <span class='section-prompt'>3. What would you like to do for fun?</span>
Porter Libby's avatar
set up block 3    
Porter Libby committed
193
194
195
196
197
198 
                <br>
                <div class='checklist-box'>
                    <span style='font-size:22px'>Campus Life</span><br>
                    <div style='text-align:left;'>
                        <input type="checkbox" id="campuslife1" name="campuslife1" value="campuslife1">
                        <label for="campuslife1"> option 1</label><br>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
199
Porter Libby's avatar
set up block 3    
Porter Libby committed
200
201 
                        <input type="checkbox" id="campuslife2" name="campuslife2" value="campuslife2">
                        <label for="campuslife2"> option 2</label><br>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
202
Porter Libby's avatar
set up block 3    
Porter Libby committed
203
204 
                        <input type="checkbox" id="campuslife3" name="campuslife3" value="campuslife3">
                        <label for="campuslife3"> option 3</label><br>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
205
Porter Libby's avatar
set up block 3    
Porter Libby committed
206
207 
                        <input type="checkbox" id="campuslife4" name="campuslife4" value="campuslife4">
                        <label for="campuslife4"> option 4</label><br>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
208
Porter Libby's avatar
set up block 3    
Porter Libby committed
209
210
211 
                        <input type="checkbox" id="campuslife5" name="campuslife5" value="campuslife5">
                        <label for="campuslife5"> option 5</label><br>
                    </div>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
212 
                </div>
Porter Libby's avatar
set up block 3    
Porter Libby committed
213
214
215
216
217
218
219
220 
                <div class='checklist-box'>
                    <span style='font-size:22px'>Student Activities</span><br>
                    <div style='text-align:left;'>
                        <input type="checkbox" id="studentactivity1" name="studentactivity1" value="studentactivity1">
                        <label for="studentactivity1"> option 1</label><br>

                        <input type="checkbox" id="studentactivity2" name="studentactivity2" value="studentactivity2">
                        <label for="studentactivity2"> option 2</label><br>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
221
Porter Libby's avatar
set up block 3    
Porter Libby committed
222
223
224
225
226
227
228
229
230 
                        <input type="checkbox" id="studentactivity3" name="studentactivity3" value="studentactivity3">
                        <label for="studentactivity3"> option 3</label><br>

                        <input type="checkbox" id="studentactivity4" name="studentactivity4" value="studentactivity4">
                        <label for="studentactivity4"> option 4</label><br>

                        <input type="checkbox" id="studentactivity5" name="studentactivity5" value="studentactivity5">
                        <label for="studentactivity5"> option 5</label><br>
                    </div>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
231 
                </div>
Porter Libby's avatar
fix icon size    
Porter Libby committed
232 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
233
Porter Libby's avatar
fix icon size    
Porter Libby committed
234 
            <!-- Block 4 -->
Dana Yao's avatar
add styles    
Dana Yao committed
235 
            <div class='block' id="block4">
Porter Libby's avatar
fix icon size    
Porter Libby committed
236
237
238 
                <span class='section-prompt'>4. What would you like to become?</span>
                <br>
                <div class='inner-nav'> <!-- Nav options for this block -->
Dana Yao's avatar
add styles    
Dana Yao committed
239 
                    <button type="button" class="btn btn-labeled btn-dark btn-explore">
Porter Libby's avatar
fix icon size    
Porter Libby committed
240 
                        <span class="btn-label"><i class="fa fa-globe"></i></span><br> Explore</button>
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
241
242
243
244
245
246
247
248 
                </div>
            </div>

            <!-- Block 5 -->
            <div class='block' id="block5">
                <span class='section-prompt'>4. What would you like to become?</span>
                <br>
                <div class='inner-nav'> <!-- Nav options for this block -->
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
249
Dana Yao's avatar
add styles    
Dana Yao committed
250 
                    <button type="button" class="btn btn-labeled btn-dark btn-finish">
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
251 
                        <span class="btn-label"><i class="fa fa-check"></i></span><br> Finish and see results!</button>
Porter Libby's avatar
fix icon size    
Porter Libby committed
252 
                </div>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
253 
            </div>
Porter Libby's avatar
add footer v1    
Porter Libby committed
254
255
256 

            <!-- Footer Block -->
            <div class='block' id="footer">
Porter Libby's avatar
fix spacing on social buttons    
Porter Libby committed
257 
                <div style='display:inline-block; text-align: center; margin-right: 350px;'>
Porter Libby's avatar
add footer v1    
Porter Libby committed
258
259
260
261 
                    Earlham College, an independent, residential college, aspires to provide the 
                    highest-quality undergraduate education in the liberal arts and sciences, 
                    shaped by the distinctive perspectives of the Religious Society of Friends (Quakers).
                </div>
Porter Libby's avatar
fix spacing on social buttons    
Porter Libby committed
262 
                <div style="display: inline-block; width:350px; text-align: right; position: absolute;right: 10px;">
Porter Libby's avatar
add footer v1    
Porter Libby committed
263
264
265
266
267
268
269 
                    <a href="#" class="social fa fa-facebook"></a>
                    <a href="#" class="social fa fa-twitter"></a>
                    <a href="#" class="social fa fa-youtube"></a>
                    <a href="#" class="social fa fa-instagram"></a>
                    <a href="#" class="social fa fa-rss"></a>
                </div>
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
270 
        </div>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
271
272 
    </body>
</html>