# 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 | 🔲 Offen |
| Fiat/XMR Preisanzeige | Niedrig | 🔲 Offen |
| Anonyme Nutzung | Mittel | 🔲 Offen |
| PWA | Mittel | ✅ Grundgerüst |
| Light/Dark Mode | Niedrig | ✅ Fertig |
| i18n (DE/EN/FR) | Niedrig | ✅ Fertig |
| E2E-Chat | Hoch | 🔲 Offen |
| **Monero MultiSig** | **Sehr hoch** | 🔲 Offen |
| KI-Assistenz | Mittel | 🔲 Offen |
| Rating-System | Mittel | 🔲 Offen |
| 2FA | Mittel | 🔲 Offen |
| Forum/Gruppen | Hoch | 🔲 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

### Infrastruktur (geplant)
- PostgreSQL + Redis
- monero-wallet-rpc
- Matrix/Signal für Chat

---

## 🚀 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/tausch.app.git
cd tausch.app

# Lokalen Server starten
python3 -m http.server 8080

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

Öffne http://localhost:8080

### Projektstruktur

```
tausch.app/
├── 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/
│   │   └── api.js          # API-Client (Vorbereitung)
│   └── components/
│       ├── app-shell.js    # Layout-Container
│       ├── app-header.js   # Header mit Navigation
│       ├── app-footer.js   # Footer
│       └── pages/          # Seiten-Komponenten
├── locales/
│   ├── de.json             # Deutsch
│   ├── en.json             # English
│   └── fr.json             # Français
└── assets/
    ├── fonts/              # Self-hosted Fonts (Inter, Space Grotesk)
    └── icons/              # App-Icons
```

---

## 📋 Offene Punkte / Roadmap

### Phase 1: MVP Frontend ⬅️ **Aktuell**
- [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
- [ ] Suchseite mit Filtern
- [ ] Anzeige-Detailseite
- [ ] Anzeige-Erstellen-Formular
- [ ] Responsive Optimierungen

### Phase 2: Backend-Integration
- [ ] Directus aufsetzen
- [ ] Anzeigen-Collection
- [ ] User-Auth (optional/anonym)
- [ ] Bilder-Upload
- [ ] API-Anbindung im Frontend

### Phase 3: Kommunikation
- [ ] Chat-System (E2E-verschlüsselt)
- [ ] Benachrichtigungen
- [ ] Merkliste

### Phase 4: Payments
- [ ] XMR-Kursabfrage API
- [ ] Fiat ↔ XMR Umrechnung
- [ ] 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
- **Light Mode**: Lavender-Töne (#FAF8FC, #6B5B95)
- **Dark Mode**: Deep Purple (#1A1424, #B8A5D6)
- WCAG AAA konform (Kontrast > 7:1)

### 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

---

## 📄 Lizenz

TBD

---

## 📞 Kontakt

TBD