-
Notifications
You must be signed in to change notification settings - Fork 0
/
sudoku_ch.html
130 lines (108 loc) · 8.45 KB
/
sudoku_ch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sudoku+</title>
<meta name="description" content=""/>
<link rel="icon" href="./assets/images/app_soduku_macos60@3x.png" type="image/x-icon"/>
<meta name="keywords" content="network & battery privacy,network,network speed,network widget,network monitor,monitor,mac,apple,imac,macbook,macbook pro,macbook air,macos,os x,mac os x,software,app,apps,mac app,productivity,utility,mac app store,app store">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="theme-color" content="#157878">
<link rel="stylesheet" type="text/css" href="assets/fonts/SFCompactRounded/font.css">
<style>
*{ padding: 0px; margin: 0px; font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif; }
body{ background-color: rgba(17, 17, 17, 1); }
.ContentWrapper{ position: relative; width: 80%; margin: 0px auto; min-width: 980px; max-width: 1080px; height: auto; background-color: rgba(46, 48, 51, 1); box-sizing: border-box; overflow: hidden; }
.ContentWrapper .SectionBox{ position: relative; width: 100%; height: 800px; overflow: hidden; }
.ContentWrapper .SectionBox .BigTitleBox{ position: relative; width: 100%; height: 300px; }
.ContentWrapper .SectionBox .BigTitleBox img{ position: absolute; left: 50%; top: 72px; transform: translateX(-50%); width: 100px; height: 100px; }
.ContentWrapper .SectionBox .BigTitleBox .BigTitle{ position: absolute; left: 0; bottom: 40px; width: 100%; text-align: center; color: rgba(237, 237, 237, 1); font-size: 2.6rem; font-weight: 600; }
.ContentWrapper .SectionBox.Features{ background-color: rgba(28, 28, 30, 1); color: rgba(237, 237, 237, 1); height: auto; padding-bottom: 40px; }
.ContentWrapper .SectionBox.Features .CollectionViewHeader{ position: relative; margin: 40px 0px 12px 40px; font-size: 2.0rem; font-weight: 600; }
.ContentWrapper .SectionBox.Features .RightImageView{ position: absolute; top: -10%; right: 0; height: 120%; width: 60%; }
.ContentWrapper .SectionBox.Features .CollectionView.Features{ position: relative; width: calc(100% - 80px); height: 300px; margin: 0 auto; overflow: hidden; }
.ContentWrapper .SectionBox.Features .CollectionView.Features .CollectionViewCell{ position: relative; height: 100px; width: 100%; }
.ContentWrapper .SectionBox.Features .CollectionView.Features .CollectionViewCell .WebImageAspectFillBox{ position: absolute; left: 0px; top: 50%; transform: translate(0, -50%); width: 24px; height: 24px; }
.ContentWrapper .SectionBox.Features .CollectionView.Features .CollectionViewCell .AttributedTextBox{ position: absolute; height: auto; left: 44px; top: 50%; transform: translate(0, -50%); }
.ContentWrapper .SectionBox.Features .CollectionView.Features .CollectionViewCell .AttributedTextBox .Title{ font-size: 1.0rem; font-weight: 600; }
.ContentWrapper .SectionBox.Features .CollectionView.Features .CollectionViewCell .AttributedTextBox .Content{ font-size: 1.0rem; }
.ContentWrapper .SectionBox.Features .CollectionView.Download{ position: relative; width: 100%; height: 44px; margin-top: 40px; margin-bottom: 40px; padding-left: 40px; overflow: hidden; }
.ContentWrapper .SectionBox.Features .CollectionView.Download .CollectionViewCell{ position: relative; float: left; height: 100%; width: 164px; }
.ContentWrapper .SectionBox.Features .CollectionView.Download .CollectionViewCell .ImageView{ position: absolute; top: 50%; transform: translate(0, -50%); width: auto; height: 44px; cursor: pointer; }
.ContentWrapper .SectionBox.Features .CollectionView.Download .CollectionViewCell .ImageView img{ position: absolute; top: 0; left: 0; width: auto; height: 100%; }
.ContentWrapper .SectionBox .WebImageAspectFillBox.Left{ position: absolute; left: 0; bottom: 0; height: 100%; width: 512px; }
.ContentWrapper .SectionBox .WebImageAspectFillBox.Center{ position: absolute; bottom: 40px; width: 100%; height: 400px; }
.ContentWrapper .PrivacyBox{ position: relative; margin: 40px; height: auto; color: rgba(237, 237, 237, 1); text-align: left; font-weight: 600; }
.ContentWrapper .PrivacyBox .Caption{ font-size: 2.0rem; }
.ContentWrapper .PrivacyBox .Description{ font-size: 1rem; margin-top: 20px; font-weight: 400; }
.ContentWrapper .PrivacyBox .Description .EmailButton{ cursor: pointer; }
.WebImageAspectFillBox img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 100%; max-height: 100%; }
.WebImageView img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 100%; max-height: 100%; }
.WebImageViewFlexH img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; }
.
</style>
</head>
<body>
<div class="ContentWrapper">
<div class="SectionBox" style="height: 760px">
<div class="BigTitleBox">
<img src="assets/images/sudoku/icon_sudoku_100@3x.png">
<p class="BigTitle">欢迎游玩数独+</p>
</div>
<div class="WebImageAspectFillBox Center">
<img src="assets/images/sudoku/iPhone_preview_04.png">
</div>
</div>
<div class="SectionBox Features">
<div class="CollectionViewHeader">游戏特点</div>
<div class="CollectionView Features">
<div class="CollectionViewCell">
<div class="WebImageAspectFillBox"><img src="assets/images/sudoku/star32@2x.png"></div>
<div class="AttributedTextBox">
<p class="Title">每日挑战</p>
<p class="Content">完成每日挑战来收集星星。</p>
</div>
</div>
<div class="CollectionViewCell">
<div class="WebImageAspectFillBox"><img src="assets/images/sudoku/puzzles32@2x.png"></div>
<div class="AttributedTextBox">
<p class="Title">入门到专家</p>
<p class="Content">脑力磨练，这里有超过 20,000 个数独谜题。</p>
</div>
</div>
<div class="CollectionViewCell">
<div class="WebImageAspectFillBox"><img src="assets/images/sudoku/statistics32@2x.png"></div>
<div class="AttributedTextBox">
<p class="Title">统计分析</p>
<p class="Content">追踪你的成绩，不断挑战自我！</p>
</div>
</div>
</div>
<div class="CollectionView Download">
<div class="CollectionViewCell">
<div class="ImageView"><img src="assets/images/apple/download_on_the_app_store132x44@2x.png"></div>
</div>
<div class="CollectionViewCell">
<div class="ImageView"><img src="assets/images/apple/download_on_the_mac_app_store172x44@2x.png"></div>
</div>
</div>
<div class="WebImageAspectFillBox RightImageView"><img src="assets/images/sudoku/iPhone_win_ch.png"></div>
</div>
<div class="PrivacyBox">
<p class="Caption">隐私政策</p>
<p class="Description">「数独+」不会收集您的任何个人隐私。</p>
</div>
<div class="PrivacyBox">
<p class="Caption">联系</p>
<p class="Description"><a class="EmailButton">发送邮件</a></p>
</div>
<div class="PrivacyBox">
<p class="Caption">语言</p>
<p class="Description"><a>English</a> | <a>中文</a> | <a>繁體中文</a></p>
</div>
</div>
</body>
<script>
</script>
</html>