New-site/resources/views/friday/Friday.vue

<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();
            return date.getDay();
        },
        checkFriday(){
            this.isFirst = false;
            let day = this.getCurrentDay();
            this.notFriday = day !== 5;
            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;
    }
    25% {
        background-color: #00ff00;
    }
    75% {
        background-color: blue;
    }
    100% {
        background-color: red;
    }
}

</style>