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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Purple Geckos - FMS</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=5, viewport-fit=cover, user-scalable=yes, interactive-widget=resizes-visual">
    <meta property="og:title" content="Purple Geckos File Management System (PG-FMS)">
    <meta property="og:description" content="The Purple Geckos File Management System (PG-FMS) is an advanced, Python-based file management solution.">
    <meta property="og:url" content="https://pg-fms.vercel.app">
    <meta property="og:image" content="https://pg-fms.vercel.app/static/pwa/opengraph-image.png">
    <meta property="og:image:width" content="2560">
    <meta property="og:image:height" content="1440">
    <meta name="twitter:title" content="Purple Geckos File Management System (PG-FMS)">
    <meta name="twitter:description" content="The Purple Geckos File Management System (PG-FMS) is an advanced, Python-based file management solution.">
    <meta name="twitter:url" content="https://pg-fms.vercel.app">
    <meta name="twitter:image" content="https://pg-fms.vercel.app/static/pwa/opengraph-image.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="@OdnisMike">
    <meta name="twitter:image:width" content="2560">
    <meta name="twitter:image:height" content="1440">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#4c00cd">
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#c001fd">
    <meta name="color-scheme" content="dark light">

    <!-- Preconnect -->
    <link rel="manifest" href="./static/pwa/manifest.json">
    <link rel='icon' href='./static/pwa/favicon.ico' type='image/x-icon' />
    <link rel="robots" href="./static/pwa/robots.txt">

    <!-- Google Tag Manager -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4G983WEV7W"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-4G983WEV7W');
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom right, #4a0080, #000000);
            color: #ffffff;
            line-height: 1.6;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        .logo {
            font-size: 2em;
            font-weight: bold;
            background: linear-gradient(to right, #ff00ff, #8000ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        nav a {
            color: #ffffff;
            text-decoration: none;
            margin-left: 20px;
            transition: color 0.3s;
        }
        nav a:hover {
            color: #ff00ff;
        }
        .button {
            background: linear-gradient(to right, #ff00ff, #8000ff);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: opacity 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        .button:hover {
            opacity: 0.8;
        }
        .hero {
            text-align: center;
            padding: 60px 0;
        }
        .hero h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }
        .features {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin: 40px 0;
        }
        .feature {
            flex-basis: calc(33.333% - 14px);
            background-color: rgba(74, 0, 128, 0.5);
            padding: 20px;
            border-radius: 10px;
        }
        .cta {
            text-align: center;
            padding: 60px 0;
        }
        footer {
            background-color: #4a0080;
            padding: 40px 0;
        }
        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .footer-section {
            flex-basis: calc(25% - 20px);
            margin-bottom: 20px;
        }
        .footer-section h3 {
            margin-bottom: 10px;
        }
        .footer-section a {
            color: #ffffff;
            text-decoration: none;
            display: block;
            margin-bottom: 5px;
            transition: color 0.3s;
        }
        .footer-section a:hover {
            color: #ff00ff;
        }
        @media (max-width: 768px) {
            .features {
                flex-direction: column;
            }
            .feature, .footer-section {
                flex-basis: 100%;
                margin-bottom: 20px;
            }
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>
    <div class="container">
        {% block main %}
        {% endblock %}
    </div>
    {% block scripts %}
        <script>
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker
                .register('../static/scripts/service-worker.js')
                .then((registration) => {
                    console.log('scope is: ', registration.scope);
                })
                .catch((error) => {
                    console.log('Service worker registration failed: ', error);
                });
            }
        </script>
    {% endblock %}
</body>

</html>
