<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plossa Experience - Mobile</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            background-color: #f8f9fa;
        }

        .sticky-top-shadow {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            background-color: white;
            z-index: 1020;
        }

        .skeleton-box {
            background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        .preview-skeleton {
            width: 100%;
            aspect-ratio: 16 / 10;
            border-radius: 10px;
            background-color: #e0e0e0;
        }

        .skeleton-text {
            height: 24px;
            width: 60%;
            margin: 10px auto;
            border-radius: 4px;
        }

        #previewHeading,
        #captureHeading,
        #previewSubtitle,
        #captureSubtitle {
            font-family: 'ColumbiaSerial', sans-serif !important;
            text-shadow:
                -3px -3px 0 black,
                0px -3px 0 black,
                3px -3px 0 black,
                3px 0px 0 black,
                3px 3px 0 black,
                0px 3px 0 black,
                -3px 3px 0 black,
                -3px 0px 0 black;
        }

        #heading,
        #subtitle {
            font-family: 'ColumbiaSerial', sans-serif !important;
            color: white !important;
            -webkit-text-stroke: 2px black;
        }

        #finalCaptureArea {
            width: 800px;
            height: 500px;
            position: relative;
        }

        @font-face {
            font-family: 'ColumbiaSerial';
            src: url('/fonts/ColumbiaSerial-RegularItalic.ttf') format('truetype');
            font-display: swap;
        }
    </style>
</head>

<body>
    <!-- Header -->
    <nav class="navbar navbar-light sticky-top sticky-top-shadow px-3">
        <a class="navbar-brand" href="/">
            <img src="{{ env('LOGO_IMG') }}" alt="Logo Plossa" style="height: 24px">
        </a>
    </nav>

    <main>
        @yield('content')
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    @stack('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@include('sweetalert::alert')

</body>

</html>
