Duos by gankster<\/title><\/p>\n<style>\n * { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --bg: #14101f;\n --bg2: #1c1630;\n --card: #241c3d;\n --line: rgba(255,255,255,.10);\n --txt: #f3f0ff;\n --mut: #a79fc4;\n --acc: #b9a2ff;\n --green: #37d99a;\n --red: #ff5a68;\n --yellow: #ffcc45;\n }\n html, body { height: 100%; }\n body {\n background: radial-gradient(1200px 800px at 20% 0%, #2a1f4d 0%, var(--bg) 60%);\n color: var(--txt);\n font-family: \"Segoe UI\", system-ui, -apple-system, Arial, sans-serif;\n min-height: 100vh;\n }\n .app { display: flex; min-height: 100vh; width: 100%; padding-left: 110px; }<\/p>\n<p> \/* SIDEBAR \u2014 fixed to the left edge of the monitor *\/\n .sidebar {\n position: fixed; left: 0; top: 0; height: 100vh; z-index: 100;\n width: 110px; flex: 0 0 110px;\n background: rgba(0,0,0,.25);\n border-right: 1px solid var(--line);\n display: flex; flex-direction: column; align-items: center;\n padding: 22px 0; gap: 10px;\n }\n .logo {\n width: 52px; height: 52px; border-radius: 16px;\n background: linear-gradient(135deg, #8b5cf6, #ec4899);\n display: grid; place-items: center; font-weight: 800; font-size: 22px;\n margin-bottom: 18px;\n }\n .nav { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }\n .nav button {\n width: 84px; padding: 10px 0; border: 0; border-radius: 14px;\n background: transparent; color: var(--mut); cursor: pointer;\n display: flex; flex-direction: column; align-items: center; gap: 6px;\n font-size: 11px; letter-spacing: .2px;\n }\n .nav button i { font-size: 20px; font-style: normal; }\n .nav button:hover { background: rgba(255,255,255,.06); color: var(--txt); }\n .nav button.active { background: rgba(139,92,246,.22); color: #fff; }<\/p>\n<p> \/* MAIN *\/\n .main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 20px 40px; position: relative; }\n .topbar { width: 100%; max-width: 620px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }\n .topbar h1 { font-size: 22px; }\n .topbar p { color: var(--mut); font-size: 13px; margin-top: 2px; }\n .filters { display: flex; gap: 8px; flex-wrap: wrap; max-width: 620px; width: 100%; margin-bottom: 18px; justify-content: flex-start; }\n .chip {\n padding: 7px 14px; border-radius: 999px; font-size: 12px; cursor: pointer;\n background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--mut);\n }\n .chip.on { background: rgba(139,92,246,.25); border-color: rgba(139,92,246,.6); color: #fff; }<\/p>\n<p> \/* CARD STACK *\/\n .stack { position: relative; width: 560px; height: 700px; align-self: center; }\n .card {\n position: absolute; inset: 0;\n background: var(--card); border: 1px solid var(--line);\n border-radius: 26px; overflow: hidden;\n box-shadow: 0 30px 70px rgba(0,0,0,.5);\n display: flex; flex-direction: column;\n transition: transform .35s ease, opacity .35s ease;\n user-select: none;\n }\n .card .photo {\n height: 380px; position: relative;\n background: linear-gradient(135deg, #3b2a63, #6d28d9);\n display: grid; place-items: center;\n }\n .card .photo span { font-size: 120px; }\n .badge {\n position: absolute; top: 16px; left: 16px;\n background: rgba(0,0,0,.55); backdrop-filter: blur(6px);\n padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;\n border: 1px solid var(--line);\n }\n .badge b { color: var(--acc); }\n .ping {\n position: absolute; top: 16px; right: 16px;\n background: rgba(0,0,0,.55); padding: 7px 12px; border-radius: 999px; font-size: 12px;\n border: 1px solid var(--line);\n }\n .info { padding: 22px 24px; flex: 1; }\n .info h2 { font-size: 30px; display: flex; align-items: center; gap: 10px; }\n .info h2 small { font-size: 15px; color: var(--mut); font-weight: 400; }\n .status { color: var(--acc); font-size: 14px; margin-top: 6px; }\n .meta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }\n .pill { background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 9px 14px; border-radius: 12px; font-size: 13px; }\n .bio { color: var(--mut); font-size: 14px; line-height: 1.5; margin-top: 16px; }<\/p>\n<p> .stampL, .stampR {\n position: absolute; top: 34px; font-size: 30px; font-weight: 900; letter-spacing: 2px;\n padding: 8px 16px; border-radius: 12px; opacity: 0; transition: opacity .15s;\n }\n .stampR { left: 28px; color: var(--green); border: 4px solid var(--green); transform: rotate(-14deg); }\n .stampL { right: 28px; color: var(--red); border: 4px solid var(--red); transform: rotate(14deg); }<\/p>\n<p> \/* ACTIONS *\/\n .actions { display: flex; gap: 26px; margin-top: 28px; align-self: center; }\n .actions button {\n width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--line);\n background: var(--bg2); color: #fff; font-size: 28px; cursor: pointer;\n display: grid; place-items: center; transition: transform .15s, box-shadow .15s;\n }\n .actions button:hover { transform: translateY(-4px); }\n .actions .no { color: var(--red); box-shadow: 0 0 0 0 rgba(255,90,104,.4); }\n .actions .bolt{ color: var(--yellow); width: 60px; height: 60px; align-self: center; font-size: 22px; }\n .actions .yes { color: var(--green); }<\/p>\n<p> .keys {\n position: absolute; top: 24px; right: 24px;\n background: rgba(0,0,0,.35); border: 1px solid var(--line);\n border-radius: 14px; padding: 12px 14px; font-size: 12px; color: var(--mut);\n line-height: 1.9;\n }\n .keys kbd {\n background: rgba(255,255,255,.10); border: 1px solid var(--line);\n border-radius: 6px; padding: 1px 7px; color: var(--txt); font-family: inherit;\n }\n .empty { display: grid; place-items: center; height: 100%; text-align: center; color: var(--mut); gap: 10px; padding: 30px; }\n .empty button { margin-top: 8px; padding: 10px 18px; border-radius: 12px; border: 0; background: #8b5cf6; color: #fff; cursor: pointer; }<\/p>\n<p> @media (max-width: 900px) {\n .stack { width: 92vw; height: 620px; }\n .keys { display: none; }\n .sidebar { width: 76px; }\n .app { padding-left: 76px; }\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"app\">\n<aside class=\"sidebar\">\n<div class=\"logo\">g<\/div>\n<nav class=\"nav\">\n <button class=\"active\"><i>\ud83c\udfae<\/i>Discover<\/button><br \/>\n <button><i>\ud83d\udc65<\/i>My Duos<\/button><br \/>\n <button><i>\u2764\ufe0f<\/i>Likes<\/button><br \/>\n <button><i>\ud83d\udcac<\/i>Comms<\/button><br \/>\n <button><i>\ud83d\ude42<\/i>You<\/button><br \/>\n <\/nav>\n<\/aside>\n<p> <main class=\"main\"><\/p>\n<div class=\"keys\">\n<div><kbd>\u2190<\/kbd> skip<\/div>\n<div><kbd>\u2192<\/kbd> like<\/div>\n<div><kbd>space<\/kbd> reveal<\/div>\n<\/p><\/div>\n<div class=\"topbar\">\n<div>\n<h1>Discover duos<\/h1>\n<p>Swipe through players matched to your rank and playstyle.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"filters\" id=\"filters\">\n<div class=\"chip on\">All<\/div>\n<div class=\"chip\">Ranked<\/div>\n<div class=\"chip\">Casual<\/div>\n<div class=\"chip\">Mic on<\/div>\n<div class=\"chip\">Under 30ms<\/div>\n<\/p><\/div>\n<div class=\"stack\" id=\"stack\"><\/div>\n<div class=\"actions\">\n <button class=\"no\" onclick=\"swipe('left')\">\u2715<\/button><br \/>\n <button class=\"bolt\" onclick=\"reveal()\">\u26a1<\/button><br \/>\n <button class=\"yes\" onclick=\"swipe('right')\">\u2665<\/button>\n <\/div>\n<p> <\/main>\n<\/div>\n<p><script>\nconst players = [\n { name:\"Zaddy\", age:21, fit:85, emoji:\"\ud83d\udd79\ufe0f\", status:\"Ranked grind\", rank:\"Platinum I\", ping:\"19ms\", loc:\"Warsaw, PL\", bio:\"Duo main, comms always on. Looking for someone consistent for the climb to Diamond.\" },\n { name:\"Nova\", age:24, fit:92, emoji:\"\ud83c\udfa7\", status:\"Chill queue\", rank:\"Gold II\", ping:\"27ms\", loc:\"Berlin, DE\", bio:\"Support main. I call rotations, you frag. Weeknights after 8pm.\" },\n { name:\"Kx\", age:19, fit:74, emoji:\"\ud83d\udc09\", status:\"Scrims\", rank:\"Diamond III\", ping:\"12ms\", loc:\"Prague, CZ\", bio:\"Entry fragger, ex-semi pro. Serious practice only, no tilt.\" },\n { name:\"Miso\", age:22, fit:88, emoji:\"\ud83c\udf19\", status:\"Late night\", rank:\"Platinum IV\", ping:\"31ms\", loc:\"Vienna, AT\", bio:\"Flex player, 3am queues are my thing. Bring snacks and patience.\" },\n { name:\"Ryo\", age:26, fit:80, emoji:\"\u2694\ufe0f\", status:\"Ranked grind\", rank:\"Emerald II\", ping:\"22ms\", loc:\"Krakow, PL\", bio:\"IGL vibes without the yelling. Let's build a real duo, not a one-night queue.\" }\n];<\/p>\n<p>let index = 0;\nconst stack = document.getElementById('stack');<\/p>\n<p>function render() {\n stack.innerHTML = '';\n if (index >= players.length) {\n stack.innerHTML = `<\/p>\n<div class=\"card\">\n<div class=\"empty\">\n<div style=\"font-size:48px\">\ud83e\udee5<\/div>\n<h2>No more players<\/h2>\n<p>Check back later or widen your filters.<\/p>\n<p> <button onclick=\"restart()\">Start over<\/button>\n <\/div>\n<\/div>\n<p>`;\n return;\n }\n \/\/ render up to 3 cards, back to front\n for (let i = Math.min(index + 2, players.length - 1); i >= index; i--) {\n const p = players[i];\n const depth = i - index;\n const el = document.createElement('div');\n el.className = 'card';\n el.style.transform = `translateY(${depth * 12}px) scale(${1 - depth * 0.04})`;\n el.style.zIndex = 10 - depth;\n el.style.opacity = depth > 1 ? 0.5 : 1;\n el.innerHTML = `<\/p>\n<div class=\"stampR\">DUO<\/div>\n<div class=\"stampL\">NOPE<\/div>\n<div class=\"photo\">\n <span>${p.emoji}<\/span><\/p>\n<div class=\"badge\">Rare fit <b>${p.fit}%<\/b><\/div>\n<div class=\"ping\">${p.ping}<\/div>\n<\/p><\/div>\n<div class=\"info\">\n<h2>${p.name} <small>${p.age}<\/small><\/h2>\n<div class=\"status\">${p.status}<\/div>\n<div class=\"meta\">\n<div class=\"pill\">\ud83c\udfc6 ${p.rank}<\/div>\n<div class=\"pill\">\ud83d\udcf6 ${p.ping}<\/div>\n<div class=\"pill\">\ud83d\udccd ${p.loc}<\/div>\n<\/p><\/div>\n<p class=\"bio\">${p.bio}<\/p>\n<\/p><\/div>\n<p>`;\n if (depth === 0) makeDraggable(el);\n stack.appendChild(el);\n }\n}<\/p>\n<p>function swipe(dir) {\n const top = stack.querySelector('.card');\n if (!top || index >= players.length) return;\n const x = dir === 'right' ? 900 : -900;\n top.style.transform = `translateX(${x}px) rotate(${dir === 'right' ? 25 : -25}deg)`;\n top.style.opacity = 0;\n setTimeout(() => { index++; render(); }, 280);\n}<\/p>\n<p>function reveal() {\n const top = stack.querySelector('.card');\n if (top) {\n top.animate(\n [{ transform:'scale(1)' }, { transform:'scale(1.03)' }, { transform:'scale(1)' }],\n { duration: 320 }\n );\n }\n}<\/p>\n<p>function restart() { index = 0; render(); }<\/p>\n<p>function makeDraggable(el) {\n let startX = 0, startY = 0, dx = 0, dragging = false;\n const R = el.querySelector('.stampR'), L = el.querySelector('.stampL');<\/p>\n<p> el.addEventListener('pointerdown', e => {\n dragging = true; startX = e.clientX; startY = e.clientY;\n el.style.transition = 'none';\n el.setPointerCapture(e.pointerId);\n });<\/p>\n<p> el.addEventListener('pointermove', e => {\n if (!dragging) return;\n dx = e.clientX - startX;\n const dy = e.clientY - startY;\n el.style.transform = `translate(${dx}px, ${dy}px) rotate(${dx \/ 22}deg)`;\n R.style.opacity = dx > 40 ? Math.min(dx \/ 140, 1) : 0;\n L.style.opacity = dx < -40 ? Math.min(-dx \/ 140, 1) : 0;\n });\n\n const end = () => {\n if (!dragging) return;\n dragging = false;\n el.style.transition = 'transform .35s ease, opacity .35s ease';\n if (Math.abs(dx) > 130) { swipe(dx > 0 ? 'right' : 'left'); }\n else { el.style.transform = 'translate(0,0)'; R.style.opacity = 0; L.style.opacity = 0; }\n dx = 0;\n };\n el.addEventListener('pointerup', end);\n el.addEventListener('pointercancel', end);\n}<\/p>\n<p>document.addEventListener('keydown', e => {\n if (e.key === 'ArrowRight') swipe('right');\n if (e.key === 'ArrowLeft') swipe('left');\n if (e.code === 'Space') { e.preventDefault(); reveal(); }\n});<\/p>\n<p>document.getElementById('filters').addEventListener('click', e => {\n if (!e.target.classList.contains('chip')) return;\n document.querySelectorAll('.chip').forEach(c => c.classList.remove('on'));\n e.target.classList.add('on');\n});<\/p>\n<p>render();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Duos by gankster g \ud83c\udfaeDiscover \ud83d\udc65My Duos \u2764\ufe0fLikes \ud83d\udcacComms \ud83d\ude42You \u2190 skip \u2192 like space reveal Discover duos Swipe through players matched to your rank and playstyle. All Ranked Casual Mic on Under 30ms \u2715 \u26a1 \u2665<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":11,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2026-08-19T23:43:00","date_gmt":"2026-08-19T21:43:00","guid":{"rendered":"https:\/\/twojpodarunek.pl\/?page_id=6"},"modified":"2026-08-20T00:06:52","modified_gmt":"2026-08-19T22:06:52","slug":"6-2","status":"publish","type":"page","link":"https:\/\/twojpodarunek.pl\/?page_id=6","title":{"rendered":""},"content":{"rendered":"

\n
\n
\n
\n
\nDuos by gankster<\/title><\/p>\n<style>\n * { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --bg: #14101f;\n --bg2: #1c1630;\n --card: #241c3d;\n --line: rgba(255,255,255,.10);\n --txt: #f3f0ff;\n --mut: #a79fc4;\n --acc: #b9a2ff;\n --green: #37d99a;\n --red: #ff5a68;\n --yellow: #ffcc45;\n }\n html, body { height: 100%; }\n body {\n background: radial-gradient(1200px 800px at 20% 0%, #2a1f4d 0%, var(--bg) 60%);\n color: var(--txt);\n font-family: \"Segoe UI\", system-ui, -apple-system, Arial, sans-serif;\n min-height: 100vh;\n }\n .app { display: flex; min-height: 100vh; width: 100%; padding-left: 110px; }<\/p>\n<p> \/* SIDEBAR \u2014 fixed to the left edge of the monitor *\/\n .sidebar {\n position: fixed; left: 0; top: 0; height: 100vh; z-index: 100;\n width: 110px; flex: 0 0 110px;\n background: rgba(0,0,0,.25);\n border-right: 1px solid var(--line);\n display: flex; flex-direction: column; align-items: center;\n padding: 22px 0; gap: 10px;\n }\n .logo {\n width: 52px; height: 52px; border-radius: 16px;\n background: linear-gradient(135deg, #8b5cf6, #ec4899);\n display: grid; place-items: center; font-weight: 800; font-size: 22px;\n margin-bottom: 18px;\n }\n .nav { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }\n .nav button {\n width: 84px; padding: 10px 0; border: 0; border-radius: 14px;\n background: transparent; color: var(--mut); cursor: pointer;\n display: flex; flex-direction: column; align-items: center; gap: 6px;\n font-size: 11px; letter-spacing: .2px;\n }\n .nav button i { font-size: 20px; font-style: normal; }\n .nav button:hover { background: rgba(255,255,255,.06); color: var(--txt); }\n .nav button.active { background: rgba(139,92,246,.22); color: #fff; }<\/p>\n<p> \/* MAIN *\/\n .main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 20px 40px; position: relative; }\n .topbar { width: 100%; max-width: 620px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }\n .topbar h1 { font-size: 22px; }\n .topbar p { color: var(--mut); font-size: 13px; margin-top: 2px; }\n .filters { display: flex; gap: 8px; flex-wrap: wrap; max-width: 620px; width: 100%; margin-bottom: 18px; justify-content: flex-start; }\n .chip {\n padding: 7px 14px; border-radius: 999px; font-size: 12px; cursor: pointer;\n background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--mut);\n }\n .chip.on { background: rgba(139,92,246,.25); border-color: rgba(139,92,246,.6); color: #fff; }<\/p>\n<p> \/* CARD STACK *\/\n .stack { position: relative; width: 560px; height: 700px; align-self: center; }\n .card {\n position: absolute; inset: 0;\n background: var(--card); border: 1px solid var(--line);\n border-radius: 26px; overflow: hidden;\n box-shadow: 0 30px 70px rgba(0,0,0,.5);\n display: flex; flex-direction: column;\n transition: transform .35s ease, opacity .35s ease;\n user-select: none;\n }\n .card .photo {\n height: 380px; position: relative;\n background: linear-gradient(135deg, #3b2a63, #6d28d9);\n display: grid; place-items: center;\n }\n .card .photo span { font-size: 120px; }\n .badge {\n position: absolute; top: 16px; left: 16px;\n background: rgba(0,0,0,.55); backdrop-filter: blur(6px);\n padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;\n border: 1px solid var(--line);\n }\n .badge b { color: var(--acc); }\n .ping {\n position: absolute; top: 16px; right: 16px;\n background: rgba(0,0,0,.55); padding: 7px 12px; border-radius: 999px; font-size: 12px;\n border: 1px solid var(--line);\n }\n .info { padding: 22px 24px; flex: 1; }\n .info h2 { font-size: 30px; display: flex; align-items: center; gap: 10px; }\n .info h2 small { font-size: 15px; color: var(--mut); font-weight: 400; }\n .status { color: var(--acc); font-size: 14px; margin-top: 6px; }\n .meta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }\n .pill { background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 9px 14px; border-radius: 12px; font-size: 13px; }\n .bio { color: var(--mut); font-size: 14px; line-height: 1.5; margin-top: 16px; }<\/p>\n<p> .stampL, .stampR {\n position: absolute; top: 34px; font-size: 30px; font-weight: 900; letter-spacing: 2px;\n padding: 8px 16px; border-radius: 12px; opacity: 0; transition: opacity .15s;\n }\n .stampR { left: 28px; color: var(--green); border: 4px solid var(--green); transform: rotate(-14deg); }\n .stampL { right: 28px; color: var(--red); border: 4px solid var(--red); transform: rotate(14deg); }<\/p>\n<p> \/* ACTIONS *\/\n .actions { display: flex; gap: 26px; margin-top: 28px; align-self: center; }\n .actions button {\n width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--line);\n background: var(--bg2); color: #fff; font-size: 28px; cursor: pointer;\n display: grid; place-items: center; transition: transform .15s, box-shadow .15s;\n }\n .actions button:hover { transform: translateY(-4px); }\n .actions .no { color: var(--red); box-shadow: 0 0 0 0 rgba(255,90,104,.4); }\n .actions .bolt{ color: var(--yellow); width: 60px; height: 60px; align-self: center; font-size: 22px; }\n .actions .yes { color: var(--green); }<\/p>\n<p> .keys {\n position: absolute; top: 24px; right: 24px;\n background: rgba(0,0,0,.35); border: 1px solid var(--line);\n border-radius: 14px; padding: 12px 14px; font-size: 12px; color: var(--mut);\n line-height: 1.9;\n }\n .keys kbd {\n background: rgba(255,255,255,.10); border: 1px solid var(--line);\n border-radius: 6px; padding: 1px 7px; color: var(--txt); font-family: inherit;\n }\n .empty { display: grid; place-items: center; height: 100%; text-align: center; color: var(--mut); gap: 10px; padding: 30px; }\n .empty button { margin-top: 8px; padding: 10px 18px; border-radius: 12px; border: 0; background: #8b5cf6; color: #fff; cursor: pointer; }<\/p>\n<p> @media (max-width: 900px) {\n .stack { width: 92vw; height: 620px; }\n .keys { display: none; }\n .sidebar { width: 76px; }\n .app { padding-left: 76px; }\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"app\">\n<aside class=\"sidebar\">\n<div class=\"logo\">g<\/div>\n<nav class=\"nav\">\n <button class=\"active\"><i>\ud83c\udfae<\/i>Discover<\/button><br \/>\n <button><i>\ud83d\udc65<\/i>My Duos<\/button><br \/>\n <button><i>\u2764\ufe0f<\/i>Likes<\/button><br \/>\n <button><i>\ud83d\udcac<\/i>Comms<\/button><br \/>\n <button><i>\ud83d\ude42<\/i>You<\/button><br \/>\n <\/nav>\n<\/aside>\n<p> <main class=\"main\"><\/p>\n<div class=\"keys\">\n<div><kbd>\u2190<\/kbd> skip<\/div>\n<div><kbd>\u2192<\/kbd> like<\/div>\n<div><kbd>space<\/kbd> reveal<\/div>\n<\/p><\/div>\n<div class=\"topbar\">\n<div>\n<h1>Discover duos<\/h1>\n<p>Swipe through players matched to your rank and playstyle.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"filters\" id=\"filters\">\n<div class=\"chip on\">All<\/div>\n<div class=\"chip\">Ranked<\/div>\n<div class=\"chip\">Casual<\/div>\n<div class=\"chip\">Mic on<\/div>\n<div class=\"chip\">Under 30ms<\/div>\n<\/p><\/div>\n<div class=\"stack\" id=\"stack\"><\/div>\n<div class=\"actions\">\n <button class=\"no\" onclick=\"swipe('left')\">\u2715<\/button><br \/>\n <button class=\"bolt\" onclick=\"reveal()\">\u26a1<\/button><br \/>\n <button class=\"yes\" onclick=\"swipe('right')\">\u2665<\/button>\n <\/div>\n<p> <\/main>\n<\/div>\n<p><script>\nconst players = [\n { name:\"Zaddy\", age:21, fit:85, emoji:\"\ud83d\udd79\ufe0f\", status:\"Ranked grind\", rank:\"Platinum I\", ping:\"19ms\", loc:\"Warsaw, PL\", bio:\"Duo main, comms always on. Looking for someone consistent for the climb to Diamond.\" },\n { name:\"Nova\", age:24, fit:92, emoji:\"\ud83c\udfa7\", status:\"Chill queue\", rank:\"Gold II\", ping:\"27ms\", loc:\"Berlin, DE\", bio:\"Support main. I call rotations, you frag. Weeknights after 8pm.\" },\n { name:\"Kx\", age:19, fit:74, emoji:\"\ud83d\udc09\", status:\"Scrims\", rank:\"Diamond III\", ping:\"12ms\", loc:\"Prague, CZ\", bio:\"Entry fragger, ex-semi pro. Serious practice only, no tilt.\" },\n { name:\"Miso\", age:22, fit:88, emoji:\"\ud83c\udf19\", status:\"Late night\", rank:\"Platinum IV\", ping:\"31ms\", loc:\"Vienna, AT\", bio:\"Flex player, 3am queues are my thing. Bring snacks and patience.\" },\n { name:\"Ryo\", age:26, fit:80, emoji:\"\u2694\ufe0f\", status:\"Ranked grind\", rank:\"Emerald II\", ping:\"22ms\", loc:\"Krakow, PL\", bio:\"IGL vibes without the yelling. Let's build a real duo, not a one-night queue.\" }\n];<\/p>\n<p>let index = 0;\nconst stack = document.getElementById('stack');<\/p>\n<p>function render() {\n stack.innerHTML = '';\n if (index >= players.length) {\n stack.innerHTML = `<\/p>\n<div class=\"card\">\n<div class=\"empty\">\n<div style=\"font-size:48px\">\ud83e\udee5<\/div>\n<h2>No more players<\/h2>\n<p>Check back later or widen your filters.<\/p>\n<p> <button onclick=\"restart()\">Start over<\/button>\n <\/div>\n<\/div>\n<p>`;\n return;\n }\n \/\/ render up to 3 cards, back to front\n for (let i = Math.min(index + 2, players.length - 1); i >= index; i--) {\n const p = players[i];\n const depth = i - index;\n const el = document.createElement('div');\n el.className = 'card';\n el.style.transform = `translateY(${depth * 12}px) scale(${1 - depth * 0.04})`;\n el.style.zIndex = 10 - depth;\n el.style.opacity = depth > 1 ? 0.5 : 1;\n el.innerHTML = `<\/p>\n<div class=\"stampR\">DUO<\/div>\n<div class=\"stampL\">NOPE<\/div>\n<div class=\"photo\">\n <span>${p.emoji}<\/span><\/p>\n<div class=\"badge\">Rare fit <b>${p.fit}%<\/b><\/div>\n<div class=\"ping\">${p.ping}<\/div>\n<\/p><\/div>\n<div class=\"info\">\n<h2>${p.name} <small>${p.age}<\/small><\/h2>\n<div class=\"status\">${p.status}<\/div>\n<div class=\"meta\">\n<div class=\"pill\">\ud83c\udfc6 ${p.rank}<\/div>\n<div class=\"pill\">\ud83d\udcf6 ${p.ping}<\/div>\n<div class=\"pill\">\ud83d\udccd ${p.loc}<\/div>\n<\/p><\/div>\n<p class=\"bio\">${p.bio}<\/p>\n<\/p><\/div>\n<p>`;\n if (depth === 0) makeDraggable(el);\n stack.appendChild(el);\n }\n}<\/p>\n<p>function swipe(dir) {\n const top = stack.querySelector('.card');\n if (!top || index >= players.length) return;\n const x = dir === 'right' ? 900 : -900;\n top.style.transform = `translateX(${x}px) rotate(${dir === 'right' ? 25 : -25}deg)`;\n top.style.opacity = 0;\n setTimeout(() => { index++; render(); }, 280);\n}<\/p>\n<p>function reveal() {\n const top = stack.querySelector('.card');\n if (top) {\n top.animate(\n [{ transform:'scale(1)' }, { transform:'scale(1.03)' }, { transform:'scale(1)' }],\n { duration: 320 }\n );\n }\n}<\/p>\n<p>function restart() { index = 0; render(); }<\/p>\n<p>function makeDraggable(el) {\n let startX = 0, startY = 0, dx = 0, dragging = false;\n const R = el.querySelector('.stampR'), L = el.querySelector('.stampL');<\/p>\n<p> el.addEventListener('pointerdown', e => {\n dragging = true; startX = e.clientX; startY = e.clientY;\n el.style.transition = 'none';\n el.setPointerCapture(e.pointerId);\n });<\/p>\n<p> el.addEventListener('pointermove', e => {\n if (!dragging) return;\n dx = e.clientX - startX;\n const dy = e.clientY - startY;\n el.style.transform = `translate(${dx}px, ${dy}px) rotate(${dx \/ 22}deg)`;\n R.style.opacity = dx > 40 ? Math.min(dx \/ 140, 1) : 0;\n L.style.opacity = dx < -40 ? Math.min(-dx \/ 140, 1) : 0;\n });\n\n const end = () => {\n if (!dragging) return;\n dragging = false;\n el.style.transition = 'transform .35s ease, opacity .35s ease';\n if (Math.abs(dx) > 130) { swipe(dx > 0 ? 'right' : 'left'); }\n else { el.style.transform = 'translate(0,0)'; R.style.opacity = 0; L.style.opacity = 0; }\n dx = 0;\n };\n el.addEventListener('pointerup', end);\n el.addEventListener('pointercancel', end);\n}<\/p>\n<p>document.addEventListener('keydown', e => {\n if (e.key === 'ArrowRight') swipe('right');\n if (e.key === 'ArrowLeft') swipe('left');\n if (e.code === 'Space') { e.preventDefault(); reveal(); }\n});<\/p>\n<p>document.getElementById('filters').addEventListener('click', e => {\n if (!e.target.classList.contains('chip')) return;\n document.querySelectorAll('.chip').forEach(c => c.classList.remove('on'));\n e.target.classList.add('on');\n});<\/p>\n<p>render();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Duos by gankster g \ud83c\udfaeDiscover \ud83d\udc65My Duos \u2764\ufe0fLikes \ud83d\udcacComms \ud83d\ude42You \u2190 skip \u2192 like space reveal Discover duos Swipe through players matched to your rank and playstyle. All Ranked Casual Mic on Under 30ms \u2715 \u26a1 \u2665<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":11,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/twojpodarunek.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}