{"id":298,"date":"2023-06-29T06:51:05","date_gmt":"2023-06-29T03:51:05","guid":{"rendered":"https:\/\/tamoza.net\/?p=298"},"modified":"2026-05-12T19:38:28","modified_gmt":"2026-05-12T19:38:28","slug":"random-team-generator","status":"publish","type":"post","link":"https:\/\/test.tamoza.xyz\/?p=298","title":{"rendered":"Random Team Generator"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<br>\n\n\n\n<!-- Tamoza Team Generator - New Design + Fully Functional -->\n<style>\n.tamoza-teamgen {\n    --tg-start: #6366F1;\n    --tg-end: #22D3EE;\n    --tg-gradient: linear-gradient(135deg, #6366F1, #22D3EE);\n    --tg-glass-bg: rgba(255, 255, 255, 0.05);\n    --tg-glass-border: rgba(255, 255, 255, 0.1);\n    --tg-glass-hover: rgba(255, 255, 255, 0.08);\n    --tg-radius: 16px;\n    --tg-radius-sm: 8px;\n    max-width: 600px;\n    margin: 2rem auto;\n    background: var(--tg-glass-bg);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    border: 1px solid var(--tg-glass-border);\n    border-radius: var(--tg-radius);\n    padding: 2rem;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n    font-family: \"SF Pro Display\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    color: rgba(255, 255, 255, 0.87);\n    direction: ltr;\n}\n.tamoza-teamgen-title {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #ffffff;\n    margin-bottom: 1.5rem;\n    padding-bottom: 0.75rem;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.tamoza-teamgen-title::before {\n    content: \"\";\n    width: 4px; height: 20px;\n    background: var(--tg-gradient);\n    border-radius: 9999px;\n}\n.tamoza-teamgen-title svg { width: 22px; height: 22px; stroke: var(--tg-end); fill: none; stroke-width: 2; }\n\n.tamoza-teamgen-group { margin-bottom: 1.25rem; }\n.tamoza-teamgen-label {\n    display: flex; align-items: center; gap: 6px;\n    font-size: 0.875rem; font-weight: 500;\n    color: rgba(255, 255, 255, 0.7); margin-bottom: 0.5rem;\n}\n.tamoza-teamgen-label svg { width: 18px; height: 18px; stroke: rgba(255, 255, 255, 0.4); fill: none; stroke-width: 2; }\n\n.tamoza-teamgen textarea {\n    width: 100%; min-height: 130px; padding: 12px 14px;\n    color: #ffffff; background: rgba(255, 255, 255, 0.03);\n    border: 1px solid var(--tg-glass-border); border-radius: var(--tg-radius-sm);\n    outline: none; resize: vertical; box-sizing: border-box; font-family: inherit;\n}\n.tamoza-teamgen textarea:focus { border-color: var(--tg-start); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }\n\n.tamoza-teamgen-count { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.35); text-align: right; margin-top: 6px; }\n\n.tamoza-teamgen-num-wrapper { display: flex; align-items: center; gap: 6px; }\n.tamoza-teamgen-num-wrapper input[type=\"number\"] {\n    flex: 1; text-align: center; font-weight: 600; color: #ffffff;\n    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--tg-glass-border);\n    border-radius: var(--tg-radius-sm); padding: 10px 14px; outline: none; -moz-appearance: textfield;\n}\n.tamoza-teamgen-num-wrapper input::-webkit-outer-spin-button,\n.tamoza-teamgen-num-wrapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n.tamoza-teamgen-num-btn {\n    width: 42px; height: 42px; display: inline-flex; justify-content: center; align-items: center;\n    border: 1px solid var(--tg-glass-border); border-radius: var(--tg-radius-sm);\n    cursor: pointer; background: var(--tg-glass-bg); color: rgba(255, 255, 255, 0.6);\n}\n.tamoza-teamgen-num-btn:hover { background: var(--tg-glass-hover); color: #ffffff; }\n.tamoza-teamgen-num-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }\n\n.tamoza-teamgen-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 0.75rem; }\n.tamoza-teamgen-checkbox input { cursor: pointer; width: 18px; height: 18px; }\n.tamoza-teamgen-checkbox label { cursor: pointer; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }\n\n.tamoza-teamgen-custom-names {\n    margin-top: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03);\n    border: 1px solid var(--tg-glass-border); border-radius: var(--tg-radius-sm); display: none;\n}\n.tamoza-teamgen-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }\n.tamoza-teamgen-name-row label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); min-width: 65px; text-align: right; }\n.tamoza-teamgen-name-row input {\n    flex: 1; padding: 8px 12px; color: #ffffff; background: rgba(255, 255, 255, 0.03);\n    border: 1px solid var(--tg-glass-border); border-radius: 6px; font-size: 0.875rem; outline: none;\n}\n\n.tamoza-teamgen-btn {\n    width: 100%; color: #ffffff; border: none; cursor: pointer;\n    background: var(--tg-gradient); font-size: 0.9375rem; font-weight: 600;\n    padding: 0.875rem; border-radius: var(--tg-radius-sm); text-transform: uppercase;\n    margin-top: 1.5rem; transition: transform 0.1s;\n}\n.tamoza-teamgen-btn:active { transform: scale(0.98); }\n\n.tamoza-team-card { margin-bottom: 1.5rem; border-radius: var(--tg-radius-sm); overflow: hidden; border: 1px solid var(--tg-glass-border); }\n.tamoza-team-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 600; color: #ffffff; }\n.tamoza-team-header-dot { width: 8px; height: 8px; border-radius: 50%; }\n.tamoza-team-list { list-style: none; padding: 12px 14px; margin: 0; background: rgba(255, 255, 255, 0.03); }\n.tamoza-team-list li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.8); font-size: 0.9375rem; }\n\n.tamoza-teamgen-copy {\n    display: none; align-items: center; justify-content: center; gap: 8px;\n    margin: 1.5rem auto 0; padding: 10px 22px; background: rgba(255, 255, 255, 0.05);\n    color: rgba(255, 255, 255, 0.7); border: 1px solid var(--tg-glass-border);\n    border-radius: var(--tg-radius-sm); cursor: pointer; font-size: 0.875rem;\n}\n.tamoza-teamgen-copy.visible { display: flex; }\n<\/style>\n\n<div class=\"tamoza-teamgen\">\n    <div class=\"tamoza-teamgen-title\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n        Team Generator\n    <\/div>\n\n    <div class=\"tamoza-teamgen-group\">\n        <label class=\"tamoza-teamgen-label\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\n            Participant names (one per line)\n        <\/label>\n        <textarea id=\"tamoza-names\" placeholder=\"Tamoza&#10;Arsenalyy&#10;uFaris\"><\/textarea>\n        <p id=\"tamoza-count\" class=\"tamoza-teamgen-count\">Names: 0<\/p>\n    <\/div>\n\n    <div class=\"tamoza-teamgen-group\">\n        <label class=\"tamoza-teamgen-label\">\n            <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\n            Number of teams\n        <\/label>\n        <div class=\"tamoza-teamgen-num-wrapper\">\n            <button type=\"button\" id=\"tamoza-dec\" class=\"tamoza-teamgen-num-btn\">\n                <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/button>\n            <input type=\"number\" id=\"tamoza-num\" value=\"2\" min=\"1\">\n            <button type=\"button\" id=\"tamoza-inc\" class=\"tamoza-teamgen-num-btn\">\n                <svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"tamoza-teamgen-group\">\n        <div class=\"tamoza-teamgen-checkbox\">\n            <input type=\"checkbox\" id=\"tamoza-custom-toggle\">\n            <label for=\"tamoza-custom-toggle\">Customize team names<\/label>\n        <\/div>\n        <div id=\"tamoza-custom-area\" class=\"tamoza-teamgen-custom-names\"><\/div>\n    <\/div>\n\n    <p id=\"tamoza-error\" style=\"color:#FCA5A5; display:none; text-align:center; font-size:0.875rem; margin:10px 0;\"><\/p>\n    \n    <button type=\"button\" id=\"tamoza-generate\" class=\"tamoza-teamgen-btn\">Generate Teams<\/button>\n\n    <div id=\"tamoza-output\" style=\"margin-top: 2rem;\"><\/div>\n    <button type=\"button\" id=\"tamoza-copy\" class=\"tamoza-teamgen-copy\">Copy All Teams<\/button>\n<\/div>\n\n<script>\n(function() {\n    const namesArea = document.getElementById('tamoza-names');\n    const numInput = document.getElementById('tamoza-num');\n    const customToggle = document.getElementById('tamoza-custom-toggle');\n    const customArea = document.getElementById('tamoza-custom-area');\n    const outputDiv = document.getElementById('tamoza-output');\n    const errorDiv = document.getElementById('tamoza-error');\n    const copyBtn = document.getElementById('tamoza-copy');\n    const countP = document.getElementById('tamoza-count');\n\n    \/\/ \u0639\u062f\u0627\u062f \u0627\u0644\u0623\u0633\u0645\u0627\u0621\n    namesArea.addEventListener('input', () => {\n        const names = namesArea.value.trim().split('\\n').filter(n => n.trim() !== \"\");\n        countP.textContent = \"Names: \" + names.length;\n    });\n\n    \/\/ \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0632\u064a\u0627\u062f\u0629 \u0648\u0627\u0644\u0646\u0642\u0635\u0627\u0646\n    document.getElementById('tamoza-dec').onclick = () => {\n        if (numInput.value > 1) {\n            numInput.value--;\n            if(customToggle.checked) updateCustomInputs();\n        }\n    };\n    document.getElementById('tamoza-inc').onclick = () => {\n        numInput.value++;\n        if(customToggle.checked) updateCustomInputs();\n    };\n\n    \/\/ \u062a\u062d\u062f\u064a\u062b \u062d\u0642\u0648\u0644 \u0627\u0644\u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0645\u062e\u0635\u0635\u0629\n    function updateCustomInputs() {\n        const n = parseInt(numInput.value);\n        customArea.innerHTML = \"\";\n        for (let i = 1; i <= n; i++) {\n            const row = document.createElement('div');\n            row.className = 'tamoza-teamgen-name-row';\n            row.innerHTML = `<label>Team ${i}:<\/label><input type=\"text\" class=\"tg-custom-in\" placeholder=\"Team ${i}\">`;\n            customArea.appendChild(row);\n        }\n    }\n\n    customToggle.onchange = function() {\n        customArea.style.display = this.checked ? 'block' : 'none';\n        if (this.checked) updateCustomInputs();\n    };\n\n    \/\/ \u062e\u0648\u0627\u0631\u0632\u0645\u064a\u0629 \u0627\u0644\u062a\u0648\u0632\u064a\u0639 \u0648\u0627\u0644\u0625\u0646\u0634\u0627\u0621\n    document.getElementById('tamoza-generate').onclick = function() {\n        errorDiv.style.display = 'none';\n        const names = namesArea.value.trim().split('\\n').filter(n => n.trim() !== \"\");\n        const nTeams = parseInt(numInput.value);\n\n        if (names.length === 0) { errorDiv.innerText = \"Enter names first!\"; errorDiv.style.display=\"block\"; return; }\n        if (nTeams > names.length) { errorDiv.innerText = \"Teams > Names!\"; errorDiv.style.display=\"block\"; return; }\n\n        let shuffled = names.slice().sort(() => Math.random() - 0.5);\n        let teams = Array.from({ length: nTeams }, () => []);\n        shuffled.forEach((name, i) => teams[i % nTeams].push(name));\n\n        let teamNames = [];\n        if (customToggle.checked) {\n            document.querySelectorAll('.tg-custom-in').forEach((inp, i) => {\n                teamNames.push(inp.value.trim() || `Team ${i+1}`);\n            });\n        } else {\n            for(let i=1; i<=nTeams; i++) teamNames.push(`Team ${i}`);\n        }\n\n        outputDiv.innerHTML = \"\";\n        const colors = [\"#EF4444\", \"#3B82F6\", \"#22C55E\", \"#F59E0B\", \"#A855F7\", \"#06B6D4\"];\n        \n        teams.forEach((members, i) => {\n            const color = colors[i % colors.length];\n            const card = document.createElement('div');\n            card.className = 'tamoza-team-card';\n            card.innerHTML = `\n                <div class=\"tamoza-team-header\" style=\"background: ${color}22; border-left: 4px solid ${color}\">\n                    <span class=\"tamoza-team-header-dot\" style=\"background:${color}\"><\/span>\n                    <span>${teamNames[i]}<\/span>\n                <\/div>\n                <ul class=\"tamoza-team-list\">${members.map(m => `<li>${m}<\/li>`).join('')}<\/ul>\n            `;\n            outputDiv.appendChild(card);\n        });\n\n        copyBtn.classList.add('visible');\n    };\n\n    \/\/ \u0632\u0631 \u0627\u0644\u0646\u0633\u062e\n    copyBtn.onclick = function() {\n        let text = \"\";\n        document.querySelectorAll('.tamoza-team-card').forEach(card => {\n            text += card.querySelector('.tamoza-team-header span:last-child').innerText + \":\\n\";\n            card.querySelectorAll('li').forEach(li => text += \"- \" + li.innerText + \"\\n\");\n            text += \"\\n\";\n        });\n        navigator.clipboard.writeText(text.trim()).then(() => {\n            const oldTxt = copyBtn.innerText;\n            copyBtn.innerText = \"Copied!\";\n            setTimeout(() => copyBtn.innerText = oldTxt, 2000);\n        });\n    };\n})();\n<\/script>\n\n\n\n<br>\n<br>\n<br>\n","protected":false},"excerpt":{"rendered":"<p>Team Generator Participant names (one per line) Names: 0 Number of teams Customize team names Generate Teams Copy All Teams<\/p>\n","protected":false},"author":1,"featured_media":306,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-onlinetools"],"_links":{"self":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=298"}],"version-history":[{"count":9,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":750,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/298\/revisions\/750"}],"wp:attachment":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}