84 lines
2.5 KiB
Svelte
84 lines
2.5 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] to-[#FFAFCC] w-screen text-murasaki 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 -->
|
|
<div bind:clientHeight={footerHeight} class="bg-slate-100 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
|
|
<div class="h-full">
|
|
<button on:click={onMusicToggle} class="bg-white 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 border-black border rounded h-min"
|
|
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>
|