desktop version

2026-02-13 14:54:42 +00:00 · 2023-01-16 20:11:37 +01:00
commit 58d280e65c
37 changed files with 6023 additions and 0 deletions
--- a/.eslintignore
+++ b/.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
--- a/.eslintrc.cjs
+++ b/.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
+	}
+};
--- a/.gitignore
+++ b/.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-*
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/.prettierignore
+++ b/.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
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/16
+++ b/16
@@ -0,0 +1,16 @@
+FROM node:16-alpine as build
+# set working directory
+WORKDIR /app
+# install and cache app dependencies
+COPY package.json package-lock.json ./
+RUN npm ci
+# build app
+COPY . .
+RUN npm run build
+
+# copy build content into nginx container
+FROM nginx:1.23.3-alpine-slim
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 3000
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/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.
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,27 @@
+user                            root;
+worker_processes                auto;
+
+error_log                       /var/log/nginx/error.log warn;
+
+events {
+    worker_connections          1024;
+}
+
+http {
+    include                     /etc/nginx/mime.types;
+    default_type                application/octet-stream;
+    sendfile                    off;
+    access_log                  off;
+    keepalive_timeout           3000;
+    server {
+        listen                  3000;
+        root                    /usr/share/nginx/html;
+        index                   index.html;
+        server_name             localhost;
+        client_max_body_size    16m;
+
+        location / {
+            try_files $uri /index.html;
+        }
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+	"name": "card-quartett-carousel",
+	"author": "Leon Neißkenwirth",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^1.0.4",
+		"@sveltejs/kit": "^1.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"autoprefixer": "^10.4.13",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.21",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^3.0.1",
+		"tailwindcss": "^3.2.4",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0"
+	},
+	"type": "module"
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/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>
--- a/src/lib/assets/accelleration.svg
+++ b/src/lib/assets/accelleration.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+    <title>ic_fluent_fast_acceleration_24_regular</title>
+    <desc>Created with Sketch.</desc>
+    <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ic_fluent_fast_acceleration_24_regular" fill="#212121" fill-rule="nonzero">
+            <path d="M13.5,4 C18.1944204,4 22,7.80557963 22,12.5 C22,17.1944204 18.1944204,21 13.5,21 C11.7093093,21 10.0479491,20.44627 8.67780699,19.5006976 L1.75160796,19.5 C1.3373944,19.5 1.00160796,19.1642136 1.00160796,18.75 C1.00160796,18.3703042 1.28376184,18.056509 1.6498374,18.0068466 L1.75160796,18 L7.01990787,18.0010304 C6.62851175,17.5404282 6.28534977,17.037562 5.99822893,16.5002389 L3.74707239,16.5 C3.33285883,16.5 2.99707239,16.1642136 2.99707239,15.75 C2.99707239,15.3703042 3.27922627,15.056509 3.64530184,15.0068466 L3.74707239,15 L5.37393288,15.0010888 C5.13084253,14.210349 5,13.3704544 5,12.5 C5,10.402483 5.75974498,8.48241393 7.01905844,6.99996934 L2.75,7 C2.33578644,7 2,6.66421356 2,6.25 C2,5.87030423 2.28215388,5.55650904 2.64822944,5.50684662 L2.75,5.5 L8.67681753,5.49998537 C10.0471492,4.55399661 11.7088782,4 13.5,4 Z M13.5,5.5 C9.63400675,5.5 6.5,8.63400675 6.5,12.5 C6.5,16.3659932 9.63400675,19.5 13.5,19.5 C17.3659932,19.5 20.5,16.3659932 20.5,12.5 C20.5,8.63400675 17.3659932,5.5 13.5,5.5 Z M13.5031705,7.00168917 C16.5415547,7.00168917 19.0046518,9.46478626 19.0046518,12.5031705 C19.0046518,15.5415547 16.5415547,18.0046518 13.5031705,18.0046518 C10.4647863,18.0046518 8.00168917,15.5415547 8.00168917,12.5031705 C8.00168917,9.46478626 10.4647863,7.00168917 13.5031705,7.00168917 Z M14.6544509,14.7161265 C14.3091329,14.8963078 13.916463,14.998178 13.5,14.998178 C13.0879377,14.998178 12.6991682,14.8984493 12.3565116,14.721812 L11.2606292,15.8176918 C11.9003034,16.2513288 12.6721536,16.5046518 13.5031705,16.5046518 C14.3367966,16.5046518 15.1108838,16.2497355 15.7517331,15.813602 L14.6544509,14.7161265 Z M9.50168917,12.5031705 C9.50168917,13.3394057 9.75820368,14.1157288 10.1968395,14.7577465 L11.2897494,13.6664547 C11.1053413,13.3180255 11.000911,12.9207527 11.000911,12.499089 C11.000911,12.0822259 11.102977,11.6892017 11.283482,11.3436431 L10.192739,10.2546079 C9.75660546,10.8954572 9.50168917,11.6695444 9.50168917,12.5031705 Z M16.8176918,10.2606292 L15.722723,11.3556006 C15.8993603,11.6982572 15.999089,12.0870267 15.999089,12.499089 C15.999089,12.915952 15.897023,13.3089763 15.716518,13.6545349 L16.813602,14.7517331 C17.2497355,14.1108838 17.5046518,13.3367966 17.5046518,12.5031705 C17.5046518,11.6721536 17.2513288,10.9003034 16.8176918,10.2606292 Z M13.5,11.5 C12.9482184,11.5 12.500911,11.9473074 12.500911,12.499089 C12.500911,13.0508706 12.9482184,13.498178 13.5,13.498178 C14.0517816,13.498178 14.499089,13.0508706 14.499089,12.499089 C14.499089,11.9473074 14.0517816,11.5 13.5,11.5 Z M13.5031705,8.50168917 C12.6691096,8.50168917 11.8946496,8.75687149 11.2536051,9.19342168 L12.3435593,10.2830909 C12.6893583,10.1022619 13.0827369,10 13.5,10 C13.9212637,10 14.3181827,10.1042323 14.6663738,10.2883137 L15.7577465,9.19683948 C15.1157288,8.75820368 14.3394057,8.50168917 13.5031705,8.50168917 Z" id="🎨-Color">
+
+</path>
+        </g>
+    </g>
--- a/src/lib/assets/circular-arrow.svg
+++ b/src/lib/assets/circular-arrow.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 528.916 528.916"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M523.859,232.329h-41.701c-5.07,0-9.715-4.073-10.59-9.067c-19.57-111.442-117-196.409-233.962-196.409
+			C106.589,26.853,0,133.441,0,264.458c0,131.018,106.589,237.605,237.606,237.605c12.675,0,22.95-10.275,22.95-22.949
+			s-10.275-22.949-22.95-22.949c-105.708,0-191.706-85.998-191.706-191.707c0-105.707,85.995-191.706,191.703-191.706
+			c91.583,0,168.325,64.569,187.208,150.564c1.086,4.951-2.359,9.012-7.426,9.012H380.66c-5.07,0-6.578,3.182-3.371,7.108
+			l69.162,84.621c3.209,3.926,8.408,3.926,11.619,0l69.162-84.621C530.439,235.511,528.928,232.329,523.859,232.329z"/>
+	</g>
+</g>
+</svg>
--- a/src/lib/assets/ferrari_488.jpeg
+++ b/src/lib/assets/ferrari_488.jpeg
--- a/src/lib/assets/ford_mustang.jpeg
+++ b/src/lib/assets/ford_mustang.jpeg
--- a/src/lib/assets/lamborghini_hurracan.jpeg
+++ b/src/lib/assets/lamborghini_hurracan.jpeg
--- a/src/lib/assets/measure.svg
+++ b/src/lib/assets/measure.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 20h22v-8H1zm1-7h20v6h-1v-3h-1v3h-1v-2h-1v2h-1v-5h-1v5h-1v-2h-1v2h-1v-3h-1v3h-1v-2h-1v2H9v-5H8v5H7v-2H6v2H5v-3H4v3H2zm18-9v1H4V4H1v3h3V6h16v1h3V4zM3 6H2V5h1zm19 0h-1V5h1z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
--- a/src/lib/assets/piston.svg
+++ b/src/lib/assets/piston.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512.002 512.002" xml:space="preserve">
+<g>
+	<g>
+		<path d="M323.104,0.001L169.585,153.52l62.758,62.758L66.975,381.645c-17.29-0.467-34.733,5.866-47.9,19.032
+			c-25.433,25.433-25.433,66.816,0,92.25c12.717,12.716,29.421,19.074,46.125,19.074c16.704,0,33.407-6.358,46.124-19.074
+			c13.167-13.167,19.499-30.609,19.032-47.9l165.366-165.366l62.76,62.758l153.519-153.519L323.104,0.001z M88.028,469.628
+			c-12.586,12.587-33.066,12.587-45.653,0c-12.586-12.586-12.586-33.067,0-45.653c6.294-6.294,14.559-9.44,22.828-9.44
+			c8.266,0,16.533,3.148,22.827,9.44C100.614,436.561,100.614,457.042,88.028,469.628z M118.94,409.85
+			c-2.221-3.227-4.747-6.305-7.614-9.173c-2.868-2.866-5.946-5.394-9.173-7.613L255.64,239.577l16.787,16.787L118.94,409.85z
+			 M358.483,295.822L216.181,153.52l46.742-46.742L405.224,249.08L358.483,295.822z M428.522,225.782L286.22,83.481l5.886-5.886
+			l142.301,142.301L428.522,225.782z M315.404,54.298l7.7-7.7l142.302,142.302l-7.7,7.7L315.404,54.298z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<circle cx="310.703" cy="201.304" r="17.05"/>
+	</g>
+</g>
+</svg>
--- a/src/lib/assets/power.svg
+++ b/src/lib/assets/power.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.493,22.862a1,1,0,0,0,1.244-.186l11-12A1,1,0,0,0,19,9H13.133l.859-6.876a1,1,0,0,0-1.8-.712l-8,11A1,1,0,0,0,5,14H9.612l-2.56,7.684A1,1,0,0,0,7.493,22.862ZM6.964,12l4.562-6.273-.518,4.149A1,1,0,0,0,12,11h4.727l-6.295,6.867,1.516-4.551A1,1,0,0,0,11,12Z"/></svg>
--- a/src/lib/assets/speed-meter.svg
+++ b/src/lib/assets/speed-meter.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 612 612" xml:space="preserve">
+<g>
+	<g>
+		<path d="M175.205,239.62c0.127-1.965-0.533-3.902-1.833-5.381l-58.84-66.941c-1.3-1.479-3.135-2.381-5.102-2.508
+			c-1.975-0.126-3.902,0.533-5.381,1.833c-27.037,23.766-49.479,51.794-66.706,83.305c-0.944,1.729-1.165,3.762-0.611,5.651
+			c0.554,1.89,1.836,3.483,3.565,4.427l78.205,42.748c1.131,0.619,2.352,0.912,3.557,0.912c2.627,0,5.174-1.398,6.523-3.866
+			c11.386-20.828,26.229-39.359,44.114-55.08C174.178,243.422,175.08,241.587,175.205,239.62z"/>
+		<path d="M201.462,214.829c1.334,2.515,3.907,3.948,6.568,3.948c1.174,0,2.365-0.279,3.473-0.867
+			c20.962-11.117,43.512-18.371,67.025-21.561c4.064-0.551,6.913-4.293,6.362-8.358l-11.979-88.316
+			c-0.551-4.064-4.304-6.909-8.358-6.362c-35.708,4.843-69.949,15.857-101.772,32.736c-3.623,1.922-5.002,6.416-3.082,10.041
+			L201.462,214.829z"/>
+		<path d="M105.785,334.345l-86.017-23.338c-1.901-0.514-3.929-0.255-5.638,0.725s-2.958,2.598-3.475,4.499
+			C3.586,342.295,0,369.309,0,396.523c0,4.657,0.111,9.329,0.342,14.284c0.185,3.981,3.468,7.083,7.414,7.083
+			c0.116,0,0.234-0.002,0.35-0.008l89.031-4.113c1.967-0.09,3.82-0.96,5.145-2.415c1.327-1.455,2.022-3.38,1.93-5.347
+			c-0.155-3.341-0.23-6.444-0.23-9.484c0-18.02,2.365-35.873,7.029-53.066C112.082,339.499,109.743,335.42,105.785,334.345z"/>
+		<path d="M438.731,120.745c-32.411-15.625-67.04-25.308-102.925-28.786c-1.972-0.198-3.918,0.408-5.439,1.659
+			c-1.521,1.252-2.481,3.056-2.671,5.018l-8.593,88.712c-0.396,4.082,2.594,7.713,6.677,8.108
+			c23.652,2.291,46.463,8.669,67.8,18.954c1.015,0.49,2.118,0.738,3.225,0.738c0.826,0,1.654-0.139,2.45-0.416
+			c1.859-0.649,3.385-2.012,4.24-3.786l38.7-80.287C443.978,126.965,442.427,122.525,438.731,120.745z"/>
+		<path d="M569.642,245.337c0.48-1.911,0.184-3.932-0.828-5.624c-18.432-30.835-41.933-57.983-69.848-80.686
+			c-1.529-1.242-3.48-1.824-5.447-1.627c-1.959,0.203-3.758,1.174-5,2.702l-56.237,69.144c-1.242,1.529-1.828,3.488-1.625,5.447
+			c0.201,1.959,1.173,3.758,2.702,5.002c18.47,15.019,34.015,32.975,46.205,53.369c1.392,2.326,3.855,3.618,6.383,3.618
+			c1.297,0,2.61-0.34,3.803-1.054l76.501-45.728C567.94,248.889,569.16,247.248,569.642,245.337z"/>
+		<path d="M598.044,304.939c-1.228-3.915-5.397-6.096-9.308-4.867l-85.048,26.648c-3.915,1.226-6.093,5.393-4.867,9.306
+			c6.104,19.486,9.199,39.839,9.199,60.494c0,3.041-0.076,6.144-0.23,9.484c-0.092,1.967,0.602,3.892,1.93,5.347
+			c1.327,1.456,3.178,2.325,5.145,2.415l89.031,4.113c0.118,0.005,0.234,0.008,0.35,0.008c3.944,0,7.228-3.103,7.414-7.083
+			c0.229-4.955,0.342-9.627,0.342-14.284C612,365.306,607.306,334.494,598.044,304.939z"/>
+		<path d="M305.737,380.755c-1.281,0-2.555,0.042-3.824,0.11l-120.65-71.185c-2.953-1.745-6.702-1.308-9.176,1.065
+			c-2.476,2.371-3.07,6.099-1.456,9.121l65.815,123.355c-0.242,2.376-0.371,4.775-0.371,7.195c0,18.608,7.246,36.101,20.403,49.258
+			c13.158,13.158,30.652,20.404,49.26,20.404c18.608,0,36.101-7.248,49.258-20.404c13.158-13.157,20.403-30.65,20.403-49.258
+			c0-18.608-7.246-36.101-20.403-49.258C341.839,388.001,324.344,380.755,305.737,380.755z"/>
+	</g>
+</g>
+</svg>
--- a/src/lib/components/CarCard.svelte
+++ b/src/lib/components/CarCard.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import DetailBox from './DetailBox.svelte';
+	import { carStatIcons } from '$lib/constants/icons';
+
+	export let title: string;
+	export let img: string;
+	export let rotation: number;
+
+	/*Info to be displayed*/
+	export let ps: number;
+	export let toHundred: number;
+	export let length: number;
+	export let maxKmh: number;
+	export let cylinders: number;
+	export let roundsPerMin: number;
+</script>
+
+<div
+	class="w-[350px] h-[500px] absolute bg-white rounded-xl p-2"
+	style="transform: rotateY({rotation}deg) translateZ(250px);"
+>
+	<div class="bg-zinc-700 h-full rounded-xl overflow-hidden">
+		<h1
+			class="mb-2 text-lg font-semibold text-white bg-zinc-800 shadow-lg w-fit py-1 px-3 rounded-md"
+		>
+			{title}
+		</h1>
+		<div class="w-full h-[200px]">
+			<img class="object-cover w-full h-full" alt="" src={img} />
+		</div>
+		<div class="grid grid-cols-2 gap-4 p-5">
+			<DetailBox icon={carStatIcons.maxKmh} title="max. km/h" value={maxKmh} />
+			<DetailBox icon={carStatIcons.ps} title="PS" value={ps} />
+			<DetailBox icon={carStatIcons.toHundred} title="0-100 km/h" value={toHundred + 's'} />
+			<DetailBox icon={carStatIcons.roundsPerMin} title="Umdrehungen/min" value={roundsPerMin} />
+			<DetailBox icon={carStatIcons.length} title="Länge/m" value={length} />
+			<DetailBox icon={carStatIcons.cylinders} title="Zylinder" value={cylinders} />
+		</div>
+	</div>
+</div>
--- a/src/lib/components/DetailBox.svelte
+++ b/src/lib/components/DetailBox.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let icon: string;
+	export let title: string;
+	export let value: number | string;
+</script>
+
+<div
+	class="relative bg-zinc-400 border-white border-2 rounded-lg p-2 grid place-items-center shadow-lg"
+>
+	<div class="bg-white absolute top-1/2 -translate-y-1/2 -left-3 p-1 rounded-full">
+		<img src={icon} alt="" class="w-5 h-5" />
+	</div>
+	<span class="text-xs font-light">{title}</span>
+	<span class="font-semibold">{value}</span>
+</div>
--- a/src/lib/constants/cars.ts
+++ b/src/lib/constants/cars.ts
@@ -0,0 +1,48 @@
+import ferrariImg from '$lib/assets/ferrari_488.jpeg';
+import fordImg from '$lib/assets/ford_mustang.jpeg';
+import lamborghiniImg from '$lib/assets/lamborghini_hurracan.jpeg';
+
+interface Car {
+	img: string;
+	title: string;
+	ps: number;
+	toHundred: number;
+	length: number;
+	maxKmh: number;
+	cylinders: number;
+	roundsPerMin: number;
+}
+
+const mustang: Car = {
+	img: fordImg,
+	title: 'Ford Mustang V8 GT Modell 2017',
+	ps: 421,
+	toHundred: 4.8,
+	length: 4.78,
+	maxKmh: 250,
+	cylinders: 8,
+	roundsPerMin: 6500
+};
+const hurracan: Car = {
+	img: lamborghiniImg,
+	title: 'Lamborghini Huracán',
+	ps: 610,
+	toHundred: 3.2,
+	length: 4.5,
+	maxKmh: 325,
+	cylinders: 10,
+	roundsPerMin: 8250
+};
+
+const ferrari: Car = {
+	img: ferrariImg,
+	title: 'Ferrari F488 GTB',
+	ps: 670,
+	toHundred: 3,
+	length: 4.56,
+	maxKmh: 330,
+	cylinders: 8,
+	roundsPerMin: 8000
+};
+
+export default [mustang, hurracan, ferrari];
--- a/src/lib/constants/icons.ts
+++ b/src/lib/constants/icons.ts
@@ -0,0 +1,15 @@
+import speedIcon from '$lib/assets/speed-meter.svg';
+import accelleration from '$lib/assets/accelleration.svg';
+import circularArrow from '$lib/assets/circular-arrow.svg';
+import measure from '$lib/assets/measure.svg';
+import piston from '$lib/assets/piston.svg';
+import power from '$lib/assets/power.svg';
+
+export const carStatIcons = {
+	ps: power,
+	toHundred: accelleration,
+	roundsPerMin: circularArrow,
+	length: measure,
+	cylinders: piston,
+	maxKmh: speedIcon
+};
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const ssr = false;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import CarCard from '$lib/components/CarCard.svelte';
+	import cars from '$lib/constants/cars';
+	const partialRotation = 360 / cars.length;
+	let current = 0;
+	function next() {
+		current++;
+	}
+</script>
+
+<div class="h-screen w-full grid place-items-center bg-zinc-900">
+	<div class="relative mx-auto w-[350px] h-[500px] carousel-container ">
+		<div
+			on:click={next}
+			class="carousel w-full h-full absolute"
+			style="transform: rotateY({current * partialRotation}deg);"
+		>
+			{#each cars as car, i}
+				<CarCard rotation={i * partialRotation} {...car} />
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.carousel-container {
+		perspective: 1000px;
+	}
+	.carousel {
+		transform-style: preserve-3d;
+		transition: transform 1s;
+	}
+</style>
--- a/src/routes/[test]/+page.svelte
+++ b/src/routes/[test]/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<div>{$page.params.test}</div>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-static';
+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({
+			fallback: 'index.html'
+		}),
+		prerender: { entries: [] }
+	}
+};
+
+export default config;
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		extend: {}
+	},
+	plugins: []
+};
--- a/tsconfig.json
+++ b/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
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig } from 'vite';
+
+const config: UserConfig = {
+	plugins: [sveltekit()]
+};
+
+export default config;