{"id":4666,"date":"2025-03-28T06:23:19","date_gmt":"2025-03-28T06:23:19","guid":{"rendered":"https:\/\/gerlachschule-aachen.de\/?page_id=4666"},"modified":"2025-03-28T11:50:45","modified_gmt":"2025-03-28T11:50:45","slug":"top10","status":"publish","type":"page","link":"https:\/\/gerlachschule-aachen.de\/index.php\/top10\/","title":{"rendered":"top10"},"content":{"rendered":"\n<style>\n    .top10-item {\n        display: flex;\n        align-items: center;\n        background: #eee;\n        padding: 10px;\n        margin: 8px 0;\n        border-radius: 10px;\n        box-shadow: 0 2px 5px rgba(0,0,0,0.15);\n        transition: all 0.3s;\n    }\n\n    .number-badge {\n        width: 40px;\n        height: 40px;\n        min-width: 40px;\n        border-radius: 50%;\n        background: #333;\n        color: #fff;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-weight: bold;\n        margin-right: 15px;\n        font-size: 16px;\n        box-shadow: 0 1px 3px rgba(0,0,0,0.2);\n    }\n\n    .top10-text {\n        flex: 1;\n        font-size: 18px;\n        word-break: break-word;\n    }\n\n    .top10-button {\n        margin: 5px;\n        padding: 8px 12px;\n        border: none;\n        background: #6B5B95;\n        color: white;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n\n    .top10-button:hover {\n        background: #563d7c;\n    }\n<\/style>\n\n<!-- STEP 1: TYPE SELECTION -->\n<div id=\"mode-select\">\n    <h2>Choose List Type<\/h2>\n    <button class=\"top10-button\" onclick=\"setup(3,'top')\">Top 3<\/button>\n    <button class=\"top10-button\" onclick=\"setup(5,'top')\">Top 5<\/button>\n    <button class=\"top10-button\" onclick=\"setup(10,'top')\">Top 10<\/button>\n    <button class=\"top10-button\" onclick=\"setup(3,'flop')\">Flop 3<\/button>\n    <button class=\"top10-button\" onclick=\"setup(5,'flop')\">Flop 5<\/button>\n    <button class=\"top10-button\" onclick=\"setup(10,'flop')\">Flop 10<\/button>\n<\/div>\n\n<!-- STEP 2: TOOL -->\n<div id=\"top10-tool\" style=\"display:none;\">\n    <h2 id=\"list-title\"><\/h2>\n    <input type=\"text\" id=\"custom-topic\" placeholder=\"Enter your topic (optional)\" style=\"display:block; margin-bottom:10px; padding:6px; width:100%;\">\n    <div id=\"inputs\"><\/div>\n    <button class=\"top10-button\" onclick=\"generateTop10()\">Create List<\/button>\n\n    <div id=\"top10-result\" style=\"margin-top:30px;\"><\/div>\n    <div id=\"buttons\" style=\"margin-top:15px; display:none;\">\n        <button class=\"top10-button\" onclick=\"remix()\">Remix<\/button>\n        <select id=\"emojiTheme\" class=\"top10-button\" style=\"margin-left:5px;\">\n            <option value=\"all\">All<\/option>\n            <option value=\"animals\">Animals<\/option>\n            <option value=\"party\">Party<\/option>\n            <option value=\"summer\">Summer<\/option>\n            <option value=\"faces\">Faces<\/option>\n        <\/select>\n        <button class=\"top10-button\" onclick=\"changeFontSize(1)\">+<\/button>\n        <button class=\"top10-button\" onclick=\"changeFontSize(-1)\">&#8211;<\/button>\n        <button class=\"top10-button\" onclick=\"toggleEmojis()\">Toggle Emojis<\/button>\n        <button class=\"top10-button\" onclick=\"saveAsImage()\">Save as Image<\/button>\n    <\/div>\n<\/div>\n\n<script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\n<script>\n\/\/ ---------------- SETTINGS ----------------\nconst colors = [\"#FF6F61\", \"#6B5B95\", \"#88B04B\", \"#F7CAC9\", \"#92A8D1\", \"#955251\", \"#B565A7\", \"#009B77\", \"#DD4124\", \"#45B8AC\"];\nconst fonts = [\"Arial\", \"Georgia\", \"Verdana\", \"Courier New\", \"Trebuchet MS\"];\nconst emojiThemes = {\n    animals: [...\"\ud83d\udc36\ud83d\udc31\ud83d\udc2d\ud83d\udc39\ud83d\udc30\ud83e\udd8a\ud83d\udc3b\ud83d\udc3c\ud83d\udc28\ud83d\udc2f\ud83e\udd81\ud83d\udc2e\ud83d\udc37\ud83d\udc38\ud83d\udc35\ud83d\udc14\ud83d\udc27\ud83d\udc26\ud83d\udc24\ud83e\udd86\ud83e\udd89\ud83e\udd84\ud83d\udc1d\ud83d\udc1e\ud83d\udc22\ud83d\udc0d\ud83e\udd95\ud83e\udd96\ud83e\udd8b\ud83d\udc19\"],\n    party: [...\"\ud83c\udf89\ud83c\udf8a\ud83c\udf88\ud83c\udf82\ud83c\udf70\ud83c\udf6d\ud83c\udf6c\ud83c\udf7f\ud83c\udf81\ud83e\udd73\ud83c\udfb5\ud83c\udfb6\ud83c\udfba\ud83c\udfb8\ud83c\udfa4\ud83e\ude85\ud83e\udea9\ud83e\ude84\ud83d\udcab\ud83c\udf1f\u2b50\u2728\ud83d\udd25\ud83d\udca5\ud83c\udfaf\ud83c\udfc6\ud83e\udd47\ud83e\udd48\ud83e\udd49\ud83c\udfae\"],\n    summer: [...\"\ud83c\udf1e\ud83c\udf3b\ud83c\udf34\ud83c\udf0a\ud83c\udf49\ud83c\udf53\ud83c\udf4d\ud83c\udf79\ud83c\udf66\ud83c\udf67\ud83c\udfd6\ufe0f\ud83c\udfdd\ufe0f\ud83e\ude74\ud83d\udd76\ufe0f\ud83e\uddf4\ud83c\udfa3\ud83d\udea3\u200d\u2642\ufe0f\ud83c\udfc4\u200d\u2640\ufe0f\ud83c\udfc4\u200d\u2642\ufe0f\u26f1\ufe0f\ud83d\udef6\u26f5\ud83c\udf3a\ud83e\udd80\ud83d\udc1a\ud83d\udc2c\ud83d\udc33\ud83e\udd91\ud83c\udf4b\ud83e\udd65\"],\n    faces: [...\"\ud83d\ude00\ud83d\ude03\ud83d\ude04\ud83d\ude01\ud83d\ude06\ud83d\ude05\ud83d\ude02\ud83e\udd23\ud83d\ude0a\ud83d\ude07\ud83d\ude42\ud83d\ude09\ud83d\ude0d\ud83d\ude18\ud83d\ude3b\ud83d\ude0e\ud83e\udd29\ud83e\udd70\ud83d\ude0b\ud83d\ude3a\ud83d\ude38\ud83d\ude3d\ud83d\ude3c\ud83d\ude43\ud83d\ude0c\ud83d\ude0f\ud83e\udd17\ud83d\ude07\ud83e\udd73\ud83d\ude04\"]\n};\n\nlet listSize = 10;\nlet listType = \"top\"; \nlet currentFont = fonts[0];\nlet currentFontSize = 18;\nlet emojiEnabled = true;\n\n\/\/ ---------------- UI LOGIC ----------------\nfunction setup(size, type) {\n    listSize = size;\n    listType = type;\n    document.getElementById(\"mode-select\").style.display = \"none\";\n    document.getElementById(\"top10-tool\").style.display = \"block\";\n    document.getElementById(\"list-title\").innerText = (type === \"top\" ? \"TOP \" : \"FLOP \") + size;\n    createInputs();\n}\n\nfunction createInputs() {\n    const inputsDiv = document.getElementById(\"inputs\");\n    inputsDiv.innerHTML = \"\";\n    for (let i = 1; i <= listSize; i++) {\n        const input = document.createElement(\"input\");\n        input.placeholder = \"Item #\" + i;\n        input.id = \"input\" + i;\n        input.style.display = \"block\";\n        input.style.margin = \"5px 0\";\n        input.style.padding = \"6px\";\n        input.style.width = \"100%\";\n        inputsDiv.appendChild(input);\n    }\n}\n\nfunction generateTop10() {\n    currentFont = fonts[Math.floor(Math.random() * fonts.length)];\n    currentFontSize = 18;\n    renderList();\n}\n\nfunction remix() {\n    currentFont = fonts[Math.floor(Math.random() * fonts.length)];\n    renderList();\n}\n\nfunction changeFontSize(delta) {\n    currentFontSize = Math.max(10, currentFontSize + delta);\n    const texts = document.querySelectorAll(\".top10-text\");\n    const badges = document.querySelectorAll(\".number-badge\");\n    texts.forEach(text => text.style.fontSize = currentFontSize + \"px\");\n    badges.forEach(badge => badge.style.fontSize = Math.max(12, currentFontSize * 0.9) + \"px\");\n}\n\nfunction toggleEmojis() {\n    emojiEnabled = !emojiEnabled;\n    renderList();\n}\n\n\/\/ ---------------- CORE LIST RENDER ----------------\nfunction renderList() {\n    const resultDiv = document.getElementById(\"top10-result\");\n    resultDiv.innerHTML = \"\";\n    const usedColors = [...colors];\n    const selectedTheme = document.getElementById(\"emojiTheme\").value;\n    const topic = document.getElementById(\"custom-topic\").value.trim();\n    const themeEmojis = (selectedTheme === \"all\") ? \n        Object.values(emojiThemes).flat() : \n        emojiThemes[selectedTheme] || emojiThemes[\"animals\"];\n\n    \/\/ --- HEADLINE ---\n    const headline = document.createElement(\"h2\");\n    headline.innerText = (listType === \"top\" ? \"TOP \" : \"FLOP \") + listSize + (topic ? \" \u2013 \" + topic : \"\");\n    headline.style.marginBottom = \"15px\";\n    resultDiv.appendChild(headline);\n\n    \/\/ --- ITEMS ---\n    for (let i = 1; i <= listSize; i++) {\n        const value = document.getElementById(\"input\" + i).value || \"(empty)\";\n        const div = document.createElement(\"div\");\n        div.className = \"top10-item\";\n        div.style.background = usedColors.splice(Math.floor(Math.random() * usedColors.length),1)[0];\n        div.style.fontFamily = currentFont;\n\n        const badge = document.createElement(\"div\");\n        badge.className = \"number-badge\";\n        badge.textContent = i;\n        badge.style.background = usedColors.length > 0 ? usedColors[Math.floor(Math.random() * usedColors.length)] : \"#333\";\n        badge.style.fontSize = Math.max(12, currentFontSize * 0.9) + \"px\";\n\n        const text = document.createElement(\"div\");\n        text.className = \"top10-text\";\n        text.style.fontSize = currentFontSize + \"px\";\n        const emoji = emojiEnabled ? \" \" + themeEmojis[Math.floor(Math.random() * themeEmojis.length)] : \"\";\n        text.innerHTML = value + emoji;\n\n        div.appendChild(badge);\n        div.appendChild(text);\n        resultDiv.appendChild(div);\n    }\n\n    document.getElementById(\"buttons\").style.display = \"block\";\n}\n\nfunction saveAsImage() {\n    html2canvas(document.getElementById(\"top10-result\")).then(function(canvas) {\n        const link = document.createElement(\"a\");\n        link.download = \"list.png\";\n        link.href = canvas.toDataURL();\n        link.click();\n    });\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Choose List Type Top 3 Top 5 Top 10 Flop 3 Flop 5 Flop 10 Create List Remix AllAnimalsPartySummerFaces + &#8211; Toggle Emojis Save as Image<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4666","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/pages\/4666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/comments?post=4666"}],"version-history":[{"count":5,"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/pages\/4666\/revisions"}],"predecessor-version":[{"id":4671,"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/pages\/4666\/revisions\/4671"}],"wp:attachment":[{"href":"https:\/\/gerlachschule-aachen.de\/index.php\/wp-json\/wp\/v2\/media?parent=4666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}