Complete prototype

app/notifications.html

@@ -67,21 +67,15 @@
           </div>
         </nav>
       </div>
+    </header>
 
-      <div class="media-background-container">
-        <img class="media-background object-fit-cover" src="../img/ucf-downtown.jpg" alt="">
-        <div class="row banner-bottom">
-          <div class="col col-4"><img src="../img/TheTab_sm.png" alt="" class="banner-logo"></div>
-          <div class="col col-8">
-              <h1 class="banner-title">Amanda</h1>
-              <h5 class="banner-subtitle">UCF Downtown</h5>
-          </div>
+    <div class="container no-image-padding">
+      <div class="row">
+        <div class="col">
+          <h2 class="text-center">Notifications</h2>
         </div>
       </div>
-    </header>
-
-    <div class="container">
-        <div class="row pt-3">
+        <div class="row">
           <div class="col col-12 text-center">
             <div class="btn-group filter-button-group" role="group" aria-label="Notification Sort" id="notification-sort">
               <button type="button" class="btn btn-default notification-sort" data-filter=".unread">Unread</button>
@@ -91,7 +85,7 @@ <h5 class="banner-subtitle">UCF Downtown</h5>
           </div>
         </div>
 
-        <div class="row pt-2">
+        <div class="row pt-4">
           <div class="col col-12">
             <div class="list-group" id="notification-list" data-isotope='{ "itemSelector": ".list-group-item"}'>
 

app/preferences.html

@@ -26,7 +26,7 @@
           <div class="col col-3">
             <ul class="nav">
               <li class="nav-item p-0">
-                <a class="nav-link" href="#">
+                <a class="nav-link" href="notifications.html">
                   <i class="fas fa-bell fa-lg"></i>
                 </a>
               </li>

app/profile.html

@@ -67,21 +67,26 @@
           </div>
         </nav>
       </div>
+    </header>
 
-      <div class="media-background-container">
-        <img class="media-background object-fit-cover" src="../img/ucf-downtown.jpg" alt="">
-        <div class="row banner-bottom">
-          <div class="col col-4"><img src="../img/TheTab_sm.png" alt="" class="banner-logo"></div>
-          <div class="col col-8">
-              <h1 class="banner-title">Amanda</h1>
-              <h5 class="banner-subtitle">UCF Downtown</h5>
-          </div>
+    <div class="container no-image-padding">
+      <div class="row">
+        <div class="col">
+          <h1 class="heading-underline">Profile</h1>
+          <h4>Name</h4>
+          <p>Amanda Bynes</p>
+          <h4>Major</h4>
+          <p>Digital Media Track – 2018 Catalog</p>
+          <h4>College</h4>
+          <p>College of Sciences</p>
+          <h4>Phone Number</h4>
+          <p>(307) 321-543 <a href="https://my.ucf.edu" target="_blank"><i class="fas fa-edit float-right"></i></a></p>
+          <h4>Email</h4>
+          <p>amandabynes@knights.ucf.edu <a href="https://my.ucf.edu" target="_blank"><i class="fas fa-edit float-right"></i></a></p>
+          <hr>
+          <a href="preferences.html" class="btn btn-primary">Edit Preferences</a>
         </div>
       </div>
-    </header>
-
-    <div class="container">
-
     </div>
 
     <footer>

app/reset.html

@@ -38,6 +38,26 @@
       <div class="row pt-5">
         <div class="col">
             <h1 class="heading-underline">Reset Password</h1>
+            <form class="pt-5" action="login.html">
+              <div class="form-group">
+                <label for="resetEmail">Account Email</label>
+                <input type="email" class="form-control" id="resetEmail" aria-describedby="resetHelp" placeholder="Enter Email">
+                <small id="resetHelp" class="form-text text-muted">Instructions to reset your password will be emailed to you if you have a valid account.</small>
+
+                <label for="resetCaptcha" class="pt-4">Enter Captcha</label>
+                <small id="resetCaptchaHelp" class="form-text text-muted">Enter the characters you see or hear.</small>
+                <div class="pt-2 pb-2">
+                  <img src="../img/captcha.jpg" alt="Captcha">
+                  <a href="#"><i class="fas fa-volume-up"></i></a>
+                </div>
+                <input type="text" class="form-control" id="resetCaptcha" aria-describedby="resetCaptchaHelp" placeholder="Enter Captcha">
+              </div>
+
+              <div class="form-group pt-4">
+                <button type="submit" class="btn btn-primary">Reset Password</button>
+                <a href="login.html" class="btn btn-link btn-sm">Cancel</a>
+              </div>
+            </form>
           </div>
       </div>
     </div>

