ludwig/sonri
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

another small ui fix

Browse Source
This commit is contained in:
Ludwig Lehnert 2025-06-13 10:44:00 +02:00
parent 07da5e72cc
commit 00ab7c80b5
Signed by: ludwig
SSH Key Fingerprint: SHA256:4vshH9GJ8TLO1RS2fY6rDDLnq7+KVvSClCY+uEhYYRA
3 changed files with 72 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.css
View File

@ -4,6 +4,7 @@ html,
body {
height: 100%;
scroll-behavior: smooth;
background-color: #e7f7df;
}
@keyframes fade-in {

3
src/routes/(area)/+layout.svelte
View File

@ -1,3 +0,0 @@
<div class="min-h-full bg-[#e7f7df]">
<slot />
</div>

137
src/routes/(area)/today/+page.svelte
View File

@ -75,6 +75,18 @@
})
});
onMount(() => {
if (typeof window !== 'object') return;
const listener = () => {
const container = document.getElementById('container') as HTMLDivElement;
container.style.height = document.body.offsetHeight + 'px';
};
listener();
window.addEventListener('resize', listener);
})
const start = () => {
recordingStart = new Date();
recorder?.start();
@ -109,83 +121,76 @@
};
</script>
<div class="min-rh-screen">
<div class="rh-screen p-4 min-h-0 grid place-items-center">
<div id="container" class="relative w-full">
<div class="absolute left-0 right-0 m-auto h-full w-full max-w-[70vh] p-4">
<video
autoplay muted bind:this={video}
class="opacity-0 h-full w-full min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030] fade-in"
class="opacity-0 h-full w-full object-cover rounded-[40px] bg-[#303030] fade-in"
style="animation-delay: 500ms;"
>
<track kind="captions" />
</video>
<div
class="absolute top-0 left-0 right-0 p-6 m-auto w-fit scale-in"
style="animation-delay: 50ms;"
>
<div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit">
<h1 class="font-bold text-xl">{now.toLocaleDateString(lang(), { dateStyle: 'long' })}</h1>
<h2 class="text-sm">{now.toLocaleTimeString(lang())}</h2>
</div>
{#if !!recordingStart}
<div class="h-1"></div>
<div class="rounded-3xl bg-white px-3 py-1 font-serif flex gap-1 items-center w-fit m-auto scale-in">
<svg class="blink" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="24px" fill="red"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
<div>
<span class="text-md">
<!-- <span class="font-bold">Recording</span> -->
<span>{dateDiff(now, recordingStart).toLocaleTimeString(lang(), { minute: 'numeric', second: 'numeric' })}</span>
</span>
</div>
</div>
{/if}
</div>
<div
class="absolute bottom-0 left-0 right-0 p-6 m-auto w-fit fade-in"
style="animation-delay: 50ms;"
>
<button
class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer ${recordingStart ? 'bg-[#e14c2f]' : 'bg-[#2596be]'}`}
style="transition-duration: 250ms;"
onclick={() => recordingStart ? stop() : start()}
>
{recordingStart ? 'Stop' : 'Start'}
</button>
</div>
</div>
{#if recordingURL}
<div class="h-8"></div>
<div class="p-4 min-h-0 grid place-items-center">
<video controls bind:this={finalVideo}
src={recordingURL}
class="opacity-0 h-full w-full max-w-[50vh] min-h-0 w-full object-cover rounded-[40px] bg-[#303030] fade-in"
style="aspect-ratio: 320 / 480;"
>
<track kind="captions" />
</video>
<div class="h-2"></div>
<button
class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer bg-[#2596be]`}
style="transition-duration: 250ms;"
onclick={submit}
>
Submit
</button>
<div
class="absolute top-0 left-0 right-0 p-6 m-auto w-fit"
>
<div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit scale-in" style="animation-delay: 150ms;">
<h1 class="font-bold text-xl">{now.toLocaleDateString(lang(), { dateStyle: 'long' })}</h1>
<h2 class="text-sm">{now.toLocaleTimeString(lang())}</h2>
</div>
{/if}
{#if !!recordingStart}
<div class="h-1"></div>
<div class="rounded-3xl bg-white px-3 py-1 font-serif flex gap-1 items-center w-fit m-auto scale-in">
<svg class="blink" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="24px" fill="red"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
<div>
<span class="text-md">
<!-- <span class="font-bold">Recording</span> -->
<span>{dateDiff(now, recordingStart).toLocaleTimeString(lang(), { minute: 'numeric', second: 'numeric' })}</span>
</span>
</div>
</div>
{/if}
</div>
<div
class="absolute bottom-0 left-0 right-0 p-6 m-auto w-fit fade-in"
style="animation-delay: 50ms;"
>
<button
class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer ${recordingStart ? 'bg-[#e14c2f]' : 'bg-[#2596be]'}`}
style="transition-duration: 250ms;"
onclick={() => recordingStart ? stop() : start()}
>
{recordingStart ? 'Stop' : 'Start'}
</button>
</div>
</div>
<!-- <canvas class="hidden" bind:this={renderCanvas}></canvas>
<canvas class="hidden" bind:this={captureCanvas}></canvas>
<video class="hidden" bind:this={sourceVideo}>
<track kind="captions" />
</video> -->
{#if recordingURL}
<div class="h-8"></div>
<div class="p-4 min-h-0 grid place-items-center">
<video controls bind:this={finalVideo}
src={recordingURL}
class="opacity-0 h-full w-full max-w-[50vh] min-h-0 w-full object-cover rounded-[40px] bg-[#303030] fade-in"
style="aspect-ratio: 320 / 480;"
>
<track kind="captions" />
</video>
<div class="h-2"></div>
<button
class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer bg-[#2596be]`}
style="transition-duration: 250ms;"
onclick={submit}
>
Submit
</button>
</div>
{/if}
<style>
</style>