188 lines
13 KiB
HTML
188 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="Anonymer Marktplatz mit Monero-Bezahlung. Keine persönlichen Daten, E2E-verschlüsselter Chat.">
|
||
<meta name="theme-color" content="#555555">
|
||
|
||
<title>dgray.io – Anonymous Classifieds with Monero</title>
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:site_name" content="dgray.io">
|
||
<meta property="og:title" content="dgray.io – Anonymous Classifieds with Monero">
|
||
<meta property="og:description" content="Buy and sell anonymously with Monero. No KYC, no email, E2E encrypted chat.">
|
||
<meta property="og:url" content="https://dgray.io">
|
||
<meta property="og:image" content="https://dgray.io/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="dgray.io – Anonymous Classifieds with Monero">
|
||
<meta name="twitter:description" content="Buy and sell anonymously with Monero. No KYC, no email, E2E encrypted chat.">
|
||
<meta name="twitter:image" content="https://dgray.io/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: #555555; --color-primary-hover: #404040; --color-primary-light: #E8E8E8;
|
||
--color-secondary: #777777; --color-secondary-hover: #5A5A5A;
|
||
--color-accent: #047857; --color-accent-hover: #065f46; --color-accent-text: #fff;
|
||
--color-success: #666666; --color-warning: #888888; --color-error: #444444;
|
||
--color-bg: #FAFAFA; --color-bg-secondary: #F0F0F0; --color-bg-tertiary: #E5E5E5;
|
||
--color-text: #1A1A1A; --color-text-secondary: #4A4A4A; --color-text-muted: #737373;
|
||
--color-border: #D0D0D0; --color-border-focus: #555555;
|
||
--color-shadow: rgba(0, 0, 0, 0.1); --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: #AAAAAA; --color-primary-hover: #C0C0C0; --color-primary-light: #2A2A2A;
|
||
--color-secondary: #909090; --color-secondary-hover: #A5A5A5;
|
||
--color-accent: #10B981; --color-accent-hover: #34D399; --color-accent-text: #052e16;
|
||
--color-success: #999999; --color-warning: #AAAAAA; --color-error: #888888;
|
||
--color-bg: #141414; --color-bg-secondary: #1E1E1E; --color-bg-tertiary: #2A2A2A;
|
||
--color-text: #F0F0F0; --color-text-secondary: #C0C0C0; --color-text-muted: #949494;
|
||
--color-border: #3A3A3A; --color-border-focus: #AAAAAA;
|
||
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
|
||
}
|
||
}
|
||
[data-theme="dark"] {
|
||
--color-primary: #AAAAAA; --color-primary-hover: #C0C0C0; --color-primary-light: #2A2A2A;
|
||
--color-secondary: #909090; --color-secondary-hover: #A5A5A5;
|
||
--color-accent: #10B981; --color-accent-hover: #34D399; --color-accent-text: #052e16;
|
||
--color-success: #999999; --color-warning: #AAAAAA; --color-error: #888888;
|
||
--color-bg: #141414; --color-bg-secondary: #1E1E1E; --color-bg-tertiary: #2A2A2A;
|
||
--color-text: #F0F0F0; --color-text-secondary: #C0C0C0; --color-text-muted: #949494;
|
||
--color-border: #3A3A3A; --color-border-focus: #AAAAAA;
|
||
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
|
||
}
|
||
[data-theme="light"] {
|
||
--color-primary: #555555; --color-primary-hover: #404040; --color-primary-light: #E8E8E8;
|
||
--color-secondary: #777777; --color-secondary-hover: #5A5A5A;
|
||
--color-accent: #059669; --color-accent-hover: #047857;
|
||
--color-success: #666666; --color-warning: #888888; --color-error: #444444;
|
||
--color-bg: #FAFAFA; --color-bg-secondary: #F0F0F0; --color-bg-tertiary: #E5E5E5;
|
||
--color-text: #1A1A1A; --color-text-secondary: #4A4A4A; --color-text-muted: #737373;
|
||
--color-border: #D0D0D0; --color-border-focus: #555555;
|
||
--color-shadow: rgba(0, 0, 0, 0.1); --color-overlay: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* 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 dgray.io - <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="#/privacy" data-i18n="footer.privacy">Datenschutz</a>
|
||
<a href="#/terms" data-i18n="footer.terms">AGB</a>
|
||
<a href="#/contact" data-i18n="footer.contact">Kontakt</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>
|