149 lines
4.4 KiB
Vue
149 lines
4.4 KiB
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>
|