Add Base setup
This commit is contained in:
Esa Kataja
+14
-10
@@ -1,12 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" data-theme="wintry">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>Levyraati Revived</title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover" data-theme="wintry">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
<footer class="bg-zinc-800 text-white mt-20 py-20 text-center drop-shadow-2xl">
|
||||
<p>© 2024 Levyraati Revived.</p>
|
||||
<p>Yhdessä musiikin parissa.</p>
|
||||
</footer>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<header class="bg-zinc-800 text-white mb-20 p-4 flex items-center justify-between shadow-2xl">
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="flex items-center gap-4">
|
||||
<enhanced:img src="/static/img/logo.webp?w=50" alt="Logo" class="rounded-md" />
|
||||
<h1 class="text-white text-xl font-bold">Levyraati <span class="revived">Revived</span></h1>
|
||||
</a>
|
||||
</div>
|
||||
<a href="/login">Kirjaudu</a>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.cdnfonts.com/css/albero');
|
||||
|
||||
.revived {
|
||||
@apply text-amber-700;
|
||||
font-family: 'Albero', sans-serif;
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,13 @@
|
||||
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
|
||||
import { storePopup } from '@skeletonlabs/skeleton';
|
||||
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
|
||||
|
||||
import Header from '../components/Header.svelte';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
<Header />
|
||||
<main class="container mx-auto">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
+130
-13
@@ -1,15 +1,132 @@
|
||||
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="container h-full mx-auto flex justify-center items-center">
|
||||
<div class="space-y-5">
|
||||
<h1 class="h1">Let's get cracking bones!</h1>
|
||||
<p>Start by exploring:</p>
|
||||
<ul>
|
||||
<li><code class="code">/src/routes/+layout.svelte</code> - barebones layout</li>
|
||||
<li><code class="code">/src/app.postcss</code> - app wide css</li>
|
||||
<li>
|
||||
<code class="code">/src/routes/+page.svelte</code> - this page, you can replace the contents
|
||||
</li>
|
||||
</ul>
|
||||
<section class="hero">
|
||||
<h1>Levyraati Revived</h1>
|
||||
<p>Liity mukaan ja koe musiikki yhdessä ystävien kanssa.</p>
|
||||
<a href="/login" class="cta-button">Kirjaudu sisään</a>
|
||||
</section>
|
||||
|
||||
<section class="features bg-zinc-200 rounded-lg">
|
||||
<h2>Miksi Levyraati Revived?</h2>
|
||||
<div class="feature-item">
|
||||
<h3>Yhteisöllisyys</h3>
|
||||
<p>Luomme alustan, jossa ystäväporukat voivat yhdessäkuunnella ja arvioida musiikkia.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Helppo käyttää</h3>
|
||||
<p>Lähetä kappaleita YouTube-linkkien avulla tai lataamalla tiedostoja suoraan sivustolle.</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Reilu kilpailu</h3>
|
||||
<p>Jokainen kappale arvioidaan anonyymisti, jotta vain musiikki itsessään on keskipisteenä.</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Automatisoitu Pisteytys</h3>
|
||||
<p>
|
||||
Sovellus laskee pisteet ja julistaa voittajan. Voit keskittyä vain musiikkiin ja
|
||||
hauskanpitoon!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonials text-zinc-700">
|
||||
<h2>Osallistujien Kokemuksia</h2>
|
||||
<div class="testimonial">
|
||||
<p>
|
||||
"Levyraati Revived toi meidät taas yhteen kuuntelemaan ja nauttimaan musiikista. Suosittelen!"
|
||||
</p>
|
||||
<p><strong>- Kalle</strong></p>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>"Tämä on loistava tapa tutustua uusiin kappaleisiin ja pitää yhteyttä kavereihin."</p>
|
||||
<p><strong>- Saara</strong></p>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>
|
||||
"Levyraati Revived avulla olen löytänyt elämän tarkoitukseni: kilpailu musiikista! En ole
|
||||
koskaan ollut niin intohimoinen arvioimaan biisejä, vaikka ainoa musiikkimaku, jonka tunnen,
|
||||
on Spotify-sattuma."
|
||||
</p>
|
||||
<p><strong>- Masa</strong></p>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>
|
||||
"Levyraati Revived: Parasta, mitä on tapahtunut ystävyyssuhteilleni sitten sen jälkeen, kun
|
||||
päätimme olla enää kuuntelematta toistemme soittolistoja. Kiitos, että saimme olla henkisesti
|
||||
väsyneitä yhdessä!"
|
||||
</p>
|
||||
<p><strong>- Jussi</strong></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
color: #333;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.hero {
|
||||
background: linear-gradient(to right, #ff4b4b, #ff7f50);
|
||||
color: #fff;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 3em;
|
||||
margin: 0;
|
||||
}
|
||||
.hero p {
|
||||
font-size: 1.2em;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
.cta-button {
|
||||
background-color: #fff;
|
||||
color: #ff4b4b;
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1.1em;
|
||||
margin-top: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
.cta-button:hover {
|
||||
background-color: #ffdfdf;
|
||||
}
|
||||
.features,
|
||||
.testimonials {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.features h2,
|
||||
.testimonials h2 {
|
||||
color: #ff4b4b;
|
||||
font-size: 2em;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.feature-item {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.feature-item h3 {
|
||||
font-size: 1.5em;
|
||||
color: #333;
|
||||
}
|
||||
.feature-item p {
|
||||
font-size: 1em;
|
||||
color: #666;
|
||||
}
|
||||
.testimonials .testimonial {
|
||||
background-color: #fefefe;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<div
|
||||
class="flex flex-col gap-10 justify-center items-center bg-zinc-700 mx-auto max-w-sm p-10 rounded-3xl shadow-2xl variant-glass"
|
||||
>
|
||||
<h1 class="h2">Kirjaudu</h1>
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<label for="username" class="label">Käyttäjätunnus</label>
|
||||
<input class="input" type="text" id="username" placeholder="Käyttäjätunnus" />
|
||||
</div>
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<label for="password">Salasana</label>
|
||||
<input class="input" type="password" id="password" placeholder="Salasana" />
|
||||
</div>
|
||||
<button type="button" class="btn variant-filled-surface">Kirjaudu</button>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
<div></div>
|
||||
Reference in New Issue
Block a user