<!--
    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%              ++++++++++++++++++++++++++++++++++++++++
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%            +++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          +++++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          +++++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          +++++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          +++++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          +++++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%           ++++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%            +++++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%              +++++++++++++++++++++++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%                                                            ++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%                                                            ++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%        W E L C O M E   T O   T H E   W E B S E U M         ++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%       .............................................        ++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%                                                            ++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%                                                            ++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%                                                            ++++++++++++++++++++
%%%%%%%%%%%%%%%%%%%%          [ EXHIBIT ]  [ HISTORY ]  [ COLLECTION ]          ++++++++++++++++++++
  %%%%%%%%%%%%%%%%%%                                                              ++++++++++++++++++
    %%%%%%%%%%%%%%%%                                                                ++++++++++++++++
                                                                                                    
                                                                                                    
                                                                                                    
    %%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%
  %%%%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%          © 2026 webseum.co - All rights reserved.          %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%     Unauthorized copying or redistribution prohibited.     %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%                                                            %%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%          %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%              %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%                  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>webseum.co – The Museum of the Web</title>
<meta name="description" content="An infinite canvas where every website, project, or idea gets a permanent exhibit. No algorithm, no expiry date.">
<meta name="keywords" content="webseum, museum of the web, pixels, canvas, archive, history">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://webseum.co/">

<link rel="manifest" href="/manifest.php">
<meta name="theme-color" content="#0a0a12" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#eff6fd" media="(prefers-color-scheme: light)">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="webseum.co">
<link rel="apple-touch-icon" href="/favicons/icon-192.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/icon-152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/icon-144.png">
<link rel="apple-touch-icon" sizes="128x128" href="/favicons/icon-128.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/icon-192.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/icon-96.png">

<meta property="og:type"        content="website">
<meta property="og:url"         content="https://webseum.co/">
<meta property="og:title"       content="webseum.co – The Museum of the Web">
<meta property="og:description" content="Explore the infinite canvas of the web.">
<meta property="og:image"       content="https://webseum.co/og-image.png">
<meta property="og:locale"      content="en_US">

<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="webseum.co – The Museum of the Web">
<meta name="twitter:description" content="Explore the infinite canvas of the web.">
<meta name="twitter:image"       content="https://webseum.co/og-image.png">

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "webseum.co",
    "url": "https://webseum.co",
    "description": "An infinite canvas where every website, project, or idea gets a permanent exhibit. No algorithm, no expiry date.",
    "inLanguage": "en",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://webseum.co/directory?q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  },
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "webseum.co",
    "url": "https://webseum.co",
    "logo": "https://webseum.co/favicons/icon-192.png",
    "contactPoint": { "@type": "ContactPoint", "email": "office@webseum.co", "contactType": "customer support" }
  }
]
</script>

<link href="/css/webseum.min.css" rel="stylesheet">

<script>
window._pwaPrompt = null;
window.addEventListener('beforeinstallprompt', function(e) {
  e.preventDefault();
  window._pwaPrompt = e;
  var btn = document.getElementById('fab-install');
  if (btn && document.getElementById('fab-menu').style.display === 'none') btn.style.display = 'flex';
});
window.addEventListener('appinstalled', function() {
  window._pwaPrompt = null;
  var btn = document.getElementById('fab-install');
  if (btn) btn.style.display = 'none';
});
</script>

</head>
<body dir="ltr">

<canvas id="canvas"></canvas>
<div id="hud" data-i18n="hud"></div>
<div id="counter"><strong id="counter-num">–</strong> <span data-i18n="cells_claimed"></span></div>
<div id="coords">0, 0</div>
<div id="tip"><strong id="tip-name"></strong><span id="tip-url"></span><span id="tip-coords"></span></div>
<div id="heatmap-indicator" data-i18n="heatmap_on"></div>
<div id="live-indicator" style="display:none"></div>
<div id="spotlight-banner"></div>

