<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <title>Welcome to Craft CMS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="referrer" content="origin-when-cross-origin" />
    <style>
        html,
        body {
            font-size: 16px;
            -webkit-text-size-adjust: 100%;
            height: 100%;
            font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: hsl(212, 10%, 93%);
            color: hsl(212, 20%, 20%);
            display: flex;
        }

        h1 {
            margin-top: 0;
        }

        h2 {
            margin-top: 24px;
            font-size: 1em;
        }

        h2:first-child {
            margin-top: 0;
        }

        p {
            line-height: 1.4em;
            margin-bottom: 1.4em;
        }

        ul {
            line-height: 1.3em;
            padding-left: 20px;
            margin-bottom: 0;
        }

        ul li {
            margin-bottom: 0.35em;
        }

        a {
            color: #0d78f2;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .go {
            color: #0d78f2;
        }

        .go:after {
            padding-left: 4px;
            content: '→';
            text-decoration: none !important;
        }

        small {
            color: #777;
        }

        code {
            display: inline-block;
            color: #da513d;
            padding: 0 2px;
            background: hsl(212, 10%, 96%);
            border-radius: 3px;
            line-height: 1.3;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 0.9em;
        }

        #container {
            flex-grow: 1;
        }

        #modal {
            background: #fff;
        }

        #aside {
            background: hsl(212, 10%, 93%);
        }

        .content {
            padding: 35px;
            padding-left: calc(35px + env(safe-area-inset-left));
            padding-right: calc(35px + env(safe-area-inset-right));
        }

        @media (min-width:480px) {
            body {
                background-image: url("{{ view.getAssetManager().getPublishedUrl('@app/web/assets/installer/dist', true, 'images/install-bg-1920.png') }}");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
            }

            #container {
                display: flex;
                align-items: normal;
                justify-content: normal;
            }
        }

        @media (min-width:480px) and (min-height: 376px) {
            #container {
                padding: 24px;
                align-items: center;
                justify-content: center;
            }

            #modal {
                height: 100%;
                max-width: 770px;
                max-height: 510px;
                border-radius: 4px;
                overflow: auto;
                box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5);
            }

            #aside {
                background: #f9f9f9;
                overflow: auto;
            }
        }

        @media (min-width:768px) {
            #modal {
                display: flex;
            }

            #main {
                width: 50%;
                overflow: auto;
            }

            #aside {
                width: 50%;
                overflow: auto;
            }
        }

        @media only screen and (min-width: 1921px) {
            body {
                background-image: url("{{ view.getAssetManager().getPublishedUrl('@app/web/assets/installer/dist', true, 'images/install-bg-5120.png') }}");
            }
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 961px),
        only screen and (-moz-min-device-pixel-ratio: 1.5) and (min-width: 961px),
        only screen and (-o-min-device-pixel-ratio: 3/2) and (min-width: 961px),
        only screen and (min-device-pixel-ratio: 1.5) and (min-width: 961px),
        only screen and (min-resolution: 1.5dppx) and (min-width: 961px) {
            body {
                background-image: url("{{ view.getAssetManager().getPublishedUrl('@app/web/assets/installer/dist', true, 'images/install-bg-5120.png') }}");
            }
        }
    </style>
</head>
<body class="ltr">
<div id="container">
    <div id="modal">
        <div id="main">
            <div class="content">
                <h1>Welcome</h1>
                <p>Thanks for installing Craft CMS!</p>
                <p>You’re looking at the <code>index.html</code> template file located in your
                    <code>templates/</code> folder. Once you’re ready to start building out your site’s
                    front end, you can replace this with something custom.</p>
                <p>If you’re new to Craft CMS, take some time to check out the resources on the right
                    when you get a chance&mdash;especially
                    <a href="https://craftcms.com/community#slack" target="_blank">Slack</a>
                    and <a href="http://craftcms.stackexchange.com/" target="_blank">Stack Exchange</a>.
                    The Craft community is full of smart, friendly, and helpful people!</p>
                <p><span class="go"><a href="{{ cpUrl('') }}">Go to your Control Panel</a></span></p>
            </div>
        </div>
        <div id="aside">
            <div class="content">
                {% set officialResources = [
                    { label: "Craft 3 Documentation", url: 'http://docs.craftcms.com/v3/' },
                    { label: "Craft 3 Class Reference", url: 'https://docs.craftcms.com/api/v3/' },
                    { label: "Craft 3 Plugins", url: 'https://plugins.craftcms.com' },
                    { label: "Demo site", url: 'https://demo.craftcms.com/' },
                    { label: "Craft Slack", url: 'https://craftcms.com/community#slack' },
                    { label: "Craft CMS Stack Exchange", url: 'http://craftcms.stackexchange.com/' },
                ] %}
                <h2>Official Resources</h2>
                <ul>
                    {% for resource in officialResources %}
                        <li><a href="{{ resource.url }}" title="{{ resource.label }}" target="_blank">{{ resource.label }}</a></li>
                    {% endfor %}
                </ul>

                {% set communityResources = [
                    { label: "Mijingo", description: "Video courses and other learning resources", url: 'https://mijingo.com/craft' },
                    { label: "Envato Tuts+", description: "Video courses", url: 'https://webdesign.tutsplus.com/categories/craft-cms/courses' },
                    { label: "Straight Up Craft", description: "Articles, tutorials, and more", url: 'http://straightupcraft.com/' },
                    { label: "pluginfactory.io", description: "Craft plugin and module scaffold generator", url: 'https://pluginfactory.io/' },
                ] %}
                <h2>Community Resources</h2>
                <ul>
                    {% for resource in communityResources %}
                        <li><a href="{{ resource.url }}" title="{{ resource.label }} – {{ resource.description }}" target="_blank">{{ resource.label }}</a><small> – {{ resource.description }}</small></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
