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

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Free online JSON tools. Validate, format, and compare JSON documents with our easy-to-use tools. Perfect for developers and data analysts.">
        <meta name="keywords" content="JSON validator, JSON formatter, JSON lint, JSON compare, JSON diff, JSON beautifier, JSON parser, JSON editor, JSON tool">
        <meta name="author" content="JSON Tools">
        <title>@yield('title', 'JSON Tools')</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
        @stack('styles')
        <style>
            :root {
                --primary-color: #4a6bff;
                --primary-hover: #3a5bef;
            }
            
            body {
                background-color: var(--bs-body-bg);
                transition: background-color 0.3s ease;
            }

            .navbar {
                background-color: var(--bs-body-bg);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                padding: 1rem 0;
            }

            .navbar-brand {
                font-weight: bold;
                color: var(--primary-color) !important;
            }

            .nav-link {
                color: var(--bs-body-color);
                transition: all 0.3s ease;
                padding: 0.5rem 1rem;
                border-radius: 0.375rem;
            }

            .nav-link:hover {
                color: var(--primary-color);
                background-color: rgba(74, 107, 255, 0.1);
            }

            .nav-link.active {
                color: var(--primary-color);
                background-color: rgba(74, 107, 255, 0.1);
            }

            .theme-switch {
                cursor: pointer;
                padding: 0.5rem;
                border-radius: 50%;
                transition: all 0.3s ease;
                background-color: var(--bs-body-bg);
                border: 1px solid var(--bs-border-color);
                margin-left: 1rem;
            }

            .theme-switch:hover {
                background-color: var(--bs-border-color);
            }

            .container {
                padding-top: 2rem;
            }

            @yield('styles')
        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg">
            <div class="container">
                <a class="navbar-brand" href="/">
                    <i class="bi bi-code-square me-2"></i>
                    JSON Tools
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link {{ request()->is('jsonlint') ? 'active' : '' }}" href="{{ url('/jsonlint') }}">
                                <i class="bi bi-code-slash me-2"></i>JSON Lint
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ request()->is('jsoncompare') ? 'active' : '' }}" href="{{ url('/jsoncompare') }}">
                                <i class="bi bi-arrows-angle-contract me-2"></i>JSON Compare
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ request()->is('jsonschema') ? 'active' : '' }}" href="{{ url('/jsonschema') }}">
                                <i class="bi bi-file-earmark-check me-2"></i>JSON Schema
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ request()->is('jsontemplates') ? 'active' : '' }}" href="{{ url('/jsontemplates') }}">
                                <i class="bi bi-file-earmark-text me-2"></i>JSON Templates
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('api') }}">API</a>
                        </li>
                    </ul>
                    <button class="theme-switch" id="themeSwitch" title="Toggle dark/light mode">
                        <i class="bi bi-moon-fill"></i>
                    </button>
                </div>
            </div>
        </nav>

        <div class="container">
            @yield('content')
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const themeSwitch = document.getElementById('themeSwitch');
                const html = document.documentElement;
                
                // Check for saved theme preference
                const savedTheme = localStorage.getItem('theme');
                if (savedTheme) {
                    html.setAttribute('data-bs-theme', savedTheme);
                    themeSwitch.innerHTML = savedTheme === 'dark' ? '<i class="bi bi-sun-fill"></i>' : '<i class="bi bi-moon-fill"></i>';
                }

                // Theme switching
                themeSwitch.addEventListener('click', function() {
                    const isDark = html.getAttribute('data-bs-theme') === 'dark';
                    const newTheme = isDark ? 'light' : 'dark';
                    html.setAttribute('data-bs-theme', newTheme);
                    themeSwitch.innerHTML = isDark ? '<i class="bi bi-moon-fill"></i>' : '<i class="bi bi-sun-fill"></i>';
                    localStorage.setItem('theme', newTheme);
                });
            });
        </script>
        @stack('scripts')
    </body>
</html>