app/transportion.html

@@ -105,7 +105,7 @@ <h5 class="mb-0">
               </div>
               <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
                 <div class="card-block">
-                  <iframe frameborder="0" src="https://map.ucf.edu/widget?title=UCF%20Downtown&width=428&height=428&building_id=downtown&zoom=15" style="border:none;width:100%;height:428px;" width="100%"><a style="display:block;color:#000;font-weight:bold;font-size:16px;" href="https://map.ucf.edu?show=0">Downtown</a></iframe>
+                  <iframe frameborder="0" src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d224257.42932298678!2d-81.42883800554873!3d28.569092076012975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x88e7685d6a0a495f%3A0x5fd59b92b3c79bab!2sUniversity%20of%20Central%20Florida%2C%204000%20Central%20Florida%20Blvd%2C%20Orlando%2C%20FL%2032816%2C%20USA!3m2!1d28.6024274!2d-81.2000599!4m5!1s0x88e77afe6d16cb3d%3A0x1c1a472c2c1a14ab!2sUCF%20Downtown%2C%20500%20W%20Livingston%20St%2C%20Orlando%2C%20FL%2032801!3m2!1d28.5465336!2d-81.3862951!5e0!3m2!1sen!2sus!4v1636953788140!5m2!1sen!2sus" style="border:none;width:100%;height:428px;" width="100%"><a style="display:block;color:#000;font-weight:bold;font-size:16px;" href="https://map.ucf.edu?show=0">Downtown</a></iframe>
                 </div>
               </div>
             </div>

css/mockup.scss

@@ -59,4 +59,19 @@ footer {
 
 .container {
     background-color: #adadad;
-}
+}
+
+/* Media Queries */
+@media screen and (max-width: $breakpoint-mobile) {
+    .proto-wrapper {
+        transform: scale(0.75);
+        position: relative;
+        left: -10%;
+        top: -100px;
+    }
+
+    footer {
+        position: relative;
+        top: -150px;
+    }
+  }

css/variables.scss

@@ -6,4 +6,4 @@ $brightGold25: rgba(255,202,6,0.25);
 $darkModeBackground: #000000;
 $darkModeText: #ffffff;
 
-$breakpoint-mobile: 1000px;
+$breakpoint-mobile: 600px;

index.html

@@ -35,7 +35,7 @@
   <footer class="pt-5">
     <div class="row">
       <div class="col text-center">
-        <a class="btn btn-primary" href="https://github.com/mikojimnz/DIG4104C" target="_blank" role="button"><i class="fab fa-github fa-2x"></i> View Source</a>
+        <a class="btn btn-primary" href="https://github.com/mikojimnz/DIG4104C" target="_blank" role="button"><i class="fab fa-github"></i> View Source</a>
       </div>
     </div>
   </footer>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dig4104c",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "UCF Mobile App Prototype",
   "main": "index.html",
   "scripts": {

scripts/mockup.js

@@ -1,6 +1,4 @@
-
 /* Show/Hide mobile alert banner */
-
 $(window).on('resize', function(){
     var win = $(this);
     if (win.width() < 768) { 
@@ -14,4 +12,5 @@ $(window).on('resize', function(){
 
 window.dispatchEvent(new Event('resize'));
 
-gsap.fromTo(".proto-wrapper", {opacity: 0, y: 100}, {opacity: 1, y: 0, duration: 1.5});
+gsap.fromTo(".proto-wrapper", {opacity: 0, y: 100}, {opacity: 1, y: 0, duration: 1.5});
+gsap.fromTo("footer", {opacity: 0, y: 100}, {opacity: 1, y: 0, duration: 1.5, delay: 1.5});