banyaro/backend/static/presse.html

319 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presse Ban Yaro</title>
<meta name="description" content="Pressematerial, Logos und Screenshots für Redaktionen Ban Yaro Hunde-App">
<meta name="robots" content="noindex">
<link rel="icon" href="/icons/favicon.ico">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #b97c2a;
--primary-light: #f5ede0;
--text: #1a1a1a;
--muted: #666;
--border: #e5e0d8;
--bg: #faf9f7;
--white: #fff;
--radius: 12px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
/* Header */
header {
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 1.25rem 2rem;
display: flex;
align-items: center;
gap: 1rem;
}
header img { width: 40px; height: 40px; border-radius: 10px; }
header .brand { font-size: 1.25rem; font-weight: 700; color: var(--text); }
header .brand span { color: var(--primary); }
header a { margin-left: auto; color: var(--primary); font-size: .9rem; text-decoration: none; }
/* Layout */
.container { max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem; }
h1 { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; }
h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--text); }
.lead { color: var(--muted); margin-bottom: 3rem; font-size: 1.05rem; }
/* Sections */
section { margin-bottom: 3.5rem; }
.section-label {
font-size: .75rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--primary);
margin-bottom: .75rem;
}
/* Press release */
.pressemitteilung {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem 2.5rem;
}
.pressemitteilung .pm-meta {
font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem;
}
.pressemitteilung h3 {
font-size: 1.4rem; font-weight: 800; margin-bottom: .35rem; line-height: 1.3;
}
.pressemitteilung .pm-sub {
font-size: .95rem; color: var(--muted); font-style: italic; margin-bottom: 1.5rem;
}
.pressemitteilung p { margin-bottom: 1rem; color: #333; }
.pressemitteilung blockquote {
border-left: 3px solid var(--primary);
padding-left: 1rem;
margin: 1.5rem 0;
color: #444;
font-style: italic;
}
/* Downloads */
.download-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
.download-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: var(--text);
transition: box-shadow .15s;
}
.download-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.download-card .thumb {
width: 100%; aspect-ratio: 9/16; object-fit: cover;
background: var(--primary-light);
display: block;
}
.download-card.logo-card .thumb {
aspect-ratio: 1; object-fit: contain; padding: 1.5rem;
}
.download-card .card-label {
padding: .6rem .85rem;
font-size: .8rem; color: var(--muted);
display: flex; align-items: center; justify-content: space-between;
}
.download-card .card-label span { font-weight: 600; color: var(--text); font-size: .85rem; }
.dl-icon { color: var(--primary); font-size: 1rem; }
/* Founder */
.founder-card {
display: flex; gap: 2rem; align-items: flex-start;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
}
.founder-card img {
width: 140px; height: 140px;
border-radius: 50%; object-fit: cover; flex-shrink: 0;
border: 3px solid var(--primary-light);
}
.founder-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; }
.founder-card .role { color: var(--primary); font-size: .9rem; margin-bottom: .75rem; }
.founder-card p { color: #444; font-size: .95rem; }
/* Facts */
.facts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.fact {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
}
.fact .fact-label { font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
.fact .fact-value { font-size: 1rem; font-weight: 700; }
/* Contact */
.contact-box {
background: var(--primary-light);
border-radius: var(--radius);
padding: 1.75rem 2rem;
}
.contact-box p { margin-bottom: .35rem; }
.contact-box a { color: var(--primary); font-weight: 600; text-decoration: none; }
/* Boilerplate */
.boilerplate {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 2rem;
font-size: .9rem;
color: #444;
position: relative;
}
.copy-btn {
position: absolute; top: 1rem; right: 1rem;
background: var(--primary); color: white;
border: none; border-radius: 6px;
padding: .35rem .75rem; font-size: .75rem;
cursor: pointer; font-weight: 600;
}
.copy-btn:hover { opacity: .85; }
@media (max-width: 600px) {
.founder-card { flex-direction: column; }
.founder-card img { width: 100px; height: 100px; }
.pressemitteilung { padding: 1.5rem; }
h1 { font-size: 1.5rem; }
}
</style>
</head>
<body>
<header>
<img src="/icons/icon-180.png" alt="Ban Yaro Icon">
<div class="brand">Ban <span>Yaro</span></div>
<a href="https://banyaro.app">← Zur App</a>
</header>
<div class="container">
<h1>Pressematerial</h1>
<p class="lead">Logos, Screenshots und Hintergrundinformationen für Redaktionen. Alle Materialien sind zur redaktionellen Verwendung freigegeben.</p>
<!-- Pressemitteilung -->
<section>
<div class="section-label">Pressemitteilung</div>
<div class="pressemitteilung">
<div class="pm-meta">Ebersberg, 1. Mai 2026 — zur sofortigen Veröffentlichung freigegeben</div>
<h3>Vom Gipfelfoto bis zum Giftköder-Alarm: App begleitet Hundehalter durch den ganzen Alltag</h3>
<p class="pm-sub">banyaro.app bündelt Tagebuch, Gesundheitsakte und Echtzeit-Warnungen in einer kostenlosen Hunde-App</p>
<p>Manche Gassi-Runden sind einfach unvergesslich — der erste Schnee, der perfekte Sonnenuntergang, die Stelle am Bach, an der der Hund immer ins Wasser springt. Andere hinterlassen Angst: Ein verdächtiges Häufchen am Wegesrand, ein Hund der plötzlich würgt.</p>
<p>Für beides gibt es jetzt eine App: <strong>banyaro.app</strong> ist eine kostenlose Hunde-App aus Bayern, die den ganzen Alltag mit Hund begleitet — von den schönsten Momenten bis zu den gefährlichen.</p>
<p>Im <strong>Hunde-Tagebuch</strong> lassen sich Fotos, Notizen und Erinnerungen sammeln, in der <strong>Gesundheitsakte</strong> Impftermine, Medikamente und Tierarztbesuche verwalten. Die interaktive <strong>Karte</strong> zeigt die besten Hundewiesen, Wasserstellen und Auslaufgebiete in der Umgebung — und die schönsten Routen für die nächste Gassi-Runde.</p>
<p>Der <strong>Giftköder-Alarm</strong> funktioniert nach dem Prinzip der Schwarmintelligenz: Wer einen verdächtigen Fund meldet, macht ihn sofort auf der Karte für alle anderen Hundehalter in der Region sichtbar. Keine Facebook-Gruppe, kein verschwundener Post — die Warnung bleibt dauerhaft abrufbar.</p>
<blockquote>„Ich wollte eine App bauen, die sich wie ein stiller Begleiter anfühlt — die im Hintergrund läuft, Erinnerungen sammelt und im Ernstfall sofort warnt. Kein App Store, keine Kosten, keine Werbung."<br><strong>— René Degelmann, Gründer</strong></blockquote>
<p>banyaro.app ist direkt unter <strong>banyaro.app</strong> erreichbar — ohne Installation, direkt im Smartphone-Browser.</p>
</div>
</section>
<!-- Kurzprofil / Boilerplate -->
<section>
<div class="section-label">Über Ban Yaro — Kurztext für Redaktionen</div>
<div class="boilerplate" id="boilerplate-text">
<button class="copy-btn" onclick="copyBoilerplate()">Kopieren</button>
<p>Ban Yaro ist eine kostenlose Hunde-App für den deutschsprachigen Raum. Die App läuft als Progressive Web App direkt im Smartphone-Browser — ohne Installation über den App Store. Funktionen: Hunde-Tagebuch mit Fotos und Wetter, digitale Gesundheitsakte, interaktive Karte mit Hundewiesen und Giftköder-Alarm, Community-Forum und Trainingspläne. Gegründet 2024 von René Degelmann, Ebersberg bei München. Erreichbar unter banyaro.app.</p>
</div>
</section>
<!-- Screenshots -->
<section>
<div class="section-label">Screenshots — zur redaktionellen Verwendung freigegeben</div>
<div class="download-grid">
<a class="download-card" href="/img/screenshots/screen-1.jpg" download="banyaro-tagebuch.jpg">
<img class="thumb" src="/img/screenshots/screen-1.jpg" alt="Tagebuch">
<div class="card-label"><span>Tagebuch</span> <span class="dl-icon"></span></div>
</a>
<a class="download-card" href="/img/screenshots/screen-2.jpg" download="banyaro-karte-giftkoederr.jpg">
<img class="thumb" src="/img/screenshots/screen-2.jpg" alt="Karte & Giftköder-Alarm">
<div class="card-label"><span>Karte & Alarm</span> <span class="dl-icon"></span></div>
</a>
<a class="download-card" href="/img/screenshots/screen-3.jpg" download="banyaro-gesundheitsakte.jpg">
<img class="thumb" src="/img/screenshots/screen-3.jpg" alt="Gesundheitsakte">
<div class="card-label"><span>Gesundheitsakte</span> <span class="dl-icon"></span></div>
</a>
<a class="download-card" href="/img/screenshots/screen-9.jpg" download="banyaro-forum.jpg">
<img class="thumb" src="/img/screenshots/screen-9.jpg" alt="Forum & Community">
<div class="card-label"><span>Forum</span> <span class="dl-icon"></span></div>
</a>
</div>
</section>
<!-- Logo -->
<section>
<div class="section-label">Logo</div>
<div class="download-grid">
<a class="download-card logo-card" href="/icons/icon-512.png" download="banyaro-logo-512.png">
<img class="thumb" src="/icons/icon-512.png" alt="Ban Yaro Logo">
<div class="card-label"><span>Logo PNG 512px</span> <span class="dl-icon"></span></div>
</a>
<a class="download-card logo-card" href="/icons/icon-192.png" download="banyaro-logo-192.png">
<img class="thumb" src="/icons/icon-192.png" alt="Ban Yaro Logo 192">
<div class="card-label"><span>Logo PNG 192px</span> <span class="dl-icon"></span></div>
</a>
</div>
</section>
<!-- Gründer -->
<section>
<div class="section-label">Gründer</div>
<div class="founder-card">
<img src="/icons/founder.jpg" alt="René Degelmann mit Ban Yaro">
<div>
<h3>René Degelmann</h3>
<div class="role">Gründer & Entwickler, Ban Yaro</div>
<p>René Degelmann ist Softwareentwickler aus Ebersberg bei München. Ban Yaro hat er für seinen eigenen Hund gebaut — und dann gemerkt, dass tausende andere Hundehalter das gleiche brauchen. Die App entstand ohne Investoren, ohne App-Store-Zwang und ohne Werbung.</p>
</div>
</div>
<p style="margin-top:.75rem; font-size:.8rem; color:var(--muted);">Foto zur redaktionellen Verwendung freigegeben — <a href="/icons/founder.jpg" download="rene-degelmann-ban-yaro.jpg" style="color:var(--primary)">herunterladen ↓</a></p>
</section>
<!-- Eckdaten -->
<section>
<div class="section-label">Eckdaten</div>
<div class="facts-grid">
<div class="fact"><div class="fact-label">Gegründet</div><div class="fact-value">2026</div></div>
<div class="fact"><div class="fact-label">Sitz</div><div class="fact-value">Ebersberg bei München</div></div>
<div class="fact"><div class="fact-label">Plattform</div><div class="fact-value">Progressive Web App</div></div>
<div class="fact"><div class="fact-label">Preis</div><div class="fact-value">Kostenlos</div></div>
<div class="fact"><div class="fact-label">Sprache</div><div class="fact-value">Deutsch</div></div>
<div class="fact"><div class="fact-label">Zielmarkt</div><div class="fact-value">D-A-CH</div></div>
</div>
</section>
<!-- Pressekontakt -->
<section>
<div class="section-label">Pressekontakt</div>
<div class="contact-box">
<p><strong>René Degelmann</strong></p>
<p>Ringstr. 26 · 85560 Ebersberg</p>
<p>E-Mail: <a href="mailto:partner@banyaro.app">partner@banyaro.app</a></p>
<p>Web: <a href="https://banyaro.app">banyaro.app</a></p>
</div>
</section>
</div>
<script>
function copyBoilerplate() {
const text = document.getElementById('boilerplate-text').innerText.replace('Kopieren', '').trim();
navigator.clipboard.writeText(text).then(() => {
const btn = document.querySelector('.copy-btn');
btn.textContent = 'Kopiert ✓';
setTimeout(() => btn.textContent = 'Kopieren', 2000);
});
}
</script>
</body>
</html>