test

fold/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

fold/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

fold/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

fold/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

fold/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

fold/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

fold/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

fold/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "frontend",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^1.0.0",
+		"@sveltejs/kit": "^1.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"node-sass": "^8.0.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^2.9.2",
+		"svelte-preprocess": "^5.0.0",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0",
+		"vitest": "^0.25.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"sass": "^1.57.1"
+	}
+}

fold/rollup.config.js

@@ -0,0 +1,17 @@
+
+import svelte from 'rollup-plugin-svelte';
+import autoPreprocess from 'svelte-preprocess';
+import {scss} from "svelte-preprocess"
+
+export default (theme) => ({
+
+  // ... other configs
+
+	plugins: [
+		svelte({
+            preprocess: [autoPreprocess(), scss()]
+        }),
+        
+	],
+  
+});

fold/src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}

fold/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<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">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

fold/src/app.scss

@@ -0,0 +1,3 @@
+.input{
+color: red;
+}

fold/src/components/NavLink.svelte

@@ -0,0 +1,49 @@
+<script>
+    import { page } from '$app/stores';
+    export let href = "/";
+    export let exact = false;
+</script>
+
+<a href={href} class:selected={exact ? $page.url.pathname === href: $page.url.pathname.includes(href)}><slot/></a>
+
+<style lang="scss">
+    a {
+		cursor: pointer;
+		margin: 0 10px;
+		color: yellow;
+		text-decoration: none;
+		position: relative;
+		font-weight: 600;
+		transition: color 0.3s;
+		font-size: 16px;
+		&::before {
+			content: '';
+			position: absolute;
+			width: 100%;
+			height: 2px;
+			background: currentColor;
+			top: 100%;
+			left: 0;
+			pointer-events: none;
+			transform-origin: 100% 50%;
+			transform: scale3d(0, 1, 1);
+			transition: transform 0.3s;
+		}
+		&:hover {
+			color: red;
+			transform: scale(1.05);
+			&::before {
+				transform-origin: 0% 50%;
+				transform: scale3d(1, 1, 1);
+			}
+		}
+	}
+	.selected {
+		font-weight: bolder;
+		color: red;
+		transform: scale(1.05);
+		&::before {
+			content: none;
+		}
+	}
+</style>

