90 lines
2.8 KiB
Svelte
90 lines
2.8 KiB
Svelte
<script>
|
|
import '../app.css';
|
|
import Header from '../components/misc/header.svelte';
|
|
import AlertHeader from '../components/misc/alert-header.svelte';
|
|
import Musicplayer from '../components/misc/musicplayer.svelte';
|
|
import CurrentMusicStore from '../stores/currentMusic';
|
|
import Musicselectionmodal from '../components/misc/musicselectionmodal.svelte';
|
|
import musicStore from '../stores/musicStore';
|
|
|
|
$: musicPaused = $CurrentMusicStore.paused;
|
|
$: musicTitle = $CurrentMusicStore.musicTitle;
|
|
$: musicArtist = $CurrentMusicStore.musicArtist;
|
|
$: musicUrl = $CurrentMusicStore.musicUrl;
|
|
|
|
function onMusicToggle() {
|
|
if (musicUrl == '') {
|
|
$CurrentMusicStore.musicTitle = $musicStore[0].musicTitle;
|
|
$CurrentMusicStore.musicArtist = $musicStore[0].musicArtist;
|
|
$CurrentMusicStore.musicUrl = $musicStore[0].musicUrl;
|
|
}
|
|
|
|
$CurrentMusicStore.paused = !$CurrentMusicStore.paused;
|
|
return;
|
|
}
|
|
|
|
// Modal stuff
|
|
let modalShow = false;
|
|
|
|
// Footer stuff
|
|
/**
|
|
* @type {number}
|
|
*/
|
|
let footerHeight;
|
|
</script>
|
|
|
|
<div class="-z-20 absolute">
|
|
<Musicplayer />
|
|
</div>
|
|
<div
|
|
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] dark:from-[#3c085a] to-[#FFAFCC] dark:to-[#0f1838] w-full text-murasaki dark:text-slate-300 overflow-auto min-h-screen relative "
|
|
>
|
|
<!-- Page content -->
|
|
<div class="" style="padding-bottom: {footerHeight + 10}px;">
|
|
<!-- modal -->
|
|
<Musicselectionmodal bind:show={modalShow} />
|
|
<!-- Possible alert header -->
|
|
<!--<AlertHeader text='ALERT'/>-->
|
|
<!-- Header -->
|
|
<Header />
|
|
<!-- Main content -->
|
|
<slot />
|
|
</div>
|
|
<!-- Footer -->
|
|
<!-- To make this stick to the bottom, actually make it absolute, instead of fixed -->
|
|
<div
|
|
bind:clientHeight={footerHeight}
|
|
class="bg-slate-100 dark:bg-purple-900 dark:text-pink-50 w-full h-min md:h-10 lg:pl-20 fixed bottom-0"
|
|
>
|
|
<div class="h-full">
|
|
<button
|
|
on:click={onMusicToggle}
|
|
class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1"
|
|
>
|
|
{#if musicPaused}
|
|
<span class="font-mono">▶</span>
|
|
Play
|
|
{:else}
|
|
<span class="font-mono ">⏸︎</span>
|
|
Pause
|
|
{/if}
|
|
</button>
|
|
<button
|
|
class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min px-3"
|
|
on:click={() => {
|
|
modalShow = !modalShow;
|
|
}}>Show music selection</button
|
|
>
|
|
<br class="block md:hidden" />
|
|
<span>Current song: {musicArtist} - {musicTitle}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6);
|
|
https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
|
|
-->
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap');
|
|
</style>
|