-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
221 lines (187 loc) · 7.03 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
<!DOCTYPE HTML>
<!--
Multiverse by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Ugly Little Fooks</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<h1>
<a href="index.html">
<img src="images/Title.png" alt="Ugly Little Fooks" style="height: auto; max-width: 100%;">
By Paul Fudd
</a>
</h1>
</header>
<!-- Main -->
<div id="main"></div>
<!-- Conteneur de la modale pour afficher l'image en grand format -->
<div id="modal"
style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center;">
<img id="modal-img" style="max-width: 90%; max-height: 90%;" />
</div>
<div id="bottom">
<!-- Conteneur pour le bouton centré -->
<div id="refresh-container">
<button id="refresh-btn">Those are too UGLY</button>
</div>
<!-- Navigation -->
<nav>
<a href="#footer" class="icon solid fa-info-circle">About Us</a>
</nav>
</div>
<!-- Footer -->
<footer id="footer" class="panel">
<div class="inner split">
<div>
<section>
<h2>Ugly Little Fooks Story</h2>
<p><b>A unique NFT collection of 10,000 pieces, crafted by Paul Fudd on the Solana
blockchain.</b></p>
<p>This exclusive collection was created in just 12 hours as part of a challenge, showcasing the
incredible speed and creativity of its creator. Each NFT is a testament to the power of
rapid innovation and artistic expression.</p>
<p>Built on the Solana network, known for its speed and efficiency, this collection is part of a
larger movement of digital art and innovation. It's supported by a passionate and solid
community, united by a shared vision for pushing the boundaries of the NFT space.</p>
</section>
<section>
<h2>Follow us on ...</h2>
<ul class="icons">
<li>
<a href="https://x.com/endangered_SOL" class="icon brands fa-twitter" target="_blank"
rel="noopener noreferrer">
<span class="label">Twitter</span>
</a>
</li>
<li>
<a href="https://t.me/+v1oaW0SUHJIxZjY8" class="icon brands fa-telegram" target="_blank"
rel="noopener noreferrer">
<span class="label">Telegram</span>
</a>
</li>
<li>
<a href="https://www.tensor.trade/trade/ugly_little_fooks" class="icon" target="_blank"
rel="noopener noreferrer">
<img src="images/tensor.jpg" alt="Tensor Icon" style="width: 24px; height: 24px;">
<span class="label">Tensor</span>
</a>
</li>
<li>
<a href="https://magiceden.io/marketplace/ugly_little_fooks" class="icon"
target="_blank" rel="noopener noreferrer">
<img src="images/me.png" alt="Magic Eden Icon" style="width: 24px; height: 24px;">
<span class="label">Magic Eden</span>
</a>
</li>
</ul>
</section>
<p class="copyright">
© 2024 - Art: Ugly Little Fooks - Website: <a href="https://x.com/ThomekCrypto">Thomek</a>.
</p>
</div>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
<!-- Conteneur de la modale pour afficher l'image en grand format -->
<div id="modal"
style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center;">
<img id="modal-img" style="max-width: 90%; max-height: 90%;" />
</div>
<script>
// Fonction pour générer les images aléatoires
function generateRandomDivs() {
const mainDiv = document.getElementById("main");
const baseUrl = "https://we-assets.pinit.io/2ToA3qZ4Hahv1EHpquLZ4kU7vypud6vUrA9RTLxyfRkN/73c2ca2e-c77d-44a3-bf63-99ce9b4c8fae/";
mainDiv.innerHTML = ''; // Effacer les anciennes images
for (let i = 0; i < 12; i++) {
const randomNum = Math.floor(Math.random() * 10000) + 1;
const imageUrl = `${baseUrl}${randomNum}`;
const article = document.createElement("article");
article.classList.add("thumb");
article.style.position = "relative";
const anchor = document.createElement("a");
anchor.href = "#";
anchor.classList.add("image");
anchor.addEventListener("click", function (event) {
event.preventDefault();
openModal(imageUrl);
});
const img = document.createElement("img");
img.id = `img-${i + 1}`;
img.src = imageUrl;
img.alt = `#${randomNum}`;
img.classList.add("fade-in");
img.style.width = "100%";
img.style.height = "auto";
const heading = document.createElement("h2");
heading.textContent = `#${randomNum}`;
const buyButton = document.createElement("a");
buyButton.href = `https://magiceden.io/marketplace/ugly_little_fooks?search="${randomNum}"`;
buyButton.classList.add("buy-button");
buyButton.textContent = "Search me on";
buyButton.target = "_blank";
buyButton.rel = "noopener noreferrer";
const magicEdenIcon = document.createElement("img");
magicEdenIcon.src = "images/me.png";
magicEdenIcon.alt = "Magic Eden Icon";
magicEdenIcon.style.width = "24px";
magicEdenIcon.style.height = "24px";
magicEdenIcon.style.marginLeft = "10px";
buyButton.appendChild(magicEdenIcon);
buyButton.style.position = "absolute";
buyButton.style.bottom = "10px";
buyButton.style.right = "10px";
buyButton.style.backgroundColor = "black";
buyButton.style.color = "white";
buyButton.style.padding = "10px 20px";
buyButton.style.textDecoration = "none";
buyButton.style.borderRadius = "5px";
buyButton.style.fontSize = "14px";
buyButton.style.display = "flex";
buyButton.style.alignItems = "center";
buyButton.style.justifyContent = "center";
anchor.appendChild(img);
article.appendChild(anchor);
article.appendChild(heading);
article.appendChild(buyButton);
mainDiv.appendChild(article);
}
}
// Ajouter l'événement de rafraîchissement pour le bouton
document.getElementById("refresh-btn").addEventListener("click", function () {
generateRandomDivs(); // Appeler la fonction qui régénère les images
});
function openModal(imageUrl) {
const modal = document.getElementById("modal");
const modalImg = document.getElementById("modal-img");
modalImg.src = imageUrl;
modal.style.display = "flex";
}
document.getElementById("modal").addEventListener("click", function () {
this.style.display = "none";
});
generateRandomDivs();
</script>