ScholarSearch/profile.html at master · angelachenn/ScholarSearch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!--
  Title: profile.html
  Structure of My Profile Page, which displays user's information, allowing edits
-->

<!DOCTYPE html>
<html>

<head>
  <link href="https://unpkg.com/vuesax@4.0.1-alpha.25/dist/vuesax.min.css" rel="stylesheet">
  <link href="profile.css" rel="stylesheet">
  <link href="index.html">
  <link href="aboutus.html">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ScholarSearch</title>
</head>

<body>
  <div id="app">
    <!--Navigation-->
    <nav>
      <vs-navbar
        id="navbar"
        v-model="active"
        fixed
        color="#add8e6"
        text-white
        square
        center-collapsed
      >

        <template #left>
          <p id="header-logo">
            ScholarSearch
          </p>
        </template>

        <div id="titles">
          <vs-navbar-item class="navtext" :active="active == 'Home'" onclick="document.location='./'">
            Home
          </vs-navbar-item>
          <vs-navbar-item class="navtext" :active="active == 'About Us'" onclick="document.location='./aboutus.html'">
            About Us
          </vs-navbar-item>
          <vs-navbar-item class="navtext" :active="active == 'Browse'" onclick="document.location='./browse.html'">
            Browse
          </vs-navbar-item>
          <vs-navbar-item class="navtext" :active="active == 'For You'" onclick="document.location='./foryou.html'">
            For You
          </vs-navbar-item>
        </div>

        <template #right>

          <!--Dropdown Avatar-->
          <div class="dropdown">
            <button class="avatar" @click="profileDropdown()">
              {{userInitial}}
            </button>
            <div id="myDropdown" class="dropdown-content">
              <a href="profile.html">Profile</a>
              <a href="bookmarks.html">My Bookmarks</a>
              <a @click="logout()" id="logout">Logout</a>
            </div>
          </div>

        </template>

      </vs-navbar>
    </nav>

    <!--Main Page-->
    <main>

      <!--Title-->
      <h1>
        Hello, {{user.name}}!
      </h1>
      <h2>
        Your Profile
      </h2>

      <!--Profile Information-->
      <div class="scholarships">
        <div class="scholarship-card">

          <!--Name-->
          <h3 id="name">
            Name:
          </h3>
          <vs-input
            id="email"
            v-model="value"
            class="input"
            shadow
            v-bind:placeholder="getUserName()"
            type="text"
          >
          </vs-input>

          <!--Email-->
          <h3>
            Email:
          </h3>
          <vs-input
            color="#add8e6"
            id="email"
            class="input"
            shadow
            disabled
            v-bind:placeholder="getUserEmail()"
            type="password"
          >
          </vs-input>

          <!--Password-->
          <h3>
            Password:
          </h3>
          <vs-input
            id="password"
            class="input"
            shadow
            disabled
            v-bind:placeholder="getUserPassword()"
            type="text"
          >
          </vs-input>

          <!--University-->
          <h3>
            Preferred University:
          </h3>
          <vs-select
            v-model="value3"
            v-bind:placeholder="value3"
            class="drop"
          >
            <vs-option label="Algoma University" value="Algoma University">
              Algoma University
            </vs-option>
            <vs-option label="Brock University" value="Brock University">
              Brock University
            </vs-option>
            <vs-option label="Carleton University" value="Carleton University">
              Carleton University
            </vs-option>
            <vs-option label="University of Guelph" value="University of Guelph">
              University of Guelph
            </vs-option>
            <vs-option label="University of Guelph-Humber" value="University of Guelph-Humber">
              University of Guelph-Humber
            </vs-option>
            <vs-option label="Université de Hearst" value="Université de Hearst">
              Université de Hearst
            </vs-option>
            <vs-option label="Lakehead University" value="Lakehead University">
              Lakehead University
            </vs-option>
            <vs-option label="Laurentian University" value="Laurentian University">
              Laurentian University
            </vs-option>
            <vs-option label="McMaster University" value="McMaster University">
              McMaster University
            </vs-option>
            <vs-option label="Nipissing University" value="Nipissing University">
              Nipissing University
            </vs-option>
            <vs-option label="OCAD University" value="OCAD University">
              OCAD University
            </vs-option>
            <vs-option label="Université de l'Ontario" value="Université de l'Ontario">
              Université de l'Ontario
            </vs-option>
            <vs-option label="Ontario Tech University" value="Ontario Tech University">
              Ontario Tech University
            </vs-option>
            <vs-option label="University of Ottawa" value="University of Ottawa">
              University of Ottawa
            </vs-option>
            <vs-option label="Saint Paul University" value="Saint Paul University">
              Saint Paul University
            </vs-option>
            <vs-option label="Queen's University" value="Queen's University">
              Queen's University
            </vs-option>
            <vs-option label="Royal Military College of Canada" value="Royal Military College of Canada">
              Royal Military College of Canada
            </vs-option>
            <vs-option label="Ryerson University" value="Ryerson University">
              Ryerson University
            </vs-option>
            <vs-option label="Toronto University" value="Toronto University">
              Toronto University
            </vs-option>
            <vs-option label="Trent University" value="Trent University">
              Trent University
            </vs-option>
            <vs-option label="Waterloo University" value="Waterloo University">
              Waterloo University
            </vs-option>
            <vs-option label="Conrad Gebrel University" value="Conrad Gebrel University">
              Conrad Gebrel University
            </vs-option>
            <vs-option label="Renison University" value="Renison University">
              Renison University
            </vs-option>
            <vs-option label="St Jerome's University" value="St Jerome's University">
              St Jerome's University
            </vs-option>
            <vs-option label="St Paul's University" value="St Paul's University">
              St Paul's University
            </vs-option>
            <vs-option label="Western University" value="Western University">
              Western University
            </vs-option>
            <vs-option label="Huron University" value="Huron University">
              Huron University
            </vs-option>
            <vs-option label="King's University" value="King's University">
              King's University
            </vs-option>
            <vs-option label="Wilfred Laurier University" value="Wilfred Laurier University">
              Wilfred Laurier University
            </vs-option>
            <vs-option label="University of Windsor" value="University of Windsor">
              University of Windsor
            </vs-option>
            <vs-option label="York University" value="York University">
              York University
            </vs-option>
          </vs-select>

          <!--Discipline-->
          <h3>
            Discipline:
          </h3>
          <vs-select
            v-model="value7"
            class="drop"
            v-bind:placeholder="value7"
          >
            <vs-option label="Animal, Plants, and Food Studies" value="Animal, Plants, and Food Studies">
              Animal, Plants, and Food Studies
            </vs-option>
            <vs-option label="Architecture" value="Architecture">
              Architecture
            </vs-option>
            <vs-option label="Arts and Design" value="Arts and Design">
              Arts and Design
            </vs-option>
            <vs-option label="Biology" value="Biology">
              Biology
            </vs-option>
            <vs-option label="Business" value="Business">
              Business
            </vs-option>
            <vs-option label="Computer Science" value="Computer Science">
              Computer Science
            </vs-option>
            <vs-option label="Cultures and Languages" value="Cultures and Languages">
              Cultures and Languages
            </vs-option>
            <vs-option label="Education" value="Education">
              Education
            </vs-option>
            <vs-option label="Engineering" value="Engineering">
              Engineering
            </vs-option>
            <vs-option label="Historical, Philosophical, and Religious Studies" value="Historical, Philosophical, and Religious Studies">
              Historical, Philosophical, and Religious Studies
            </vs-option>
            <vs-option label="Mass Communications" value="Mass Communications">
              Mass Communications
            </vs-option>
            <vs-option label="Mathematics" value="Mathematics">
              Mathematics
            </vs-option>
            <vs-option label="Medicine" value="Medicine">
              Medicine
            </vs-option>
            <vs-option label="Physical Sciences" value="Physical Sciences">
              Physical Sciences
            </vs-option>
            <vs-option label="Social Sciences" value="Social Sciences">
              Social Sciences
            </vs-option>
            <vs-option label="Technology" value="Technology">
              Technology
            </vs-option>
          </vs-select>
          <vs-button id="savechanges" @click=editProfile()>
            Save Changes
          </vs-button>
        </div>
      </div>

      <!--Extra Options-->
      <div id="outer">
        <div class="inner">
          <div id="bookmarking">
          <vs-button id="bookmarks" onclick="document.location='./bookmarks.html'">
          View My Bookmarks
          </vs-button>
          <button id="bookmark-counter">
            {{bookmarks.length}}
          </button>
          </div>
        </div>
        <div class="inner">
          <vs-button id="logout-button" @click="logout()">
            Logout
          </vs-button>
        </div>
      </div>
    </main>

    <!--Darkmode Switch-->
    <vs-switch
      v-model="themeSwitch"
      class="switch"
      color="#add8e6"
      @click="theme()"
    >
      <template #off>
        <i class="bx-bxs-moon"></i>
      </template>
      <template #on>
        <i class="bx-bxs-sun"></i>
      </template>
    </vs-switch>

    <!--Footer-->
    <footer>
      <img id="Footer-Logo" src="/assets/darkmodelogo.png" alt="ScholarSearch Logo">
      <button id="footer-home" class="footer-text" onclick="document.location='./'">
        Home
      </button>
      <button id="footer-about" class="footer-text" onclick="document.location='./aboutus.html'">
        About Us
      </button>
      <button id="footer-for" class="footer-text" onclick="document.location='./browse.html'">
        Browse
      </button>
      <button id="footer-profile" class="footer-text" onclick="document.location='./foryou.html'">
        For You
      </button>
      <button id="footer-bookmark" class="footer-text" onclick="document.location='./bookmarks.html'">
        Bookmarks
      </button>
    </footer>
  </div>

  <!--JavaScript Code that was unable to be configured in the .js files-->
  <script>

    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.avatar')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
  </script>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuesax@4.0.1-alpha.25/dist/vuesax.min.js"></script>
  <script src="profile.js"></script>

</body>

</html>