-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
360 lines (333 loc) · 17.3 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
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/favicon.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<title>Scribed-Bricks</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&display=swap');
body {
background: linear-gradient(to bottom, #c3ff02, #fff);
background-attachment: fixed; /* Set the background to be fixed */
margin: 0;
padding: 0;
font-family: 'Orbitron', sans-serif;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
margin: 10px;
overflow-x: hidden;
margin: 0 auto;
image-rendering: pixelated;
}
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: auto;
}
.image-item {
display: flex;
height: 240px;
width: 200px;
flex-direction: column;
text-align: center;
word-wrap: break-word;
overflow: hidden;
margin: auto;
background: black;
color: white;
text-decoration: none;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.image-item img {
width: 100%;
height: auto;
max-width: 200px;
max-height: 200px;
object-fit: cover;
cursor: pointer;
/* Add cursor pointer to indicate clickability */
}
.image-index {
margin: 5px;
font-size: 20px;
color: #fff;
}
header {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 20px;
}
@media (max-width: 768px) {
header {
flex-direction: column; /* Change to column layout on mobile */
text-align: center; /* Center text within the header */
}
}
.button {
background: #c2ff03;
font-size: 16px;
font-family: 'Orbitron', sans-serif;
margin: 10px;
}
.container {
overflow-x: hidden;
margin: 40px 40px;
padding: 0;
}
.red-x {
display: none;
font-size: 200px;
color: red;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9999;
justify-content: center;
align-items: center;
}
audio {
display: none;
}
.options {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
padding: 10px;
}
h1 {
font-size: 100px;
}
h4 {
text-align: center;
}
</style>
<title>Image Gallery</title>
</head>
<body>
<header>
<a href="https://twitter.com/Tigerchops_NFT">
<img width='40px' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAAAAACpleexAAAAxHpUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjabVBbDsQgCPz3FHsEeWjxOPaxyd5gj79QsKmbTuKADBmRdHw/7/QyIHDiskhttWYFN27YNZHs6CdD5pNP4NBgrqdLQC2RRvKr1OgfdbgMPHTNys1IthDWWWh8TTAboQeyiSzfw6iFEaELEAbdv5Vrk+X+hfXIM8RPMsIt2sYe/u686Pb2ou8Q4kFAWZmIfQCyQ4m6JqIMJNoIVDQ30VjCTBfytKeB9AMbnll2qArGiQAAASJpQ0NQSUNDIHByb2ZpbGUAAHicnZC/SsNQFMZ/qVKLqIOKgzhkcO1oJgf/YXAo1DSC0SlNWiwmMSQpxTfwTfRhOgiCr+Cu4Ox3o4ODWbzwcX4czvm+ey+07CRKy8UDSLOqcL3D4DK4spfe6LDOmtQOozLvDU59Gs/nK5apL13j1Tz352nHozJSnUtZlBcVWPtiZ1blhiU2b33vWPwgtuM0i8VP4t04jQ2bXS9NptGPp7nNyii7GJi+tIPLGT362AyZMiGhoquaqXOCw56qS0HIPSWRasJIvZlmKm5EpZxcjkS+SLdpyNuu8/pKGcpjIi+TcEcqT5OH+d/vtY/zetPamudhEdatBak1HsP7I6wGsPEMy9cNWZ3fb2uYceqZf77xC+gjUGSeiiDtAAANdmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDoxMmQyN2Y3MC03NmNjLTQ4MjYtODdmYi04NzQwNWY3OGI2NWQiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M2RiYmI5MTMtYmJkZC00ZmNjLWJlMmYtYmY1MjdiNDFlM2ExIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDJiODU2NzYtYWI5MC00OTAwLTg2NDAtNzQ3MDRlOTE2OGJhIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIKICAgR0lNUDpUaW1lU3RhbXA9IjE2OTIzNjg0MzgwMDUxNDEiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4zNCIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjM6MDg6MThUMTU6MjA6MjgrMDE6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIzOjA4OjE4VDE1OjIwOjI4KzAxOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjQ5MGNkZmYtNGJhNC00NWE2LTk2MWItYjU0NjVhZTc5NGZiIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIgogICAgICBzdEV2dDp3aGVuPSIyMDIzLTA4LTE4VDE1OjIwOjM4Ii8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pl6E7cEAAAAJcEhZcwAALiMAAC4jAXilP3YAAACeSURBVDjL7c+hDkEBGIbhh9kEV2A7s9mMwB2YZKZqgmKaKxCIis0mG8EFCKp0JEFWVHcgmEg9JDs03vbt//bu+/nzKySioWTqbiZEU80ocku+a0xFw8nVwVCobGDwVEzG2kjOwlFawdI6njH1HM82qgL7F1/8jbCzVddw/5JxLJATyut95eu+ipaOtpuu1ccbiya6LpjLyqjHMf75HR5FMRr2RYUVaAAAAABJRU5ErkJggg==" alt="X">
</a>
<h1></h1>
<a id="logo" href="/"><img src="https://raw.githubusercontent.com/Tigerchops/Scribed-BricksAssests/master/Media/Scribed-Bricks_solidLogo.svg" style="width:600px;height:150px;object-fit: cover;" alt="Scribed-Bricks logo"></a>
<button class="button" id="connectButton">Connect</button>
</header>
<p><div style="text-align: center;"><h4><strong id="mintStatus">Minted <span class="minted"></span> / 5,000 Supply</strong></h4></div></p>
<div class='container' id='container'>
<div class="image-grid" id="imageGrid"></div>
</div>
<div class='options'>
<button id="loadMoreButton" class="button">Load More</button>
<button id="randomButton" class="button">Random Page</button>
</div>
<div class="red-x" id="redX">BRICKED</div>
<audio id="audioElement" controls>
<source src="https://www.orangefreesounds.com/wp-content/uploads/2014/08/Wrong-answer-sound-effect.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<script>
const imageGrid = document.getElementById('imageGrid');
const loadMoreButton = document.getElementById('loadMoreButton');
const batchSize = 1000; // Number of images to load at once
let currentIndex = 1; // Starting index for images
//let existingMessageCount = 0; //Mint counter
const hashedURIs = [];
const loadImageBatch = async () => {
for (let i = currentIndex; i <= Math.min(currentIndex + batchSize, 5000); i++) {
//const imageUrl = `https://raw.githubusercontent.com/Tigerchops/Scribed-Bricks/e6f290077c1c01ebd057b5c3c8f05d74d499fb80/images/${i}.png`;
const imageUrl = `https://raw.githubusercontent.com/Tigerchops/Scribed-BricksAssests/04c3965ad5492ab39a9acd33f86bfb7419161c37/images/${i}.png`;
const imageItem = document.createElement('div');
imageItem.className = 'image-item';
const image = document.createElement('img');
image.src = imageUrl;
image.alt = 'Image';
imageItem.appendChild(image);
const imageIndex = document.createElement('div');
imageIndex.className = 'image-index';
imageIndex.textContent = `#${i}`;
imageItem.appendChild(imageIndex);
// Attach click event to each image
image.addEventListener('click', async () => {
const dataUri = await getImageDataUri(imageUrl);
console.log(dataUri);
inscribeButtonClick(dataUri);
});
imageGrid.appendChild(imageItem);
}
const postHashedURIs = () => {
const jsonData = JSON.stringify(hashedURIs);
const blob = new Blob([jsonData], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'results.json';
a.textContent = 'Download results.json';
document.body.appendChild(a);
};
// Simulate writing to results.json (replace with actual logic)
//console.log('Hashed URIs:', hashedURIs);
//};
currentIndex = Math.min(currentIndex + batchSize + 1, 5000); // Update currentIndex
// Hide the "Load More" button if all images have been loaded
if (currentIndex > 5000) {
loadMoreButton.style.display = 'none'; postHashedURIs(); // Call the function to post hashed URIs
}
};
const getImageDataUri = async (imageUrl) => {
const response = await fetch(imageUrl);
const blob = await response.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(blob);
});
};
loadMoreButton.addEventListener('click', () => {
loadImageBatch();
if (currentIndex > 5000) {
loadMoreButton.style.display = 'none';
postHashedURIs(); // Call the function to post hashed URIs
}
});
//loadMoreButton.addEventListener('click', loadImageBatch);
// Initialize the Web3 object with a provider
// For example, if using MetaMask:
web3 = new Web3(window.ethereum);
// Connect button click handler
document.getElementById('connectButton').addEventListener('click', function() {
// Request account access from the user
ethereum.request({
method: 'eth_requestAccounts'
})
.then(function(accounts) {
// Account access granted
var truncatedAddress = truncateAddress(accounts[0], 6); // Truncate to 6 characters
document.getElementById('connectButton').innerHTML = truncatedAddress;
console.log('Connected:', accounts[0]);
})
.catch(function(error) {
// Account access denied
console.log('Connection error:', error);
});
});
// Helper function to truncate wallet address
function truncateAddress(address) {
if (!address) return '';
return address.slice(0, 5) + '...' + address.slice(-4);
}
// Check if wallet is already connected
ethereum.request({
method: 'eth_accounts'
})
.then(function(accounts) {
if (accounts.length > 0) {
var truncatedAddress = truncateAddress(accounts[0]); // Truncate to 6 characters
document.getElementById('connectButton').innerHTML = truncatedAddress;
console.log('Connected:', accounts[0]);
}
})
.catch(function(error) {
console.log('Connection error:', error);
});
const randomizeStartingIndex = () => {
currentIndex = Math.floor(Math.random() * (5000 - batchSize)); // Generate a random index within the range
// Clear existing images
loadImageBatch(); // Load images with the new starting index
};
const randomButton = document.getElementById('randomButton');
randomButton.addEventListener('click', randomizeStartingIndex);
function sha256(message) {
const encoder = new TextEncoder();
const data = encoder.encode(message);
return crypto.subtle.digest('SHA-256', data).then(buffer => {
return Array.from(new Uint8Array(buffer))
.map(byte => ('00' + byte.toString(16)).slice(-2))
.join('');
});
}
// Inscribe button click handler
var inscribeButtons = document.querySelectorAll('.inscribeButton');
inscribeButtons.forEach(function(button) {
button.addEventListener('click', inscribeButtonClick);
});
// Define the click event handler function
// Define the click event handler functionws
async function inscribeButtonClick(dataUri) {
try {
const imageUrlPng = dataUri.replace('/gif', '/png'); // Replace /gif with /png in the dataUri
const hashedURI = await sha256(imageUrlPng);
hashedURIs.push(hashedURI);
console.log(hashedURI);
console.log(imageUrlPng);
const apiExist = `https://mainnet-api.ethscriptions.com/api/ethscriptions/exists/${hashedURI}`;
//const apiExist = `https://goerli-api.ethscriptions.com/api/ethscriptions/exists/${hashedURI}`;
const response = await fetch(apiExist);
const checker = await response.json();
if (!checker.result) {
var accounts = await ethereum.request({
method: 'eth_accounts'
});
// Get gas price
web3.eth.getGasPrice().then(function(gasPrice) {
// Perform the 0 ETH transfer to the user's account with the gas price
web3.eth.sendTransaction({
from: accounts[0],
to: accounts[0],
value: '0',
data: web3.utils.toHex(imageUrlPng), // Use the modified dataUri here
gasPrice: gasPrice
}, function(error, transactionHash) {
if (!error) {
console.log('Transaction successful:', transactionHash);
} else {
console.log('Transaction error:', error);
}
});
}).catch(function(error) {
console.log('Error getting gas price:', error);
});
} else {
console.log("This message already exists!");
// Display the warning overlay
const redX = document.getElementById('redX');
redX.style.display = 'flex';
// Play the audio snippet
const audioElement = document.getElementById('audioElement');
audioElement.play();
// Hide the warning overlay and stop audio after a delay
setTimeout(() => {
redX.style.display = 'none';
audioElement.pause();
audioElement.currentTime = 0;
}, 1000); // Hide after 10 seconds
}
} catch (error) {
console.log('Error:', error);
}
}
const mintedEl = document.querySelector("#mintStatus .minted");
mintedEl.textContent = "0";
fetch("/status.json")
.then((x) => x.json())
.then((x) => {
mintedEl.textContent = x.minted;
});
loadImageBatch(); // Initial load
</script>
</body>
</html>