2020-1-capstone-design1 / PKH_Project1

Go to a project
Toggle navigation Toggle navigation pinning
Yoonjunhyeon
b368c2ed 1 parent 2b2d4aa9

new website design applied

Inline Side-by-side
Showing 6 changed files with 99 additions and 56 deletions
1 <template> 1 <template>
2 <v-app> 2 <v-app>
3 - <v-app-bar app color="primary" elevation="1" hide-on-scroll> 3 + <v-app-bar app color="#ffffff" elevation="1" hide-on-scroll>
4 - <div style="color: #ffffff; font-size: 20px; font-weight: 400;">Youtube Auto Tagger</div> 4 + <v-icon size="35" class="mr-1" color="grey700">mdi-youtube</v-icon>
5 + <div style="color: #343a40; font-size: 20px; font-weight: 500;">Youtube Auto Tagger</div>
5 <v-spacer></v-spacer> 6 <v-spacer></v-spacer>
6 <v-tooltip bottom> 7 <v-tooltip bottom>
7 <template v-slot:activator="{ on }"> 8 <template v-slot:activator="{ on }">
8 - <v-btn icon v-on="on" color="white" @click="clickInfo=true"> 9 + <v-btn icon v-on="on" color="grey700" @click="clickInfo=true">
9 <v-icon size="30">mdi-information</v-icon> 10 <v-icon size="30">mdi-information</v-icon>
10 </v-btn> 11 </v-btn>
11 </template> 12 </template>
...@@ -16,9 +17,9 @@ ...@@ -16,9 +17,9 @@
16 <v-card elevation="0" outlined class="pa-4"> 17 <v-card elevation="0" outlined class="pa-4">
17 <v-row justify="center" class="mx-0 mb-8 mt-2"> 18 <v-row justify="center" class="mx-0 mb-8 mt-2">
18 <v-icon color="lightblue">mdi-power-on</v-icon> 19 <v-icon color="lightblue">mdi-power-on</v-icon>
19 - <div style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;"> 20 + <div
20 - Information of This Service 21 + style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;"
21 - </div> 22 + >Information of This Service</div>
22 <v-icon color="lightblue">mdi-power-on</v-icon> 23 <v-icon color="lightblue">mdi-power-on</v-icon>
23 </v-row> 24 </v-row>
24 <div>Used Opensource</div> 25 <div>Used Opensource</div>
...@@ -33,9 +34,9 @@ ...@@ -33,9 +34,9 @@
33 <v-img src="./assets/logo.png"></v-img> 34 <v-img src="./assets/logo.png"></v-img>
34 </v-avatar> 35 </v-avatar>
35 <a href="http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1"> 36 <a href="http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1">
36 - <div style="margin-left: 4px; font-size: 16px; color: #5a5a5a; font-weight: 400"> 37 + <div
37 - Profit-Hunter 38 + style="margin-left: 4px; font-size: 16px; color: #5a5a5a; font-weight: 400"
38 - </div> 39 + >Profit-Hunter</div>
39 </a> 40 </a>
40 </v-row> 41 </v-row>
41 </v-footer> 42 </v-footer>
...@@ -52,7 +53,13 @@ export default { ...@@ -52,7 +53,13 @@ export default {
52 }; 53 };
53 </script> 54 </script>
54 <style lang="scss"> 55 <style lang="scss">
55 -a:hover {text-decoration: none;} 56 +a:hover {
56 -a:link {text-decoration: none;} 57 + text-decoration: none;
57 -a:visited {text-decoration: none;} 58 +}
59 +a:link {
60 + text-decoration: none;
61 +}
62 +a:visited {
63 + text-decoration: none;
64 +}
58 </style> 65 </style>
......
...@@ -66,10 +66,10 @@ export default { ...@@ -66,10 +66,10 @@ export default {
66 66
67 <style scoped> 67 <style scoped>
68 .filepond--item { 68 .filepond--item {
69 - width: calc(50% - .5em); 69 + width: calc(50% - 0.5em);
70 } 70 }
71 .filepond--panel-root { 71 .filepond--panel-root {
72 - background-color: transparent; 72 + background-color: transparent;
73 - border: 2px solid #2c3340; 73 + border: 2px solid #2c3340;
74 } 74 }
75 </style> 75 </style>
......
...@@ -7,9 +7,9 @@ export default new Vuetify({ ...@@ -7,9 +7,9 @@ export default new Vuetify({
7 theme: { 7 theme: {
8 themes: { 8 themes: {
9 light: { 9 light: {
10 - primary: '#7DC1E8', 10 + primary: '#343a40',
11 - secondary: '#FFCE67', 11 + secondary: '#506980',
12 - accent: '#ddeefc', 12 + accent: '#505B80',
13 error: '#FF5252', 13 error: '#FF5252',
14 info: '#2196F3', 14 info: '#2196F3',
15 blue: '#173f5f', 15 blue: '#173f5f',
...@@ -22,9 +22,9 @@ export default new Vuetify({ ...@@ -22,9 +22,9 @@ export default new Vuetify({
22 grey900: '#212529', 22 grey900: '#212529',
23 }, 23 },
24 dark: { 24 dark: {
25 - primary: '#7DC1E8', 25 + primary: '#343a40',
26 - secondary: '#FFCE67', 26 + secondary: '#506980',
27 - accent: '#ddeefc', 27 + accent: '#505B80',
28 error: '#FF5252', 28 error: '#FF5252',
29 info: '#2196F3', 29 info: '#2196F3',
30 blue: '#173f5f', 30 blue: '#173f5f',
......
1 <template> 1 <template>
2 <v-sheet> 2 <v-sheet>
3 <v-layout justify-center> 3 <v-layout justify-center>
4 - <v-flex xs12 sm8 md6> 4 + <v-flex xs12 sm8 md6 lg4>
5 - <v-row justify="center" class="mx-0 my-12"> 5 + <v-row justify="center" class="mx-0 mt-12">
6 - <div style="text-align: center; font-size: 24px; font-weight: 400; color: #343a40;"> 6 + <div style="font-size: 34px; font-weight: 500; color: #343a40;">WELCOME</div>
7 - What is This Service?
8 - </div>
9 </v-row> 7 </v-row>
10 <v-card elevation="0"> 8 <v-card elevation="0">
11 <!-- file upload --> 9 <!-- file upload -->
12 - <div style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;"> 10 + <v-row justify="center" class="mx-0 mt-12" v-if="$vuetify.breakpoint.mdAndUp">
13 - Just Upload your Video! 11 + <v-flex md7 class="mt-1">
14 - </div> 12 + <div
15 - <div class="mx-10 mb-12 mt-6"> 13 + style="font-size: 20px; font-weight: 300; color: #888;"
16 - <video-upload /> 14 + >This is Video auto tagging Service</div>
17 - </div> 15 + <div
18 - <div style="text-align: center; font-size: 18px; font-weight: 400; color: #343a40;"> 16 + style="font-size: 20px; font-weight: 300; color: #888;"
19 - If the Video is analyzed successfully, 17 + >Designed for Youtube Videos</div>
20 - </div> 18 + <div
21 - <div style="text-align: center; font-size: 20px; font-weight: 400; color: #343a40;"> 19 + style="font-size: 20px; font-weight: 300; color: #888;"
22 - Then, Result Show up below! 20 + >It takes few minutes to analyze your Video!</div>
23 - </div> 21 + </v-flex>
24 - <v-card outlined class="pa-2 mx-10 mt-8" elevation="0" min-height="67"> 22 + <v-flex md5>
23 + <v-card width="240" elevation="0" class="ml-5">
24 + <v-img width="240" src="../assets/youtubelogoBlack.png"></v-img>
25 + </v-card>
26 + </v-flex>
27 + </v-row>
28 + <v-card elevation="0" class="mt-8" v-else>
29 + <div
30 + style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
31 + >This is Video auto tagging Service</div>
32 + <div
33 + style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
34 + >Designed for Youtube Videos</div>
35 + <div
36 + style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
37 + >It takes few minutes to analyze your Video!</div>
38 + <v-img
39 + style="margin: auto; margin-top: 20px"
40 + width="180"
41 + src="../assets/youtubelogoBlack.png"
42 + ></v-img>
43 + </v-card>
44 +
45 + <div
46 + class="mt-10"
47 + style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;"
48 + >How To start this service</div>
49 + <div
50 + style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
51 + >Just Upload your Video</div>
52 + <v-row justify="center" class="mx-0 mt-2">
53 + <v-flex xs12 md8>
54 + <div class="mx-8">
55 + <video-upload />
56 + </div>
57 + </v-flex>
58 + </v-row>
59 +
60 + <div
61 + style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;"
62 + class="mt-10"
63 + >The Results of Analyzed Video</div>
64 + <v-card outlined class="pa-2 mx-5 mt-6" elevation="0" min-height="67">
25 <div 65 <div
26 style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 110px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500" 66 style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 110px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
27 >Generated Tags</div> 67 >Generated Tags</div>
28 <v-chip-group column> 68 <v-chip-group column>
29 - <v-chip 69 + <v-chip color="secondary" v-for="(tag, index) in generatedTag" :key="index">{{ tag }}</v-chip>
30 - color="secondary"
31 - v-for="(tag, index) in generatedTag"
32 - :key="index"
33 - >
34 - {{ tag }}
35 - </v-chip>
36 </v-chip-group> 70 </v-chip-group>
37 </v-card> 71 </v-card>
38 - <v-card outlined class="pa-2 mx-10 mt-8" elevation="0" min-height="67"> 72 + <v-card outlined class="pa-2 mx-5 mt-8" elevation="0" min-height="67">
39 <div 73 <div
40 style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 140px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500" 74 style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 140px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
41 >Related Youtube Link</div> 75 >Related Youtube Link</div>
...@@ -45,6 +79,14 @@ ...@@ -45,6 +79,14 @@
45 </div> 79 </div>
46 </v-flex> 80 </v-flex>
47 </v-card> 81 </v-card>
82 + <div
83 + class="mt-3"
84 + style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
85 + >If the Video is analyzed successfully,</div>
86 + <div
87 + class="mb-5"
88 + style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
89 + >Result Show up in each of Boxes!</div>
48 </v-card> 90 </v-card>
49 </v-flex> 91 </v-flex>
50 </v-layout> 92 </v-layout>
...@@ -69,18 +111,12 @@ export default { ...@@ -69,18 +111,12 @@ export default {
69 }; 111 };
70 }, 112 },
71 created() { 113 created() {
72 - this.YoutubeUrl = [ 114 + this.YoutubeUrl = [];
73 - 115 + this.generatedTag = [];
74 - ];
75 - this.generatedTag = [
76 -
77 - ];
78 }, 116 },
79 117
80 methods: { 118 methods: {
81 - loadVideoInfo() { 119 + loadVideoInfo() {},
82 -
83 - },
84 }, 120 },
85 }; 121 };
86 </script> 122 </script>
......