Тестовый неон-редизайн раписания стримов

app/Http/Controllers/ServiceLinksController.php

@@ -1,15 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Models\ServicesLink;
-use Illuminate\Http\Request;
-
-class ServiceLinksController extends Controller
-{
-    public function index()
-    {
-        $links = new ServicesLink();
-        return $links->all();
-    }
-}

app/Models/ServicesLink.php

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

database/migrations/2025_06_14_085734_create_services_links_table.php

@@ -1,29 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration
-{
-    /**
-     * Run the migrations.
-     */
-    public function up(): void
-    {
-        Schema::create('services_links', function (Blueprint $table) {
-            $table->id();
-            $table->string('name', 255);
-            $table->string('link', 255);
-            $table->timestamps();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     */
-    public function down(): void
-    {
-        Schema::dropIfExists('services_links');
-    }
-};

resources/css/app.css

@@ -9,6 +9,49 @@
     border-radius: 14px;
 }
 
+.nice-bg {
+    background-color: #000814 !important;
+    background-size: 200% 200%!important;
+    height: 100vh!important;
+}
+
+.nice-bg-sheet {
+    background-color: #1e1f22 !important;
+}
+
+.bricks-bg {
+    --s: 45px!important; /* control the size*/
+    --c1: #bb593e !important;
+    --c2: #bb593e !important;
+    --c3: #2c2e2a!important;
+
+    --p:at 45% 40%,#0000 75%,;
+    --g1:conic-gradient(var(--p) var(--c1) 0)!important;
+    --g2:conic-gradient(var(--p) var(--c2) 0)!important;
+    background:
+        var(--g1),var(--g2) calc(2*var(--s)) 0,
+        var(--g2) calc(3*var(--s)) var(--s),
+        var(--g1) var(--s) var(--s) var(--c3)!important;
+    background-size: calc(4*var(--s)) calc(2*var(--s))!important;
+}
+
+.nice-bg-border {
+    border: 0.2rem solid #fff!important;
+    border-radius: 2rem!important;
+    padding: 0.4em!important;
+    box-shadow: 0 0 .2rem #fff,
+                0 0 .2rem #fff,
+                0 0 2rem #bc13fe,
+                0 0 0.8rem #bc13fe,
+                0 0 2.8rem #bc13fe,
+                inset 0 0 1.3rem #bc13fe!important;
+    animation: pulsate 1.5s infinite alternate!important;
+}
+
+.white-text {
+    color: #fff!important;
+}
+
 .neon-text {
     color: #fff!important;
     text-shadow:
@@ -22,18 +65,28 @@
         0 0 34px #bc13fe !important;
 }
 
-.neon-border {
-    border: 0.2rem solid #fff !important;
-    border-radius: 2rem !important;
-    box-shadow: 0 0 .2rem #fff,
-    0 0 .2rem #fff,
-    0 0 2rem #bc13fe,
-    0 0 0.8rem #bc13fe,
-    0 0 2.8rem #bc13fe,
-    inset 0 0 1.3rem #bc13fe !important;
-    animation: pulsate 1.5s infinite alternate !important;
-}
+@keyframes pulsate {
 
-.white-text {
-    color: white!important;
+    100% {
+        box-shadow:
+            0 0 4px #fff,
+            0 0 11px #fff,
+            0 0 19px #fff,
+            0 0 40px #bc13fe,
+            0 0 80px #bc13fe,
+            0 0 90px #bc13fe,
+            0 0 100px #bc13fe,
+            0 0 150px #bc13fe;
+    }
+    0% {
+        box-shadow:
+            0 0 2px #fff,
+            0 0 4px #fff,
+            0 0 6px #fff,
+            0 0 10px #bc13fe,
+            0 0 45px #bc13fe,
+            0 0 55px #bc13fe,
+            0 0 70px #bc13fe,
+            0 0 80px #bc13fe;
+    }
 }

resources/service_links.js

@@ -1,18 +0,0 @@
-import './js/bootstrap';
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import App from './views/ServiceLinks/ServicesLinks.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/stores/services_list.js

@@ -1,21 +0,0 @@
-import {defineStore} from "pinia";
-import axios from "axios";
-
-export const useServicesList = defineStore('services_list', {
-    state: () => ({
-        links: Object
-    }),
-    getters: {
-
-    },
-    actions: {
-        async getList(){
-            await axios
-                .get('/api/v1/services_list')
-                .then((response) => {
-                    this.links = response.data;
-                });
-        }
-
-    },
-})

resources/views/Schedule.vue

@@ -1,7 +1,7 @@
 <template>
-    <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3">
+    <v-sheet class="bg-transparent mt-5 mb-5 rounded-lg w-75">
         <p class="neon-text text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Расписание стримов</p>
-        <v-skeleton-loader v-if="fetching" type="text" class="bg-grey-darken-3"/>
+        <v-skeleton-loader v-if="fetching" type="text" />
         <p v-else class="neon-text ma-5 text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
         <ScheduleTable :is-wide="isWide"/>
         <p class="neon-text text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Ссылочки</p>

resources/views/Schedule/AdditionalButtons.vue

@@ -52,39 +52,39 @@ export default {
 <template>
     <div class="w-100 d-flex justify-space-evenly" :class="isWide ? '' : 'flex-column'">
         <v-btn
-            class="bg-grey-darken-3 neon-border pt-3 pb-3 pl-3 pr-3 mt-7 mb-7 mr-5 ml-5 h-auto"
+            class="nice-bg-border nice-bg-sheet white-text pa-4 ma-5 h-auto"
             text="Кинуть копеечку"
             href="https://www.donationalerts.com/r/dhaverd"
             target="_blank"
         />
         <v-btn
-            class="bg-grey-darken-3 neon-border pt-3 pb-3 pl-3 pr-3 mt-7 mb-7 mr-5 ml-5 h-auto"
+            class="nice-bg-border nice-bg-sheet white-text pa-4 ma-5 h-auto"
             text="Оставить отзыв"
             @click="onShowModal"
         />
     </div>
     <v-dialog v-model="showModal" class="align-center" :class="isWide ? 'w-50' : 'w-100 h-100'">
-        <v-sheet class="mt-5 mb-5 pa-5 h-auto rounded-lg bg-grey-darken-3 neon-border d-flex flex-column">
-            <div class="w-100 d-flex justify-end bg-grey-darken-3">
-                <v-btn class="bg-grey-darken-3" icon="mdi-window-close" elevation="0" @click="onShowModal"/>
+        <v-sheet class="nice-bg-border nice-bg-sheet white-text mb-5 pa-5 h-auto rounded-lg d-flex flex-column">
+            <div class="w-100 d-flex justify-end">
+                <v-btn class="nice-bg-sheet white-text" icon="mdi-window-close" elevation="0" @click="onShowModal"/>
             </div>
-            <v-label class="text-xl-h6 white-text ">Оцените канал:</v-label>
-            <v-rating v-model="rating" active-color="purple-darken-1">
+            <v-label class="white-text text-xl-h6">Оцените канал:</v-label>
+            <v-rating v-model="rating" active-color="#BC13FEFF">
                 sss
             </v-rating>
-            <v-label class="text-xl-h6 mb-2 white-text ">Оставьте отзыв:</v-label>
+            <v-label class="white-text text-xl-h6 mb-2">Оставьте отзыв:</v-label>
             <v-textarea v-model="comment" clearable variant="outlined" label="Что можно улучшить?"/>
             <div class="d-flex justify-center">
-                <v-btn class="bg-grey-darken-3 neon-border pt-3 pb-3 pl-3 pr-3 w-auto h-auto" @click="sendRating">Отправить</v-btn>
+                <v-btn class="nice-bg-border nice-bg-sheet white-text pl-3 pr-3 pt-3 pb-3 w-auto h-auto" @click="sendRating">Отправить</v-btn>
             </div>
         </v-sheet>
     </v-dialog>
     <v-dialog v-model="afterModal" class="align-center" :class="isWide ? 'w-50' : 'w-100 h-100'">
-        <v-sheet class="mt-5 mb-5 pa-5 h-auto rounded-lg bg-grey-darken-3 neon-border d-flex flex-column">
-            <div class="w-100 d-flex justify-end bg-grey-darken-3">
-                <v-btn class="bg-grey-darken-3" icon="mdi-window-close" elevation="0" @click="onShowAfterModal"/>
+        <v-sheet class="nice-bg-border nice-bg-sheet white-text mt-5 mb-5 pa-5 h-auto rounded-lg d-flex flex-column">
+            <div class="w-100 d-flex justify-end">
+                <v-btn class="nice-bg-sheet white-text" icon="mdi-window-close" elevation="0" @click="onShowAfterModal"/>
             </div>
-            <v-label class="text-xl-h6 white-text justify-center">{{afterModalText}}</v-label>
+            <v-label class="white-text text-xl-h6">{{afterModalText}}</v-label>
         </v-sheet>
     </v-dialog>
 </template>

resources/views/Schedule/Links.vue

@@ -23,13 +23,13 @@
 
 <template>
     <div class="w-100 d-flex justify-center">
-        <v-list class="bg-grey-darken-3" :class="isWide ? 'w-66' : 'w-100'">
-            <v-skeleton-loader v-if="fetching" type="list-item" class="bg-grey-darken-3 ml-1 mr-3"/>
-            <v-list-item v-else class="bg-grey-darken-3 neon-border mt-6 mb-7 ml-7 mr-7" elevation="0" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
+        <v-list class="bg-transparent pt-6 pb-6 pl-5 pr-5" :class="isWide ? 'w-66' : 'w-100'">
+            <v-skeleton-loader v-if="fetching" type="list-item"/>
+            <v-list-item v-else class="ma-5 nice-bg-border" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" elevation="6"-->
                 <template v-slot:prepend>
-                    <v-avatar class="mt-1 mb-1 ml-5" :image="link.image" rounded="0"></v-avatar>
+                    <v-avatar class="ml-4" :image="link.image" rounded="0"></v-avatar>
                 </template>
-                <v-list-item-title>{{ link.link_name }}</v-list-item-title>
+                <v-list-item-title class="white-text pl-6 pb-4 pt-4">{{ link.link_name }}</v-list-item-title>
             </v-list-item>
         </v-list>
     </div>

resources/views/Schedule/ScheduleTable.vue

@@ -28,13 +28,13 @@
 </script>
 
 <template>
-    <div class="w-100 d-flex justify-center mt-6 mb-6">
-        <v-skeleton-loader v-if="fetching" type="table" class="bg-grey-darken-3 mr-3 ml-1"/>
-        <v-table v-else class="bg-grey-darken-3 neon-border pa-3 ml-1 mr-3 text-xl-h5 text-lg-h5 text-md-h5 text-sm-h5 text-body-2" :class="isWide ? 'w-66' : 'w-100'">
+    <div class="w-100 d-flex justify-center">
+        <v-skeleton-loader v-if="fetching" type="table"/>
+        <v-table v-else class="bg-transparent nice-bg-border mt-3 mb-3 neon-text text-xl-h5 text-lg-h5 text-md-h5 text-sm-h5  text-body-2" :class="isWide ? 'w-66' : 'w-100'">
             <tbody>
             <tr v-for="schedule in schedules">
-                <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
-                <td>{{ schedule.name }}</td>
+                <td class="pt-6 pb-6 pl-6 white-text">{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
+                <td class="pt-6 pb-6 white-text">{{ schedule.name }}</td>
             </tr>
             </tbody>
         </v-table>

resources/views/ServiceLinks/ServicesLinks.vue

@@ -1,78 +0,0 @@
-<script>
-
-import {ref} from "vue";
-import {useServicesList} from "../../stores/services_list.js";
-
-export default {
-    name: "ServicesLinks",
-    data: () => ({
-        links: ref([]),
-        servicesListStore: useServicesList(),
-        fetching: true,
-        windowHeight: document.documentElement.clientHeight,
-        windowWidth: document.documentElement.clientWidth,
-        isWide: window.innerWidth >= 654
-    }),
-    mounted() {
-        this.fetching = true;
-        this.servicesListStore.getList().then(()=>{
-            this.links = this.servicesListStore.links;
-            this.fetching = false;
-        });
-        this.myEventHandler();
-        window.addEventListener("resize", this.myEventHandler, { passive: true });
-    },
-    methods: {
-        myEventHandler(e) {
-            this.windowHeight = document.documentElement.clientHeight;
-            this.windowWidth = document.documentElement.clientWidth;
-            this.isWide = this.windowWidth >= 654;
-        }
-    },
-    created() {
-        window.addEventListener("resize", this.myEventHandler);
-    },
-}
-</script>
-
-<template>
-    <v-app>
-        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
-            <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3 pr-3">
-                <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 text-center pt-3">Список сервисов и страниц</p>
-                <v-skeleton-loader v-if="fetching" class="bg-grey-darken-3" type="card"/>
-                <div class="pt-5 h-100" v-else>
-                    <v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)" v-if="isWide">
-                        <v-col class="d-flex justify-center align-center" v-for="j in 3">
-                            <v-btn v-if="links[(n - 1) * 3 + j - 1]" class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" :href="links[(n - 1) * 3 + j - 1].link" target="_blank">
-                                {{ links[(n - 1) * 3 + j - 1].name }}
-                            </v-btn>
-                        </v-col>
-                    </v-row>
-                    <div v-else class="ma-0">
-                        <v-btn class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" v-for="link in links" :href="link.link" target="_blank">
-                            {{ link.name }}
-                        </v-btn>
-                    </div>
-                </div>
-            </v-sheet>
-        </v-sheet>
-    </v-app>
-</template>
-
-<style scoped>
-.bg-gradient {
-    --s: 50px; /* control the size */
-
-    --c: #E08E79 0 25%,#774F38 0 50%,#0000 0;
-    background:
-        conic-gradient(from 180deg,var(--c))
-        0/var(--s) var(--s),
-        repeating-conic-gradient(from 90deg,var(--c))
-        0/calc(3*var(--s)) calc(3*var(--s))
-}
-
-.bg-btn {
-    background-color: #E08E79
-}
-</style>

resources/views/ServiceLinks/links.blade.php

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Services Links</title>
-        @vite('resources/service_links.js')
-        @vite('resources/css/app.css')
-    </head>
-    <body class="antialiased">
-        <div id="app"></div>
-    </body>
-</html>

resources/views/Welcome.vue

@@ -1,7 +1,9 @@
 <template>
     <v-app>
-        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
-            <Schedule/>
+        <v-sheet class="nice-bg-sheet h-100 w-100 d-flex justify-center">
+            <div class="w-100 d-flex justify-center">
+                <Schedule/>
+            </div>
         </v-sheet>
     </v-app>
 </template>

routes/api_v1.php

@@ -20,4 +20,3 @@ Route::get('/schedules', 'App\Http\Controllers\SchedulesController@index')->name
 Route::get('/dates', 'App\Http\Controllers\SchedulesController@mmDate')->name('dates');
 Route::get('/phrases', 'App\Http\Controllers\BasyaPhrasesController@index')->name('phrases');
 Route::post('/rating', 'App\Http\Controllers\RatingController@index')->name('rating');
-Route::get('/services_list', 'App\Http\Controllers\ServiceLinksController@index')->name('services_list');

routes/web.php

@@ -14,10 +14,6 @@ use Illuminate\Support\Facades\Route;
 */
 
 Route::get('/', function () {
-    return view('ServiceLinks/links');
-});
-
-Route::get('/schedule', function () {
     return view('welcome');
 });
 

vite.config.js

@@ -12,8 +12,7 @@ export default defineConfig({
                 'resources/welcome.js',
                 'resources/caesar.js',
                 'resources/basya.js',
-                'resources/friday.js',
-                'resources/service_links.js'
+                'resources/friday.js'
             ],
             refresh: true,
         }),