donation page improvements

This commit is contained in:
Aliberk Sandıkçı 2023-11-24 23:47:05 +03:00
parent a045f8def3
commit 25c8d272f9
Signed by: asandikci
GPG Key ID: 25C67A03B5666BC1
3 changed files with 146 additions and 10 deletions

View File

@ -9,4 +9,34 @@
font-weight: 400;
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;
}

View File

@ -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>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>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><sup>ı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 ı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;
console.log("base64: " + cnt);
var lastjson= JSON.parse(atob(cnt));
console.log(lastjson);
var lastjson;
console.log(out);
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

View File

@ -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";