🎮ArcadeLab

YouTube Simülasyonu

by GoldenRanger23
41 lines19.9 KB
▶ Play

<!DOCTYPE html>
<html lang="tr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>YouTube Simülasyonu</title>
<style>
:root{--bg:#fff;--panel:#fff;--text:#0f0f0f;--muted:#606060;--line:#e6e6e6;--chip:#f2f2f2;--hover:#eee;--red:#ff0033}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Arial,Helvetica,sans-serif}body.dark{--bg:#0f0f0f;--panel:#181818;--text:#f1f1f1;--muted:#aaa;--line:#333;--chip:#272727;--hover:#303030}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:transparent}button:hover{filter:brightness(.96)}.top{height:62px;position:fixed;z-index:20;top:0;left:0;right:0;background:var(--panel);display:flex;align-items:center;gap:15px;padding:0 18px}.brandbox{display:flex;align-items:center;gap:15px;min-width:220px}.icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:21px}.icon:hover{background:var(--hover)}.brand{font-weight:800;font-size:22px;letter-spacing:-1px;white-space:nowrap}.ytmark{display:inline-grid;place-items:center;background:#ff0033;color:white;border-radius:7px;width:34px;height:23px;font-size:14px;margin-right:4px;letter-spacing:0}.tr{font-size:9px;color:var(--muted);vertical-align:top;letter-spacing:0}.searcharea{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;max-width:720px;margin:auto}.searchbox{display:flex;align-items:center;height:42px;border:1px solid var(--line);border-radius:24px;overflow:hidden;flex:1;max-width:600px;background:var(--bg)}.searchbox input{border:0;outline:0;background:transparent;color:var(--text);padding:0 18px;flex:1;min-width:0;font-size:16px}.searchbtn{height:42px;width:65px;border-left:1px solid var(--line);background:var(--chip);font-size:22px}.mic{height:42px;width:42px;border-radius:50%;background:var(--chip);font-size:18px}.right{display:flex;gap:5px;align-items:center;margin-left:auto}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3ea6ff,#845ec2);color:white;font-weight:bold;display:grid;place-items:center}.layout{padding-top:62px}.sidebar{position:fixed;top:62px;bottom:0;left:0;width:225px;background:var(--panel);overflow:auto;padding:12px 12px;z-index:10}.nav{height:43px;width:100%;display:flex;align-items:center;gap:23px;border-radius:10px;padding:0 13px;text-align:left}.nav .ni{font-size:20px;width:22px;text-align:center}.nav:hover,.nav.active{background:var(--hover)}.nav.active{font-weight:bold}.sep{height:1px;background:var(--line);margin:13px 0}.navhead{font-weight:700;padding:9px 13px}.navnote{color:var(--muted);font-size:12px;line-height:1.6;padding:18px 13px}main{margin-left:225px;padding:0 24px 35px}.chips{height:66px;display:flex;align-items:center;gap:10px;background:var(--bg);position:sticky;top:62px;z-index:8;overflow:auto;white-space:nowrap;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{background:var(--chip);padding:9px 13px;border-radius:8px;font-weight:600;flex-shrink:0}.chip.on{background:var(--text);color:var(--bg)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 17px;padding-top:4px}.card{min-width:0;cursor:pointer}.thumb{aspect-ratio:16/9;position:relative;border-radius:12px;overflow:hidden;background:#ddd}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.duration{position:absolute;right:7px;bottom:7px;background:#000d;color:white;border-radius:4px;padding:3px 5px;font-size:12px;font-weight:bold}.info{display:flex;gap:11px;padding-top:11px}.chanavatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:bold;flex-shrink:0}.copy{flex:1;min-width:0}.title{font-size:15px;font-weight:700;line-height:1.38;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{color:var(--muted);font-size:12px;line-height:1.65}.dots{font-size:22px;color:var(--muted);align-self:flex-start}.sectiontitle{display:flex;align-items:center;gap:10px;font-size:22px;margin:15px 0 20px}.sectiontitle small{font-size:13px;color:var(--muted);font-weight:400}.shortgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.short{cursor:pointer;min-width:0}.short .thumb{aspect-ratio:9/16;border-radius:12px}.short .title{margin:8px 0 5px}.empty{text-align:center;padding:75px 20px;color:var(--muted)}.empty .symbol{font-size:48px;margin-bottom:12px}.primary{background:var(--text);color:var(--bg);font-weight:bold;border-radius:22px;padding:10px 17px}.redbtn{background:#ff0033;color:white;font-weight:bold;border-radius:22px;padding:10px 17px}.mobilebar{display:none}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,100px);opacity:0;background:#282828;color:white;padding:13px 19px;border-radius:9px;z-index:70;transition:.22s;box-shadow:0 4px 20px #0003}.toast.show{transform:translate(-50%,0);opacity:1}.overlay{display:none;position:fixed;inset:0;background:#000a;z-index:50;align-items:center;justify-content:center;padding:16px}.overlay.show{display:flex}.dialog{background:var(--panel);border-radius:15px;width:min(600px,100%);max-height:92vh;overflow:auto;padding:22px;box-shadow:0 10px 45px #0004}.dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.dh h2{font-size:21px;margin:0}.close{font-size:27px;width:38px;height:38px;border-radius:50%}.field{margin:15px 0}.field label{display:block;font-weight:bold;margin-bottom:7px}.field input,.field textarea,.field select{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text)}.field textarea{min-height:85px}.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.watchdialog{width:min(1050px,100%);padding:0;overflow:hidden}.watchlayout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.8fr);max-height:91vh;overflow:auto}.watchmain,.watchside{padding:17px;min-width:0}.watchside{border-left:1px solid var(--line)}.player{aspect-ratio:16/9;background:linear-gradient(135deg,#0b1a3c,#225778,#b94d47);border-radius:10px;display:grid;place-items:center;position:relative;overflow:hidden;color:white;cursor:pointer}.player:before{content:'▶';display:grid;place-items:center;width:72px;height:72px;background:#ff0033;border-radius:50%;font-size:35px;padding-left:5px}.playerlabel{position:absolute;bottom:13px;left:15px;font-size:12px;text-shadow:0 1px 4px #000}.watchtitle{font-size:20px;font-weight:bold;line-height:1.4;margin:14px 0}.channelrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.channelrow .chanavatar{width:43px;height:43px}.chaninfo{flex:1;min-width:100px}.chaninfo b{display:block}.chaninfo span{font-size:12px;color:var(--muted)}.pills{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.pill{background:var(--chip);padding:9px 13px;border-radius:22px;font-weight:bold}.description{padding:12px;border-radius:10px;background:var(--chip);font-size:13px;line-height:1.6}.commenthead{font-weight:bold;font-size:17px;margin:4px 0 12px}.comment{display:flex;gap:9px;margin:13px 0}.comment .chanavatar{width:32px;height:32px}.commenttext{min-width:0;flex:1}.comment p{margin:4px 0;line-height:1.4;overflow-wrap:anywhere}.muted{font-size:12px;color:var(--muted)}.commentinput{display:flex;gap:7px;margin:15px 0}.commentinput input{min-width:0;flex:1;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:9px}
@media(max-width:1100px){.sidebar{width:190px}main{margin-left:190px;padding:0 17px 30px}.brandbox{min-width:180px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shortgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.top{height:56px;padding:0 9px;gap:7px}.brandbox{min-width:auto}.brandbox>.icon{display:none}.brand{font-size:18px}.ytmark{width:29px;height:21px}.searchbox{height:38px}.searchbox input{font-size:14px;padding:0 12px}.searchbtn{height:38px;width:44px}.mic{width:38px;height:38px}.layout{padding-top:56px}.sidebar{top:56px;width:70px;padding:9px 4px}.nav{height:62px;flex-direction:column;gap:4px;justify-content:center;padding:5px 0;font-size:10px;text-align:center}.nav .ni{font-size:20px}.sep,.navhead,.navnote{display:none}main{margin-left:70px;width:calc(100% - 70px);padding:0 12px 25px}.chips{top:56px;height:57px;gap:8px}.chip{padding:8px 11px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}.info{gap:8px}.chanavatar{width:33px;height:33px}.title{font-size:14px}.dots{display:none}.shortgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.watchlayout{grid-template-columns:1fr;max-height:91vh}.watchside{border-left:0;border-top:1px solid var(--line)}.watchmain,.watchside{padding:13px}}
@media(max-width:520px){.sidebar{display:none}main{margin-left:0;width:100%;padding:0 11px 80px}.mobilebar{display:flex;position:fixed;bottom:0;left:0;right:0;height:62px;background:var(--panel);border-top:1px solid var(--line);z-index:25;justify-content:space-around}.mobilebar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;min-width:55px}.mobilebar span{font-size:21px}.brand{font-size:0}.brand .word{display:none}.brandbox{width:32px}.searcharea{gap:4px}.mic{display:none}.right .hide{display:none}.right .icon{width:31px}.top{padding:0 6px}.grid{grid-template-columns:1fr;gap:24px}.thumb{border-radius:10px}.title{font-size:15px}.info{padding-top:9px}.shortgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sectiontitle{font-size:20px}.dialog{padding:17px}.watchdialog{padding:0}.watchtitle{font-size:17px}.watchside{padding:13px}}
</style></head><body>
<header class="top"><div class="brandbox"><button class="icon" onclick="toggleSidebar()" aria-label="Menüyü aç">☰</button><div class="brand" onclick="go('home')"><span class="ytmark">▶</span><span class="word">YouTube</span><sup class="tr">TR</sup></div></div><div class="searcharea"><div class="searchbox"><input id="search" placeholder="Ara" aria-label="Video ara" onkeydown="if(event.key==='Enter')doSearch()"><button class="searchbtn" onclick="doSearch()" aria-label="Ara">⌕</button></div><button class="mic" onclick="notify('Sesli arama simülasyonu 🎙️')">🎙️</button></div><div class="right"><button class="icon" onclick="openUpload()" title="Oluştur">+<span style="font-size:12px">Oluştur</span></button><button class="icon hide" onclick="notify('Yeni bildirimin yok 🔔')" title="Bildirimler">♧</button><button class="avatar" onclick="profile()">A</button></div></header>
<div class="layout"><aside class="sidebar" id="sidebar"><button class="nav active" data-page="home" onclick="go('home')"><span class="ni">⌂</span>Ana sayfa</button><button class="nav" data-page="shorts" onclick="go('shorts')"><span class="ni">▣</span>Shorts</button><button class="nav" data-page="subscriptions" onclick="go('subscriptions')"><span class="ni">▤</span>Abonelikler</button><div class="sep"></div><div class="navhead">Siz ›</div><button class="nav" data-page="history" onclick="go('history')"><span class="ni">◷</span>Geçmiş</button><button class="nav" data-page="playlists" onclick="go('playlists')"><span class="ni">▤</span>Oynatma listeleri</button><button class="nav" data-page="myvideos" onclick="go('myvideos')"><span class="ni">▻</span>Videolarınız</button><button class="nav" data-page="watchlater" onclick="go('watchlater')"><span class="ni">◴</span>Daha sonra izle</button><button class="nav" data-page="liked" onclick="go('liked')"><span class="ni">♡</span>Beğendiğiniz videolar</button><div class="sep"></div><div class="navhead">Keşfet</div><button class="nav" onclick="setCat('Müzik')"><span class="ni">♫</span>Müzik</button><button class="nav" onclick="setCat('Oyun')"><span class="ni">🎮</span>Oyun</button><button class="nav" onclick="setCat('Canlı')"><span class="ni">◉</span>Canlı</button><div class="sep"></div><button class="nav" onclick="toggleTheme()"><span class="ni">☾</span>Koyu tema</button><div class="navnote">Bu bir YouTube arayüz simülasyonudur. İşlemler örnek verilerle çalışır.</div></aside><main><div class="chips" id="chips"></div><div id="content"></div></main></div>
<nav class="mobilebar"><button onclick="go('home')"><span>⌂</span>Ana sayfa</button><button onclick="go('shorts')"><span>▣</span>Shorts</button><button onclick="openUpload()"><span style="font-size:27px">⊕</span>Oluştur</button><button onclick="go('subscriptions')"><span>▤</span>Abonelik</button><button onclick="go('history')"><span>◷</span>Siz</button></nav><div class="toast" id="toast"></div><div class="overlay" id="overlay" onclick="if(event.target===this)closeDialog()"><div class="dialog" id="dialog"></div></div>
<script>
const original=[
{title:'GEOMETRY DASH — GRIEF | Extreme Demon deneyimim 😱',channel:'GoldenRanger23',views:'128 B görüntüleme',age:'2 gün önce',duration:'12:48',cat:'Oyun',emoji:'🎮',colors:['#161b2e','#db3255'],desc:'Bu videoda inanılmaz zor bir Geometry Dash seviyesini deniyoruz! Sonuna kadar izlemeyi unutma.',likes:2400},
{title:'Yeni iPhone Ultra’yı inceliyorum! 📱',channel:'Tekno Dünya',views:'86 B görüntüleme',age:'1 gün önce',duration:'18:20',cat:'Teknoloji',emoji:'📱',colors:['#173e59','#59c3c3'],desc:'Telefon tasarımı, kamera ve uygulamaları inceliyoruz.',likes:1600},
{title:'24 saat boyunca sadece oyun oynadım 😂',channel:'Oyun Kafası',views:'542 B görüntüleme',age:'5 gün önce',duration:'23:11',cat:'Oyun',emoji:'🕹️',colors:['#2d165f','#e66bb4'],desc:'Eğlenceli oyun challenge videosu!',likes:9100},
{title:'Dünyanın en güzel manzaraları 🌄 4K',channel:'Gezgin',views:'1,2 Mn görüntüleme',age:'1 hafta önce',duration:'10:05',cat:'Seyahat',emoji:'🏔️',colors:['#0f567b','#efb15c'],desc:'Birbirinden güzel doğa manzaralarıyla kısa bir yolculuk.',likes:7800},
{title:'En iyi müzikler 🎧 | Oyun ve çalışma listesi',channel:'Mix Station',views:'77 B görüntüleme',age:'3 gün önce',duration:'45:32',cat:'Müzik',emoji:'🎧',colors:['#48235b','#f0a4bc'],desc:'Arka planda dinlemek için müzik listesi.',likes:1300},
{title:'Evde mini bir oyun odası kurdum! 🖥️',channel:'Setup Lab',views:'204 B görüntüleme',age:'4 gün önce',duration:'14:09',cat:'Teknoloji',emoji:'🖥️',colors:['#122d2e','#2ba99b'],desc:'Masa, bilgisayar, ışıklar ve daha fazlası!',likes:3600},
{title:'Komik hayvan videoları 😂🐈',channel:'Pati TV',views:'2,1 Mn görüntüleme',age:'2 hafta önce',duration:'8:17',cat:'Komedi',emoji:'🐈',colors:['#d95c3f','#f5c05a'],desc:'Gülümseten hayvanlar ve komik anlar.',likes:32000},
{title:'PK XD’de gizli yerleri buldum! 🏝️',channel:'Pixel Macera',views:'63 B görüntüleme',age:'6 saat önce',duration:'16:42',cat:'Oyun',emoji:'🌴',colors:['#13a4b8','#ffd34d'],desc:'PK XD dünyasında keşfedilecek yerleri geziyoruz.',likes:980},
{title:'Kolay ve lezzetli atıştırmalıklar 🍕',channel:'Mutfağım',views:'310 B görüntüleme',age:'9 gün önce',duration:'7:38',cat:'Yemek',emoji:'🍕',colors:['#a4362d','#f2c75b'],desc:'Evde yapabileceğin atıştırmalık fikirleri.',likes:6400},
{title:'Uzay hakkında bilmediğin 10 şey 🚀',channel:'Meraklı Bilim',views:'490 B görüntüleme',age:'6 gün önce',duration:'11:23',cat:'Bilim',emoji:'🚀',colors:['#070e36','#6966d9'],desc:'Uzayın şaşırtıcı özelliklerini keşfet!',likes:8400},
{title:'CANLI: Geometry Dash denemeleri 🔴',channel:'GoldenRanger23',views:'Şimdi canlı',age:'Canlı',duration:'CANLI',cat:'Canlı',emoji:'🔴',colors:['#3c111b','#ed313b'],desc:'Geometry Dash oynuyoruz. Canlı yayın simülasyonu.',likes:340},
{title:'Telefonumda en çok kullandığım uygulamalar',channel:'Tekno Dünya',views:'98 B görüntüleme',age:'8 gün önce',duration:'9:54',cat:'Teknoloji',emoji:'📲',colors:['#243d75','#87a5ed'],desc:'Günlük kullandığım uygulamalara göz atıyoruz.',likes:2100},
{title:'Minecraft’ta harika bir ev yaptım 🏠',channel:'Blok Ustası',views:'76 B görüntüleme',age:'3 gün önce',duration:'15:02',cat:'Oyun',emoji:'🏡',colors:['#1b7d48','#a8d65d'],desc:'Kocaman bir oyun evi yapıyoruz.',likes:1100},
{title:'Kedimle bir gün 🐾',channel:'Pati TV',views:'45 B görüntüleme',age:'1 gün önce',duration:'6:31',cat:'Komedi',emoji:'🐱',colors:['#b97c48','#f9cf8f'],desc:'Kedimle günlük maceralar.',likes:900}
];
let videos=original.map((v,i)=>({...v,id:i+1})),page='home',cat='Tümü',query='',history=[],liked=[],later=[],subs=new Set(),mine=[],active=null,toastTimer;
const cats=['Tümü','Oyun','Müzik','Canlı','Teknoloji','Komedi','Seyahat','Yemek','Bilim','Son yüklenenler'];
function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]))}
function art(v){let a=v.colors?.[0]||'#245',b=v.colors?.[1]||'#d46';let svg=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="${a}"/><stop offset="1" stop-color="${b}"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><circle cx="505" cy="80" r="235" fill="#fff" opacity=".1"/><path d="M0 290 Q150 190 270 310 T640 230 V360 H0Z" fill="#000" opacity=".15"/><circle cx="320" cy="166" r="82" fill="#fff" opacity=".1"/><text x="320" y="205" font-size="103" text-anchor="middle">${v.emoji||'▶'}</text><text x="25" y="42" font-family="Arial" font-size="21" fill="#fff" font-weight="bold">YOUTUBE • SIM</text></svg>`;return 'data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(svg)}
function av(name){let colors=['#df4759','#3f77cc','#078c86','#8755bb','#ce7832','#2c8a4c','#d24f92'];let n=0;for(let x of name)n=(n*31+x.charCodeAt(0))>>>0;return `<div class="chanavatar" style="background:${colors[n%colors.length]}">${esc(name.charAt(0).toUpperCase()||'Y')}</div>`}
function thumb(v,short=false){return `<div class="thumb"><img src="${art(v)}" alt=""><span class="duration">${esc(short?'0:'+String(18+(v.id%40)).padStart(2,'0'):v.duration||'0:00')}</span></div>`}
function videoCard(v){return `<article class="card" onclick="openVideo(${v.id})">${thumb(v)}<div class="info">${av(v.channel)}<div class="copy"><div class="title">${esc(v.title)}</div><div class="meta">${esc(v.channel)} ${subs.has(v.channel)?'✓':''}<br>${esc(v.views||'0 görüntüleme')} · ${esc(v.age||'Az önce')}</div></div><button class="dots" onclick="event.stopPropagation();videoMenu(${v.id})">⋮</button></div></article>`}
function renderChips(){let e=document.getElementById('chips');e.style.display=['shorts','history','playlists','myvideos','watchlater','liked','subscriptions'].includes(page)?'none':'flex';e.innerHTML=cats.map(c=>`<button class="chip ${cat===c?'on':''}" onclick="setCat('${c}')">${c}</button>`).join('')}
function render(){renderChips();document.querySelectorAll('.nav[data-page]').forEach(b=>b.classList.toggle('active',b.dataset.page===page));let root=document.getElementById('content');if(page==='shorts'){root.innerHTML=`<h2 class="sectiontitle">▣ Shorts <small>Kısa videolar</small></h2><div class="shortgrid">${videos.slice(0,12).map(v=>`<div class="short" onclick="openVideo(${v.id})">${thumb(v,true)}<div class="title">${esc(v.title)}</div><div class="meta">${esc(v.views)}</div></div>`).join('')}</div>`;return}
let list=videos.slice(),heading='';if(page==='history'){heading='İzleme geçmişi';list=history.map(id=>videos.find(v=>v.id===id)).filter(Boolean)}if(page==='liked'){heading='Beğendiğiniz videolar';list=liked.map(id=>videos.find(v=>v.id===id)).filter(Boolean)}if(page==='watchlater'){heading='Daha sonra izle';list=later.map(id=>videos.find(v=>v.id===id)).filter(Boolean)}if(page==='subscriptions'){heading='Abonelikler';list=list.filter(v=>subs.has(v.channel))}if(page==='myvideos'){heading='Videolarınız';list=mine}
if(page==='playlists'){root.innerHTML=`<h2 class="sectiontitle">Oynatma listeleri</h2><div class="empty"><div class="symbol">▤</div><b>Henüz oynatma listen yok</b><p>Videolardaki ⋮ menüsünden “Daha sonra izle” seçebilirsin.</p><button class="primary" onclick="go('home')">Video keşfet</button></div>`;return}
if(heading){root.innerHTML=`<h2 class="sectiontitle">${heading}</h2><div class="grid">${list.ma

Game Source: YouTube Simülasyonu

Creator: GoldenRanger23

Libraries: none

Complexity: simple (41 lines, 19.9 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: youtube-sim-lasyonu-goldenranger23" to link back to the original. Then publish at arcadelab.ai/publish.