abc!

.gitignore

@@ -1,5 +1,4 @@
 node_modules
-package-lock.json
 
 # Output
 .output
@@ -22,4 +21,3 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-

.prettierrc

@@ -1,7 +1,7 @@
 {
 	"useTabs": true,
-	"singleQuote": false,
+	"singleQuote": true,
-	"trailingComma": "all",
+	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [
@@ -11,7 +11,5 @@
 				"parser": "svelte"
 			}
 		}
-	],
+	]
-	"tabWidth": 4,
-	"svelteAllowShorthand": true
 }

.vscode/settings.json

@@ -1,22 +0,0 @@
-{
-	"tailwindCSS.emmetCompletions": true,
-	"editor.inlineSuggest.enabled": true,
-	"editor.quickSuggestions": {
-		"strings": true
-	},
-	"css.customData": [".vscode/tailwind.json"],
-	"cSpell.words": [
-		"correctanswer",
-		"creationdate",
-		"gameid",
-		"gamepin",
-		"hostgame",
-		"kahoot",
-		"kahootclone",
-		"Newplayers",
-		"playername",
-		"questionid",
-		"questionstext",
-		"SUPABASE"
-	]
-}

.vscode/tailwind.json

@@ -1,95 +0,0 @@
-{
-	"version": 1.2,
-	"atDirectives": [
-		{
-			"name": "@theme",
-			"description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
-				}
-			]
-		},
-		{
-			"name": "@source",
-			"description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
-				}
-			]
-		},
-		{
-			"name": "@utility",
-			"description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
-				}
-			]
-		},
-		{
-			"name": "@variant",
-			"description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
-				}
-			]
-		},
-		{
-			"name": "@custom-variant",
-			"description": "Use the `@custom-variant` directive to add a custom variant in your project.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
-				}
-			]
-		},
-		{
-			"name": "@apply",
-			"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
-				}
-			]
-		},
-		{
-			"name": "@reference",
-			"description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.\n\nTo do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
-				}
-			]
-		},
-		{
-			"name": "@config",
-			"description": "Use the `@config` directive to load a legacy JavaScript-based configuration file.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
-				}
-			]
-		},
-		{
-			"name": "@plugin",
-			"description": "Use the `@plugin` directive to load a legacy JavaScript-based plugin.",
-			"references": [
-				{
-					"name": "Tailwind Documentation",
-					"url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
-				}
-			]
-		}
-	]
-}

jsconfig.json

@@ -2,10 +2,12 @@
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true,
-		"checkJs": true,
+		"checkJs": false,
-		"moduleResolution": "bundler","target": "es2015",
+		"moduleResolution": "bundler"
-		"module": "es2015",
+	}
-		"types": ["svelte"]
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	},
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	"exclude": ["**/node_modules/**", "**/build/**", "**/.svelte-kit/**", "**/out/**", "!src/**"],
+	//
+	// 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
 }

other-package.json

@@ -0,0 +1,32 @@
+{
+	"name": "kahootclone",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.0.0",
+		"tailwindcss": "^4.0.0",
+		"vite": "^6.0.0"
+	}
+}

package.json

@@ -14,7 +14,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/postcss": "^4.1.6",
+		"@tailwindcss/postcss": "^4.1.7",
 		"@tailwindcss/vite": "^4.0.0",
 		"autoprefixer": "^10.4.21",
 		"eslint-config-prettier": "^10.0.1",

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-}

src/app.html

@@ -2,7 +2,10 @@
 <html lang="en" style="height: 100%; margin: 0">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="" />
+		<link
+			rel="icon"
+			href="https://hc-cdn.hel1.your-objectstorage.com/s/v3/4a82e0c815624c7786ca2a5addbcc74487da8940_group_8__2_.svg"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

src/routes/+HomePage/ToolsBelt.svelte

@@ -0,0 +1,7 @@
+<div class="border-2 border-amber-400">
+	<div class="card">
+		<h1 class="text-[100px]">
+			<i class="nf nf-md-google_classroom"></i>hi
+		</h1>
+	</div>
+</div>

src/routes/+HomePage/landingPage.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="flex h-17/20 items-center justify-center border-2 border-amber-400">
-	<div class="w-2/3 gap-3 flex flex-col items-center">
+	<div class="flex w-2/3 min-w-[600px] flex-col items-center gap-3">
 		{#if FlagAscii == true}
 			<Ascii />
 		{:else}

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import "./app.css";
+	import "./tailwind.css";
 
 	import { Toaster } from "svelte-5-french-toast";
 	let { children } = $props();

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script>
 	import LandingPage from "./+HomePage/landingPage.svelte";
+	import ToolsBelt from "./+HomePage/ToolsBelt.svelte";
 
 </script>
 
 <LandingPage />
+<ToolsBelt />

svelte.config.js

@@ -1,7 +1,10 @@
 import adapter from '@sveltejs/adapter-static';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter()
 	}
 };
+
+export default config;

tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{html,js,svelte}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};