mirror of
https://github.com/LeNei/card-quartett-carousel.git
synced 2026-02-13 22:56:25 +00:00
desktop version
This commit is contained in:
LeNei
13
.eslintignore
Normal file
13
.eslintignore
Normal file
@@ -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
|
||||||
20
.eslintrc.cjs
Normal file
20
.eslintrc.cjs
Normal file
@@ -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
|
||||||
|
}
|
||||||
|
};
|
||||||
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
vite.config.js.timestamp-*
|
||||||
|
vite.config.ts.timestamp-*
|
||||||
13
.prettierignore
Normal file
13
.prettierignore
Normal file
@@ -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
|
||||||
9
.prettierrc
Normal file
9
.prettierrc
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"useTabs": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"printWidth": 100,
|
||||||
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
|
"pluginSearchDirs": ["."],
|
||||||
|
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||||
|
}
|
||||||
16
Dockerfile
Normal file
16
Dockerfile
Normal file
@@ -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;"]
|
||||||
38
README.md
Normal file
38
README.md
Normal file
@@ -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.
|
||||||
27
nginx.conf
Normal file
27
nginx.conf
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5503
package-lock.json
generated
Normal file
5503
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
6
postcss.config.cjs
Normal file
6
postcss.config.cjs
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
3
src/app.css
Normal file
3
src/app.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -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 {};
|
||||||
12
src/app.html
Normal file
12
src/app.html
Normal file
@@ -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>
|
||||||
12
src/lib/assets/accelleration.svg
Normal file
12
src/lib/assets/accelleration.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
16
src/lib/assets/circular-arrow.svg
Normal file
16
src/lib/assets/circular-arrow.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/lib/assets/ferrari_488.jpeg
Normal file
BIN
src/lib/assets/ferrari_488.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 KiB |
BIN
src/lib/assets/ford_mustang.jpeg
Normal file
BIN
src/lib/assets/ford_mustang.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/lib/assets/lamborghini_hurracan.jpeg
Normal file
BIN
src/lib/assets/lamborghini_hurracan.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
2
src/lib/assets/measure.svg
Normal file
2
src/lib/assets/measure.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 435 B |
22
src/lib/assets/piston.svg
Normal file
22
src/lib/assets/piston.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
2
src/lib/assets/power.svg
Normal file
2
src/lib/assets/power.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 493 B |
37
src/lib/assets/speed-meter.svg
Normal file
37
src/lib/assets/speed-meter.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
40
src/lib/components/CarCard.svelte
Normal file
40
src/lib/components/CarCard.svelte
Normal file
@@ -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>
|
||||||
15
src/lib/components/DetailBox.svelte
Normal file
15
src/lib/components/DetailBox.svelte
Normal file
@@ -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>
|
||||||
48
src/lib/constants/cars.ts
Normal file
48
src/lib/constants/cars.ts
Normal file
@@ -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];
|
||||||
15
src/lib/constants/icons.ts
Normal file
15
src/lib/constants/icons.ts
Normal file
@@ -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
|
||||||
|
};
|
||||||
5
src/routes/+layout.svelte
Normal file
5
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
import '../app.css';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot />
|
||||||
1
src/routes/+layout.ts
Normal file
1
src/routes/+layout.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export const ssr = false;
|
||||||
33
src/routes/+page.svelte
Normal file
33
src/routes/+page.svelte
Normal file
@@ -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>
|
||||||
5
src/routes/[test]/+page.svelte
Normal file
5
src/routes/[test]/+page.svelte
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{$page.params.test}</div>
|
||||||
BIN
static/favicon.png
Normal file
BIN
static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
18
svelte.config.js
Normal file
18
svelte.config.js
Normal file
@@ -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;
|
||||||
8
tailwind.config.cjs
Normal file
8
tailwind.config.cjs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||||
|
theme: {
|
||||||
|
extend: {}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
};
|
||||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@@ -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
|
||||||
|
}
|
||||||
8
vite.config.ts
Normal file
8
vite.config.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import type { UserConfig } from 'vite';
|
||||||
|
|
||||||
|
const config: UserConfig = {
|
||||||
|
plugins: [sveltekit()]
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
Reference in New Issue
Block a user