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

    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Apollo Router landing page" />
        <link rel="apple-touch-icon"
            href="https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png" />
        <link rel="manifest" href="https://apollo-server-landing-page.cdn.apollographql.com/_latest/manifest.json" />
        <title>Apollo Router</title>
    </head>

    <body style="margin: 0; overflow-x: hidden; overflow-y: hidden">
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="react-root">
            <style>
                .fallback {
                    opacity: 0;
                    animation: fadeIn 1s 1s;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;
                    padding: 1em;
                }

                @keyframes fadeIn {
                    0% {
                        opacity: 0;
                    }

                    100% {
                        opacity: 1;
                    }
                }
            </style>
            <div class="fallback">
                <h1>Welcome to the Apollo Router</h1>
                <p>Apollo Sandbox cannot be loaded; it appears that you might be offline.</p>
            </div>
        </div>
        <style>
            iframe {
            background-color: white;
            }
        </style>
        <div
        style="width: 100vw; height: 100vh; position: absolute; top: 0;"
        id="embeddableSandbox"
        ></div>
		<script src="https://embeddable-sandbox.cdn.apollographql.com/v2/embeddable-sandbox.umd.production.min.js?runtime=apollo-router@{{APOLLO_ROUTER_VERSION}}"></script>
        <script>
        var initialEndpoint = window.location.href;
        new window.EmbeddedSandbox({
            target: '#embeddableSandbox',
            initialEndpoint,
            initialSubscriptionEndpoint: initialEndpoint,
            initialRequestQueryPlan: true,
            initialState: {
                includeCookies: true,
            },
            hideCookieToggle: false,
            endpointIsEditable: false,
            initialRequestConnectorsDebugging: true,
            runtime: "apollo-router@{{APOLLO_ROUTER_VERSION}}"
        });
        </script>
    </body>

</html>
