Forum - Fehlersuche: News, Forum-Zeitung - 2

<style>
.counter {
  position: absolute;
  top:25px;
  left:25px;
  display:flex;
  font-family: 'Open Sans', sans-serif;
  opacity:0.8;
  * {
    overflow:hidden;
  }
  .tot {
    background-color:#000;
    color:rgba(255,255,255,0);
    padding:0px 6px 1px 6px;
    font-size:24px;
    transition:.5s ease, color .25s ease;
    width:0px;
  }
  .name {
    color:rgba(0,0,0,0);
    height:34px;
    font-size:24px;
    padding:0px 6px 1px 6px;
    background-color:#E5E5E5;
    box-shadow:inset 0 -4px 0 0 #E7501E;
    transition:.5s ease, color .25s ease;
    width:0px;
  }
}
.secret {
  top:25px;
  left:25px;
  display:flex;
  font-family: 'Open Sans', sans-serif;
  opacity:0;
  .sectot {
    background-color:#000;
    color:#fff;
    padding:0px 6px 1px 6px;
    font-size:24px;
    transition:width 1.5s ease, color 1.5s ease;
  }
  .secname {
    height:34px;
    position: relative;
    font-size:24px;
    padding:0px 6px 1px 6px;
    background-color:#E5E5E5;
    box-shadow:inset 0 -4px 0 0 #E7501E;
    transition:width 1.5s ease, color 1.5s ease;
  }
}  
</style>  
<!-- Eigene Seite mit Spendeninfos -->
<a href="https://le-dernier-du-clan-loreth.xobor.de/donations.html">
  
<div class="counter">
  <div class="tot">�</div>
  <div class="name"></div>
</div>
</a>
 
<!-- Weil ich kann :O) -->
<div class="secret"><div class="sectot">�</div><div class="secname"></div></div> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<script>
//bei der zahl 5 kann man den betrag angeben der gepsendet wurde  
//bei   "(Annonymous)" kann der Spender eingetragen werden.
var donations = [
  [5, "(Annonymous)"],
  [5, "(Annonymous)"],
  [5, "(Annonymous)"],
  [5, "(Annonymous)"],
  [5, "Lui"],
  
];
var donationnumber = -1;
//Hier kann man den guthaben angeben den man schon hat also geldbetrag.
//hat mann keins setzt man es auf null.  
var total = 0;
 
init();
 
//setTimeout(loadname,5000);
//setTimout(setloading())
 
function init() {
  $(".sectot").text("Total");
  $(".tot").css("color", "rgba(255,255,255,0)");
  $(".tot").css("width", ($(".sectot").width() + "px"));
  setTimeout(function(){$(".tot").text("Total");},500);
  setTimeout(function(){$(".tot").css("color", "rgba(255,255,255,1)");},500);
  $(".secname").text("$" + addCommas(total));
  $(".name").css("color", "rgba(0,0,0,0)");
  $(".name").css("width", ($(".secname").width() + "px"));
  setTimeout(function(){$(".name").text("$" + addCommas(total));},500);
  setTimeout(function(){$(".name").css("color", "rgba(0,0,0,1)");},500);
  donationnumber++;
  setTimeout(loadname,3000);
}
 
function loadname() {
  if (donationnumber < donations.length) {
    $(".sectot").text("$" + donations[donationnumber][0]);
    $(".tot").css("color", "rgba(255,255,255,0)");
    $(".tot").css("width", ($(".sectot").width() + "px"));
    setTimeout(function(){$(".tot").text("$" + donations[donationnumber][0]);},500);
    setTimeout(function(){$(".tot").css("color", "rgba(255,255,255,1)");},500);/**/
    
    
    $(".secname").text(donations[donationnumber][1]);
    //alert($(".secname").width());
    $(".name").css("color", "rgba(0,0,0,0)");
    $(".name").css("width", ($(".secname").width() + "px"));
    setTimeout(function(){$(".name").text(donations[donationnumber][1]);},500);
    setTimeout(function(){$(".name").css("color", "rgba(0,0,0,1)");},500);
    
    setTimeout(function(){total += donations[donationnumber][0];},1000);
    if (donations[donationnumber][0] >= 1000) {
      setTimeout(init,8000);
    } else {
      setTimeout(init,4000);
    }
  }  
}
 
