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

Added router, added home and 404 page, added icons as svg file, added header and footer component, added tailwind

Browse Source
This commit is contained in:
Maurice L.
2025-01-28 15:50:35 +01:00
parent a8acff817b
commit 8994ec306a
27 changed files with 2877 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/Home.vue Normal file
View File

@@ -0,0 +1,55 @@
<script lang="ts">
import Navbar from '../components/Navbar.vue'
import Footer from '../components/Footer.vue'
export default {
components: {
Navbar,
Footer
}
}
console.log('%c ACHTUNG! STOP!', ['color: red','display: block','font-size: 50px'].join(';'))
console.log('%c Wenn dir jemand gesagt hat, dass du etwas heraus kopieren sollst/hier einfügen sollst, hast du eine 11/10 Chance, dass du gescammt wirst!', ['font-size: 15px'].join(';'))
console.log('%c Wenn du nicht 100% weißt, was du tust, schließe dieses Fenster!', ['font-size: 15px'].join(';'))
</script>
<template>
<title>Home - mauki.net</title>
<Navbar />
<main class="content">
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
<h2 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white">Entdecke CoasterDB!</h2>
<p class="mb-4 font-light">Finde interessante Fakten und on-board Videos von deutschen Achterbahnen.</p>
<p class="mb-4 font-medium">In dieser Web-Anwendung findest du viele Fakten, technische Daten und anderes Material zu verschiedene Achterbahnen und Parks in Deutschland.</p>
<a href="#" class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700">
Öffne die Web-App
<svg class="ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-16 lg:px-6">
<dl class="grid max-w-screen-md gap-8 mx-auto text-gray-900 sm:grid-cols-3 dark:text-white">
<div class="flex flex-col items-center justify-center">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">3.543</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">Parks</dd>
</div>
<div class="flex flex-col items-center justify-center">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">453.567</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">Achterbahnen</dd>
</div>
<div class="flex flex-col items-center justify-center">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">5</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">Datenbankeinträge</dd>
</div>
</dl>
</div>
</section>
</main>
<Footer />
</template>

33
src/views/NotFound.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup lang="ts">
console.log("Test");
</script>
<template>
<head>
<meta charset="utf-8">
<title>404 - Seite nicht gefunden</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-gradient-to-r from-red-400 to-orange-300">
<div class="w-9/12 m-auto py-16 min-h-screen flex items-center justify-center">
<div class="bg-white shadow overflow-hidden sm:rounded-lg pb-8">
<div class="border-t border-gray-200 text-center pt-8">
<h1 class="text-9xl font-bold text-red-400">404</h1>
<h1 class="text-6xl font-medium py-8">Seite wurde nicht gefunden!</h1>
<p class="text-2xl pb-8 px-12 font-medium">Die angeforderte Seite wurde nicht gefunden. Vielleicht hast du dich vertippt?</p>
<a class="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-pink-500 hover:to-orange-500 text-white font-semibold px-6 py-3 rounded-md mr-6" href="/">
HOME
</a>
<button class="bg-gradient-to-r from-red-400 to-red-500 hover:from-red-500 hover:to-red-500 text-white font-semibold px-6 py-3 rounded-md">
Kontakt
</button>
</div>
</div>
</div>
</div>
</body>
</template>