Aktualisiert die index.html zur Unterstützung der deutschen Sprache und verbessert die SEO durch Hinzufügen von Meta-Tags. Modifiziert App.vue, um das Logo in der Kopfzeile anzuzeigen und fügt einen Footer mit Links zu Impressum und Datenschutzerklärung hinzu. Überarbeitet Home.vue mit neuen Marketing- und Funktionsabschnitten sowie einer FAQ-Sektion zur Benutzerinformation. Ergänzt Router-Konfiguration um Impressum- und Datenschutzseiten.

This commit is contained in:
Torsten Schulz (local)
2025-09-11 15:32:49 +02:00
parent d4b82a3a6f
commit ace15ae1d3
9 changed files with 549 additions and 14 deletions

View File

@@ -1,10 +1,57 @@
<!doctype html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trainingstagebuch</title>
<title>Trainingstagebuch Vereinsverwaltung, Trainingsplanung & Turniere</title>
<meta name="description" content="Das TrainingsTagebuch hilft Vereinen und Trainer:innen, Mitglieder zu verwalten, Trainings zu dokumentieren, Spielpläne zu organisieren und Statistiken auszuwerten alles in einer modernen WebApp." />
<link rel="canonical" href="https://tt-tagebuch.de/" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Trainingstagebuch" />
<meta property="og:title" content="Trainingstagebuch Vereinsverwaltung, Trainingsplanung & Turniere" />
<meta property="og:description" content="Mitgliederverwaltung, Trainingstagebuch, Spiel und Turnierorganisation sowie Statistiken DSGVOfreundlich und einfach." />
<meta property="og:url" content="https://tt-tagebuch.de/" />
<meta property="og:image" content="https://tt-tagebuch.de/vite.svg" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Trainingstagebuch Vereinsverwaltung, Trainingsplanung & Turniere" />
<meta name="twitter:description" content="Mitgliederverwaltung, Trainingstagebuch, Spiel und Turnierorganisation sowie Statistiken DSGVOfreundlich und einfach." />
<meta name="twitter:image" content="https://tt-tagebuch.de/vite.svg" />
<!-- JSON-LD: Website + Organization -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Trainingstagebuch",
"url": "https://tt-tagebuch.de/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://tt-tagebuch.de/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Trainingstagebuch",
"applicationCategory": "SportsApplication",
"operatingSystem": "Web",
"description": "Mitgliederverwaltung, Trainingstagebuch, Spiel- und Turnierorganisation sowie Statistiken DSGVO-freundlich und einfach.",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "EUR"
},
"url": "https://tt-tagebuch.de/"
}
</script>
</head>
<body>
<div id="app"></div>

View File

@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://tt-tagebuch.de/sitemap.xml

View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://tt-tagebuch.de/</loc>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://tt-tagebuch.de/register</loc>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://tt-tagebuch.de/login</loc>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://tt-tagebuch.de/impressum</loc>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://tt-tagebuch.de/datenschutz</loc>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
</urlset>

View File

