Правки дизайна
This commit is contained in:
p.belezov
parent
e48a3c19ef
commit
92586b1143
|
|
@ -0,0 +1,66 @@
|
||||||
|
.bg-gradient {
|
||||||
|
background-color: rgba(101,0,94,1)!important;
|
||||||
|
background-size: 400% 400%!important;
|
||||||
|
height: 100vh!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 0%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0% 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
background: rgb(255 255 255 / 25%);
|
||||||
|
border-radius: 1000% 1000% 0 0;
|
||||||
|
position: fixed;
|
||||||
|
width: 200%;
|
||||||
|
height: 12em;
|
||||||
|
animation: wave 10s -3s linear infinite;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
opacity: 0.8;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave:nth-of-type(2) {
|
||||||
|
bottom: -1.25em;
|
||||||
|
animation: wave 18s linear reverse infinite;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave:nth-of-type(3) {
|
||||||
|
bottom: -2.5em;
|
||||||
|
animation: wave 20s -1s reverse infinite;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
2% {
|
||||||
|
transform: translateX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(-25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translateX(-25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,15 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card class="bg-gradient" style="height: 100%">
|
<v-card class="bg-gradient" style="height: 100%">
|
||||||
<v-card-text class="d-flex justify-center align-center">
|
<div class="wave"/>
|
||||||
<v-card class="align-center justify-center h-auto w-33">
|
<div class="wave"/>
|
||||||
|
<div class="wave"/>
|
||||||
|
<v-card-text class="d-flex justify-center align-center h-100">
|
||||||
|
<v-card class="bg-grey-darken-3 d-flex flex-column justify-center w-75" :class="isWide ? 'h-100' : 'h-auto'">
|
||||||
<v-card-title>Вставьте ссылку:</v-card-title>
|
<v-card-title>Вставьте ссылку:</v-card-title>
|
||||||
<v-card-text class="d-flex flex-column justify-center">
|
<v-card-text class="d-flex flex-column justify-center w-100 h-auto flex-grow-0">
|
||||||
<v-text-field v-model="url" label="Ссылка" :loading="fetching">
|
<v-text-field class="h-auto flex-grow-0" v-model="url" label="Ссылка" :loading="fetching"/>
|
||||||
</v-text-field>
|
<v-label v-if="error" class="text-red ml-5">{{ hint }}</v-label>
|
||||||
<v-label v-if="error" class="text-red">{{ hint }}</v-label>
|
<div class="d-flex align-center justify-center h-auto" :class="isWide ? '' : 'flex-column'">
|
||||||
<div class="d-flex align-center justify-center">
|
<v-btn class="mt-3 mb-3 mr-5 ml-5" :class="isWide ? '' : 'w-75'" variant="elevated" color="blue" @click="startDownload">Найти</v-btn>
|
||||||
<v-btn class="mr-5 ml-5" variant="elevated" color="blue" @click="startDownload">Найти</v-btn>
|
<v-btn v-if="downloadAvailable" :href="downloadLink" target="_blank" class="mt-3 mb-3 mr-5 ml-5" :class="isWide ? '' : 'w-75'" variant="elevated" color="blue">Скачать</v-btn>
|
||||||
<v-btn v-if="downloadAvailable" :href="downloadLink" target="_blank" class="mr-5 ml-5" variant="elevated" color="blue">Скачать</v-btn>
|
|
||||||
</div>
|
</div>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
@ -29,11 +31,15 @@ export default {
|
||||||
downloadAvailable: ref(false),
|
downloadAvailable: ref(false),
|
||||||
downloadLink: '',
|
downloadLink: '',
|
||||||
hint: ref(''),
|
hint: ref(''),
|
||||||
error: ref(false)
|
error: ref(false),
|
||||||
|
windowHeight: document.documentElement.clientHeight,
|
||||||
|
windowWidth: document.documentElement.clientWidth,
|
||||||
|
isWide: window.innerWidth >= 460
|
||||||
}),
|
}),
|
||||||
methods: {
|
methods: {
|
||||||
startDownload(){
|
startDownload(){
|
||||||
this.downloadAvailable = false;
|
this.downloadAvailable = false;
|
||||||
|
this.downloadAvailable = true; //TODO
|
||||||
this.error = false;
|
this.error = false;
|
||||||
this.fetching = true;
|
this.fetching = true;
|
||||||
axios.get(`/download_api?videourl=${this.url}`).then((responce)=>{
|
axios.get(`/download_api?videourl=${this.url}`).then((responce)=>{
|
||||||
|
|
@ -52,31 +58,23 @@ export default {
|
||||||
this.error = true;
|
this.error = true;
|
||||||
this.hint = 'Возникла ошибка';
|
this.hint = 'Возникла ошибка';
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
resizeEventHandler(e) {
|
||||||
|
this.windowHeight = document.documentElement.clientHeight;
|
||||||
|
this.windowWidth = document.documentElement.clientWidth;
|
||||||
|
this.isWide = this.windowWidth >= 460;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.addEventListener("resize", this.resizeEventHandler);
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.resizeEventHandler();
|
||||||
|
window.addEventListener("resize", this.resizeEventHandler, { passive: true });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.bg-gradient {
|
|
||||||
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
animation: gradient 15s ease infinite;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient {
|
|
||||||
0% {
|
|
||||||
background-position: 0 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue