MiauRizius/CoasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added onride embed and fixed some design errors

Browse Source
This commit is contained in:
Maurice L.
2025-05-07 14:33:25 +02:00
parent cfeb4de56a
commit 63ca572109
10 changed files with 321 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.vue
View File

@@ -40,7 +40,7 @@ export default {
</div> </div>
</div> </div>
<div> <div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Soziale Medien</h2> <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Repository</h2>
<ul class="text-gray-600 dark:text-gray-400"> <ul class="text-gray-600 dark:text-gray-400">
<li class="mb-4"> <li class="mb-4">
<a href="https://github.com/MiauRizius/CoasterDB" target="_blank" class="hover:underline ">GitHub</a> <a href="https://github.com/MiauRizius/CoasterDB" target="_blank" class="hover:underline ">GitHub</a>

20
src/components/app/AppSidebar.vue
View File

@@ -38,24 +38,24 @@ export default {
} }
} }
// Reiterzustand wiederherstellen // Reiterzustand wiederherstellen
restoreDropdownState('dropdown-pages-button', 'dropdown-pages', 'dropdown-pages-open'); restoreDropdownState('dropdown-pages-button', 'dropdown-pages', 'dropdown-pages-open');
restoreDropdownState('dropdown-sales-button', 'dropdown-sales', 'dropdown-sales-open'); restoreDropdownState('dropdown-sales-button', 'dropdown-sales', 'dropdown-sales-open');
restoreDropdownState('dropdown-authentication-button', 'dropdown-authentication', 'dropdown-authentication-open'); restoreDropdownState('dropdown-authentication-button', 'dropdown-authentication', 'dropdown-authentication-open');
// Reiter-Click-Handler // Reiter-Click-Handler
document.getElementById('dropdown-pages-button')?.addEventListener('click', () => { document.getElementById('dropdown-pages-button')?.addEventListener('click', () => {
toggleDropdown('dropdown-pages-button', 'dropdown-pages', 'dropdown-pages-open'); toggleDropdown('dropdown-pages-button', 'dropdown-pages', 'dropdown-pages-open');
}); });
document.getElementById('dropdown-sales-button')?.addEventListener('click', () => { document.getElementById('dropdown-sales-button')?.addEventListener('click', () => {
toggleDropdown('dropdown-sales-button', 'dropdown-sales', 'dropdown-sales-open'); toggleDropdown('dropdown-sales-button', 'dropdown-sales', 'dropdown-sales-open');
}); });
document.getElementById('dropdown-authentication-button')?.addEventListener('click', () => { document.getElementById('dropdown-authentication-button')?.addEventListener('click', () => {
toggleDropdown('dropdown-authentication-button', 'dropdown-authentication', 'dropdown-authentication-open'); toggleDropdown('dropdown-authentication-button', 'dropdown-authentication', 'dropdown-authentication-open');
}); });
// Navigation // Navigation
document.getElementById("help")?.addEventListener("click", () => { document.getElementById("help")?.addEventListener("click", () => {
processAjaxData("/app/help") processAjaxData("/app/help")
@@ -226,18 +226,19 @@ export default {
<ul id="dropdown-sales" class="hidden py-2 space-y-2"> <ul id="dropdown-sales" class="hidden py-2 space-y-2">
<li> <li>
<a <a
href="/stats" href="/app/stats"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Statistiken</a >Statistiken</a
> >
</li> </li>
<li> <li>
<a <a
href="/technical-information" href="/app/technical-information"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Technische Infos</a >Technische Infos</a
> >
</li> </li>
<!--
<li> <li>
<a <a
href="/database/admin" href="/database/admin"
@@ -245,6 +246,7 @@ export default {
>Admin-Panel</a >Admin-Panel</a
> >
</li> </li>
-->
</ul> </ul>
</li> </li>
<!-- <li> <!-- <li>

8
src/router.ts
View File

@@ -21,6 +21,14 @@ const routes: Array<RouteRecordRaw> = [
path: '/app', path: '/app',
component: () => import('./views/app/App.vue') component: () => import('./views/app/App.vue')
}, },
{
path: '/app/stats',
component: () => import('./views/Stats.vue')
},
{
path: '/app/technical-information',
component: () => import('./views/TechnicalInformation.vue')
},
//Coaster pages //Coaster pages
{ {

68
src/views/Stats.vue Normal file
View File

@@ -0,0 +1,68 @@
<script lang="ts">
import Header from '../components/app/AppHeader.vue'
import Sidebar from '../components/app/AppSidebar.vue'
export default {
components: {
Header,
Sidebar
},
data() {
return {
stats: {
totalParks: 10,
totalCoasters: 25,
totalVisitorsPerMonth: 500000,
averageTicketPrice: 45.99,
totalInversions: 120
}
}
}
}
</script>
<template>
<title>Datenbank-Statistiken - CoasterDB</title>
<Header />
<div class="flex pt-[63px] h-screen overflow-hidden">
<Sidebar />
<main class="flex-1 overflow-y-auto p-5 bg-gray-50 dark:bg-gray-900">
<div style="margin-top: 63px;"></div>
<div class="mx-auto max-w-screen-xl px-4 lg:px-12">
<div class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 mb-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Datenbank Statistiken</h1>
<p class="text-gray-700 dark:text-gray-300 mb-4">Informationen zur aktuellen Datenbank:</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-gray-700 dark:text-gray-300">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Anzahl der Parks:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ stats.totalParks }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Anzahl der Achterbahnen:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ stats.totalCoasters }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Ø Besucher / Monat:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ stats.totalVisitorsPerMonth.toLocaleString() }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Ø Ticketpreis:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ stats.averageTicketPrice.toFixed(2) }} €</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Anzahl der Inversionen:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ stats.totalInversions }}</p>
</div>
</div>
</div>
</div>
</main>
</div>
</template>
<style scoped>
</style>

78
src/views/TechnicalInformation.vue Normal file
View File

@@ -0,0 +1,78 @@
<script lang="ts">
import Header from '../components/app/AppHeader.vue'
import Sidebar from '../components/app/AppSidebar.vue'
export default {
components: {
Header,
Sidebar
},
data() {
return {
techStats: {
framework: 'Vue.js',
language: 'TypeScript',
backend: 'Node.js (Express)',
database: 'SQLite',
hosting: 'Contabo VPS',
apiVersion: 'v1.0',
buildTool: 'Webpack'
}
}
}
}
</script>
<template>
<title>Technische Infos - CoasterDB</title>
<Header />
<div class="flex pt-[63px] h-screen overflow-hidden">
<Sidebar />
<main class="flex-1 overflow-y-auto p-5 bg-gray-50 dark:bg-gray-900">
<div style="margin-top: 63px;"></div>
<div class="mx-auto max-w-screen-xl px-4 lg:px-12">
<div class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 mb-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Technische Informationen</h1>
<p class="text-gray-700 dark:text-gray-300 mb-4">Daten und Details zum Projekt:</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-gray-700 dark:text-gray-300">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Frontend Framework:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ techStats.framework }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Programmiersprache:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ techStats.language }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Backend Technologie:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ techStats.backend }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Datenbank:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ techStats.database }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Hosting-Plattform:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ techStats.hosting }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">API Version:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ techStats.apiVersion }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Build Tool:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ techStats.buildTool }}</p>
</div>
</div>
</div>
</div>
</main>
</div>
</template>
<style scoped>
</style>

33
src/views/app/App.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
/** /**
* *
* use this for template: * use this for template:
@@ -52,14 +53,21 @@ export default {
</script> </script>
<template> <template>
<title>App - CoasterDB</title> <title>App - CoasterDB</title>
<Header />
<!-- Neue Anleitung --> <!-- Fester Header -->
<div style="margin-top: 63px;"> <Header />
<section class="dark:bg-gray-900 sm:p-10">
<div class="bg-gray-800 text-white p-8 rounded-lg shadow-lg max-w-4xl mx-auto"> <!-- Flex-Layout für Sidebar + Hauptinhalt -->
<h2 class="text-2xl font-semibold mb-4">Willkommen auf CoasterDB!</h2> <div class="flex pt-[63px] h-screen overflow-hidden">
<!-- Sidebar -->
<Sidebar />
<!-- Hauptinhalt -->
<main class="flex-1 overflow-y-auto p-10 bg-gray-900 text-white">
<div style="margin-top: 63px;"></div>
<section class="max-w-4xl mx-auto bg-gray-800 p-8 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">Willkommen auf CoasterDB!</h2>
<p class="mb-6 text-lg"> <p class="mb-6 text-lg">
Um mit CoasterDB zu arbeiten, kannst du in der Sidebar unter <strong>Kategorien -> Parks/Attraktionen</strong> wählen, um Informationen zu verschiedenen Freizeitparks und deren Attraktionen zu erhalten. Um mit CoasterDB zu arbeiten, kannst du in der Sidebar unter <strong>Kategorien -> Parks/Attraktionen</strong> wählen, um Informationen zu verschiedenen Freizeitparks und deren Attraktionen zu erhalten.
Wähle einfach den gewünschten Park oder die Attraktion aus, um mehr Details zu sehen! Wähle einfach den gewünschten Park oder die Attraktion aus, um mehr Details zu sehen!
@@ -67,10 +75,7 @@ export default {
<p class="text-lg"> <p class="text-lg">
Viel Spaß beim Entdecken der spannendsten Freizeitparks und Achterbahnen! Viel Spaß beim Entdecken der spannendsten Freizeitparks und Achterbahnen!
</p> </p>
</div> </section>
</section> </main>
</div> </div>
</template>
<!-- Sidebar -->
<Sidebar />
</template>

105
src/views/app/coasters/Coaster.vue
View File

@@ -28,55 +28,64 @@ export default {
<template> <template>
<title>{{ coaster.name }} - CoasterDB</title> <title>{{ coaster.name }} - CoasterDB</title>
<!-- Fester Header -->
<Header /> <Header />
<div style="margin-top: 63px;">
<section class="bg-gray-50 dark:bg-gray-900 p-3 sm:p-5"> <!-- Flex-Layout für Sidebar + Inhalt -->
<div class="mx-auto max-w-screen-xl px-4 lg:px-12"> <div class="flex pt-[63px] h-screen overflow-hidden">
<div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden"> <!-- Sidebar -->
<div class="p-6"> <Sidebar />
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">{{ coaster.name }}</h1>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Park: <span class="font-medium text-gray-900 dark:text-white"><a :href="`/app/park/${coaster.park.replace(' ', '_')}`">{{ coaster.park }}</a></span></p> <!-- Hauptinhalt -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <main class="flex-1 overflow-y-auto p-5 bg-gray-50 dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"> <div style="margin-top: 63px;"></div>
<p class="text-gray-600 dark:text-gray-300">Streckenlänge:</p> <div class="mx-auto max-w-screen-xl px-4 lg:px-12">
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.length }}</p> <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
</div> <div class="p-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"> <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">{{ coaster.name }}</h1>
<p class="text-gray-600 dark:text-gray-300">Maximale Höhe:</p> <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.height }}</p> Park:
</div> <span class="font-medium text-gray-900 dark:text-white">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"> <a :href="`/app/park/${coaster.park.replace(' ', '_')}`">{{ coaster.park }}</a>
<p class="text-gray-600 dark:text-gray-300">Maximale Geschwindigkeit:</p> </span>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.speed }}</p> </p>
</div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"> <div v-for="(value, label) in {
<p class="text-gray-600 dark:text-gray-300">Launch-System:</p> 'Streckenlänge': coaster.length,
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.launch }}</p> 'Maximale Höhe': coaster.height,
</div> 'Maximale Geschwindigkeit': coaster.speed,
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"> 'Launch-System': coaster.launch,
<p class="text-gray-600 dark:text-gray-300">Anzahl Inversionen:</p> 'Anzahl Inversionen': coaster.inversions,
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.inversions }}</p> 'Fahrtdauer': coaster.duration,
</div> 'Hersteller': coaster.manufacturer,
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"> 'Eröffnet': coaster.opened
<p class="text-gray-600 dark:text-gray-300">Fahrtdauer:</p> }"
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.duration }}</p> :key="label"
</div> class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm"> >
<p class="text-gray-600 dark:text-gray-300">Hersteller:</p> <p class="text-gray-600 dark:text-gray-300">{{ label }}:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.manufacturer }}</p> <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ value }}</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<p class="text-gray-600 dark:text-gray-300">Eröffnet:</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.opened }}</p>
</div>
</div>
</div>
</div> </div>
</div>
<!-- Embedded YouTube Video -->
<div class="mt-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">On-Ride Video</h2>
<div class="aspect-w-16 aspect-h-9">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/P7m8SNRj_hI"
title="Blue Fire On-Ride Video"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</div> </div>
</section> </div>
</div>
</main>
</div> </div>
<Sidebar /> </template>
</template>
<style scoped>
</style>

42
src/views/app/coasters/Coasters.vue
View File

@@ -22,23 +22,35 @@ export default {
<template> <template>
<title>Coaster Übersicht - CoasterDB</title> <title>Coaster Übersicht - CoasterDB</title>
<Header /> <Header />
<div style="margin-top: 63px;">
<section class="bg-gray-50 dark:bg-gray-900 p-3 sm:p-5"> <div class="flex pt-[63px] h-screen overflow-hidden">
<div class="mx-auto max-w-screen-xl px-4 lg:px-12"> <Sidebar />
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
<a v-for="coaster in coasters" :key="coaster.name" class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6" :href="`/app/coaster/${coaster.name.replace(' ', '_')}`"> <main class="flex-1 overflow-y-auto p-5 bg-gray-50 dark:bg-gray-900">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ coaster.name }}</h2> <div style="margin-top: 63px;"></div>
<p class="text-gray-700 dark:text-gray-300"> <div class="mx-auto max-w-screen-xl px-4 lg:px-12">
<span class="font-semibold">Park:</span> {{ coaster.park }} <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
</p> <a
</a> v-for="coaster in coasters"
</div> :key="coaster.name"
</div> :href="`/app/coaster/${coaster.name.replace(' ', '_')}`"
</section> class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 hover:shadow-lg transition-shadow"
>
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
{{ coaster.name }}
</h2>
<p class="text-gray-700 dark:text-gray-300">
<span class="font-semibold">Park:</span> {{ coaster.park }}
</p>
</a>
</div>
</div>
</main>
</div> </div>
<Sidebar /> </template>
</template>
<style scoped> <style scoped>
</style> </style>

37
src/views/app/parks/Park.vue
View File

@@ -30,9 +30,14 @@ export default {
<template> <template>
<title>{{ park.name }} - CoasterDB</title> <title>{{ park.name }} - CoasterDB</title>
<Header /> <Header />
<div style="margin-top: 63px;">
<section class="bg-gray-50 dark:bg-gray-900 p-3 sm:p-5"> <div class="flex pt-[63px] h-screen overflow-hidden">
<Sidebar />
<main class="flex-1 overflow-y-auto p-5 bg-gray-50 dark:bg-gray-900">
<div style="margin-top: 63px;"></div>
<div class="mx-auto max-w-screen-xl px-4 lg:px-12"> <div class="mx-auto max-w-screen-xl px-4 lg:px-12">
<!-- Park Info --> <!-- Park Info -->
<div class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 mb-6"> <div class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 mb-6">
@@ -42,10 +47,22 @@ export default {
</p> </p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-gray-700 dark:text-gray-300 mt-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-gray-700 dark:text-gray-300 mt-4">
<div><span class="font-semibold">Ø Besucher / Monat:</span> {{ park.averageVisitorsPerMonth.toLocaleString() }}</div> <div>
<div><span class="font-semibold">Ø Ticketpreis:</span> {{ park.averageTicketPrice.toFixed(2) }} €</div> <span class="font-semibold">Ø Besucher / Monat:</span>
<div><span class="font-semibold">Fläche:</span> {{ park.area }}</div> {{ park.averageVisitorsPerMonth.toLocaleString() }}
<div><span class="font-semibold">Eröffnet:</span> {{ park.openingYear }}</div> </div>
<div>
<span class="font-semibold">Ø Ticketpreis:</span>
{{ park.averageTicketPrice.toFixed(2) }} €
</div>
<div>
<span class="font-semibold">Fläche:</span>
{{ park.area }}
</div>
<div>
<span class="font-semibold">Eröffnet:</span>
{{ park.openingYear }}
</div>
</div> </div>
</div> </div>
@@ -56,18 +73,18 @@ export default {
<a <a
v-for="coaster in coasters" v-for="coaster in coasters"
:key="coaster.name" :key="coaster.name"
class="bg-white dark:bg-gray-800 shadow p-4 rounded-lg" class="bg-white dark:bg-gray-800 shadow p-4 rounded-lg hover:shadow-lg transition-shadow"
:href="`/app/coaster/${coaster.name.replace(' ', '_')}`" :href="`/app/coaster/${coaster.name.replace(' ', '_')}`"
> >
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.name }}</h3> <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.name }}</h3>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</section> </main>
</div> </div>
<Sidebar />
</template> </template>
<style scoped> <style scoped>
</style> </style>

40
src/views/app/parks/Parks.vue
View File

@@ -22,23 +22,33 @@ export default {
<template> <template>
<title>Park Übersicht - CoasterDB</title> <title>Park Übersicht - CoasterDB</title>
<Header /> <Header />
<div style="margin-top: 63px;">
<section class="bg-gray-50 dark:bg-gray-900 p-3 sm:p-5"> <div class="flex pt-[63px] h-screen overflow-hidden">
<div class="mx-auto max-w-screen-xl px-4 lg:px-12"> <Sidebar />
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
<a v-for="park in parks" :key="park.name" class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6" :href="`/app/park/${park.name.replace(' ', '_')}`"> <main class="flex-1 overflow-y-auto p-5 bg-gray-50 dark:bg-gray-900">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ park.name }}</h2> <div style="margin-top: 63px;"></div>
<p class="text-gray-700 dark:text-gray-300"> <div class="mx-auto max-w-screen-xl px-4 lg:px-12">
<span class="font-semibold">Ort:</span> {{ park.location }} <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
</p> <a
</a> v-for="park in parks"
</div> :key="park.name"
</div> class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 hover:shadow-lg transition-shadow"
</section> :href="`/app/park/${park.name.replace(' ', '_')}`"
>
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ park.name }}</h2>
<p class="text-gray-700 dark:text-gray-300">
<span class="font-semibold">Ort:</span> {{ park.location }}
</p>
</a>
</div>
</div>
</main>
</div> </div>
<Sidebar /> </template>
</template>
<style scoped> <style scoped>
</style> </style>