City10/resources/views/layouts/app.blade.php

{{-- Shared application layout for all City10 web pages. --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', config('app.name', 'City10'))</title>
    <style>
        :root {
            --brand: #0ea5e9;
            --brand-dark: #0284c7;
            --bg: #0f172a;
            --surface: #1e293b;
            --surface-2: #334155;
            --text: #e2e8f0;
            --muted: #94a3b8;
            --border: #334155;
            --danger: #ef4444;
            --ok: #22c55e;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Instrument Sans", sans-serif;
            background: linear-gradient(160deg, #0f172a 0%, #0c1a2e 100%);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        a { color: var(--brand); text-decoration: none; }
        a:hover { text-decoration: underline; }
        .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
        header.site {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem 0; border-bottom: 1px solid var(--border); gap: 1rem; flex-wrap: wrap;
        }
        .logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; color: #fff; }
        .logo .mark {
            width: 34px; height: 34px; border-radius: 9px;
            background: linear-gradient(135deg, var(--brand), #6366f1);
            display: grid; place-items: center; font-size: .85rem; color: #fff; font-weight: 800;
        }
        nav.site { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
        nav.site a, .btn {
            padding: .5rem .9rem; border-radius: .55rem; font-size: .9rem; border: 1px solid var(--border);
            color: var(--text); background: transparent; cursor: pointer; transition: all .15s ease;
        }
        nav.site a:hover, .btn:hover { background: var(--surface-2); text-decoration: none; }
        .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
        .btn-primary:hover { background: var(--brand-dark); }
        .lang-switch { display: flex; align-items: center; gap: .25rem; }
        .lang-switch form { display: inline; }
        .lang-switch button {
            background: transparent; border: 1px solid transparent; color: var(--muted);
            padding: .3rem .5rem; border-radius: .4rem; cursor: pointer; font-size: .8rem;
        }
        .lang-switch button:hover { color: var(--text); background: var(--surface-2); }
        .lang-switch button.active { color: var(--brand); border-color: var(--border); font-weight: 700; }
        main.site { flex: 1; padding: 2.5rem 0; }
        footer.site {
            border-top: 1px solid var(--border); padding: 1.25rem 0; font-size: .85rem; color: var(--muted);
            display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
        }
        footer.site .links { display: flex; gap: 1rem; flex-wrap: wrap; }
        .card {
            background: var(--surface); border: 1px solid var(--border); border-radius: 1rem;
            padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
        }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
        .field { margin-bottom: 1rem; }
        .field label { display: block; margin-bottom: .4rem; font-size: .85rem; color: var(--muted); }
        .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field select {
            width: 100%; padding: .7rem .85rem; border-radius: .55rem; border: 1px solid var(--border);
            background: #0b1220; color: var(--text); font-size: 1rem;
        }
        .field input:focus, .field select:focus { outline: 2px solid var(--brand); border-color: transparent; }
        .error { color: var(--danger); font-size: .8rem; margin-top: .3rem; }
        .alert { padding: .85rem 1rem; border-radius: .6rem; margin-bottom: 1.25rem; font-size: .9rem; }
        .alert-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fecaca; }
        .alert-ok { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #bbf7d0; }
        .badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
        .badge-admin { background: rgba(99,102,241,.2); color: #a5b4fc; }
        .badge-user { background: rgba(14,165,233,.2); color: #7dd3fc; }
        .eye-toggle {
            position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
            background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: .2rem;
        }
        .pw-wrap { position: relative; }
        @media (max-width: 640px) {
            header.site { flex-direction: column; align-items: flex-start; }
            footer.site { flex-direction: column; align-items: flex-start; }
        }
    </style>
    @stack('styles')
</head>
<body>
    <div class="container">
        <header class="site">
            <a href="{{ route('welcome') }}" class="logo">
                <span class="mark">C10</span>
                <span>{{ config('app.name', 'City10') }}</span>
            </a>

            <nav class="site">
                @auth
                    <a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a>
                    <a href="{{ route('city.viewer') }}">{{ __('nav.city') }}</a>
                    @if (auth()->user()->isAdmin())
                        <a href="{{ route('admin.stores.index') }}" class="badge badge-admin" style="text-decoration:none;">{{ __('nav.admin') }}</a>
                        <a href="{{ route('admin.citizens.index') }}">{{ __('nav.citizens') }}</a>
                        <a href="{{ route('admin.cities.index') }}">{{ __('nav.cities') }}</a>
                    @endif
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="btn">{{ __('Logout') }}</button>
                    </form>
                @else
                    <a href="{{ route('login') }}">{{ __('Login') }}</a>
                    <a href="{{ route('register') }}" class="btn-primary">{{ __('Register') }}</a>
                @endauth

                <span class="lang-switch">
                    @foreach (['pt_BR' => 'PT', 'en' => 'EN', 'es' => 'ES'] as $code => $label)
                        <form method="GET" action="{{ route('lang.switch') }}">
                            <input type="hidden" name="locale" value="{{ $code }}">
                            <button type="submit" class="{{ app()->getLocale() === $code ? 'active' : '' }}">{{ $label }}</button>
                        </form>
                    @endforeach
                </span>
            </nav>
        </header>

        <main class="site">
            @if (session('status'))
                <div class="alert alert-ok">{{ session('status') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-error">
                    <ul style="margin:0; padding-left: 1.1rem;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @yield('content')
        </main>

        <footer class="site">
            <div>
                &copy; {{ date('Y') }} - Todos os direitos reservados - Powered by
                <a href="https://syspanel.com.br" target="_blank" rel="noopener">Syspanel - www.syspanel.com.br</a>
            </div>
            <div class="links">
                <a href="{{ route('legal.show', 'terms') }}">Termos de Uso</a>
                <a href="{{ route('legal.show', 'cookies') }}">Cookies</a>
                <a href="{{ route('legal.show', 'privacy') }}">Privacidade</a>
            </div>
        </footer>
    </div>

    {{-- Cookie consent banner (LGPD): shown until the visitor makes a choice. --}}
    @unless (request()->cookie('city10-consent'))
        <div id="cookie-banner" style="position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:50; max-width:720px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; box-shadow:0 20px 50px rgba(0,0,0,.5);">
            <p style="margin:0 0 .5rem; color:#fff; font-weight:600;">🍪 Uso de Cookies</p>
            <p style="margin:0 0 .9rem; color:var(--muted); font-size:.9rem; line-height:1.55;">
                Utilizamos cookies estritamente necessários para o funcionamento da sessão e, com o seu consentimento,
                cookies de desempenho para melhorar a experiência. Ao continuar, você concorda com a nossa
                <a href="{{ route('legal.show', 'terms') }}" target="_blank">Política de Termos de Uso e Privacidade</a>
                e com a nossa <a href="{{ route('legal.show', 'cookies') }}" target="_blank">Política de Cookies</a>.
            </p>
            <div style="display:flex; gap:.6rem; flex-wrap:wrap;">
                <button type="button" class="btn btn-primary" data-consent="all">Aceitar todos</button>
                <button type="button" class="btn" data-consent="necessary">Recusar opcionais</button>
                <a href="{{ route('legal.show', 'cookies') }}" class="btn" target="_blank">Personalizar</a>
            </div>
        </div>

        <script>
            // Persists the cookie consent choice for 1 year (LGPD art. 7º, I).
            document.querySelectorAll('#cookie-banner [data-consent]').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var value = btn.dataset.consent === 'all' ? 'all' : 'necessary';
                    var expires = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString();
                    document.cookie = 'city10-consent=' + value + '; expires=' + expires + '; path=/; SameSite=Lax';
                    var banner = document.getElementById('cookie-banner');
                    if (banner) banner.remove();
                });
            });
        </script>
    @endunless

    @stack('scripts')
</body>
</html>