zonetecde · sexfrance · Jan 14, 2025 · Jan 14, 2025 · Feb 1, 2025 · Feb 3, 2025
diff --git a/src/app.css b/src/app.css
@@ -2,45 +2,84 @@
 @tailwind components;
 @tailwind utilities;
 
-/* latin-ext */
+/* Optimize font loading */
 @font-face {
-	font-family: 'DM Sans';
-	font-style: normal;
-	font-weight: 400;
-	src: url(https://fonts.gstatic.com/s/dmsans/v14/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRR232VGM.woff2)
-		format('woff2');
-	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
-		U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;  /* Improve font loading performance */
+    src: url(https://fonts.gstatic.com/s/dmsans/v14/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRSW32.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+        U+FFFD;
 }
-/* latin */
-@font-face {
-	font-family: 'DM Sans';
-	font-style: normal;
-	font-weight: 400;
-	src: url(https://fonts.gstatic.com/s/dmsans/v14/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRSW32.woff2)
-		format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-		U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-		U+FFFD;
+
+@layer base {
+    body {
+        font-family: 'DM Sans', system-ui, sans-serif;
+    }
 }
 
-body {
-	font-family: 'DM Sans', sans-serif;
+@layer utilities {
+    .scrollbar-w-2 {
+        /* Remove old styles */
+    }
 }
 
-.scrollbar-w-2 {
-	::-webkit-scrollbar {
-		width: 5px;
-		height: 5px;
-	}
-
-	::-webkit-scrollbar-button {
-		background: #ccc;
-	}
-	::-webkit-scrollbar-track-piece {
-		background: #888;
-	}
-	::-webkit-scrollbar-thumb {
-		background: #464242;
-	}
+@layer components {
+  /* Modern minimal scrollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 20px;
+    transition: all 0.3s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  /* Firefox scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  }
+
+  /* Buy Me a Coffee button hover effect */
+  .bmc-button {
+    transition: all 0.3s ease !important;
+    transform: translateY(0);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .bmc-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    filter: brightness(105%);
+  }
+
+  .bmc-button:active {
+    transform: translateY(0);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  /* Fix image distortion */
+  img {
+    @apply object-contain;
+    aspect-ratio: attr(width) / attr(height);
+  }
+
+  /* Ensure logos maintain aspect ratio */
+  .logo-image {
+    @apply w-auto h-auto object-contain max-w-full;
+  }
 }
diff --git a/src/app.html b/src/app.html
@@ -1,49 +1,37 @@
 <!DOCTYPE html>
-<html lang="en">
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
-
-		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-		<link rel="manifest" href="/site.webmanifest" />
-		<meta name="msapplication-TileColor" content="#da532c" />
-		<meta name="theme-color" content="#ffffff" />
-
-		<meta property="og:url" content="https://signamath.fr" />
-		<meta property="og:title" content="SignaMath | Générateur de tableau de signes et de variations" />
-		<meta
-			property="og:description"
-			content="Générer des tableaux de signes et de variations avec SignaMath en toute simplicité"
-		/>
-
-
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
-			integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ"
-			crossorigin="anonymous"
-		/>
-
-		%sveltekit.head%
-
-		<meta
-			name="description"
-			content="Générer des tableaux de signes et de variations avec SignaMath en toute simplicité"
-		/>
-		<link rel="manifest" href="/manifest.json" />
-		<title>SignaMath | Générateur de tableau de signes et de variations</title>
-
-		<meta name="author" content="Rayane Staszewski"/>
-
-
-		<meta
-			name="keywords"
-			content="SignaMath, générateur de tableaux, tableau, tableaux, signes, variations, fonction, formule, dérivée, utilisation gratuite, repo GitHub, version en ligne, contacter, zonedetec, zonetecde, Rayane Staszewski"
-		/>
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<html lang="fr"> <!-- Changed to French since content is in French -->
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#ffffff" />
+
+        <!-- Favicons -->
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+
+        <!-- Manifests -->
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="manifest" href="/manifest.json" />
+
+        <!-- Meta tags -->
+        <meta name="description" content="Générer des tableaux de signes et de variations avec SignaMath en toute simplicité" />
+        <meta name="author" content="Rayane Staszewski"/>
+        <meta name="msapplication-TileColor" content="#da532c" />
+
+        <!-- Open Graph -->
+        <meta property="og:url" content="https://signamath.fr" />
+        <meta property="og:title" content="SignaMath | Générateur de tableau de signes et de variations" />
+        <meta property="og:description" content="Générer des tableaux de signes et de variations avec SignaMath en toute simplicité" />
+
+        <!-- KaTeX -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" crossorigin="anonymous" />
+
+        %sveltekit.head%
+        <title>SignaMath | Générateur de tableau de signes et de variations</title>
+    </head>
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
 </html>
diff --git a/src/components/BMCButton.svelte b/src/components/BMCButton.svelte
diff --git a/src/components/KofiButton.svelte b/src/components/KofiButton.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    let isHovered = false;
+</script>
+
+<a
+    href="https://ko-fi.com/vzero"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="fixed bottom-4 right-4 z-50 transition-all duration-300 transform hover:scale-110"
+    on:mouseenter={() => isHovered = true}
+    on:mouseleave={() => isHovered = false}
+    aria-label="Support me on Ko-fi"
+>
+
+</a>
diff --git a/src/components/tds/assets/arrow_down.png b/src/components/tds/assets/arrow_down.png
diff --git a/src/components/tds/assets/arrow_up.png b/src/components/tds/assets/arrow_up.png
diff --git a/src/components/tds/assets/icon.png b/src/components/tds/assets/icon.png
diff --git a/src/components/tds/row/RowSigns.svelte b/src/components/tds/row/RowSigns.svelte
@@ -6,33 +6,12 @@
 
 	// Pour que les colonnes se rejoignent (le trait continue)
 	export let extendSize: boolean;
+
+	$: textSize = cellules.some((x) => x.sign.length > 3) ? 'text-md' : 'text-md lg:text-3xl';
 </script>
 
-<div
-	class={'w-full flex flex-row text-md text-center ' +
-		(cellules.some((x) => x.sign.length > 3)
-			? '' /* Message d'intervalle de définition, taille du texte réduit */
-			: 'lg:text-3xl')}
->
+<div class="w-full flex flex-row text-center {textSize}">
 	{#each cellules as cellule, index}
 		<CellSign {cellule} {index} {extendSize} />
 	{/each}
 </div>
-
-<style>
-	::-webkit-scrollbar {
-		height: 8px;
-	}
-
-	::-webkit-scrollbar-thumb {
-		background-color: #ddbdbd; /* Change the color of the scrollbar thumb */
-	}
-
-	::-webkit-scrollbar-thumb:hover {
-		background-color: #968686; /* Change the color on hover */
-	}
-
-	::-webkit-scrollbar-thumb:active {
-		background-color: #4d4444; /* Change the color on hover */
-	}
-</style>
diff --git a/src/components/tds/tdv/CalculatedValue.svelte b/src/components/tds/tdv/CalculatedValue.svelte
@@ -5,24 +5,27 @@
 -->
 
 <script lang="ts">
-	export let value: number = 0;
-	export let sign: string = '+';
-	export let position: 'borneMax' | 'borneMin' | 'centre' = 'centre';
+    export let value: number | undefined = undefined;
+    export let sign: string = '+';
+    export let position: 'borneMax' | 'borneMin' | 'centre' = 'centre';
+
+    const getPositionClass = (pos: typeof position) => {
+        const positions = {
+            borneMax: 'right-0',
+            centre: '-left-0.5 transform -translate-x-1/2',
+            borneMin: 'left-0'
+        };
+        return positions[pos];
+    };
 </script>
 
 <div
-	class={'absolute ' +
-		(sign.includes('+') ? ' top-2 lg:top-4 ' : ' bottom-2 lg:bottom-4 ') +
-		' ' +
-		(position === 'borneMax'
-			? 'right-0'
-			: position === 'centre'
-			? '-left-0.5 transform -translate-x-1/2 '
-			: 'left-0')}
+    class="absolute {sign.includes('+') ? 'top-2 lg:top-4' : 'bottom-2 lg:bottom-4'} {getPositionClass(position)}"
+    aria-label="Calculated value {value}"
 >
-	{#if value !== undefined}
-		<p class="w-fit bg-white px-3 bg-opacity-50 rounded-full text-xs md:text-xs lg:text-xl">
-			{value}
-		</p>
-	{/if}
+    {#if value !== undefined}
+        <p class="w-fit bg-white/50 px-3 rounded-full text-xs md:text-xs lg:text-xl">
+            {value}
+        </p>
+    {/if}
 </div>
diff --git a/src/lib/assets/github.svg b/src/lib/assets/github.svg
diff --git a/src/lib/assets/icon.png b/src/lib/assets/icon.png
diff --git a/src/lib/graph.ts b/src/lib/graph.ts
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import { toast } from 'svelte-sonner';
 	import { dev } from '$app/environment';
 	import { onMount } from 'svelte';
+	import KofiButton from '../components/KofiButton.svelte';
 
 	function handleError(event: any) {
 		toast.error('Une erreur est survenue, désolé !');
@@ -89,6 +90,7 @@
 
 	<div class="h-full -mt-12 pt-12 md:-mt-20 md:pt-20">
 		<slot />
+		<KofiButton />
 	</div>
 </div>
 

diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
diff --git a/static/android-chrome-384x384.png b/static/android-chrome-384x384.png
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png
diff --git a/static/palestine.jpg b/static/palestine.jpg