Add Currently playing page

This commit is contained in:
Esa Kataja
2024-10-12 16:21:28 +03:00
parent d47631abe9
commit ff5485bae9
2 changed files with 66 additions and 0 deletions
+63
View File
@@ -0,0 +1,63 @@
<script>
export let artist = 'Metallica';
export let songName = 'The Unforgiven';
export let lyrics = `New blood joins this earth
And quickly he's subdued
Through constant pained disgrace
The young boy learns their rules
With time, the child draws in
This whipping boy done wrong
Deprived of all his thoughts
The young man struggles on and on, he's known
A vow unto his own
That never from this day
His will they'll take away
What I've felt
What I've known
Never shined through in what I've shown
Never be
Never see
Won't see what might have been
`;
let score = 1;
</script>
<div class="flex flex-col gap-20 my-20 text-center">
<div class="flex flex-col gap-4">
<h2 class="text-2xl font-semibold">Nyt soi:</h2>
<h3 class="text-xl">{artist} - {songName}</h3>
</div>
<div class="flex flex-col my-2 gap-4">
<label for="score">Pisteet</label>
<input
class="w-full"
type="range"
value={score}
min="1"
max="100"
name="score"
on:change={(e) => (score = e.target.value)}
/>
<div class="flex justify-between text-center">
<span>1</span><span>25</span><span>50</span><span>75</span><span>100</span>
</div>
</div>
<div class="flex flex-col gap-4">
<label for="comment">Kommentti</label>
<textarea
name="comment"
id="comment"
rows="10"
placeholder="Sanallinen arvostelu"
class="input-text-field"
style="resize: none;"
></textarea>
</div>
<button class="button-primary">Lähetä</button>
<div class="flex justify-center border-2 max-w-sm mx-auto p-4 rounded-md h-80 overflow-auto">
<pre class="font-serif text-md">{lyrics}</pre>
</div>
</div>
+3
View File
@@ -1,8 +1,11 @@
<script> <script>
import NewRound from '../../components/NewRound.svelte'; import NewRound from '../../components/NewRound.svelte';
import NewEntry from '../../components/NewEntry.svelte'; import NewEntry from '../../components/NewEntry.svelte';
import CurrentlyPlaying from '../../components/CurrentlyPlaying.svelte';
</script> </script>
<NewRound /> <NewRound />
<hr /> <hr />
<NewEntry /> <NewEntry />
<hr />
<CurrentlyPlaying />