A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144<link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/themes/default.css" /><link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/utilities/layout.css" /><link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/utilities/gap.css" /><div> <main id="layout"></main> <div id="edit-bar"> <wa-button id="edit-toggle" appearance="filled" variant="neutral" size="small" pill aria-label="Edit layout" > <wa-icon id="edit-icon" name="border-all"></wa-icon> </wa-button> <wa-button id="save-copy-btn" appearance="filled" variant="neutral" size="small" pill aria-label="Save simplified copy" style="display: none" > <wa-icon id="save-copy-icon" name="floppy-disk"></wa-icon> </wa-button> </div> <wa-dialog id="facet-picker" label="Choose a facet" style="--width: 360px"> <div class="wa-stack wa-gap-s"> <wa-select id="facet-select" placeholder="Built-in facets…"> {{ for item of facets }} {{ if item.url !== "facets/misc/split-view/index.tile" && item.kind !== "prelude" }} <wa-option value="{{ item.url }}">{{ item.title }}</wa-option> {{ /if }} {{ /for }} </wa-select> <wa-input id="custom-path" placeholder="facets/playback/auto-queue/index.tile" style="flex: 1" ></wa-input> <wa-button id="custom-confirm" variant="neutral" appearance="filled" pill>Load</wa-button> </div> </wa-dialog></div><style> body { margin: 0; height: 100dvh; overflow: hidden; } #layout, #layout > * { height: 100%; } wa-button { max-width: 300px; } wa-button::part(base), wa-input::part(base), wa-select::part(combobox) { border-width: 2px; } wa-split-panel { height: 100%; } [slot="start"], [slot="end"] { height: 100%; } .pane { position: relative; height: 100%; display: flex; flex-direction: column; } .pane iframe { flex: 1; border: none; width: 100%; } .dragging iframe { pointer-events: none; } .pane-overlay { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--wa-space-xs); background: color-mix(in srgb, var(--wa-color-surface-default) 85%, transparent); backdrop-filter: blur(4px); z-index: 10; padding: var(--wa-space-m); } .pane--empty .pane-overlay { display: flex; } .edit-mode .pane:not(.pane--empty) .pane-overlay { display: flex; } .pane-name { font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet); margin-bottom: var(--wa-space-2xs); text-align: center; } #edit-bar { position: fixed; top: var(--wa-space-xs); left: var(--wa-space-xs); z-index: 100; display: flex; flex-direction: column; gap: var(--wa-space-2xs); } #facet-select { width: 100%; }</style><script type="module" src="/facet.js"></script>