Archived
131 lines
4.0 KiB
Svelte
131 lines
4.0 KiB
Svelte
<script>
|
|
import ScoreSlider from './ScoreSlider.svelte';
|
|
</script>
|
|
|
|
<div class="mx-auto lg:w-1/2 space-y-4 bg-gray-200 p-8">
|
|
<h1 class="text-2xl font-bold text-center">Joku maa</h1>
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/8/81/Metallica_March_2024.jpg"
|
|
alt="Artist"
|
|
class="rounded-lg mx-auto drop-shadow-md border-2 border-gray-300"
|
|
/>
|
|
<div class="text-center">
|
|
<p>Metallica</p>
|
|
<p>-</p>
|
|
<p>Unforgiven</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<section class="space-y-2">
|
|
<input
|
|
type="checkbox"
|
|
name="kuvaus_toggle"
|
|
id="kuvaus_toggle"
|
|
class="kuvaus_toggle"
|
|
checked
|
|
/>
|
|
<label for="kuvaus_toggle">Kuvaus</label>
|
|
<div class="kuvaus space-y-2">
|
|
<p>
|
|
Kappale kertoo yksilön elämänkaaresta, jossa hän kokee jatkuvaa alistamista ja
|
|
epäoikeudenmukaisuutta. Kappale kuvaa lapsuutta, jossa hánet pakotetaan muiden sääntöihin,
|
|
ja aikuisuutta, jossa hän yrittää turhaan miellyttää muita. Lopulta hänestä tulee katkera
|
|
ja väsynyt vanhus, joka katsoo elämänkaaresta katumuksen täyttämiän. Kappaleen keskiössä
|
|
on taistelu oman vapauden ja identiteetin puolesta sekä pettymysten ja katkeruuden
|
|
tunteet.
|
|
</p>
|
|
<div>
|
|
<span class="review-tag">Identiteetti ja kamppailu</span>
|
|
<span class="review-tag">sopeutuminen vs. vapaus</span>
|
|
<span class="review-tag">katumus ja katkeruus</span>
|
|
<span class="review-tag">tunteellinen kipu</span>
|
|
<span class="review-tag">elämänkaari</span>
|
|
<span class="review-tag">itsereflektio</span>
|
|
<span class="review-tag">sisäinen konflikti.</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<input type="checkbox" name="sanat_toggle" id="sanat_toggle" class="sanat_toggle" />
|
|
<label for="sanat_toggle">Sanat</label>
|
|
|
|
<div class="sanat space-y-4 text-center">
|
|
<p>
|
|
[Verse 1]<br />
|
|
New blood joins this earth<br />
|
|
And quickly he's subdued<br />
|
|
Through constant pained disgrace<br />
|
|
The young boy learns their rules<br />
|
|
With time, the child draws in<br />
|
|
This whipping boy done wrong<br />
|
|
Deprived of all his thoughts<br />
|
|
The young man struggles on and on, he's known<br />
|
|
Ooh, a vow onto his own, that never from this day<br />
|
|
His will they'll take away, yeah
|
|
</p>
|
|
<p>
|
|
[Chorus]<br />
|
|
What I've felt, what I've known<br />
|
|
Never shined through in what I've shown<br />
|
|
Never be, never see<br />
|
|
Won't see what might have been<br />
|
|
What I've felt, what I've known<br />
|
|
Never shined through in what I've shown<br />
|
|
Never free, never me<br />
|
|
So I dub thee unforgiven
|
|
</p>
|
|
<p>
|
|
[Verse 2]<br />
|
|
They dedicate their lives<br />
|
|
To running all of his<br />
|
|
He tries to please them all<br />
|
|
This bitter man he is<br />
|
|
Throughout his life the same<br />
|
|
He's battled constantly<br />
|
|
This fight he cannot win<br />
|
|
A tired man they see no longer cares<br />
|
|
The old man then prepares to die regretfully<br />
|
|
That old man here is me, yeah
|
|
</p>
|
|
<p>[Chorus]</p>
|
|
<p>[Guitar Solo]</p>
|
|
<p>[Chorus]</p>
|
|
<p>
|
|
[Outro]<br />
|
|
Never free, never me<br />
|
|
So I dub thee unforgiven<br />
|
|
You labeled me, I'll label you<br />
|
|
So I dub thee unforgiven<br />
|
|
Never free, never me<br />
|
|
So I dub thee unforgiven<br />
|
|
You labeled me, I'll label you<br />
|
|
So I dub thee unforgiven<br />
|
|
Never free, never me<br />
|
|
So I dub thee unforgiven
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="space-y-8">
|
|
<ScoreSlider title="Kappale" currentRating={50} />
|
|
<ScoreSlider title="Asuste" currentRating={50} />
|
|
<ScoreSlider title="Lava show" currentRating={50} />
|
|
<input type="submit" value="Tallenna" class="btn btn-primary" />
|
|
<button class="btn">Peruuta</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.sanat,
|
|
.kuvaus {
|
|
display: none;
|
|
}
|
|
|
|
.sanat_toggle:checked ~ .sanat {
|
|
display: block;
|
|
}
|
|
|
|
.kuvaus_toggle:checked ~ .kuvaus {
|
|
display: block;
|
|
}
|
|
</style>
|