<div id="minimap" title="Minimap" data-i18n-title="minimap_title">
  <canvas id="minimap-canvas" width="150" height="100"></canvas>
  <div id="minimap-label" data-i18n="minimap_label">minimap</div>
</div>

<div id="latest-panel"></div>

<div id="search-wrap">
  <input type="text" id="search-input" data-i18n-placeholder="search_placeholder" autocomplete="off">
  <div id="search-results"></div>
</div>

<div id="mini-popup">
  <div class="mp-coords" id="mp-coords"></div>
  <div class="mp-title" id="mp-title"></div>
  <div class="mp-meta" id="mp-meta"></div>
  <button class="mp-btn" id="mp-claim-btn"></button>
</div>

<div class="modal-bg" id="modal-bg">
  <div class="modal-box" style="max-width:420px">
    <div class="modal-box-inner">
    <h2 id="modal-title"></h2>
    <div class="success-msg" id="success">
      <div class="success-icon">✓</div>
      <p id="success-main" data-i18n="success_text"></p>
      <p id="success-account" style="font-size:.82rem;color:var(--accent);margin-top:.4rem;display:none"></p>
      <button onclick="closeModal()" data-i18n="close"></button>
    </div>
    <div id="form-body">

      <div style="position:absolute;left:-9999px;opacity:0;pointer-events:none" aria-hidden="true">
        <input type="text" name="website" id="f-website" tabindex="-1" autocomplete="off">
        <input type="text" name="company_url" id="f-company_url" tabindex="-1" autocomplete="off">
      </div>
      <input type="hidden" id="f-ft" name="_ft">

      <label for="f-name"><span data-i18n="label_name"></span> <span style="color:#ff4610">*</span></label>
      <input type="text" id="f-name" data-i18n-placeholder="ph_name" maxlength="100">
      <div class="err-msg" id="err-name"></div>

      <label for="f-alliance"><span data-i18n="label_alliance">Collections (optional)</span></label>
      <input type="text" id="f-alliance" maxlength="50" placeholder="e.g. PixelKings" data-i18n-placeholder="ph_alliance">

      <label for="f-url"><span data-i18n="label_url"></span> <span style="color:#ff4610">*</span></label>
      <input type="url" id="f-url" placeholder="https://">
      <div class="err-msg" id="err-url"></div>

      <label for="f-image" data-i18n="label_image"></label>
      <div class="drop-area" id="drop-area">
        <span data-i18n="drop_text"></span><br>
        <span style="font-size:.72rem;color:#444" data-i18n="upload_hint">JPG · PNG · GIF · WebP · SVG · max 5 MB</span>
        <input type="file" id="f-image" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml" style="display:none">
      </div>
      <div id="preview-wrap"><img id="preview-img" src="" alt=""></div>

      <div class="account-block" id="account-block">
        <label style="display:flex;align-items:center;gap:.55rem;cursor:pointer;margin:0">
          <input type="checkbox" id="f-create-account" style="width:15px;height:15px;cursor:pointer;accent-color:var(--accent);flex-shrink:0">
          <span style="font-size:.85rem;color:var(--text2);font-weight:500" data-i18n="create_account_label"></span>
        </label>
        <p class="account-hint" id="account-hint" data-i18n="create_account_hint"></p>
        <div class="account-email-wrap" id="account-email-wrap">
          <label for="f-account-email" style="font-size:.78rem;color:var(--text2);margin-bottom:.3rem;display:block" data-i18n="label_account_email"></label>
          <input type="email" id="f-account-email" name="account_email" data-i18n-placeholder="ph_account_email" maxlength="150">
          <div class="err-msg" id="err-account-email"></div>
        </div>
      </div>

      <div style="display:flex;align-items:flex-start;gap:.6rem;margin-top:1rem">
        <input type="checkbox" id="f-legal" style="margin-top:3px;flex-shrink:0;width:16px;height:16px;cursor:pointer">
        <label for="f-legal" style="font-size:.78rem;color:var(--text2);cursor:pointer;margin:0">
          <span data-i18n="legal_text"></span> <span style="color:#ff4610">*</span>
        </label>
      </div>
      <div class="err-msg" id="err-legal"></div>

      <label for="f-captcha"><span data-i18n="label_captcha"></span> <span style="color:#ff4610">*</span></label>
      <div class="captcha-row">
        <div class="captcha-question" id="captcha-question">…</div>
        <span style="font-size:.85rem;color:var(--text3)">=</span>
        <input type="text" id="f-captcha" inputmode="numeric" maxlength="4" style="width:70px">
        <button type="button" class="captcha-refresh" onclick="loadCaptcha()" title="Neu laden" data-i18n-title="captcha_refresh">↻</button>
      </div>
      <input type="hidden" id="f-captcha-token">
      <div class="err-msg" id="err-captcha"></div>

      <div id="turnstile-widget" style="margin-top:.8rem"></div>
      <div class="err-msg" id="err-turnstile"></div>

      <div class="err-msg" id="err-submit"></div>
      <div class="btn-row">
        <button class="btn btn-cancel" onclick="closeModal()" data-i18n="cancel"></button>
        <button class="btn btn-submit" id="btn-submit" data-i18n="submit"></button>
      </div>
    </div>
    </div>
  </div>
