Добавил страницу с фразами Басирова

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "New-site",
+    "name": "new.site",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

resources/basya.js

@@ -0,0 +1,16 @@
+import './js/bootstrap';
+import {createApp} from 'vue'
+import App from './views/basya/Basya.vue'
+import { createVuetify } from 'vuetify'
+import { mdi } from "vuetify/iconsets/mdi";
+import 'vuetify/styles'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import '@mdi/font/css/materialdesignicons.css'
+
+const vuetify = createVuetify({
+    components,
+    directives
+})
+
+createApp(App).use(vuetify).mount("#app")

resources/views/basya/Basya.vue

@@ -0,0 +1,113 @@
+<template>
+    <v-app>
+        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
+            <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">
+                        <p class="text-h1 ma-10">Юрий говорит:</p>
+                        <p class="text-h2 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
+                    </div>
+                    <div class="d-flex align-center justify-center">
+                        <v-btn
+                            variant="elevated"
+                            color="#94BBE9FF"
+                            @click="reloadPhrase"
+                            class="ma-10">
+                            Другая фраза
+                        </v-btn>
+                        <a
+                            v-if="currentPhrase === phrases[23]"
+                            href="/download/basya_answer.docx"
+                            class="ma-10">
+                            <v-btn variant="elevated">Инструкция</v-btn>
+                        </a>
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-sheet>
+    </v-app>
+</template>
+
+<script>
+import {ref} from 'vue';
+export default {
+    name: "Basya",
+    data: () => ({
+        phrases: [
+            'Доброе утро. С проблемой боремся.',
+            'Авария у провайдера, сроков на данный момент нет, разбираются',
+            'Перегрузите страницу, все должно работать',
+            'Доброе утро, смотрим',
+            'Коллеги внимание!!! Сейчас аис не будет работать в течение 10 минут. Вынужденные работы. Просьба предупредить всех',
+            'Коллеги, пробуйте',
+            'Коллеги, проблема массовая, разбираемся',
+            'Попробуйте сейчас',
+            'Коллеги, уточняем по проблеме. Как будет понятно, напишем',
+            'Коллеги, занимаемся проблемой',
+            'По срокам пока сказать не могу',
+            'Добрый день. Разбираемся',
+            'Перепроверьте услуги',
+            'Обновите страницу ctrl+f5',
+            'Коллеги минуту, разбираемся',
+            'скиньте скриншот',
+            'Коллеги, проблема массовая, решается',
+            'Подождите еще',
+            'Коллеги, разбираемся',
+            'Работаем',
+            'Коллеги, проблема массовая. Ожидайте сигнала.',
+            'Сегодня будем плотно разбираться, что происходит. Непонятно пока из-за чего.',
+            'Коллеги, проблема общая. Сейчас решаем вопрос.',
+            'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции'
+        ],
+        currentPhrase: ref()
+    }),
+    methods: {
+        reloadPhrase(){
+            let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)];
+            if (newPhrase === this.currentPhrase){
+                this.reloadPhrase();
+            } else {
+                this.currentPhrase = newPhrase;
+            }
+        }
+    },
+    mounted() {
+        this.reloadPhrase();
+    }
+}
+</script>
+
+<style scoped>
+
+.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: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
+    background-size: 200% 200%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+    */
+}
+
+.main-sheet-bg {
+    background-color: #424242;
+    color: #E0E0E0;
+    text-decoration-color: #E0E0E0;
+}
+
+.main-text {
+    text-align: center;
+}
+
+.vertical-center {
+    justify-content: center;
+    /* -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    transform: translateY(-50%);
+    */
+}
+
+</style>

resources/views/basya/basya.blade.php

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Basya says</title>
+        @vite('resources/basya.js')
+        @vite('resources/css/app.css')
+    </head>
+    <body class="antialiased">
+        <div id="app"></div>
+    </body>
+</html>

routes/web.php

@@ -25,6 +25,10 @@ Route::get('/resume', function () {
     return view('resume/resume');
 });
 
+Route::get('/basya', function () {
+    return view('basya/basya');
+});
+
 Route::get('/download/{file}', 'App\Http\Controllers\DownloadController@download');
 
 

vite.config.js

@@ -6,7 +6,7 @@ export default defineConfig({
     plugins: [
         vue(),
         laravel({
-            input: ['resources/css/app.css', 'resources/app.js', 'resources/welcome.js', 'resources/caesar.js'],
+            input: ['resources/css/app.css', 'resources/app.js', 'resources/welcome.js', 'resources/caesar.js', 'resources/basya.js'],
             refresh: true,
         }),
     ],