Начало Разгледай Помощ
Регистриране Влизане
Pai2
/
pai2
Следи 2
Харесвам 0
Разклонение 0

Преглед на кода
download page

Brightcells преди 9 години
родител
ee258aeb8b
ревизия
d1ef8ec9e9
променени са 1 файла, в които са добавени 165 реда и са изтрити 9 реда
Покажи статистика за разликите
  1. 165 9
      page/templates/page/download.html

+ 165 - 9
page/templates/page/download.html
Преглед на файла 

@@ -1,10 +1,166 @@
1 
+{% load staticfiles %}
2 
+
1 3 
 <!DOCTYPE html>
2 
-<html>
3 
-<head lang="en">
4 
-    <meta charset="UTF-8">
5 
-    <title>下载页面</title>
6 
-</head>
7 
-<body>
8 
-    <div style="text-align: center;font-size: 50px;">下载页面</div>
9 
-</body>
10 
-</html>
4 
+<html lang="zh-CN">
5 
+    <head>
6 
+        <meta charset="utf-8">
7 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 
+        <meta name="format-detection" content="telephone=no,email=no,address=no">
9 
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
10 
+        <title>下载页面</title>
11 
+{#        <script>!function(){var d=document.documentElement;d.style.fontSize=d.clientWidth*0.05+'px'}()</script>#}
12 
+        <style>
13 
+{#            index.css#}
14 
+            *, :after, :before {
15 
+                box-sizing: border-box;
16 
+                outline: none;
17 
+            }
18 
+{#            Body#}
19 
+            body {
20 
+                color: #333;
21 
+                font-family: -apple-system,Arial,Microsoft YaHei,Helvetica Neue,sans-serif;
22 
+                -webkit-font-smoothing: antialiased;
23 
+                text-rendering: optimizeLegibility;
24 
+                background-color: #fff;
25 
+            }
26 
+            body {
27 
+                margin: 0;
28 
+            }
29 
+{#            A#}
30 
+            a {
31 
+                color: #000;
32 
+                text-decoration: none;
33 
+                -webkit-transition: color,.3s;
34 
+                transition: color,.3s;
35 
+            }
36 
+            a {
37 
+                background-color: transparent;
38 
+            }
39 
+{#            Img#}
40 
+            img {
41 
+                border: 0;
42 
+            }
43 
+{#            Container#}
44 
+            .container {
45 
+                width: 960px;
46 
+                margin-left: auto;
47 
+                margin-right: auto;
48 
+                position: relative;
49 
+            }
50 
+            @media (max-width: 960px) {
51 
+                .container {
52 
+                    width:100%
53 
+                }
54 
+            }
55 
+            .text-center {
56 
+                text-align: center;
57 
+            }
58 
+{#            Article#}
59 
+            article {
60 
+                display: block;
61 
+            }
62 
+{#            Button#}
63 
+            button {
64 
+                padding: 1em;
65 
+                border: 0;
66 
+            }
67 
+            button, input[type=submit] {
68 
+                -webkit-appearance: none;
69 
+                background: #007fff;
70 
+                color: #fff;
71 
+                border-radius: 2px;
72 
+            }
73 
+            button, html input[type=button], input[type=reset], input[type=submit] {
74 
+                -webkit-appearance: button;
75 
+                cursor: pointer;
76 
+            }
77 
+            button, select {
78 
+                text-transform: none;
79 
+            }
80 
+            button {
81 
+                overflow: visible;
82 
+            }
83 
+            button, input, optgroup, select, textarea {
84 
+                color: inherit;
85 
+                font: inherit;
86 
+                margin: 0;
87 
+            }
88 
+{#            Color#}
89 
+            .text-blue {
90 
+                color: #007fff;
91 
+            }
92 
+            .text-muted {
93 
+                color: #666;
94 
+            }
95 
+{#            app.css#}
96 
+            html, body {
97 
+                height: 100%;
98 
+                overflow: hidden;
99 
+            }
100 
+            .container {
101 
+                position: relative;
102 
+                width: 100%;
103 
+                height: 100%;
104 
+                padding: 2em .5em;
105 
+                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
106 
+            }
107 
+            .logo {
108 
+                height: 70px;
109 
+            }
110 
+            .title {
111 
+                font-size: 1.5em;
112 
+            }
113 
+            .description {
114 
+                margin: .5em 0;
115 
+                font-size: 2em;
116 
+            }
117 
+            .download {
118 
+                margin: 1em 0;
119 
+            }
120 
+            .hero-button {
121 
+                margin: 1em 0 0;
122 
+                background: none;
123 
+                border: 1px solid #4285f4;
124 
+                border-radius: 3px;
125 
+                color: #4285f4;
126 
+                padding: .5em 3em;
127 
+            }
128 
+
129 
+            @media(max-width: 600px) {
130 
+                .description {
131 
+                    font-size: 1.6em;
132 
+                }
133 
+                .hero-button {
134 
+                    margin-top: .5em;
135 
+                }
136 
+            }
137 
+
138 
+            @media(max-height: 600px) {
139 
+                .logo {
140 
+                    height: 60px;
141 
+                }
142 
+                .title {
143 
+                    font-size: 1.2em;
144 
+                }
145 
+            }
146 
+        </style>
147 
+    </head>
148 
+    <body>
149 
+        <div class="container">
150 
+            <article class="text-center">
151 
+                <a href="http://pai.ai">
152 
+                    <img src="{% static 'pai2/img/paiai_96_96.png' %}" class="logo">
153 
+                </a>
154 
+                <div class="title">
155 
+                    <a href="http://pai.ai" class="text-blue">拍爱</a>
156 
+                </div>
157 
+                <div class="description text-muted">即拍即分享</div>
158 
+                <div class="download">
159 
+                    <a href="">
160 
+                        <button class="hero-button">下载<strong>v1.0.0</strong></button>
161 
+                    </a>
162 
+                </div>
163 
+            </article>
164 
+        </div>
165 
+    </body>
166 
+</html>