✨ Added manual language-toggle
This commit is contained in:
Mawoka
@@ -3,24 +3,28 @@
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import LanguageToggle from './language-toggle.svelte';
|
||||
</script>
|
||||
|
||||
<footer class="text-center text-white border-black">
|
||||
<div class="text-center pt-4 bg-gray-700">
|
||||
Made with ❤️ by
|
||||
<a
|
||||
href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer"
|
||||
target="_blank"
|
||||
class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]"
|
||||
>Mawoka</a
|
||||
>
|
||||
and with the help of
|
||||
<a href="/docs/attribution" class="underline text-blue-300 hover:text-blue-500 transition"
|
||||
>others</a
|
||||
>.
|
||||
</div>
|
||||
<div class="text-center bg-gray-700 pb-2">
|
||||
<p>
|
||||
If you find this useful, please consider <a
|
||||
<div class="grid grid-cols-12 w-full pt-4 bg-gray-700 pb-2">
|
||||
<p class="col-start-2 col-end-12 text-center w-full">
|
||||
Made with ❤️ by
|
||||
<a
|
||||
href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer"
|
||||
target="_blank"
|
||||
class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]"
|
||||
>Mawoka</a
|
||||
>
|
||||
and with the help of
|
||||
<a
|
||||
href="/docs/attribution"
|
||||
class="underline text-blue-300 hover:text-blue-500 transition">others</a
|
||||
>.
|
||||
<br />
|
||||
If you find this useful, please consider
|
||||
<a
|
||||
href="https://mawoka.eu/donate"
|
||||
target="_blank"
|
||||
class="underline text-blue-300 hover:text-blue-500 transition">Donating</a
|
||||
@@ -32,10 +36,79 @@
|
||||
>More details are here.</a
|
||||
>
|
||||
</p>
|
||||
<div class="self-end flex flex-col items-center min-h-full h-full">
|
||||
<div class="my-auto mr-16">
|
||||
<LanguageToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center bg-gray-700 border-t-2 border-t-white">
|
||||
<!-- to-[#8dc63f]-->
|
||||
<span
|
||||
class="w-full h-0.5 bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] block bg-animated"
|
||||
/>
|
||||
|
||||
<div class="flex justify-center bg-gray-700">
|
||||
<p class="text-gray-400 text-center">
|
||||
<i>Kahoot! and the K! logo are trademarks of Kahoot! AS</i>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.bg-animated {
|
||||
background-size: 30% 30%;
|
||||
|
||||
-webkit-animation: ColorRunner 13s ease infinite;
|
||||
-moz-animation: ColorRunner 13s ease infinite;
|
||||
-o-animation: ColorRunner 13s ease infinite;
|
||||
animation: ColorRunner 13s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes ColorRunner {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes ColorRunner {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes ColorRunner {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ColorRunner {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<!--
|
||||
<script context='module' lang='ts'>
|
||||
export const prerender = true;
|
||||
export const load = async ({}) => {
|
||||
return {};
|
||||
const languages = [
|
||||
{
|
||||
code: 'de',
|
||||
name: 'Deutsch',
|
||||
flag: '🇩🇪'
|
||||
},
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
flag: '🇺🇲'
|
||||
},
|
||||
{
|
||||
code: 'tr',
|
||||
name: 'Türkçe',
|
||||
flag: '🇹🇷'
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
name: 'Français',
|
||||
flag: '🇫🇷'
|
||||
}
|
||||
];
|
||||
let final_arr = [];
|
||||
const set_percents = async () => {
|
||||
for (const lang of languages) {
|
||||
const res = await fetch(`https://translate.mawoka.eu/api/translations/classquiz/frontend/${lang.code}/?format=json`);
|
||||
const json = await res.json();
|
||||
console.log(json);
|
||||
// return Math.floor(json.translated_percent);
|
||||
final_arr.push({ ...lang, percent: json.translated_percent });
|
||||
}
|
||||
};
|
||||
await set_percents();
|
||||
return {
|
||||
slot: {
|
||||
final_arr
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/env';
|
||||
|
||||
export let languages: Array<{
|
||||
flag: string;
|
||||
name: string;
|
||||
code: string;
|
||||
}> = [
|
||||
{
|
||||
code: 'de',
|
||||
name: 'Deutsch',
|
||||
flag: '🇩🇪'
|
||||
},
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
flag: '🇺🇲'
|
||||
},
|
||||
{
|
||||
code: 'tr',
|
||||
name: 'Türkçe',
|
||||
flag: '🇹🇷'
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
name: 'Français',
|
||||
flag: '🇫🇷'
|
||||
},
|
||||
{
|
||||
code: 'id',
|
||||
name: 'Bahasa Indonesia',
|
||||
flag: '🇮🇩'
|
||||
},
|
||||
{
|
||||
code: 'ca',
|
||||
name: 'Català',
|
||||
flag: '🇪🇸'
|
||||
}
|
||||
];
|
||||
const get_selected_language = (): string => {
|
||||
return localStorage.getItem('language');
|
||||
};
|
||||
let selected_language;
|
||||
onMount(() => {
|
||||
selected_language = get_selected_language();
|
||||
});
|
||||
|
||||
const set_language = (code: string): void => {
|
||||
if (browser) {
|
||||
localStorage.setItem('language', code);
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div>
|
||||
<select
|
||||
bind:value={selected_language}
|
||||
on:change={() => {
|
||||
set_language(selected_language);
|
||||
}}
|
||||
class="p-2 rounded-lg bg-gray-800 focus:ring-2 ring-blue-600"
|
||||
>
|
||||
{#each languages as lang}
|
||||
<option value={lang.code}>{lang.flag} {lang.name} </option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
Reference in New Issue
Block a user