From 8a1f078435f3422c9ece8321e1806c872f1015fd Mon Sep 17 00:00:00 2001 From: localhorst Date: Wed, 26 Nov 2025 11:17:12 +0100 Subject: [PATCH] mobile ui --- web/css/style.css | 780 ++++++++++++++++++++++++++++------------------ web/index.html | 118 ++++--- web/js/app.js | 4 + web/js/map.js | 59 +++- web/js/ui.js | 109 +++++-- 5 files changed, 668 insertions(+), 402 deletions(-) diff --git a/web/css/style.css b/web/css/style.css index 3fd1f7f..46becaa 100644 --- a/web/css/style.css +++ b/web/css/style.css @@ -10,275 +10,128 @@ body { overflow: hidden; background: #1a1a1a; color: #e0e0e0; + -webkit-tap-highlight-color: transparent; } .container { - display: grid; - grid-template-columns: 380px 1fr; - grid-template-rows: auto 1fr; - height: calc(100vh - 60px); -} - -.search-bar { - grid-column: 1 / -1; - background: #242424; - padding: 20px; - box-shadow: 0 2px 8px rgba(0,0,0,0.3); - display: grid; - grid-template-columns: 1fr auto auto auto auto; - gap: 12px; - align-items: end; -} - -.form-group { display: flex; flex-direction: column; - gap: 6px; + height: calc(100vh - 45px); } -.form-group label { - font-size: 12px; - font-weight: 600; - color: #b0b0b0; - text-transform: uppercase; - letter-spacing: 0.5px; +/* Compact Search Bar (Mobile First) */ +.search-bar { + background: #242424; + padding: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + z-index: 1000; + display: flex; + flex-direction: column; + gap: 8px; } -.search-bar input, .search-bar select { - padding: 12px; +.search-compact { + display: flex; + flex-direction: column; + gap: 8px; +} + +.search-compact input[type="text"] { + width: 100%; + padding: 10px; border: 1px solid #3a3a3a; border-radius: 6px; font-size: 14px; background: #2a2a2a; color: #e0e0e0; - transition: all 0.2s; } -.search-bar input:focus, .search-bar select:focus { - outline: none; - border-color: #0ea5e9; - box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); +.search-row-compact { + display: grid; + grid-template-columns: 1fr 1fr 70px; + gap: 6px; } -.price-inputs { - display: flex; - gap: 8px; - align-items: center; +.search-row-compact input, +.search-row-compact select { + padding: 8px 6px; + border: 1px solid #3a3a3a; + border-radius: 6px; + font-size: 12px; + background: #2a2a2a; + color: #e0e0e0; + min-width: 0; } -.price-inputs input { - width: 120px; +.search-actions-compact { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 6px; } -.price-separator { - color: #666; - font-weight: 600; - padding: 0 4px; -} - -.search-bar button { - padding: 12px 24px; +.search-actions-compact button { + padding: 10px 16px; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; - font-size: 14px; - transition: all 0.2s; - box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3); + font-size: 13px; + white-space: nowrap; } -.search-bar button:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4); -} - -.search-bar button:disabled { +.search-actions-compact button:disabled { background: #3a3a3a; cursor: not-allowed; - box-shadow: none; } -.search-bar button.cancel { +.search-actions-compact button.cancel { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); - box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); } -.search-bar button.cancel:hover { - box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); -} - -.results-panel { - background: #1e1e1e; - overflow-y: auto; - border-right: 1px solid #2a2a2a; -} - -.results-panel::-webkit-scrollbar { - width: 8px; -} - -.results-panel::-webkit-scrollbar-track { - background: #1a1a1a; -} - -.results-panel::-webkit-scrollbar-thumb { - background: #3a3a3a; - border-radius: 4px; -} - -.results-panel::-webkit-scrollbar-thumb:hover { - background: #4a4a4a; -} - -.results-header { - background: #242424; - padding: 20px; - border-bottom: 1px solid #2a2a2a; - position: sticky; - top: 0; - z-index: 10; -} - -.results-count { - font-weight: 700; - color: #e0e0e0; - margin-bottom: 12px; - font-size: 16px; -} - -.progress-info { - background: rgba(14, 165, 233, 0.1); - padding: 14px; - border-radius: 6px; - margin-bottom: 12px; +/* Mobile Progress Bar */ +.progress-info-mobile { + background: rgba(14, 165, 233, 0.15); + padding: 6px 8px; display: none; - border: 1px solid rgba(14, 165, 233, 0.2); + border-bottom: 1px solid rgba(14, 165, 233, 0.3); } -.progress-info.active { +.progress-info-mobile.active { display: block; } -.progress-bar { - width: 100%; - height: 6px; - background: rgba(255, 255, 255, 0.1); - border-radius: 3px; - overflow: hidden; - margin-top: 10px; +.progress-text-mobile { + font-size: 11px; + color: #0ea5e9; + font-weight: 600; + margin-bottom: 4px; } -.progress-fill { +.progress-bar-mobile { + height: 3px; + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + overflow: hidden; +} + +.progress-fill-mobile { height: 100%; background: linear-gradient(90deg, #0ea5e9 0%, #06b6d4 100%); width: 0%; transition: width 0.3s; - box-shadow: 0 0 10px rgba(14, 165, 233, 0.5); } -.progress-text { - font-size: 13px; - color: #0ea5e9; - margin-bottom: 6px; - font-weight: 600; -} - -.eta-text { - font-size: 11px; - color: #888; - margin-top: 6px; -} - -.sort-control { - display: flex; - gap: 8px; - align-items: center; -} - -.sort-control label { - font-size: 12px; - color: #888; - font-weight: 600; -} - -.sort-control select { - padding: 8px 12px; - border: 1px solid #3a3a3a; - border-radius: 6px; - font-size: 13px; - background: #2a2a2a; - color: #e0e0e0; -} - -.result-item { - background: #242424; - margin: 12px; - border-radius: 8px; - overflow: hidden; - cursor: pointer; - transition: all 0.2s; - border: 1px solid #2a2a2a; -} - -.result-item:hover { - border-color: #0ea5e9; - box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2); - transform: translateY(-2px); -} - -.result-item.selected { - border-color: #0ea5e9; - box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); -} - -.result-image { - width: 100%; - height: 180px; - object-fit: cover; - background: #1a1a1a; -} - -.result-content { - padding: 14px; -} - -.result-title { - font-weight: 600; - color: #e0e0e0; - margin-bottom: 10px; - font-size: 14px; - line-height: 1.4; -} - -.result-price { - color: #0ea5e9; - font-weight: 700; - font-size: 20px; - margin-bottom: 10px; -} - -.result-meta { - display: flex; - justify-content: space-between; - font-size: 12px; - color: #888; -} - -.result-location { - display: flex; - align-items: center; - gap: 4px; -} - -.result-date { - font-style: italic; +/* Desktop Results Panel - Hidden on Mobile */ +.results-panel { + display: none; } +/* Map Container */ .map-container { + flex: 1; position: relative; - height: 100%; background: #1a1a1a; } @@ -290,16 +143,18 @@ body { .status-bar { position: absolute; - top: 20px; + top: 10px; left: 50%; transform: translateX(-50%); background: #242424; - padding: 14px 24px; - border-radius: 8px; - box-shadow: 0 4px 16px rgba(0,0,0,0.4); - z-index: 1000; + padding: 8px 12px; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + z-index: 999; display: none; border: 1px solid #3a3a3a; + max-width: 90%; + font-size: 12px; } .status-bar.visible { @@ -324,64 +179,157 @@ body { border-color: rgba(239, 68, 68, 0.3); } -.no-results { - text-align: center; - padding: 60px 20px; - color: #666; - font-size: 14px; -} - .loading-spinner { display: inline-block; - width: 14px; - height: 14px; + width: 12px; + height: 12px; border: 2px solid #0ea5e9; border-radius: 50%; border-top-color: transparent; animation: spin 0.8s linear infinite; - margin-right: 10px; + margin-right: 8px; } @keyframes spin { - to { transform: rotate(360deg); } + to { + transform: rotate(360deg); + } } +/* Mobile Fullscreen Popup */ +.mobile-popup { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #1a1a1a; + z-index: 10000; + overflow-y: auto; +} + +.mobile-popup.show { + display: flex; + flex-direction: column; +} + +.mobile-popup-header { + background: #242424; + padding: 12px; + display: flex; + justify-content: flex-end; + border-bottom: 1px solid #3a3a3a; +} + +.mobile-popup-close { + background: none; + border: none; + color: #888; + font-size: 28px; + cursor: pointer; + padding: 0; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.mobile-popup-content { + flex: 1; + padding: 16px; + overflow-y: auto; +} + +.popup-image { + width: 100%; + height: 250px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 16px; +} + +.popup-title { + font-size: 20px; + font-weight: 700; + color: #e0e0e0; + margin-bottom: 12px; + line-height: 1.4; +} + +.popup-price { + font-size: 28px; + font-weight: 700; + color: #0ea5e9; + margin-bottom: 16px; +} + +.popup-meta { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 20px; +} + +.popup-meta-item { + display: flex; + align-items: center; + gap: 8px; + color: #ccc; + font-size: 14px; +} + +.popup-meta-icon { + font-size: 18px; +} + +.popup-link { + display: block; + padding: 14px; + background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); + color: white; + text-align: center; + text-decoration: none; + border-radius: 8px; + font-weight: 600; + font-size: 16px; +} + +/* Footer */ .footer { background: #242424; border-top: 1px solid #2a2a2a; - padding: 15px 20px; - height: 60px; + padding: 10px 12px; + height: 45px; + display: flex; + align-items: center; } .footer-content { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; - max-width: 1400px; - margin: 0 auto; + width: 100%; + font-size: 11px; } .footer-links { display: flex; - gap: 20px; + gap: 12px; } .footer-links a { color: #888; text-decoration: none; - font-size: 13px; - transition: color 0.2s; -} - -.footer-links a:hover { - color: #0ea5e9; + font-size: 11px; } .footer-info { - color: #666; - font-size: 12px; + display: none; } +/* Privacy Modal */ .modal { display: none; position: fixed; @@ -391,7 +339,7 @@ body { width: 100%; height: 100%; overflow: auto; - background-color: rgba(0,0,0,0.8); + background-color: rgba(0, 0, 0, 0.85); } .modal.show { @@ -405,7 +353,7 @@ body { border: 1px solid #3a3a3a; border-radius: 8px; width: 90%; - max-width: 800px; + max-width: 600px; max-height: 80vh; overflow: hidden; display: flex; @@ -414,60 +362,48 @@ body { .modal-content h2 { background: #2a2a2a; - padding: 20px; + padding: 16px; margin: 0; color: #e0e0e0; border-bottom: 1px solid #3a3a3a; + font-size: 18px; } .modal-body { - padding: 20px; + padding: 16px; overflow-y: auto; flex: 1; -} - -.modal-body::-webkit-scrollbar { - width: 8px; -} - -.modal-body::-webkit-scrollbar-track { - background: #1a1a1a; -} - -.modal-body::-webkit-scrollbar-thumb { - background: #3a3a3a; - border-radius: 4px; + font-size: 13px; + line-height: 1.6; } .modal-body h3 { color: #0ea5e9; - margin-top: 20px; - margin-bottom: 10px; - font-size: 18px; + margin-top: 16px; + margin-bottom: 8px; + font-size: 16px; } .modal-body h4 { color: #888; - margin-top: 15px; - margin-bottom: 8px; - font-size: 14px; + margin-top: 12px; + margin-bottom: 6px; + font-size: 13px; } .modal-body p { margin-bottom: 10px; - line-height: 1.6; color: #ccc; } .modal-body ul { margin-left: 20px; - margin-bottom: 15px; + margin-bottom: 12px; } .modal-body li { - margin-bottom: 8px; + margin-bottom: 6px; color: #ccc; - line-height: 1.6; } .modal-body a { @@ -475,52 +411,290 @@ body { text-decoration: none; } -.modal-body a:hover { - text-decoration: underline; -} - .modal-close { color: #888; position: absolute; - right: 20px; - top: 20px; - font-size: 28px; + right: 16px; + top: 16px; + font-size: 24px; font-weight: bold; cursor: pointer; - transition: color 0.2s; } -.modal-close:hover, -.modal-close:focus { - color: #fff; -} - -@media (max-width: 1024px) { +/* Desktop Styles */ +@media (min-width: 768px) { .container { - grid-template-columns: 320px 1fr; + display: grid; + grid-template-columns: 380px 1fr; + grid-template-rows: auto 1fr; + height: calc(100vh - 50px); } - + .search-bar { - grid-template-columns: 1fr; + grid-column: 1 / -1; + padding: 16px; + gap: 12px; + flex-direction: row; + align-items: end; } - - .price-inputs input { - width: 100px; - } -} -@media (max-width: 768px) { - .container { - grid-template-columns: 1fr; - grid-template-rows: auto auto 1fr; + .search-compact { + flex-direction: row; + flex: 0 0 auto; + max-width: 800px; } - + + .search-compact input[type="text"] { + width: 250px; + padding: 12px; + } + + .search-row-compact { + width: auto; + display: flex; + gap: 8px; + } + + .search-row-compact input { + width: 110px; + padding: 12px; + font-size: 14px; + } + + .search-row-compact select { + width: 90px; + padding: 12px; + font-size: 14px; + } + + .search-actions-compact { + flex-direction: row; + flex: 0 0 auto; + } + + .search-actions-compact button { + padding: 12px 24px; + font-size: 14px; + width: auto; + } + + /* Hide mobile progress */ + .progress-info-mobile { + display: none !important; + } + + /* Show desktop results panel */ .results-panel { - max-height: 300px; - } - - .footer-content { + display: flex; flex-direction: column; - gap: 10px; + background: #1e1e1e; + overflow-y: auto; + border-right: 1px solid #2a2a2a; + } + + .results-panel::-webkit-scrollbar { + width: 8px; + } + + .results-panel::-webkit-scrollbar-track { + background: #1a1a1a; + } + + .results-panel::-webkit-scrollbar-thumb { + background: #3a3a3a; + border-radius: 4px; + } + + .results-header { + background: #242424; + padding: 16px; + border-bottom: 1px solid #2a2a2a; + position: sticky; + top: 0; + z-index: 10; + } + + .results-count { + font-weight: 700; + color: #e0e0e0; + margin-bottom: 12px; + font-size: 15px; + } + + .progress-info { + background: rgba(14, 165, 233, 0.1); + padding: 12px; + border-radius: 6px; + margin-bottom: 12px; + display: none; + border: 1px solid rgba(14, 165, 233, 0.2); + } + + .progress-info.active { + display: block; + } + + .progress-bar { + width: 100%; + height: 5px; + background: rgba(255, 255, 255, 0.1); + border-radius: 3px; + overflow: hidden; + margin-top: 8px; + } + + .progress-fill { + height: 100%; + background: linear-gradient(90deg, #0ea5e9 0%, #06b6d4 100%); + width: 0%; + transition: width 0.3s; + } + + .progress-text { + font-size: 12px; + color: #0ea5e9; + font-weight: 600; + margin-bottom: 4px; + } + + .eta-text { + font-size: 11px; + color: #888; + margin-top: 4px; + } + + .sort-control { + display: flex; + gap: 8px; + align-items: center; + } + + .sort-control label { + font-size: 12px; + color: #888; + font-weight: 600; + } + + .sort-control select { + flex: 1; + padding: 8px 12px; + border: 1px solid #3a3a3a; + border-radius: 6px; + font-size: 13px; + background: #2a2a2a; + color: #e0e0e0; + } + + .result-item { + background: #242424; + margin: 10px; + border-radius: 8px; + overflow: hidden; + cursor: pointer; + transition: all 0.2s; + border: 1px solid #2a2a2a; + } + + .result-item:hover { + border-color: #0ea5e9; + box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2); + transform: translateY(-2px); + } + + .result-item.selected { + border-color: #0ea5e9; + box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); + } + + .result-image { + width: 100%; + height: 160px; + object-fit: cover; + background: #1a1a1a; + } + + .result-content { + padding: 12px; + } + + .result-title { + font-weight: 600; + color: #e0e0e0; + margin-bottom: 8px; + font-size: 13px; + line-height: 1.4; + } + + .result-price { + color: #0ea5e9; + font-weight: 700; + font-size: 18px; + margin-bottom: 8px; + } + + .result-meta { + display: flex; + justify-content: space-between; + font-size: 11px; + color: #888; + } + + .result-location { + display: flex; + align-items: center; + gap: 4px; + } + + .result-date { + font-style: italic; + } + + .no-results { + text-align: center; + padding: 40px 20px; + color: #666; + font-size: 13px; + } + + .map-container { + grid-column: 2; + grid-row: 2; + } + + /* Hide mobile popup on desktop */ + .mobile-popup { + display: none !important; + } + + .footer { + padding: 12px 20px; + height: 50px; + } + + .footer-content { + justify-content: space-between; + max-width: 1400px; + margin: 0 auto; + font-size: 12px; + } + + .footer-links { + gap: 16px; + } + + .footer-links a { + font-size: 12px; + } + + .footer-info { + display: block; + color: #666; + font-size: 12px; + } + + .status-bar { + top: 20px; + padding: 12px 20px; + font-size: 13px; } } \ No newline at end of file diff --git a/web/index.html b/web/index.html index b4edccb..eb3c5e5 100644 --- a/web/index.html +++ b/web/index.html @@ -3,7 +3,7 @@ - + Kleinanzeigen Karten-Suche @@ -11,76 +11,84 @@
+
-
- +
-
- -
- -
- - – - +
+ + +
- -
- - +
+ +
- - -
+ +
+
Lädt...
+
+
+
+
+ +
Keine Ergebnisse
- -
+
Inserate werden geladen...
-
+
+ +
+
+ +
+
+ +
+
+ @@ -96,51 +104,29 @@

Diese Anwendung verarbeitet folgende Daten:

  • Suchanfragen: Ihre Suchbegriffe und Filter werden temporär auf dem Server - verarbeitet, um Ergebnisse von Kleinanzeigen.de abzurufen.
    • -
  • Standortdaten: 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.
    • -
  • Technische Daten: IP-Adresse und Zeitstempel werden in Server-Logs zu - Debugging-Zwecken gespeichert.
    • + verarbeitet. +
  • Standortdaten: Wenn Sie die Standortfreigabe erlauben, wird Ihre Position auf + der Karte angezeigt. Diese Daten werden nicht gespeichert.
    • +
  • Technische Daten: IP-Adresse und Zeitstempel werden in Server-Logs gespeichert. +

3. Externe Dienste

-

Diese Anwendung nutzt folgende externe Dienste:

-

3.1 Kleinanzeigen.de

-

Die Anwendung ruft öffentlich verfügbare Inserate von kleinanzeigen.de ab. Es gelten die - Datenschutzbestimmungen von Kleinanzeigen.de.

+

Die Anwendung ruft öffentlich verfügbare Inserate von kleinanzeigen.de ab.

3.2 OpenStreetMap (Leaflet.js v1.9.4)

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.

- + bereitgestellt.

3.3 Nominatim Geocoding API

-

Postleitzahlen werden über die Nominatim-API von OpenStreetMap in Koordinaten umgewandelt. Die - Anfragen werden zwischengespeichert, um die Anzahl der API-Aufrufe zu minimieren.

- +

Postleitzahlen werden über die Nominatim-API in Koordinaten umgewandelt.

3.4 CDN-Dienste (cdnjs.cloudflare.com)

-

JavaScript- und CSS-Bibliotheken werden über Cloudflare CDN geladen. Cloudflare kann dabei Ihre - IP-Adresse verarbeiten.

- +

JavaScript- und CSS-Bibliotheken werden über Cloudflare CDN geladen.

4. Browser-Speicher

-

Diese Anwendung nutzt keine Cookies, localStorage oder sessionStorage. Alle Daten - werden nur während der aktiven Sitzung im Arbeitsspeicher gehalten.

+

Diese Anwendung nutzt keine Cookies, localStorage oder sessionStorage.

5. Kontakt

Bei Fragen zum Datenschutz wenden Sie sich bitte an die im { document.addEventListener('DOMContentLoaded', () => { initMap(); initPrivacyModal(); + initMobilePopup(); + initPriceInputs(); + console.log('Kleinanzeigen Karten-Suche initialized'); console.log('API Base URL:', API_BASE_URL); + console.log('Mobile view:', window.innerWidth < 768); }); \ No newline at end of file diff --git a/web/js/map.js b/web/js/map.js index b9ab978..8d97b12 100644 --- a/web/js/map.js +++ b/web/js/map.js @@ -46,11 +46,21 @@ function addMarker(listing) { const marker = L.marker([listing.lat, listing.lon]).addTo(AppState.map); - const imageHtml = listing.image - ? `${listing.title}` - : ''; + // Check if mobile + const isMobile = window.innerWidth < 768; - const popupContent = ` + if (isMobile) { + // On mobile: open fullscreen popup + marker.on('click', () => { + showMobilePopup(listing); + }); + } else { + // On desktop: use regular leaflet popup + const imageHtml = listing.image + ? `${listing.title}` + : ''; + + const popupContent = `

`; - marker.bindPopup(popupContent); + marker.bindPopup(popupContent); - marker.on('click', () => { - AppState.selectedListingId = listing.id; - highlightSelectedListing(); - }); + marker.on('click', () => { + AppState.selectedListingId = listing.id; + highlightSelectedListing(); + }); + } AppState.markers.push(marker); +} + +function showMobilePopup(listing) { + const popup = document.getElementById('mobilePopup'); + const content = document.getElementById('mobilePopupContent'); + + const imageHtml = listing.image + ? `${listing.title}` + : ''; + + const dateStr = listing.date_added ? new Date(listing.date_added).toLocaleDateString('de-DE') : 'Unbekannt'; + + content.innerHTML = ` + ${imageHtml} +
${listing.title}
+
${listing.price} €
+
+
+ 📍 + ${listing.address || listing.zip_code} +
+
+ 📅 + ${dateStr} +
+
+ Inserat auf Kleinanzeigen.de öffnen + `; + + popup.classList.add('show'); } \ No newline at end of file diff --git a/web/js/ui.js b/web/js/ui.js index 42390d6..0b22e56 100644 --- a/web/js/ui.js +++ b/web/js/ui.js @@ -18,35 +18,55 @@ function showStatus(message, type = 'loading') { } function updateProgress(current, total) { - const progressInfo = document.getElementById('progressInfo'); - const progressFill = progressInfo.querySelector('.progress-fill'); - const progressText = progressInfo.querySelector('.progress-text'); - const etaText = progressInfo.querySelector('.eta-text'); + const isMobile = window.innerWidth < 768; - if (total === 0) { - progressInfo.classList.remove('active'); - return; - } + if (isMobile) { + // Mobile progress bar + const progressInfo = document.getElementById('progressInfo'); + const progressFill = progressInfo.querySelector('.progress-fill-mobile'); + const progressText = progressInfo.querySelector('.progress-text-mobile'); - progressInfo.classList.add('active'); - const percentage = (current / total) * 100; - progressFill.style.width = percentage + '%'; - progressText.textContent = `Inserate werden geladen: ${current}/${total}`; + if (total === 0) { + progressInfo.classList.remove('active'); + return; + } - // Calculate ETA - if (AppState.scrapeStartTime && current > 0) { - const elapsed = (Date.now() - AppState.scrapeStartTime) / 1000; - const avgTimePerListing = elapsed / current; - const remaining = total - current; - const etaSeconds = Math.round(avgTimePerListing * remaining); + progressInfo.classList.add('active'); + const percentage = (current / total) * 100; + progressFill.style.width = percentage + '%'; + progressText.textContent = `${current}/${total} Inserate`; + } else { + // Desktop progress bar + const progressInfo = document.getElementById('progressInfoDesktop'); + const progressFill = progressInfo.querySelector('.progress-fill'); + const progressText = progressInfo.querySelector('.progress-text'); + const etaText = progressInfo.querySelector('.eta-text'); - const minutes = Math.floor(etaSeconds / 60); - const seconds = etaSeconds % 60; + if (total === 0) { + progressInfo.classList.remove('active'); + return; + } - if (minutes > 0) { - etaText.textContent = `Noch ca. ${minutes}m ${seconds}s`; - } else { - etaText.textContent = `Noch ca. ${seconds}s`; + progressInfo.classList.add('active'); + const percentage = (current / total) * 100; + progressFill.style.width = percentage + '%'; + progressText.textContent = `Inserate werden geladen: ${current}/${total}`; + + // Calculate ETA + if (AppState.scrapeStartTime && current > 0) { + const elapsed = (Date.now() - AppState.scrapeStartTime) / 1000; + const avgTimePerListing = elapsed / current; + const remaining = total - current; + const etaSeconds = Math.round(avgTimePerListing * remaining); + + const minutes = Math.floor(etaSeconds / 60); + const seconds = etaSeconds % 60; + + if (minutes > 0) { + etaText.textContent = `Noch ca. ${minutes}m ${seconds}s`; + } else { + etaText.textContent = `Noch ca. ${seconds}s`; + } } } } @@ -70,6 +90,9 @@ function formatDate(dateString) { } function renderResults(listings) { + // Only render on desktop + if (window.innerWidth < 768) return; + const resultsList = document.getElementById('resultsList'); const resultsCount = document.querySelector('.results-count'); @@ -165,4 +188,42 @@ function initPrivacyModal() { modal.classList.remove('show'); } }); +} + +// Mobile popup +function initMobilePopup() { + const closeBtn = document.getElementById('mobilePopupClose'); + const popup = document.getElementById('mobilePopup'); + + closeBtn.addEventListener('click', () => { + popup.classList.remove('show'); + }); +} + +// Format price inputs with € suffix +function initPriceInputs() { + const minPrice = document.getElementById('minPrice'); + const maxPrice = document.getElementById('maxPrice'); + + function formatPriceInput(input) { + input.addEventListener('blur', (e) => { + if (e.target.value) { + // Store the numeric value + const value = e.target.value.replace(/[^\d]/g, ''); + if (value) { + e.target.dataset.value = value; + } + } + }); + + input.addEventListener('focus', (e) => { + // Show only numeric value when focused + if (e.target.dataset.value) { + e.target.value = e.target.dataset.value; + } + }); + } + + formatPriceInput(minPrice); + formatPriceInput(maxPrice); } \ No newline at end of file