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
<template>
<v-app>
<v-app-bar app color="primary" elevation="1" hide-on-scroll>
<div style="color: #ffffff; font-size: 20px; font-weight: 400;">Youtube Auto Tagger</div>
<v-app-bar app color="#ffffff" elevation="1" hide-on-scroll>
<v-icon size="35" class="mr-1" color="grey700">mdi-youtube</v-icon>
<div style="color: #343a40; font-size: 20px; font-weight: 500;">Youtube Auto Tagger</div>
<v-spacer></v-spacer>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on" color="white" @click="clickInfo=true">
<v-btn icon v-on="on" color="grey700" @click="clickInfo=true">
<v-icon size="30">mdi-information</v-icon>
</v-btn>
</template>
......@@ -16,9 +17,9 @@
<v-card elevation="0" outlined class="pa-4">
<v-row justify="center" class="mx-0 mb-8 mt-2">
<v-icon color="lightblue">mdi-power-on</v-icon>
<div style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;">
Information of This Service
</div>
<div
style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;"
>Information of This Service</div>
<v-icon color="lightblue">mdi-power-on</v-icon>
</v-row>
<div>Used Opensource</div>
......@@ -33,9 +34,9 @@
<v-img src="./assets/logo.png"></v-img>
</v-avatar>
<a href="http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1">
<div style="margin-left: 4px; font-size: 16px; color: #5a5a5a; font-weight: 400">
Profit-Hunter
</div>
<div
style="margin-left: 4px; font-size: 16px; color: #5a5a5a; font-weight: 400"
>Profit-Hunter</div>
</a>
</v-row>
</v-footer>
......@@ -52,7 +53,13 @@ export default {
};
</script>
<style lang="scss">
a:hover {text-decoration: none;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
</style>
......
......@@ -66,10 +66,10 @@ export default {
<style scoped>
.filepond--item {
width: calc(50% - .5em);
width: calc(50% - 0.5em);
}
.filepond--panel-root {
background-color: transparent;
border: 2px solid #2c3340;
background-color: transparent;
border: 2px solid #2c3340;
}
</style>
......
......@@ -7,9 +7,9 @@ export default new Vuetify({
theme: {
themes: {
light: {
primary: '#7DC1E8',
secondary: '#FFCE67',
accent: '#ddeefc',
primary: '#343a40',
secondary: '#506980',
accent: '#505B80',
error: '#FF5252',
info: '#2196F3',
blue: '#173f5f',
......@@ -22,9 +22,9 @@ export default new Vuetify({
grey900: '#212529',
},
dark: {
primary: '#7DC1E8',
secondary: '#FFCE67',
accent: '#ddeefc',
primary: '#343a40',
secondary: '#506980',
accent: '#505B80',
error: '#FF5252',
info: '#2196F3',
blue: '#173f5f',
......
<template>
<v-sheet>
<v-layout justify-center>
<v-flex xs12 sm8 md6>
<v-row justify="center" class="mx-0 my-12">
<div style="text-align: center; font-size: 24px; font-weight: 400; color: #343a40;">
What is This Service?
</div>
<v-flex xs12 sm8 md6 lg4>
<v-row justify="center" class="mx-0 mt-12">
<div style="font-size: 34px; font-weight: 500; color: #343a40;">WELCOME</div>
</v-row>
<v-card elevation="0">
<!-- file upload -->
<div style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;">
Just Upload your Video!
</div>
<div class="mx-10 mb-12 mt-6">
<video-upload />
</div>
<div style="text-align: center; font-size: 18px; font-weight: 400; color: #343a40;">
If the Video is analyzed successfully,
</div>
<div style="text-align: center; font-size: 20px; font-weight: 400; color: #343a40;">
Then, Result Show up below!
</div>
<v-card outlined class="pa-2 mx-10 mt-8" elevation="0" min-height="67">
<v-row justify="center" class="mx-0 mt-12" v-if="$vuetify.breakpoint.mdAndUp">
<v-flex md7 class="mt-1">
<div
style="font-size: 20px; font-weight: 300; color: #888;"
>This is Video auto tagging Service</div>
<div
style="font-size: 20px; font-weight: 300; color: #888;"
>Designed for Youtube Videos</div>
<div
style="font-size: 20px; font-weight: 300; color: #888;"
>It takes few minutes to analyze your Video!</div>
</v-flex>
<v-flex md5>
<v-card width="240" elevation="0" class="ml-5">
<v-img width="240" src="../assets/youtubelogoBlack.png"></v-img>
</v-card>
</v-flex>
</v-row>
<v-card elevation="0" class="mt-8" v-else>
<div
style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
>This is Video auto tagging Service</div>
<div
style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
>Designed for Youtube Videos</div>
<div
style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
>It takes few minutes to analyze your Video!</div>
<v-img
style="margin: auto; margin-top: 20px"
width="180"
src="../assets/youtubelogoBlack.png"
></v-img>
</v-card>
<div
class="mt-10"
style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;"
>How To start this service</div>
<div
style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
>Just Upload your Video</div>
<v-row justify="center" class="mx-0 mt-2">
<v-flex xs12 md8>
<div class="mx-8">
<video-upload />
</div>
</v-flex>
</v-row>
<div
style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;"
class="mt-10"
>The Results of Analyzed Video</div>
<v-card outlined class="pa-2 mx-5 mt-6" elevation="0" min-height="67">
<div
style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 110px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
>Generated Tags</div>
<v-chip-group column>
<v-chip
color="secondary"
v-for="(tag, index) in generatedTag"
:key="index"
>
{{ tag }}
</v-chip>
<v-chip color="secondary" v-for="(tag, index) in generatedTag" :key="index">{{ tag }}</v-chip>
</v-chip-group>
</v-card>
<v-card outlined class="pa-2 mx-10 mt-8" elevation="0" min-height="67">
<v-card outlined class="pa-2 mx-5 mt-8" elevation="0" min-height="67">
<div
style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 140px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
>Related Youtube Link</div>
......@@ -45,6 +79,14 @@
</div>
</v-flex>
</v-card>
<div
class="mt-3"
style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
>If the Video is analyzed successfully,</div>
<div
class="mb-5"
style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
>Result Show up in each of Boxes!</div>
</v-card>
</v-flex>
</v-layout>
......@@ -69,18 +111,12 @@ export default {
};
},
created() {
this.YoutubeUrl = [
];
this.generatedTag = [
];
this.YoutubeUrl = [];
this.generatedTag = [];
},
methods: {
loadVideoInfo() {
},
loadVideoInfo() {},
},
};
</script>
......