<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Capilot Mini App Store</title>
<meta name="theme-color" content="#111" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
<style>
:root{
--bg:#0b0b0e;--card:#14141a;--text:#e9e9ef;--muted:#a6a6b3;
--accent:#7c5cff;--accent2:#19c37d;--border:#23232b;
}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:16px}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 16px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 24px rgba(124,92,255,.35)}
.title{font-weight:700;font-size:18px}
.subtitle{color:var(--muted);font-size:13px}
.topbar{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#0f0f14;color:var(--text);cursor:pointer}
.chip.active{background:var(--accent);border-color:transparent;color:white}
.search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:#0f0f14;border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.search input{flex:1;background:transparent;border:none;outline:none;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.thumb{height:120px;background:#1b1b22;display:flex;align-items:center;justify-content:center}
.thumb img{max-width:100%;max-height:100%}
.content{padding:12px;display:flex;flex-direction:column;gap:8px}
.name{font-weight:600}
.desc{color:var(--muted);font-size:13px;line-height:1.4}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;color:#dcdcf0;background:#1a1a22;border:1px solid var(--border);padding:4px 8px;border-radius:999px}
.actions{display:flex;gap:8px;margin-top:6px}
.btn{flex:1;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#101018;color:var(--text);cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;border:none}
.btn.ghost{background:#0f0f14}
footer{margin:24px 0;color:var(--muted);font-size:12px}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50}
.modal{width:96%;max-width:680px;background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.modal header{padding:14px;border-bottom:1px solid var(--border)}
.modal .body{padding:14px;display:grid;gap:12px}
.platforms{display:flex;gap:8px;flex-wrap:wrap}
.pchip{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#101018;color:var(--text)}
.code{background:#0f0f14;border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto}
.close{cursor:pointer;color:var(--muted)}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="brand">
<div class="logo" aria-hidden="true"></div>
<div>
<div class="title">Capilot Mini App Store</div>
<div class="subtitle">Micro socials • Games • Tools • Books • Web3 verification</div>
</div>
</div>
<div class="topbar" role="toolbar" aria-label="Kategoriler">
<button class="chip active" data-cat="all">Tümü</button>
<button class="chip" data-cat="games">Oyunlar</button>
<button class="chip" data-cat="tools">Araçlar</button>
<button class="chip" data-cat="commerce">Alışveriş</button>
<button class="chip" data-cat="books">Kitaplar</button>
<button class="chip" data-cat="web3">Web3</button>
<div class="search" role="search">
🔎 <input id="q" type="search" placeholder="Ara: quiz, alışveriş, kitabevi..." />
</div>
</div>
</header>
<section class="grid" id="grid" aria-live="polite"></section>
<footer>
Capilot Store • Capilot Mini App Store • Capilot Book Store • OneDrive Web3 Verification
</footer>
</div>
<!-- Modal -->
<div class="modal-backdrop" id="backdrop" aria-hidden="true">
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
<header>
<div style="display:flex;justify-content:space-between;align-items:center;width:100%">
<div id="m-title" class="title">Mini App</div>
<div class="close" id="m-close">✕</div>
</div>
</header>
<div class="body">
<div id="m-desc" class="desc"></div>
<div class="platforms">
<div class="pchip">WhatsApp</div>
<div class="pchip">Telegram</div>
<div class="pchip">Skype</div>
<div class="pchip">Viber</div>
<div class="pchip">Messenger</div>
</div>
<div class="actions">
<button id="m-deploy" class="btn primary">Deploy / Share</button>
<button id="m-copy" class="btn ghost">Kodu Kopyala</button>
</div>
<div class="code">
<pre id="m-code">// Inline command veya webhook URL’leri burada gösterilir.
// Örnek: Telegram inline query: t.me/YourBot?startapp=quiz
// WhatsApp: wa.me/YourBusiness?text=PLAY_QUIZ</pre>
</div>
</div>
</div>
</div>
<script>
const APPS = [
{
id:"quizx",
name:"QuizX — Hızlı Trivia",
cat:["games","micro-socials"],
desc:"Sohbet içinde çoktan seçmeli bilgi yarışması. Skor paylaşımı, günlük lig.",
tags:["quiz","inline","daily"],
img:"",
commands:{
telegram:"t.me/QuizXBot?startapp=quiz",
whatsapp:"wa.me/905000000000?text=PLAY_QUIZ",
skype:"https://your-skype-miniapp.example/quiz",
viber:"viber://pa?chatURI=quizx",
messenger:"https://m.me/YourPage?ref=PLAY_QUIZ"
},
snippet:`// Telegram inline:
bot.on('inline_query', q => { /* quiz logic */ });`
},
{
id:"shoplite",
name:"ShopLite — Mikro Alışveriş",
cat:["commerce","tools"],
desc:"Chat içi ürün seçimi, sepet ve ödeme yönlendirme.",
tags:["catalog","checkout"],
img:"",
commands:{
telegram:"t.me/ShopLiteBot?startapp=catalog",
whatsapp:"wa.me/905000000000?text=OPEN_SHOP",
skype:"#",
viber:"#",
messenger:"#"
},
snippet:`// WhatsApp template message payload (Node.js)
await client.messages.create({ to, template: 'shop_open' });`
},
{
id:"capibook",
name:"Capilot Book Store",
cat:["books"],
desc:"Dijital kitaplar, manifestolar ve modüler yayın — sohbetten okuma.",
tags:["books","manifesto","reader"],
img:"",
commands:{
telegram:"t.me/CapilotBooks?startapp=reader",
whatsapp:"wa.me/905000000000?text=READ",
skype:"#",
viber:"#",
messenger:"#"
},
snippet:`// Reader embed (HTML)
<iframe src="https://books.capilot.example/reader?id=123"></iframe>`
},
{
id:"web3verify",
name:"OneDrive Web3 Verification",
cat:["web3","tools"],
desc:"Dosya zaman damgası, imza ve zincir aktarımı (Ethereum/Solana/BNB/Tron...).",
tags:["timestamp","signature","chain"],
img:"",
commands:{
telegram:"t.me/Web3VerifyBot?startapp=verify",
whatsapp:"wa.me/905000000000?text=VERIFY",
skype:"#",
viber:"#",
messenger:"#"
},
snippet:`// EVM (ethers.js) örneği
const sig = await wallet.signMessage(hash);
await contract.storeHash(hash, sig);`
}
];
const grid = document.getElementById('grid');
const q = document.getElementById('q');
const chips = Array.from(document.querySelectorAll('.chip'));
const backdrop = document.getElementById('backdrop');
const mClose = document.getElementById('m-close');
const mTitle = document.getElementById('m-title');
const mDesc = document.getElementById('m-desc');
const mCode = document.getElementById('m-code');
const mCopy = document.getElementById('m-copy');
const mDeploy = document.getElementById('m-deploy');
let state = { cat:"all", term:"" };
function render(){
grid.innerHTML = "";
const apps = APPS.filter(a=>{
const catOk = state.cat==="all" || a.cat.includes(state.cat);
const t = state.term.toLowerCase();
const termOk = !t || (a.name.toLowerCase().includes(t) || a.desc.toLowerCase().includes(t) || a.tags.join(" ").toLowerCase().includes(t));
return catOk && termOk;
});
apps.forEach(a=>{
const el = document.createElement('article');
el.className="card";
el.innerHTML = `
<div class="thumb">${a.img ? `<img src="${a.img}" alt="${a.name}">` : `🎯`}</div>
<div class="content">
<div class="name">${a.name}</div>
<div class="desc">${a.desc}</div>
<div class="tags">${a.tags.map(t=>`<span class="tag">${t}</span>`).join("")}</div>
<div class="actions">
<button class="btn primary" data-id="${a.id}" data-action="open">Aç</button>
<button class="btn" data-id="${a.id}" data-action="share">Paylaş</button>
</div>
</div>`;
grid.appendChild(el);
});
}
chips.forEach(c=>{
c.addEventListener('click', ()=>{
chips.forEach(x=>x.classList.remove('active'));
c.classList.add('active');
state.cat = c.dataset.cat;
render();
});
});
q.addEventListener('input', ()=>{
state.term = q.value;
render();
});
grid.addEventListener('click', e=>{
const b = e.target.closest('button');
if(!b) return;
const app = APPS.find(x=>x.id===b.dataset.id);
if(!app) return;
openModal(app);
});
function openModal(app){
mTitle.textContent = app.name;
mDesc.textContent = app.desc;
mCode.textContent = app.snippet + "\n\n// Komutlar:\n" + Object.entries(app.commands).map(([k,v])=>`${k}: ${v}`).join("\n");
backdrop.style.display="flex";
backdrop.setAttribute('aria-hidden','false');
mDeploy.onclick = ()=>{
const url = Object.values(app.commands).find(u=>u && u!=="#") || location.href;
navigator.clipboard?.writeText(url);
alert("Deploy/Share link panoya kopyalandı:\n" + url);
};
mCopy.onclick = ()=>{
navigator.clipboard?.writeText(mCode.textContent);
alert("Kod panoya kopyalandı.");
};
}
mClose.addEventListener('click', ()=>{
backdrop.style.display="none";
backdrop.setAttribute('aria-hidden','true');
});
document.addEventListener('keydown', e=>{
if(e.key==="Escape") mClose.click();
});
render();
</script>
</body>
</html>
pixelencia 