fold/src/components/exos/Card.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import ModalCard from './ModalCard.svelte';
+
+	export let title: string;
+	export let examples: Array<string>;
+	export let tags: Array<string>;
+
+	const { show } = getContext<{show: Function}>('modal');
+
+	const handleClick = () => {
+		console.log('OOOPPP');
+        show(ModalCard, {exo: {title, examples, tags}})
+	};
+</script>
+
+<div class="card" on:click={handleClick}>
+	<h1>{title}</h1>
+	<div class="examples">
+		<h2>Exemples</h2>
+		{#each examples.slice(0, 3) as ex}
+			<p>{ex}</p>
+		{/each}
+	</div>
+	<div
+		class="tags"
+		on:click={() => {
+			alert('test');
+		}}
+	/>
+	<div class="card-hover" />
+</div>
+
+<style lang="scss">
+	* {
+		transition: 0.45s;
+	}
+
+	.examples {
+		color: gray;
+		p {
+			margin-left: 18px;
+			font-size: 0.95em;
+		}
+		h2 {
+			font-size: 0.95em;
+		}
+	}
+
+	.card-hover {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		z-index: 1;
+		border: 1px solid green;
+		&:hover {
+			border: 1px solid red;
+		}
+		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
+	}
+
+	h1 {
+		font-size: 1.3em;
+		margin: 0;
+		position: relative;
+		z-index: 2;
+		&:hover {
+			color: red;
+		}
+	}
+
+	.tags {
+		height: 20px;
+		position: absolute;
+		bottom: 1px;
+		background-color: blue;
+		right: 1px;
+		left: 1px;
+		z-index: 3;
+	}
+
+	.card {
+		border: 1px solid black;
+		padding: 20px;
+		cursor: pointer;
+		position: relative;
+		background-color: violet;
+		min-height: 250px;
+		&:hover {
+			transform: translateX(10px) translateY(-10px);
+		}
+	}
+</style>

fold/src/components/exos/Feed.svelte

@@ -0,0 +1,71 @@
+<script>
+	import { each } from 'svelte/internal';
+	import Card from './Card.svelte';
+	import ModalCard from './ModalCard.svelte';
+	let exos = [
+		{
+			title: 'test1',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		},
+		{
+			title: 'test2',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		},
+		{
+			title: 'test3',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		},
+		{
+			title: 'test1',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		}
+	];
+</script>
+
+<div class="feed">
+	<div class="title">
+		<h1>
+			Tous les <span>exercices</span>
+		</h1>
+		<p>
+			Vous retrouverez ici tous les exercices que vous avez créé ou copié depuis les exercices
+			publics
+		</p>
+	</div>
+	{#each exos as e}
+		<Card examples={e.examples} title={e.title} tags={e.tags} />
+	{/each}
+</div>
+
+<style lang="scss">
+	.feed {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+		grid-auto-flow: dense;
+		grid-gap: 32px;
+		margin: 0 auto;
+	}
+
+	.title {
+		grid-column: 1/3;
+		display: flex;
+		text-align: left;
+		justify-content: center;
+		flex-direction: column;
+		h1 {
+			font-size: 3.5em;
+			font-weight: bolder;
+			margin: 0;
+		}
+		p {
+			font-size: 1.1em;
+		}
+		span {
+			color: red;
+		}
+	}
+</style>

fold/src/components/exos/ModalCard.svelte

@@ -0,0 +1,21 @@
+<script>
+    export let exo;
+    let examples =  ['an example', 'an example', 'an example', 'an example', 'an example']
+</script>
+
+<div>
+    <h1>Titre</h1>
+    <input type="text" class="input">
+    <div class = 'examples'>
+        <h2>Exemples</h2>   
+        {#each examples as e}
+            <p>{e}</p>
+        {/each}
+    </div>
+    <button>Télécharger</button>
+    <div class ="tags"></div>
+</div>
+
+<style lang="scss">
+
+</style>

fold/src/context/Modal.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { onDestroy, setContext, SvelteComponent } from 'svelte';
+
+	let visible = false;
+    let onClose: Function;
+    let props = {};
+    let component: ConstructorOfATypedSvelteComponent | undefined;
+    function show(c : ConstructorOfATypedSvelteComponent, p: Object) {
+        visible = true
+        component = c
+        props = p
+    }
+    function close(){
+        visible=false
+        component = undefined;
+        props = {}
+        onClose()
+    }
+    setContext('modal', {show, close})
+    
+	function keyPress(e: KeyboardEvent) {
+		if (e.key == 'Escape' && visible == true) {
+			visible = false;
+		}
+	}
+    
+</script>
+
+<slot />
+<div id="topModal" class:visible on:click={() => close()} on:keypress={keyPress}>
+	<div id="modal" on:click|stopPropagation={()=>{}} on:keypress={()=>{}}>
+		<svelte:component this={component} {...props}/>
+	</div>
+</div>
+
+
+<style>
+	#topModal {
+		visibility: hidden;
+		z-index: 9999;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #4448;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	#modal {
+		position: relative;
+		border-radius: 6px;
+		background: white;
+		border: 2px solid #000;
+		filter: drop-shadow(5px 5px 5px #555);
+		padding: 1em;
+	}
+
+	.visible {
+		visibility: visible !important;
+	}
+
+	/* #modal-content {
+		max-width: calc(100vw - 20px);
+		max-height: calc(100vh - 20px);
+		overflow: auto;
+	} */
+</style>

fold/src/routes/+layout.svelte

@@ -0,0 +1,72 @@
+<script>
+	import Modal from '../context/Modal.svelte';
+	import NavLink from '../components/NavLink.svelte';
+</script>
+
+<Modal>
+	<main>
+		<nav data-sveltekit-preload-data="hover">
+			<NavLink href="/" exact>Home</NavLink>
+			<NavLink href="/exercices" exact>Exercices</NavLink>
+			<NavLink href="/settings" exact>Settings</NavLink>
+		</nav>
+		<slot />
+	</main>
+</Modal>
+
+<style lang="scss">
+	.links {
+		display: flex;
+		align-items: center;
+		gap: 14px;
+		overflow: hidden;
+		flex-wrap: wrap;
+		height: 30px;
+		& li {
+			height: 30px;
+			display: flex;
+			align-items: center;
+			white-space: nowrap;
+		}
+	}
+
+	:root {
+		--container-padding: 20px;
+		--container-width: 1330px;
+	}
+	:global(body) {
+		padding: 0;
+		margin: 0;
+		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+			Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+		overflow: hidden;
+		background-color: #1d1a5a;
+		color: #d9d9d9;
+		background: linear-gradient(to bottom left, #0d0221 30%, #1a0f7a);
+		width: 100vw;
+		height: 100vh;
+	}
+	main {
+		box-sizing: border-box;
+		width: 100%;
+		padding-left: calc(50% - var(--container-width) / 2);
+		padding-right: calc(50% - var(--container-width) / 2);
+		height: calc(100vh - var(--navbar-height) - 10px);
+		overflow: auto;
+		a {
+			color: red;
+		}
+	}
+
+	nav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 10px;
+		padding: 30px 0;
+		border-bottom: 1px solid #181553;
+		width: 100%;
+		gap: 10px;
+		height: 30px;
+	}
+</style>

fold/src/routes/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Card from '../components/exos/Card.svelte';
+	import { getContext } from 'svelte';
+	let count = 1;
+	const { show } = getContext('modal');
+
+	const add = () => {
+		show(Card, { title: 'test', examples: ['test'], tags: [], click: () => {} });
+	};
+</script>
+
+<h1>Welcome to SvelteKit</h1>
+<div>
+	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
+	<button on:click={add}>test {count}</button>
+</div>

fold/src/routes/exercices/[[slug]]/+page.js

@@ -0,0 +1,10 @@
+/** @type {import('./$types').PageLoad} */
+export function load({params, url}) {
+	return {
+		post: {
+			title: `Title for ${params.slug} goes here`,
+			content: `Content for ${params.slug} goes here ${url.searchParams}`
+			
+		}
+	};
+}

fold/src/routes/exercices/[[slug]]/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Feed from '../../../components/exos/Feed.svelte';
+
+  /** @type {import('./$types').PageData} */  
+  export let data;
+</script>
+
+<Feed />

fold/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

fold/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

fold/vite.config.js

@@ -0,0 +1,11 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+};
+
+export default config;

frontend/package.json

@@ -6,15 +6,12 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"test": "playwright test",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test:unit": "vitest",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^1.0.0",
 		"@sveltejs/kit": "^1.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -29,7 +26,8 @@
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0",
-		"vitest": "^0.25.3"
+		"sass": "^1.53.0",
+		"svelte-preprocess": "^4.10.7"
 	},
 	"type": "module"
-}
+}

