forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1<style>
2 @import "./styles/base.css";
3 @import "./vendor/@phosphor-icons/web/bold/style.css";
4 @import "./styles/diffuse/facet.css";
5
6 @layer base, diffuse;
7
8 input[type="file"] {
9 background: none;
10 border: none;
11 padding: 0;
12 width: auto;
13 }
14
15 .status {
16 font-size: var(--fs-xs);
17 }
18
19 .status--success {
20 color: var(--accent);
21
22 @media (prefers-color-scheme: dark) {
23 color: var(--accent-twist-4);
24 }
25 }
26
27 .status--error {
28 color: var(--accent-twist-5);
29
30 @media (prefers-color-scheme: dark) {
31 color: var(--accent-twist-3);
32 }
33 }
34</style>
35
36<main>
37 <div class="facet__left">
38 <div>
39 <a href="./dashboard/" class="diffuse-logo-container">
40 <svg viewBox="0 0 902 134" width="160">
41 <title>Diffuse</title>
42 <use
43 xlink:href="images/diffuse-current.svg#diffuse"
44 href="images/diffuse-current.svg#diffuse"
45 ></use>
46 </svg>
47 </a>
48 </div>
49 <h1>Export & Import</h1>
50 <p>
51 Export all Diffuse data to a JSON snapshot, or restore from a previously exported file.
52 Importing replaces all data in that category.
53 </p>
54 </div>
55
56 <div class="facet__right">
57 <div class="button-row">
58 <button id="export" disabled>
59 <i class="ph-bold ph-download-simple"></i>
60 <span>Export all data</span>
61 </button>
62 </div>
63
64 <hr />
65
66 <div>
67 <input id="file" type="file" accept=".json,application/json" />
68 </div>
69
70 <hr />
71
72 <p class="button-row">
73 <button id="import-tracks" disabled>
74 <i class="ph-bold ph-music-note"></i>
75 <span>Import tracks</span>
76 </button>
77 </p>
78 <p class="button-row">
79 <button id="import-playlist-items" disabled>
80 <i class="ph-bold ph-playlist"></i>
81 <span>Import playlist items</span>
82 </button>
83 </p>
84 <p class="button-row">
85 <button id="import-facets" disabled>
86 <i class="ph-bold ph-squares-four"></i>
87 <span>Import facets</span>
88 </button>
89 </p>
90
91 <div id="status" class="status" hidden></div>
92 </div>
93</main>
94
95<script type="module" src="facets/data/export-import/index.inline.js"></script>