</div>

<div class="modal-bg" id="info-modal-bg">
  <div class="modal-box" style="max-width:500px">
    <div class="modal-box-inner">
    <h2 data-i18n="info_title"></h2>
    <div id="info-modal-body"></div>
    <div class="btn-row" style="margin-top:1.5rem">
      <button class="btn btn-cancel" onclick="closeInfoModal()" data-i18n="close"></button>
    </div>
    </div>
  </div>
</div>

<button class="fab" id="fab-menu" onclick="openFabMenu(true)" title="Menu" data-i18n-title="fab_menu">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
  </svg>
</button>
<button class="fab" id="fab-info" onclick="openInfoModal()" title="Info" data-i18n-title="fab_info">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
  </svg>
</button>
<button class="fab" id="fab-settings" onclick="toggleSettings()" title="Menu" data-i18n-title="fab_menu">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
  </svg>
</button>
<div id="heart-credit"><a href="https://webseum.co">webseum.co</a></div>
<button class="fab" id="fab-install" onclick="installPWA()" title="Install App" style="display:none" data-i18n-title="fab_install">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
  </svg>
</button>

<button class="fab" id="fab-share" onclick="togglePanel('panel-share')" title="Share" data-i18n-title="fab_share">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16">
    <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5"/>
  </svg>
</button>

<button class="fab" id="fab-theme" onclick="togglePanel('panel-theme')" title="Theme" data-i18n-title="fab_theme">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>
  </svg>
</button>

