<!--
                                                                                                             
                                                                                                             
                                              :::::::::::::::::                                              
                                        :::::::::::::::::::::::::::::                                        
                                    :::::::::                   :::::::::                                    
                                 :::::::                             :::::::         ::                      
                              ::::::                                     ::::::     ::::                     
                            :::::                                           :::    ::::::                    
                          :::::                                                  :::::::::                   
                        :::::                                                   ::::::::::::                 
                       ::::                                                    ::::::::::::::                
                      ::::                                                    ::::::::::::::::               
                    ::::                                                     ::::::::::::::::::              
                   ::::                                                      ::::::::::::::::::              
                  ::::                                                      ::::::::::::::::::::             
                  :::                                                        ::::::::::::::::::              
                 ::::                                                        ::::::::::::::::::              
                ::::                  ##########          ##########          ::::::::::::::::               
                :::                 ##############      ##############          ::::::::::::                 
               ::::                ####        ####    ####        ####           ::::::::                   
               ::::                ###          ####  ####          ###                     ::               
               :::                 ###          ###    ##           ###                    :::               
               :::                                                                         :::               
               :::                                                                         :::               
               :::                                                                         :::               
               :::                                                                         :::               
               ::::                                                                       ::::               
               ::::                   ###                        ###                      ::::               
                :::                   ####                      ####                      :::                
                ::::                    ####                  ####                       ::::                
                 ::::                    #####              #####                       ::::                 
                  :::                      #######      #######                         :::                  
                  ::::                        ##############                           ::::                  
                   ::::                                                               ::::                   
                    ::::                                                             ::::                    
                      ::::                                                         ::::                      
                       ::::                                                       ::::                       
                        :::::                                                   :::::                        
                          :::::                                               :::::                          
                            :::::                                           :::::                            
                              ::::::                                     ::::::                              
                                 :::::::                             :::::::                                 
                                    :::::::::                   :::::::::                                    
                                        :::::::::::::::::::::::::::::                                        
                                              :::::::::::::::::                                              
                                                                                                             
                                                                                                             
-->


<!DOCTYPE html>
<html lang="de">
<head>
<script>
window._fevermap_startTime = performance.now();
</script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FeverMap | Interaktive Fieber-Geodaten aus der FeverApp</title>

<!-- Meta Description -->
<meta name="description" content="FieberMaps visualisiert anonymisierte Fieberverläufe und Symptom-Daten der FeverApp in interaktiven Karten – gefördert vom BMBF, geleitet von Prof. Dr. David Martin.">

<!-- Meta Keywords -->
<meta name="keywords" content="FieberMaps, FeverApp, interaktive Fieberkarte, Fieberverläufe, Fiebersymptome, Fieberdatenvisualisierung, BMBF Gesundheitsforschung, epidemiologische Karten, kindergesundheit">

<link rel="shortcut icon" href="https://fevermap.de/favicon.svg" />

<!-- Open Graph Meta Tags -->
<meta property="og:url" content="https://fevermap.de">
<meta property="og:type" content="website">
<meta property="og:title" content="FeverMap | Interaktive Fieber-Geodaten auf Basis der FeverApp.">
<meta property="og:description" content="FieberMaps visualisiert anonymisierte Fieberverläufe und Symptom-Daten der FeverApp in interaktiven Karten – gefördert vom BMBF, geleitet von Prof. Dr. David Martin.">
<meta property="og:image" content="https://fevermap.de/fevermap-opengraph.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="fevermap.de">
<meta property="twitter:url" content="https://fevermap.de">
<meta name="twitter:title" content="FeverMap | Interaktive Fieber-Geodaten auf Basis der FeverApp.">
<meta name="twitter:description" content="FieberMaps visualisiert anonymisierte Fieberverläufe und Symptom-Daten der FeverApp in interaktiven Karten – gefördert vom BMBF, geleitet von Prof. Dr. David Martin.">
<meta name="twitter:image" content="https://fevermap.de/fevermap-opengraph.png">

<!-- GSAP Core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>


<style>
html {
    visibility: hidden;
    opacity: 0;
}

html.fade-ready {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.45s ease-out;
}

/* Fix: rounded video + shadow */
#preview-video {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 22px rgba(0,0,0,0.22);
    background: #000;
    display: none;
    opacity: 0;
    transform: scale(0.94);
    will-change: opacity, transform, filter;
}
</style>

<style>
#feverappFooter {
  width: 100%;
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  background: #fdf9d6;
  border-top: 2px solid rgba(0,0,0,0.08);
  font-family: system-ui, sans-serif;
  font-size: 0.93rem;
  color: #222;
}

#feverappFooter .footer-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-col { flex: 1 1 260px; }
.footer-logo { width: 110px; margin-bottom: .7rem; }
.footer-org { margin: 0 0 .4rem 0; line-height: 1.45; }

.footer-link {
  display: block;
  margin: .35rem 0;
  text-decoration: none;
  color: #004b6e;
  font-weight: 600;
}
.footer-link:hover { text-decoration: underline; }

.stats-col p { margin: .2rem 0; }

