forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1---
2layout: layouts/diffuse.vto
3
4styles:
5 - styles/base.css
6 - styles/diffuse/page.css
7 - vendor/@phosphor-icons/web/bold/style.css
8 - vendor/@phosphor-icons/web/fill/style.css
9---
10
11<style>
12 .dither-mask {
13 position: relative;
14 }
15
16 .features {
17 color: var(--accent-twist-1);
18 font-size: var(--fs-lg);
19 font-weight: 700;
20 line-height: var(--leading-snug);
21 margin: var(--space-md);
22 opacity: 0.6;
23 text-transform: capitalize;
24
25 @media (min-width: 63rem) {
26 /*inset: 0;*/
27 margin: var(--space-lg);
28 /*position: absolute;*/
29 }
30
31 @media (min-width: 84rem) {
32 margin: var(--space-xl);
33 }
34 }
35</style>
36
37<header>
38 <div>
39 <h1 hidden>Diffuse</h1>
40 <div class="diffuse-logo-container">
41 {{ await comp.diffuse.logo() }}
42 {{ await comp.diffuse.status() }}
43 </div>
44 <p class="construct dither-mask" style="color: var(--accent)">
45 Your audio<br />your data<br />your rules
46 </p>
47 <p>
48 Diffuse is cooperative and malleable software that makes it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital audio listening experience for you.
49 </p>
50 <p style="align-items: center; display: flex; gap: var(--space-2xs); opacity: 0.55;">
51 <i class="ph-fill ph-crane"></i>
52 <strong style="font-weight: 700;">WORK IN PROGRESS</strong>
53 </p>
54 <p style="margin-top: var(--space-lg)">
55 <a class="button button--bg-accent" href="dashboard/">
56 Open Diffuse
57 </a>
58 </p>
59 <p>
60 <a class="button button--subtle" href="guide/">
61 I'm new here, guide me
62 </a>
63 </p>
64 <p style="margin-top: var(--space-lg)">
65 <small style="line-height: var(--leading-relaxed)">
66 Like using Diffuse? <a href="https://ko-fi.com/toko">Support with a donation!</a><br />
67 Built with <a href="elements/">Diffuse elements</a><br />
68 Created by <a href="https://bsky.app/profile/tokono.ma">tokono.ma</a>
69 </small>
70 </p>
71 <footer>
72 <nav>
73 <a href="https://ko-fi.com/toko" title="Support with a donation"><i class="ph-fill ph-tip-jar"></i></a>
74 <a href="https://github.com/icidasset/diffuse" title="Source code (GitHub)"><i class="ph-fill ph-github-logo"></i></a>
75 <a href="https://tangled.org/tokono.ma/diffuse" title="Source code (Tangled)"><i class="ph-fill ph-barn"></i></a>
76 <a href="https://discord.gg/KUnhstJV" title="U&A Discord #diffuse channel"><i class="ph-fill ph-discord-logo"></i></a>
77 <a href="https://bsky.app/profile/diffuse.sh" title="Follow updates on Bluesky"><i class="ph-fill ph-butterfly"></i></a>
78 </nav>
79 </footer>
80 </div>
81 <div class="dither-mask filler filler--bg-accent" style="border-radius: var(--radius-lg); overflow: hidden"></div>
82</header>
83
84<main>
85 <div class="dither-mask filler filler--bg-accent" style="border-radius: var(--radius-lg); overflow: hidden">
86 <section class="features">
87 <span>Infinite variety of interfaces</span>
88 <span style="opacity: 0.4">Choose what your audio player looks like</span>
89 <span>Endless optional features</span>
90 <span style="opacity: 0.4">Adjust the software to your needs</span>
91 <span>Bring audio from all kinds of sources</span>
92 <span style="opacity: 0.4">Audio files and streams</span>
93 <span>Multiple data syncing options</span>
94 <span style="opacity: 0.4">Export & Import</span>
95 </section>
96 </div>
97</main>
98
99<script type="module">
100 import { versionUpgrade } from "./common/pages/version-upgrade.js";
101 versionUpgrade();
102</script>