Ragwell - Resmi Kanal
: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)}
R
Ragwell
Resmi YouTube kanalı · Canlı yayınlar ve duyurular
Canlı Yayın Başlığı
Ragwell
Anlık İzleyici
—
Kanal açıklaması yüklenecek...
—
Abone
—
Toplam İzlenme
Sosyal Medya & İletişim
Hızlı Bağış
© Ragwell · www.ragwell.com.tr
<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>