<div id="settings-menu">
  <div class="smenu-item" onclick="closeSettings();setTimeout(toggleSearch,10)">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>
    </span> 
    <span data-i18n="menu_search"></span>
  </div>
  <div class="smenu-item" onclick="teleport();closeSettings()">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/><path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>
    </span> 
    <span data-i18n="menu_teleport"></span>
  </div>
  <div class="smenu-sep"></div>
  <div class="smenu-item" onclick="closeSettings();window.location.href='/login?redirect=/profile'">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>    </span>
    <span>My Account</span>
  </div>
  <div class="smenu-sep"></div>
  <div class="smenu-item" onclick="toggleCollapse('tools-collapse', this)">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/></svg>
    </span> 
    <span data-i18n="menu_tools_settings">Tools & Settings</span>
    <span class="collapse-indicator" style="margin-left:auto; font-weight:bold; font-size:1.2rem; opacity: 0.6;">+</span>
  </div>
  <div id="tools-collapse" class="smenu-collapse">
    <div class="smenu-toggle ml" id="smenu-latest" onclick="toggleLatest()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3.5A.5.5 0 0 1 7.5 8V4.5A.5.5 0 0 1 8 4z"/></svg></span> 
        <span data-i18n="menu_latest"></span>
      </div>
      <div class="toggle-track" id="toggle-latest"><div class="toggle-thumb"></div></div>
    </div>
    <div class="smenu-toggle ml" id="smenu-heatmap" onclick="toggleHeatmap()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/></svg></span> 
        <span data-i18n="menu_heatmap"></span>
      </div>
      <div class="toggle-track" id="toggle-heatmap"><div class="toggle-thumb"></div></div>
    </div>
    <div class="smenu-toggle ml" id="smenu-minimap" onclick="toggleMinimap()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z"/></svg></span> 
        <span data-i18n="menu_minimap"></span>
      </div>
      <div class="toggle-track" id="toggle-minimap"><div class="toggle-thumb"></div></div>
    </div>
    <div class="smenu-toggle ml" id="smenu-tour" onclick="toggleTour()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/></svg></span> 
        <span data-i18n="menu_tour"></span>
      </div>
      <div class="toggle-track" id="toggle-tour"><div class="toggle-thumb"></div></div>
    </div>
    <div class="smenu-toggle ml" id="smenu-3d" onclick="toggle3D()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/></svg></span> 
        <span data-i18n="menu_3d"></span>
      </div>
      <div class="toggle-track" id="toggle-3d"><div class="toggle-thumb"></div></div>
    </div>
    <div class="smenu-toggle ml" id="smenu-live" onclick="toggleLive()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/></svg></span> 
        <span data-i18n="menu_live"></span>
      </div>
      <div class="toggle-track" id="toggle-live"><div class="toggle-thumb"></div></div>
    </div>
    <div class="smenu-toggle ml" id="smenu-bw" onclick="toggleBW()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
            <path d="M0 0h16v16H0V0zm1 1v14h14V1H1z"/>
          </svg>
        </span> 
        <span data-i18n="menu_bw">Schwarz/Weiß Modus</span>
      </div>
      <div class="toggle-track" id="toggle-bw"><div class="toggle-thumb"></div></div>
    </div>
    <div class="smenu-toggle ml" id="smenu-rememberpos" onclick="toggleRememberPos()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
            <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
            <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
          </svg>
        </span>
        <span data-i18n="menu_remember_pos">Remember position</span>
      </div>
      <div class="toggle-track" id="toggle-rememberpos">
        <div class="toggle-thumb"></div>
      </div>
    </div>
    
    <div class="smenu-toggle ml" id="smenu-nightmode" onclick="toggleNightMode()">
      <div class="smenu-toggle-left">
        <span class="smenu-icon">
          <!-- Kleines Taschenlampen-Icon -->
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
            <path d="M12 0H4v2h8V0zM6 3v2h4V3H6zM5 6v10h6V6H5z"/>
          </svg>
        </span>
        <span data-i18n="menu_nightmode">Nachts im Museum</span>
      </div>
      <div class="toggle-track" id="toggle-nightmode">
        <div class="toggle-thumb"></div>
      </div>
    </div>
  </div>

  <div class="smenu-item" onclick="toggleCollapse('legal-collapse', this)">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/></svg>
    </span> 
    <span data-i18n="menu_legal_notes">Legal notes</span>
    <span class="collapse-indicator" style="margin-left:auto; font-weight:bold; font-size:1.2rem; opacity: 0.6;">+</span>
  </div>
  <div id="legal-collapse" class="smenu-collapse">
    <div class="smenu-item ml" onclick="window.location.href='/imprint'">
      <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg></span>
      <span data-i18n="menu_imprint"></span>
    </div>
    <div class="smenu-item ml" onclick="window.location.href='/privacy'">
      <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/></svg></span>
      <span data-i18n="menu_privacy"></span>
    </div>
    <div class="smenu-item ml" onclick="window.location.href='/terms-of-use'">
      <span class="smenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></span>
      <span data-i18n="menu_terms"></span>
    </div>
  </div>

  <div class="smenu-sep"></div>
  <div class="smenu-item" onclick="openGuildLeaderboard()">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/></svg>
    </span>
    <span data-i18n="menu_guild_war"></span>
  </div>
  <div class="smenu-sep"></div>
  <div class="smenu-item" onclick="window.location.href='/directory'">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/></svg>
    </span>
    <span data-i18n="menu_directory"></span>
  </div>
  <div class="smenu-item" onclick="window.location.href='/faq'">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/></svg>
    </span>
    <span data-i18n="menu_faq"></span>
  </div>
  <div class="smenu-item" onclick="window.location.href='/contact'">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/></svg>
    </span>
    <span data-i18n="menu_contact"></span>
  </div>
  <div class="smenu-item" onclick="closeSettings();showRandomFact()">
    <span class="smenu-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"><path d="M8 1a5 5 0 0 0-2.5 9.33c.4.24.6.63.6 1V13h4v-1.67c0-.37.2-.76.6-1A5 5 0 0 0 8 1z"/><rect x="6" y="13.3" width="4" height="1.2" rx="0.5"/><rect x="6.4" y="14.6" width="3.2" height="1" rx="0.5"/></svg>
    </span>
    <span data-i18n="menu_facts"></span>
  </div>
  <div class="smenu-sep"></div>
  <div class="smenu-lang-row">
    <div class="smenu-lang-item" onclick="setLang('de')">
      <span aria-hidden="true">🇩🇪</span>
      <span data-i18n="menu_lang_de"></span>
    </div>
    <div class="smenu-lang-divider"></div>
    <div class="smenu-lang-item active" onclick="setLang('en')">
      <span aria-hidden="true">🇬🇧</span>
      <span data-i18n="menu_lang_en"></span>
    </div>
  </div>
