donation page improvements
This commit is contained in:
parent
a045f8def3
commit
25c8d272f9
GPG key ID:
25C67A03B5666BC1
3 changed files with 146 additions and 10 deletions
|
|
@ -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;
|
||||
}
|
||||
120
bagis/index.php
120
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>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>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;
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in a new issue