# dgray.io

Eine anonyme, dezentrale Kleinanzeigen-Plattform mit Monero-Bezahlung.

## 🎯 Vision

dgray.io ermöglicht es Nutzern, Kleinanzeigen zu schalten und Waren/Dienstleistungen sicher über Monero (XMR) zu handeln. Besonderheiten:

- **Anonymität**: Nutzung ohne Account möglich
- **Käuferschutz**: Monero MultiSig Escrow
- **Dezentral**: Keine zentrale Zahlungsabwicklung
- **Privacy-First**: E2E-Verschlüsselung für Kommunikation

---

## 📊 Machbarkeitsanalyse

### Technisch realisierbar

| Feature | Komplexität | Status |
|---------|-------------|--------|
| Anzeigen CRUD | Niedrig | ✅ Fertig |
| Fiat/XMR Preisanzeige | Niedrig | ✅ Fertig |
| Anonyme Nutzung (UUID + Hash) | Mittel | ✅ Fertig |
| PWA | Mittel | ✅ Grundgerüst |
| Light/Dark Mode | Niedrig | ✅ Fertig |
| i18n (DE/EN/FR) | Niedrig | ✅ Fertig |
| Bildergalerie | Niedrig | ✅ Fertig |
| E2E-Chat (NaCl box.before + secretbox) | Hoch | ✅ Fertig |
| PoW Captcha (Server-seitig) | Mittel | ✅ Fertig |
| **Monero MultiSig** | **Sehr hoch** | 🔲 Offen |
| Rating-System | Mittel | 🔲 Offen |
| 2FA | Mittel | 🔲 Offen |

### ⚠️ Kritische Punkte

1. **Monero MultiSig Escrow**
   - Komplexeste Komponente
   - Erfordert eigene Wallet-Integration via `monero-wallet-rpc`
   - Nutzer müssen Wallet-Keys verwalten → UX-Hürde
   - Alternative für MVP: Trusted Escrow-Service

2. **Rechtliche Aspekte**
   - AGB, Datenschutz, Impressum erforderlich
   - Geldwäsche-Regularien (je nach Jurisdiktion)
   - Haftung bei Betrug klären

3. **E2E-Verschlüsselung**
   - Key-Management für anonyme Nutzer
   - Optionen: Signal-Protokoll, Matrix-Protokoll

---

## 🛠️ Tech-Stack

### Frontend (aktuell)
- **Vanilla JavaScript** (ES Modules)
- **Web Components** (Custom Elements)
- **CSS Custom Properties** (Theming)
- **PWA** (Service Worker, Manifest)

### Backend (geplant)
- **Directus** (Headless CMS)
  - REST/GraphQL API
  - Auth, Rollen, Berechtigungen
  - Custom Extensions für XMR-Integration

### Services
- **Directus** Backend: `api.dgray.io` (Docker)
- **PoW Captcha + Payment Proxy**: `pow.dgray.io` (PHP, HMAC-signierte Challenges, BTCPay Proxy + Webhook, OG Meta Proxy)
- **BTCPay Server**: `pay.xmr.rocks` (Monero-Zahlungen, Trocador-Plugin)
- **TweetNaCl**: Self-hosted in `js/vendor/` (E2E-Verschlüsselung)

### Infrastruktur (geplant)
- monero-wallet-rpc
- Push-Benachrichtigungen

---

## 🚀 Setup

### Voraussetzungen
- Moderner Browser mit ES Module Support
- Python 3 (für lokalen Server) oder beliebiger HTTP-Server

### Installation

```bash
# Repository klonen
git clone https://gitea.pro/schmidt1024/dgray.git
cd dgray

# Lokalen Server starten
python3 -m http.server 8080

# Oder mit Live-Reload (Node.js erforderlich)
npx live-server
```

Öffne http://localhost:8080

### Deployment

Für Produktion werden nur diese Dateien benötigt:

