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

Porter Libby's avatar
Porter Libby committed
31
<<<<<<< HEAD
Porter Libby's avatar
Porter Libby committed
32
        <!-- SCRIPT REFERENCES -->
Porter Libby's avatar
Porter Libby committed
33
=======
Porter Libby's avatar
Porter Libby committed
34
        <!-- LOCAL JS -->
Porter Libby's avatar
Porter Libby committed
35
        <script src="public/js/searchBar.js"></script>
Porter Libby's avatar
Porter Libby committed
36
>>>>>>> backend
Porter Libby's avatar
Porter Libby committed
37

Porter Libby's avatar
Porter Libby committed
38
39
        <!-- LOCAL DATA -->
        <script src="public/data/data.js"></script>
Porter Libby's avatar
Porter Libby committed
40
41
42
    </head>

    <body>
Porter Libby's avatar
Porter Libby committed
43
        <!-- NAV BAR -->
44
        <nav class="navbar navbar-expand-lg navbar-dark navbar-ec justify-content-betweenu">
Porter Libby's avatar
Porter Libby committed
45
46
47
            <a class="navbar-brand" href="#">
                <img height='35px' src='public/img/ec-logo.png'>
            </a>
Porter Libby's avatar
Porter Libby committed
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
            <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
63

Porter Libby's avatar
Porter Libby committed
64
65
66
67
68
69
70
71
72
73
                    <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
74

Porter Libby's avatar
Porter Libby committed
75
76
77
78
79
80
81
82
83
84
85
86
87
                    <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
88
                    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
Porter Libby's avatar
Porter Libby committed
89
90
91
                </form>
            </div>
        </nav>
Porter Libby's avatar
Porter Libby committed
92

Porter Libby's avatar
Porter Libby committed
93
94
        <!-- MAIN CONTENT AREA (padded scrollable area) -->
        <div id='main-content'>
pelibby16's avatar
pelibby16 committed
95
            <!-- Block 1 -->
Porter Libby's avatar
Porter Libby committed
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
            <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
114

Porter Libby's avatar
Porter Libby committed
115
                </div>
Porter Libby's avatar
Porter Libby committed
116
117
118
119
120
121
122
123
                <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
124
            </div>
Porter Libby's avatar
Porter Libby committed
125

Porter Libby's avatar
Porter Libby committed
126
            <!-- Block 1 -->
Dana Yao's avatar
Dana Yao committed
127
            <div class='block' id="block1">
Porter Libby's avatar
Porter Libby committed
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
                <span class='section-prompt'>1. Type the name of a major you are interested in</span>

                <script>
                    var parent = document.getElementById('block-1');
                    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>
Dana Yao's avatar
Dana Yao committed
158
159
160
161
                <span class='section-prompt'>1. Type the name of a major you are interested in:</span>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM" 
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
                picture-in-picture" allowfullscreen></iframe>
Porter Libby's avatar
Porter Libby committed
162
            </div>
Porter Libby's avatar
Porter Libby committed
163

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

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

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

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