@@ -1,7 +1,12 @@
<template>
<div class="main">
<header class="app-header">
<h1>Trainingstagebuch</h1>
<h1>
<router-link to="/" class="home-link">
<img :src="logoUrl" alt="Logo" class="home-logo" width="24" height="24" loading="lazy" />
<span>Trainingstagebuch</span>
</router-link>
</h1>
</header>
<div class="app-container">
@@ -83,12 +88,20 @@
<router-view class="content fade-in"></router-view>
</main>
</div>
<footer class="app-footer">
<div class="footer-content">
<router-link to="/impressum" class="footer-link">Impressum</router-link>
<span class="footer-sep">·</span>
<router-link to="/datenschutz" class="footer-link">Datenschutzerklärung</router-link>
</div>
</footer>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import apiClient from './apiClient.js';
import logoUrl from './assets/logo.png';
export default {
name: 'App',
@@ -96,6 +109,7 @@ export default {
return {
selectedClub: null,
sessionInterval: null,
logoUrl,
};
},
computed: {
@@ -229,6 +243,20 @@ export default {
/* Schriftgröße bleibt wie in der main.scss definiert */
}
.home-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: inherit;
text-decoration: none;
}
.home-logo {
width: 24px;
height: 24px;
object-fit: contain;
}
/* App Container */
.app-container {
display: flex;
@@ -403,6 +431,30 @@ export default {
min-height: 0;
}
/* Footer */
.app-footer {
background: white;
border-top: 1px solid var(--border-color);
padding: 0.75rem 1rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.footer-link {
color: var(--text-muted);
text-decoration: none;
}
.footer-link:hover {
color: var(--primary-color);
}
.content {
padding: 1.5rem;
min-height: 100%;

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -13,6 +13,8 @@ import TournamentsView from './views/TournamentsView.vue';
import TrainingStatsView from './views/TrainingStatsView.vue';
import PredefinedActivities from './views/PredefinedActivities.vue';
import OfficialTournaments from './views/OfficialTournaments.vue';
import Impressum from './views/Impressum.vue';
import Datenschutz from './views/Datenschutz.vue';
const routes = [
{ path: '/register', component: Register },
@@ -29,6 +31,8 @@ const routes = [
{ path: '/training-stats', component: TrainingStatsView },
{ path: '/predefined-activities', component: PredefinedActivities },
{ path: '/official-tournaments', component: OfficialTournaments },
{ path: '/impressum', component: Impressum },
{ path: '/datenschutz', component: Datenschutz },
];
const router = createRouter({

View File

@@ -0,0 +1,119 @@
<template>
<div class="container">
<h1>Datenschutzerklärung</h1>
<p class="back-home"><router-link to="/">Zur Startseite</router-link></p>
<section>
<h2>1. Verantwortlicher</h2>
<p>
Torsten Schulz<br/>
Friedrich-Stampfer-Str. 21<br/>
60437 Frankfurt, Deutschland<br/>
E-Mail: <a href="mailto:tsschulz@tsschulz.de">tsschulz@tsschulz.de</a>
</p>
</section>
<section>
<h2>2. Zwecke und Rechtsgrundlagen der Verarbeitung</h2>
<ul>
<li><strong>Bereitstellung der Website</strong> (Server-Logs, Sicherheit, Stabilität) Rechtsgrundlage: Art. 6 Abs. 1 lit. f DSGVO.</li>
<li><strong>Nutzung des TrainingsTagebuchs</strong> (Registrierung, Login, Vereinsverwaltung) Rechtsgrundlage: Art. 6 Abs. 1 lit. b DSGVO (Vertrag/vertragsähnliches Verhältnis).</li>
<li><strong>Einwilligungsbasierte Vorgänge</strong> (z. B. optionale Funktionen) Rechtsgrundlage: Art. 6 Abs. 1 lit. a DSGVO.</li>
</ul>
</section>
<section>
<h2>3. Kategorien personenbezogener Daten</h2>
<ul>
<li><strong>Nutzungsdaten</strong>: IP-Adresse, Datum/Uhrzeit, abgerufene Inhalte, User-Agent (Server-Logfiles).</li>
<li><strong>Registrierungs-/Profildaten</strong>: Benutzername, E-Mail-Adresse (und ggf. weitere durch den Nutzer bereitgestellte Angaben).</li>
<li><strong>Vereins-/Aktivitätsdaten</strong>: Inhalte, die Nutzer im Rahmen der Anwendung anlegen (z. B. Mitglieder-/Trainingsdaten).</li>
<li><strong>Cookies/Local Storage</strong>: technisch notwendige Informationen (z. B. Session-/Auth-Token).</li>
</ul>
</section>
<section>
<h2>4. Empfänger</h2>
<p>
Eine Weitergabe erfolgt nur, soweit dies zur Bereitstellung der Website und Funktionen notwendig ist (z. B. Hosting/Technik) oder eine rechtliche Verpflichtung besteht.
</p>
</section>
<section>
<h2>5. Drittlandübermittlung</h2>
<p>
Eine Übermittlung in Drittländer findet grundsätzlich nicht statt, es sei denn, dies ist zur Nutzung einzelner Dienste technisch erforderlich. In solchen Fällen wird auf geeignete Garantien geachtet.
</p>
</section>
<section>
<h2>6. Speicherdauer</h2>
<p>
Personenbezogene Daten werden nur so lange gespeichert, wie es für die jeweiligen Zwecke erforderlich ist bzw. gesetzliche Aufbewahrungspflichten bestehen. Server-Logdaten werden in der Regel kurzfristig gelöscht.
</p>
</section>
<section>
<h2>7. Rechte der betroffenen Personen</h2>
<ul>
<li>Auskunft (Art. 15 DSGVO)</li>
<li>Berichtigung (Art. 16 DSGVO)</li>
<li>Löschung (Art. 17 DSGVO)</li>
<li>Einschränkung (Art. 18 DSGVO)</li>
<li>Datenübertragbarkeit (Art. 20 DSGVO)</li>
<li>Widerspruch (Art. 21 DSGVO)</li>
<li>Widerruf erteilter Einwilligungen (Art. 7 Abs. 3 DSGVO)</li>
</ul>
<p>
Zudem besteht ein Beschwerderecht bei einer Aufsichtsbehörde (Art. 77 DSGVO), z. B. beim HBDI in Hessen.
</p>
</section>
<section>
<h2>8. Erforderlichkeit der Bereitstellung</h2>
<p>
Für die Nutzung des TrainingsTagebuchs sind bestimmte Angaben erforderlich (z. B. E-Mail und Login-Daten). Ohne diese ist eine Registrierung/Anmeldung nicht möglich.
</p>
</section>
<section>
<h2>9. Cookies</h2>
<p>
Es werden vorwiegend technisch notwendige Cookies bzw. Webspeicher (Local Storage/Session Storage) verwendet, um die Anmeldung und Sitzungen zu ermöglichen. Eine Nutzung findet ohne Tracking zu Werbezwecken statt.
</p>
</section>
<section>
<h2>10. Stand</h2>
<p>
Diese Datenschutzerklärung ist aktuell und wird bei Bedarf angepasst.
</p>
</section>
</div>
</template>
<script>
export default {
name: 'Datenschutz',
};
</script>
<style scoped>
.container {
max-width: 800px;
margin: 0 auto;
padding: 1.5rem;
}
h1 {
margin-bottom: 1rem;
}
section + section {
margin-top: 1rem;
}
.back-home {
margin: 0 0 1rem 0;
}
</style>

View File

@@ -6,21 +6,144 @@
<h2 class="card-title">Willkommen im TrainingsTagebuch</h2>
</div>
<div class="card-body">
<div v-if="!isAuthenticated" class="auth-message">
<p class="message-text">
Melde dich an, um deine Vereine und Trainingsaktivitäten zu verwalten.
</p>
<div class="auth-actions">
<router-link to="/login" class="btn-primary">
<span class="btn-icon">🔐</span>
Einloggen
<div v-if="!isAuthenticated" class="marketing">
<section class="hero">
<h1 class="hero-title">Vereinsverwaltung, Trainingsplanung und Turniere alles an einem Ort</h1>
<p class="hero-subtitle">
Das TrainingsTagebuch hilft Vereinen und Trainerinnen/Trainern, Mitglieder zu verwalten, Trainings zu dokumentieren,
Spielpläne zu organisieren und Ergebnisse auszuwerten DSGVOkonform und einfach zu bedienen.
</p>
<div class="auth-actions">
<router-link to="/register" class="btn-primary">
<span class="btn-icon">🚀</span>
Kostenlos starten
</router-link>
<router-link to="/login" class="btn-secondary">
<span class="btn-icon">🔐</span>
Einloggen
</router-link>
</div>
<ul class="hero-bullets">
<li> Mitglieder- und Gruppenverwaltung</li>
<li> Trainings und Turnierplanung</li>
<li> Trainingsstatistiken und Auswertungen</li>
<li> Rollen, Freigaben und sichere Zugriffe</li>
</ul>
</section>
<section class="features-section">
<h3 class="section-title">Was kannst du mit dem TrainingsTagebuch machen?</h3>
<div class="features-grid">
<div class="feature-card card">
<div class="feature-icon">👥</div>
<h4 class="feature-title">Mitglieder verwalten</h4>
<p class="feature-description">
Erstelle Mitgliedsprofile, bilde Gruppen und halte Kontakt und Freigabestände aktuell.
</p>
</div>
<div class="feature-card card">
<div class="feature-icon">📝</div>
<h4 class="feature-title">Trainingstagebuch führen</h4>
<p class="feature-description">
Dokumentiere Inhalte, Umfang und Anwesenheiten jeder Einheit nachvollziehbar und strukturiert.
</p>
</div>
<div class="feature-card card">
<div class="feature-icon">📅</div>
<h4 class="feature-title">Spielpläne organisieren</h4>
<p class="feature-description">
Plane Spiele, Turniere und Veranstaltungen inklusive Gruppen, Runden und Ergebnissen.
</p>
</div>
<div class="feature-card card">
<div class="feature-icon">📊</div>
<h4 class="feature-title">Statistiken & Auswertung</h4>
<p class="feature-description">
Erhalte Trainings und Teilnahmeübersichten, erkenne Entwicklung und plane gezielt.
</p>
</div>
<div class="feature-card card">
<div class="feature-icon">🔒</div>
<h4 class="feature-title">Sicherheit & DSGVO</h4>
<p class="feature-description">
Datenschutzfreundliche Architektur, Freigaben durch Mitglieder und transparente Zugriffe.
</p>
</div>
<div class="feature-card card">
<div class="feature-icon"></div>
<h4 class="feature-title">Vordefinierte Aktivitäten</h4>
<p class="feature-description">
Nutze Vorlagen für wiederkehrende Übungen und beschleunige deine Dokumentation.
</p>
</div>
</div>
</section>
<section class="how-it-works">
<h3 class="section-title">So funktioniert es</h3>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h4 class="step-title">Registrieren</h4>
<p>Lege kostenlos einen Account an und aktiviere ihn per EMail.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h4 class="step-title">Verein anlegen</h4>
<p>Erstelle deinen Verein, lade Mitglieder ein und richte Gruppen ein.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h4 class="step-title">Planen & dokumentieren</h4>
<p>Plane Termine, dokumentiere Trainings und verfolge Fortschritte.</p>
</div>
</div>
</section>
<section class="seo-copy">
<h3 class="section-title">Für wen ist das TrainingsTagebuch?</h3>
<p class="long-text">
Das TrainingsTagebuch ist die zentrale Plattform für Vereine, Abteilungen und Trainerteams.
Es vereint Mitgliederverwaltung, Trainingsplanung, Spiel und Turnierorganisation sowie aussagekräftige
Statistiken in einer modernen WebAnwendung. Durch klare Rollen und Freigaben behalten Verantwortliche die
Kontrolle, während Mitglieder selbstbestimmt mitwirken können. Ideal für Mannschafts, Racket und
Individualsportarten vom Nachwuchs bis zum Leistungsbereich.
</p>
</section>
<section class="faq">
<h3 class="section-title">Häufige Fragen</h3>
<details>
<summary>Ist die Nutzung kostenlos?</summary>
<p>Ja, du kannst kostenlos starten. Erweiterungen können später folgen.</p>
</details>
<details>
<summary>Wie steht es um den Datenschutz?</summary>
<p>Wir setzen auf Datensparsamkeit, transparente Freigaben und rollenbasierte Zugriffe.</p>
</details>
<details>
<summary>Benötige ich eine Installation?</summary>
<p>Nein, es handelt sich um eine WebAnwendung. Du nutzt sie direkt im Browser.</p>
</details>
</section>
<div class="cta-bottom">
<router-link to="/register" class="btn-primary">
<span class="btn-icon"></span>
Jetzt kostenlos registrieren
</router-link>
<router-link to="/register" class="btn-secondary">
<span class="btn-icon">📝</span>
Registrieren
<router-link to="/login" class="btn-secondary">
<span class="btn-icon">🔐</span>
Ich habe schon einen Account
</router-link>
</div>
</div>
<div v-else class="user-welcome">
<div class="user-avatar">
<span class="avatar-icon">👋</span>
@@ -121,6 +244,46 @@ export default {
gap: 1.25rem;
}
.marketing {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: left;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.hero-title {
font-size: 1.875rem;
line-height: 1.3;
text-align: center;
margin: 0.25rem 0 0.25rem 0;
color: var(--text-primary);
}
.hero-subtitle {
font-size: 1rem;
color: var(--text-secondary);
max-width: 780px;
text-align: center;
margin: 0;
}
.hero-bullets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.5rem 1rem;
list-style: none;
padding: 0;
margin: 0.75rem 0 0 0;
color: var(--text-secondary);
}
.message-text, .welcome-text {
font-size: 1rem;
color: var(--text-secondary);
@@ -226,6 +389,59 @@ export default {
font-size: 0.9rem;
}
/* How it works */
.how-it-works .steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.step {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 1rem;
background: white;
}
.step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 0.5rem;
}
.step-title {
margin: 0 0 0.25rem 0;
font-size: 1rem;
}
.seo-copy .long-text {
max-width: 900px;
margin: 0 auto;
color: var(--text-secondary);
}
.faq details {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background: white;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
.cta-bottom {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
/* Responsive Design */
@media (max-width: 768px) {
.home-container {

View File

@@ -0,0 +1,65 @@
<template>
<div class="container">
<h1>Impressum</h1>
<p class="back-home"><router-link to="/">Zur Startseite</router-link></p>
<section>
<h2>Diensteanbieter</h2>
<p>
Torsten Schulz<br/>
Friedrich-Stampfer-Str. 21<br/>
60437 Frankfurt<br/>
Deutschland
</p>
</section>
<section>
<h2>Kontakt</h2>
<p>
E-Mail: <a href="mailto:tsschulz@tsschulz.de">tsschulz@tsschulz.de</a>
</p>
</section>
<section>
<h2>Vertretungsberechtigte Person</h2>
<p>
Torsten Schulz
</p>
</section>
<section>
<h2>Umsatzsteuer-ID</h2>
<p>
Keine USt-IdNr. vorhanden (privat)
</p>
</section>
<section>
<h2>Inhaltlich Verantwortlicher</h2>
<p>
Torsten Schulz (Anschrift wie oben)
</p>
</section>
</div>
</template>
<script>
export default {
name: 'Impressum',
};
</script>
<style scoped>
.container {
max-width: 800px;
margin: 0 auto;
padding: 1.5rem;
}
h1 {
margin-bottom: 1rem;
}
section + section {
margin-top: 1rem;
}
.back-home {
margin: 0 0 1rem 0;
}
</style>