```
├── index.html
├── manifest.json
├── service-worker.js
├── favicon.png
├── js/
├── css/
├── locales/
└── assets/
```

**Nicht deployen:** `tests/`, `docs/`, `AGENTS.md`, `README.md`, `.git/`, `deploy.sh`

#### Deploy via Script

```bash
# Einmalig: SSH-User und Pfad anpassen
./deploy.sh user@dgray.io /home/user/web/dgray.io/public_html

# Oder Defaults im Script setzen und einfach:
./deploy.sh
```

Das Script nutzt `rsync` über SSH und synchronisiert nur geänderte Dateien.
Ausgeschlossene Dateien/Ordner (tests, docs, .git, etc.) werden automatisch übersprungen.

**Voraussetzungen:**
- SSH-Key-Authentifizierung zum Server
- `rsync` lokal und auf dem Server installiert

### Tests ausführen

```bash
# Server starten
python3 -m http.server 8080

# Im Browser öffnen
# http://localhost:8080/tests/
```

Die Tests laufen im Browser und nutzen einen minimalen Test-Runner ohne externe Dependencies.

### Projektstruktur

```
dgray/
├── index.html              # Entry Point
├── manifest.json           # PWA Manifest
├── service-worker.js       # Offline-Support
├── css/
│   ├── fonts.css           # Web Fonts (Inter, Space Grotesk)
│   ├── variables.css       # Theming (Light/Dark)
│   ├── base.css            # Reset, Grundstyles
│   └── components.css      # UI-Komponenten
├── js/
│   ├── app.js              # App-Initialisierung
│   ├── router.js           # Hash-basiertes Routing
│   ├── i18n.js             # Übersetzungssystem
│   ├── services/
│   │   ├── directus.js     # Directus API Client
│   │   ├── auth.js         # UUID-Auth (SHA-256 Hash)
│   │   ├── listings.js     # Listings-Service
│   │   ├── categories.js   # Kategorien-Service
│   │   ├── locations.js    # Standorte-Service
│   │   ├── conversations.js# Zero-Knowledge Chat
│   │   ├── crypto.js       # NaCl Encryption (box.before + secretbox)
│   │   ├── currency.js     # XMR/Fiat Umrechnung
│   │   ├── pow-captcha.js  # PoW Captcha (Server-first, lokaler Fallback)
│   │   ├── btcpay.js       # BTCPay Server Integration (Invoice, Checkout)
│   │   ├── favorites.js    # Favoriten (localStorage + Directus Sync)
│   │   └── notifications.js# Benachrichtigungen (Polling, Badge)
│   ├── vendor/
│   │   ├── nacl-fast.min.js    # TweetNaCl (self-hosted)
│   │   ├── nacl-util.min.js    # TweetNaCl Utils
│   │   └── cropper.min.js      # Image Cropper
│   └── components/
│       ├── app-shell.js    # Layout-Container
│       ├── app-header.js   # Header mit Navigation
│       ├── app-footer.js   # Footer
│       ├── auth-modal.js   # Login/Register Modal
│       ├── chat-widget.js  # E2E Chat Widget
│       └── pages/          # Seiten-Komponenten
├── locales/
│   ├── de.json             # Deutsch
│   ├── en.json             # English
│   └── fr.json             # Français
├── tests/
│   ├── index.html          # Test-Runner UI
│   ├── test-runner.js      # Test-Framework
│   └── *.test.js           # Unit Tests
└── assets/
    └── fonts/              # Self-hosted Fonts
```

---

## 📋 Offene Punkte / Roadmap

### Phase 1: MVP Frontend
- [x] Projektstruktur
- [x] Routing
- [x] i18n (DE/EN/FR)
- [x] Light/Dark Mode
- [x] PWA Grundgerüst
- [x] Startseite mit Suche, Kategorien, Listings-Grid
- [x] Typografie (Inter + Space Grotesk)
- [x] Such-Komponente mit Accordion-Kategorien
- [x] Anzeige-Detailseite mit Bildergalerie
- [x] Anzeige-Erstellen-Formular
- [x] Suchseite mit Filtern (merged in Home)
- [x] Skeleton Loading, Error Boundary, Offline Indicator
- [x] Lazy Loading für Bilder
- [ ] Responsive Optimierungen

