From a037e6b4fd771e25b870754f8d23e01b9c6160cd Mon Sep 17 00:00:00 2001
From: Felix Delattre <felix@delattre.de>
Date: Wed, 4 Mar 2026 18:50:29 +0100
Subject: [PATCH] Foo

---
 README.md                 |   4 +-
 deploy.sh                 |   3 +-
 metrics_indices.py        |  48 +++--
 metrics_stats.py          |   4 +-
 postprocessing.py         |  17 +-
 preparation.py            |  20 +++
 run.py                    |  53 +++---
 webapp/fusion.html        | 361 +++++++++++++++++++++++++++++++++++++
 webapp/index.html         |  70 ++++----
 webapp/postprocessed.html | 367 ++++++++++++++++++++++++++++++++++++++
 webapp/prepared.html      | 352 ++++++++++++++++++++++++++++++++++++
 webapp/preselection.html  |  34 ++--
 12 files changed, 1237 insertions(+), 96 deletions(-)
 create mode 100644 webapp/fusion.html
 create mode 100644 webapp/postprocessed.html
 create mode 100644 webapp/prepared.html

diff --git a/README.md b/README.md
index fede942..2ce1af7 100644
--- a/README.md
+++ b/README.md
@@ -70,14 +70,14 @@ data/
 
 ## Web Viewer
 
-Run a local HTTP server to view the web interface:
+Run a local HTTP server from the **webapp** directory:
 
 ```bash
 cd webapp
 python3 -m http.server 8000
 ```
 
-Then open `http://localhost:8000/webapp` in your browser to visualize NDVI time series and compare S2, S3, and fusion outputs.
+Then open `http://localhost:8000/` in your browser. Data is served via the `webapp/data` symlink.
 
 ## License
 
diff --git a/deploy.sh b/deploy.sh
index 7ed294c..4e5743e 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -55,8 +55,9 @@ if [ -f satellite-fusion-web.service ]; then
     systemctl daemon-reload
 fi
 
-# Create data directory
+# Create data directory and webapp/data symlink
 mkdir -p $DATA_DIR
+ln -sf ../data $APP_DIR/webapp/data
 ENDSSH
         echo "Setup complete!"
         ;;