frontend/src/app.scss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
+.input{
+    background-color: red;
+}

frontend/src/components/NavLink.svelte

@@ -0,0 +1,49 @@
+<script>
+    import { page } from '$app/stores';
+    export let href = "/";
+    export let exact = false;
+</script>
+
+<a href={href} class:selected={exact ? $page.url.pathname === href: $page.url.pathname.includes(href)}><slot/></a>
+
+<style lang="scss">
+    a {
+		cursor: pointer;
+		margin: 0 10px;
+		color: yellow;
+		text-decoration: none;
+		position: relative;
+		font-weight: 600;
+		transition: color 0.3s;
+		font-size: 16px;
+		&::before {
+			content: '';
+			position: absolute;
+			width: 100%;
+			height: 2px;
+			background: currentColor;
+			top: 100%;
+			left: 0;
+			pointer-events: none;
+			transform-origin: 100% 50%;
+			transform: scale3d(0, 1, 1);
+			transition: transform 0.3s;
+		}
+		&:hover {
+			color: red;
+			transform: scale(1.05);
+			&::before {
+				transform-origin: 0% 50%;
+				transform: scale3d(1, 1, 1);
+			}
+		}
+	}
+	.selected {
+		font-weight: bolder;
+		color: red;
+		transform: scale(1.05);
+		&::before {
+			content: none;
+		}
+	}
+</style>

