index.html 10.4 KB
Newer Older
Porter Libby's avatar
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
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
Porter Libby committed
16
            
Porter Libby's avatar
Porter Libby committed
17
        <!-- CDN SCRIPTS -->
Porter Libby's avatar
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
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
Porter Libby committed
24
        
Porter Libby's avatar
Porter Libby committed
25
        <!-- LOCAL CSS -->
Porter Libby's avatar
Porter Libby committed
26
        <link rel="apple-touch-icon" href="icon.png">
Porter Libby's avatar
Porter Libby committed
27
        <link rel="stylesheet" href="public/css/keyb.css">
Porter Libby's avatar
Porter Libby committed
28
        <link rel="stylesheet" href="public/css/main.css">
Porter Libby's avatar
Porter Libby committed
29
        
Porter Libby's avatar
Porter Libby committed
30
        <!-- LOCAL JS -->
Porter Libby's avatar
Porter Libby committed
31
        <script src="public/js/searchBar.js"></script>
Porter Libby's avatar
Porter Libby committed
32

Porter Libby's avatar
Porter Libby committed
33
34
        <!-- LOCAL DATA -->
        <script src="public/data/data.js"></script>
Porter Libby's avatar
Porter Libby committed
35
36
37
    </head>

    <body>
Porter Libby's avatar
Porter Libby committed
38
        <!-- NAV BAR -->
39
        <nav class="navbar navbar-expand-lg navbar-dark navbar-ec justify-content-betweenu">
Porter Libby's avatar
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
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
Porter Libby committed
58

Porter Libby's avatar
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
Porter Libby committed
69

Porter Libby's avatar
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
Porter Libby committed
83
                    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
Porter Libby's avatar
Porter Libby committed
84
85
86
                </form>
            </div>
        </nav>
Porter Libby's avatar
Porter Libby committed
87

Porter Libby's avatar
Porter Libby committed
88
89
        <!-- MAIN CONTENT AREA (padded scrollable area) -->
        <div id='main-content'>
pelibby16's avatar
pelibby16 committed
90
            <!-- Block 1 -->
Porter Libby's avatar
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
Porter Libby committed
109

Porter Libby's avatar
Porter Libby committed
110
                </div>
Porter Libby's avatar
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
Porter Libby committed
119
            </div>
Porter Libby's avatar
Porter Libby committed
120

Porter Libby's avatar
Porter Libby committed
121
            <!-- Block 1 -->
Dana Yao's avatar
Dana Yao committed
122
            <div class='block' id="block1">
Porter Libby's avatar
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
Porter Libby committed
127
                <script>
Porter Libby's avatar
Porter Libby committed
128
                    var parent = document.getElementById('search_parent');
Porter Libby's avatar
Porter Libby committed
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
                    create_searchbar(parent,'major_selection');
                    if (!('ontouchstart' in document.documentElement)){
                        $("#block-1 #searchbar").keyboard({
                            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
Porter Libby committed
155
                <iframe style='' width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM" 
Dana Yao's avatar
Dana Yao committed
156
157
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
                picture-in-picture" allowfullscreen></iframe>
Porter Libby's avatar
Porter Libby committed
158
            </div>
Porter Libby's avatar
Porter Libby committed
159

Porter Libby's avatar
Porter Libby committed
160
            <!-- Block 2 -->
Dana Yao's avatar
Dana Yao committed
161
            <div class='block' id="block2">
Porter Libby's avatar
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
Dana Yao committed
165
                    <button type="button" class="btn btn-labeled btn-dark btn-research">
Porter Libby's avatar
Porter Libby committed
166
                        <span class="btn-label"><i class="fa fa-flask"></i></span><br>Research</button>
Dana Yao's avatar
Dana Yao committed
167
                    <button type="button" class="btn btn-labeled btn-dark btn-internship">
Porter Libby's avatar
Porter Libby committed
168
                        <span class="btn-label"><i class="fa fa-user-md"></i></span><br> Internship</button>
Dana Yao's avatar
Dana Yao committed
169
                    <button type="button" class="btn btn-labeled btn-dark btn-offcampus">
Porter Libby's avatar
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
Porter Libby committed
172
            </div>
Porter Libby's avatar
Porter Libby committed
173

Porter Libby's avatar
Porter Libby committed
174
            <!-- Block 3 -->
Dana Yao's avatar
Dana Yao committed
175
            <div class='block' id="block3">
Porter Libby's avatar
Porter Libby committed
176
177
                <span class='section-prompt'>3. What would you like to do for fun?</span>
            </div>
Porter Libby's avatar
Porter Libby committed
178

Porter Libby's avatar
Porter Libby committed
179
            <!-- Block 4 -->
Dana Yao's avatar
Dana Yao committed
180
            <div class='block' id="block4">
Porter Libby's avatar
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
Dana Yao committed
184
                    <button type="button" class="btn btn-labeled btn-dark btn-explore">
Porter Libby's avatar
Porter Libby committed
185
                        <span class="btn-label"><i class="fa fa-globe"></i></span><br> Explore</button>
Porter Libby's avatar
Porter Libby committed
186

Dana Yao's avatar
Dana Yao committed
187
                    <button type="button" class="btn btn-labeled btn-dark btn-finish">
Porter Libby's avatar
Porter Libby committed
188
189
                        <span class="btn-label"><i class="fa fa-check"></i></span><br> Finish!</button>
                </div>
Porter Libby's avatar
Porter Libby committed
190
            </div>
Porter Libby's avatar
Porter Libby committed
191
        </div>
Porter Libby's avatar
Porter Libby committed
192
193
    </body>
</html>