-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
42 lines (42 loc) · 2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DashPets</title>
</head>
<body>
<div id="app"></div>
<button id="clearSelection">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 24px; height: 24px;">
<path stroke-linecap="round" stroke-linejoin="" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#ff0079" style="margin-left: 12px; margin-top: 5px; width: 20px; height: 20px;">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
</button>
<div id="startScreen" style="display: none;">
<img src="public/assets/cat/sit.png" alt="Funny Pet 1" />
<h1>DashPets</h1>
<p>
Transforms data into a cute cat, a happy dog or cool t-rex in your dashboard. Filter, interact, and have fun!
</p>
<div class="steps">
<h2>Get Started</h2>
<ul>
<li>Add any category to <b>'Pets'</b> to generate pets.</li>
<li>Add a measure to <b>'Size'</b> to give the pets a size (optional).</li>
<li>Add a measure to <b>'Target'</b> to give the pets a target (optional).</li>
<li>If the target is not reached, the pets will become a hatchable egg.</li>
</ul>
</div>
<div class="pet-images">
<img src="public/assets/marks_card.png" alt="Funny Pet 1" />
<img src="public/assets/dog_beige/sleep1.png" alt="Funny Pet 2" />
<img src="public/assets/cat_orange/sit.png" alt="Funny Pet 2" />
</div>
</div>
<canvas id="gameCanvas" style="display: none"></canvas>
<script type="module" src="/src/main.ts"></script>
</body>
</html>