ALemci44
User
- Katılım
- 30 Ara 2025
- Konular
- 23
- Mesajlar
- 94
- Beğeni
- 46
- Konum
- Küçükköy
- Web sitesi
- www.kucukkoyluler.com
Merhaba arkadaşlar,
hizliresim.com
Ramazan ayına özel olarak hazırladığım Türkiye İftar Sayacı widget’ını paylaşmak istedim!
Bu widget ile forumunuzun sidebar’ına kolayca ekleyebilir, kullanıcılarınıza canlı iftar saatlerini gösterebilirsiniz.
Özellikler:
Kullanımı:
Notlar:
a6y9j3s.jpeg - Hızlı Resim
Bu görsel, Hızlı Resim'e 18 Şubat 2026 tarihinde yüklendi, 1179×1241 piksel çözünürlüğünde, JPEG formatındadır. — ID: a6y9j3s
Ramazan ayına özel olarak hazırladığım Türkiye İftar Sayacı widget’ını paylaşmak istedim!
Bu widget ile forumunuzun sidebar’ına kolayca ekleyebilir, kullanıcılarınıza canlı iftar saatlerini gösterebilirsiniz.
Özellikler:
81 il için iftar saati ve geri sayım
Aktif şehir sayaçlı ve parlayan renk efekti
Hover efektli şehir listesi, aktif şehir vurgulu
Başlık ikonu küçültüldü, dernek yazısı parlayan yeşil
Scroll okları ile 10 şehir görünümü, liste kaydırılabilir
XenForo sidebar widget uyumlu, ekstra dosya gerekmez
İsteğe göre aktif şehir uyarısı ve sesli bildirim eklenebilir
Kullanımı:- Admin CP → görünüm ve diller → Widgets → Custom HTML Widget oluşturun.
- Widget’ı forum listesi sidebar pozisyonuna ekleyin.
- Kodun tamamını HTML alanına yapıştırın.
- Geliştirme modunu açarsanız değişiklikleri anında görebilirsiniz.
Notlar:- İlk yüklemede şehirler API üzerinden çekildiği için kısa süreli “yükleniyor…” görünebilir.
- Kod tamamen responsive ve XenForo temanızla uyumludur.
Kod:
<div style="
width:100%;
color:white;
font-family:Arial, sans-serif;
font-size:13px;
background:linear-gradient(180deg,#111,#1b1f3a);
padding:10px;
border-radius:12px;
box-sizing:border-box;
box-shadow:0 0 15px rgba(0,0,0,0.4);
">
<!-- Başlık -->
<div style="text-align:center;font-weight:bold;font-size:14px;margin-bottom:4px;">
🕌 <span style="font-size:12px;">TÜRKİYE İFTAR SAYAÇ</span>
</div>
<!-- Dernek yazısı parlayan yeşil -->
<div style="text-align:center;font-size:12px;margin-bottom:10px;color:#0f0; font-weight:bold; text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0;">
Küçükköylüler Sosyal Kültürel<br>
Yardımlaşma ve Dayanışma Derneği
</div>
<!-- Aktif şehir ve sayaç -->
<div id="activeCity" style="text-align:center;font-weight:bold;font-size:16px;">
İstanbul
</div>
<div id="bigCountdown" style="
font-weight:bold;
color:#ffd700;
text-align:center;
margin:6px 0 10px 0;
">Yükleniyor...</div>
<!-- Şehir listesi -->
<div id="cityList" style="max-height:220px;overflow:hidden;">Yükleniyor...</div>
<!-- Oklar aşağıda -->
<div style="text-align:center;margin-top:8px;">
<button onclick="scrollUp()">⬆</button>
<button onclick="scrollDown()">⬇</button>
</div>
</div>
<style>
/* Hover efekt ve aktif şehir glow animasyonu */
@keyframes glow {
0% {text-shadow: 0 0 2px #0f0;}
50% {text-shadow: 0 0 8px #0f0;}
100% {text-shadow: 0 0 2px #0f0;}
}
#cityList div:hover {
background: rgba(0,255,0,0.1);
animation: glow 1.5s infinite;
}
#cityList .activeCityItem {
background: rgba(0,255,0,0.25);
font-weight: bold;
color: #0f0;
animation: glow 2s infinite alternate;
}
/* XenForo sidebar uyumu */
.p-body-sidebar .block-body {
padding: 0 !important;
}
.p-body-sidebar button {
font-size: 11px;
padding: 2px 6px;
}
</style>
<script>
const cities = [
"İstanbul","Ankara","İzmir","Bursa","Antalya","Adana","Konya","Gaziantep","Şanlıurfa","Kocaeli",
"Adıyaman","Afyonkarahisar","Ağrı","Aksaray","Amasya","Ardahan","Artvin","Aydın","Balıkesir","Bartın",
"Batman","Bayburt","Bilecik","Bingöl","Bitlis","Bolu","Burdur","Çanakkale","Çankırı","Çorum",
"Denizli","Diyarbakır","Düzce","Edirne","Elazığ","Erzincan","Erzurum","Eskişehir","Giresun","Gümüşhane",
"Hakkari","Hatay","Iğdır","Isparta","Kahramanmaraş","Karabük","Karaman","Kars","Kastamonu","Kayseri",
"Kırıkkale","Kırklareli","Kırşehir","Kilis","Kütahya","Malatya","Manisa","Mardin","Mersin","Muğla",
"Muş","Nevşehir","Niğde","Ordu","Osmaniye","Rize","Sakarya","Samsun","Siirt","Sinop",
"Sivas","Şırnak","Tekirdağ","Tokat","Trabzon","Tunceli","Uşak","Van","Yalova","Yozgat","Zonguldak"
];
let iftarTimes = {};
let activeCity = "İstanbul";
let visibleStart = 0;
const visibleCount = 10;
// ✅ Paralel fetch ile tüm şehirleri aynı anda çek
async function fetchTimesParallel() {
const promises = cities.map(async city => {
try {
const url = `https://api.aladhan.com/v1/timingsByCity?city=${city}&country=Turkey&method=13`;
const res = await fetch(url);
const data = await res.json();
iftarTimes[city] = data.data.timings.Maghrib;
} catch(e) {
iftarTimes[city] = null;
}
});
await Promise.all(promises);
}
// Listeyi render et
function renderList(){
let html = "";
const slice = cities.slice(visibleStart, visibleStart + visibleCount);
slice.forEach(city=>{
const activeClass = (city === activeCity) ? 'activeCityItem' : '';
const leftText = iftarTimes[city] ? "--" : "Yükleniyor...";
html += `
<div onclick="setActiveCity('${city}')" class="${activeClass}"
style="cursor:pointer;padding:4px 0;display:flex;justify-content:space-between;">
<span>${city}</span>
<span id="left-${city}">${leftText}</span>
</div>
`;
});
document.getElementById("cityList").innerHTML = html;
}
// Scroll fonksiyonları
function scrollDown(){
if(visibleStart + visibleCount < cities.length){
visibleStart++;
renderList();
}
}
function scrollUp(){
if(visibleStart > 0){
visibleStart--;
renderList();
}
}
// Aktif şehir seç
function setActiveCity(city){
activeCity = city;
document.getElementById("activeCity").innerHTML = city;
renderList();
}
// Sayaçları güncelle
function updateCountdown(){
const now = new Date();
cities.forEach(city=>{
if(!iftarTimes[city]) return;
const [h,m] = iftarTimes[city].split(":");
const t = new Date();
t.setHours(h,m,0);
let diff = t - now;
const el = document.getElementById("left-"+city);
if(!el) return;
if(diff <= 0){
el.innerHTML = "🌙";
return;
}
let hours = Math.floor(diff/3600000);
let minutes = Math.floor((diff%3600000)/60000);
el.innerHTML = hours + "s " + minutes + "d";
});
if(iftarTimes[activeCity]){
const [h,m] = iftarTimes[activeCity].split(":");
const t = new Date();
t.setHours(h,m,0);
let diff = t - now;
if(diff <= 0){
document.getElementById("bigCountdown").innerHTML = "🌙 İFTAR VAKTİ!";
return;
}
let hours = Math.floor(diff/3600000);
let minutes = Math.floor((diff%3600000)/60000);
let seconds = Math.floor((diff%60000)/1000);
document.getElementById("bigCountdown").innerHTML =
"⏳ " + hours + "s " + minutes + "d " + seconds + "sn";
}
}
// Başlat
async function init(){
renderList(); // Önce Yükleniyor...
await fetchTimesParallel(); // Tüm şehirleri aynı anda çek
renderList(); // Artık saatler hazır
setInterval(updateCountdown,1000);
}
init();
</script>