@media (max-width: 480px) {
  #feverappFooter { padding: 2rem 1rem; }
}
</style>

<link rel="stylesheet" href="https://www.fevermap.de/style-intro.css" fetchpriority="high">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "FeverMap.de",
  "url": "https://fevermap.de",
  "publisher": {
    "@type": "CollegeOrUniversity",
    "name": "Universität Witten/Herdecke",
    "department": {
      "@type": "Organization",
      "name": "Gerhard Kienle Lehrstuhl für Medizintheorie, Integrative und Anthroposophische Medizin"
    },
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Gerhard-Kienle-Weg 4",
      "addressLocality": "Herdecke",
      "postalCode": "58313",
      "addressCountry": "DE"
    }
  }
}
</script>

</head>
<body>

<div id="preview-indicator">👁️ Vorschau Modus</div>
<div id="gif-shadow-overlay"></div>

<div class="container">

    <div id="preview-wrapper">
        <img id="preview-img"
             src="https://www.fevermap.de/fevermap.webp"
             alt="FeverMap Vorschau"
             class="logo">

        <video id="preview-video" playsinline muted autoplay loop></video>
    </div>

    <h1>&#128506; Herzlich willkommen</h1>

    <p>
        FeverMap ist ein interaktives Visualisierungstool zur Darstellung von 
        Fieberaktivität bei Kindern in Deutschland, basierend auf anonymisierten Daten der 
        <a class="app-link" href="https://www.feverapp.de" target="_blank">FeverApp</a>.
    </p>

    <a class="enter-btn" id="enter-button" href="/app">App starten</a>
    <button class="preview-btn" id="preview-btn">Vorschau</button>

    <p></p>
<img src="fevermap-logo.png"
     alt="FeverMap Logo"
     class="logo-zoom"
     id="logo-svg"
     style="max-width: 500px; width: 100%; height: auto;">

<a href="https://www.openstreetmap.de/" target="_blank" rel="noopener">
    <img src="osmde-logo.png"
         loading="lazy"
         alt="OSM DE"
         style="max-width: 800px; width: 100%; height: auto;">
</a>


</div>

<div id="preview-chooser">
    <h4>Vorschau wählen</h4>
    <button id="preview-desktop" class="chooser-btn">💻 Desktop Vorschau</button>
    <button id="preview-mobile" class="chooser-btn">📱 Mobile Vorschau</button>
</div>

<iframe id="preload-iframe-1" class="preload-frame" data-src="https://www.fevermap.de/app/index.php"></iframe>
<iframe id="preload-iframe-2" class="preload-frame" data-src="https://neuropsy17.shinyapps.io/FeverMap/"></iframe>

<script>
window.addEventListener("load", () => {
    document.querySelectorAll("iframe[data-src]").forEach(ifr => {
        ifr.src = ifr.dataset.src;
    });
});
</script>


<script>
// ultra-smooth rAF scroll replacement
function smoothScrollTo(targetEl, duration = 850, easePower = 3) {
    const start = window.pageYOffset;
    const target = targetEl.getBoundingClientRect().top + start;
    const distance = target - start;

    let startTime = null;

    function easeOut(t) {
        return 1 - Math.pow(1 - t, easePower);
    }

    function step(timestamp) {
        if (!startTime) startTime = timestamp;
        const progress = Math.min((timestamp - startTime) / duration, 1);

        const eased = easeOut(progress);
        window.scrollTo(0, start + distance * eased);

        if (progress < 1) requestAnimationFrame(step);
    }

    requestAnimationFrame(step);
}
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {

    const previewImg = document.getElementById("preview-img");
    const previewVideo = document.getElementById("preview-video");
    const enterButton = document.getElementById("enter-button");

    previewImg.addEventListener("click", () => {
        smoothScrollTo(enterButton, 950, 4);
    });

    previewVideo.addEventListener("click", () => {
        smoothScrollTo(enterButton, 900, 4);
    });

});
</script>


