-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
35 lines (34 loc) · 2.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite & IPFS</title>
</head>
<body>
<div id="app" class="flex flex-col justify-center bg-zinc-800 text-zinc-100 h-screen">
<div class="mt-3 flex-col mx-auto">
<h1 class="mb-5 text-center text-2xl ">Image below is loaded through an in browser IPFS Node.</h1>
<img id="my-image" class="hidden shadow-xl" alt="image loaded through a in browser IPFS node" src="">
<div id="loader" class="w-1/2 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve"><path fill="#fff" d="M31.6 3.5C5.9 13.6-6.6 42.7 3.5 68.4c10.1 25.7 39.2 38.3 64.9 28.1l-3.1-7.9C44 97 19.9 86.6 11.5 65.3c-8.4-21.3 2-45.4 23.3-53.8l-3.2-8z"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/></path>
<path fill="#fff"
d="M42.3 39.6c5.7-4.3 13.9-3.1 18.1 2.7 4.3 5.7 3.1 13.9-2.7 18.1l4.1 5.5c8.8-6.5 10.6-19 4.1-27.7-6.5-8.8-19-10.6-27.7-4.1l4.1 5.5z"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"/></path>
<path fill="#fff"
d="M82 35.7C74.1 18 53.4 10.1 35.7 18S10.1 46.6 18 64.3l7.6-3.4c-6-13.5 0-29.3 13.5-35.3s29.3 0 35.3 13.5l7.6-3.4z"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/></path></svg>
</div>
<p id="peers" class="mt-3 text-center"></p>
</div>
<footer class="flex flex-col-reverse flex-grow mx-auto">
<p class="pb-8 text-sm">
<a class="underline" href="https://github.com/craftpunks/ipfs-vite-boilerplate"
title="Source code on github">
Source Code
</a>
</p>
</footer>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>