-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·513 lines (457 loc) · 27.6 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
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
<!doctype html>
<html lang="en">
<head>
<link href="vendor/[email protected]/css/all.min.css" rel="stylesheet" type="text/css" />
<link href="vendor/[email protected]/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="vendor/[email protected]/js/bootstrap.bundle.min.js" ></script>
<link href="styles/fonts.css" rel="stylesheet" type="text/css" />
<link href="styles/primitives.css" rel="stylesheet" type="text/css" />
<link href="styles/sections.css" rel="stylesheet" type="text/css" />
<link href="styles/components.css" rel="stylesheet" type="text/css" />
<title>Dogebox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#0d0d0d">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- image preloads -->
<link rel="preload" href="/img/2.jpg" as="image">
<link rel="preload" href="/img/2S.png" as="image">
<link rel="preload" href="/img/2SM.png" as="image">
<meta name="theme-color" content="#319197">
<style>
.carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #e1516c;
background-color: transparent;
transition: background-color 0.3s ease-in-out;
}
.carousel-indicators .active {
background-color: #e1516c;
border-color: #e1516c;
}
</style>
<!-- Fathom - simple analytics -->
<script src="https://cdn.usefathom.com/script.js" data-site="TCCKYFLF" defer></script>
</head>
<body>
<div id="TopAlert" class="top-alert appear">
<div class="inner">
<a href="#images-and-virtual-machines" class="statement">Run Dogebox on your own hardware today! <span class="alert-link">Let's go</span> 🚀</a>
<a href="#pre-order" class="statement">Hardware <strong>pre-orders</strong> opening soon 🙌</a>
<a href="#dismiss" class="statement close" onclick="dismissAlert(event, true)">Paw Dismiss</a>
</div>
</div>
<section class="walled bg1">
<main>
<div class="wrap">
<h1>Meet<br />Dogebox</h1>
<h3 class="shadowed" style="margin-top: 1em; margin-bottom: 1em;">
The Dogecoin ecosystem platform — decentralised and grassroots, self-hosted and secure. Build the future of Dogecoin, your way.
</h3>
<div class="primary-button-group">
<a class="button primary" onclick="dismissAlert()" href="#images-and-virtual-machines">Getting started</a>
<a class="button text small external" href="https://dogebox-docs.dogecoin.org/" target="_blank">View docs</a>
</div>
</div>
</main>
<aside>
<img id="subject" src="/img/2S.png" />
</aside>
</section>
<div class="divider"></div>
<section class="centered">
<main>
<div id="whatisDogebox" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#whatisDogebox" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#whatisDogebox" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#whatisDogebox" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" style="margin-bottom: 50px;">
<div style="max-width: 624px; margin: auto; text-align: justify;">
<article>
<p>
<span class="number-block"> <i class="fa-brands fa-dochub"></i> </span>
<strong>What is the Dogebox project?</strong><br>
Dogebox is a Linux server distribution and collection of custom software built specifically to meet the needs of the Dogecoin community.
</p>
<p>
The objective: to provide a decentralised platform for the development, distribution and self-hosting of software (we call them PUPs) that will bring real utility to the Dogecoin ecosystem and drive adoption.
</p>
<p>
Through this we envisage a system of inter-connected, open-source solutions that build on each other to help shift Dogecoin from ‘speculative asset’ to ‘useful means of exchange for all humanity’.
</p>
</article>
</div>
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<div style="max-width: 624px; margin: auto; text-align: justify;">
<article>
<p>
<span class="number-block"> <i class="fa-solid fa-code"></i> </span>
<strong>Levelling up Dogecoin development</strong><br>
A major barrier to adoption has been the technical knowledge required to safely integrate Dogecoin into existing systems. Our aim is to close the gap between ‘hardcore crypto hackers‘ and everyday devs building solutions on Dogecoin.
</p>
<p>
By making a secure, deterministic platform, built on Linux, we aim to make self-hosting these services as easy as possible for everyday Dogecoin enjoyers, while also providing robust solutions for serious businesses integrating Dogecoin into their products.
</p>
<p>
A built-in decentralised marketplace of Dogecoin Services (PUPs) which can be one-click installed and configured, gives the whole community a place to experiment with new ideas and share them around a network of Shibes interconnected across the globe.
</p>
</article>
</div>
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<div style="max-width: 624px; margin: auto; text-align: justify;">
<article class="active">
<p>
<span class="number-block"> <i class="fa-solid fa-shield-dog"></i> </span>
<strong>Democratising Dogecoin</strong>
The importance of decentralised decision making, or ‘voting-with-your-feet’, is critical to the health of the Dogecoin network. As a decentralised network with contributions from many groups and individual developers, the Dogecoin blockchain lives and dies by network consensus.
</p>
<p>
Dogebox aims to put that ability to vote into the hands of every Dogecoin user, making it easy to switch between implementations of various features, from network, to key management, to indexing and many more, without disturbing the services layered on top.
</p>
<p>
This design decision means the Dogecoin community can try out new features and decide themselves what works best for Dogecoin, without having to ‘rebuild the universe’ on top every time, nor be beholden to a technical elite group of developers who control what people run on their node.
</p>
<p>Dogecoin is not Dogecoin unless we ALL have the power to determine its future.</p>
</article>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#whatisDogebox" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#whatisDogebox" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</main>
</section>
<div class="divider"></div>
<section class="centered">
<main>
<div class="wrap">
<h1 class="spaced"><span class="tldr">tldr;</span><br>Do more with Dogecoin</h1>
<img src="/img/timeline_v1.jpg" class="timeline_img" />
</div>
</main>
</section>
<div class="divider"></div>
<section class="walled bg2 reverse">
<main>
<div class="wrap">
<h1>Run<i class="fa-solid fa-users-gear heading-icon run"></i></h1>
<h3 style="margin-bottom: 1.5em">
<strong>What can I run on my Dogebox?</strong><br>Just about anything that runs on Linux can be packaged as a Dogebox PUP, However Dogebox is more than a simple server-management tool: Dogebox provides a ‘stack’ of interconnected services and APIs that make up the DRE — Dogecoin Runtime Environment.
</h3>
<div id="RunButtonGroup" class="button-group end">
<a class="button tab small secondary" data-name="3C" data-target="#RunGraphic" onClick="selectGraphic(event)"><i class="fa-solid fa-share-nodes"></i> Dogenet</a>
<a class="button tab small secondary selected" data-name="3B" data-target="#RunGraphic" onClick="selectGraphic(event)"><i class="fa-solid fa-gears"></i> Doge Runtime Environment</a>
</div>
<div class="explainer-block lobster">
<article data-name="3C">
The Dogebox is designed to inspire the creation of services that utilise Dogecoin directly, from payment gateways like GigaWallet, to self-hosted shopping carts, to games .. anything you can imagine.<br><br>
Dogebox provides ‘Dogenet’, a unique multi-protocol network of interconnected Dogeboxes based on the same cryptographic tools as Dogecoin itself, as a means for developers to build decentralised applications that interact with the Dogecoin blockchain.<br><br>
Dogenet is the secret-sauce that will turbo-charge the Dogecoin ecosystem beyond the novelty projects we see in many other crypto communities — real decentralised systems from the ground up.
</article>
<article class="active" data-name="3B">
The DRE is being built to provide access to easy-to-understand L1 APIs such as: network, key management, transmit, block indexer, etc. that let the user swap in ‘providers’ for these interfaces. By default most interfaces are provided by Dogecoin Core, however we expect to see the community build newer, more efficient components that improve Dogecoin Layer 1.
</article>
</div>
</div>
</main>
<aside id="RunGraphic"></aside>
</section>
<div class="divider"></div>
<section class="walled bg3">
<main>
<div class="wrap">
<h1><i class="fa-solid fa-people-pulling heading-icon join"></i>Join</h1>
<h3 style="margin-bottom: 1.5em">
The Dogecoin Community means different things to different people. However many independent communities make up Dogecoin, one thing unifying us all is the network itself.
<br><br>
Dogebox makes that unity explicit by letting everyone join the network, run a node, and be part of the Dogecoin experience, no more technical barriers to play.
<br><br>
With Dogenet bringing these nodes together around communities of decentralised services you choose to run, we can’t wait to see what the community builds, here are some ideas:
</h3>
<div class="button-group start">
<a class="button tab small yellow selected" data-name="4B" data-target="#JoinGraphic" onClick="selectGraphic(event)"><i class="fa-solid fa-cart-shopping"></i> Shop</a>
<a class="button tab small yellow" data-name="4A" data-target="#JoinGraphic" onClick="selectGraphic(event)"><i class="fa-solid fa-comments"></i> Chat</a>
<a class="button tab small yellow" data-name="4C" data-target="#JoinGraphic" onClick="selectGraphic(event)"><i class="fa-solid fa-angles-right"></i> Such more</a>
</div>
<div class="explainer-block yellow">
<article data-name="4B" class="active">
<strong><i class="fa-solid fa-cart-shopping"></i> Decentralised Shopping</strong><br>
Dogebox opens the way for self-hosted shops where you run your own online store, list your own products, and they are shared around the network. This can lead to the creation of shopping aggregators marketplaces that list millions of products available in Dogecoin, without any central points of failure.
</article>
<article data-name="4A">
<strong><i class="fa-solid fa-comments"></i> Decentralised Chat</strong><br>
The Dogebox network provides the perfect environment for communities to form around individual communications channels, gathered together around a decentralised discovery network.
</article>
<article data-name="4C">
<strong><i class="fa-solid fa-angles-right"></i> What will we see next?</strong><br>
As the platform develops, further use cases will be shaped by the community's needs and the initiatives of developers within the Dogecoin ecosystem. Exciting!
</article>
</div>
</div>
</main>
<aside id="JoinGraphic"></aside>
</section>
<div class="divider"></div>
<section class="walled bg4 reverse">
<main>
<div class="wrap">
<h1>Build<i class="fa-solid fa-shapes heading-icon build"></i></h1>
<h3 style="margin-bottom: 1.5em">
A major goal of Dogebox is to encourage a cambrian-explosion of new software and services that leverage the Dogecoin blockchain, increasing adoption of Dogecoin as a means of exchange through growing utility as a currency for everyday use. If this sounds like you, get involved as a dev and <a style="color: mediumspringgreen;" href="https://discord.gg/VEUMWpThg9" target="_blank">join the discussion</a> on Discord.
</h3>
<div class="button-group end">
<a class="button tab small green" data-name="5B" data-target="#BuildGraphic" onClick="selectGraphic(event)" style="color: #000;" ><i class="fa-solid fa-bone"></i> Deploy a Pup</a>
<a class="button tab small green selected" data-name="5" data-target="#BuildGraphic" onClick="selectGraphic(event)" style="color: #000" ><i class="fa-solid fa-paw"></i> Develop a Pup</a>
</div>
<div class="explainer-block green">
<article data-name="5B">
The software you build is easily packaged as a ‘PUP’ for Dogebox with the addition of some metadata JSON and a .nix file that instructs the Dogebox how to build your software in isolation. These PUPs can be served from the comfort of GitHub, from the security of decentralised Radicle, or even from your own Dogebox itself in the future. Nobody dictates what is available to run on your Dogebox, you manage and publish your own PUP sources, and others can use them as they like, no intermediaries.
</article>
<article data-name="5" class="active">
The Dogecoin Runtime Environment is a secure, containerised space for services that need to access the Dogecoin network and ecosystem. Leveraging standards like Linux Namespaces and Systemd with mediated access to standard API interfaces, Dogebox creates a safe way to develop applications that you can share directly with the community, built on common APIs with pluggable providers which isolates you from upstream API changes while gaining the benefits of upstream enhancements. OR if you want to go direct and call Core APIs directly you can, the power is in your hands.
</article>
</div>
<a href="#" class="more-link" data-bs-toggle="modal" data-bs-target="#screenshotsModal"><i class="fa-solid fa-images"></i>so screenshots</a>
</div>
</main>
<aside id="BuildGraphic"></aside>
<div id="BuildUnder"></div>
<div id="BuildUnder2"></div>
</section>
<div class="modal modal-xl fade" id="screenshotsModal" tabindex="-1" aria-labelledby="screenshotsModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color: #2f2f2f;">
<div class="modal-body" style="margin: auto;">
<button style="position:absolute; right: 15px; z-index:99;" type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
<div id="dogeboxScreenshots" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="0" class="active" aria-current="true" aria-label="screenshot 1"></button>
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="1" aria-label="screenshot 2"></button>
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="2" aria-label="screenshot 3"></button>
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="3" aria-label="screenshot 4"></button>
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="4" aria-label="screenshot 5"></button>
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="5" aria-label="screenshot 6"></button>
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="6" aria-label="screenshot 7"></button>
<button type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide-to="7" aria-label="screenshot 8"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" style="margin-bottom: 50px;">
<img src="/img/screenshot02.png" style="max-width: 100%; border-radius: 20px;" alt="Dogebox screenshot 1">
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<img src="/img/screenshot03.png" style="max-width: 100%; border-radius: 20px;" alt="Dogebox screenshot 2">
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<img src="/img/screenshot04.png" style="max-width: 100%; border-radius: 20px;" alt="Dogebox screenshot 4">
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<img src="/img/screenshot05.png" style="max-width: 100%; border-radius: 20px;" alt="Dogebox screenshot 5">
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<img src="/img/screenshot06.png" style="max-width: 100%; border-radius: 20px;" alt="Dogebox screenshot 6">
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<img src="/img/screenshot07.png" style="max-width: 100%; border-radius: 20px;" alt="Dogebox screenshot 7">
</div>
<div class="carousel-item" style="margin-bottom: 50px;">
<img src="/img/screenshot08.png" style="max-width: 100%; border-radius: 20px;" alt="Dogebox screenshot 8">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#dogeboxScreenshots" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<section id="pre-order" class="centered">
<main>
<div class="wrap">
<h1 class="spaced" style="text-align: center;">Get yours</h1>
<h3 style="margin-bottom: 1.5em">
We designed Dogebox to run on any hardware, but want to give eager Shibes a chance to support future development and have it all in a dedicated little box ready to go. We will offer a limited run of those Dogeboxes right here soon. <a style="color: deepskyblue;" href="https://discord.gg/VEUMWpThg9" target="_blank">Join our Discord</a> and follow us on <a style="color: deepskyblue;" href="https://x.com/dogecoinfdn" target="_blank">𝕏</a> to stay informed!
</h3>
<div id="ProductRange">
<div id="ComingSoonBanner" class="sticky-tape">
Pre-orders opening soon
</div>
<product-card
data-for="Product1"
theme="yellow"
price="TBC"
title="Standard edition"
subtitle="Stock standard, no frills"
image="/img/p1.png"
desc="Powered by RK3588, 8GB RAM, 1TB NVMe">
</product-card>
<product-card
data-for="Product2"
theme="blue"
price="TBC"
title="Founders edition"
subtitle="Turbo charged + swag"
image="/img/p2.png"
desc="Powered by RK3588, 16GB RAM, 1TB NVMe"
class="selected">
</product-card>
<product-card
data-for="Product3"
theme="purple"
price="TBC"
title="Full B0RK!"
subtitle="Super Turbo charged + ALL swag"
image="/img/p3.png"
desc="Powered by RK3588, 16GB RAM, 2TB NVMe">
</product-card>
</div>
<div id="OptionPicker" class="picker">
<div id="Product1" class="dot"></div>
<div id="Product2" class="dot selected"></div>
<div id="Product3" class="dot"></div>
</div>
</div>
</main>
</section>
<div class="divider or"></div>
<section class="centered" id="images-and-virtual-machines">
<main>
<div class="wrap">
<h1 class="spaced">Do it your way</h1>
<h3 style="margin-bottom: 1.5em">
Run the fully open-source software FREE today (and forever) on your own hardware.
</h3>
<div id="DiyRange">
<a href="https://github.com/dogeorg/dogebox" class="no-deco" target="_blank">
<div class="grid-item">
<span class="title"><i class="fa-solid fa-wrench"></i>Run</span>
<img src="/img/diy_1.png" />
<span class="subtitle">Run Dogebox on your existing hardware</span>
<span class="example"></span>
</div>
</a>
<a href="https://dogebox-docs.dogecoin.org/install.html#diy-installation-options" class="no-deco" target="_blank">
<div class="grid-item">
<span class="title" style="background: var(--color-lobster);"><i class="fa-solid fa-cart-shopping"></i>Buy</span>
<img src="/img/diy_2.png" />
<span class="subtitle">Buy compatible hardware directly, self assemble and install.</span>
<span class="example"></span>
</div>
</a>
<a href="https://github.com/dogeorg/dogebox/releases" class="no-deco" target="_blank">
<div class="grid-item">
<span class="title" style="background: var(--color-green);"><i class="fa-solid fa-download"></i>Images</span>
<img src="/img/diy_3.png" />
<span class="subtitle">Download and run Dogebox images wherever and however you like</span>
<span class="example"></span>
</div>
</a>
<a href="https://github.com/dogeorg/dogebox/releases" class="no-deco" target="_blank">
<div class="grid-item">
<span class="title" style="background:#91a0ff"><i class="fa-solid fa-cloud-arrow-down"></i>VM Images</span>
<img src="/img/diy_4.png" />
<span class="subtitle">Download and run images for popular virtual machine platforms</span>
<span class="example"></span>
</div>
</a>
</div>
<a href="https://dogebox-docs.dogecoin.org/install.html" class="more-link" style="margin-top:1em;" target="_blank">View images and documentation</a>
</div>
</main>
<aside></aside>
</section>
<site-footer></site-footer>
<script>
const picker = document.getElementById("OptionPicker");
const range = document.getElementById("ProductRange");
const dots = picker.querySelectorAll(".dot");
for (dot of dots) {
dot.addEventListener("click", handleDotClick);
}
function handleDotClick(e) {
for (dot of dots) {
dot.classList.remove("selected");
}
e.target.classList.add("selected");
const selectedDot = e.target.id;
range.querySelectorAll('product-card').forEach((card) => {
card.classList.remove('selected');
});
const nextCard = range.querySelector(`[data-for="${selectedDot}"]`);
nextCard.classList.add('selected');
switch (selectedDot) {
case "Product1":
range.style.transform = "translateX(346px)";
break;
case "Product2":
range.style.transform = "translateX(0px)";
break;
case "Product3":
range.style.transform = "translateX(-346px)";
break;
}
}
</script>
<script>
function selectGraphic(event) {
const graphic = event.target.getAttribute('data-name');
const target = event.target.getAttribute('data-target');
const targetEl = document.querySelector(target);
const buttonGroup = event.target.parentNode;
const articleWrap = buttonGroup.parentNode;
const targetArticle = articleWrap.querySelector(`article[data-name="${graphic}"]`);
buttonGroup.querySelectorAll('.button').forEach((b) => {
b.classList.remove('selected');
});
articleWrap.querySelectorAll('article').forEach((a) => {
a.classList.remove('active');
});
event.target.classList.add('selected');
targetEl.style.backgroundImage = `url("../img/${graphic}.jpg")`;
targetArticle.classList.add('active');
}
</script>
<script>
function dismissAlert(e, dismiss) {
if (dismiss) {
e.preventDefault();
}
var alertEl = document.getElementById("TopAlert");
alertEl.classList.add('tuck');
}
</script>
<script>
// (function () {
// var script = document.createElement("script");
// script.src = "https://cdn.jsdelivr.net/npm/eruda";
// document.body.append(script);
// script.onload = function () {
// eruda.init();
// };
// })();
</script>
<script type="module" src="/components/product-card.js"></script>
<script type="module" src="/components/site-footer.js"></script>
</body>
</html>