149 lines
6.3 KiB
HTML
149 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<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">
|
|
<!-- Search Bar -->
|
|
<div class="search-bar">
|
|
<div class="search-compact">
|
|
<input type="text" id="searchTerm" placeholder="z.B. Gravelbike">
|
|
<div class="search-row-compact">
|
|
<input type="number" id="minPrice" placeholder="Min €" value="" min="0" max="1000000000">
|
|
<input type="number" id="maxPrice" placeholder="Max €" value="" min="0" max="1000000000">
|
|
<select id="numListings">
|
|
<option value="25" selected>25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
<option value="250">250</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="search-actions-compact">
|
|
<button id="searchBtn">Suchen</button>
|
|
<button id="cancelBtn" class="cancel" style="display: none;">Stop</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar (Mobile) -->
|
|
<div id="progressInfo" class="progress-info-mobile">
|
|
<div class="progress-text-mobile">Lädt...</div>
|
|
<div class="progress-bar-mobile">
|
|
<div class="progress-fill-mobile"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Results Panel -->
|
|
<div class="results-panel">
|
|
<div class="results-header">
|
|
<div class="results-count">Keine Ergebnisse</div>
|
|
<div id="progressInfoDesktop" 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">Neueste</option>
|
|
<option value="date-asc">Älteste</option>
|
|
<option value="price-asc">Preis ↑</option>
|
|
<option value="price-desc">Preis ↓</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="resultsList"></div>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div class="map-container">
|
|
<div id="statusBar" class="status-bar"></div>
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Fullscreen Popup -->
|
|
<div id="mobilePopup" class="mobile-popup">
|
|
<div class="mobile-popup-header">
|
|
<button class="mobile-popup-close" id="mobilePopupClose">✕</button>
|
|
</div>
|
|
<div class="mobile-popup-content" id="mobilePopupContent">
|
|
<!-- Content will be dynamically inserted -->
|
|
</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</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.</li>
|
|
<li><strong>Standortdaten:</strong> Wenn Sie die Standortfreigabe erlauben, wird Ihre Position auf
|
|
der Karte angezeigt. Diese Daten werden nicht gespeichert.</li>
|
|
<li><strong>Technische Daten:</strong> IP-Adresse und Zeitstempel werden in Server-Logs gespeichert.
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>3. Externe Dienste</h3>
|
|
<h4>3.1 Kleinanzeigen.de</h4>
|
|
<p>Die Anwendung ruft öffentlich verfügbare Inserate von kleinanzeigen.de ab.</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.</p>
|
|
|
|
<h4>3.3 Nominatim Geocoding API</h4>
|
|
<p>Postleitzahlen werden über die Nominatim-API in Koordinaten umgewandelt.</p>
|
|
|
|
<h4>3.4 CDN-Dienste (cdnjs.cloudflare.com)</h4>
|
|
<p>JavaScript- und CSS-Bibliotheken werden über Cloudflare CDN geladen.</p>
|
|
|
|
<h3>4. Browser-Speicher</h3>
|
|
<p>Diese Anwendung nutzt <strong>keine</strong> Cookies, localStorage oder sessionStorage.</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> |