-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (162 loc) · 6.22 KB
/
index.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Farm of Life - Home</title>
<style>
:root {
--background-color: #ffffff;
--text-color: #000000;
--link-color: #007acc;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px;
background-color: var(--background-color);
color: var(--text-color);
}
h1 {
margin-bottom: 20px;
}
.navigation-links {
margin-top: 10px;
}
.navigation-links a, .navigation-links select {
margin: 0 10px;
text-decoration: none;
color: var(--link-color);
background-color: transparent;
border: none;
cursor: pointer;
font-size: 16px;
}
.navigation-links a:hover, .navigation-links select:hover {
text-decoration: underline;
}
.wallet-container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.wallet-container h1 {
margin-bottom: 20px;
}
.connect-button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #3498db;
border: none;
border-radius: 5px;
cursor: pointer;
}
.connect-button:hover {
background-color: #2980b9;
}
.status {
margin-top: 20px;
font-size: 14px;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #121212;
--text-color: #ffffff;
--link-color: #40c4ff;
}
.wallet-container {
background-color: #222;
color: #fff;
}
}
@media (prefers-color-scheme: light) {
:root {
--background-color: #ffffff;
--text-color: #000000;
--link-color: #007acc;
}
}
</style>
</head>
<body>
<h1>Welcome to Conway's Farm of Life</h1>
<div class="navigation-links">
<select id="play-dropdown" onchange="handlePlayOptionChange()">
<option value="">Play</option>
<option value="free">Free</option>
<option value="limit">Limit</option>
<option value="action">Action</option>
</select>
<a href="about.html" aria-label="Learn more about Conway's Farm of Life">About</a>
</div>
<div class="wallet-container">
<h1>Connect Your TON Wallet</h1>
<button class="connect-button" id="connectButton">Connect Wallet</button>
<div class="status" id="status"></div>
<div class="loading" id="loading" style="display: none;">Connecting...</div>
</div>
<!-- Load TON Connect UI script -->
<script src="https://unpkg.com/@tonconnect/ui@^0.3.0/dist/tonconnect-ui.min.js" onload="initTonConnect()" onerror="handleScriptError()"></script>
<script>
function handlePlayOptionChange() {
const selectedValue = document.getElementById('play-dropdown').value;
if (selectedValue) {
switch (selectedValue) {
case 'free':
window.location.href = 'cfol_f.html';
break;
case 'limit':
window.location.href = 'cfol_l.html';
break;
case 'action':
window.location.href = 'cfol_a.html';
break;
}
}
}
function handleScriptError() {
document.getElementById('status').innerText = 'Failed to load TON Connect script. Please check your internet connection and try again. If the problem persists, visit our support page for more help.';
}
function initTonConnect() {
const manifestUrl = 'https://bafybeif7yyz6m2n7oly5kxx2sld44gn6see7iwxz7oex7xao3dtxbk7o6q.ipfs.w3s.link/tonconnect-manifest.json'; // Replace with your manifest URL
const tonConnect = new TonConnectUI({
manifestUrl: manifestUrl,
buttonRootId: 'connectButton',
});
tonConnect.onStatusChange((status) => {
const loadingElement = document.getElementById('loading');
const statusElement = document.getElementById('status');
if (loadingElement && statusElement) {
loadingElement.style.display = 'none';
if (status.connected) {
statusElement.innerText = `Connected to ${status.account.address}`;
} else if (status.notFound) {
statusElement.innerText = 'TON provider not found. Please install a TON wallet extension.';
} else if (status.error) {
statusElement.innerText = `Error connecting wallet: ${status.error.message}. Please ensure your TON wallet extension is up to date and properly configured.`;
}
}
});
const connectButton = document.getElementById('connectButton');
if (connectButton) {
connectButton.addEventListener('click', () => {
const statusElement = document.getElementById('status');
const loadingElement = document.getElementById('loading');
if (statusElement && loadingElement) {
statusElement.innerText = '';
loadingElement.style.display = 'block';
tonConnect.connect();
}
});
}
}
</script>
</body>
</html>