</div>

<div class="fab-panel" id="panel-share" style="bottom:6.25rem;right:1.5rem">
  <div class="panel-item" onclick="shareNative()">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16">
        <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/>
      </svg>
    </span> 
    <span data-i18n="share_system">System</span>
  </div>
  
  <div class="panel-sep" style="height:1px;background:var(--glass-border);margin:2px 0"></div>
  
  <div class="panel-item" onclick="shareSocial('whatsapp')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
        <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
      </svg>
    </span> WhatsApp
  </div>
  <div class="panel-item" onclick="shareSocial('telegram')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
      </svg>
    </span> Telegram
  </div>
  <div class="panel-item" onclick="shareSocial('facebook')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
      </svg>
    </span> Facebook
  </div>
  <div class="panel-item" onclick="shareSocial('twitter')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
        <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
      </svg>
    </span> Twitter
  </div>
  <div class="panel-item" onclick="shareSocial('pinterest')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-pinterest" viewBox="0 0 16 16">
        <path d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z"/>
      </svg>
    </span> Pinterest
  </div>
  <div class="panel-item" onclick="shareSocial('reddit')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16">
        <path d="M6.167 8a.831.831 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661zm1.843 3.647c.315 0 1.403-.038 1.976-.611a.232.232 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83.458 0 .83-.381.83-.83a.831.831 0 0 0-1.66 0z"/>
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.992l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869l-1.901-.407a.208.208 0 0 0-.253.14l-.62 2.904c-1.329.04-2.528.424-3.358 1.028-.22-.216-.516-.34-.835-.34-.679 0-1.229.544-1.229 1.231 0 .426.22.812.556 1.036-.026.182-.04.364-.04.549 0 2.541 2.825 4.601 6.31 4.601 3.486 0 6.31-2.06 6.31-4.601 0-.19-.015-.37-.042-.55.335-.223.555-.609.555-1.035 0-.687-.55-1.231-1.23-1.231z"/>
      </svg>
    </span> Reddit
  </div>
  <div class="panel-item" onclick="shareSocial('email')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
        <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
      </svg>
    </span> Email
  </div>
  <div class="panel-item" onclick="shareSocial('sms')">
    <span class="pi">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chat-dots-fill" viewBox="0 0 16 16">
        <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
      </svg>
    </span> SMS
  </div>
