Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 14.3 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 data and searchbar js    
Porter Libby committed
33 
        <script src="public/js/searchBar.js"></script>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
34
Porter Libby's avatar
reformat head    
Porter Libby committed
35
36 
        <!-- LOCAL DATA -->
        <script src="public/data/data.js"></script>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
37
38
39 
    </head>

    <body>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
40 
        <!-- NAV BAR -->
Porter Libby's avatar
add some custom styles to bootstrap    
Porter Libby committed
41 
        <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
42 
            <a class="navbar-brand" href="https://earlham.edu/">
Porter Libby's avatar
fix more colors    
Porter Libby committed
43
44 
                <img height='35px' src='public/img/ec-logo.png'>
            </a>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59 
            <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
60
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
61
62
63
64
65
66
67
68
69
70 
                    <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
71
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
72
73
74
75
76
77
78
79
80
81
82
83
84 
                    <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 more colors    
Porter Libby committed
85 
                    <button 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
86
87
88 
                </form>
            </div>
        </nav>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
89
Porter Libby's avatar
fix icon size    
Porter Libby committed
90
91 
        <!-- MAIN CONTENT AREA (padded scrollable area) -->
        <div id='main-content'>
pelibby16's avatar
Revert "add data and searchbar js"    
pelibby16 committed
92 
            <!-- Block 1 -->
Porter Libby's avatar
fix icon size    
Porter Libby committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110 
            <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
111
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
112 
                </div>
Porter Libby's avatar
fix icon size    
Porter Libby committed
113
114
115
116
117
118
119
120 
                <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
121 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
122
Porter Libby's avatar
fix icon size    
Porter Libby committed
123 
            <!-- Block 1 -->
Dana Yao's avatar
add styles    
Dana Yao committed
124 
            <div class='block' id="block1">
Porter Libby's avatar
some more small stuff    
Porter Libby committed
125
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
126
127
128
129
130 
                <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
131 
                </div>
Porter Libby's avatar
conflicts    
Porter Libby committed
132 
                <script>
Porter Libby's avatar
some more small stuff    
Porter Libby committed
133 
                    var parent = document.getElementById('search_parent');
Porter Libby's avatar
start updating frame to match dana's blueprint    
Porter Libby committed
134
Porter Libby's avatar
conflicts    
Porter Libby committed
135 
                    create_searchbar(parent,'major_selection');
Porter Libby's avatar
fix keyboard    
Porter Libby committed
136
137 
                    if (('ontouchstart' in document.documentElement)){
                        $("#search_parent #searchbar").keyboard({
Porter Libby's avatar
conflicts    
Porter Libby committed
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160 
                            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
161 
                <iframe style='' width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
Dana Yao's avatar
add styles    
Dana Yao committed
162
163 
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
                picture-in-picture" allowfullscreen></iframe>
Porter Libby's avatar
fix icon size    
Porter Libby committed
164 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
165
Porter Libby's avatar
fix icon size    
Porter Libby committed
166 
            <!-- Block 2 -->
Dana Yao's avatar
add styles    
Dana Yao committed
167 
            <div class='block' id="block2">
Porter Libby's avatar
fix icon size    
Porter Libby committed
168
169
170 
                <span class='section-prompt'>2. Choose something that sounds fulfilling</span>
                <br>
                <div class='inner-nav'> <!-- Nav options for this block -->
Dana Yao's avatar
add styles    
Dana Yao committed
171 
                    <button type="button" class="btn btn-labeled btn-dark btn-research">
Porter Libby's avatar
fix icon size    
Porter Libby committed
172 
                        <span class="btn-label"><i class="fa fa-flask"></i></span><br>Research</button>
Dana Yao's avatar
add styles    
Dana Yao committed
173 
                    <button type="button" class="btn btn-labeled btn-dark btn-internship">
Porter Libby's avatar
fix icon size    
Porter Libby committed
174 
                        <span class="btn-label"><i class="fa fa-user-md"></i></span><br> Internship</button>
Dana Yao's avatar
add styles    
Dana Yao committed
175 
                    <button type="button" class="btn btn-labeled btn-dark btn-offcampus">
Porter Libby's avatar
fix icon size    
Porter Libby committed
176
177 
                        <span class="btn-label"><i class="fa fa-book"></i></span><br> Off-campus Study</button>
                </div>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
178 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
179
Porter Libby's avatar
fix icon size    
Porter Libby committed
180 
            <!-- Block 3 -->
Dana Yao's avatar
add styles    
Dana Yao committed
181 
            <div class='block' id="block3">
Porter Libby's avatar
fix icon size    
Porter Libby committed
182 
                <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
183
184
185
186
187
188 
                <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
189
Porter Libby's avatar
set up block 3    
Porter Libby committed
190
191 
                        <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
192
Porter Libby's avatar
set up block 3    
Porter Libby committed
193
194 
                        <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
195
Porter Libby's avatar
set up block 3    
Porter Libby committed
196
197 
                        <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
198
Porter Libby's avatar
set up block 3    
Porter Libby committed
199
200
201 
                        <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
202 
                </div>
Porter Libby's avatar
set up block 3    
Porter Libby committed
203
204
205
206
207
208
209
210 
                <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
211
Porter Libby's avatar
set up block 3    
Porter Libby committed
212
213
214
215
216
217
218
219
220 
                        <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
221 
                </div>
Porter Libby's avatar
fix icon size    
Porter Libby committed
222 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
223
Porter Libby's avatar
fix icon size    
Porter Libby committed
224 
            <!-- Block 4 -->
Dana Yao's avatar
add styles    
Dana Yao committed
225 
            <div class='block' id="block4">
Porter Libby's avatar
fix icon size    
Porter Libby committed
226
227
228 
                <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
229 
                    <button type="button" class="btn btn-labeled btn-dark btn-explore">
Porter Libby's avatar
fix icon size    
Porter Libby committed
230 
                        <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
231
232
233
234
235
236
237
238 
                </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
239
Dana Yao's avatar
add styles    
Dana Yao committed
240 
                    <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
241 
                        <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
242 
                </div>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
243 
            </div>
Porter Libby's avatar
add footer v1    
Porter Libby committed
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259 

            <!-- Footer Block -->
            <div class='block' id="footer">
                <div style='display:inline-block; width:65%; text-align: center; padding-left:100px'>
                    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>
                <div style="display: inline-block; width:30%; text-align: right; position: absolute;">
                    <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
260 
        </div>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
261
262 
    </body>
</html>