function setloading() {
  setInterval(loadname,4000);
}
 
function addCommas(n) {
  return (n + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}
 
   
</script>
 
 

<!--/* 
################################################################################
# COLLABORATION PROJECT 2026
# ----------------------------------------------------------------------------
# BASIS-CODE & INSPIRATION: Wolfgang (https://www.hilfe-tricks-tipps.de)
# WEITERENTWICKLUNG & DESIGN: Daishi
#
# Ein herzliches Dankeschön an Wolfgang für die großartige Unterstützung!
################################################################################
*/  -->
 
<style>
/* Schriftart Import */
@import url('https://fonts.googleapis.com');
 
:root { 
    --gold-main: #D4AF37; 
    --gold-soft: #F9E076; 
    --log-red: #ff4d4d; 
}
 
/* Haupt-Container */
.business-finance-box { 
    background: #151515; 
    border: 1px solid var(--gold-main); 
    border-radius: 12px; 
    padding: 20px; 
    max-width: 450px; 
    margin: 10px auto;
    color: #ffffff; 
    text-align: center; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
 
.business-title { 
    font-family: 'Orbitron', sans-serif; 
    color: var(--gold-main); 
    margin-bottom: 15px; 
    font-size: 14px; 
    letter-spacing: 2px;
    text-transform: uppercase;
}
 
/* Fortschrittsbalken-Bereich */
.finance-bar-container { margin-bottom: 20px; }
.finance-bar-info {
    display: flex; justify-content: space-between; font-size: 11px;
    color: #aaa; margin-bottom: 5px; font-family: 'Orbitron', sans-serif;
}
.finance-bar-bg { 
    background: #252525; height: 20px; border-radius: 10px; position: relative;
    overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.3);
}
.finance-bar-fill { background: linear-gradient(90deg, #A18830, var(--gold-main)); height: 100%; transition: width 1.5s ease-in-out; }
.finance-bar-percent {
    position: absolute; width: 100%; top: 0; left: 0; line-height: 20px;
    font-size: 11px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000;
}
 
/* Guthaben-Anzeige */
.finance-balance-display { 
    background: rgba(212, 175, 55, 0.05); border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px; padding: 12px; margin-bottom: 15px; 
}
.balance-value { font-size: 28px; color: var(--gold-soft); font-family: 'Orbitron', sans-serif; font-weight: bold; }
 
/* Ticker-Bereich */
.donor-ticker-area { font-size: 13px; height: 20px; margin-bottom: 15px; color: #ccc; }
 
/* Rotes Fenster (System-Logs) */
.static-log-red { 
    background: rgba(255, 77, 77, 0.08); padding: 10px; border-radius: 6px; 
    font-family: 'Courier New', monospace; font-size: 10px; color: var(--log-red); 
    border: 1px solid rgba(255, 77, 77, 0.2); margin-bottom: 15px; text-align: center; line-height: 1.4;
}
 
/* Der Transparenz-Block */
.transparency-box {
    background: rgba(0,0,0,0.5); padding:12px; border-radius:12px; font-size:10px; 
    border: 1px solid rgba(212,175,55,0.3); text-align:left; margin-top:10px;
    line-height: 1.4;
}
 
/* Button & Credits */
.finance-btn-gold { 
    display: inline-block; border: 1px solid var(--gold-main); color: var(--gold-main) !important; 
    padding: 8px 25px; border-radius: 4px; font-size: 11px; font-weight: bold; 
    text-transform: uppercase; text-decoration: none !important; margin-bottom: 10px;
}
.credits-small { font-size: 8px; color: #555; margin-top: 15px; text-transform: uppercase; letter-spacing: 1px; }
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function(){
    // =========================================================================
    // START: EINGABE-BEREICH (HIER KANNST DU ÄNDERUNGEN MACHEN)
    // =========================================================================
 
    // 1. SPENDER-LISTE (Eingänge)
    const donations = [
       {USER: "Jörg", Beitrag: 10.00}, 
       {USER: "Kirsten", Beitrag: 10.00}, 
       {USER: "Anja", Beitrag: 10.00}, 
       {USER: "Tina", Beitrag: 5.00}, 
       {USER: "Inge", Beitrag: 5.00} 
    ];
 
    // 2. ABZÜGE (Ausgänge)
    // WICHTIG: Jeder Eintrag in { } Klammern, getrennt durch ein KOMMA.
    const systemLogs = [
       {datum: "13.01.2026", text: "Profi Tarif (Januar)", wert: -13.90},
       
    ];
 
    // 3. FINANZ-ZIELE
    const spendenZiel = 166.80;   
    const spendenLink = "/donations.html"; 
 
    // =========================================================================
    // ENDE: EINGABE-BEREICH (AB HIER AUTOMATISCHE BERECHNUNG)
    // =========================================================================
 
    const fmt = a => a.toLocaleString("de-DE", {minimumFractionDigits: 2}) + " �";
    const sumSpenden = donations.reduce((s, d) => s + d.Beitrag, 0);
    const sumAbzuege = systemLogs.reduce((s, l) => s + l.wert, 0);
    const aktuellesGuthaben = sumSpenden + sumAbzuege; 
    const percent = Math.max(0, Math.min((aktuellesGuthaben / spendenZiel) * 100, 100)).toFixed(1);
    const currentYear = new Date().getFullYear();
 
    const boxHtml = `
        <div class="business-finance-box">
            <div class="business-title">System-Finanzstatus ${currentYear}</div>
            
            <div class="finance-bar-container">
                <div class="finance-bar-info"><span>Gedeckt: ${fmt(aktuellesGuthaben)}</span><span>Ziel: ${fmt(spendenZiel)}</span></div>
                <div class="finance-bar-bg">
                    <div class="finance-bar-fill" style="width: ${percent}%"></div>
                    <div class="finance-bar-percent">${percent}%</div>
                </div>
            </div>
 
            <div class="finance-balance-display">
                <div style="font-size:9px; text-transform:uppercase; color:#888; margin-bottom:4px; letter-spacing:1px;">Aktuelles Foren-Guthaben</div>
                <div class="balance-value">${fmt(aktuellesGuthaben)}</div>
            </div>
 
            <div class="donor-ticker-area" id="donor-ticker-target">Lädt Unterstützer...</div>
            <div class="static-log-red" id="log-ticker-target">Lädt System-Abrechnung...</div>
 
            <a href="${spendenLink}" class="finance-btn-gold">Unterstützen</a>
 
            <div class="transparency-box">
                <b style="color:var(--gold-soft); display:block; text-align:center; margin-bottom:5px;">FINANZ-TRANSPARENZ 2026</b>
                &#128737;&#65039; <b>System-Sicherheit:</b> Die Kosten werden direkt über das interne Xobor-Guthaben abgerechnet.<br><br>
                &#128142; <b>Zweckbindung:</b> Deine Unterstützung fließt zu 100% in die Profi-Lizenz, die werbefreie App-Nutzung und die Foren-Sicherheit.<br><br>
                &#128683; <b>Keine Privat-Entnahme:</b> Es erfolgt keine private Auszahlung an den Admin. Das Geld bleibt im System.
            </div>
            
            <div class="credits-small">Design: Daishi | Code: Wolfgang</div>
        </div>
    `;
 
    $('div#foverview_stat3').append(boxHtml);
 
    let sIdx = 0;
    function updateSpender() {
        const d = donations[sIdx];
        $('#donor-ticker-target').fadeOut(600, function(){
            $(this).html(`Unterstützung von <b style="color:white;">${d.USER}</b>: ${fmt(d.Beitrag)}`).fadeIn(600);
        });
        sIdx = (sIdx + 1) % donations.length;
    }
 
    let lIdx = 0;
    function updateLogs() {
        const l = systemLogs[lIdx];
        $('#log-ticker-target').fadeOut(600, function(){
            $(this).html(`SYSTEM-LOG | ${l.datum} | ${fmt(l.wert)} | ${l.text}`).fadeIn(600);
        });
        lIdx = (lIdx + 1) % systemLogs.length;
    }
 
    updateSpender(); setInterval(updateSpender, 7000);
    updateLogs(); setInterval(updateLogs, 10000);
});
</script>