</div>

<div class="fab-panel" id="panel-theme">
  <div class="panel-item" onclick="setTheme('auto')">
    <span class="pi">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
      <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>
    </svg>
  </span> <span data-i18n="theme_auto"></span></div>
  <div class="panel-item" onclick="setTheme('dark')"><span class="pi">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-moon-stars-fill" viewBox="0 0 16 16">
      <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
      <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/>
    </svg>
  </span> <span data-i18n="theme_dark"></span></div>
  <div class="panel-item" onclick="setTheme('light')"><span class="pi">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-sun-fill" viewBox="0 0 16 16">
      <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
    </svg>
  </span> <span data-i18n="theme_light"></span></div>
</div>

<div class="modal-bg" id="game-modal-bg">
  <div class="modal-box" style="max-width:480px">
    <div class="modal-box-inner" style="padding:1rem">
      <div id="game-mode-select">
        <h2 style="text-align:center;margin-bottom:1.2rem" id="game-modal-title"></h2>
        <p style="text-align:center;font-size:.85rem;color:var(--text2);margin-bottom:1.5rem">
          <span id="game-modal-subtitle"></span>
        </p>
        <div style="display:flex;gap:1rem;justify-content:center">
          <button class="btn btn-submit" onclick="startGame('snake')" style="font-size:1rem;padding:.7rem 1.5rem" data-i18n="game_btn_snake"></button>
          <button class="btn btn-submit" onclick="startGame('pong')"  style="font-size:1rem;padding:.7rem 1.5rem" data-i18n="game_btn_pong"></button>
        </div>
        <div id="game-stats-display" style="margin-top:1.1rem;gap:1.5rem;justify-content:center;font-size:.78rem;color:var(--text3)">
          <span id="game-stats-snake"></span>
          <span id="game-stats-pong"></span>
        </div>
        <div style="display:flex;justify-content:center;margin-top:1rem">
          <button class="btn btn-cancel" onclick="closeGame()" data-i18n="game_close" style="flex:none"></button>
        </div>
      </div>
      <div id="game-area" style="display:none">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem">
          <span id="game-title" style=";font-size:1rem"></span>
          <span id="game-score" style="font-size:.85rem;color:var(--accent)"></span>
          <button class="btn btn-cancel" style="padding:.2rem .6rem;font-size:.75rem" onclick="closeGame()">✕</button>
        </div>
        <canvas id="game-canvas" width="440" height="340" style="width:100%;border-radius:10px;display:block;background:#0a0a12"></canvas>
        <div id="game-controls" style="text-align:center;margin-top:.5rem;font-size:.75rem;color:var(--text3)"></div>
        <div id="game-record-hint" style="text-align:center;margin-top:.25rem;font-size:.72rem;color:var(--text3);opacity:.7"></div>
        <div id="game-dpad" style="display:none;margin-top:.8rem">
          <div style="display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:4px;justify-content:center">
            <div></div>
            <button class="dpad-btn" onclick="dpadPress('up')">▲</button>
            <div></div>
            <button class="dpad-btn" onclick="dpadPress('left')">◀</button>
            <div></div>
            <button class="dpad-btn" onclick="dpadPress('right')">▶</button>
            <div></div>
            <button class="dpad-btn" onclick="dpadPress('down')">▼</button>
            <div></div>
          </div>
        </div>
        <div id="game-pong-controls" style="display:none;margin-top:.8rem">
          <div style="display:flex;gap:.5rem;justify-content:center">
            <button class="dpad-btn" onpointerdown="pongMoveDir=-1" onpointerup="pongMoveDir=0">▲</button>
            <button class="dpad-btn" onpointerdown="pongMoveDir=1"  onpointerup="pongMoveDir=0">▼</button>
          </div>
        </div>
      </div>
      <div id="game-win" style="display:none;text-align:center">
        <div style="font-size:3rem;margin-bottom:.5rem">🏆</div>
        <h2 style="margin-bottom:.5rem" data-i18n="game_won_title"></h2>
        <p style="color:var(--text2);font-size:.88rem;margin-bottom:1.2rem" id="game-won-text"></p>
        <div id="game-win-cells" style="display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.2rem"></div>
        <div style="display:flex;justify-content:center">
          <button class="btn btn-cancel" onclick="closeGame()" data-i18n="game_won_later" style="flex:none"></button>
        </div>
      </div>
      <div id="game-already-won" style="display:none;text-align:center">
        <div style="font-size:3rem;margin-bottom:.5rem">✅</div>
        <h2 data-i18n="game_already_won"></h2>
        <p style="color:var(--text2);font-size:.88rem;margin-bottom:1.2rem" data-i18n="game_already_won_text"></p>
        <div style="display:flex;justify-content:center">
          <button class="btn btn-cancel" onclick="closeGame()" data-i18n="game_ok" style="flex:none"></button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>window._isLoggedIn=false;window.T={"hud":"Drag \/ Swipe to navigate","close":"Close","submit":"Submit","cancel":"Cancel","submitting":"Submitting…","reserved_status":"Reserved","reserved_title":"Play to claim","reserved_cell":"Win the mini-game - this exhibit cell is yours forever.","in_review":"Under review","tip_collection":"Collection: ","menu_my_account":"My Account","menu_search":"Search","menu_teleport":"Random exhibit","menu_latest":"Latest entries","menu_heatmap":"Heatmap","menu_minimap":"Minimap","menu_3d":"3D View","menu_live":"Live Cursors","menu_tour":"Museum Tour","menu_nightmode":"Night at the Museum","menu_imprint":"Imprint","menu_privacy":"Privacy","menu_terms":"Terms of Use","menu_faq":"FAQ","menu_contact":"Contact","menu_facts":"Did you know?","menu_guild_war":"Collections","menu_directory":"Directory","menu_tools_settings":"Tools & Settings","menu_legal_notes":"Legal notes","menu_remember_pos":"Remember position","menu_bw":"Black & White Mode","menu_lang_de":"Deutsch","menu_lang_en":"English","center_tooltip":"Webseum opened its doors in May 2026. Early exhibits live closest to the centre.","live_online":"online","live_connecting":"connecting…","cells_claimed":"Exhibits","empty_cell_title":"Open Exhibit","claim_btn":"Claim Exhibit","visit_btn":"Visit Exhibit","faq_learn_more":"Learn more","theme_auto":"Auto","theme_dark":"Dark","theme_light":"Light","heatmap_on":"Heatmap active","game_cell_title":"Play for ({x}, {y})","game_plays":"plays","game_record":"Record:","game_sessions":"sessions played","game_subtitle":"Reach \u003Cstrong\u003E50 points\u003C\/strong\u003E to claim this exhibit.","game_won_title":"You won!","game_won_text":"The exhibit at ({x}, {y}) is yours - claim it now.","game_claim_btn":"Claim exhibit","game_won_later":"Later","game_already_won":"Already claimed today","game_already_won_text":"You can only win one exhibit per day.","game_ok":"OK","game_no_cells":"This exhibit is already taken.","game_tap_hint":"🎮 Tap again to play","game_snake_controls":"Arrow keys - Eat red dots","game_pong_controls":"W\/S - Don't miss the ball","game_score":"Score","game_target":"Goal","game_over":"Game Over","game_btn_snake":"Snake","game_btn_pong":"Pong","game_close":"Close","info_title":"Welcome to the Webseum","info_body":"\u003Cp\u003E\u003Cstrong\u003EWebseum\u003C\/strong\u003E is an infinite digital museum where every website gets its own exhibit. Not a ranking. Not an algorithm. Just a permanent place on the canvas of the web.\u003C\/p\u003E\u003Cp\u003E\u003Cstrong\u003EWebseum is not an archive of the past, but a living exhibition of the web.\u003C\/strong\u003E\u003C\/p\u003E\u003Cp\u003EThink of it as a museum you can explore forever - scrolling through real projects, real people, real ideas. Every cell is a permanent exhibit. Once claimed, it stays. No expiry. No auction. No algorithm pushing you out.\u003C\/p\u003E\u003Cp\u003EEvery exhibit is manually reviewed to preserve the quality of the museum.\u003C\/p\u003E\u003Cp\u003EThe curator? You. The exhibit? Your website, your project, your idea - displayed exactly where you choose, for as long as the web exists.\u003C\/p\u003E\u003Cp\u003EEarly visitors hang close to the center. Latecomers fill the edges. Just like in any great museum, the best spots go first.\u003C\/p\u003E\u003Cp\u003E\u003Cstrong\u003EClaim your exhibit. Free. Forever.\u003C\/strong\u003E\u003C\/p\u003E","guild_war_title":"Collections","loading_leaderboard":"Loading...","jump_to":"Jump to ➔","no_alliances":"No alliances active yet.","could_not_load":"Could not load leaderboard.","did_you_know":"Did you know?","loading_history":"Loading history...","read_more":"Read more...","could_not_load_fact":"Could not load a fact right now.","mouse_found":"You found the museum mouse! 🎉","rare_drop":"🚨 RARE DROP at ({x}, {y})!","guild_war_active":"⚔️ Collection active: ","tactical_mode_on":"🎯 TACTICAL MODE ACTIVATED!","tactical_mode_off":"🏳️ TACTICAL MODE DEACTIVATED!","err_name":"Please enter a name.","err_url":"Please enter a valid URL.","err_captcha":"Please solve the math problem.","err_turnstile":"Please confirm you are not a robot.","err_legal":"Please confirm you are authorised.","err_email":"Invalid email.","err_img_size":"Image too large (max 5 MB).","err_img_type":"Invalid image type.","err_img_save":"Could not save image.","err_img_read":"Could not read image.","err_network":"Network error.","err_unknown":"Unknown error.","err_server":"Server error.","err_url_taken":"This URL is already registered.","err_email_taken":"This email address is already linked to an entry.","search_placeholder":"Search name or URL...","modal_title":"Claim exhibit ({x}, {y})","label_name":"Name","label_alliance":"Collection (optional)","success_text":"Exhibit submitted successfully! It will be visible after review.","ph_name":"Your project name","ph_alliance":"e.g. PixelKings","label_url":"URL","label_image":"Image","drop_text":"Drop image here or click","upload_hint":"JPG · PNG · GIF · WebP · SVG · max 5 MB","create_account_label":"Create account to manage this exhibit","create_account_hint":"You will receive an email with a password link.","label_account_email":"Account Email","ph_account_email":"name@example.com","legal_text":"I confirm that I am authorized to submit this site and have read and agree to the \u003Ca href=\"\/terms-of-use\" target=\"_blank\" title=\"Terms of Use\"\u003ETerms of Use\u003C\/a\u003E.","label_captcha":"Security Question","captcha_refresh":"Reload","success_account":"Check your inbox - we have sent you a link to set your password.","success_account_linked":"Your exhibit has been linked to your account.","guild_war_cells":"Cells","minimap_title":"Minimap","minimap_label":"Minimap","err_points":"Not enough points for this zone!","share_system":"System","share_title":"webseum.co | The Museum of the Web","share_text":"Discover the unique Museum of the Web!","share_copied":"Link copied to clipboard!","edit_success_hint":"Important: Save this link to edit your exhibit later:"};window.TURNSTILE_SITE_KEY="0x4AAAAAAE_kImMMuVFioXEZ";</script>
<script src="/js/webseum.min.js" defer></script>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onTurnstileLoad&render=explicit" defer></script>
</body>
</html>