### Phase 2: Backend-Integration ⬅️ **Aktuell**
- [x] Directus aufsetzen (`api.dgray.io`)
- [x] Listings-Collection (CRUD)
- [x] Categories mit Übersetzungen
- [x] User-Auth (UUID + SHA-256 Hash, anonym)
- [x] Bilder-Upload (Junction-Table)
- [x] API-Services (`directus.js`, `listings.js`, `categories.js`, `locations.js`)
- [x] Directus Public-Berechtigungen (siehe `docs/DIRECTUS-SCHEMA.md`)
- [x] Neue Seiten: Favoriten, Meine Anzeigen, Nachrichten, Einstellungen
- [x] Listings bearbeiten (Edit-Modus für eigene Anzeigen)

### Phase 3: Kommunikation & Sicherheit
- [x] Chat-System (E2E-verschlüsselt mit NaCl box.before + secretbox)
- [x] Conversations/Messages Services
- [x] Merkliste (Favoriten-Seite)
- [x] Favoriten Directus-Sync (Union-Merge bei Login, localStorage-Fallback)
- [x] PoW Captcha (server-seitig via pow.dgray.io, HMAC-signiert)
- [x] TweetNaCl self-hosted (kein CDN)
- [x] In-App Benachrichtigungen (Notifications-Service, Glocke mit Badge)
- [x] Open Graph & X Card Meta-Tags (dynamisch pro Listing)
- [ ] Push-Benachrichtigungen (Web Push API)

### Phase 4: Payments
- [x] XMR-Kursabfrage API (CoinGecko)
- [x] Fiat ↔ XMR Umrechnung (Dual-Preis-Anzeige)
- [x] BTCPay Server Integration (`pay.xmr.rocks`, Proxy auf `pow.dgray.io`)
- [x] Listing-Gebühr: 1 EUR/USD/CHF/GBP (200 JPY) via Monero
- [x] Webhook für Auto-Publish nach Blockchain-Confirmation
- [x] Expired Listings (Directus Flow, Status-Badges auf Cards)
- [x] Token-Refresh bei Tab-Visibility-Change
- [ ] Wallet-Anbindung (monero-wallet-rpc)
- [ ] MultiSig Escrow

### Phase 5: Trust & Safety
- [ ] Rating-System
- [ ] 2FA
- [ ] Reporting/Moderation
- [ ] AGB, Datenschutz

---

## 🎨 Design-Entscheidungen

### Typografie
- **Headlines**: Space Grotesk (Medium, Bold)
- **Body**: Inter (Regular, Medium, SemiBold, Bold)
- Self-hosted Fonts (SIL Open Font License)

### Farbpalette
- **Monochrome Theme** - reine Graustufen
- **Light Mode**: BG #FAFAFA, Text #1A1A1A, Primary #555555
- **Dark Mode**: BG #141414, Text #F0F0F0, Primary #AAAAAA

### Mobile-First
- Responsive Grid (2 Spalten Mobile, 5 Spalten Desktop)
- Touch-optimierte Buttons
- Icon-only Buttons auf kleinen Screens

---

## 🤝 Contributing

1. Feature-Branch erstellen
2. Änderungen committen
3. Pull Request öffnen

### Code-Konventionen
- ES Modules verwenden
- Web Components für UI-Komponenten
- CSS Custom Properties für Theming
- Übersetzungsschlüssel für alle Texte
- Keine Semikolons in JavaScript (außer for-loops, CSS)
- Englische Kommentare im Code

---

## 📄 Lizenz

TBD

---

## 📞 Kontakt

TBD
