add images and create first view

DavidBlaa · Aug 29, 2023 · 9b8ed69 · 9b8ed69
1 parent 8088100
commit 9b8ed69
Show file tree

Hide file tree

Showing 32 changed files with 177 additions and 1,195 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-preprocess-import-assets": "^1.0.1",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="skeleton">
+	<body data-sveltekit-preload-data="hover" data-theme="rocket">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/...images/instruments/png/001-schlagzeug.png → src/lib/assets/images/001-schlagzeug.png b/...images/instruments/png/001-schlagzeug.png → src/lib/assets/images/001-schlagzeug.png
diff --git a/...instruments/png/002-spanische-gitarre.png → ...b/assets/images/002-spanische-gitarre.png b/...instruments/png/002-spanische-gitarre.png → ...b/assets/images/002-spanische-gitarre.png
diff --git a/...struments/png/003-elektrische-gitarre.png → ...assets/images/003-elektrische-gitarre.png b/...struments/png/003-elektrische-gitarre.png → ...assets/images/003-elektrische-gitarre.png
diff --git a/...truments/png/004-elektrisches-klavier.png → ...ssets/images/004-elektrisches-klavier.png b/...truments/png/004-elektrisches-klavier.png → ...ssets/images/004-elektrisches-klavier.png
diff --git a/...c/images/instruments/png/005-tastatur.png → src/lib/assets/images/005-tastatur.png b/...c/images/instruments/png/005-tastatur.png → src/lib/assets/images/005-tastatur.png
diff --git a/...c/images/instruments/png/006-trompete.png → src/lib/assets/images/006-trompete.png b/...c/images/instruments/png/006-trompete.png → src/lib/assets/images/006-trompete.png
diff --git a/...ic/images/instruments/png/007-violine.png → src/lib/assets/images/007-violine.png b/...ic/images/instruments/png/007-violine.png → src/lib/assets/images/007-violine.png
diff --git a/...c/images/instruments/png/008-saxophon.png → src/lib/assets/images/008-saxophon.png b/...c/images/instruments/png/008-saxophon.png → src/lib/assets/images/008-saxophon.png
diff --git a/...ic/images/instruments/png/009-karaoke.png → src/lib/assets/images/009-karaoke.png b/...ic/images/instruments/png/009-karaoke.png → src/lib/assets/images/009-karaoke.png
diff --git a/static/logo.png → src/lib/assets/logo.png b/static/logo.png → src/lib/assets/logo.png
diff --git a/static/logo_name.png → src/lib/assets/logo_name.png b/static/logo_name.png → src/lib/assets/logo_name.png
diff --git a/src/lib/components/InstrumentCard.svelte b/src/lib/components/InstrumentCard.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+ 
+ export let id: number;
+ export let name: string;
+ export let image: string ;
+ export let audio: string;
+
+ let url='/images/'+image;
+
+</script>
+
+<div class="card cursor-pointer shadow-xl hover:shadow-md p-40">
+ <img src={url} alt="{name}" class="w-[80%]"/>
+</div>
diff --git a/src/lib/data/data.ts b/src/lib/data/data.ts
@@ -0,0 +1,58 @@
+import type { instrumentCardType } from "$lib/types/types";
+
+export const instruments:instrumentCardType[] = [
+	{
+		id: 1,
+		name: 'Schlagzeug',
+		audio:'',
+		image:'001-schlagzeug.png'
+	},
+	{
+		id: 2,
+		name: 'Gitarre',
+		audio:'',
+		image:'002-spanische-gitarre.png'
+	},
+	{
+		id: 3,
+		name: 'Bass',
+		audio:'',
+		image:'003-elektrische-gitarre.png'
+	},
+	{
+		id: 4,
+		name: 'Synthesizer',
+		audio:'',
+		image:'004-elektrisches-klavier.png'
+	},
+	{
+		id: 5,
+		name: 'Piano',
+		audio:'',
+		image:'005-tastatur.png'
+	},
+	{
+		id: 6,
+		name: 'Trompete',
+		audio:'',
+		image:'006-trompete.png'
+	},
+	{
+		id: 7,
+		name: 'Violine',
+		audio:'',
+		image:'007-violine.png'
+	},
+	{
+		id: 8,
+		name: 'Saxophone',
+		audio:'',
+		image:'008-saxophon.png'
+	},
+	{
+		id: 9,
+		name: 'Mikrophone',
+		audio:'',
+		image:'009-karaoke.png'
+	}
+]
diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts
@@ -0,0 +1,6 @@
+export interface instrumentCardType {
+	id: number;
+	name: string;
+ image: string;
+ audio: string;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,28 @@
 <script>
+	import { AppShell } from '@skeletonlabs/skeleton';
+	import { AppBar } from '@skeletonlabs/skeleton';
+	import Logo from "$lib/assets/logo.png"
 	import '../app.postcss';
 
 </script>
 
-<slot />
+<AppShell>
+	<svelte:fragment slot="header">
+		<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
+			<svelte:fragment slot="lead">
+				<img src={Logo} alt="download icon" class="w-24"/>
+			</svelte:fragment>
+
+			<h1 class="h1">Instrumenten Spiel </h1>
+		</AppBar>
+	</svelte:fragment>
+
+	<!-- <svelte:fragment slot="sidebarLeft">Sidebar Left</svelte:fragment> -->
+	<!-- (sidebarRight) -->
+	<!-- (pageHeader) -->
+	<!-- Router Slot -->
+	<slot />
+	<!-- ---- / ---- -->
+	<!-- <svelte:fragment slot="pageFooter">Page Footer</svelte:fragment> -->
+	<!-- (footer) -->
+</AppShell>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,17 @@
-<div class="card">
- <h1 class="h1">Welcome to SvelteKit</h1>
- <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+ import InstrumentCard from "$lib/components/InstrumentCard.svelte";
+ import { instruments } from "$lib/data/data"
+
+
+</script>
+
+
+<div class="grid grid-cols-5 self-center gap-14 p-5 my-5">
+
+ {#each instruments as instrument}
+     <InstrumentCard {...instrument}/> 
+ {/each}
+
 </div>
+
+
diff --git a/static/images/001-schlagzeug.png b/static/images/001-schlagzeug.png
diff --git a/static/images/002-spanische-gitarre.png b/static/images/002-spanische-gitarre.png
diff --git a/static/images/003-elektrische-gitarre.png b/static/images/003-elektrische-gitarre.png
diff --git a/static/images/004-elektrisches-klavier.png b/static/images/004-elektrisches-klavier.png
diff --git a/static/images/005-tastatur.png b/static/images/005-tastatur.png
diff --git a/static/images/006-trompete.png b/static/images/006-trompete.png
diff --git a/static/images/007-violine.png b/static/images/007-violine.png
diff --git a/static/images/008-saxophon.png b/static/images/008-saxophon.png
diff --git a/static/images/009-karaoke.png b/static/images/009-karaoke.png
diff --git a/static/images/instruments/backup.txt b/static/images/instruments/backup.txt