Skip to content

Instantly share code, notes, and snippets.

@thekonsti1

thekonsti1/index.html

Created December 25, 2025 19:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thekonsti1/7399de80612421f36517818900383af1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thekonsti1/7399de80612421f36517818900383af1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thekonsti1 created this gist Dec 25, 2025.
    112 changes: 112 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,112 @@
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preis-Tracker Weltweit</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style>
    body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #f0f2f5; }
    #map { height: 100vh; width: 100%; background: #aad3df; }

    #ui {
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
    z-index: 1000; width: 90%; max-width: 400px;
    background: white; padding: 15px; border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

    .search-box { display: flex; gap: 8px; }
    input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; outline: none; }
    button { padding: 10px 15px; background: #1a73e8; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }

    .price-popup { text-align: center; }
    .price-val { color: #d93025; font-size: 1.4em; font-weight: bold; display: block; }
    .product-name { font-size: 1.1em; color: #3c4043; font-weight: 500; }
    </style>
    </head>
    <body>

    <div id="ui">
    <div class="search-box">
    <input type="text" id="cityInput" placeholder="Stadt suchen (z.B. New York)...">
    <button onclick="search()">Suchen</button>
    </div>
    <div style="font-size: 0.75rem; color: #70757a; margin-top: 8px; text-align: center;">
    Tippe auf die Karte, um einen Preis zu melden.
    </div>
    </div>

    <div id="map"></div>

    <script>
    // 1. Karte begrenzen (Keine Wiederholung)
    const southWest = L.latLng(-85, -180);
    const northEast = L.latLng(85, 180);
    const bounds = L.latLngBounds(southWest, northEast);

    const map = L.map('map', {
    maxBounds: bounds, // Verhindert das Scrollen aus der Welt heraus
    maxBoundsViscosity: 1.0, // "Gummiband"-Effekt beim Rand
    minZoom: 2, // Verhindert zu weites Rauszoomen
    worldCopyJump: false // Keine Kopien der Welt
    }).setView([20, 0], 2);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    noWrap: true, // Wichtig: Verhindert die unendliche Wiederholung
    bounds: bounds
    }).addTo(map);

    // Daten-Speicher
    let sharedPrices = JSON.parse(localStorage.getItem('my_prices') || '[]');

    function displayMarkers() {
    sharedPrices.forEach(item => {
    const popupContent = `
    <div class="price-popup">
    <span class="product-name">${item.product}</span>
    <span class="price-val">${item.price} €</span>
    <small>${item.date}</small>
    </div>`;
    L.marker([item.lat, item.lng]).addTo(map).bindPopup(popupContent);
    });
    }
    displayMarkers();

    // Preis hinzufügen
    map.on('click', function(e) {
    const product = prompt("Produkt-Name (z.B. Diesel, Big Mac, Miete):");
    if (!product) return;
    const price = prompt("Preis in €:");
    if (!price) return;

    const newEntry = {
    lat: e.latlng.lat,
    lng: e.latlng.lng,
    product: product,
    price: price,
    date: new Date().toLocaleDateString()
    };

    sharedPrices.push(newEntry);
    localStorage.setItem('my_prices', JSON.stringify(sharedPrices));

    const popupContent = `<div class="price-popup"><span class="product-name">${newEntry.product}</span><span class="price-val">${newEntry.price} €</span></div>`;
    L.marker([newEntry.lat, newEntry.lng]).addTo(map).bindPopup(popupContent).openPopup();
    });

    // Suche
    async function search() {
    const query = document.getElementById('cityInput').value;
    const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`);
    const data = await response.json();
    if (data.length > 0) {
    map.setView([data[0].lat, data[0].lon], 12);
    }
    }
    </script>
    </body>
    </html>
    6 changes: 6 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    body {
    font-family: system-ui;
    background: #f06d06;
    color: white;
    text-align: center;
    }
    7 changes: 7 additions & 0 deletions untitled.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Untitled
    --------


    A [Pen](https://codepen.io/Konstantin-Konsti/pen/QwEwbKV) by [Konstantin (Konsti)](https://codepen.io/Konstantin-Konsti) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/QwEwbKV).