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