bump
This commit is contained in:
@@ -1,14 +1,16 @@
|
||||
:root {
|
||||
--color-bg: #1a1a2e;
|
||||
--color-bg-secondary: #16213e;
|
||||
--color-bg-card: #0f3460;
|
||||
--color-primary: #e94560;
|
||||
--color-primary-hover: #ff6b81;
|
||||
--color-navy: #0d2440;
|
||||
--color-bg: #081829;
|
||||
--color-bg-secondary: #0d2440;
|
||||
--color-bg-card: #122e52;
|
||||
--color-primary: #00b4c8;
|
||||
--color-primary-hover: #00d4e8;
|
||||
--color-teal: #00b4c8;
|
||||
--color-text: #eaeaea;
|
||||
--color-text-muted: #a0a0b0;
|
||||
--color-text-muted: #8aaabf;
|
||||
--color-success: #2ed573;
|
||||
--color-warning: #ffa502;
|
||||
--color-border: #2a2a4a;
|
||||
--color-border: #1a3a5c;
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-title" content="Qaffee" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="theme-color" content="#0d2440" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
%sveltekit.head%
|
||||
|
||||
103
frontend/src/lib/components/Header.svelte
Normal file
103
frontend/src/lib/components/Header.svelte
Normal file
@@ -0,0 +1,103 @@
|
||||
<script lang="ts">
|
||||
export let title = '';
|
||||
export let backHref = '';
|
||||
</script>
|
||||
|
||||
<header class="app-header">
|
||||
<div class="header-inner">
|
||||
<div class="header-left">
|
||||
{#if backHref}
|
||||
<a href={backHref} class="back-btn" aria-label="Zurück">←</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
{#if title}
|
||||
<span class="page-title">{title}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<a href="/" class="brand-link">
|
||||
<img src="/aquantico-logo.png" alt="Aquantico" class="brand-logo" />
|
||||
<span class="brand-name">Qaffee</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.app-header {
|
||||
background: var(--color-navy);
|
||||
border-bottom: 2px solid var(--color-teal);
|
||||
padding: 0 20px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
line-height: 1;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.back-btn:active {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-teal);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api, type Company } from '$lib/api/client';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
||||
let companies: Company[] = [];
|
||||
let loading = true;
|
||||
@@ -12,13 +13,10 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Strichliste</title>
|
||||
<title>Qaffee by Aquantico</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Strichliste</h1>
|
||||
<p style="color: var(--color-text-muted); margin-top: 4px;">Firma auswählen</p>
|
||||
</div>
|
||||
<Header title="Firma auswählen" />
|
||||
|
||||
{#if loading}
|
||||
<div style="text-align: center; padding: 48px;">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { api, type Employee, type MonthlyReport, type EmployeeReportLine, type Company } from '$lib/api/client';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
||||
let token = '';
|
||||
let employees: Employee[] = [];
|
||||
@@ -105,13 +106,12 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Firmen-Admin - Strichliste</title>
|
||||
<title>Firmen-Admin – Qaffee</title>
|
||||
</svelte:head>
|
||||
|
||||
<Header title="Firmen-Administration" />
|
||||
|
||||
<div class="admin-container">
|
||||
<div class="admin-header">
|
||||
<h1>Firmen-Administration</h1>
|
||||
</div>
|
||||
|
||||
{#if !token}
|
||||
<p>Kein Zugangstoken angegeben.</p>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { api, type Company, type Product, type ProviderReport, type AccessLink } from '$lib/api/client';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
||||
let token = '';
|
||||
let activeTab: 'companies' | 'products' | 'report' | 'links' = 'companies';
|
||||
@@ -153,13 +154,12 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Anbieter-Admin - Strichliste</title>
|
||||
<title>Anbieter-Admin – Qaffee</title>
|
||||
</svelte:head>
|
||||
|
||||
<Header title="Anbieter-Administration" />
|
||||
|
||||
<div class="admin-container">
|
||||
<div class="admin-header">
|
||||
<h1>Anbieter-Administration</h1>
|
||||
</div>
|
||||
|
||||
{#if !token}
|
||||
<p>Kein Zugangstoken angegeben.</p>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { api, type Employee, type Company } from '$lib/api/client';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
||||
let employees: Employee[] = [];
|
||||
let companyName = '';
|
||||
@@ -22,14 +23,10 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{companyName} - Strichliste</title>
|
||||
<title>{companyName} – Qaffee</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="page-header" style="position: relative;">
|
||||
<a href="/" class="back-btn" aria-label="Zurück">←</a>
|
||||
<h1>{companyName}</h1>
|
||||
<p style="color: var(--color-text-muted); margin-top: 4px;">Mitarbeiter auswählen</p>
|
||||
</div>
|
||||
<Header title={companyName} backHref="/" />
|
||||
|
||||
{#if loading}
|
||||
<div style="text-align: center; padding: 48px;">
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { api, type Product, type MonthlyTally, type Employee } from '$lib/api/client';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
||||
let products: Product[] = [];
|
||||
let tallies: MonthlyTally[] = [];
|
||||
@@ -51,14 +52,13 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Produkt wählen - Strichliste</title>
|
||||
<title>Produkt wählen – Qaffee</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="page-header" style="position: relative;">
|
||||
<a href="/company/{companyId}" class="back-btn" aria-label="Zurück">←</a>
|
||||
<h1>{employee ? `${employee.firstName} ${employee.lastName}` : ''}</h1>
|
||||
<p style="color: var(--color-text-muted); margin-top: 4px;">Produkt auswählen</p>
|
||||
</div>
|
||||
<Header
|
||||
title={employee ? `${employee.firstName} ${employee.lastName}` : ''}
|
||||
backHref="/company/{companyId}"
|
||||
/>
|
||||
|
||||
{#if loading}
|
||||
<div style="text-align: center; padding: 48px;">
|
||||
|
||||
Reference in New Issue
Block a user