Forum - ⏰Onlinezähler - Forum Online-Timer & Browser Online-Timer Teil 1(2)

<!-- Anfang Online Timer -->
<style>
.onlinezeit-details {margin:10px 0 10px 40px; background:#222;color:#fff;border-radius:8px;box-shadow:0 0 6px rgba(0,0,0,.3); display:inline-flex; padding:0 10px; gap:5px;animation:onlinezeit-pulseClockAnim 2s infinite;}
.onlinezeit-time {font:bold 15px Arial;color:#fc6;text-shadow:0 0 2px rgba(200,200,200,.6);padding:10px 5px; line-height: 20px; }
.onlinezeit-uhr {white-space:nowrap;}
.onlinezeit-aktiv {white-space:nowrap;padding-left:3px;font:13px Arial;color:#ccc;line-height: 20px; }
 
.oz-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.oz-dialog { background: #222; color: #fff; padding: 20px 25px; border-radius: 10px; box-shadow: 0 0 12px rgba(0,0,0,.6); font: 15px Arial; text-align: center; min-width: 260px; animation:onlinezeit-pulseClockAnim 2s infinite;}
.oz-dialog button { margin: 10px 8px 0 8px; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font: bold 14px Arial; }
.oz-yes { background: #c33; color: #fff; }
.oz-no  { background: #555; color: #fff; }
  
.oz-info-spoiler {display:inline-flex; flex-direction: column; margin: 0 6px 10px 40px;padding: 8px;border: 1px solid #ccc;border-radius: 6px;background: #f9f9f9;font-size: 0.9em;}
.oz-info-spoiler ul {margin: 0!important;padding-left:20px !important;}
 
#oz-info-toggle {display: inline-flex;cursor: pointer;user-select: none;}
#oz-info-toggle:hover #oz-arrow {color: #ee1111 !important;}
#oz-arrow {display: flex; align-items: center; transition: transform 0.2s ease; color:#eeeeee; margin-left: 4px; margin-bottom:5px; }
#oz-arrow.open { transform: rotate(180deg); }
#oz-reset-btn { display: inline-block; cursor: pointer;}
#oz-reset-btn:hover .onlinezeit-uhr span:nth-child(2) { filter: saturate(50) grayscale(100%);}
#oz-reset-btn:hover .onlinezeit-aktiv { color:#fc6;}
 
@keyframes onlinezeit-pulseClockAnim {0%,100%{box-shadow:0 0 8px rgba(250,250,250,.3)}50%{box-shadow:0 0 16px rgba(250,250,250,.7)}}
@media (max-width: 900px) {.onlinezeit-details {margin:10px 0 20px 0;}.oz-info-spoiler {margin: 0 6px 20px 5px;}}
</style>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  const $ = jQuery;
 
  /* ---------------------------------------------------------
     Speicher
  --------------------------------------------------------- */
  const load = () => JSON.parse(localStorage.getItem("oz_days") || "{}");
  const save = d => localStorage.setItem("oz_days", JSON.stringify(d));
  let days = load();
 
  /* ---------------------------------------------------------
     TAB-ID + HEARTBEAT
  --------------------------------------------------------- */
  const tabId = "oz_tab_" + Math.random().toString(36).slice(2);
 
  setInterval(() => {
    localStorage.setItem("oz_heartbeat_" + tabId, Date.now());
  }, 5000);
 
  function getAliveTabs() {
    const now = Date.now();
    const alive = [];
    for (let key in localStorage) {
      if (key.startsWith("oz_heartbeat_")) {
        const t = parseInt(localStorage.getItem(key), 10);
        if (now - t < 10000) alive.push(key.replace("oz_heartbeat_", ""));
      }
    }
    return alive.sort();
  }
 
  function isMaster() {
    const alive = getAliveTabs();
    return alive.length && alive[0] === tabId;
  }
 
  function cleanupDeadTabs() {
    const now = Date.now();
    for (let key in localStorage) {
      if (key.startsWith("oz_heartbeat_")) {
        const t = parseInt(localStorage.getItem(key), 10);
        if (now - t > 20000) localStorage.removeItem(key);
      }
    }
  }
  setInterval(cleanupDeadTabs, 10000);
 
  /* ---------------------------------------------------------
     Helfer
  --------------------------------------------------------- */
  const todayISO = () => new Date().toISOString().slice(0,10);
  const yesterdayISO = () => {
    let d = new Date();
    d.setDate(d.getDate() - 1);
    return d.toISOString().slice(0,10);
  };
  const fmt = ms => {
    let m = (ms/60000)|0, h = (m/60)|0;
    return String(h).padStart(2,"0")+":"+String(m%60).padStart(2,"0");
  };
 
  let lastTick = Date.now();
  let lastDay = todayISO();
  
  function cleanup() {save(days);}
 
  /* ---------------------------------------------------------
     TICK (nur Master zählt!)
  --------------------------------------------------------- */
  function tick() {
    if (!isMaster()) return;
 
    let now = Date.now();
    let diff = now - lastTick;
    lastTick = now;
 
    if (diff > 0 && diff < 60000) {
      let t = todayISO();
 
      if (t !== lastDay) {
        if (!days[t]) days[t] = 0;
        lastDay = t;
      }
 
      days[t] += diff;
      save(days);
      updateUI();
    }
    cleanup();
  }
 
  /* ---------------------------------------------------------
     Anzeige
  --------------------------------------------------------- */
  function updateUI() {
    days = load();
 
    let t = todayISO();
    let y = yesterdayISO();
    let total = Object.values(days).reduce((a,b)=>a+b,0);
    let today = days[t] || 0;
    let yesterday = days[y] || 0;
    let activeDays = Object.keys(days).length;
 
    $("[data-oz-total]").text(fmt(total));
    $("[data-oz-active]").text(activeDays);
    $("[data-oz-today]").text(fmt(today));
    $("[data-oz-yesterday]").text(fmt(yesterday));
  }
 
  /* ---------------------------------------------------------
     RESET DIALOG
  --------------------------------------------------------- */
  function showResetDialog() {
    const dialog = `
    <div class="oz-dialog-overlay">
      <div class="oz-dialog">
        <div>Onlinezeit neu starten?</div>
        <button class="oz-yes">Ja</button>
        <button class="oz-no">Nein</button>
      </div>
    </div>`;
 
    $("body").append(dialog);
    $(".oz-no").on("click", () => $(".oz-dialog-overlay").remove());
    $(".oz-yes").on("click", () => {
      localStorage.removeItem("oz_days");
      let t = todayISO();
      days = { [t]: 0 };
      lastDay = t;
      save(days);
      updateUI();
      $(".oz-dialog-overlay").remove();
    });
  }
 
  $(document).on("click", "#oz-reset-btn", showResetDialog);
 
  /* ---------------------------------------------------------
     Anzeige einbinden
  --------------------------------------------------------- */
  const box = `
    <div class="onlinezeit-details">      
      <div class="onlinezeit-time" id="oz-reset-btn" title="Forum-Onlinezeit neu starten!">
        <span class="onlinezeit-uhr">&#9201;&#65039; Gesamt: <span data-oz-total>00:00</span> <span style="font: 15px Arial;">&#128465;&#65039;</span></span>
        <span class="onlinezeit-aktiv">(Aktive Tage: <span data-oz-active>0</span>)</span>
      </div>
      <div id="oz-info-toggle" title="Info zum Forum-Onlinezeitzähler">
        <div class="onlinezeit-time"><span class="onlinezeit-uhr">&#128197; Heute:</span> <span data-oz-today>00:00</span></div>
        <div class="onlinezeit-time"><span class="onlinezeit-uhr">&#128197; Gestern:</span> <span data-oz-yesterday>00:00</span></div>
        <span id="oz-arrow">&#9660;</span>
      </div>
    </div><br>
    <div class="oz-info-spoiler" style="display:none;"> 
      <strong>Wichtige Hinweise:</strong>
      <ul><li>Die Onlinezeiten sind Forum-Onlinezeiten, sie werden erfasst, solange mindestens ein Forum-TAB geöffnet ist.</li></ul>
    </div><br>
    <div class="oz-info-spoiler" style="display:none;"> 
      <ul><li>TAB's synchronisieren sich automatisch gegenseitig.</li>
      <li>Ein Reset löscht alle Forum-Onlinezeiten.</li>
      <li>Der Tageswechsel wird automatisch erkannt.</li>
      <li>Die Forum-Onlinezeiten werden im jeweiligen Browser gespeichert.</li>
      <li>Jeder Browser zeigt seine eigene Forum-Onlinezeit an.</li></ul>
    </div><br>
    <div class="oz-info-spoiler" style="display:none; margin-bottom:40px;">
        <ul><li>Zum Nachbau bitte hier schauen: <a href="https://www.hilfe-tricks-tipps.de/t2134f30-Onlinezaehler.html#msg7397">Forum-Onlinetimer</a></li></ul>
    </div>`;
 
  const target = $("#breadcrumbs, #activity_feed").first();
  if (target.length) target.before(box);
 
  $("#oz-info-toggle").on("click", function() {
    $(".oz-info-spoiler").slideToggle(150);
    $("#oz-arrow").toggleClass("open");
  });
 
  updateUI();
 
  window.addEventListener("storage", (e) => {
    if (e.key === "oz_days") {
      days = load();
      updateUI();
    }
  });
 
  setInterval(tick, 5000);
});
</script>
<!-- Ende Online Timer -->