Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 10.4 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
update keyboard events    
Porter Libby committed
27 
        <link rel="stylesheet" href="public/css/keyb.css">
Porter Libby's avatar
add boilerplate    
Porter Libby committed
28 
        <link rel="stylesheet" href="public/css/main.css">
Porter Libby's avatar
update keyboard events    
Porter Libby committed
29
Porter Libby's avatar
reformat head    
Porter Libby committed
30 
        <!-- LOCAL JS -->
Porter Libby's avatar
add data and searchbar js    
Porter Libby committed
31 
        <script src="public/js/searchBar.js"></script>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
32
Porter Libby's avatar
reformat head    
Porter Libby committed
33
34 
        <!-- LOCAL DATA -->
        <script src="public/data/data.js"></script>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
35
36
37 
    </head>

    <body>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
38 
        <!-- NAV BAR -->
Porter Libby's avatar
add some custom styles to bootstrap    
Porter Libby committed
39 
        <nav class="navbar navbar-expand-lg navbar-dark navbar-ec justify-content-betweenu">
Porter Libby's avatar
fix more colors    
Porter Libby committed
40
41
42 
            <a class="navbar-brand" href="#">
                <img height='35px' src='public/img/ec-logo.png'>
            </a>
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57 
            <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
58
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
59
60
61
62
63
64
65
66
67
68 
                    <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
69
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
70
71
72
73
74
75
76
77
78
79
80
81
82 
                    <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
83 
                    <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
84
85
86 
                </form>
            </div>
        </nav>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
87
Porter Libby's avatar
fix icon size    
Porter Libby committed
88
89 
        <!-- MAIN CONTENT AREA (padded scrollable area) -->
        <div id='main-content'>
pelibby16's avatar
Revert "add data and searchbar js"    
pelibby16 committed
90 
            <!-- Block 1 -->
Porter Libby's avatar
fix icon size    
Porter Libby committed
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108 
            <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
109
Porter Libby's avatar
add some basic stuff    
Porter Libby committed
110 
                </div>
Porter Libby's avatar
fix icon size    
Porter Libby committed
111
112
113
114
115
116
117
118 
                <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
119 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
120
Porter Libby's avatar
fix icon size    
Porter Libby committed
121 
            <!-- Block 1 -->
Dana Yao's avatar
add styles    
Dana Yao committed
122 
            <div class='block' id="block1">
Porter Libby's avatar
some more small stuff    
Porter Libby committed
123
124
125
126 
                
                <div style='position:absolute' id='search_parent'>
                    <span class='section-prompt'>1. Type the name of a major you are interested in</span>
                </div>
Porter Libby's avatar
conflicts    
Porter Libby committed
127 
                <script>
Porter Libby's avatar
some more small stuff    
Porter Libby committed
128 
                    var parent = document.getElementById('search_parent');
Porter Libby's avatar
conflicts    
Porter Libby committed
129 
                    create_searchbar(parent,'major_selection');
Porter Libby's avatar
fix keyboard    
Porter Libby committed
130
131 
                    if (('ontouchstart' in document.documentElement)){
                        $("#search_parent #searchbar").keyboard({
Porter Libby's avatar
conflicts    
Porter Libby committed
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154 
                            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
155 
                <iframe style='' width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
Dana Yao's avatar
add styles    
Dana Yao committed
156
157 
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
                picture-in-picture" allowfullscreen></iframe>
Porter Libby's avatar
fix icon size    
Porter Libby committed
158 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
159
Porter Libby's avatar
fix icon size    
Porter Libby committed
160 
            <!-- Block 2 -->
Dana Yao's avatar
add styles    
Dana Yao committed
161 
            <div class='block' id="block2">
Porter Libby's avatar
fix icon size    
Porter Libby committed
162
163
164 
                <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
165 
                    <button type="button" class="btn btn-labeled btn-dark btn-research">
Porter Libby's avatar
fix icon size    
Porter Libby committed
166 
                        <span class="btn-label"><i class="fa fa-flask"></i></span><br>Research</button>
Dana Yao's avatar
add styles    
Dana Yao committed
167 
                    <button type="button" class="btn btn-labeled btn-dark btn-internship">
Porter Libby's avatar
fix icon size    
Porter Libby committed
168 
                        <span class="btn-label"><i class="fa fa-user-md"></i></span><br> Internship</button>
Dana Yao's avatar
add styles    
Dana Yao committed
169 
                    <button type="button" class="btn btn-labeled btn-dark btn-offcampus">
Porter Libby's avatar
fix icon size    
Porter Libby committed
170
171 
                        <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
172 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
173
Porter Libby's avatar
fix icon size    
Porter Libby committed
174 
            <!-- Block 3 -->
Dana Yao's avatar
add styles    
Dana Yao committed
175 
            <div class='block' id="block3">
Porter Libby's avatar
fix icon size    
Porter Libby committed
176
177 
                <span class='section-prompt'>3. What would you like to do for fun?</span>
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
178
Porter Libby's avatar
fix icon size    
Porter Libby committed
179 
            <!-- Block 4 -->
Dana Yao's avatar
add styles    
Dana Yao committed
180 
            <div class='block' id="block4">
Porter Libby's avatar
fix icon size    
Porter Libby committed
181
182
183 
                <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
184 
                    <button type="button" class="btn btn-labeled btn-dark btn-explore">
Porter Libby's avatar
fix icon size    
Porter Libby committed
185 
                        <span class="btn-label"><i class="fa fa-globe"></i></span><br> Explore</button>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
186
Dana Yao's avatar
add styles    
Dana Yao committed
187 
                    <button type="button" class="btn btn-labeled btn-dark btn-finish">
Porter Libby's avatar
fix icon size    
Porter Libby committed
188
189 
                        <span class="btn-label"><i class="fa fa-check"></i></span><br> Finish!</button>
                </div>
Porter Libby's avatar
fix buttons, add comments    
Porter Libby committed
190 
            </div>
Porter Libby's avatar
add some more basic stuff    
Porter Libby committed
191 
        </div>
Porter Libby's avatar
add boilerplate    
Porter Libby committed
192
193 
    </body>
</html>