163 lines
7.3 KiB
HTML
163 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kleinanzeigen Karten-Suche</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
|
||
<link rel="stylesheet" href="./css/style.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<div class="search-bar">
|
||
<div class="form-group">
|
||
<label>Suchbegriff</label>
|
||
<input type="text" id="searchTerm" placeholder="z.B. Gravelbike">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Preisspanne</label>
|
||
<div class="price-inputs">
|
||
<input type="number" id="minPrice" placeholder="0 €" value="0" min="0" max="1000000000">
|
||
<span class="price-separator">–</span>
|
||
<input type="number" id="maxPrice" placeholder="∞ €" value="" min="0" max="1000000000">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Anzahl Inserate</label>
|
||
<select id="numListings">
|
||
<option value="25" selected>25 Inserate</option>
|
||
<option value="50">50 Inserate</option>
|
||
<option value="100">100 Inserate</option>
|
||
<option value="250">250 Inserate</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button id="searchBtn">Suchen</button>
|
||
<button id="cancelBtn" class="cancel" style="display: none;">Abbrechen</button>
|
||
</div>
|
||
|
||
<div class="results-panel">
|
||
<div class="results-header">
|
||
<div class="results-count">Keine Ergebnisse</div>
|
||
|
||
<div id="progressInfo" class="progress-info">
|
||
<div class="progress-text">Inserate werden geladen...</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill"></div>
|
||
</div>
|
||
<div class="eta-text"></div>
|
||
</div>
|
||
|
||
<div class="sort-control">
|
||
<label>Sortierung:</label>
|
||
<select id="sortSelect">
|
||
<option value="date-desc">Datum (neueste)</option>
|
||
<option value="date-asc">Datum (älteste)</option>
|
||
<option value="price-asc">Preis (niedrig → hoch)</option>
|
||
<option value="price-desc">Preis (hoch → niedrig)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="resultsList"></div>
|
||
</div>
|
||
|
||
<div class="map-container">
|
||
<div id="statusBar" class="status-bar"></div>
|
||
<div id="map"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<div class="footer-links">
|
||
<a href="https://www.mosad.xyz/html/privacy.html" target="_blank">Impressum</a>
|
||
<a href="#" id="privacyLink">Datenschutz</a>
|
||
<a href="https://git.mosad.xyz/localhorst/kleinanzeigen-boosted" target="_blank">Source Code</a>
|
||
</div>
|
||
<div class="footer-info">
|
||
kleinanzeigen.mosad.xyz © 2025
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="privacyModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="modal-close">×</span>
|
||
<h2>Datenschutzerklärung</h2>
|
||
<div class="modal-body">
|
||
<h3>1. Verantwortlicher</h3>
|
||
<p>Siehe <a href="https://www.mosad.xyz/html/privacy.html" target="_blank">Impressum</a></p>
|
||
|
||
<h3>2. Datenverarbeitung</h3>
|
||
<p>Diese Anwendung verarbeitet folgende Daten:</p>
|
||
<ul>
|
||
<li><strong>Suchanfragen:</strong> Ihre Suchbegriffe und Filter werden temporär auf dem Server
|
||
verarbeitet, um Ergebnisse von Kleinanzeigen.de abzurufen.</li>
|
||
<li><strong>Standortdaten:</strong> Wenn Sie die Standortfreigabe in Ihrem Browser erlauben, wird
|
||
Ihre Position verwendet, um sie auf der Karte anzuzeigen. Diese Daten werden nicht gespeichert
|
||
oder übertragen.</li>
|
||
<li><strong>Technische Daten:</strong> IP-Adresse und Zeitstempel werden in Server-Logs zu
|
||
Debugging-Zwecken gespeichert.</li>
|
||
</ul>
|
||
|
||
<h3>3. Externe Dienste</h3>
|
||
<p>Diese Anwendung nutzt folgende externe Dienste:</p>
|
||
|
||
<h4>3.1 Kleinanzeigen.de</h4>
|
||
<p>Die Anwendung ruft öffentlich verfügbare Inserate von kleinanzeigen.de ab. Es gelten die
|
||
Datenschutzbestimmungen von <a href="https://www.kleinanzeigen.de/datenschutzerklaerung/"
|
||
target="_blank">Kleinanzeigen.de</a>.</p>
|
||
|
||
<h4>3.2 OpenStreetMap (Leaflet.js v1.9.4)</h4>
|
||
<p>Für die Kartendarstellung wird Leaflet.js verwendet. Kartenkacheln werden von OpenStreetMap
|
||
bereitgestellt. Beim Laden der Karte werden Anfragen an diese Server gesendet, die Ihre IP-Adresse
|
||
enthalten können.</p>
|
||
<ul>
|
||
<li>OpenStreetMap Datenschutz: <a href="https://wiki.osmfoundation.org/wiki/Privacy_Policy"
|
||
target="_blank">Privacy Policy</a></li>
|
||
</ul>
|
||
|
||
<h4>3.3 Nominatim Geocoding API</h4>
|
||
<p>Postleitzahlen werden über die Nominatim-API von OpenStreetMap in Koordinaten umgewandelt. Die
|
||
Anfragen werden zwischengespeichert, um die Anzahl der API-Aufrufe zu minimieren.</p>
|
||
<ul>
|
||
<li>Nominatim Nutzungsbedingungen: <a
|
||
href="https://operations.osmfoundation.org/policies/nominatim/" target="_blank">Usage
|
||
Policy</a></li>
|
||
</ul>
|
||
|
||
<h4>3.4 CDN-Dienste (cdnjs.cloudflare.com)</h4>
|
||
<p>JavaScript- und CSS-Bibliotheken werden über Cloudflare CDN geladen. Cloudflare kann dabei Ihre
|
||
IP-Adresse verarbeiten.</p>
|
||
<ul>
|
||
<li>Cloudflare Datenschutz: <a href="https://www.cloudflare.com/privacypolicy/"
|
||
target="_blank">Privacy Policy</a></li>
|
||
</ul>
|
||
|
||
<h3>4. Browser-Speicher</h3>
|
||
<p>Diese Anwendung nutzt <strong>keine</strong> Cookies, localStorage oder sessionStorage. Alle Daten
|
||
werden nur während der aktiven Sitzung im Arbeitsspeicher gehalten.</p>
|
||
|
||
<h3>5. Kontakt</h3>
|
||
<p>Bei Fragen zum Datenschutz wenden Sie sich bitte an die im <a
|
||
href="https://www.mosad.xyz/html/privacy.html" target="_blank">Impressum</a> angegebenen
|
||
Kontaktdaten.</p>
|
||
|
||
<p><small>Stand: November 2025</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
||
<script src="./js/config.js"></script>
|
||
<script src="./js/map.js"></script>
|
||
<script src="./js/ui.js"></script>
|
||
<script src="./js/api.js"></script>
|
||
<script src="./js/app.js"></script>
|
||
</body>
|
||
|
||
</html> |