tokono.ma
1<!doctype html>
2<html class="font-body fixed left-0 top-0 h-screen w-full overflow-hidden" lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="media-controllable" />
6 <meta name="apple-mobile-web-app-capable" content="yes" />
7
8 <title>Diffuse</title>
9
10 <meta
11 name="description"
12 content="A music player that connects to your cloud/distributed storage, in the form of a static, serverless, web application."
13 />
14
15 <!-- Viewport -->
16 <meta name="viewport" content="width=device-width, initial-scale=1" />
17
18 <!-- Favicons & Mobile -->
19 <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
20 <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
21 <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
22 <link rel="manifest" href="site.webmanifest" />
23 <link rel="mask-icon" href="safari-pinned-tab.svg" color="#8a90a9" />
24 <meta name="msapplication-TileColor" content="#8a90a9" />
25 <meta name="theme-color" content="#8a90a9" />
26
27 <!-- Stylesheets -->
28 <meta name="color-scheme" content="dark light" />
29 <link rel="stylesheet" href="application.css" />
30
31 <!-- Preload -->
32 <link rel="modulepreload" href="js/brain/index.js" />
33
34 <link rel="preload" href="images/diffuse__icon-dark.svg" as="image" crossorigin />
35 <link rel="preload" href="fonts/Montserrat/Variable/variable.woff2" as="font" crossorigin />
36
37 <!-- Scripts -->
38 <script defer src="js/ui.elm.js"></script>
39 <script defer type="module" src="js/ui/index.js"></script>
40 </head>
41
42 <body>
43 <main id="elm">
44 <!--
45
46 APPLICATION PLACEHOLDER
47 =======================
48
49 This `noscript` element will be shown if Javascript is disabled.
50
51 -->
52 <noscript data-nosnippet>
53 <div
54 class="font-body flex h-screen flex-col items-center justify-center px-4 text-center text-base italic leading-relaxed text-white"
55 >
56 <a class="logo mb-5 block" href="../">
57 <img src="../images/diffuse-light.svg" />
58 </a>
59
60 <p class="opacity-60">We'll need some Javascript to liven the place up a bit.</p>
61 </div>
62 </noscript>
63 </main>
64
65 <!-- Insert loader -->
66 <script>
67 document.getElementById("elm").innerHTML = `
68 <div class="flex h-screen items-center justify-center">
69 <div>
70 <svg class="loading-animation mx-auto" height="29" width="29" viewbox="0 0 30 30">
71 <circle class="loading-animation__circle" cx="15" cy="15" fill="none" r="14" stroke-linecap="round" stroke-width="2"></circle>
72 </svg>
73 <div class="italic mt-5 text-white text-opacity-30">
74 Loading application
75 </div>
76 </div>
77 </div>
78 `;
79 </script>
80 </body>
81</html>