diff --git a/metrics_indices.py b/metrics_indices.py
index d0c00b3..a83dae3 100644
--- a/metrics_indices.py
+++ b/metrics_indices.py
@@ -76,7 +76,7 @@ def _create_timeseries_for_dir(input_dir, output_dir, site_position, source_name
             continue
 
         filename = input_file.name
-        parts = filename.replace(".geotiff", "").split("_")
+        parts = filename.replace(".geotiff", "").replace(".tif", "").split("_")
         date_str = None
 
         for part in parts:
@@ -316,7 +316,7 @@ def _create_gcc_timeseries_for_dir(input_dir, output_dir, site_position, source_
             continue
 
         filename = input_file.name
-        parts = filename.replace(".geotiff", "").split("_")
+        parts = filename.replace(".geotiff", "").replace(".tif", "").split("_")
         date_str = None
 
         for part in parts:
@@ -440,12 +440,15 @@ def _get_bands_from_original(input_file, site_position):
         return None
 
 
-def _create_s2_bands_timeseries_for_dir(input_dir, output_dir, site_position):
-    print(f"[S2-BANDS] Creating timeseries.json...")
+def _create_bands_timeseries_for_dir(input_dir, output_dir, site_position, source_name, pattern="*.geotiff"):
+    print(f"[BANDS-{source_name}] Creating timeseries.json...")
     timeseries = []
-    for f in sorted(input_dir.glob("*.geotiff")):
-        date_str = f.stem.split("_")[0]
-        if len(date_str) != 8 or not date_str.isdigit():
+    for f in sorted(input_dir.glob(pattern)):
+        if "DIST_CLOUD" in f.name:
+            continue
+        parts = f.name.replace(".geotiff", "").replace(".tif", "").split("_")
+        date_str = next((p for p in parts if len(p) == 8 and p.isdigit()), None)
+        if not date_str:
             continue
         date = datetime.strptime(date_str, "%Y%m%d").isoformat()
         bands = _get_bands_from_original(f, site_position)
@@ -453,14 +456,33 @@ def _create_s2_bands_timeseries_for_dir(input_dir, output_dir, site_position):
     timeseries.sort(key=lambda x: x["date"])
     output_dir.mkdir(parents=True, exist_ok=True)
     (output_dir / "timeseries.json").write_text(json.dumps(timeseries, indent=2))
-    print(f"[S2-BANDS] Saved: {output_dir / 'timeseries.json'} ({len(timeseries)} entries)")
+    print(f"[BANDS-{source_name}] Saved: {output_dir / 'timeseries.json'} ({len(timeseries)} entries)")
 
 
-def create_s2_bands_timeseries_post_process(season, site_position, site_name):
+def create_prepared_fusion_timeseries(season, site_position, site_name):
+    """Generate NDVI, GCC, and band timeseries for prepared S2/S3 and fusion outputs."""
+    for strategy in ["aggressive", "nonaggressive"]:
+        base = Path(f"data/{site_name}/{season}/prepared_{strategy}")
+        for source in ["s2", "s3"]:
+            inp = base / source
+            if inp.exists():
+                _create_timeseries_for_dir(inp, base / "ndvi" / source, site_position, f"PREPARED-{source.upper()}-{strategy}", "*.tif")
+                _create_gcc_timeseries_for_dir(inp, base / "gcc" / source, site_position, f"PREPARED-{source.upper()}-{strategy}", "*.tif")
+                _create_bands_timeseries_for_dir(inp, base / "bands" / source, site_position, f"PREPARED-{source.upper()}-{strategy}", "*.tif")
+        for sig, fusion_sub in [(None, "fusion"), (30, "fusion_sigma30")]:
+            inp = base / fusion_sub
+            if inp.exists():
+                _create_timeseries_for_dir(inp, base / "ndvi" / fusion_sub, site_position, f"FUSION-{strategy}-σ{sig or 20}", "*.tif")
+                _create_gcc_timeseries_for_dir(inp, base / "gcc" / fusion_sub, site_position, f"FUSION-{strategy}-σ{sig or 20}", "*.tif")
+                _create_bands_timeseries_for_dir(inp, base / "bands" / fusion_sub, site_position, f"FUSION-{strategy}-σ{sig or 20}", "*.tif")
+
+
+def create_bands_timeseries_post_process(season, site_position, site_name):
     for strategy in ["aggressive", "nonaggressive"]:
         for sigma in [20, 30]:
             processed_dir = f"processed_{strategy}_sigma{sigma}"
-            input_dir = Path(f"data/{site_name}/{season}/{processed_dir}/s2/")
-            output_dir = Path(f"data/{site_name}/{season}/{processed_dir}/s2_bands/")
-            if input_dir.exists():
-                _create_s2_bands_timeseries_for_dir(input_dir, output_dir, site_position)
+            base = Path(f"data/{site_name}/{season}/{processed_dir}")
+            for source in ["s2", "s3", "fusion"]:
+                inp, out = base / source, base / "bands" / source
+                if inp.exists():
+                    _create_bands_timeseries_for_dir(inp, out, site_position, f"POST-{source.upper()}-{strategy}-σ{sigma}", "*.geotiff")
diff --git a/metrics_stats.py b/metrics_stats.py
index c770a35..fa82389 100644
--- a/metrics_stats.py
+++ b/metrics_stats.py
@@ -246,7 +246,7 @@ def calculate_scenario_metrics(season, site_name, strategy, sigma, site_position
 
     # Load timeseries
     fusion_ts_path = base / processed_dir / "gcc" / "fusion" / "timeseries.json"
-    phenocam_ts_path = base / "raw" / "phenocam" / "timeseries.json"
+    phenocam_ts_path = base / "raw" / "phenocam" / "phenocam_gcc.json"
 
     fusion_ts = load_timeseries(fusion_ts_path)
     phenocam_ts = load_timeseries(phenocam_ts_path)
@@ -270,7 +270,7 @@ def calculate_all_metrics(season, site_name, site_position):
     base = Path(f"data/{site_name}/{season}")
 
     # Load phenocam timeseries once (same for all scenarios)
-    phenocam_ts_path = base / "raw" / "phenocam" / "timeseries.json"
+    phenocam_ts_path = base / "raw" / "phenocam" / "phenocam_gcc.json"
     phenocam_ts = load_timeseries(phenocam_ts_path)
 
     if not phenocam_ts:
diff --git a/postprocessing.py b/postprocessing.py
index eed4bc0..cb07eb3 100644
--- a/postprocessing.py
+++ b/postprocessing.py
@@ -96,13 +96,20 @@ def process_cropped(season, site_position, site_name, cleaning_strategy="aggress
     print("[PROCESS] Completed")
 
 
-def process_all_scenarios(season, site_position, site_name):
-    """Process all 4 EFAST scenarios."""
+def post_process_all_scenarios(season, site_position, site_name):
+    """Crop fusion/S2/S3 to valid pixels for all 4 scenarios."""
     for strategy in ["aggressive", "nonaggressive"]:
         for sigma in [None, 30]:
             process_cropped(season, site_position, site_name, cleaning_strategy=strategy, sigma=sigma)
 
 
-# Aliases
-postprocess = process_cropped
-postprocess_all_scenarios = process_all_scenarios
+def post_process_timeseries(season, site_position, site_name):
+    """Generate NDVI, GCC, and S2 bands timeseries for all 4 scenarios."""
+    from metrics_indices import (
+        create_ndvi_timeseries_post_process,
+        create_gcc_timeseries_post_process,
+        create_bands_timeseries_post_process,
+    )
+    create_ndvi_timeseries_post_process(season, site_position, site_name)
+    create_gcc_timeseries_post_process(season, site_position, site_name)
+    create_bands_timeseries_post_process(season, site_position, site_name)
diff --git a/preparation.py b/preparation.py
index 02b2042..f4791bc 100644
--- a/preparation.py
+++ b/preparation.py
@@ -71,6 +71,25 @@ def _reproject_raster_to_target(
             rio_shutil.copy(vrt, dst_path, **profile)
 
 
+def _rescale_dist_cloud_for_small_roi(s2_output_dir):
+    """Rescale DIST_CLOUD when max distance ≤1 so EFAST fusion gets valid weights.
+
+    EFAST uses wo_i = (distance - 1) / D; values ≤1 yield zero/NaN weights. In small
+    ROIs (e.g. PhenoCam sites, 7×4 LR grid), distance_transform_edt never exceeds 1.
+    Scale non-zero values to ≥2 so fusion can produce non-NaN output.
+    """
+    for dc_path in s2_output_dir.glob("*DIST_CLOUD.tif"):
+        with rasterio.open(dc_path, "r") as src:
+            d = src.read(1)
+        d_max = float(np.nanmax(d))
+        if d_max <= 1:
+            # Map (0, 1] -> (0, 2] so (d-1)/15 gives positive weight
+            d_scaled = np.where(d > 0, 2.0, d).astype(np.float32)
+            with rasterio.open(dc_path, "r+") as dst:
+                dst.write(d_scaled, 1)
+            print(f"[S2-PREP] Rescaled DIST_CLOUD for {dc_path.name} (max was {d_max})")
+
+
 def prepare_s2(season, site_position, site_name, cleaning_strategy="aggressive", date_range=None):
     lat, lon = site_position
     s2_dir = Path(f"data/{site_name}/{season}/raw/s2/")
@@ -120,6 +139,7 @@ def prepare_s2(season, site_position, site_name, cleaning_strategy="aggressive",
     print(f"[S2-PREP] Computing distance-to-clouds...")
     distance_to_clouds = _import_distance_to_clouds()
     distance_to_clouds(s2_output_dir, ratio=RESOLUTION_RATIO)
+    _rescale_dist_cloud_for_small_roi(s2_output_dir)
     print("[S2-PREP] Completed")
 
 
diff --git a/run.py b/run.py
index 23de893..73be7b6 100644
--- a/run.py
+++ b/run.py
@@ -1,16 +1,12 @@
 from fusion import run_all_efast_scenarios
-# from postprocessing import process_all_scenarios
-# from metrics_indices import (
-#     create_ndvi_timeseries_post_process,
-#     create_gcc_timeseries_post_process,
-#     create_s2_bands_timeseries_post_process,
-# )
+from postprocessing import post_process_all_scenarios, post_process_timeseries
 from acquisition_s2 import download_s2
 from acquisition_s3 import download_s3
 from acquisition_phenocam import download_phenocam
 from preselection import create_timeseries
 from preparation import prepare_s2, prepare_s3
-# from metrics_stats import calculate_all_metrics
+from metrics_indices import create_prepared_fusion_timeseries
+from metrics_stats import calculate_all_metrics
 
 
 def run_pipeline(season, site_position, site_name):
@@ -21,27 +17,26 @@ def run_pipeline(season, site_position, site_name):
         #download_s3(season, site_position, site_name)
         #download_phenocam(season, site_position, site_name)
 
-        #print(f"Creating preselection timeseries: {site_name}, {season}")
-        #create_timeseries(season, site_position, site_name)
+        print(f"Creating preselection timeseries: {site_name}, {season}")
+        create_timeseries(season, site_position, site_name)
 
-        #print(f"Preparing S2 and S3 for fusion: {site_name}, {season}")
-        #for strategy in ["aggressive", "nonaggressive"]:
-        #    prepare_s2(season, site_position, site_name, cleaning_strategy=strategy)
-        #    prepare_s3(season, site_position, site_name, cleaning_strategy=strategy)
+        print(f"Preparing S2 and S3 for fusion: {site_name}, {season}")
+        for strategy in ["aggressive", "nonaggressive"]:
+            prepare_s2(season, site_position, site_name, cleaning_strategy=strategy)
+            prepare_s3(season, site_position, site_name, cleaning_strategy=strategy)
 
         print(f"Running EFAST fusion for all scenarios: {site_name}, {season}")
         run_all_efast_scenarios(season, site_position, site_name)
+
+        print(f"Creating prepared/fusion timeseries: {site_name}, {season}")
+        create_prepared_fusion_timeseries(season, site_position, site_name)
+
+        print(f"Post-processing: {site_name}, {season}")
+        post_process_all_scenarios(season, site_position, site_name)
+        post_process_timeseries(season, site_position, site_name)
         
-        # print(f"Post-processing data: {site_name}, {season}")
-        # process_all_scenarios(season, site_position, site_name)
-        # print(f"Generating NDVI for final outputs: {site_name}, {season}")
-        # create_ndvi_timeseries_post_process(season, site_position, site_name)
-        # print(f"Generating GCC for final outputs: {site_name}, {season}")
-        # create_gcc_timeseries_post_process(season, site_position, site_name)
-        # print(f"Generating S2 band timeseries: {site_name}, {season}")
-        # create_s2_bands_timeseries_post_process(season, site_position, site_name)
-        # print(f"Calculating metrics: {site_name}, {season}")
-        # calculate_all_metrics(season, site_name, site_position)
+        print(f"Calculating metrics: {site_name}, {season}")
+        calculate_all_metrics(season, site_name, site_position)
 
     except Exception as e:
         print(f"Error: {e}")
@@ -50,10 +45,10 @@ def run_pipeline(season, site_position, site_name):
 
 if __name__ == "__main__":
     run_pipeline(2024, (47.116171, 11.320308), "innsbruck")
-    # run_pipeline(2024, (35.3045, 25.0743), "forthgr")
-    # run_pipeline(2020, (47.116171, 11.320308), "innsbruck")
-    # run_pipeline(2024, (58.5633, 24.3688), "pitsalu")
-    # run_pipeline(2023, (64.2437, 19.7673), "vindeln2")
-    # run_pipeline(2024, (36.7455, -6.0033), "sunflowerjerez1")
-    # run_pipeline(2024, (42.6558, 26.9837), "institutekarnobat")
+    run_pipeline(2024, (35.3045, 25.0743), "forthgr")
+    run_pipeline(2020, (47.116171, 11.320308), "innsbruck")
+    run_pipeline(2024, (58.5633, 24.3688), "pitsalu")
+    run_pipeline(2023, (64.2437, 19.7673), "vindeln2")
+    run_pipeline(2024, (36.7455, -6.0033), "sunflowerjerez1")
+    run_pipeline(2024, (42.6558, 26.9837), "institutekarnobat")
     
diff --git a/webapp/fusion.html b/webapp/fusion.html
new file mode 100644
index 0000000..43b1762
--- /dev/null
+++ b/webapp/fusion.html
@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Fusion Viewer</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>
+    <script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
+    <style>
+        body { margin: 0; font-family: sans-serif; }
+        .nav { margin-bottom: 15px; font-size: 14px; }
+        .nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
+        .nav a:hover { text-decoration: underline; }
+        .nav a.active { font-weight: bold; }
+        .container { max-width: 900px; margin: 0 auto; padding: 20px; }
+        .selectors { margin-bottom: 20px; }
+        .selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
+        h1 { margin: 0 0 5px 0; font-size: 22px; }
+        .season-row { padding-bottom: 15px; }
+        h2 { margin: 0; font-size: 16px; color: #666; display: inline; }
+        #dateSlider { width: 100%; margin: 15px 0; }
+        #dateDisplay { text-align: center; font-size: 14px; color: #666; }
+        .map-label { font-size: 12px; margin-bottom: 3px; color: #666; }
+        .map-date { font-size: 11px; margin-top: 3px; color: #999; }
+        .plot-label { font-size: 12px; margin-bottom: 3px; color: #666; }
+        .plot { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 15px; }
+        #fusionMap { height: 500px; border: 1px solid #ccc; margin-top: 10px; }
+        .leaflet-image-layer { image-rendering: pixelated; }
+        .leaflet-control-attribution { display: none; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="nav">
+            <a href="index.html">Full</a>
+            <a href="preselection.html">Pre-selection</a>
+            <a href="prepared.html">Prepared</a>
+            <a href="fusion.html" class="active">Fusion</a>
+            <a href="postprocessed.html">Postprocessed</a>
+        </div>
+        <h1 id="siteName">Innsbruck</h1>
+        <div class="season-row"><h2 id="season">2024</h2></div>
+        <div class="selectors">
+            <label>Site:</label>
+            <select id="siteSelect"></select>
+            <label>Season:</label>
+            <select id="seasonSelect"></select>
+            <label>Strategy:</label>
+            <select id="strategySelect">
+                <option value="aggressive">Aggressive</option>
+                <option value="nonaggressive">Non-aggressive</option>
+            </select>
+            <label>Sigma:</label>
+            <select id="sigmaSelect">
+                <option value="20">σ=20</option>
+                <option value="30">σ=30</option>
+            </select>
+        </div>
+        <input type="range" id="dateSlider" min="0" max="365" value="0">
+        <div id="dateDisplay">2024-01-01</div>
+        <div class="map-label">Fusion RGB (closest available)</div>
+        <div id="mapDate" class="map-date"></div>
+        <div id="fusionMap"></div>
+        <div id="plots">
+            <div class="plot-label">NDVI</div><canvas id="plot_ndvi" class="plot"></canvas>
+            <div class="plot-label">GCC</div><canvas id="plot_gcc" class="plot"></canvas>
+            <div class="plot-label">B02 (Blue)</div><canvas id="plot_b02" class="plot"></canvas>
+            <div class="plot-label">B03 (Green)</div><canvas id="plot_b03" class="plot"></canvas>
+            <div class="plot-label">B04 (Red)</div><canvas id="plot_b04" class="plot"></canvas>
+            <div class="plot-label">B8A (NIR)</div><canvas id="plot_b8a" class="plot"></canvas>
+        </div>
+    </div>
+    <script>
+        proj4.defs("EPSG:32632", "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
+        proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
+
+        let siteName = "innsbruck", season = "2024";
+        let strategy = "aggressive", sigma = "20";
+        let sitePosition = [47.116171, 11.320308];
+        let start = new Date(2024, 0, 1);
+        let availableSiteSeasons = {};
+        let fusionMap = null, overlay = null, marker = null;
+        let ndviTs = [], gccTs = [], bandsTs = [];
+        const BANDS = [{key:"b02",color:"#0066ff"},{key:"b03",color:"#00aa00"},{key:"b04",color:"#cc0000"},{key:"b8a",color:"#9900cc"}];
+        const urlParams = new URLSearchParams(location.search);
+        const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+
+        const fmtDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+        const dateFromDays = (days) => fmtDate(new Date(start.getTime() + days * 86400000));
+        const daysFromDate = (dateStr) => {
+            const [y, m, d] = dateStr.split("-").map(Number);
+            return Math.floor((new Date(y, m - 1, d) - start) / 86400000);
+        };
+
+        function getFusionDir() {
+            return sigma === "30"
+                ? `data/${siteName}/${season}/prepared_${strategy}/fusion_sigma30`
+                : `data/${siteName}/${season}/prepared_${strategy}/fusion`;
+        }
+
+        function getFusionTimeseriesDir() {
+            return sigma === "30" ? "fusion_sigma30" : "fusion";
+        }
+
+        async function loadTimeseries() {
+            const sub = getFusionTimeseriesDir();
+            try {
+                const base = `data/${siteName}/${season}/prepared_${strategy}`;
+                const [n, g, b] = await Promise.all([
+                    fetch(`${base}/ndvi/${sub}/timeseries.json`).then(r => r.ok ? r.json() : []),
+                    fetch(`${base}/gcc/${sub}/timeseries.json`).then(r => r.ok ? r.json() : []),
+                    fetch(`${base}/bands/${sub}/timeseries.json`).then(r => r.ok ? r.json() : [])
+                ]);
+                ndviTs = n; gccTs = g; bandsTs = b;
+            } catch { ndviTs = []; gccTs = []; bandsTs = []; }
+            drawPlots();
+        }
+
+        function drawPlot(canvasId, data, key, color) {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+            const ctx = canvas.getContext("2d");
+            canvas.width = canvas.offsetWidth;
+            canvas.height = 100;
+            const w = canvas.width, h = canvas.height, pad = 30;
+            const plotW = w - pad * 2, plotH = h - pad * 2;
+            const pts = data.filter(t => t[key] != null);
+            if (!pts.length) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#999"; ctx.font = "12px sans-serif"; ctx.fillText("No data", pad, pad + plotH / 2); return; }
+            const dates = pts.map(t => new Date(t.date));
+            const vals = pts.map(t => t[key]);
+            const minD = new Date(Math.min(...dates)), maxD = new Date(Math.max(...dates));
+            const minV = Math.min(...vals), maxV = Math.max(...vals);
+            const dRange = maxD - minD || 1, vRange = maxV - minV || 1;
+            const x = d => pad + ((new Date(d) - minD) / dRange) * plotW;
+            const y = v => pad + plotH - ((v - minV) / vRange) * plotH;
+            ctx.clearRect(0, 0, w, h);
+            ctx.strokeStyle = "#ccc";
+            ctx.beginPath(); ctx.moveTo(pad, pad); ctx.lineTo(pad, pad + plotH); ctx.lineTo(pad + plotW, pad + plotH); ctx.stroke();
+            ctx.fillStyle = "#000";
+            ctx.font = "9px sans-serif";
+            ctx.fillText(minV.toFixed(3), 2, pad + plotH + 10);
+            ctx.fillText(maxV.toFixed(3), 2, pad + 3);
+            ctx.strokeStyle = color;
+            ctx.beginPath();
+            pts.forEach((t, i) => { const px = x(t.date), py = y(t[key]); i ? ctx.lineTo(px, py) : ctx.moveTo(px, py); });
+            ctx.stroke();
+            const curDate = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            const xPos = x(curDate);
+            ctx.strokeStyle = "#f00";
+            ctx.lineWidth = 2;
+            ctx.beginPath(); ctx.moveTo(xPos, pad); ctx.lineTo(xPos, pad + plotH); ctx.stroke();
+            const closest = pts.reduce((c, t) => Math.abs(new Date(t.date) - new Date(curDate)) < Math.abs(new Date(c.date) - new Date(curDate)) ? t : c);
+            if (closest) { ctx.fillStyle = "#f00"; ctx.font = "bold 10px sans-serif"; ctx.fillText(closest[key].toFixed(3), xPos + 5, y(closest[key]) - 5); }
+        }
+
+        function drawPlots() {
+            drawPlot("plot_ndvi", ndviTs, "ndvi", "#2d7a3e");
+            drawPlot("plot_gcc", gccTs, "greenness_index", "#00aa00");
+            BANDS.forEach(b => drawPlot(`plot_${b.key}`, bandsTs, b.key, b.color));
+        }
+
+        async function findFusionFile(dateStr) {
+            const target = new Date(dateStr);
+            const yearEnd = new Date(parseInt(season), 11, 31);
+            const seasonStart = start.getTime();
+            const seasonEnd = yearEnd.getTime();
+            for (let offset = 0; offset <= 365; offset++) {
+                for (const dir of offset === 0 ? [0] : [-1, 1]) {
+                    const d = new Date(target.getTime() + dir * offset * 86400000);
+                    if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
+                    const ds = d.toISOString().split("T")[0].replace(/-/g, "");
+                    const filename = `REFL_${ds}.tif`;
+                    try {
+                        const res = await fetch(`${getFusionDir()}/${filename}`, { method: "HEAD" });
+                        if (res.ok) return filename;
+                    } catch {}
+                }
+            }
+            return null;
+        }
+
+        function transformBounds(bbox, fromCRS) {
+            const sw = proj4(fromCRS, "EPSG:4326", [bbox[0], bbox[1]]);
+            const ne = proj4(fromCRS, "EPSG:4326", [bbox[2], bbox[3]]);
+            return [[sw[1], sw[0]], [ne[1], ne[0]]];
+        }
+
+        async function loadGeotiff(filename) {
+            const path = `${getFusionDir()}/${filename}`;
+            const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
+            const image = await tiff.getImage();
+            const rasters = await image.readRasters();
+            const width = image.getWidth(), height = image.getHeight();
+            const bbox = image.getBoundingBox();
+            const geoKeys = image.getGeoKeys();
+            const crsCode = geoKeys.ProjectedCSTypeGeoKey ? `EPSG:${geoKeys.ProjectedCSTypeGeoKey}` :
+                (geoKeys.GeographicTypeGeoKey !== 4326 ? `EPSG:${geoKeys.GeographicTypeGeoKey}` : "EPSG:4326");
+            const [blue, green, red] = [0, 1, 2].map(i => Array.from(rasters[i]));
+            const normalize = (arr) => {
+                let min = Infinity, max = -Infinity;
+                for (const v of arr) if (!isNaN(v) && v > 0) { min = Math.min(min, v); max = Math.max(max, v); }
+                return arr.map(v => Math.max(0, Math.min(255, ((v - min) / (max - min || 1)) * 255)));
+            };
+            const [rN, gN, bN] = [red, green, blue].map(normalize);
+            const canvas = Object.assign(document.createElement("canvas"), { width, height });
+            const ctx = canvas.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+            const imgData = ctx.createImageData(width, height);
+            for (let i = 0; i < rN.length; i++) {
+                const idx = i * 4;
+                if (rN[i] === 0 && gN[i] === 0 && bN[i] === 0) imgData.data[idx + 3] = 0;
+                else { imgData.data[idx] = rN[i]; imgData.data[idx + 1] = gN[i]; imgData.data[idx + 2] = bN[i]; imgData.data[idx + 3] = 255; }
+            }
+            ctx.putImageData(imgData, 0, 0);
+            const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode);
+            const dateStr = filename.replace("REFL_", "").replace(".tif", "");
+            return { dataUrl: canvas.toDataURL(), bounds, dateStr };
+        }
+
+        async function updateMap() {
+            const dateStr = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            const filename = await findFusionFile(dateStr);
+            if (!filename || !fusionMap) {
+                if (overlay) { fusionMap.removeLayer(overlay); overlay = null; }
+                document.getElementById("mapDate").textContent = "";
+                return;
+            }
+            try {
+                const { dataUrl, bounds, dateStr: ds } = await loadGeotiff(filename);
+                if (overlay) fusionMap.removeLayer(overlay);
+                overlay = L.imageOverlay(dataUrl, bounds, { opacity: 0.95 }).addTo(fusionMap);
+                fusionMap.fitBounds(bounds);
+                document.getElementById("mapDate").textContent = `${ds.slice(0,4)}-${ds.slice(4,6)}-${ds.slice(6,8)}`;
+            } catch (e) {
+                if (overlay) { fusionMap.removeLayer(overlay); overlay = null; }
+                document.getElementById("mapDate").textContent = "";
+            }
+        }
+
+        async function probeDataExists(sitename, s) {
+            try {
+                const res = await fetch(`data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
+                return res.ok;
+            } catch { return false; }
+        }
+
+        function getSiteBySitename(sn) {
+            return window.sitesData?.features?.find(f => f.properties?.sitename === sn);
+        }
+
+        async function setSiteSeason(newSite, newSeason) {
+            siteName = newSite;
+            season = newSeason;
+            start = new Date(parseInt(season), 0, 1);
+            const site = getSiteBySitename(newSite);
+            if (site?.geometry?.coordinates) {
+                const [lon, lat] = site.geometry.coordinates;
+                sitePosition = [lat, lon];
+            }
+            if (fusionMap) { fusionMap.setView(sitePosition, 12); if (marker) marker.setLatLng(sitePosition); }
+            document.getElementById("siteName").textContent = (site?.properties?.description || newSite);
+            document.getElementById("season").textContent = season;
+            const yearEnd = new Date(parseInt(season), 11, 31);
+            document.getElementById("dateSlider").max = Math.ceil((yearEnd - start) / 86400000);
+            const params = new URLSearchParams(location.search);
+            params.set("site", siteName);
+            params.set("season", season);
+            history.replaceState({}, "", `?${params}`);
+            const urlDate = params.get("date");
+            if (urlDate) document.getElementById("dateSlider").value = daysFromDate(urlDate);
+            document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            await loadTimeseries();
+            await updateMap();
+        }
+
+        async function init() {
+            try {
+                const res = await fetch("data/sites.geojson");
+                window.sitesData = res.ok ? await res.json() : { features: [] };
+            } catch { window.sitesData = { features: [] }; }
+            const features = window.sitesData.features || [];
+            for (const f of features) {
+                const sn = f.properties?.sitename;
+                if (!sn) continue;
+                const seasonsFromGeo = f.properties?.seasons ? Object.keys(f.properties.seasons).sort() : [];
+                const withData = [];
+                for (const s of seasonsFromGeo) {
+                    if (await probeDataExists(sn, s)) withData.push(s);
+                }
+                if (withData.length) availableSiteSeasons[sn] = withData;
+            }
+            const availableSites = Object.keys(availableSiteSeasons);
+            const siteSelect = document.getElementById("siteSelect");
+            siteSelect.innerHTML = "";
+            (availableSites.length ? availableSites.sort() : ["innsbruck"]).forEach(sn => {
+                const opt = document.createElement("option");
+                opt.value = sn;
+                opt.textContent = sn;
+                siteSelect.appendChild(opt);
+                if (!availableSiteSeasons[sn]) availableSiteSeasons[sn] = ["2024"];
+            });
+
+            const urlSite = urlParams.get("site");
+            const urlSeason = urlParams.get("season");
+            const initialSite = (urlSite && availableSiteSeasons[urlSite]) ? urlSite : (availableSites[0] || "innsbruck");
+            const initialSeason = (urlSeason && (availableSiteSeasons[initialSite] || []).includes(urlSeason)) ? urlSeason : ((availableSiteSeasons[initialSite] || [])[0] || "2024");
+
+            siteSelect.value = initialSite;
+            document.getElementById("seasonSelect").innerHTML = (availableSiteSeasons[initialSite] || []).map(s =>
+                `<option value="${s}">${s}</option>`
+            ).join("");
+            document.getElementById("seasonSelect").value = initialSeason;
+            strategy = urlParams.get("strategy") || "aggressive";
+            sigma = urlParams.get("sigma") || "20";
+            document.getElementById("strategySelect").value = strategy;
+            document.getElementById("sigmaSelect").value = sigma;
+
+            const initSite = getSiteBySitename(initialSite);
+            if (initSite?.geometry?.coordinates) {
+                const [lon, lat] = initSite.geometry.coordinates;
+                sitePosition = [lat, lon];
+            }
+            fusionMap = L.map("fusionMap", { zoomControl: false }).setView(sitePosition, 12)
+                .addLayer(L.tileLayer(osmUrl, { attribution: "OpenStreetMap", opacity: 0.4 }));
+            marker = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:8px;height:8px;background:red;border:2px solid white;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,0.5);'></div>", iconSize: [8, 8] }) }).addTo(fusionMap);
+
+            siteSelect.addEventListener("change", function() {
+                const sn = this.value;
+                const seas = availableSiteSeasons[sn] || [];
+                document.getElementById("seasonSelect").innerHTML = seas.map(s => `<option value="${s}">${s}</option>`).join("");
+                document.getElementById("seasonSelect").value = seas[0] || "2024";
+                setSiteSeason(sn, document.getElementById("seasonSelect").value);
+            });
+            document.getElementById("seasonSelect").addEventListener("change", function() {
+                setSiteSeason(siteSelect.value, this.value);
+            });
+            document.getElementById("strategySelect").addEventListener("change", function() {
+                strategy = this.value;
+                urlParams.set("strategy", strategy);
+                history.replaceState({}, "", `?${urlParams}`);
+                loadTimeseries(); updateMap();
+            });
+            document.getElementById("sigmaSelect").addEventListener("change", function() {
+                sigma = this.value;
+                urlParams.set("sigma", sigma);
+                history.replaceState({}, "", `?${urlParams}`);
+                loadTimeseries(); updateMap();
+            });
+
+            await setSiteSeason(initialSite, initialSeason);
+        }
+
+        document.getElementById("dateSlider").addEventListener("input", function() {
+            document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(this.value));
+            drawPlots(); updateMap();
+        });
+
+        init();
+    </script>
+</body>
+</html>
diff --git a/webapp/index.html b/webapp/index.html
index 3e40604..0891505 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>NDVI Viewer</title>
+    <title>Full</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>
     <script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
     <style>
         body { margin: 0; font-family: sans-serif; }
+        .nav { margin-bottom: 10px; font-size: 14px; }
+        .nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
+        .nav a:hover { text-decoration: underline; }
+        .nav a.active { font-weight: bold; }
         .slider-container { position: sticky; top: 0; background: white; padding: 20px; z-index: 1000; border-bottom: 1px solid #ccc; }
         .scenario-selector { margin-bottom: 10px; }
         .scenario-selector select { padding: 5px 10px; font-size: 14px; }
@@ -43,6 +47,13 @@
 </head>
 <body>
     <div class="container">
+        <div class="nav">
+            <a href="index.html" class="active">Full</a>
+            <a href="preselection.html">Pre-selection</a>
+            <a href="prepared.html">Prepared</a>
+            <a href="fusion.html">Fusion</a>
+            <a href="postprocessed.html">Postprocessed</a>
+        </div>
         <div class="slider-container">
             <input type="range" id="dateSlider" min="0" max="365" value="0">
             <div id="dateDisplay">2024-01-01</div>
@@ -186,13 +197,13 @@
             metricsData = null;
             const fusionPath = getFusionPath();
             const [s2, fusion, s3, s2gcc, fusiongcc, s3gcc, phenocam] = await Promise.all([
-                fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s2/timeseries.json`).then(r => r.json()).catch(() => []),
-                fetch(`../data/${siteName}/${season}/${fusionPath}/ndvi/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
-                fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s3/timeseries.json`).then(r => r.json()).catch(() => []),
-                fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s2/timeseries.json`).then(r => r.json()).catch(() => []),
-                fetch(`../data/${siteName}/${season}/${fusionPath}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
-                fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s3/timeseries.json`).then(r => r.json()).catch(() => []),
-                fetch(`../data/${siteName}/${season}/raw/phenocam/timeseries.json`).then(r => r.json()).catch(() => [])
+                fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s2/timeseries.json`).then(r => r.json()).catch(() => []),
+                fetch(`data/${siteName}/${season}/${fusionPath}/ndvi/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
+                fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s3/timeseries.json`).then(r => r.json()).catch(() => []),
+                fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s2/timeseries.json`).then(r => r.json()).catch(() => []),
+                fetch(`data/${siteName}/${season}/${fusionPath}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
+                fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s3/timeseries.json`).then(r => r.json()).catch(() => []),
+                fetch(`data/${siteName}/${season}/raw/phenocam/phenocam_gcc.json`).then(r => r.json()).catch(() => [])
             ]);
             timeseries = { s2, fusion, s3 };
             greennessTimeseries = { s2: s2gcc, fusion: fusiongcc, s3: s3gcc };
@@ -206,14 +217,14 @@
                 { name: "Non-aggressive σ30", path: "processed_nonaggressive_sigma30" }
             ];
             const scenarioPromises = scenarios.map(s => 
-                fetch(`../data/${siteName}/${season}/${s.path}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => [])
+                fetch(`data/${siteName}/${season}/${s.path}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => [])
             );
             const scenarioData = await Promise.all(scenarioPromises);
             scenarios.forEach((s, i) => { allScenariosGCC[s.name] = scenarioData[i]; });
             
             // Load metrics
             try {
-                const metricsRes = await fetch(`../data/${siteName}/${season}/metrics.json`);
+                const metricsRes = await fetch(`data/${siteName}/${season}/metrics.json`);
                 if (metricsRes.ok) metricsData = await metricsRes.json();
             } catch {}
             
@@ -685,30 +696,21 @@
         async function findFile(dateStr, source) {
             const target = new Date(dateStr);
             const basePath = source === "fusion" ? getFusionPath() : `processed_${strategy}_sigma${sigma}`;
-            // Search outward from target date (0, ±1, ±2, ±3, ...) until we find the closest file
-            // Check dates in order: exact, then -1, +1, then -2, +2, etc.
-            // Limit to ±365 days to avoid infinite search
+            const yearEnd = new Date(parseInt(season), 11, 31);
+            const seasonStart = start.getTime();
+            const seasonEnd = yearEnd.getTime();
             for (let offset = 0; offset <= 365; offset++) {
-                // Check exact date first (offset=0)
-                if (offset === 0) {
-                    const date = target.toISOString().split("T")[0].replace(/-/g, "");
+                const datesToTry = offset === 0
+                    ? [target]
+                    : [new Date(target.getTime() - offset * 86400000), new Date(target.getTime() + offset * 86400000)];
+                for (const d of datesToTry) {
+                    if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
+                    const date = d.toISOString().split("T")[0].replace(/-/g, "");
                     const filename = `${date}_0.geotiff`;
                     try {
-                        const res = await fetch(`../data/${siteName}/${season}/${basePath}/${source}/${filename}`, { method: 'HEAD' });
+                        const res = await fetch(`data/${siteName}/${season}/${basePath}/${source}/${filename}`, { method: 'HEAD' });
                         if (res.ok) return filename;
                     } catch {}
-                } else {
-                    // Check -offset and +offset days
-                    for (const dir of [-1, 1]) {
-                        const d = new Date(target);
-                        d.setDate(d.getDate() + offset * dir);
-                        const date = d.toISOString().split("T")[0].replace(/-/g, "");
-                        const filename = `${date}_0.geotiff`;
-                        try {
-                            const res = await fetch(`../data/${siteName}/${season}/${basePath}/${source}/${filename}`, { method: 'HEAD' });
-                            if (res.ok) return filename;
-                        } catch {}
-                    }
                 }
             }
             return null;
@@ -721,7 +723,7 @@
         
         async function loadGeotiff(source, filename) {
             const basePath = source === "fusion" ? getFusionPath() : `processed_${strategy}_sigma${sigma}`;
-            const path = `../data/${siteName}/${season}/${basePath}/${source}/${filename}`;
+            const path = `data/${siteName}/${season}/${basePath}/${source}/${filename}`;
             const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
             const image = await tiff.getImage();
             const rasters = await image.readRasters();
@@ -786,7 +788,7 @@
                     const d = new Date(target);
                     d.setDate(d.getDate() + offset * dir);
                     const date = d.toISOString().split("T")[0].replace(/-/g, "");
-                    const url = `../data/${siteName}/${season}/raw/phenocam/${date}.jpg`;
+                    const url = `data/${siteName}/${season}/raw/phenocam/${date}.jpg`;
                     try {
                         const res = await fetch(url, { method: 'HEAD' });
                         if (res.ok) {
@@ -862,7 +864,7 @@
 
         async function probeDataExists(sitename, season) {
             try {
-                const res = await fetch(`../data/${sitename}/${season}/metrics.json`, { method: "HEAD" });
+                const res = await fetch(`data/${sitename}/${season}/metrics.json`, { method: "HEAD" });
                 return res.ok;
             } catch { return false; }
         }
@@ -905,7 +907,7 @@
         
         async function init() {
             try {
-                const res = await fetch("../data/sites.geojson");
+                const res = await fetch("data/sites.geojson");
                 if (!res.ok) throw new Error("Could not load sites");
                 sitesData = await res.json();
             } catch (e) {
@@ -922,7 +924,7 @@
                 for (const s of seasonsFromGeo) {
                     if (await probeDataExists(sn, s)) withData.push(s);
                 }
-                if (withData.length) availableSiteSeasons[sn] = withData;
+                availableSiteSeasons[sn] = withData.length ? withData : seasonsFromGeo;
             }
             const availableSites = Object.keys(availableSiteSeasons);
             siteSelect.innerHTML = "";
diff --git a/webapp/postprocessed.html b/webapp/postprocessed.html
new file mode 100644
index 0000000..fe511ed
--- /dev/null
+++ b/webapp/postprocessed.html
@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Postprocessed Viewer</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>
+    <script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
+    <style>
+        body { margin: 0; font-family: sans-serif; }
+        .nav { margin-bottom: 15px; font-size: 14px; }
+        .nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
+        .nav a:hover { text-decoration: underline; }
+        .nav a.active { font-weight: bold; }
+        .container { max-width: 900px; margin: 0 auto; padding: 20px; }
+        .selectors { margin-bottom: 20px; }
+        .selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
+        h1 { margin: 0 0 5px 0; font-size: 22px; }
+        .season-row { padding-bottom: 15px; }
+        h2 { margin: 0; font-size: 16px; color: #666; display: inline; }
+        #dateSlider { width: 100%; margin: 15px 0; }
+        #dateDisplay { text-align: center; font-size: 14px; color: #666; }
+        .map-label { font-size: 12px; margin-bottom: 3px; color: #666; }
+        .map-date { font-size: 11px; margin-top: 3px; color: #999; }
+        .plot-label { font-size: 12px; margin-bottom: 3px; color: #666; }
+        .plot { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 15px; }
+        #postprocessedMap { height: 500px; border: 1px solid #ccc; margin-top: 10px; }
+        .leaflet-image-layer { image-rendering: pixelated; }
+        .leaflet-control-attribution { display: none; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="nav">
+            <a href="index.html">Full</a>
+            <a href="preselection.html">Pre-selection</a>
+            <a href="prepared.html">Prepared</a>
+            <a href="fusion.html">Fusion</a>
+            <a href="postprocessed.html" class="active">Postprocessed</a>
+        </div>
+        <h1 id="siteName">Innsbruck</h1>
+        <div class="season-row"><h2 id="season">2024</h2></div>
+        <div class="selectors">
+            <label>Site:</label>
+            <select id="siteSelect"></select>
+            <label>Season:</label>
+            <select id="seasonSelect"></select>
+            <label>Strategy:</label>
+            <select id="strategySelect">
+                <option value="aggressive">Aggressive</option>
+                <option value="nonaggressive">Non-aggressive</option>
+            </select>
+            <label>Sigma:</label>
+            <select id="sigmaSelect">
+                <option value="20">σ=20</option>
+                <option value="30">σ=30</option>
+            </select>
+            <label>Source:</label>
+            <select id="sourceSelect">
+                <option value="s2">S2</option>
+                <option value="fusion">Fusion</option>
+                <option value="s3">S3</option>
+            </select>
+        </div>
+        <input type="range" id="dateSlider" min="0" max="365" value="0">
+        <div id="dateDisplay">2024-01-01</div>
+        <div class="map-label">Postprocessed RGB (closest available)</div>
+        <div id="mapDate" class="map-date"></div>
+        <div id="postprocessedMap"></div>
+        <div id="plots">
+            <div class="plot-label">NDVI</div><canvas id="plot_ndvi" class="plot"></canvas>
+            <div class="plot-label">GCC</div><canvas id="plot_gcc" class="plot"></canvas>
+            <div class="plot-label">B02 (Blue)</div><canvas id="plot_b02" class="plot"></canvas>
+            <div class="plot-label">B03 (Green)</div><canvas id="plot_b03" class="plot"></canvas>
+            <div class="plot-label">B04 (Red)</div><canvas id="plot_b04" class="plot"></canvas>
+            <div class="plot-label">B8A (NIR)</div><canvas id="plot_b8a" class="plot"></canvas>
+        </div>
+    </div>
+    <script>
+        proj4.defs("EPSG:32632", "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
+        proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
+
+        let siteName = "innsbruck", season = "2024";
+        let strategy = "aggressive", sigma = "20", source = "s2";
+        let sitePosition = [47.116171, 11.320308];
+        let start = new Date(2024, 0, 1);
+        let availableSiteSeasons = {};
+        let postprocessedMap = null, overlay = null, marker = null;
+        let ndviTs = [], gccTs = [], bandsTs = [];
+        const BANDS = [{key:"b02",color:"#0066ff"},{key:"b03",color:"#00aa00"},{key:"b04",color:"#cc0000"},{key:"b8a",color:"#9900cc"}];
+        const urlParams = new URLSearchParams(location.search);
+        const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+
+        const fmtDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+        const dateFromDays = (days) => fmtDate(new Date(start.getTime() + days * 86400000));
+        const daysFromDate = (dateStr) => {
+            const [y, m, d] = dateStr.split("-").map(Number);
+            return Math.floor((new Date(y, m - 1, d) - start) / 86400000);
+        };
+
+        function getProcessedPath() {
+            return `data/${siteName}/${season}/processed_${strategy}_sigma${sigma}`;
+        }
+
+        async function loadTimeseries() {
+            try {
+                const [n, g, b] = await Promise.all([
+                    fetch(`${getProcessedPath()}/ndvi/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
+                    fetch(`${getProcessedPath()}/gcc/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
+                    fetch(`${getProcessedPath()}/bands/${source}/timeseries.json`).then(r => r.ok ? r.json() : [])
+                ]);
+                ndviTs = n; gccTs = g; bandsTs = b;
+            } catch { ndviTs = []; gccTs = []; bandsTs = []; }
+            drawPlots();
+        }
+
+        function drawPlot(canvasId, data, key, color) {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+            const ctx = canvas.getContext("2d");
+            canvas.width = canvas.offsetWidth;
+            canvas.height = 100;
+            const w = canvas.width, h = canvas.height, pad = 30;
+            const plotW = w - pad * 2, plotH = h - pad * 2;
+            const pts = data.filter(t => t[key] != null);
+            if (!pts.length) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#999"; ctx.font = "12px sans-serif"; ctx.fillText("No data", pad, pad + plotH / 2); return; }
+            const dates = pts.map(t => new Date(t.date));
+            const vals = pts.map(t => t[key]);
+            const minD = new Date(Math.min(...dates)), maxD = new Date(Math.max(...dates));
+            const minV = Math.min(...vals), maxV = Math.max(...vals);
+            const dRange = maxD - minD || 1, vRange = maxV - minV || 1;
+            const x = d => pad + ((new Date(d) - minD) / dRange) * plotW;
+            const y = v => pad + plotH - ((v - minV) / vRange) * plotH;
+            ctx.clearRect(0, 0, w, h);
+            ctx.strokeStyle = "#ccc";
+            ctx.beginPath(); ctx.moveTo(pad, pad); ctx.lineTo(pad, pad + plotH); ctx.lineTo(pad + plotW, pad + plotH); ctx.stroke();
+            ctx.fillStyle = "#000";
+            ctx.font = "9px sans-serif";
+            ctx.fillText(minV.toFixed(3), 2, pad + plotH + 10);
+            ctx.fillText(maxV.toFixed(3), 2, pad + 3);
+            ctx.strokeStyle = color;
+            ctx.beginPath();
+            pts.forEach((t, i) => { const px = x(t.date), py = y(t[key]); i ? ctx.lineTo(px, py) : ctx.moveTo(px, py); });
+            ctx.stroke();
+            const curDate = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            const xPos = x(curDate);
+            ctx.strokeStyle = "#f00";
+            ctx.lineWidth = 2;
+            ctx.beginPath(); ctx.moveTo(xPos, pad); ctx.lineTo(xPos, pad + plotH); ctx.stroke();
+            const closest = pts.reduce((c, t) => Math.abs(new Date(t.date) - new Date(curDate)) < Math.abs(new Date(c.date) - new Date(curDate)) ? t : c);
+            if (closest) { ctx.fillStyle = "#f00"; ctx.font = "bold 10px sans-serif"; ctx.fillText(closest[key].toFixed(3), xPos + 5, y(closest[key]) - 5); }
+        }
+
+        function drawPlots() {
+            drawPlot("plot_ndvi", ndviTs, "ndvi", "#2d7a3e");
+            drawPlot("plot_gcc", gccTs, "greenness_index", "#00aa00");
+            BANDS.forEach(b => drawPlot(`plot_${b.key}`, bandsTs, b.key, b.color));
+        }
+
+        async function findProcessedFile(dateStr) {
+            const target = new Date(dateStr);
+            const yearEnd = new Date(parseInt(season), 11, 31);
+            const seasonStart = start.getTime();
+            const seasonEnd = yearEnd.getTime();
+            for (let offset = 0; offset <= 365; offset++) {
+                for (const dir of offset === 0 ? [0] : [-1, 1]) {
+                    const d = new Date(target.getTime() + dir * offset * 86400000);
+                    if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
+                    const ds = d.toISOString().split("T")[0].replace(/-/g, "");
+                    const filename = `${ds}_0.geotiff`;
+                    try {
+                        const res = await fetch(`${getProcessedPath()}/${source}/${filename}`, { method: "HEAD" });
+                        if (res.ok) return filename;
+                    } catch {}
+                }
+            }
+            return null;
+        }
+
+        function transformBounds(bbox, fromCRS) {
+            const sw = proj4(fromCRS, "EPSG:4326", [bbox[0], bbox[1]]);
+            const ne = proj4(fromCRS, "EPSG:4326", [bbox[2], bbox[3]]);
+            return [[sw[1], sw[0]], [ne[1], ne[0]]];
+        }
+
+        async function loadGeotiff(filename) {
+            const path = `${getProcessedPath()}/${source}/${filename}`;
+            const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
+            const image = await tiff.getImage();
+            const rasters = await image.readRasters();
+            const width = image.getWidth(), height = image.getHeight();
+            const bbox = image.getBoundingBox();
+            const geoKeys = image.getGeoKeys();
+            const crsCode = geoKeys.ProjectedCSTypeGeoKey ? `EPSG:${geoKeys.ProjectedCSTypeGeoKey}` :
+                (geoKeys.GeographicTypeGeoKey !== 4326 ? `EPSG:${geoKeys.GeographicTypeGeoKey}` : "EPSG:4326");
+            const [blue, green, red] = [0, 1, 2].map(i => Array.from(rasters[i]));
+            const normalize = (arr) => {
+                let min = Infinity, max = -Infinity;
+                for (const v of arr) if (!isNaN(v) && v > 0) { min = Math.min(min, v); max = Math.max(max, v); }
+                return arr.map(v => Math.max(0, Math.min(255, ((v - min) / (max - min || 1)) * 255)));
+            };
+            const [rN, gN, bN] = [red, green, blue].map(normalize);
+            const canvas = Object.assign(document.createElement("canvas"), { width, height });
+            const ctx = canvas.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+            const imgData = ctx.createImageData(width, height);
+            for (let i = 0; i < rN.length; i++) {
+                const idx = i * 4;
+                if (rN[i] === 0 && gN[i] === 0 && bN[i] === 0) imgData.data[idx + 3] = 0;
+                else { imgData.data[idx] = rN[i]; imgData.data[idx + 1] = gN[i]; imgData.data[idx + 2] = bN[i]; imgData.data[idx + 3] = 255; }
+            }
+            ctx.putImageData(imgData, 0, 0);
+            const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode);
+            const dateStr = filename.replace("_0.geotiff", "");
+            return { dataUrl: canvas.toDataURL(), bounds, dateStr };
+        }
+
+        async function updateMap() {
+            const dateStr = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            const filename = await findProcessedFile(dateStr);
+            if (!filename || !postprocessedMap) {
+                if (overlay) { postprocessedMap.removeLayer(overlay); overlay = null; }
+                document.getElementById("mapDate").textContent = "";
+                return;
+            }
+            try {
+                const { dataUrl, bounds, dateStr: ds } = await loadGeotiff(filename);
+                if (overlay) postprocessedMap.removeLayer(overlay);
+                overlay = L.imageOverlay(dataUrl, bounds, { opacity: 0.95 }).addTo(postprocessedMap);
+                postprocessedMap.fitBounds(bounds);
+                document.getElementById("mapDate").textContent = `${ds.slice(0,4)}-${ds.slice(4,6)}-${ds.slice(6,8)}`;
+            } catch (e) {
+                if (overlay) { postprocessedMap.removeLayer(overlay); overlay = null; }
+                document.getElementById("mapDate").textContent = "";
+            }
+        }
+
+        async function probeDataExists(sitename, s) {
+            try {
+                const res = await fetch(`data/${sitename}/${s}/metrics.json`, { method: "HEAD" });
+                return res.ok;
+            } catch { return false; }
+        }
+
+        function getSiteBySitename(sn) {
+            return window.sitesData?.features?.find(f => f.properties?.sitename === sn);
+        }
+
+        async function setSiteSeason(newSite, newSeason) {
+            siteName = newSite;
+            season = newSeason;
+            start = new Date(parseInt(season), 0, 1);
+            const site = getSiteBySitename(newSite);
+            if (site?.geometry?.coordinates) {
+                const [lon, lat] = site.geometry.coordinates;
+                sitePosition = [lat, lon];
+            }
+            if (postprocessedMap) { postprocessedMap.setView(sitePosition, 12); if (marker) marker.setLatLng(sitePosition); }
+            document.getElementById("siteName").textContent = (site?.properties?.description || newSite);
+            document.getElementById("season").textContent = season;
+            const yearEnd = new Date(parseInt(season), 11, 31);
+            document.getElementById("dateSlider").max = Math.ceil((yearEnd - start) / 86400000);
+            const params = new URLSearchParams(location.search);
+            params.set("site", siteName);
+            params.set("season", season);
+            history.replaceState({}, "", `?${params}`);
+            const urlDate = params.get("date");
+            if (urlDate) document.getElementById("dateSlider").value = daysFromDate(urlDate);
+            document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            await loadTimeseries();
+            await updateMap();
+        }
+
+        async function init() {
+            try {
+                const res = await fetch("data/sites.geojson");
+                window.sitesData = res.ok ? await res.json() : { features: [] };
+            } catch { window.sitesData = { features: [] }; }
+            const features = window.sitesData.features || [];
+            for (const f of features) {
+                const sn = f.properties?.sitename;
+                if (!sn) continue;
+                const seasonsFromGeo = f.properties?.seasons ? Object.keys(f.properties.seasons).sort() : [];
+                const withData = [];
+                for (const s of seasonsFromGeo) {
+                    if (await probeDataExists(sn, s)) withData.push(s);
+                }
+                if (withData.length) availableSiteSeasons[sn] = withData;
+            }
+            const availableSites = Object.keys(availableSiteSeasons);
+            const siteSelect = document.getElementById("siteSelect");
+            siteSelect.innerHTML = "";
+            (availableSites.length ? availableSites.sort() : ["innsbruck"]).forEach(sn => {
+                const opt = document.createElement("option");
+                opt.value = sn;
+                opt.textContent = sn;
+                siteSelect.appendChild(opt);
+                if (!availableSiteSeasons[sn]) availableSiteSeasons[sn] = ["2024"];
+            });
+
+            const urlSite = urlParams.get("site");
+            const urlSeason = urlParams.get("season");
+            const initialSite = (urlSite && availableSiteSeasons[urlSite]) ? urlSite : (availableSites[0] || "innsbruck");
+            const initialSeason = (urlSeason && (availableSiteSeasons[initialSite] || []).includes(urlSeason)) ? urlSeason : ((availableSiteSeasons[initialSite] || [])[0] || "2024");
+
+            siteSelect.value = initialSite;
+            document.getElementById("seasonSelect").innerHTML = (availableSiteSeasons[initialSite] || []).map(s =>
+                `<option value="${s}">${s}</option>`
+            ).join("");
+            document.getElementById("seasonSelect").value = initialSeason;
+            strategy = urlParams.get("strategy") || "aggressive";
+            sigma = urlParams.get("sigma") || "20";
+            source = urlParams.get("source") || "s2";
+            document.getElementById("strategySelect").value = strategy;
+            document.getElementById("sigmaSelect").value = sigma;
+            document.getElementById("sourceSelect").value = source;
+
+            const initSite = getSiteBySitename(initialSite);
+            if (initSite?.geometry?.coordinates) {
+                const [lon, lat] = initSite.geometry.coordinates;
+                sitePosition = [lat, lon];
+            }
+            postprocessedMap = L.map("postprocessedMap", { zoomControl: false }).setView(sitePosition, 12)
+                .addLayer(L.tileLayer(osmUrl, { attribution: "OpenStreetMap", opacity: 0.4 }));
+            marker = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:8px;height:8px;background:red;border:2px solid white;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,0.5);'></div>", iconSize: [8, 8] }) }).addTo(postprocessedMap);
+
+            siteSelect.addEventListener("change", function() {
+                const sn = this.value;
+                const seas = availableSiteSeasons[sn] || [];
+                document.getElementById("seasonSelect").innerHTML = seas.map(s => `<option value="${s}">${s}</option>`).join("");
+                document.getElementById("seasonSelect").value = seas[0] || "2024";
+                setSiteSeason(sn, document.getElementById("seasonSelect").value);
+            });
+            document.getElementById("seasonSelect").addEventListener("change", function() {
+                setSiteSeason(siteSelect.value, this.value);
+            });
+            document.getElementById("strategySelect").addEventListener("change", function() {
+                strategy = this.value;
+                urlParams.set("strategy", strategy);
+                history.replaceState({}, "", `?${urlParams}`);
+                loadTimeseries(); updateMap();
+            });
+            document.getElementById("sigmaSelect").addEventListener("change", function() {
+                sigma = this.value;
+                urlParams.set("sigma", sigma);
+                history.replaceState({}, "", `?${urlParams}`);
+                loadTimeseries(); updateMap();
+            });
+            document.getElementById("sourceSelect").addEventListener("change", function() {
+                source = this.value;
+                urlParams.set("source", source);
+                history.replaceState({}, "", `?${urlParams}`);
+                loadTimeseries(); updateMap();
+            });
+
+            await setSiteSeason(initialSite, initialSeason);
+        }
+
+        document.getElementById("dateSlider").addEventListener("input", function() {
+            document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(this.value));
+            drawPlots(); updateMap();
+        });
+
+        init();
+    </script>
+</body>
+</html>
diff --git a/webapp/prepared.html b/webapp/prepared.html
new file mode 100644
index 0000000..5cdeb92
--- /dev/null
+++ b/webapp/prepared.html
@@ -0,0 +1,352 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Prepared S2/S3 Viewer</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>
+    <script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
+    <style>
+        body { margin: 0; font-family: sans-serif; }
+        .nav { margin-bottom: 15px; font-size: 14px; }
+        .nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
+        .nav a:hover { text-decoration: underline; }
+        .nav a.active { font-weight: bold; }
+        .container { max-width: 900px; margin: 0 auto; padding: 20px; }
+        .selectors { margin-bottom: 20px; }
+        .selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
+        h1 { margin: 0 0 5px 0; font-size: 22px; }
+        .season-row { padding-bottom: 15px; }
+        h2 { margin: 0; font-size: 16px; color: #666; display: inline; }
+        #dateSlider { width: 100%; margin: 15px 0; }
+        #dateDisplay { text-align: center; font-size: 14px; color: #666; }
+        .map-label { font-size: 12px; margin-bottom: 3px; color: #666; }
+        .map-date { font-size: 11px; margin-top: 3px; color: #999; }
+        .plot-label { font-size: 12px; margin-bottom: 3px; color: #666; }
+        .plot { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 15px; }
+        #preparedMap { height: 500px; border: 1px solid #ccc; margin-top: 10px; }
+        .leaflet-image-layer { image-rendering: pixelated; }
+        .leaflet-control-attribution { display: none; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="nav">
+            <a href="index.html">Full</a>
+            <a href="preselection.html">Pre-selection</a>
+            <a href="prepared.html" class="active">Prepared</a>
+            <a href="fusion.html">Fusion</a>
+            <a href="postprocessed.html">Postprocessed</a>
+        </div>
+        <h1 id="siteName">Innsbruck</h1>
+        <div class="season-row"><h2 id="season">2024</h2></div>
+        <div class="selectors">
+            <label>Site:</label>
+            <select id="siteSelect"></select>
+            <label>Season:</label>
+            <select id="seasonSelect"></select>
+            <label>Strategy:</label>
+            <select id="strategySelect">
+                <option value="aggressive">Aggressive</option>
+                <option value="nonaggressive">Non-aggressive</option>
+            </select>
+            <label>Source:</label>
+            <select id="sourceSelect">
+                <option value="s2">S2 REFL</option>
+                <option value="s3">S3 Composite</option>
+            </select>
+        </div>
+        <input type="range" id="dateSlider" min="0" max="365" value="0">
+        <div id="dateDisplay">2024-01-01</div>
+        <div class="map-label" id="mapLabel">Prepared RGB (closest available)</div>
+        <div id="mapDate" class="map-date"></div>
+        <div id="preparedMap"></div>
+        <div id="plots">
+            <div class="plot-label">NDVI</div><canvas id="plot_ndvi" class="plot"></canvas>
+            <div class="plot-label">GCC</div><canvas id="plot_gcc" class="plot"></canvas>
+            <div class="plot-label">B02 (Blue)</div><canvas id="plot_b02" class="plot"></canvas>
+            <div class="plot-label">B03 (Green)</div><canvas id="plot_b03" class="plot"></canvas>
+            <div class="plot-label">B04 (Red)</div><canvas id="plot_b04" class="plot"></canvas>
+            <div class="plot-label">B8A (NIR)</div><canvas id="plot_b8a" class="plot"></canvas>
+        </div>
+    </div>
+    <script>
+        proj4.defs("EPSG:32632", "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
+        proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
+
+        let siteName = "innsbruck", season = "2024";
+        let strategy = "aggressive", source = "s2";
+        let sitePosition = [47.116171, 11.320308];
+        let start = new Date(2024, 0, 1);
+        let availableSiteSeasons = {};
+        let preparedMap = null, overlay = null, marker = null;
+        let ndviTs = [], gccTs = [], bandsTs = [];
+        const BANDS = [{key:"b02",color:"#0066ff"},{key:"b03",color:"#00aa00"},{key:"b04",color:"#cc0000"},{key:"b8a",color:"#9900cc"}];
+        const urlParams = new URLSearchParams(location.search);
+        const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+
+        const fmtDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+        const dateFromDays = (days) => fmtDate(new Date(start.getTime() + days * 86400000));
+        const daysFromDate = (dateStr) => {
+            const [y, m, d] = dateStr.split("-").map(Number);
+            return Math.floor((new Date(y, m - 1, d) - start) / 86400000);
+        };
+
+        function getPreparedPath() {
+            return `data/${siteName}/${season}/prepared_${strategy}`;
+        }
+
+        async function loadTimeseries() {
+            try {
+                const [n, g, b] = await Promise.all([
+                    fetch(`${getPreparedPath()}/ndvi/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
+                    fetch(`${getPreparedPath()}/gcc/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
+                    fetch(`${getPreparedPath()}/bands/${source}/timeseries.json`).then(r => r.ok ? r.json() : [])
+                ]);
+                ndviTs = n; gccTs = g; bandsTs = b;
+            } catch { ndviTs = []; gccTs = []; bandsTs = []; }
+            drawPlots();
+        }
+
+        function drawPlot(canvasId, data, key, color) {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+            const ctx = canvas.getContext("2d");
+            canvas.width = canvas.offsetWidth;
+            canvas.height = 100;
+            const w = canvas.width, h = canvas.height, pad = 30;
+            const plotW = w - pad * 2, plotH = h - pad * 2;
+            const pts = data.filter(t => t[key] != null);
+            if (!pts.length) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#999"; ctx.font = "12px sans-serif"; ctx.fillText("No data", pad, pad + plotH / 2); return; }
+            const dates = pts.map(t => new Date(t.date));
+            const vals = pts.map(t => t[key]);
+            const minD = new Date(Math.min(...dates)), maxD = new Date(Math.max(...dates));
+            const minV = Math.min(...vals), maxV = Math.max(...vals);
+            const dRange = maxD - minD || 1, vRange = maxV - minV || 1;
+            const x = d => pad + ((new Date(d) - minD) / dRange) * plotW;
+            const y = v => pad + plotH - ((v - minV) / vRange) * plotH;
+            ctx.clearRect(0, 0, w, h);
+            ctx.strokeStyle = "#ccc";
+            ctx.beginPath(); ctx.moveTo(pad, pad); ctx.lineTo(pad, pad + plotH); ctx.lineTo(pad + plotW, pad + plotH); ctx.stroke();
+            ctx.fillStyle = "#000";
+            ctx.font = "9px sans-serif";
+            ctx.fillText(minV.toFixed(3), 2, pad + plotH + 10);
+            ctx.fillText(maxV.toFixed(3), 2, pad + 3);
+            ctx.strokeStyle = color;
+            ctx.beginPath();
+            pts.forEach((t, i) => { const px = x(t.date), py = y(t[key]); i ? ctx.lineTo(px, py) : ctx.moveTo(px, py); });
+            ctx.stroke();
+            const curDate = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            const xPos = x(curDate);
+            ctx.strokeStyle = "#f00";
+            ctx.lineWidth = 2;
+            ctx.beginPath(); ctx.moveTo(xPos, pad); ctx.lineTo(xPos, pad + plotH); ctx.stroke();
+            const closest = pts.reduce((c, t) => Math.abs(new Date(t.date) - new Date(curDate)) < Math.abs(new Date(c.date) - new Date(curDate)) ? t : c);
+            if (closest) { ctx.fillStyle = "#f00"; ctx.font = "bold 10px sans-serif"; ctx.fillText(closest[key].toFixed(3), xPos + 5, y(closest[key]) - 5); }
+        }
+
+        function drawPlots() {
+            drawPlot("plot_ndvi", ndviTs, "ndvi", "#2d7a3e");
+            drawPlot("plot_gcc", gccTs, "greenness_index", "#00aa00");
+            BANDS.forEach(b => drawPlot(`plot_${b.key}`, bandsTs, b.key, b.color));
+        }
+
+        async function findPreparedFile(dateStr) {
+            const target = new Date(dateStr);
+            const yearEnd = new Date(parseInt(season), 11, 31);
+            const seasonStart = start.getTime();
+            const seasonEnd = yearEnd.getTime();
+            for (let offset = 0; offset <= 365; offset++) {
+                for (const dir of offset === 0 ? [0] : [-1, 1]) {
+                    const d = new Date(target.getTime() + dir * offset * 86400000);
+                    if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
+                    const ds = d.toISOString().split("T")[0].replace(/-/g, "");
+                    const filename = source === "s2" ? `S2A_MSIL2A_${ds}_REFL.tif` : `composite_${ds}.tif`;
+                    try {
+                        const res = await fetch(`${getPreparedPath()}/${source}/${filename}`, { method: "HEAD" });
+                        if (res.ok) return filename;
+                    } catch {}
+                }
+            }
+            return null;
+        }
+
+        function transformBounds(bbox, fromCRS) {
+            const sw = proj4(fromCRS, "EPSG:4326", [bbox[0], bbox[1]]);
+            const ne = proj4(fromCRS, "EPSG:4326", [bbox[2], bbox[3]]);
+            return [[sw[1], sw[0]], [ne[1], ne[0]]];
+        }
+
+        async function loadGeotiff(filename) {
+            const path = `${getPreparedPath()}/${source}/${filename}`;
+            const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
+            const image = await tiff.getImage();
+            const rasters = await image.readRasters();
+            const width = image.getWidth(), height = image.getHeight();
+            const bbox = image.getBoundingBox();
+            const geoKeys = image.getGeoKeys();
+            const crsCode = geoKeys.ProjectedCSTypeGeoKey ? `EPSG:${geoKeys.ProjectedCSTypeGeoKey}` :
+                (geoKeys.GeographicTypeGeoKey !== 4326 ? `EPSG:${geoKeys.GeographicTypeGeoKey}` : "EPSG:4326");
+            const [blue, green, red] = [0, 1, 2].map(i => Array.from(rasters[i]));
+            const normalize = (arr) => {
+                let min = Infinity, max = -Infinity;
+                for (const v of arr) if (!isNaN(v) && v > 0) { min = Math.min(min, v); max = Math.max(max, v); }
+                return arr.map(v => Math.max(0, Math.min(255, ((v - min) / (max - min || 1)) * 255)));
+            };
+            const [rN, gN, bN] = [red, green, blue].map(normalize);
+            const canvas = Object.assign(document.createElement("canvas"), { width, height });
+            const ctx = canvas.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+            const imgData = ctx.createImageData(width, height);
+            for (let i = 0; i < rN.length; i++) {
+                const idx = i * 4;
+                if (rN[i] === 0 && gN[i] === 0 && bN[i] === 0) imgData.data[idx + 3] = 0;
+                else { imgData.data[idx] = rN[i]; imgData.data[idx + 1] = gN[i]; imgData.data[idx + 2] = bN[i]; imgData.data[idx + 3] = 255; }
+            }
+            ctx.putImageData(imgData, 0, 0);
+            const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode);
+            return { dataUrl: canvas.toDataURL(), bounds, dateStr: filename.includes("composite") ? filename.replace("composite_", "").replace(".tif", "") : filename.replace("S2A_MSIL2A_", "").replace("_REFL.tif", "") };
+        }
+
+        async function updateMap() {
+            const dateStr = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            const filename = await findPreparedFile(dateStr);
+            if (!filename || !preparedMap) {
+                if (overlay) { preparedMap.removeLayer(overlay); overlay = null; }
+                document.getElementById("mapDate").textContent = "";
+                return;
+            }
+            try {
+                const { dataUrl, bounds, dateStr: ds } = await loadGeotiff(filename);
+                if (overlay) preparedMap.removeLayer(overlay);
+                overlay = L.imageOverlay(dataUrl, bounds, { opacity: 0.95 }).addTo(preparedMap);
+                preparedMap.fitBounds(bounds);
+                document.getElementById("mapDate").textContent = `${ds.slice(0,4)}-${ds.slice(4,6)}-${ds.slice(6,8)}`;
+            } catch (e) {
+                if (overlay) { preparedMap.removeLayer(overlay); overlay = null; }
+                document.getElementById("mapDate").textContent = "";
+            }
+        }
+
+        async function probeDataExists(sitename, s) {
+            try {
+                const res = await fetch(`data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
+                return res.ok;
+            } catch { return false; }
+        }
+
+        function getSiteBySitename(sn) {
+            return window.sitesData?.features?.find(f => f.properties?.sitename === sn);
+        }
+
+        async function setSiteSeason(newSite, newSeason) {
+            siteName = newSite;
+            season = newSeason;
+            start = new Date(parseInt(season), 0, 1);
+            const site = getSiteBySitename(newSite);
+            if (site?.geometry?.coordinates) {
+                const [lon, lat] = site.geometry.coordinates;
+                sitePosition = [lat, lon];
+            }
+            if (preparedMap) { preparedMap.setView(sitePosition, 12); if (marker) marker.setLatLng(sitePosition); }
+            document.getElementById("siteName").textContent = (site?.properties?.description || newSite);
+            document.getElementById("season").textContent = season;
+            const yearEnd = new Date(parseInt(season), 11, 31);
+            document.getElementById("dateSlider").max = Math.ceil((yearEnd - start) / 86400000);
+            const params = new URLSearchParams(location.search);
+            params.set("site", siteName);
+            params.set("season", season);
+            history.replaceState({}, "", `?${params}`);
+            const urlDate = params.get("date");
+            if (urlDate) document.getElementById("dateSlider").value = daysFromDate(urlDate);
+            document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(document.getElementById("dateSlider").value));
+            await loadTimeseries();
+            await updateMap();
+        }
+
+        async function init() {
+            try {
+                const res = await fetch("data/sites.geojson");
+                window.sitesData = res.ok ? await res.json() : { features: [] };
+            } catch { window.sitesData = { features: [] }; }
+            const features = window.sitesData.features || [];
+            for (const f of features) {
+                const sn = f.properties?.sitename;
+                if (!sn) continue;
+                const seasonsFromGeo = f.properties?.seasons ? Object.keys(f.properties.seasons).sort() : [];
+                const withData = [];
+                for (const s of seasonsFromGeo) {
+                    if (await probeDataExists(sn, s)) withData.push(s);
+                }
+                if (withData.length) availableSiteSeasons[sn] = withData;
+            }
+            const availableSites = Object.keys(availableSiteSeasons);
+            const siteSelect = document.getElementById("siteSelect");
+            siteSelect.innerHTML = "";
+            (availableSites.length ? availableSites.sort() : ["innsbruck"]).forEach(sn => {
+                const opt = document.createElement("option");
+                opt.value = sn;
+                opt.textContent = sn;
+                siteSelect.appendChild(opt);
+                if (!availableSiteSeasons[sn]) availableSiteSeasons[sn] = ["2024"];
+            });
+
+            const urlSite = urlParams.get("site");
+            const urlSeason = urlParams.get("season");
+            const initialSite = (urlSite && availableSiteSeasons[urlSite]) ? urlSite : (availableSites[0] || "innsbruck");
+            const initialSeason = (urlSeason && (availableSiteSeasons[initialSite] || []).includes(urlSeason)) ? urlSeason : ((availableSiteSeasons[initialSite] || [])[0] || "2024");
+
+            siteSelect.value = initialSite;
+            document.getElementById("seasonSelect").innerHTML = (availableSiteSeasons[initialSite] || []).map(s =>
+                `<option value="${s}">${s}</option>`
+            ).join("");
+            document.getElementById("seasonSelect").value = initialSeason;
+            strategy = urlParams.get("strategy") || "aggressive";
+            source = urlParams.get("source") || "s2";
+            document.getElementById("strategySelect").value = strategy;
+            document.getElementById("sourceSelect").value = source;
+
+            const initSite = getSiteBySitename(initialSite);
+            if (initSite?.geometry?.coordinates) {
+                const [lon, lat] = initSite.geometry.coordinates;
+                sitePosition = [lat, lon];
+            }
+            preparedMap = L.map("preparedMap", { zoomControl: false }).setView(sitePosition, 12)
+                .addLayer(L.tileLayer(osmUrl, { attribution: "OpenStreetMap", opacity: 0.4 }));
+            marker = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:8px;height:8px;background:red;border:2px solid white;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,0.5);'></div>", iconSize: [8, 8] }) }).addTo(preparedMap);
+
+            siteSelect.addEventListener("change", function() {
+                const sn = this.value;
+                const seas = availableSiteSeasons[sn] || [];
+                document.getElementById("seasonSelect").innerHTML = seas.map(s => `<option value="${s}">${s}</option>`).join("");
+                document.getElementById("seasonSelect").value = seas[0] || "2024";
+                setSiteSeason(sn, document.getElementById("seasonSelect").value);
+            });
+            document.getElementById("seasonSelect").addEventListener("change", function() {
+                setSiteSeason(siteSelect.value, this.value);
+            });
+            document.getElementById("strategySelect").addEventListener("change", function() {
+                strategy = this.value;
+                urlParams.set("strategy", strategy);
+                history.replaceState({}, "", `?${urlParams}`);
+                loadTimeseries(); updateMap();
+            });
+            document.getElementById("sourceSelect").addEventListener("change", function() {
+                source = this.value;
+                urlParams.set("source", source);
+                history.replaceState({}, "", `?${urlParams}`);
+                loadTimeseries(); updateMap();
+            });
+
+            await setSiteSeason(initialSite, initialSeason);
+        }
+
+        document.getElementById("dateSlider").addEventListener("input", function() {
+            document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(this.value));
+            drawPlots(); updateMap();
+        });
+
+        init();
+    </script>
+</body>
+</html>
diff --git a/webapp/preselection.html b/webapp/preselection.html
index 9476fcc..ed41dd1 100644
--- a/webapp/preselection.html
+++ b/webapp/preselection.html
@@ -8,7 +8,12 @@
     <script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
     <style>
         body { margin: 0; font-family: sans-serif; }
-        .container { max-width: 900px; margin: 0 auto; padding: 20px; }
+        .nav { margin-bottom: 15px; font-size: 14px; }
+        .nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
+        .nav a:hover { text-decoration: underline; }
+        .nav a.active { font-weight: bold; }
+        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
+        .header-sticky { position: sticky; top: 0; background: white; z-index: 1000; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; }
         .selectors { margin-bottom: 20px; }
         .selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
         h1 { margin: 0 0 5px 0; font-size: 22px; }
@@ -30,9 +35,17 @@
 </head>
 <body>
     <div class="container">
-        <h1 id="siteName">Innsbruck</h1>
-        <div class="season-row"><h2 id="season">2024</h2><span class="download-links" id="downloadLinks"></span></div>
-        <div class="selectors">
+        <div class="header-sticky">
+            <div class="nav">
+                <a href="index.html">Full</a>
+                <a href="preselection.html" class="active">Pre-selection</a>
+                <a href="prepared.html">Prepared</a>
+                <a href="fusion.html">Fusion</a>
+                <a href="postprocessed.html">Postprocessed</a>
+            </div>
+            <h1 id="siteName">Innsbruck</h1>
+            <div class="season-row"><h2 id="season">2024</h2><span class="download-links" id="downloadLinks"></span></div>
+            <div class="selectors">
             <label>Site:</label>
             <select id="siteSelect"></select>
             <label>Season:</label>
@@ -48,9 +61,10 @@
                 <option value="aggressive">Aggressive</option>
                 <option value="nonaggressive">Non-aggressive</option>
             </select>
+            </div>
+            <input type="range" id="dateSlider" min="0" max="365" value="0">
+            <div id="dateDisplay">2024-01-01</div>
         </div>
-        <input type="range" id="dateSlider" min="0" max="365" value="0">
-        <div id="dateDisplay">2024-01-01</div>
         <div class="map-label" id="mapLabel">S2 RGB (closest available)</div>
         <div id="s2rgbdate" class="map-date"></div>
         <div id="s2map"></div>
@@ -300,7 +314,7 @@
         }
 
         async function loadTimeseries() {
-            const rawBase = `../data/${siteName}/${season}/raw`;
+            const rawBase = `data/${siteName}/${season}/raw`;
             const src = document.getElementById("sourceSelect")?.value || "s2";
             source = src;
             try {
@@ -334,7 +348,7 @@
 
         async function probeDataExists(sitename, s) {
             try {
-                const res = await fetch(`../data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
+                const res = await fetch(`data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
                 return res.ok;
             } catch { return false; }
         }
@@ -366,7 +380,7 @@
 
         async function init() {
             try {
-                const res = await fetch("../data/sites.geojson");
+                const res = await fetch("data/sites.geojson");
                 window.sitesData = res.ok ? await res.json() : { features: [] };
             } catch {
                 window.sitesData = { features: [] };
@@ -467,7 +481,7 @@
         }
 
         async function loadS2Geotiff(filename) {
-            const path = `../data/${siteName}/${season}/raw/${source}/${filename}`;
+            const path = `data/${siteName}/${season}/raw/${source}/${filename}`;
             const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
             const image = await tiff.getImage();
             const rasters = await image.readRasters();