init
This commit is contained in:
Team3
22
frontend/index.html
Normal file
22
frontend/index.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Creator</title>
|
||||
<script>
|
||||
(function () {
|
||||
var stored = localStorage.getItem('darkMode')
|
||||
var dark = stored === null
|
||||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
: stored === 'true'
|
||||
if (dark) document.documentElement.classList.add('dark')
|
||||
})()
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
frontend/jsconfig.json
Normal file
8
frontend/jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
2305
frontend/package-lock.json
generated
Normal file
2305
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
frontend/package.json
Normal file
22
frontend/package.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.32"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"vite": "^8.0.8",
|
||||
"vite-plugin-vue-devtools": "^8.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
}
|
||||
127
frontend/src/App.vue
Normal file
127
frontend/src/App.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { fetchHealth } from './api.js'
|
||||
|
||||
const backendOk = ref(false)
|
||||
const darkMode = ref(
|
||||
localStorage.getItem('darkMode') === null
|
||||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
: localStorage.getItem('darkMode') === 'true',
|
||||
)
|
||||
|
||||
function applyTheme() {
|
||||
document.documentElement.classList.toggle('dark', darkMode.value)
|
||||
}
|
||||
|
||||
function toggleDark() {
|
||||
darkMode.value = !darkMode.value
|
||||
localStorage.setItem('darkMode', darkMode.value ? 'true' : 'false')
|
||||
applyTheme()
|
||||
}
|
||||
|
||||
applyTheme()
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await fetchHealth()
|
||||
backendOk.value = res.ok === true
|
||||
} catch (e) {
|
||||
console.error('Backend nicht erreichbar:', e)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<header class="topbar">
|
||||
<h1>Creator</h1>
|
||||
<button class="theme-toggle" @click="toggleDark">{{ darkMode ? '☀' : '☾' }}</button>
|
||||
</header>
|
||||
<main class="main">
|
||||
<p>Backend: <span :class="backendOk ? 'ok' : 'err'">{{ backendOk ? 'verbunden' : 'nicht erreichbar' }}</span></p>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f8f9fb;
|
||||
--panel: #ffffff;
|
||||
--border: #e2e5e9;
|
||||
--text: #1a1a1a;
|
||||
--text-muted: #4b5563;
|
||||
--accent: #6366f1;
|
||||
--success: #065f46;
|
||||
--danger: #991b1b;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bg: #15171c;
|
||||
--panel: #1c1f26;
|
||||
--border: #2c3038;
|
||||
--text: #e6e8ee;
|
||||
--text-muted: #9aa3b2;
|
||||
--accent: #6366f1;
|
||||
--success: #34d399;
|
||||
--danger: #f87171;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 1.25rem;
|
||||
color: var(--text-muted);
|
||||
|
||||
.ok {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.err {
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
frontend/src/api.js
Normal file
6
frontend/src/api.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const BASE = '/api'
|
||||
|
||||
export async function fetchHealth() {
|
||||
const res = await fetch(`${BASE}/health`)
|
||||
return res.json()
|
||||
}
|
||||
4
frontend/src/main.js
Normal file
4
frontend/src/main.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
23
frontend/vite.config.js
Normal file
23
frontend/vite.config.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:8000',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user