-
Notifications
You must be signed in to change notification settings - Fork 0
/
sudoku.html
131 lines (109 loc) · 8.49 KB
/
sudoku.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
131
<!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); }
body *{ font-family: "SF Compact Rounded"; }
.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">Play Sudoku Everywhere</p>
</div>
<div class="WebImageAspectFillBox Center">
<img src="assets/images/sudoku/iPhone_preview_04.png">
</div>
</div>
<div class="SectionBox Features">
<div class="CollectionViewHeader">Features</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">Daily Challenge</p>
<p class="Content">Complete Daily Challenge to collect stars!</p>
</div>
</div>
<div class="CollectionViewCell">
<div class="WebImageAspectFillBox"><img src="assets/images/sudoku/puzzles32@2x.png"></div>
<div class="AttributedTextBox">
<p class="Title">Easy to Expert</p>
<p class="Content">Train your brian with over 20,000 puzzles.</p>
</div>
</div>
<div class="CollectionViewCell">
<div class="WebImageAspectFillBox"><img src="assets/images/sudoku/statistics32@2x.png"></div>
<div class="AttributedTextBox">
<p class="Title">Statistics</p>
<p class="Content">Track your progress, challenge yourself!</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.png"></div>
</div>
<div class="PrivacyBox">
<p class="Caption">Privacy Policy</p>
<p class="Description">Sudoku+ does not collect any of your personal data.</p>
</div>
<div class="PrivacyBox">
<p class="Caption">Contact</p>
<p class="Description"><a class="EmailButton">Send us Email</a></p>
</div>
<div class="PrivacyBox">
<p class="Caption">Language</p>
<p class="Description"><a>English</a> | <a>中文</a> | <a>繁體中文</a></p>
</div>
</div>
</body>
<script>
</script>
</html>