{% load staticfiles %}

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="format-detection" content="telephone=no,email=no,address=no">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <title>下载页面</title>
{#        <script>!function(){var d=document.documentElement;d.style.fontSize=d.clientWidth*0.05+'px'}()</script>#}
        <style>
{#            index.css#}
            *, :after, :before {
                box-sizing: border-box;
                outline: none;
            }
{#            Body#}
            body {
                color: #333;
                font-family: -apple-system,Arial,Microsoft YaHei,Helvetica Neue,sans-serif;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
                background-color: #fff;
            }
            body {
                margin: 0;
            }
{#            A#}
            a {
                color: #000;
                text-decoration: none;
                -webkit-transition: color,.3s;
                transition: color,.3s;
            }
            a {
                background-color: transparent;
            }
{#            Img#}
            img {
                border: 0;
            }
{#            Container#}
            .container {
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                position: relative;
            }
            @media (max-width: 960px) {
                .container {
                    width: 100%;
                }
            }
            .text-center {
                text-align: center;
            }
{#            Article#}
            article {
                display: block;
            }
{#            Button#}
            button {
                padding: 1em;
                border: 0;
            }
            button, input[type=submit] {
                -webkit-appearance: none;
                background: #007fff;
                color: #fff;
                border-radius: 2px;
            }
            button, html input[type=button], input[type=reset], input[type=submit] {
                -webkit-appearance: button;
                cursor: pointer;
            }
            button, select {
                text-transform: none;
            }
            button {
                overflow: visible;
            }
            button, input, optgroup, select, textarea {
                color: inherit;
                font: inherit;
                margin: 0;
            }
{#            Color#}
            .text-blue {
                color: #007fff;
            }
            .text-muted {
                color: #666;
            }
{#            app.css#}
            html, body {
                height: 100%;
                overflow: hidden;
            }
            .container {
                position: relative;
                width: 100%;
                height: 100%;
                padding: 2em .5em;
                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
            }
            .logo {
                height: 70px;
            }
            .title {
                font-size: 1.5em;
            }
            .description {
                margin: .5em 0;
                font-size: 2em;
            }
            .download {
                margin: 1em 0;
            }
            .hero-button {
                margin: 1em 0 0;
                background: none;
                border: 1px solid #4285f4;
                border-radius: 3px;
                color: #4285f4;
                padding: .5em 3em;
            }

            @media(max-width: 600px) {
                .description {
                    font-size: 1.6em;
                }
                .hero-button {
                    margin-top: .5em;
                }
            }

            @media(max-height: 600px) {
                .logo {
                    height: 60px;
                }
                .title {
                    font-size: 1.2em;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <article class="text-center">
                <a href="https://pai.ai">
                    <img src="{% static 'pai2/img/paiai_96_96.png' %}" class="logo">
                </a>
                <div class="title">
                    <a href="https://pai.ai" class="text-blue">拍爱</a>
                </div>
                <div class="description text-muted">即拍即分享</div>
                <div class="download">
                    <a href="https://api.pai.ai/op/download?scr={{ src }}">
                        <button class="hero-button">下载<strong>v{{ version }}</strong></button>
                    </a>
                </div>
            </article>
        </div>
    </body>
</html>
