forked from codeyam-ai/Sui8192
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mobile.html
98 lines (94 loc) · 7.87 KB
/
mobile.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
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3KX75YDDR9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3KX75YDDR9');
</script>
<meta charset="utf-8">
<title>SUI 8192</title>
<link href="style/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
</head>
<body class="mobile signed-in signed-out dark">
<div id="container" class="container">
<div class="spinner" id="initial-spinner">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24">
<style>.spinner_jCIR{animation:spinner_B8Vq .9s linear infinite;animation-delay:-.9s}.spinner_upm8{animation-delay:-.8s}.spinner_2eL5{animation-delay:-.7s}.spinner_Rp9l{animation-delay:-.6s}.spinner_dy3W{animation-delay:-.5s}@keyframes spinner_B8Vq{0%,66.66%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:6px;height:12px}33.33%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:1px;height:22px}}</style>
<rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12"/>
</svg>
</div>
<div id="ethos-start" class="signed-out"></div>
<div class="signed-out">
<p>
Welcome to SUI 8192. Please connect your wallet to start!
</p>
<button class='sign-in'>
Connect
</button>
</div>
<div class="signed-in">
<img src="game.png" class="game-image" style="margin-top: 36px;" />
<h2 class="center light">Your High Score</h2>
<h2 class="center purple" id="personal-high-score"></h2>
<div id="loading-games">
<div class="spinner">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24">
<style>.spinner_jCIR{animation:spinner_B8Vq .9s linear infinite;animation-delay:-.9s}.spinner_upm8{animation-delay:-.8s}.spinner_2eL5{animation-delay:-.7s}.spinner_Rp9l{animation-delay:-.6s}.spinner_dy3W{animation-delay:-.5s}@keyframes spinner_B8Vq{0%,66.66%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:6px;height:12px}33.33%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:1px;height:22px}}</style>
<rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12"/>
</svg>
</div>
</div>
<div id="games-list"></div>
<div class="mobile-leaderboard">
<h2 class="center light">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2702 18.1683H6.27025M15.2702 18.1683C16.0659 18.1683 16.829 18.4844 17.3916 19.047C17.9542 19.6096 18.2702 20.3727 18.2702 21.1683H3.27025C3.27025 20.3727 3.58632 19.6096 4.14893 19.047C4.71154 18.4844 5.4746 18.1683 6.27025 18.1683M15.2702 18.1683V14.7933C15.2702 14.1723 14.7672 13.6683 14.1452 13.6683H13.2742M6.27025 18.1683V14.7933C6.27025 14.1723 6.77425 13.6683 7.39525 13.6683H8.26725M13.2742 13.6683H8.26725M13.2742 13.6683C12.7126 12.6983 12.3769 11.6141 12.2922 10.4963M8.26725 13.6683C8.82857 12.6982 9.16388 11.614 9.24825 10.4963M12.2922 10.4963C13.3002 10.2637 14.2399 9.80174 15.0402 9.14633M12.2922 10.4963C11.2907 10.7273 10.2498 10.7273 9.24825 10.4963M9.24825 10.4963C8.24064 10.2636 7.30028 9.80161 6.50025 9.14633M4.02025 3.65434C3.03825 3.79734 2.06625 3.97134 1.10425 4.17434C1.32725 5.48312 1.97783 6.68106 2.95419 7.58071C3.93056 8.48036 5.17762 9.03095 6.50025 9.14633M4.02025 3.65434V3.91833C4.02025 6.02634 4.98625 7.90833 6.50025 9.14633M4.02025 3.65434V2.13933C6.22625 1.82833 8.48025 1.66833 10.7702 1.66833C13.0612 1.66833 15.3152 1.82833 17.5202 2.13833V3.65434M17.5202 3.65434V3.91833C17.5202 6.02634 16.5542 7.90833 15.0402 9.14633M17.5202 3.65434C18.4975 3.79654 19.47 3.96996 20.4362 4.17434C20.2133 5.48297 19.5629 6.68079 18.5867 7.58042C17.6105 8.48005 16.3627 9.03074 15.0402 9.14633" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Sui 8192 Leaderboard
</h2>
<div id="loading-leaderboard">
<div class="spinner">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24">
<style>.spinner_jCIR{animation:spinner_B8Vq .9s linear infinite;animation-delay:-.9s}.spinner_upm8{animation-delay:-.8s}.spinner_2eL5{animation-delay:-.7s}.spinner_Rp9l{animation-delay:-.6s}.spinner_dy3W{animation-delay:-.5s}@keyframes spinner_B8Vq{0%,66.66%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:6px;height:12px}33.33%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:1px;height:22px}}</style>
<rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12"/>
</svg>
</div>
</div>
<div id="leaderboard-list"></div>
<div class="more-leaderboard-area">
<button id="more-leaderboard" class="primary-button">
View More Leaders
</button>
</div>
</div>
</div>
</div>
<script src="build/index.js"></script>
</body>
</html>