<script>
document.addEventListener("DOMContentLoaded", () => {

    const previewBtn = document.getElementById("preview-btn");
    const chooser = document.getElementById("preview-chooser");
    const desktopBtn = document.getElementById("preview-desktop");
    const mobileBtn = document.getElementById("preview-mobile");
    const previewImg = document.getElementById("preview-img");
    const previewVideo = document.getElementById("preview-video");
    const overlay = document.getElementById("gif-shadow-overlay");
    const indicator = document.getElementById("preview-indicator");

    previewBtn.addEventListener("click", () => chooser.classList.add("open"));

    function showVideo(src) {

        smoothScrollTo(document.body, 680, 3);

        while (previewVideo.firstChild)
            previewVideo.removeChild(previewVideo.firstChild);

        const source = document.createElement("source");
        source.src = src;
        source.type = "video/mp4";
        previewVideo.appendChild(source);

        previewVideo.load();

        previewVideo.addEventListener("loadeddata", () => {
            previewImg.style.opacity = 0;
            previewImg.style.display = "none";

            previewVideo.style.display = "block";

            requestAnimationFrame(() => {
                previewVideo.style.opacity = "1";
                previewVideo.style.transform = "scale(1)";
            });

            previewVideo.play();
            overlay.style.opacity = 1;
            indicator.classList.add("show");
        }, { once: true });
    }

    desktopBtn.addEventListener("click", () => {
        chooser.classList.remove("open");
        showVideo("https://www.fevermap.de/fevermap-desktop.mp4");
    });

    mobileBtn.addEventListener("click", () => {
        chooser.classList.remove("open");
        showVideo("https://www.fevermap.de/fevermap-mobile.mp4");
    });

});
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.documentElement.style.visibility = "visible";
});
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.documentElement.classList.add("fade-ready");
});
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {

    const video = document.getElementById("preview-video");

    function animateVideoIn(duration = 850) {
        const start = performance.now();
        const startScale = 0.94;
        const endScale = 1;
        const startOpacity = 0;
        const endOpacity = 1;

        function frame(now) {
            const progress = Math.min((now - start) / duration, 1);
            const ease = 1 - Math.pow(1 - progress, 3);

            const scale = startScale + (endScale - startScale) * ease;
            const opacity = startOpacity + (endOpacity - startOpacity) * ease;

            video.style.transform = `scale(${scale})`;
            video.style.opacity = opacity;

            if (progress < 1) requestAnimationFrame(frame);
        }

        requestAnimationFrame(frame);
    }

    video.addEventListener("loadeddata", () => {
        video.style.transform = "scale(0.94)";
        video.style.opacity = "0";
        animateVideoIn();
    });

});
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const video = document.getElementById("preview-video");

    video.style.display = "none";
    video.style.position = "absolute";
    video.style.opacity = "0";

    function attachVideoFix() {
        video.addEventListener("loadeddata", () => {
            requestAnimationFrame(() => {
                video.style.position = "relative";
                video.style.opacity = "1";
            });
        }, { once: true });
    }

    attachVideoFix();

    // SAFE: fallback if window.showVideo is not defined yet
    const originalShowVideo = window.showVideo || function() {};

    window.showVideo = function(src) {
        video.style.display = "none";
        video.style.position = "absolute";
        video.style.opacity = "0";

        // Call original (if it exists)
        originalShowVideo(src);

        setTimeout(() => {
            video.style.display = "block";
        }, 20);
    };
});
</script>


<script>
function runIdle(fn) {
    if ("requestIdleCallback" in window) {
        requestIdleCallback(fn, { timeout: 2000 });
    } else {
        setTimeout(fn, 1200);
    }
}

runIdle(() => {
    const videos = [
        "https://www.fevermap.de/fevermap-desktop.mp4",
        "https://www.fevermap.de/fevermap-mobile.mp4"
    ];

    videos.forEach(src => {
        const link = document.createElement("link");
        link.rel = "prefetch";
        link.href = src;
        link.as = "video";
        link.type = "video/mp4";
        document.head.appendChild(link);
    });
});
</script>
<script src="logo-overlay.js"></script>

<footer id="feverappFooter">
  <div class="footer-inner">

    <div class="footer-col logo-col">
      <h4>FeverMap ist ein Projekt an der</h4>
      <img src="uni-logo.svg" alt="Universität Witten/Herdecke Logo"
           class="footer-logo" style="width:155px;height:auto;margin:0 0 .6rem 0;">
      <p class="footer-org">
        Fakultät für Gesundheit<br>
        Gerhard Kienle Lehrstuhl für Medizintheorie,<br>
        Integrative und Anthroposophische Medizin<br>
        <a href="https://www.uni-wh.de" target="_blank" class="footer-link">Universität Witten/Herdecke</a>
      </p>
    </div>

    <div class="footer-col info-col">
      <h4>Informationen</h4>
      <a href="/impressum.php" target="_blank"  class="footer-link">Impressum</a>
      <a href="/datenschutz.php" target="_blank"  class="footer-link">Datenschutz</a>
    </div>

    <div class="footer-col stats-col">
      <h4>System</h4>
      <p><strong>Browser:</strong> <span id="statBrowser"></span></p>
      <p><strong>IP-Adresse:</strong> <span id="statIP">Lädt…</span></p>
      <p><strong>Client-Ladezeit:</strong> <span id="statLoad"></span> ms</p>
      <p><strong>PHP-Ausführungszeit:</strong>
        <span id="statExecPHP">0.06</span> ms
      </p>
      <p><strong>Serverzeit:</strong>
        <span id="statServer">2026-01-18 16:00:11</span>
      </p>
    </div>

  </div>
</footer>

<script>
// Browser
document.getElementById("statBrowser").textContent = navigator.userAgent;

// Client Load Time
window.addEventListener("load", () => {
  const load = performance.now() - window._fevermap_startTime;
  document.getElementById("statLoad").textContent = load.toFixed(2);
});

// IPAdresse
fetch("https://api.ipify.org?format=json")
  .then(r => r.json())
  .then(d => document.getElementById("statIP").textContent = d.ip)
  .catch(() => document.getElementById("statIP").textContent = "—");
</script>


</body>
</html>