Archived
64 lines
1.6 KiB
Svelte
64 lines
1.6 KiB
Svelte
<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>
|