179 lines
13 KiB
HTML
179 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Dein privater Marktplatz. Kaufe und verkaufe sicher — ohne Konto, ohne Tracking. Bezahle mit Monero.">
|
||
<meta name="theme-color" content="#0D9488">
|
||
|
||
<title>kashilo.com – Dein privater Marktplatz</title>
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:site_name" content="kashilo.com">
|
||
<meta property="og:title" content="kashilo.com – Dein privater Marktplatz">
|
||
<meta property="og:description" content="Kaufe und verkaufe privat — ohne Konto, ohne Tracking. Bezahle mit Monero.">
|
||
<meta property="og:url" content="https://kashilo.com">
|
||
<meta property="og:image" content="https://kashilo.com/assets/press/og-image.png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta property="og:locale" content="de_DE">
|
||
<meta property="og:locale:alternate" content="en_US">
|
||
<meta property="og:locale:alternate" content="fr_FR">
|
||
|
||
<!-- X (Twitter) Card -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="kashilo.com – Dein privater Marktplatz">
|
||
<meta name="twitter:description" content="Kaufe und verkaufe privat — ohne Konto, ohne Tracking. Bezahle mit Monero.">
|
||
<meta name="twitter:image" content="https://kashilo.com/assets/press/og-image.png">
|
||
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="icon" type="image/svg+xml" href="assets/icon-light.svg" media="(prefers-color-scheme: light)">
|
||
<link rel="icon" type="image/svg+xml" href="assets/icon-dark.svg" media="(prefers-color-scheme: dark)">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
|
||
|
||
<!-- Preload critical fonts -->
|
||
<link rel="preload" href="assets/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
||
<link rel="preload" href="assets/fonts/SpaceGrotesk-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
||
|
||
<!-- Modulepreload critical chain -->
|
||
<link rel="modulepreload" href="js/app.js">
|
||
<link rel="modulepreload" href="js/i18n.js">
|
||
<link rel="modulepreload" href="js/router.js">
|
||
<link rel="modulepreload" href="js/services/auth.js">
|
||
<link rel="modulepreload" href="js/services/directus.js">
|
||
<link rel="modulepreload" href="js/components/app-shell.js">
|
||
<link rel="modulepreload" href="js/components/app-header.js">
|
||
<link rel="modulepreload" href="js/components/app-footer.js">
|
||
|
||
<!-- Critical CSS inlined (fonts + variables + base) -->
|
||
<style>
|
||
/* fonts.css */
|
||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional; src: url('assets/fonts/Inter-Regular.woff2') format('woff2'); }
|
||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional; src: url('assets/fonts/Inter-Medium.woff2') format('woff2'); }
|
||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional; src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2'); }
|
||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional; src: url('assets/fonts/Inter-Bold.woff2') format('woff2'); }
|
||
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2'); }
|
||
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); }
|
||
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); }
|
||
|
||
/* variables.css */
|
||
:root {
|
||
--color-primary: #525252; --color-primary-hover: #3F3F3F; --color-primary-light: #E7E5E4;
|
||
--color-secondary: #737373; --color-secondary-hover: #525252;
|
||
--color-accent: #0D9488; --color-accent-hover: #0F766E; --color-accent-text: #fff;
|
||
--color-success: #16A34A; --color-success-text: #fff; --color-warning: #D97706; --color-error: #DC2626;
|
||
--color-bg: #FAFAF9; --color-bg-secondary: #F5F5F4; --color-bg-tertiary: #E7E5E4;
|
||
--color-text: #1C1917; --color-text-secondary: #44403C; --color-text-muted: #78716C;
|
||
--color-border: #D6D3D1; --color-border-focus: #0D9488;
|
||
--color-shadow: rgba(0, 0, 0, 0.08); --color-overlay: rgba(0, 0, 0, 0.5);
|
||
--space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;
|
||
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
--font-family-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
--font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem;
|
||
--font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
|
||
--line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75;
|
||
--radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
|
||
--shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 4px 6px var(--color-shadow); --shadow-lg: 0 10px 15px var(--color-shadow); --shadow-xl: 0 20px 25px var(--color-shadow);
|
||
--transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease;
|
||
--header-height: 4rem; --footer-height: 3rem; --container-max: 1200px; --sidebar-width: 280px;
|
||
--z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme="light"]) {
|
||
--color-primary: #A8A29E; --color-primary-hover: #D6D3D1; --color-primary-light: #292524;
|
||
--color-secondary: #A8A29E; --color-secondary-hover: #D6D3D1;
|
||
--color-accent: #2DD4BF; --color-accent-hover: #5EEAD4; --color-accent-text: #042F2E;
|
||
--color-success: #4ADE80; --color-success-text: #042F2E; --color-warning: #FBBF24; --color-error: #F87171;
|
||
--color-bg: #171717; --color-bg-secondary: #1C1917; --color-bg-tertiary: #292524;
|
||
--color-text: #F5F5F4; --color-text-secondary: #D6D3D1; --color-text-muted: #A8A29E;
|
||
--color-border: #3D3836; --color-border-focus: #2DD4BF;
|
||
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
|
||
}
|
||
}
|
||
[data-theme="dark"] {
|
||
--color-primary: #A8A29E; --color-primary-hover: #D6D3D1; --color-primary-light: #292524;
|
||
--color-secondary: #A8A29E; --color-secondary-hover: #D6D3D1;
|
||
--color-accent: #2DD4BF; --color-accent-hover: #5EEAD4; --color-accent-text: #042F2E;
|
||
--color-success: #4ADE80; --color-success-text: #042F2E; --color-warning: #FBBF24; --color-error: #F87171;
|
||
--color-bg: #171717; --color-bg-secondary: #1C1917; --color-bg-tertiary: #292524;
|
||
--color-text: #F5F5F4; --color-text-secondary: #D6D3D1; --color-text-muted: #A8A29E;
|
||
--color-border: #3D3836; --color-border-focus: #2DD4BF;
|
||
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
/* base.css */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable; }
|
||
body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
|
||
a:hover { color: var(--color-primary-hover); }
|
||
img, svg { display: block; max-width: 100%; height: auto; }
|
||
button, input, textarea, select { font: inherit; color: inherit; }
|
||
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset !important; -webkit-text-fill-color: var(--color-text) !important; box-shadow: 0 0 0 1000px var(--color-bg) inset !important; transition: background-color 5000s ease-in-out 0s; }
|
||
button { cursor: pointer; border: none; background: none; }
|
||
ul, ol { list-style: none; }
|
||
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: -0.02em; }
|
||
h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); }
|
||
p + p { margin-top: var(--space-md); }
|
||
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
|
||
::selection { background-color: var(--color-primary); color: white; }
|
||
.emoji-icon, .upload-icon, .empty-state-icon, [class*="encrypted"], .listing-location { filter: grayscale(1); }
|
||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); }
|
||
@media (min-width: 768px) { .container { padding: 0 var(--space-lg); } }
|
||
app-shell { display: flex; flex-direction: column; min-height: 100vh; }
|
||
app-shell main { flex: 1; padding: var(--space-lg) 0; }
|
||
app-header { display: block; min-height: var(--header-height); }
|
||
app-header .logo-img { height: 28px; width: 100px; display: block; }
|
||
app-header .logo-dark { display: none; }
|
||
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) app-header .logo-light { display: none; } html:not([data-theme="light"]) app-header .logo-dark { display: block; } }
|
||
[data-theme="dark"] app-header .logo-light { display: none; }
|
||
[data-theme="dark"] app-header .logo-dark { display: block; }
|
||
app-footer { display: block; padding: var(--space-lg) 0; margin-top: auto; contain: layout style; }
|
||
app-footer .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }
|
||
app-footer .footer-links { display: flex; gap: var(--space-md); }
|
||
</style>
|
||
|
||
<!-- Non-critical CSS deferred -->
|
||
<link rel="stylesheet" href="css/components.css" media="print" onload="this.media='all'">
|
||
<link rel="stylesheet" href="css/animate.custom.css" media="print" onload="this.media='all'">
|
||
<noscript>
|
||
<link rel="stylesheet" href="css/components.css">
|
||
<link rel="stylesheet" href="css/animate.custom.css">
|
||
</noscript>
|
||
|
||
<script type="module" src="js/app.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<app-shell>
|
||
<app-header></app-header>
|
||
<main class="container" id="router-outlet"></main>
|
||
<app-footer>
|
||
<div class="footer-inner container">
|
||
<p class="footer-copyright">
|
||
© 2026 kashilo.com - <span data-i18n="footer.rights">Alle Rechte vorbehalten.</span>
|
||
<span class="footer-swiss">🇨🇭 Made in Switzerland</span>
|
||
</p>
|
||
<span class="xmr-rate" title="CoinGecko">1 XMR ≈ ...</span>
|
||
<nav class="footer-links">
|
||
<a href="#/about" data-i18n="footer.about">Über uns</a>
|
||
<a href="#/contact" data-i18n="footer.contact">Kontakt</a>
|
||
<a href="#/imprint" data-i18n="footer.imprint">Impressum</a>
|
||
<a href="#/privacy" data-i18n="footer.privacy">Datenschutz</a>
|
||
<a href="#/terms" data-i18n="footer.terms">AGB</a>
|
||
</nav>
|
||
</div>
|
||
</app-footer>
|
||
<div id="auth-modal-slot"></div>
|
||
</app-shell>
|
||
</div>
|
||
|
||
<noscript>
|
||
<p>Diese App benötigt JavaScript.</p>
|
||
</noscript>
|
||
</body>
|
||
</html>
|