refactor: UX updates for donations page

This commit is contained in:
Aliberk Sandıkçı 2023-12-13 17:01:41 +03:00
parent e2d2d30482
commit 67cd3eff70
Signed by: asandikci
GPG key ID: 25C67A03B5666BC1
2 changed files with 27 additions and 19 deletions

View file

@ -66,13 +66,15 @@ if (!$_SERVER['DOCUMENT_ROOT']) {
<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>ıklama Kısmını <span style="font-weight:800;">Gözükmesini İstediğiniz İsim - Bağış</span> şeklinde doldurunuz. Anonim Kalmak için <span style="font-weight:800;">Anonim - Bağış</span> Yazabilirsiniz</sup></div> <div><sup>ıklama Kısmını <span style="font-weight:800;">Gözükmesini İstediğiniz İsim - Bağış</span> şeklinde doldurunuz. Anonim Kalmak için <span style="font-weight:800;">Anonim - Bağış</span> Yazabilirsiniz</sup></div>
<br><hr style="width: 100%;"><br>
<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></div>
<p id="next-todo" style="margin-top:0px; margin-bottom:0px;font-size:15px;">Sırada Yapılacaklar: <b><span id="sirada-yapilacaklar"></span></b><br></p> <p id="next-todo" style="margin-top:0px; margin-bottom:0px;font-size:15px;">Sırada Yapılacaklar: <b><span id="sirada-yapilacaklar"></span></b><br></p>
<p><a href="../iflpanel/path.php" style="border:solid 1px orange; border-radius:10px; padding: 10px; background-color:royalblue; font-weight:800; color:orange">&#x1F449; Yol Haritası &#x1F448;</a></p> <p><a href="../iflpanel/path.php" style="border:solid 1px orange; border-radius:10px; padding: 10px; background-color:royalblue; font-weight:800; color:orange">&#x1F449; Yol Haritası &#x1F448;</a></p>
<hr style="width: 100%;"><br>
<h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800; margin-top:1px; margin-bottom:1px;">Bağışçılar</h1> <br><hr style="width: 100%;"><br>
<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> <h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800; margin-top:1px; margin-bottom:1px;">Bağışçılar</h1>
</div>
<div id="bagiscilar" style="text-align: left;"></div> <div id="bagiscilar" style="text-align: left;"></div>
<br> <br>
@ -160,50 +162,50 @@ if (!$_SERVER['DOCUMENT_ROOT']) {
document.getElementById(curId).style.fontWeight = "500"; document.getElementById(curId).style.fontWeight = "500";
if (s.amount <= 10) { if (s.amount <= 10) {
document.getElementById(curId).style.color = "grey"; document.getElementById(curId).style.color = "grey";
document.getElementById(curId).style.fontSize = "10px"; document.getElementById(curId).style.fontSize = "12px";
} else if (s.amount <= 20) { } else if (s.amount <= 20) {
document.getElementById(curId).style.color = "white"; document.getElementById(curId).style.color = "white";
document.getElementById(curId).style.fontSize = "12px"; document.getElementById(curId).style.fontSize = "14px";
} else if (s.amount <= 30) { } else if (s.amount <= 30) {
document.getElementById(curId).style.color = "orange"; document.getElementById(curId).style.color = "orange";
document.getElementById(curId).style.fontSize = "14px"; document.getElementById(curId).style.fontSize = "16px";
} else if (s.amount <= 40) { } else if (s.amount <= 40) {
document.getElementById(curId).style.color = "yellow"; document.getElementById(curId).style.color = "yellow";
document.getElementById(curId).style.fontSize = "16px"; document.getElementById(curId).style.fontSize = "18px";
} else if (s.amount <= 50) { } else if (s.amount <= 50) {
document.getElementById(curId).style.color = "purple"; document.getElementById(curId).style.color = "purple";
document.getElementById(curId).style.fontSize = "18px"; document.getElementById(curId).style.fontSize = "20px";
} else if (s.amount <= 60) { } else if (s.amount <= 60) {
document.getElementById(curId).style.color = "red"; document.getElementById(curId).style.color = "red";
document.getElementById(curId).style.fontSize = "20px"; document.getElementById(curId).style.fontSize = "22px";
} else if (s.amount <= 70) { } else if (s.amount <= 70) {
document.getElementById(curId).style.color = "black"; document.getElementById(curId).style.color = "black";
document.getElementById(curId).style.fontSize = "22px"; document.getElementById(curId).style.fontSize = "24px";
} else if (s.amount <= 80) { } else if (s.amount <= 80) {
document.getElementById(curId).style.color = "#cc00ff"; document.getElementById(curId).style.color = "#cc00ff";
document.getElementById(curId).style.fontSize = "24px"; document.getElementById(curId).style.fontSize = "26px";
} else if (s.amount <= 90) { } else if (s.amount <= 90) {
document.getElementById(curId).style.color = "#ff6e95"; document.getElementById(curId).style.color = "#ff6e95";
document.getElementById(curId).style.fontSize = "26px"; document.getElementById(curId).style.fontSize = "28px";
} else if (s.amount <= 100) { } else if (s.amount <= 100) {
document.getElementById(curId).style.color = "#cc3300"; document.getElementById(curId).style.color = "#cc3300";
document.getElementById(curId).style.fontSize = "28px"; document.getElementById(curId).style.fontSize = "30px";
document.getElementById(curId).style.fontWeight = "500"; document.getElementById(curId).style.fontWeight = "500";
} else if (s.amount <= 150) { } else if (s.amount <= 150) {
document.getElementById(curId).style.color = "#00cc00"; document.getElementById(curId).style.color = "#00cc00";
document.getElementById(curId).style.fontSize = "30px"; document.getElementById(curId).style.fontSize = "32px";
document.getElementById(curId).style.fontWeight = "600"; document.getElementById(curId).style.fontWeight = "600";
} else if (s.amount <= 200) { } else if (s.amount <= 200) {
document.getElementById(curId).style.color = "#0066ff"; document.getElementById(curId).style.color = "#0066ff";
document.getElementById(curId).style.fontSize = "32px"; document.getElementById(curId).style.fontSize = "34px";
document.getElementById(curId).style.fontWeight = "700"; document.getElementById(curId).style.fontWeight = "700";
} else if (s.amount <= 300) { } else if (s.amount <= 300) {
document.getElementById(curId).style.color = "#ffff00"; document.getElementById(curId).style.color = "#ffff00";
document.getElementById(curId).style.fontSize = "34px"; document.getElementById(curId).style.fontSize = "36px";
document.getElementById(curId).style.fontWeight = "800"; document.getElementById(curId).style.fontWeight = "800";
} else { } else {
document.getElementById(curId).style.color = "#ffff00"; document.getElementById(curId).style.color = "#ffff00";
document.getElementById(curId).style.fontSize = "36px"; document.getElementById(curId).style.fontSize = "38px";
document.getElementById(curId).style.fontWeight = "900"; document.getElementById(curId).style.fontWeight = "900";
document.getElementById(curId).style.textDecoration = "underline"; document.getElementById(curId).style.textDecoration = "underline";
} }

View file

@ -4,5 +4,11 @@
"amount": 10, "amount": 10,
"place": 1, "place": 1,
"webpage": "" "webpage": ""
},
{
"name": "Aziz K***",
"amount": 10,
"place": 2,
"webpage": ""
} }
] ]