diff --git a/src/app.html b/src/app.html
index 77a5ff52c9239ef2a5c38ba452c659f49e64a7db..e3461df3eff6b42492ae91ff9d5fb087d96b2242 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,12 @@
<!doctype html>
-<html lang="en">
+<html lang="en" class="h-full">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
- <body data-sveltekit-preload-data="hover">
+ <body data-sveltekit-preload-data="hover" class="h-full">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
diff --git a/src/routes/who/style.css b/src/routes/who/style.css
index a3ae6c7d2aea04a2a1fb568e86751d56f6a21868..876b1bf76fc1ab6dbca854130fe3657a4c65c0c1 100644
--- a/src/routes/who/style.css
+++ b/src/routes/who/style.css
@@ -5,7 +5,7 @@
}
body {
- /* background-color: #f65a52; */
+ background-color: #f65a52;
font-family: "Londrina Solid", monospace;
font-size: 16px;
line-height: 1.875em;
diff --git a/src/routes/wip/+page.svelte b/src/routes/wip/+page.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..bf6bdf6474309be3619fa1b7d9a8cefdb4cbc5f4
--- /dev/null
+++ b/src/routes/wip/+page.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+ import './style.css';
+
+ const options = ['option 1', 'option 2', 'option 3', 'option 4'];
+ const question = 1;
+ const questionAmount = 10;
+ const score = 35;
+</script>
+
+<div class="relative mx-auto my-[50px] w-full max-w-[400px]">
+ <section class="relative m-auto flex max-w-[500px] flex-col items-center">
+ <h1 class="absolute top-[-2rem]">Qui est-ce ?</h1>
+ <div class="relative w-[250px]">
+ <span class="absolute right-[calc(100%_+_0.5rem)] flex flex-col items-end">
+ <span class="text-9xl leading-[0.4] text-[#fa9f9b]"> {question} </span>
+ <span> / {questionAmount} </span>
+ </span>
+ <span
+ class="absolute right-[calc(100%_+_0.5rem)] top-24 whitespace-nowrap pt-4 text-xl text-[#333] before:absolute before:right-0 before:top-0 before:h-1.5 before:w-10 before:bg-[#333] before:content-['']"
+ >
+ {score}
+ <small>pts</small>
+ </span>
+ <div
+ class="relative z-[2] flex h-[250px] w-[250px] items-center justify-center overflow-hidden rounded-2xl border-6 border-[#333] border-[solid] bg-white before:absolute before:z-[-1] before:h-[100px] before:w-[100px] before:rounded-[50%] before:bg-[#c5d5ee] before:opacity-100 before:transition-[0.65s] before:duration-[ease-in-out] before:content-[''] after:absolute after:z-[-1] after:h-[100px] after:w-[100px] after:scale-0 after:rounded-[50%] after:border-[#c5d5ee] after:border-[solid] after:transition-[0.4s] after:duration-[ease-in-out] after:content-['']"
+ class:poke-image-success={false}
+ class:poke-image-error={false}
+ >
+ <img src={'image'} alt="No cheating" class="h-[150px] w-auto" />
+ </div>
+ <transition-group
+ tag="div"
+ name="animate-options"
+ class:poke-options-answers={false}
+ class="relative top-[-30px] z-[3] mx-auto my-0 flex w-[170px] flex-col items-center space-y-1 rounded-2xl bg-[#333] px-5 py-0"
+ >
+ {#each options as option, index}
+ <button
+ data-index={index}
+ class:selected={false}
+ class:success={false}
+ class:error={false}
+ class="relative max-h-14 w-full min-w-[200px] cursor-pointer overflow-hidden rounded-2xl border-6 border-[#333] border-[solid] bg-[#c5d5ee] p-[0.5em] text-lg transition-[0.45s] [font-family:'Londrina_Solid',monospace] before:absolute before:left-2/4 before:top-2/4 before:z-[-1] before:h-[200px] before:w-[200px] before:-translate-x-2/4 before:-translate-y-2/4 before:scale-0 before:rounded-[50%] before:bg-[#94acbd] before:transition-[0.2s] before:duration-[ease-in-out] before:content-[''] hover:translate-y-[-3px] hover:bg-[#a9c1e6] focus:[outline:none] active:before:-translate-x-2/4 active:before:-translate-y-2/4 active:before:scale-100"
+ on:click={() => {}}>{option}</button
+ >
+ {/each}
+ </transition-group>
+ <footer class="space-y-1.5 text-center sm:absolute sm:left-full sm:top-5">
+ <button
+ disabled={false}
+ class="h-[100px] w-[110px] cursor-pointer rounded-2xl border-transparent bg-[#f32c22] p-[1em] text-2xl text-white transition-[0.35s] duration-300 [font-family:'Londrina_Solid',monospace] focus:border focus:border-dotted focus:border-[#f87f79] focus:[outline:none] enabled:hover:translate-x-0 enabled:hover:bg-[#333] enabled:hover:text-[#f65a52] disabled:cursor-default disabled:text-[#fa9f9b] disabled:opacity-70 sm:-translate-x-2.5 sm:rounded-bl-none sm:rounded-tl-none"
+ on:click={() => {}}>OK</button
+ >
+ <button
+ disabled={true}
+ class="h-[100px] w-[110px] cursor-pointer rounded-2xl border-transparent bg-[#f32c22] p-[1em] text-2xl text-white transition-[0.35s] duration-300 [font-family:'Londrina_Solid',monospace] focus:border focus:border-dotted focus:border-[#f87f79] focus:[outline:none] enabled:hover:translate-x-0 enabled:hover:bg-[#333] enabled:hover:text-[#f65a52] disabled:cursor-default disabled:text-[#fa9f9b] disabled:opacity-70 sm:-translate-x-2.5 sm:rounded-bl-none sm:rounded-tl-none"
+ on:click={() => {}}>Suivant</button
+ >
+ </footer>
+ </div>
+ </section>
+</div>
+
+<style>
+ :global(body) {
+ background-color: #f65a52;
+ font-family: 'Londrina Solid', monospace;
+ font-size: 16px;
+ line-height: 1.875em;
+ color: #333;
+ }
+</style>
diff --git a/src/routes/wip/style.css b/src/routes/wip/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..7909bbbfaddc67ebe432ff0cfb036d57108d3cd5
--- /dev/null
+++ b/src/routes/wip/style.css
@@ -0,0 +1,5 @@
+/* @import 'https://fonts.googleapis.com/css?family=VT323'; */
+@import 'https://fonts.googleapis.com/css?family=Londrina+Solid|Nunito:400,300';
+* {
+ box-sizing: border-box;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index efd3b541749c3c3aef9fa426133de3080cc238b0..72a0909c2dd48143f8c5059c2430bb88b2155640 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,11 @@ export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
- extend: {}
+ extend: {
+ borderWidth: {
+ 6: '6px'
+ }
+ }
},
plugins: []