mobile ui
This commit is contained in:
118
web/index.html
118
web/index.html
@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
@ -11,76 +11,84 @@
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Search Bar -->
|
||||
<div class="search-bar">
|
||||
<div class="form-group">
|
||||
<label>Suchbegriff</label>
|
||||
<div class="search-compact">
|
||||
<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 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="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 class="search-actions-compact">
|
||||
<button id="searchBtn">Suchen</button>
|
||||
<button id="cancelBtn" class="cancel" style="display: none;">Stop</button>
|
||||
</div>
|
||||
|
||||
<button id="searchBtn">Suchen</button>
|
||||
<button id="cancelBtn" class="cancel" style="display: none;">Abbrechen</button>
|
||||
</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="progressInfo" class="progress-info">
|
||||
<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">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>
|
||||
<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 Code</a>
|
||||
</div>
|
||||
<div class="footer-info">
|
||||
kleinanzeigen.mosad.xyz © 2025
|
||||
<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>
|
||||
|
||||
@ -96,51 +104,29 @@
|
||||
<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>
|
||||
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>
|
||||
<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>
|
||||
<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. 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>
|
||||
bereitgestellt.</p>
|
||||
|
||||
<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>
|
||||
<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. 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>
|
||||
<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. Alle Daten
|
||||
werden nur während der aktiven Sitzung im Arbeitsspeicher gehalten.</p>
|
||||
<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
|
||||
|
||||
Reference in New Issue
Block a user