Sitemiz Yapım Aşamasındadır

<!doctype html> <html lang="tr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Ragwell - Resmi Kanal</title> <meta name="description" content="Ragwell YouTube kanalı - Canlı yayın, bağış ve sosyal iletişim." /> <style> :root{--bg:#0f1724;--card:#0b1220;--accent:#ff6b35;--muted:#9aa6b2;color-scheme:dark} *{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:linear-gradient(180deg,#071021 0%,#0b1220 100%);color:#e6eef4;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px} .wrap{width:100%;max-width:1100px} header{display:flex;gap:16px;align-items:center;margin-bottom:18px} .logo{display:flex;align-items:center;gap:12px} .logo .badge{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),#ff9b66);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#071021} h1{margin:0;font-size:20px} .sub{color:var(--muted);font-size:13px;margin-top:2px} .grid{display:grid;grid-template-columns:1fr 360px;gap:18px} @media(max-width:880px){.grid{grid-template-columns:1fr} .right{order:2}} .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:16px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.6)} .live-embed{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000} .meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px} .meta .viewers{font-weight:700;color:var(--accent);font-size:18px} .desc{margin-top:12px;color:var(--muted);line-height:1.45} .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .btn{background:#072131;padding:8px 12px;border-radius:8px;color:#cfe8ff;text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,0.03)} .socials{display:flex;flex-direction:column;gap:10px} .stat{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)} footer{margin-top:18px;color:var(--muted);font-size:13px;text-align:center} .small{font-size:12px;color:var(--muted)} </style> </head> <body> <div class="wrap"> <header> <div class="logo"> <div class="badge">R</div> <div> <h1>Ragwell</h1> <div class="sub">Resmi YouTube kanalı · Canlı yayınlar ve duyurular</div> </div> </div> </header> <main class="grid"> <section class="card left"> <div id="liveCard"> <div class="live-embed" id="player">  </div> <div class="meta"> <div> <div id="liveTitle" style="font-weight:700">Canlı Yayın Başlığı</div> <div id="channelName" class="small">Ragwell</div> </div> <div style="text-align:right"> <div class="small">Anlık İzleyici</div> <div class="viewers" id="liveViewers">—</div> </div> </div> <div class="desc" id="chanDesc"> Kanal açıklaması yüklenecek... </div> <div class="links" id="donationLinks">  </div> </div> </section> <aside class="card right"> <div class="socials"> <div class="stat"> <div> <div style="font-weight:700" id="subsCount">—</div> <div class="small">Abone</div> </div> <div style="text-align:right"> <div style="font-weight:700" id="totalViews">—</div> <div class="small">Toplam İzlenme</div> </div> </div> <div class="card" style="padding:12px;"> <div style="font-weight:700;margin-bottom:8px">Sosyal Medya & İletişim</div> <div id="socialList">  </div> </div> <div class="card" style="padding:12px;"> <div style="font-weight:700;margin-bottom:8px">Hızlı Bağış</div> <div id="quickDonate" style="display:flex;gap:8px;flex-wrap:wrap">  </div> </div> </div> </aside> </main> <footer> <div class="small">© Ragwell · www.ragwell.com.tr</div> </footer> </div> <script> // ========== YAPILACAKLAR ========== // 1) Aşağıdaki üç değişkeni kendi bilgilerinizle doldurun: const API_KEY = "YOUR_YOUTUBE_DATA_API_KEY"; // <-- YouTube Data API v3 anahtarınız const CHANNEL_ID = "YOUR_CHANNEL_ID"; // <-- Kanal ID (ör: UCxxxxxxxx) const LIVE_VIDEO_ID = "YOUR_LIVE_VIDEO_ID_IF_ANY"; // <-- Eğer canlı yayının video id'si hazırsa. Yoksa JS canlı yayını otomatik bulmaya çalışacak. // 2) Bağış ve sosyal linklerinizi buraya düzenleyin: const DONATION_LINKS = [ { name: "PayPal", url: "https://paypal.me/example" }, { name: "Patreon", url: "https://patreon.com/example" }, { name: "BuyMeACoffee", url: "https://buymeacoffee.com/example" } ]; const SOCIALS = [ { name: "Twitter", url: "https://twitter.com/ragwell" }, { name: "Instagram", url: "https://instagram.com/ragwell" }, { name: "Discord", url: "https://discord.gg/example" }, { name: "E-posta", url: "mailto:contact@ragwell.com.tr" } ]; // ================================= // Helper: fetch JSON with error handling async function fetchJSON(url) { const res = await fetch(url); if (!res.ok) throw new Error('Network response was not ok'); return res.json(); } // Insert donation/social links UI function populateLinks() { const dcont = document.getElementById("donationLinks"); DONATION_LINKS.forEach(d => { const a = document.createElement("a"); a.href = d.url; a.target = "_blank"; a.rel="noopener"; a.className = "btn"; a.textContent = d.name; dcont.appendChild(a); }); const scont = document.getElementById("socialList"); SOCIALS.forEach(s => { const a = document.createElement("a"); a.href = s.url; a.target = "_blank"; a.rel="noopener"; a.className = "btn"; a.style.display = "inline-block"; a.style.marginBottom = "8px"; a.textContent = s.name; scont.appendChild(a); }); const qcont = document.getElementById("quickDonate"); DONATION_LINKS.slice(0,3).forEach(d=>{ const a = document.createElement("a"); a.href=d.url; a.target="_blank"; a.className="btn"; a.textContent = d.name; qcont.appendChild(a); }); } // Load YouTube IFrame embed (if live video id known or found) function insertYouTubeEmbed(videoId) { const player = document.getElementById('player'); player.innerHTML = ''; const iframe = document.createElement('iframe'); iframe.width = "100%"; iframe.height = "100%"; iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=0&rel=0"; iframe.frameBorder = "0"; iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"; iframe.allowFullscreen = true; player.appendChild(iframe); } // Get channel statistics and description async function loadChannelInfo() { const url = `https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics,brandingSettings&id=${CHANNEL_ID}&key=${API_KEY}`; const data = await fetchJSON(url); if (!data.items || data.items.length===0) throw new Error('Channel not found'); const ch = data.items[0]; document.getElementById('chanDesc').textContent = (ch.snippet && ch.snippet.description) ? ch.snippet.description : 'Açıklama yok.'; document.getElementById('channelName').textContent = ch.snippet.title || 'Ragwell'; document.getElementById('subsCount').textContent = ch.statistics.subscriberCount ? Number(ch.statistics.subscriberCount).toLocaleString() : '—'; document.getElementById('totalViews').textContent = ch.statistics.viewCount ? Number(ch.statistics.viewCount).toLocaleString() : '—'; } // Find active live video for the channel (if LIVE_VIDEO_ID boş ise) async function findLiveVideoId() { if (LIVE_VIDEO_ID && LIVE_VIDEO_ID !== "YOUR_LIVE_VIDEO_ID_IF_ANY") return LIVE_VIDEO_ID; // Search for live broadcasts from channel const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&eventType=live&type=video&maxResults=1&key=${API_KEY}`; const data = await fetchJSON(url); if (data.items && data.items.length>0) return data.items[0].id.videoId; return null; } // Get live viewers (concurrentViewers) and live title async function loadLiveStats(videoId) { if (!videoId) { document.getElementById('liveTitle').textContent = 'Şu anda canlı yayın yok'; document.getElementById('liveViewers').textContent = '—'; return; } // videos.list with part=liveStreamingDetails,snippet const url = `https://www.googleapis.com/youtube/v3/videos?part=liveStreamingDetails,snippet&id=${videoId}&key=${API_KEY}`; const data = await fetchJSON(url); if (!data.items || data.items.length===0) { document.getElementById('liveTitle').textContent = 'Canlı veri bulunamadı'; return; } const v = data.items[0]; const viewers = v.liveStreamingDetails && v.liveStreamingDetails.concurrentViewers ? v.liveStreamingDetails.concurrentViewers : null; document.getElementById('liveViewers').textContent = viewers ? Number(viewers).toLocaleString() : '—'; document.getElementById('liveTitle').textContent = v.snippet.title || 'Canlı Yayın'; insertYouTubeEmbed(videoId); } // Initialize page async function init() { populateLinks(); try { await loadChannelInfo(); } catch (err) { console.error('Channel fetch error', err); } try { const vid = await findLiveVideoId(); await loadLiveStats(vid); } catch (err) { console.error('Live fetch error', err); } // Periyodik güncelleme (ör: her 20 saniye) setInterval(async ()=>{ try { const vid = await findLiveVideoId(); await loadLiveStats(vid); } catch (err) { console.error('Periodic fetch error', err); } }, 20000); } // Run document.addEventListener('DOMContentLoaded', init); </script> </body> </html>