Tag: programming

<?php
function capilot_mini_app_store_shortcode() {
    ob_start();
    ?>
    <link rel=”preconnect” href=”https://fonts.googleapis.com”&gt;
    <link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap”&gt;
    <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>

    <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&#8221;,
          viber:”viber://pa?chatURI=quizx”,
          messenger:”https://m.me/YourPage?ref=PLAY_QUIZ&#8221;
        },
        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)
https://books.capilot.example/reader?id=123`
      },
      {
        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>
    <?php
    return ob_get_clean();
}
add_shortcode(‘capilot_mini_app_store’, ‘capilot_mini_app_store_shortcode’);
?>“`