resources/friday.js

@@ -1,7 +1,7 @@
 import './js/bootstrap';
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import App from './views/Welcome.vue'
+import App from './views/friday/Friday.vue'
 import { createVuetify } from 'vuetify'
 import 'vuetify/styles'
 import * as components from 'vuetify/components'

resources/views/friday/Friday.vue

@@ -1,27 +1,146 @@
 <template>
     <v-app>
-        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
-            <Schedule/>
+        <v-sheet :class="notFriday ? 'bg-gradient' : 'bg-gradient-friday'" class="h-100 w-100 d-flex justify-center">
+            <v-card class="w-75 mt-5 mb-5 align-center justify-center h-auto rounded-lg main-sheet-bg">
+                <v-card-text class="h-100 d-flex flex-column align-center justify-center">
+                    <div v-if="!isFirst" class="text-xxl-h2 text-xl-h2 text-lg-h2 text-md-h2 text-h5 mb-10 mt-10 text-center">{{phrase}}</div>
+                    <div v-if="notFriday && !isFirst" class="text-xxl-h2 text-xl-h2 text-lg-h2 text-md-h2 text-h5 mb-10 mt-10 text-center">Сегодня {{day}}</div>
+                    <v-btn :class="notFriday ? '' : 'btn-friday'" elevation="4" color="#69b7eb" variant="elevated" @click="checkFriday">{{notFriday ? 'Сегодня пятница?' : 'Пятница!'}}</v-btn>
+                </v-card-text>
+            </v-card>
         </v-sheet>
     </v-app>
 </template>
 
 <script>
-import Schedule from "./Schedule.vue";
 
 export default {
-    name: "Welcome",
-    components: {Schedule}
+    name: "Friday",
+    data: () => ({
+        noList: [
+            'Нет',
+            'Еще нет',
+            'До пятницы как до дембеля',
+            'Еще не скоро',
+            'К сожалению, сегодня не пятница',
+            'Еще работать и работать',
+            'Мечтаем о пятнице',
+            'Увы, сегодня не пятница'
+        ],
+        yesList: [
+            'Да, сегодня пятница!',
+            'ЕЕЕЕЕЕЕЕЕЕЕЕ',
+            'Чизкейк уже съеден?',
+            'Что заказываем?',
+            'Надо взять чизкейк',
+            'По пивку?',
+            'Абсолютно верно, сегодня - пятница!',
+            'Да, пятница! Отличный повод отпраздновать!',
+            'Да, пятница! Не бывает лучшего дня недели'
+        ],
+        isFirst: true,
+        notFriday: true,
+        dayList: {
+            1: 'Понедельник',
+            2: 'Вторник',
+            3: 'Среда',
+            4: 'Четверг',
+            5: 'Пятница',
+            6: 'Суббота',
+            7: 'Воскресенье'
+        },
+        phrase: '',
+        day: ''
+    }),
+    methods: {
+        getCurrentDay(){
+            let date = new Date();
+            console.log(date);
+            return date.getDay();
+        },
+        checkFriday(){
+            this.isFirst = false;
+            let day = this.getCurrentDay();
+            this.notFriday = day !== 4;
+            this.day = this.dayList[day];
+            if (this.notFriday){
+                let prevPhrase = this.phrase;
+                while (this.phrase === prevPhrase){
+                    const random = Math.floor(Math.random() * this.noList.length);
+                    this.phrase = this.noList[random];
+                }
+            } else {
+                let prevPhrase = this.phrase;
+                while (this.phrase === prevPhrase){
+                    const random = Math.floor(Math.random() * this.yesList.length);
+                    this.phrase = this.yesList[random];
+                }
+            }
+        }
+    }
 }
 </script>
 
 <style scoped>
 
 .bg-gradient {
-    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
+    background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);
     background-size: 200% 200%;
     animation: gradient 15s ease infinite;
     height: 100vh;
 }
 
+.bg-gradient-friday {
+    background: linear-gradient(-45deg, #ed193b, #a98055, #f286e2, #681d7a);
+    background-size: 200% 200%;
+    animation: gradient-friday 10s ease infinite;
+    height: 100vh;
+}
+
+.main-sheet-bg {
+    background-color: #424242;
+    color: #E0E0E0;
+    text-decoration-color: #E0E0E0;
+}
+
+.btn-friday {
+    animation: gradient-btn-friday 5s ease infinite;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes gradient-friday {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes gradient-btn-friday {
+    0% {
+        background-color: red;
+    }
+    50% {
+        background-color: #00ff00;
+    }
+    100% {
+        background-color: blue;
+    }
+}
+
 </style>

resources/views/friday/friday.blade.php

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Информация о трансляциях</title>
-    @vite('resources/welcome.js')
+    @vite('resources/friday.js')
     @vite('resources/css/app.css')
 </head>
 <body class="antialiased">

routes/web.php

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

vite.config.js

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