Create login page

mikojimnz · Oct 30, 2021 · 525fb2e · 525fb2e
1 parent 6346af5
commit 525fb2e
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 24 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/login.html b/app/login.html
@@ -9,15 +9,52 @@
   <meta name="description" content="UCF Mobile">
   <meta name="author" content="Group 3">
 
-  <link rel="stylesheet" href="../css/framework.min.css">
+  <link rel="stylesheet" href="https://cdn.ucf.edu/athena-framework/v1.1.0/css/framework.min.css">
   <link rel="stylesheet" href="../css/styles.css">
 
 </head>
 
 <body>
-    <div class="notch-padding"></div>
-    <div class="alert alert-warning" role="alert">
-        <strong>Test</strong> Please check that Athena framework is loading correctly. If you see this alert correctly then it is working.
+    <div class="container ">
+      <div class="row login-banner">
+
+        <div class="col col-12 login-banner-title-bar">
+          <h5 class="text-center text-uppercase login-banner-title">UCF Downtown</h5>
+        </div>
+        <div class="col col-12 media-background-container">
+          <img class="media-background object-fit-cover" src="../img/ucf-downtown.jpg" alt="">
+          <img src="../img/TheTab_sm.png" alt="" class="login-banner-logo">
+        </div>
+      </div>
+      <div class="row pt-5">
+        <div class="col">
+          <h1>Login</h1>
+          <form class="pt-5">
+            <div class="form-group">
+              <label for="loginUsername">UCF NID</label>
+              <input type="text" class="form-control" id="loginUsername" aria-describedby="usernameHelp" placeholder="Enter NID">
+              <small id="usernameHelp" class="form-text text-muted">Two letters and 6 numbers.</small>
+            </div>
+
+            <div class="form-group">
+              <label for="exampleInputPassword1">Password</label>
+              <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+            </div>
+
+            <div class="form-group">
+              <button type="submit" class="btn btn-primary">Login In</button>
+              <button type="button" class="btn btn-link btn-sm">Forgot Password</button>
+              <hr class="mt-4">
+              <button type="button" class="btn btn-inverse btn-sm">Skip Login</button>
+            </div>
+          </form>
+        </div>
+      </div>
     </div>
 </body>
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js" integrity="sha384-CPFFlrdhp9pDDCqRqdTKNZ5oAHsnfnvHGt0CsRIeL5Gc7V/OkP1Y4w8zTxlV3mat" crossorigin="anonymous"></script>
+<script src="https://cdn.ucf.edu/athena-framework/v1.1.0/js/framework.min.js"></script>
+
 </html>
diff --git a/css/mockup.css b/css/mockup.css
diff --git a/css/mockup.css.map b/css/mockup.css.map
diff --git a/css/mockup.scss b/css/mockup.scss
@@ -16,17 +16,10 @@ body {
     height: 971px;
 }
 
-@media (min-width: $breakpoint-mobile) {
-    .proto-wrapper {
-        margin-top: 5%;
-        width: 481px;
-    }
-}
-
 .proto-frame {
     width: 481px;
     height: 971px;
-    
+
     position: absolute;
     z-index: 999;
 
@@ -57,6 +50,13 @@ body {
     z-index: 1;
 }
 
+@media (min-width: $breakpoint-mobile) {
+    .proto-wrapper {
+        margin-top: 5%;
+        width: 481px;
+    }
+}
+
 /* Classes */
 
 .container {

diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/css/styles.scss b/css/styles.scss
@@ -4,4 +4,34 @@
     display: block;
     width: 428px;
     height: 35px;
+}
+
+.login-banner {
+    padding-top: 55px;
+    background-color: black;
+}
+
+.login-banner > .media-background-container {
+    height: 140px;
+}
+
+.media-background-container  > img:first-child {
+    filter: brightness(50%);
+}
+
+.login-banner-title-bar {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.login-banner-title {
+    color: white;
+}
+
+.login-banner-logo {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    height: 80px;
+    margin-top: 30px;
 }
diff --git a/img/TabLockup_horizontal_lg.png b/img/TabLockup_horizontal_lg.png
diff --git a/img/TabLockup_horizontal_sm.png b/img/TabLockup_horizontal_sm.png
diff --git a/img/TabLockup_vertical_lg.png b/img/TabLockup_vertical_lg.png
diff --git a/img/TabLockup_vertical_sm.png b/img/TabLockup_vertical_sm.png
diff --git a/img/TheTab_lg.png b/img/TheTab_lg.png
diff --git a/img/TheTab_sm.png b/img/TheTab_sm.png
diff --git a/img/ucf-downtown.jpg b/img/ucf-downtown.jpg
diff --git a/index.html b/index.html
@@ -9,16 +9,33 @@
   <meta name="description" content="UCF Mobile">
   <meta name="author" content="Group 3">
 
-  <link rel="stylesheet" href="node_modules/ucf-athena-framework/dist/css/framework.min.css">
+  <link rel="stylesheet" href="https://cdn.ucf.edu/athena-framework/v1.1.0/css/framework.min.css">
   <link rel="stylesheet" href="css/mockup.css">
 
 </head>
 
 <body>
-    <div class="proto-wrapper">
-      <img src="img/iPhone-12.png" alt="" class="proto-frame">
-      <div class="notch-padding"></div>
-      <iframe src="app/login.html" frameborder="0" class="proto-content"></iframe>
-    </div>
+  <!-- Mobile Redirect Banner --->
+  <div class="alert alert-info fade show" role="alert" id="mobile-alert">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+    <strong>On Mobile?</strong>
+    <br>
+    <a href="app/login.html" class="alert-link">Click Here</a> to switch to go full screen.
+  </div>
+
+  <!-- Prototype Wrapper -->
+  <div class="proto-wrapper">
+    <img src="img/iPhone-12.png" alt="" class="proto-frame">
+    <!-- <div class="notch-padding"></div> -->
+    <iframe src="app/login.html" frameborder="0" class="proto-content"></iframe>
+  </div>
 </body>
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js" integrity="sha384-CPFFlrdhp9pDDCqRqdTKNZ5oAHsnfnvHGt0CsRIeL5Gc7V/OkP1Y4w8zTxlV3mat" crossorigin="anonymous"></script>
+<script src="https://cdn.ucf.edu/athena-framework/v1.1.0/js/framework.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
+<script src="scripts/mockup.js"></script>
 </html>
diff --git a/scripts/mockup.js b/scripts/mockup.js
@@ -0,0 +1,10 @@
+
+/* Show/Hide mobile alert banner */
+$(window).on('resize', function(){
+    var win = $(this);
+    if (win.width() < 768) { 
+        $("#mobile-alert").addClass("show");
+    } else {
+        $("#mobile-alert").removeClass("show");
+    }
+});