Added UI to upload page and Link to upload page on home page (#46)

* Added the true first step

I mean how else are you suppose to fork it with your username if you do not even fork it?

* Added a much better UI to upload page

title

* Added link button to upload page

Added link to upload page on home page for GCI task.

* Add files via upload

* Update README.md

* made UI more clear

changed bottom button from upload to submit template

Author: aRealCyborg

src/assets/upload.svg

@@ -11,6 +11,8 @@
         <div>
           <v-btn @click="addOrganization">Add access to an Organization</v-btn>
         </div>
+        <div class="mt-5 orgs">Upload Template</div>
+        <v-btn @click="upload">Upload</v-btn>
       </div>
       <div v-if="isLoading">
         <img src="@/assets/loaders/block.svg" alt="loading..." />
@@ -39,6 +41,7 @@ export default {
     this.$store.dispatch("loadUserOrgs");
   },
   methods: {
+
     addOrganization() {
       window.open(
         "https://github.com/settings/connections/applications/" +
@@ -48,7 +51,10 @@ export default {
     },
     newBadge() {
       window.location.href = "#/newbadge";
-    }
+    },
+      upload() {
+      window.location.href = "#/upload";
+    },
   }
 };
 </script>

src/views/HomeView.vue

@@ -1,9 +1,91 @@
 <template>
   <div>
-      <form action="http://localhost:5000/api/upload" method="POST" enctype="multipart/form-data">
-        <input type="file" name="temp" id="temp">
-        <input name="tempname" placeholder="Give your template name">
-        <button type="submit">Upload</button>
-      </form>
+    <v-container>
+      <v-layout justify-center>
+        <img src="../assets/upload.svg">
+      </v-layout>
+    </v-container> 
+    <v-container>
+      <v-layout justify-center>
+        <form action="http://localhost:5000/api/upload" method="POST" enctype="multipart/form-data">
+          <textarea name="tempname" rows="1" cols="25" placeholder="Input your template name"/>
+            <v-container>
+              <v-layout justify-center>
+                <input type="file" style="display: none" name="temp" id="temp">
+                  <label for="temp" class="custom-file-upload button1">
+                    <i class="fas fa-cloud-upload"></i> Upload image
+                  </label>
+                </input>
+              </v-layout>
+            </v-container> 
+            <v-container>
+              <v-layout justify-center>
+                <button class="upload-button button1" type="submit" >Submit Template</button>
+              </v-layout>
+            </v-container>
+        </form>
+      </v-layout>
+    </v-container>
   </div>
-</template>
+</template>
+
+<style>
+.custom-file-upload {
+    border: none;
+    color: white;
+    text-align: center;
+    padding: 15px 27px;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 20px;;
+    background-color: #2c75fe;
+}
+.upload-button {
+  border: none;
+  color: white;
+  padding: 15px 15px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 20px;
+  background-color: #2c75fe;
+}
+
+.button1 {border-radius: 12px;}
+
+.button1:hover {
+  background-color: #0743b4;
+  color: white;
+}
+
+.uploadimage {
+ width: 100%;
+ background-image: "../assets/upload.svg";
+ background-size: cover;
+ height: 150;
+ padding: 150;
+ padding-bottom: calc;
+}
+
+textarea {
+  border: 1px solid #0743b4;
+}
+
+::-webkit-input-placeholder { /* Edge */
+  color: #0743b4;
+  font-size: 18px;
+  opacity: 1;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: #0743b4;
+  font-size: 18px;
+  opacity: 1;
+}
+
+::placeholder {
+  color: #0743b4;
+  font-size: 18px;
+  opacity: 1;
+}
+</style>