-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
232 lines (225 loc) · 14.4 KB
/
index.html
File metadata and controls
232 lines (225 loc) · 14.4 KB
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title data-lang-key="title">NRT Donate — Simple Version</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" data-lang-key="meta_description" content="NRT - a blockchain platform for transparent and secure support of independent organizations via crypto donations.">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.modal {
display: none; position: fixed; z-index: 100;
left: 0; top: 0; width: 100%; height: 100%;
overflow: auto; background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe; margin: 15% auto; padding: 20px;
border: 1px solid #888; border-radius: 10px;
text-align: center; max-width: 400px;
}
.close {
color: #aaa; float: right; font-size: 28px; font-weight: bold;
}
.close:hover, .close:focus {
color: black; text-decoration: none; cursor: pointer;
}
.faq-item summary {
cursor: pointer; padding: 1rem; border-bottom: 1px solid #e5e7eb;
list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '►'; transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(90deg); }
.address-display {
font-size: 0.75rem; /* text-xs */
word-break: break-all;
}
#donationTable td code {
font-size: 0.75rem;
word-break: break-all;
font-family: monospace;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 p-4">
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<p id="modalMessage" class="text-lg"></p>
</div>
</div>
<header class="mb-8 max-w-screen-xl mx-auto">
<div class="relative flex justify-center items-center h-24">
<div class="flex items-center gap-4">
<img src="logo.png" alt="NRT Logo" class="h-20"/>
<h1 data-lang-key="title" class="text-xl md:text-2xl font-bold">Support Independent Organizations</h1>
</div>
<div class="absolute right-0 top-1/2 -translate-y-1/2 flex gap-2">
<button id="lang-en" class="text-gray-800 font-bold py-1 px-3 rounded-lg border-2 border-blue-600 transition">EN</button>
<button id="lang-ru" class="text-gray-800 font-bold py-1 px-3 rounded-lg border-2 border-transparent transition">RU</button>
</div>
</div>
<div class="text-center">
<p data-lang-key="description" class="text-lg text-gray-600"></p>
<p data-lang-key="exchange_rate_text" class="text-lg text-gray-600"></p>
</div>
</header>
<div class="grid grid-cols-1 md:grid-cols-5 gap-6 max-w-screen-xl mx-auto">
<aside class="hidden md:block md:col-span-1 space-y-6 text-sm">
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="about_title" class="text-lg font-semibold mb-2">About NRT Project</h2>
<div id="about-content"></div>
</section>
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="how_to_get_nrt_title" class="text-lg font-semibold mb-2"></h2>
<div id="how-to-get-nrt-content"></div>
</section>
<section class="bg-white p-4 rounded-lg shadow-md">
<a id="contract-link" href="contract-details-en.html" class="text-lg font-semibold mb-2 hover:text-blue-600 transition">
<h2 data-lang-key="how_contract_works_title"></h2>
</a>
</section>
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="faq_title" class="text-lg font-semibold mb-2">FAQ</h2>
<div id="faq-content"></div>
</section>
</aside>
<main class="md:col-span-3 bg-white p-6 rounded-xl shadow-lg space-y-6">
<section class="bg-gray-100 p-4 rounded-lg">
<h2 data-lang-key="wallet_title" class="text-2xl font-semibold mb-3">Wallet Connection</h2>
<div id="walletActions" class="flex flex-row gap-4 justify-center items-center">
<div id="connectButtons">
<button id="connectBrowserBtn" class="bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-300 shadow-md">
🔗 <span data-lang-key="connect_browser_button">Connect Wallet (Browser)</span>
</button>
<button id="connectMobileBtn" class="bg-blue-300 text-white font-bold py-3 px-6 rounded-lg cursor-not-allowed shadow-md">
🔗 <span data-lang-key="connect_mobile_button">Connect Wallet (Mobile, WIP)</span>
</button>
</div>
<button id="disconnectBtn" class="bg-green-800 text-white font-bold py-3 px-6 rounded-lg hover:bg-green-900 transition duration-300 shadow-md hidden">
<span data-lang-key="disconnect_button">Disconnect Wallet</span>
</button>
</div>
<p id="walletAddress" class="mt-3 text-center text-gray-700 font-mono address-display"></p>
</section>
<section class="bg-gray-100 p-4 rounded-lg">
<h2 data-lang-key="token_selection_title" class="text-2xl font-semibold mb-3">Select Donation Token (polygon)</h2>
<div class="flex gap-4 justify-center flex-wrap">
<label class="flex items-center space-x-2 cursor-pointer bg-white py-2 px-4 rounded-lg shadow-sm hover:ring-2 ring-blue-500 transition duration-200">
<input type="radio" name="token" id="radio-usdt" value="usdt" class="h-4 w-4 text-blue-600" checked />
<span class="text-lg">USDT</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer bg-white py-2 px-4 rounded-lg shadow-sm hover:ring-2 ring-blue-500 transition duration-200">
<input type="radio" name="token" id="radio-usdc" value="usdc" class="h-4 w-4 text-blue-600" />
<span class="text-lg">USDC (Bridget)</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer bg-white py-2 px-4 rounded-lg shadow-sm hover:ring-2 ring-blue-500 transition duration-200">
<input type="radio" name="token" id="radio-dai" value="dai" class="h-4 w-4 text-blue-600" />
<span class="text-lg">DAI</span>
</label>
</div>
</section>
<section class="bg-gray-100 p-4 rounded-lg">
<h2 data-lang-key="donation_type_title" class="text-2xl font-semibold mb-3">Donation Type</h2>
<div class="flex gap-4 justify-center flex-wrap">
<label class="flex items-center space-x-2 cursor-pointer bg-white py-2 px-4 rounded-lg shadow-sm hover:ring-2 ring-blue-500 transition duration-200">
<input type="radio" name="donation-type" value="custom" class="h-4 w-4 text-blue-600" checked />
<span data-lang-key="custom_button" class="text-lg">Custom Distribution</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer bg-white py-2 px-4 rounded-lg shadow-sm hover:ring-2 ring-blue-500 transition duration-200">
<input type="radio" name="donation-type" value="preset" class="h-4 w-4 text-blue-600" />
<span data-lang-key="preset_button" class="text-lg">Donate Equally</span>
</label>
</div>
</section>
<div id="presetDonation" class="bg-gray-100 p-4 rounded-lg hidden">
<h2 data-lang-key="preset_donations_title" class="text-2xl font-semibold mb-3">Donate by Preset</h2>
<p data-lang-key="preset_description" class="mb-4" id="presetDescription"></p>
<div class="flex items-center gap-4">
<input type="number" min="0.01" step="0.01" value="0.00" id="presetAmountInput" class="w-full p-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg"/>
<span id="presetTokenSymbol" class="text-lg">USDT</span>
</div>
</div>
<div id="customDonation" class="bg-gray-100 p-4 rounded-lg">
<h2 data-lang-key="donations_title" class="text-2xl font-semibold mb-3">Your Donations (<span id="tokenSymbolHeader">USDT</span>)</h2>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-200">
<th data-lang-key="org_header" class="p-3 border border-gray-300">Organization</th>
<th data-lang-key="wallet_header" class="p-3 border border-gray-300 hidden md:table-cell">Wallet</th>
<th data-lang-key="amount_header" class="p-3 border border-gray-300">Amount (<span id="tokenSymbolAmount">USDT</span>)</th>
</tr>
</thead>
<tbody id="donationTable"></tbody>
<tfoot>
<tr class="bg-gray-200 font-bold">
<td colspan="2" data-lang-key="total_amount_text" class="p-3 border border-gray-300">Total Amount</td>
<td id="totalAmount" class="p-3 border border-gray-300 text-right">0.00 USDT</td>
</tr>
</tfoot>
</table>
</div>
</div>
<section class="bg-gray-100 p-4 rounded-lg text-center">
<h2 data-lang-key="nrt_title" class="text-2xl font-semibold mb-3">You will receive</h2>
<p class="text-lg font-bold text-gray-700">
<span id="nrtAmount" class="text-2xl font-extrabold text-blue-600">0.00</span> NRT
</p>
</section>
<div class="flex justify-center">
<button id="donateBtn" class="bg-green-600 text-white font-bold text-xl py-4 px-8 rounded-lg hover:bg-green-700 transition duration-300 shadow-xl">
💸 <span data-lang-key="donate_button">Send Donation</span>
</button>
</div>
<p id="status" class="mt-4 text-center font-bold text-lg"></p>
</main>
<aside class="hidden md:block md:col-span-1 space-y-6 text-sm">
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="voting_title" class="text-lg font-semibold mb-2">Use NRT in Votings</h2>
<div id="voting-content" class="space-y-3">
<p>
<span data-lang-key="voting_p1_link"></span>
<span data-lang-key="voting_p1"></span>
</p>
<p data-lang-key="voting_p3"></p>
</div>
</section>
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="plans_title" class="text-lg font-semibold mb-2">Our Plans</h2>
<div id="plans-content"></div>
</section>
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="discussions_title" class="text-lg font-semibold mb-2"></h2>
<div id="discussions-content"></div>
</section>
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="how_to_buy_crypto_title" class="text-lg font-semibold mb-2"></h2>
<div id="how-to-buy-crypto-content"></div>
</section>
<section class="bg-white p-4 rounded-lg shadow-md">
<h2 data-lang-key="contact_title" class="text-lg font-semibold mb-2">Contact Us</h2>
<form id="contactForm" action="https://formspree.io/f/xrblykve" method="POST" class="space-y-2">
<input type="email" name="_replyto" placeholder="Email" class="w-full p-2 border rounded" />
<textarea name="message" rows="3" placeholder="Message" class="w-full p-2 border rounded"></textarea>
<button type="submit" class="w-full bg-blue-600 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">Send</button>
<p id="contactStatus" class="text-xs text-center"></p>
</form>
</section>
</aside>
</div>
<footer class="mt-8 pt-6 border-t border-gray-300 text-sm text-gray-500 max-w-screen-xl mx-auto text-center">
<p>
<b data-lang-key="technical_details_title">Technical Details</b>:
<span data-lang-key="technical_details_network">Network: Polygon</span>,
<span data-lang-key="technical_details_contract">NRT Contract</span>: <a href="https://polygonscan.com/address/0xE61FEb2c3278A6094571ce12177767221cA4b661" target="_blank" class="text-blue-500 hover:underline"><code class="address-display">0xE61FEb2c3278A6094571ce12177767221cA4b661</code></a>,
<span data-lang-key="technical_details_source_code">Source Code</span>: <a href="https://github.com/NRT314/assets/blob/main/contract.sol" target="_blank" class="text-blue-500 hover:underline">github.com/NRT314/assets</a>
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/ethers@6.6.2/dist/ethers.umd.min.js"></script>
<script src="script.js"></script>
</body>
</html>