frontend/src/components/exos/Card.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import ModalCard from './ModalCard.svelte';
+
+	export let title: string;
+	export let examples: Array<string>;
+	export let tags: Array<string>;
+
+	const { show } = getContext<{show: Function}>('modal');
+
+	const handleClick = () => {
+		console.log('OOOPPP');
+        show(ModalCard, {exo: {title, examples, tags}})
+	};
+</script>
+
+<div class="card" on:click={handleClick}>
+	<h1>{title}</h1>
+	<div class="examples">
+		<h2>Exemples</h2>
+		{#each examples.slice(0, 3) as ex}
+			<p>{ex}</p>
+		{/each}
+	</div>
+	<div
+		class="tags"
+		on:click={() => {
+			alert('test');
+		}}
+	/>
+	<div class="card-hover" />
+</div>
+
+<style lang="scss">
+	* {
+		transition: 0.45s;
+	}
+
+	.examples {
+		color: gray;
+		p {
+			margin-left: 18px;
+			font-size: 0.95em;
+		}
+		h2 {
+			font-size: 0.95em;
+		}
+	}
+
+	.card-hover {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		z-index: 1;
+		border: 1px solid green;
+		&:hover {
+			border: 1px solid red;
+		}
+		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
+	}
+
+	h1 {
+		font-size: 1.3em;
+		margin: 0;
+		position: relative;
+		z-index: 2;
+		&:hover {
+			color: red;
+		}
+	}
+
+	.tags {
+		height: 20px;
+		position: absolute;
+		bottom: 1px;
+		background-color: blue;
+		right: 1px;
+		left: 1px;
+		z-index: 3;
+	}
+
+	.card {
+		border: 1px solid black;
+		padding: 20px;
+		cursor: pointer;
+		position: relative;
+		background-color: violet;
+		min-height: 250px;
+		&:hover {
+			transform: translateX(10px) translateY(-10px);
+		}
+	}
+</style>

frontend/src/components/exos/Feed.svelte

@@ -0,0 +1,71 @@
+<script>
+	import { each } from 'svelte/internal';
+	import Card from './Card.svelte';
+	import ModalCard from './ModalCard.svelte';
+	let exos = [
+		{
+			title: 'test1',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		},
+		{
+			title: 'test2',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		},
+		{
+			title: 'test3',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		},
+		{
+			title: 'test1',
+			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
+			tags: []
+		}
+	];
+</script>
+
+<div class="feed">
+	<div class="title">
+		<h1>
+			Tous les <span>exercices</span>
+		</h1>
+		<p>
+			Vous retrouverez ici tous les exercices que vous avez créé ou copié depuis les exercices
+			publics
+		</p>
+	</div>
+	{#each exos as e}
+		<Card examples={e.examples} title={e.title} tags={e.tags} />
+	{/each}
+</div>
+
+<style lang="scss">
+	.feed {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+		grid-auto-flow: dense;
+		grid-gap: 32px;
+		margin: 0 auto;
+	}
+
+	.title {
+		grid-column: 1/3;
+		display: flex;
+		text-align: left;
+		justify-content: center;
+		flex-direction: column;
+		h1 {
+			font-size: 3.5em;
+			font-weight: bolder;
+			margin: 0;
+		}
+		p {
+			font-size: 1.1em;
+		}
+		span {
+			color: red;
+		}
+	}
+</style>

frontend/src/components/exos/ModalCard.svelte

@@ -0,0 +1,44 @@
+<script>
+	export let exo;
+	let examples = ['an example', 'an example', 'an example', 'an example', 'an example'];
+</script>
+
+<div class="modal">
+	<h1>Titre</h1>
+	<input type="text" class="input" />
+	<div class="examples">
+		<h2>Exemples</h2>
+		{#each examples as e}
+			<p>{e}</p>
+		{/each}
+	</div>
+	<button>Télécharger</button>
+	<div class="tags" />
+</div>
+
+<style lang="scss">
+	.modal {
+		min-width: 820px;
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: repeat(5, auto);
+		background: blue;
+        padding:70px;
+        grid-gap:10px;
+	}
+	h1 {
+		font-size: 1.5em;
+	}
+
+	.examples {
+		h2 {
+			font-size: 1em;
+			font-weight: 800;
+			margin-bottom: 5px;
+		}
+		p {
+			margin: 5px 0;
+			margin-left: 30px;
+		}
+	}
+</style>

frontend/src/context/Modal.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { onDestroy, setContext, SvelteComponent } from 'svelte';
+
+	let visible = false;
+    let onClose: Function;
+    let props = {};
+    let component: ConstructorOfATypedSvelteComponent | undefined;
+    function show(c : ConstructorOfATypedSvelteComponent, p: Object) {
+        visible = true
+        component = c
+        props = p
+    }
+    function close(){
+        visible=false
+        component = undefined;
+        props = {}
+        onClose()
+    }
+    setContext('modal', {show, close})
+    
+	function keyPress(e: KeyboardEvent) {
+		if (e.key == 'Escape' && visible == true) {
+			visible = false;
+		}
+	}
+    
+</script>
+
+<slot />
+<div id="topModal" class:visible on:click={() => close()} on:keypress={keyPress}>
+	<div id="modal" on:click|stopPropagation={()=>{}} on:keypress={()=>{}}>
+		<svelte:component this={component} {...props}/>
+	</div>
+</div>
+
+
+<style>
+	#topModal {
+		visibility: hidden;
+		z-index: 9999;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #4448;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	#modal {
+		position: relative;
+		border-radius: 6px;
+		background: white;
+		border: 2px solid #000;
+		filter: drop-shadow(5px 5px 5px #555);
+		padding: 1em;
+	}
+
+	.visible {
+		visibility: visible !important;
+	}
+
+	/* #modal-content {
+		max-width: calc(100vw - 20px);
+		max-height: calc(100vh - 20px);
+		overflow: auto;
+	} */
+</style>

frontend/src/routes/+layout.svelte

@@ -0,0 +1,73 @@
+<script>
+	import Modal from '../context/Modal.svelte';
+	import NavLink from '../components/NavLink.svelte';
+	import '../app.scss';
+</script>
+
+<Modal>
+	<main>
+		<nav data-sveltekit-preload-data="hover">
+			<NavLink href="/" exact>Home</NavLink>
+			<NavLink href="/exercices" exact>Exercices</NavLink>
+			<NavLink href="/settings" exact>Settings</NavLink>
+		</nav>
+		<slot />
+	</main>
+</Modal>
+
+<style lang="scss">
+	.links {
+		display: flex;
+		align-items: center;
+		gap: 14px;
+		overflow: hidden;
+		flex-wrap: wrap;
+		height: 30px;
+		& li {
+			height: 30px;
+			display: flex;
+			align-items: center;
+			white-space: nowrap;
+		}
+	}
+
+	:root {
+		--container-padding: 20px;
+		--container-width: 1330px;
+	}
+	:global(body) {
+		padding: 0;
+		margin: 0;
+		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+			Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+		overflow: hidden;
+		background-color: #1d1a5a;
+		color: #d9d9d9;
+		background: linear-gradient(to bottom left, #0d0221 30%, #1a0f7a);
+		width: 100vw;
+		height: 100vh;
+	}
+	main {
+		box-sizing: border-box;
+		width: 100%;
+		padding-left: calc(50% - var(--container-width) / 2);
+		padding-right: calc(50% - var(--container-width) / 2);
+		height: calc(100vh - var(--navbar-height) - 10px);
+		overflow: auto;
+		a {
+			color: red;
+		}
+	}
+
+	nav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 10px;
+		padding: 30px 0;
+		border-bottom: 1px solid #181553;
+		width: 100%;
+		gap: 10px;
+		height: 30px;
+	}
+</style>

frontend/src/routes/+page.svelte

@@ -1,2 +1,16 @@
+<script>
+	import Card from '../components/exos/Card.svelte';
+	import { getContext } from 'svelte';
+	let count = 1;
+	const { show } = getContext('modal');
+
+	const add = () => {
+		show(Card, { title: 'test', examples: ['test'], tags: [], click: () => {} });
+	};
+</script>
+
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<div>
+	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
+	<button on:click={add}>test {count}</button>
+</div>

frontend/src/routes/exercices/[[slug]]/+page.js

@@ -0,0 +1,10 @@
+/** @type {import('./$types').PageLoad} */
+export function load({params, url}) {
+	return {
+		post: {
+			title: `Title for ${params.slug} goes here`,
+			content: `Content for ${params.slug} goes here ${url.searchParams}`
+			
+		}
+	};
+}

frontend/src/routes/exercices/[[slug]]/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Feed from '../../../components/exos/Feed.svelte';
+
+  /** @type {import('./$types').PageData} */  
+  export let data;
+</script>
+
+<Feed />

frontend/src/variables.scss

@@ -0,0 +1 @@
+/* Variables and mixins declared here will be available in all other SCSS files */

frontend/svelte.config.js

@@ -1,3 +1,4 @@
+import preprocess from "svelte-preprocess";
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
@@ -5,7 +6,11 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [vitePreprocess(), preprocess({
+        scss: {
+            "prependData": "@use \"src/variables.scss\" as *;"
+        }
+    })],
 
 	kit: {
 		adapter: adapter()

frontend/vite.config.js

@@ -2,10 +2,15 @@ import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()],
-	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}']
-	}
+    plugins: [sveltekit()],
+
+    css: {
+        preprocessorOptions: {
+            scss: {
+                additionalData: "@use \"src/variables.scss\" as *;"
+            }
+        }
+    }
 };
 
 export default config;