Теперь данные в BasyaMemePage подгружаются из бд + опробовал верстку под разные экраны

app/Http/Controllers/BasyaPhrasesController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+use Illuminate\Support\Facades\DB;
+use App\Models\BasyaPhrase;
+
+class BasyaPhrasesController extends Controller
+{
+    public function index(){
+        return DB::table('basya_phrases')->get();
+    }
+}

app/Models/BasyaPhrase.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class BasyaPhrase extends Model
+{
+    use HasFactory;
+}

resources/css/app.css

@@ -0,0 +1,254 @@
+@media (min-width: 600px){
+    .text-xs-button-1 {
+        font-size: 6rem !important;
+        font-weight: 300;
+        line-height: 6rem;
+        letter-spacing: -0.015625em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xs-button-2 {
+        font-size: 3.75rem !important;
+        font-weight: 300;
+        line-height: 3.75rem;
+        letter-spacing: -0.0083333333em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xs-button-3 {
+        font-size: 3rem !important;
+        font-weight: 400;
+        line-height: 3.125rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xs-button-4 {
+        font-size: 2.125rem !important;
+        font-weight: 400;
+        line-height: 2.5rem;
+        letter-spacing: 0.0073529412em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xs-button-5 {
+        font-size: 1.5rem !important;
+        font-weight: 400;
+        line-height: 2rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xs-button-6{
+        font-size: 1.25rem !important;
+        font-weight: 500;
+        line-height: 2rem;
+        letter-spacing: 0.0125em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+}
+
+@media (min-width: 960px){
+    .text-sm-button-1 {
+        font-size: 6rem !important;
+        font-weight: 300;
+        line-height: 6rem;
+        letter-spacing: -0.015625em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-sm-button-2 {
+        font-size: 3.75rem !important;
+        font-weight: 300;
+        line-height: 3.75rem;
+        letter-spacing: -0.0083333333em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-sm-button-3 {
+        font-size: 3rem !important;
+        font-weight: 400;
+        line-height: 3.125rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-sm-button-4 {
+        font-size: 2.125rem !important;
+        font-weight: 400;
+        line-height: 2.5rem;
+        letter-spacing: 0.0073529412em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-sm-button-5 {
+        font-size: 1.5rem !important;
+        font-weight: 400;
+        line-height: 2rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-sm-button-6{
+        font-size: 1.25rem !important;
+        font-weight: 500;
+        line-height: 2rem;
+        letter-spacing: 0.0125em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+}
+
+@media (min-width: 1280px){
+    .text-md-button-1 {
+        font-size: 6rem !important;
+        font-weight: 300;
+        line-height: 6rem;
+        letter-spacing: -0.015625em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-md-button-2 {
+        font-size: 3.75rem !important;
+        font-weight: 300;
+        line-height: 3.75rem;
+        letter-spacing: -0.0083333333em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-md-button-3 {
+        font-size: 3rem !important;
+        font-weight: 400;
+        line-height: 3.125rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-md-button-4 {
+        font-size: 2.125rem !important;
+        font-weight: 400;
+        line-height: 2.5rem;
+        letter-spacing: 0.0073529412em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-md-button-5 {
+        font-size: 1.5rem !important;
+        font-weight: 400;
+        line-height: 2rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-md-button-6{
+        font-size: 1.25rem !important;
+        font-weight: 500;
+        line-height: 2rem;
+        letter-spacing: 0.0125em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+}
+
+@media (min-width: 1920px){
+    .text-lg-button-1 {
+        font-size: 6rem !important;
+        font-weight: 300;
+        line-height: 6rem;
+        letter-spacing: -0.015625em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-lg-button-2 {
+        font-size: 3.75rem !important;
+        font-weight: 300;
+        line-height: 3.75rem;
+        letter-spacing: -0.0083333333em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-lg-button-3 {
+        font-size: 3rem !important;
+        font-weight: 400;
+        line-height: 3.125rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-lg-button-4 {
+        font-size: 2.125rem !important;
+        font-weight: 400;
+        line-height: 2.5rem;
+        letter-spacing: 0.0073529412em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-lg-button-5 {
+        font-size: 1.5rem !important;
+        font-weight: 400;
+        line-height: 2rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-lg-button-6{
+        font-size: 1.25rem !important;
+        font-weight: 500;
+        line-height: 2rem;
+        letter-spacing: 0.0125em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+}
+
+@media (min-width: 2560px){
+    .text-xl-button-1 {
+        font-size: 6rem !important;
+        font-weight: 300;
+        line-height: 6rem;
+        letter-spacing: -0.015625em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xl-button-2 {
+        font-size: 3.75rem !important;
+        font-weight: 300;
+        line-height: 3.75rem;
+        letter-spacing: -0.0083333333em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xl-button-3 {
+        font-size: 3rem !important;
+        font-weight: 400;
+        line-height: 3.125rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xl-button-4 {
+        font-size: 2.125rem !important;
+        font-weight: 400;
+        line-height: 2.5rem;
+        letter-spacing: 0.0073529412em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xl-button-5 {
+        font-size: 1.5rem !important;
+        font-weight: 400;
+        line-height: 2rem;
+        letter-spacing: normal !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+    .text-xl-button-6{
+        font-size: 1.25rem !important;
+        font-weight: 500;
+        line-height: 2rem;
+        letter-spacing: 0.0125em !important;
+        font-family: "Roboto", sans-serif !important;
+        text-transform: none !important;
+    }
+}

resources/views/basya/Basya.vue

@@ -4,24 +4,27 @@
             <v-card :elevation="4" class="mt-5 mb-5 align-center justify-center h-auto rounded-lg main-sheet-bg w-75">
                 <v-card-title></v-card-title>
                 <v-card-text class="h-100 d-flex flex-column align-center justify-center">
-                    <div class="d-flex flex-column align-center justify-center main-text">
+                    <v-skeleton-loader type="text" v-if="fetching"></v-skeleton-loader>
-                        <p class="text-h1 ma-10">Юрий говорит:</p>
+                    <div v-if="!fetching">
-                        <p class="text-h2 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
+                        <div class="d-flex flex-column align-center justify-center main-text">
-                    </div>
+                            <p class="text-h4 text-xl-h1 text-md-h2 text-sm-h3 ma-10">Юрий говорит:</p>
-                    <div class="d-flex align-center justify-center">
+                            <p class="text-h5 text-xl-h2 text-md-h3 text-sm-h4 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
-                        <v-btn
+                        </div>
-                            variant="elevated"
+                        <div class="d-flex align-center justify-center flex-column">
-                            color="#94BBE9FF"
+                            <v-btn
-                            @click="reloadPhrase"
+                                variant="elevated"
-                            class="ma-10">
+                                color="#94BBE9FF"
-                            Другая фраза
+                                @click="reloadPhrase"
-                        </v-btn>
+                                class="ml-10 mr-10 mt-3 mb-3">
-                        <a
+                                Другая фраза
-                            v-if="currentPhrase === phrases[23]"
+                            </v-btn>
-                            href="/download/basya_answer.docx"
+                            <a
-                            class="ma-10">
+                                v-if="currentPhrase === secret"
-                            <v-btn variant="elevated">Инструкция</v-btn>
+                                href="/download/basya_answer.docx"
-                        </a>
+                                class="ml-10 mr-10 mt-3 mb-3">
+                                <v-btn variant="elevated">Инструкция</v-btn>
+                            </a>
+                        </div>
                     </div>
                 </v-card-text>
             </v-card>
@@ -31,49 +34,48 @@
 
 <script>
 import {ref} from 'vue';
+import axios from "axios";
 export default {
     name: "Basya",
     data: () => ({
-        phrases: [
+        secret: 'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции',
-            'Доброе утро. С проблемой боремся.',
+        phrases: ref(),
-            'Авария у провайдера, сроков на данный момент нет, разбираются',
+        fetching: true,
-            'Перегрузите страницу, все должно работать',
+        currentPhrase: ref(),
-            'Доброе утро, смотрим',
+        winWidth: ref(document.documentElement.clientWidth),
-            'Коллеги внимание!!! Сейчас аис не будет работать в течение 10 минут. Вынужденные работы. Просьба предупредить всех',
+        // size: ref(),
-            'Коллеги, пробуйте',
+        isLess: false
-            'Коллеги, проблема массовая, разбираемся',
-            'Попробуйте сейчас',
-            'Коллеги, уточняем по проблеме. Как будет понятно, напишем',
-            'Коллеги, занимаемся проблемой',
-            'По срокам пока сказать не могу',
-            'Добрый день. Разбираемся',
-            'Перепроверьте услуги',
-            'Обновите страницу ctrl+f5',
-            'Коллеги минуту, разбираемся',
-            'скиньте скриншот',
-            'Коллеги, проблема массовая, решается',
-            'Подождите еще',
-            'Коллеги, разбираемся',
-            'Работаем',
-            'Коллеги, проблема массовая. Ожидайте сигнала.',
-            'Сегодня будем плотно разбираться, что происходит. Непонятно пока из-за чего.',
-            'Коллеги, проблема общая. Сейчас решаем вопрос.',
-            'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции'
-        ],
-        currentPhrase: ref()
     }),
     methods: {
         reloadPhrase(){
-            let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)];
+            let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)].phrase;
             if (newPhrase === this.currentPhrase){
                 this.reloadPhrase();
             } else {
                 this.currentPhrase = newPhrase;
             }
+        },
+        onResize(e) {
+            this.winWidth = ref(document.documentElement.clientWidth);
+            console.log(this.winWidth.value);
         }
     },
     mounted() {
-        this.reloadPhrase();
+        axios
+            .get('/api/v1/phrases')
+            .then(response => {
+                this.phrases = response.data;
+                this.reloadPhrase();
+                this.fetching = false;
+            });
+        this.isLess = ref(this.winWidth.value <= 600 ? 'flex-column' : '');
+        /*
+        this.size = this.winWidth <= 600 ?  'x-small' :
+                        this.winWidth > 600 && this.winWidth <= 960 ? 'small' :
+                            this.winWidth > 960 && this.winWidth <= 1280 ? '' :
+                                this.winWidth > 1280 && this.winWidth <= 1920 ? 'large' :
+                                    this.winWidth > 1920 ? 'x-large' : '';
+         */
     }
 }
 </script>
@@ -82,13 +84,7 @@ export default {
 
 .bg-gradient {
     background: rgb(238, 174, 202)!important;
-    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;;
+    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;
-    /*
-    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
-    background-size: 200% 200%;
-    animation: gradient 15s ease infinite;
-    height: 100vh;
-    */
 }
 
 .main-sheet-bg {
@@ -103,11 +99,5 @@ export default {
 
 .vertical-center {
     justify-content: center;
-    /* -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-
-    transform: translateY(-50%);
-    */
 }
-
 </style>

routes/api_v1.php

@@ -18,3 +18,4 @@ Route::get('/', 'App\Http\Controllers\Api\V1\CaesarController@index')->name('cae
 Route::get('/links', 'App\Http\Controllers\LinksController@index')->name('links');
 Route::get('/schedules', 'App\Http\Controllers\SchedulesController@index')->name('schedules');
 Route::get('/dates', 'App\Http\Controllers\SchedulesController@mmDate')->name('dates');
+Route::get('/phrases', 'App\Http\Controllers\BasyaPhrasesController@index')->name('phrases');