🌎 first i18n support

This commit is contained in:
2020-12-18 20:51:21 +01:00
parent 3ce8284078
commit 2c77450884
6 changed files with 132 additions and 5 deletions

View File

@@ -1,4 +1,5 @@
<script>
import { _ } from "svelte-i18n";
import store from "../store.js";
store.init();
const login = () => {
@@ -8,18 +9,23 @@
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="max-w-md w-full py-12 px-6">
<img class="mx-auto h-20 w-auto" src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png" alt="" />
<p class="mt-6 text-sm text-center text-gray-900">Log in to your account</p>
<img
class="mx-auto h-20 w-auto"
src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
alt="" />
<p class="mt-6 text-sm text-center text-gray-900">
{$_('log_in_to_your_account')}
</p>
<div>
<div class="rounded-md shadow-sm">
<div>
<input
aria-label="Email address"
aria-label={$_('email_address')}
name="email"
type="email"
required=""
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
placeholder="Email address"
placeholder={$_('email_address')}
value="" />
</div>
<div class="-mt-px relative">
@@ -55,7 +61,7 @@
clip-rule="evenodd" />
</svg>
</span>
Log in
{$_('log_in')}
</button>
</div>
</div>

View File

@@ -0,0 +1,23 @@
<body class="antialiased font-sans">
<div class="md:flex min-h-screen">
<div class="w-full md:w-1/2 bg-white flex items-center justify-center ">
<div class="max-w-sm m-8">
<div class="text-black text-5xl md:text-15xl font-black">404</div>
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
<p
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
Sorry, the page you are looking for could not be found.
</p>
<button
class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">Go
Home</button>
</div>
</div>
<div
class="relative pb-full md:flex md:pb-0 md:min-h-screen w-full md:w-1/2">
<div
style="background-image: url('src/svg/404-illustration.svg');"
class="absolute pin bg-cover bg-no-repeat md:bg-left lg:bg-center" />
</div>
</div>
</body>