Правки дизайна

resources/css/app.css

@@ -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);
+    }
+}
+

resources/views/Main.vue

@@ -1,15 +1,17 @@
 <template>
     <v-card class="bg-gradient" style="height: 100%">
-        <v-card-text class="d-flex justify-center align-center">
-            <v-card class="align-center justify-center h-auto w-33">
+        <div class="wave"/>
+        <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-text class="d-flex flex-column justify-center">
-                    <v-text-field v-model="url" label="Ссылка" :loading="fetching">
-                    </v-text-field>
-                    <v-label v-if="error" class="text-red">{{ hint }}</v-label>
-                    <div class="d-flex align-center justify-center">
-                        <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="mr-5 ml-5" variant="elevated" color="blue">Скачать</v-btn>
+                <v-card-text class="d-flex flex-column justify-center w-100 h-auto flex-grow-0">
+                    <v-text-field class="h-auto flex-grow-0" v-model="url" label="Ссылка" :loading="fetching"/>
+                    <v-label v-if="error" class="text-red ml-5">{{ hint }}</v-label>
+                    <div class="d-flex align-center justify-center h-auto" :class="isWide ? '' : 'flex-column'">
+                        <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 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>
                     </div>
                 </v-card-text>
             </v-card>
@@ -29,11 +31,15 @@ export default {
         downloadAvailable: ref(false),
         downloadLink: '',
         hint: ref(''),
-        error: ref(false)
+        error: ref(false),
+        windowHeight: document.documentElement.clientHeight,
+        windowWidth: document.documentElement.clientWidth,
+        isWide: window.innerWidth >= 460
     }),
     methods: {
         startDownload(){
             this.downloadAvailable = false;
+            this.downloadAvailable = true; //TODO
             this.error = false;
             this.fetching = true;
             axios.get(`/download_api?videourl=${this.url}`).then((responce)=>{
@@ -52,31 +58,23 @@ export default {
                 this.error = true;
                 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>
 
 
 <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>