resources/views/components/layout.blade.php - auth - mr.fork/learning-git

resources/views/components/layout.blade.php
124 строки4 KB
doubleW
21 окт 2025, 14:45
21 окт 2025, 14:45db64543
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title }}</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.0/dist/cdn.min.js"></script>

</head>
<body class="bg-white text-gray-900 min-h-screen flex flex-col">
    @if(session('success'))
        <div class="bg-green-200 text-black p-4 rounded mb-6 text-center">
            {{ session('success') }}
        </div>
    @endif
    @if(session('out'))
        <div class="bg-green-200 text-black p-4 rounded mb-6 text-center">
            {{ session('out') }}
        </div>
    @endif


    <!-- Header -->
    <header class="border-b border-gray-200">
        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="text-xl font-bold">
                <a href="{{ route('home') }}" class="cursor-pointer">home</a></div>
            @guest
            <div class="space-x-4">
                <a href="{{ route('register') }}" class="hover:text-red-600">register</a>
                <a href="{{ route('login') }}" class="hover:text-red-600">login</a>
            </div>
            @endguest

            @auth
            <div class="space-x-4">
                <a href="{{ route('logout') }}" class="hover:text-red-600">exit</a>
            </div>
            @endauth

        </nav>
    </header>

    <!-- Main Content -->
    <main class="flex-grow container mx-auto px-4 py-8">
        {{ $slot }}
    </main>

    <!-- Footer -->
    <footer class="border-t border-gray-200 mt-auto">
        <div class="container mx-auto px-4 py-6 text-center text-sm text-gray-500">
            © 2024 MySite. <a href="#" class="underline hover:text-blue-600">Privacy Policy</a>
        </div>
    </footer>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('phoneMask', (initialValue = '') => ({
            phone: '',
            formattedPhone: '+7',
            init() {
                // Инициализация значения из старого ввода
                this.phone = initialValue.replace(/[^\d]/g, '');
                this.formatPhone();
            },
            formatPhone() {
                let digitsOnly = this.phone.replace(/[^\d]/g, '');

                // Если меньше 2 символов — возвращаем +7
                if (digitsOnly.length < 2) {
                    this.formattedPhone = '+7';
                    return;
                }

                // Если начинается не с +7 — добавляем
                if (!digitsOnly.startsWith('7')) {
                    digitsOnly = '7' + digitsOnly;
                }

                // Оставляем только первые 11 символов (включая +7)
                digitsOnly = digitsOnly.slice(0, 11);

                // Форматируем под маску
                let result = '+7 ';
                if (digitsOnly.length > 3) {
                    result += digitsOnly.substring(2, 5);
                }
                if (digitsOnly.length > 6) {
                    result += ' ' + digitsOnly.substring(5, 8);
                }
                if (digitsOnly.length > 9) {
                    result += ' ' + digitsOnly.substring(8, 10);
                }
                if (digitsOnly.length > 11) {
                    result += ' ' + digitsOnly.substring(10, 12);
                }

                this.formattedPhone = result;
                this.phone = digitsOnly;
            },
            onInput(e) {
                // Удаляем всё, кроме цифр
                let value = e.target.value.replace(/[^\d]/g, '');
                this.phone = value;
                this.formatPhone();
            },
            onKeyDown(e) {
                const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End'];
                if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
                    e.preventDefault();
                }
            },
            onPaste(e) {
                e.preventDefault();
                const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                this.phone = pastedText.replace(/[^\d]/g, '').slice(0, 11);
                this.formatPhone();
            }
        }));
    });
</script>

</body>
</html>