Dhaverd/ New-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Теперь данные в BasyaMemePage подгружаются из бд + опробовал верстку под разные экраны

This commit is contained in:
Dhaverd 2024-04-10 00:37:18 +08:00
parent e6cfe9e335
commit 55221c066c
5 changed files with 328 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/Http/Controllers/BasyaPhrasesController.php Normal file
View File

@ -0,0 +1,12 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
use App\Models\BasyaPhrase;
class BasyaPhrasesController extends Controller
{
public function index(){
return DB::table('basya_phrases')->get();
}
}

11
app/Models/BasyaPhrase.php Normal file
View File

@ -0,0 +1,11 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class BasyaPhrase extends Model
{
use HasFactory;
}

254
resources/css/app.css
View File

@ -0,0 +1,254 @@
@media (min-width: 600px){
.text-xs-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 960px){
.text-sm-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 1280px){
.text-md-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 1920px){
.text-lg-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 2560px){
.text-xl-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}

110
resources/views/basya/Basya.vue
View File

@ -4,24 +4,27 @@
<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>
<v-skeleton-loader type="text" v-if="fetching"></v-skeleton-loader>
<div v-if="!fetching">
<div class="d-flex flex-column align-center justify-center main-text">
<p class="text-h4 text-xl-h1 text-md-h2 text-sm-h3 ma-10">Юрий говорит:</p>
<p class="text-h5 text-xl-h2 text-md-h3 text-sm-h4 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
</div>
<div class="d-flex align-center justify-center flex-column">
<v-btn
variant="elevated"
color="#94BBE9FF"
@click="reloadPhrase"
class="ml-10 mr-10 mt-3 mb-3">
Другая фраза
</v-btn>
<a
v-if="currentPhrase === secret"
href="/download/basya_answer.docx"
class="ml-10 mr-10 mt-3 mb-3">
<v-btn variant="elevated">Инструкция</v-btn>
</a>
</div>
</div>
</v-card-text>
</v-card>
@ -31,49 +34,48 @@
<script>
import {ref} from 'vue';
import axios from "axios";
export default {
name: "Basya",
data: () => ({
phrases: [
'Доброе утро. С проблемой боремся.',
'Авария у провайдера, сроков на данный момент нет, разбираются',
'Перегрузите страницу, все должно работать',
'Доброе утро, смотрим',
'Коллеги внимание!!! Сейчас аис не будет работать в течение 10 минут. Вынужденные работы. Просьба предупредить всех',
'Коллеги, пробуйте',
'Коллеги, проблема массовая, разбираемся',
'Попробуйте сейчас',
'Коллеги, уточняем по проблеме. Как будет понятно, напишем',
'Коллеги, занимаемся проблемой',
'По срокам пока сказать не могу',
'Добрый день. Разбираемся',
'Перепроверьте услуги',
'Обновите страницу ctrl+f5',
'Коллеги минуту, разбираемся',
'скиньте скриншот',
'Коллеги, проблема массовая, решается',
'Подождите еще',
'Коллеги, разбираемся',
'Работаем',
'Коллеги, проблема массовая. Ожидайте сигнала.',
'Сегодня будем плотно разбираться, что происходит. Непонятно пока из-за чего.',
'Коллеги, проблема общая. Сейчас решаем вопрос.',
'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции'
],
currentPhrase: ref()
secret: 'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции',
phrases: ref(),
fetching: true,
currentPhrase: ref(),
winWidth: ref(document.documentElement.clientWidth),
// size: ref(),
isLess: false
}),
methods: {
reloadPhrase(){
let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)];
let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)].phrase;
if (newPhrase === this.currentPhrase){
this.reloadPhrase();
} else {
this.currentPhrase = newPhrase;
}
},
onResize(e) {
this.winWidth = ref(document.documentElement.clientWidth);
console.log(this.winWidth.value);
}
},
mounted() {
this.reloadPhrase();
axios
.get('/api/v1/phrases')
.then(response => {
this.phrases = response.data;
this.reloadPhrase();
this.fetching = false;
});
this.isLess = ref(this.winWidth.value <= 600 ? 'flex-column' : '');
/*
this.size = this.winWidth <= 600 ? 'x-small' :
this.winWidth > 600 && this.winWidth <= 960 ? 'small' :
this.winWidth > 960 && this.winWidth <= 1280 ? '' :
this.winWidth > 1280 && this.winWidth <= 1920 ? 'large' :
this.winWidth > 1920 ? 'x-large' : '';
*/
}
}
</script>
@ -82,13 +84,7 @@ export default {
.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;
*/
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;
}
.main-sheet-bg {
@ -103,11 +99,5 @@ export default {
.vertical-center {
justify-content: center;
/* -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translateY(-50%);
*/
}
</style>

1
routes/api_v1.php
View File

@ -18,3 +18,4 @@ Route::get('/', 'App\Http\Controllers\Api\V1\CaesarController@index')->name('cae
Route::get('/links', 'App\Http\Controllers\LinksController@index')->name('links');
Route::get('/schedules', 'App\Http\Controllers\SchedulesController@index')->name('schedules');
Route::get('/dates', 'App\Http\Controllers\SchedulesController@mmDate')->name('dates');
Route::get('/phrases', 'App\Http\Controllers\BasyaPhrasesController@index')->name('phrases');