tokono.ma
A music player that connects to your cloud/distributed storage.
1<main>
2 <div class="panel">
3 <p>
4 Import data from the previous version of Diffuse (v3). Upload the snapshot JSON file you
5 exported.
6 </p>
7 <hr />
8 <div class="row">
9 <label class="with-icon" for="file">
10 <i class="ph-bold ph-upload"></i>
11 <input id="file" type="file" accept=".json,application/json" />
12 </label>
13 </div>
14 <hr />
15 <div class="row">
16 <button id="import-favourites" disabled>
17 <span class="with-icon"><i class="ph-fill ph-star"></i> Import favourites</span>
18 </button>
19 </div>
20 <div class="row">
21 <button id="import-playlist-items" disabled>
22 <span class="with-icon"><i class="ph-bold ph-playlist"></i> Import playlist items</span>
23 </button>
24 </div>
25 <div id="status" class="status" hidden></div>
26 </div>
27</main>
28
29<style>
30 @import "./styles/base.css";
31 @import "./styles/wireframe/ui.css";
32 @import "./vendor/@phosphor-icons/web/bold/style.css";
33 @import "./vendor/@phosphor-icons/web/fill/style.css";
34
35 body {
36 display: flex;
37 align-items: center;
38 justify-content: center;
39 height: 100dvh;
40 }
41
42 main {
43 opacity: 0;
44 padding: var(--space-md);
45 pointer-events: none;
46 transition: opacity 750ms;
47
48 &.has-loaded {
49 opacity: 1;
50 pointer-events: auto;
51 }
52 }
53
54 p {
55 line-height: var(--leading-relaxed);
56 max-width: 42ch;
57 }
58
59 label {
60 flex: 1;
61 }
62
63 input[type="file"] {
64 flex: 1;
65 }
66
67 .status {
68 margin-top: var(--space-sm);
69 font-size: var(--text-sm);
70 }
71
72 .status--success {
73 color: var(--accent);
74
75 @media (prefers-color-scheme: dark) {
76 color: var(--accent-twist-4);
77 }
78 }
79
80 .status--error {
81 color: var(--accent-twist-5);
82
83 @media (prefers-color-scheme: dark) {
84 color: var(--accent-twist-3);
85 }
86 }
87</style>
88
89<script type="module" src="facets/data/v3-import/index.inline.js"></script>