forked from globuzma/mentalaradio
élargir le conteneur et créer 2 conteneurs
This commit is contained in:
gribse
parent
a8ab7694a9
commit
3d0aae0fdc
1 changed files with 16 additions and 120 deletions
118
src/App.svelte
118
src/App.svelte
|
|
@ -65,17 +65,21 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-w-screen min-h-screen overflow-y-hidden flex flex-col items-center justify-center p-4">
|
<div class="min-w-screen min-h-screen overflow-y-hidden flex flex-col items-center justify-center p-4">
|
||||||
<div class="flex -mt-8 md:mt-32 flex-row justify-between w-full max-w-96">
|
<div class="flex -mt-8 md:mt-32 flex-row justify-between w-full max-w-200">
|
||||||
<div class="w-0 flex flex-col invisible md:w-fit md:visible items-end gap-4 -rotate-12 md:mb-6 md:-ml-36 md:-mt-16">
|
<div class="w-0 flex flex-col invisible md:w-fit md:visible items-end gap-4 -rotate-12 md:mb-6 md:-ml-36 md:-mt-16">
|
||||||
<span class="speech-bubble arrow-left">Et t'écoutes quoi comme musique ?</span>
|
<span class="speech-bubble arrow-left">Et t'écoutes quoi comme musique ?</span>
|
||||||
<span class="speech-bubble arrow-right">Oh ... de tout</span>
|
<span class="speech-bubble arrow-right">Oh ... de tout</span>
|
||||||
</div>
|
</div>
|
||||||
<img class="w-96 -mb-48 md:w-xl md:-mr-56 md:-mt-64 md:-mb-80" src={menthealeauLogo} alt="Logo d'une menthe à l'eau" />
|
<img class="w-96 -mb-48 md:w-xl md:-mr-56 md:-mt-64 md:-mb-80" src={menthealeauLogo} alt="Logo d'une menthe à l'eau" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row md:items-center gap-2 max-w-96 w-full">
|
<div class="flex flex-col md:items-center gap-2 max-w-200 w-full">
|
||||||
<div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex flex-col gap-4 max-w-96 w-full">
|
<div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex flex-col gap-4 max-w-200 w-full">
|
||||||
|
<div class="text-container flex flex-row gap-4"> <!--Left col-->
|
||||||
<h1 class="font-[Momentz] text-white font-bold text-4xl">Menthe à l'eau</h1>
|
<h1 class="font-[Momentz] text-white font-bold text-4xl">Menthe à l'eau</h1>
|
||||||
<p class="text-white font-[Inter] font-bold">Créée à l'origine pour être un énorme dump de musique en tout genre. Cette playlist est contre toute attente devenue un énorme dump de musique en tout genre. Enjoy the radio. 📻</p>
|
<p class="text-white font-[Inter] font-bold">Créée à l'origine pour être un énorme dump de musique en tout genre. Cette playlist est contre toute attente devenue un énorme dump de musique en tout genre. Enjoy the radio. 📻</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="player-container flex flex-row gap-4"> <!--Right col-->
|
||||||
{#if imageData == ""}
|
{#if imageData == ""}
|
||||||
<div class="block w-full pb-[26%] pt-[26%] flex flex-col items-center justify-center bg-[#ff99b4] rounded-md">
|
<div class="block w-full pb-[26%] pt-[26%] flex flex-col items-center justify-center bg-[#ff99b4] rounded-md">
|
||||||
<svg class="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
<svg class="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
||||||
|
|
@ -86,115 +90,7 @@
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
<span class="text-white font-[Inter] font-bold w-full text-ellipsis truncate">{#if title == ""}Loading...{:else}{title}{/if}</span>
|
<span class="text-white font-[Inter] font-bold w-full text-ellipsis truncate">{#if title == ""}Loading...{:else}{title}{/if}</span>
|
||||||
<audio bind:this={audioPlayer}>
|
|
||||||
<source src={basePath + "/stream"} type="audio/mp3">
|
|
||||||
</audio>
|
|
||||||
<div class="flex flex-row w-full mt-16 -mb-24 flex-wrap">
|
|
||||||
{#each {length: numberOfListeners} as _,i}
|
|
||||||
<img src={dancing_guys[getRandomInt(0,4)]} class="max-h-6 max-w-6 animate-bounce">
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center w-full">
|
|
||||||
<div class="bg-[#ff99b4] w-32 rounded-full -mb-12 z-20">
|
|
||||||
{#if loadingSound}
|
|
||||||
<svg class="mr-3 -ml-1 w-full animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
||||||
{:else}
|
|
||||||
{#if isPlaying}
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M6 16V8q0-.825.588-1.412T8 6h8q.825 0 1.413.588T18 8v8q0 .825-.587 1.413T16 18H8q-.825 0-1.412-.587T6 16"/></svg>
|
|
||||||
{:else}
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/></svg>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col bg-white rounded-md items-center justify-center h-fit mt-12 pt-4 pb-1 gap-2">
|
|
||||||
<input id="volume-slider" type="range" value="100" style="" onchange={(e) => audioPlayer.volume = parseInt(e.target.value) / 100}/>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 text-[#ff99b4]" viewBox="0 0 24 24"><path fill="currentColor" d="M9 15H6q-.425 0-.712-.288T5 14v-4q0-.425.288-.712T6 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T12.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.512.013T16 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2"/></svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="w-fit h-fit flex mt-12 mb-24 md:mb-12 flex-col visible md:w-0 md:h-0 md:invisible items-end gap-4">
|
|
||||||
<span class="speech-bubble arrow-left">Et t'écoutes quoi comme musique ?</span>
|
|
||||||
<span class="speech-bubble arrow-right">Oh ... De tout.</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-full opacity-50">
|
|
||||||
<span>Créé par Zuma · <a class="underline" href="https://git.shenanigans.cc/globuzma/mentalaradio">Source</a></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#volume-slider {
|
|
||||||
border-radius:5px;
|
|
||||||
width: 5px;
|
|
||||||
height: 9rem;
|
|
||||||
background: #d3d3d3;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
outline: none;
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
direction: rtl;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
#volume-slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #ff99b4;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#volume-slider::-moz-range-thumb {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #ff99b4;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speech-bubble {
|
|
||||||
width: fit-content;
|
|
||||||
padding: 1rem;
|
|
||||||
position: relative;
|
|
||||||
background: #FFF;
|
|
||||||
border-radius: .4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-right:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 0.969em solid transparent;
|
|
||||||
border-left-color: #FFF;
|
|
||||||
border-right: 0;
|
|
||||||
margin-top: -0.969em;
|
|
||||||
margin-right: -0.7em;
|
|
||||||
}
|
|
||||||
.arrow-left:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 0.969em solid transparent;
|
|
||||||
border-right-color: #FFF;
|
|
||||||
border-left: 0;
|
|
||||||
margin-top: -0.969em;
|
|
||||||
margin-left: -0.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(body) {
|
|
||||||
background-size: cover;
|
|
||||||
background-image: url('data:image/svg+xml,<svg width="1920" xmlns="http://www.w3.org/2000/svg" height="1080" fill="none"><defs><clipPath id="a" class="frame-clip frame-clip-def"><rect rx="0" ry="0" width="1920" height="1080" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g clip-path="url(%23a)"><g class="fills"><rect width="1920" height="1080" class="frame-background" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(16, 180, 182); fill-opacity: 1;" ry="0" rx="0"/></g><g class="frame-children"><path d="M-407.000,424.309C-127.000,173.309,162.125,206.159,425.000,263.663C553.000,291.663,803.000,413.663,1012.000,391.663C1338.616,357.282,1986.000,270.000,2173.000,444.000C2360.000,618.000,1955.000,946.309,1955.000,946.309L-109.000,949.309L-407.000,424.309Z" style="fill: rgb(18, 187, 190); fill-opacity: 1;" class="fills"/><path d="M-534.000,480.309C-254.000,229.309,35.125,262.159,298.000,319.663C426.000,347.663,676.000,469.663,885.000,447.663C1211.616,413.282,1859.000,326.000,2046.000,500.000C2233.000,674.000,1828.000,1002.309,1828.000,1002.309L-236.000,1005.309L-534.000,480.309Z" style="fill: rgb(52, 191, 196); fill-opacity: 1;" class="fills"/><path d="M-338.000,572.309C-58.000,321.309,231.125,354.159,494.000,411.663C622.000,439.663,872.000,561.663,1081.000,539.663C1407.616,505.282,1886.000,379.309,2073.000,553.309C2260.000,727.309,2024.000,1094.309,2024.000,1094.309L-40.000,1097.309L-338.000,572.309Z" style="fill: rgb(71, 194, 202); fill-opacity: 1;" class="fills"/><path d="M-469.000,629.309C-189.000,378.309,100.125,411.159,363.000,468.663C491.000,496.663,741.000,618.663,950.000,596.663C1276.616,562.282,1755.000,436.309,1942.000,610.309C2129.000,784.309,1893.000,1151.309,1893.000,1151.309L-171.000,1154.309L-469.000,629.309Z" style="fill: rgb(112, 204, 215); fill-opacity: 1;" class="fills"/><path d="M-373.000,741.309C-93.000,490.309,196.125,523.159,459.000,580.663C587.000,608.663,837.000,730.663,1046.000,708.663C1372.616,674.282,1851.000,548.309,2038.000,722.309C2225.000,896.309,1989.000,1263.309,1989.000,1263.309L-75.000,1266.309L-373.000,741.309Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;" class="fills"/><path d="M-350.000,798.646C-70.000,547.646,193.000,571.646,452.000,644.646C711.000,717.646,881.000,886.646,1189.000,772.646C1497.000,658.646,1874.000,605.646,2061.000,779.646C2248.000,953.646,2012.000,1320.646,2012.000,1320.646L-52.000,1323.646L-350.000,798.646Z" style="fill: rgb(253, 196, 127); fill-opacity: 1;" class="fills"/><path d="M-344.000,865.646C-64.000,614.646,199.000,638.646,458.000,711.646C717.000,784.646,887.000,953.646,1195.000,839.646C1503.000,725.646,1880.000,672.646,2067.000,846.646C2254.000,1020.646,2018.000,1387.646,2018.000,1387.646L-46.000,1390.646L-344.000,865.646Z" style="fill: rgb(254, 202, 132); fill-opacity: 1;" class="fills"/><path d="M-372.000,935.000C-92.000,684.000,171.000,708.000,430.000,781.000C689.000,854.000,859.000,1023.000,1167.000,909.000C1475.000,795.000,1852.000,742.000,2039.000,916.000C2226.000,1090.000,1990.000,1457.000,1990.000,1457.000L-74.000,1460.000L-372.000,935.000Z" style="fill: rgb(254, 206, 142); fill-opacity: 1;" class="fills"/></g></g></svg>');
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue