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