donation page improvements

assets/css/extra_without_scss.css

@@ -10,3 +10,33 @@
   justify-self: center;
   font-size: medium;
 }
+
+#pprogress {
+  background-color: black;
+  border-radius: 13px;
+  /* (height of inner div) / 2 + padding */
+  padding: 3px;
+}
+
+#pprogress>span {
+  background-color: orange;
+  width: 40%;
+  /* Adjust with JavaScript */
+  height: 20px;
+  border-radius: 10px;
+}
+
+#pprogress::-moz-progress-bar {
+  background: orange;
+  border-radius: 10px;
+}
+
+#pprogress::-webkit-progress-value {
+  background: orange;
+  border-radius: 10px;
+}
+
+#pprogress {
+  color: orange;
+  border-radius: 10px;
+}

bagis/index.php

@@ -63,11 +63,40 @@ if (!$_SERVER['DOCUMENT_ROOT']) {
   <div class="main-scrollable">
     <article class="plain" style="text-align:center;align-items:center;">
       <h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800;">Bana Bi' Kahve Ismarla ☕</h1>
-      <div><span>IBAN:</span><span style="margin-top: 0px;text-decoration:none;"><b class="copy_element" id="IBAN" onclick="copy2Clipboard('IBAN')">TR63 0082 9000 0949 1444 3182 51</b><span id="IBAN-tip"></span></span></div>
+      <div><span>IBAN: </span><span style="margin-top: 0px;text-decoration:none;"> <b class="copy_element" id="IBAN" onclick="copy2Clipboard('IBAN')">TR63 0082 9000 0949 1444 3182 51</b><span id="IBAN-tip"></span></span></div>
-      <div><span>Papara Numarası:</span><span style="margin-top: 0px;text-decoration:none;"><b class="copy_element" id="Papara" onclick="copy2Clipboard('Papara')">14444318251</b><span id="Papara-tip"></span></span></div>
+      <div><span>Papara Numarası: </span><span style="margin-top: 0px;text-decoration:none;"> <b class="copy_element" id="Papara" onclick="copy2Clipboard('Papara')">14444318251</b><span id="Papara-tip"></span></span></div>
+      <div><sup>Açıklama Kısmını <code style="font-weight:800;">Gözükmesini İstediğiniz İsim - Bağış</code> şeklinde doldurunuz. Anonim Kalmak için <code style="font-weight:800;">Anonim - Bağış</code> Yazabilirsiniz</sup></div>
       <p></p>
       <hr style="width: 100%;"><br>
-      <h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800;">Bağışçılar</h1>
+      <h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800; ">Bağışçılar</h1>
+      <div id="current-goal"><label id="label1" for="pprogress">Sıradaki Hedef: </label><progress id="pprogress"><span></span></progress> <label id="label2" for="pprogress">x/y</label><br>
+        <p style="margin-top:0px;font-size:15px;">Sırada Yapılacaklar: Ders Programı Görüntüleme</p>
+      </div>
+      <div id="bagiscilar" style="text-align: left;"></div>
+
+      <br>
+      <hr style="width: 100%;"><br><br>
+      <h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800; margin-bottom: 0px;">Sponsorlar</h1>
+      <div id="sponsorlar">
+        <p>Henüz sponsorumuz bulunmamakta, sponsor olmak için <a href="mailto:contact@aliberksandikci.com.tr">mail</a> adresim üzerinden bana ulaşabilirsiniz.<br>
+          Sponsor olabileceğiniz projelerime <a href="https://github.com/asandikci">GitHub</a> veya <a href="https://git.aliberksandikci.com.tr">Forgejo</a> adresi üzerinden ulaşabilirsiniz.</p>
+      </div>
+      <br>
+      <hr style="width: 100%;"><br><br>
+      <h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800; margin-bottom: 0px;">Teşekkürler</h1>
+      <div id="tesekkurler">
+        <p style="text-align:left;">
+        <ul style="text-align:left;">
+          <li>Sitede ve projelerde kullanılan açık kaynak kodlu uygulamaların geliştiricilerine,</li>
+          <ul>
+            <li>YunoHost Geliştirici Topluluğuna,</li>
+            <li>Forgejo/Gitea Geliştirici Topluluğuna,</li>
+          </ul>
+          <li>Sunucularımızın ayakta kalmasına maddi/manevi destek olan tüm destekçilerimize,</li>
+        </ul>
+        <span style="font-weight:800;">Teşekür Ederiz</span>
+        </p>
+      </div>
     </article>
 
     <footer>
@@ -83,16 +112,93 @@ if (!$_SERVER['DOCUMENT_ROOT']) {
   } ?>
 
   <script>
+    let localtest = 0;
     let url = 'https://git.aliberksandikci.com.tr/api/v1/repos/asandikci.com/www/contents/donations.json';
+    // let url = "http://127.0.0.1:PORT/donations.json";
+    // localtest = 1;
 
     fetch(url)
       .then(res => res.json())
       .then(out => {
-        var cnt = out.content;
+        var lastjson;
-        console.log("base64: " + cnt);
+        console.log(out);
-        var lastjson= JSON.parse(atob(cnt));
-        console.log(lastjson);
 
+        if (localtest) {
+          lastjson = out;
+        } else {
+          var cnt = out.content;
+          console.log("base64: " + cnt);
+          lastjson = JSON.parse(atob(cnt));
+          console.log(lastjson);
+        }
+
+        lastjson.sort(function(a, b) {
+          return a.amount < b.amount;
+        });
+
+        var curAmount = 0;
+        for (let i = 0; i < lastjson.length; i++) {
+          const s = lastjson[i];
+          const curId = s.place + s.name;
+          document.getElementById("bagiscilar").innerHTML += "<p><span id='" + curId + "'>" + s.name + "</span> - <span id='" + curId + "amount'> " + s.amount + "₺<span></p>";
+          curAmount += s.amount;
+          document.getElementById(curId).style.fontWeight = "500";
+          if (s.amount <= 10) {
+            document.getElementById(curId).style.color = "grey";
+            document.getElementById(curId).style.fontSize = "10px";
+          } else if (s.amount <= 20) {
+            document.getElementById(curId).style.color = "white";
+            document.getElementById(curId).style.fontSize = "12px";
+          } else if (s.amount <= 30) {
+            document.getElementById(curId).style.color = "orange";
+            document.getElementById(curId).style.fontSize = "14px";
+          } else if (s.amount <= 40) {
+            document.getElementById(curId).style.color = "yellow";
+            document.getElementById(curId).style.fontSize = "16px";
+          } else if (s.amount <= 50) {
+            document.getElementById(curId).style.color = "purple";
+            document.getElementById(curId).style.fontSize = "18px";
+          } else if (s.amount <= 60) {
+            document.getElementById(curId).style.color = "red";
+            document.getElementById(curId).style.fontSize = "20px";
+          } else if (s.amount <= 70) {
+            document.getElementById(curId).style.color = "black";
+            document.getElementById(curId).style.fontSize = "22px";
+          } else if (s.amount <= 80) {
+            document.getElementById(curId).style.color = "#cc00ff";
+            document.getElementById(curId).style.fontSize = "24px";
+          } else if (s.amount <= 90) {
+            document.getElementById(curId).style.color = "#ff6e95";
+            document.getElementById(curId).style.fontSize = "26px";
+          } else if (s.amount <= 100) {
+            document.getElementById(curId).style.color = "#cc3300";
+            document.getElementById(curId).style.fontSize = "28px";
+            document.getElementById(curId).style.fontWeight = "500";
+          } else if (s.amount <= 150) {
+            document.getElementById(curId).style.color = "#00cc00";
+            document.getElementById(curId).style.fontSize = "30px";
+            document.getElementById(curId).style.fontWeight = "600";
+          } else if (s.amount <= 200) {
+            document.getElementById(curId).style.color = "#0066ff";
+            document.getElementById(curId).style.fontSize = "32px";
+            document.getElementById(curId).style.fontWeight = "700";
+          } else if (s.amount <= 300) {
+            document.getElementById(curId).style.color = "#ffff00";
+            document.getElementById(curId).style.fontSize = "34px";
+            document.getElementById(curId).style.fontWeight = "800";
+          } else if (s.amount <= 500) {
+            document.getElementById(curId).style.color = "#ffff00";
+            document.getElementById(curId).style.fontSize = "36px";
+            document.getElementById(curId).style.fontWeight = "900";
+            document.getElementById(curId).style.textDecoration = "underline";
+          }
+
+        }
+        let goalAmount = 100;
+        let progbar = document.getElementById("pprogress");
+        progbar.max = goalAmount;
+        progbar.value = curAmount;
+        progbar.labels[1].innerHTML = curAmount + "/" + goalAmount + "₺";
       })
       .catch(err => {
         throw err

iflpanel/tahta/assets/js/old_stopwatch.js

@@ -25,7 +25,7 @@ async function Stopwatch(action) {
       document.getElementById("start-cro").style.color = "greenyellow";
       document.getElementById("start-cro").style.borderTopColor = "greenyellow";
       document.getElementById("start-cro").style.borderLeftColor = "greenyellow";
-      await sleep(300);
+      await sleep(200);
       document.getElementById("start-cro").style.color = "grey";
       document.getElementById("start-cro").style.borderTopColor = "grey";
       document.getElementById("start-cro").style.borderLeftColor = "grey";
@@ -37,7 +37,7 @@ async function Stopwatch(action) {
       document.getElementById("stop-cro").style.color = "red";
       document.getElementById("stop-cro").style.borderTopColor = "red";
       document.getElementById("stop-cro").style.borderLeftColor = "red";
-      await sleep(300);
+      await sleep(200);
       document.getElementById("stop-cro").style.color = "white";
       document.getElementById("stop-cro").style.borderTopColor = "white";
       document.getElementById("stop-cro").style.borderLeftColor = "white";