resources/friday.js

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

resources/views/Welcome.vue

@@ -24,4 +24,17 @@ export default {
     height: 100vh;
 }
 
+@keyframes gradient {
+    0% {
+        background-position: 0 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+
 </style>

resources/views/friday/Friday.vue

@@ -0,0 +1,146 @@
+<template>
+    <v-app>
+        <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>
+
+export default {
+    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(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

@@ -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>Информация о трансляциях</title>
+    @vite('resources/friday.js')
+    @vite('resources/css/app.css')
+</head>
+<body class="antialiased">
+<div id="app"></div>
+</body>
+</html>

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,
         }),
     ],