css stuff done?

Rishab · Sep 8, 2019 · 45c7863 · 45c7863
1 parent fc29b23
commit 45c7863
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 24 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
diff --git a/static/css/styles.css.map b/static/css/styles.css.map
diff --git a/static/css/styles.scss b/static/css/styles.scss
@@ -1,7 +1,8 @@
 /*General*/
 $primary-bg: #333;
 $highlight: #ff6c00;
-$text: #fff;
+$hover: #FF5300;
+$text: #ffffff;
 $ease: all .15s ease-in-out;
 $row-spacing: 5%;
 $mobile-spacing: 25px;
@@ -81,10 +82,49 @@ body {
 }
 
 
+.intro {
+  height: 100vh;
+
+  h1{
+    margin-top: 15vh;
+    font-size: 5em;
+    color: $highlight;
+  }
+
+  h2 {
+    margin-top: 3vh;
+    font-size: 2em;
+  }
+}
+
+
 .input {
-  min-height: 1000px;
+  margin-top: 20vh;
+  min-height: 50px;
+
+  h4 {
+    font-size: 1.5em;
+    margin-bottom: 2em;
+  }
+
+}
+
+.upload {
+  width: 600px;
+}
+
+.submit {
+  padding: 10px;
+  border-radius: 5px;
+  background-color: $highlight;
+  color: $text;
+
+  &:hover, &:active, &:focus {
+    background-color: $hover;
+  }
 }
 
+
 .spacer {
   height: 500px;
   width: 100%;
@@ -93,4 +133,29 @@ body {
 .video {
   width:832px;
   height:auto;
+  margin-left: 8vw;
+}
+
+.pills {
+  margin-left: 8vw;
+}
+
+.nav-link {
+  color: $highlight;
+
+  &:hover {
+    color: $text;
+  }
+}
+.active {
+  color: $text;
+  background-color: $highlight !important;
+}
+
+.tab-pane {
+  img{
+    width: 832px;
+    height: 400px;
+    margin-left: -8vw;
+  }
 }
diff --git a/static/js/custom-scripts.js b/static/js/custom-scripts.js
@@ -0,0 +1,8 @@
+function getFiles() {
+const testFolder = '../static/upload/';
+const fs = require('fs');
+
+fs.readdirSync(testFolder).forEach(file => {
+  console.log(file);
+});
+}
diff --git a/templates/index.html b/templates/index.html
@@ -16,30 +16,30 @@
 
   <!--Intro to Site Page-->
   <div class="container">
-    <div class="intro">
-      <h1>Intelliment</h1>
-      <h2>Positivity Driven Education</h2>
-    </div>
+    <div class="intro ">
+      <h1 class="row justify-content-center">Intelliment</h1>
+      <h2 class="row justify-content-center">Positivity Driven Education</h2>
+
     <div class="input">
-      <h4>Upload your video to get started!</h4>
+      <h4 class="row justify-content-center">Upload your video to get started!</h4>
 
       <!--Form to upload-->
-      <form method=post enctype=multipart/form-data>
-        <input type=file name=file>
-        <input type=submit value=Upload>
+      <form method=post enctype=multipart/form-data class="row justify-content-center">
+        <input type=file name=file class="upload">
+        <input type=submit value=Upload class="submit">
       </form>
-
     </div>
+  </div>
 
-    <div class="video d-flex justify-content-center">
+    <div class="video d-flex row justify-content-center">
       <!-- 16:9 aspect ratio -->
-      <div class="embed-responsive embed-responsive-16by9">
-        <iframe class="embed-responsive-item" src="./static/upload/test.mp4"></iframe>
+      <div class="embed-responsive embed-responsive-16by9" >
+        <iframe allowfullscreen class="embed-responsive-item" src="../static/upload/test.mp4"></iframe>
       </div>
     </div>
     <br>
     <!--Pill Tabs-->
-    <div>
+    <div class="pills">
       <div>
         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
           <li class="nav-item">
@@ -55,16 +55,16 @@ <h4>Upload your video to get started!</h4>
             <a class="nav-link" id="pills-four-tab" data-toggle="pill" href="#pills-four" role="tab" aria-controls="pills-four" aria-selected="false">Happy</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" id="pills-five-tab" data-toggle="pill" href="#pills-five" role="tab" aria-controls="pills-give" aria-selected="false">Sad</a>
+            <a class="nav-link" id="pills-five-tab" data-toggle="pill" href="#pills-five" role="tab" aria-controls="pills-five" aria-selected="false">Sad</a>
           </li>
         </ul>
       </div>
       <div class="tab-content d-flex justify-content-center" id="pills-tabContent">
-        <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab"><img src="./static/graphs/angry.png"></div>
-        <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab"><img src="./static/graphs/calm.png"></div>
-        <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab"><img src="./static/graphs/confused.png"></div>
-        <div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab"><img src="./static/graphs/happy.png"></div>
-        <div class="tab-pane fade" id="pills-five" role="tabpanel" aria-labelledby="pills-five-tab"><img src="./static/graphs/sad.png"></div>
+        <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab"><img src="../static/graphs/angry.png"></div>
+        <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab"><img src="../static/graphs/calm.png"></div>
+        <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab"><img src="../static/graphs/confused.png"></div>
+        <div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab"><img src="../static/graphs/happy.png"></div>
+        <div class="tab-pane fade" id="pills-five" role="tabpanel" aria-labelledby="pills-five-tab"><img src="../static/graphs/sad.png"></div>
       </div>
     </div>