sinologla\u015ft\u0131r\u0131c\u0131 \u2728<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Quicksand:wght@500;700&display=swap');\n\n :root {\n --primary: #ff69b4;\n --secondary: #ffb7c5;\n --bg: #fff0f5;\n --text: #d63384;\n }\n\n body {\n font-family: 'Quicksand', sans-serif;\n background-color: var(--bg);\n background-image: radial-gradient(#ff69b4 1px, transparent 1px);\n background-size: 20px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n color: var(--text);\n }\n\n h1 {\n font-family: 'Fredoka One', cursive;\n font-size: 3rem;\n text-shadow: 3px 3px 0px #fff;\n margin-bottom: 10px;\n letter-spacing: 2px;\n background: -webkit-linear-gradient(#ff69b4, #ff1493);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .container {\n background: white;\n padding: 20px;\n border-radius: 30px;\n box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3);\n text-align: center;\n max-width: 90%;\n width: 600px;\n border: 4px solid var(--secondary);\n }\n\n .canvas-wrapper {\n position: relative;\n margin: 20px auto;\n border-radius: 15px;\n overflow: hidden;\n border: 3px dashed var(--secondary);\n background: #fafafa;\n min-height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n canvas {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n .controls {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n justify-content: center;\n margin-top: 20px;\n }\n\n button, .file-upload {\n background: var(--primary);\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 50px;\n font-family: 'Fredoka One', cursive;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n box-shadow: 0 4px 0 #c71585;\n }\n\n button:hover, .file-upload:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 0 #c71585;\n }\n\n button:active {\n transform: translateY(2px);\n box-shadow: 0 0 0 #c71585;\n }\n\n button.secondary {\n background: var(--secondary);\n box-shadow: 0 4px 0 #ff69b4;\n }\n \n button.secondary:hover {\n box-shadow: 0 6px 0 #ff69b4;\n }\n\n input[type=\"file\"] {\n display: none;\n }\n\n .slider-group {\n width: 100%;\n margin: 15px 0;\n padding: 10px;\n background: #fff0f5;\n border-radius: 15px;\n }\n\n label {\n font-weight: bold;\n display: block;\n margin-bottom: 5px;\n }\n\n input[type=\"range\"] {\n width: 100%;\n accent-color: var(--primary);\n }\n\n .placeholder-text {\n color: #ccc;\n font-size: 1.2rem;\n }\n\n <\/style>\n<\/head>\n<body>\n\n <h1>sinologla\u015ft\u0131r\u0131c\u0131 \u2728<\/h1>\n\n <div class=\"container\">\n <div class=\"canvas-wrapper\" id=\"canvasContainer\">\n <p class=\"placeholder-text\">Upload a photo to start! \ud83c\udf38<\/p>\n <canvas id=\"editorCanvas\"><\/canvas>\n <\/div>\n\n <div class=\"controls\">\n <label for=\"imageUpload\" class=\"file-upload\">\ud83d\udcf7 Upload Photo<\/label>\n <input type=\"file\" id=\"imageUpload\" accept=\"image\/*\">\n \n <button onclick=\"applyFilter('none')\">Reset<\/button>\n <button class=\"secondary\" onclick=\"applyFilter('grayscale')\">B&W<\/button>\n <button class=\"secondary\" onclick=\"applyFilter('sepia')\">Vintage<\/button>\n <button class=\"secondary\" onclick=\"applyFilter('invert')\">Trippy<\/button>\n \n <button style=\"background: linear-gradient(45deg, #ff69b4, #ffd700);\" onclick=\"sprinkleEmojis()\">\u2728 Magic Emoji Sprinkle \u2728<\/button>\n \n <button onclick=\"downloadImage()\">\ud83d\udcbe Save<\/button>\n <\/div>\n\n <div class=\"slider-group\">\n <label>Brightness \u2600\ufe0f<\/label>\n <input type=\"range\" id=\"brightness\" min=\"0\" max=\"200\" value=\"100\" oninput=\"updateFilters()\">\n \n <label style=\"margin-top:10px;\">Saturation \ud83c\udfa8<\/label>\n <input type=\"range\" id=\"saturation\" min=\"0\" max=\"200\" value=\"100\" oninput=\"updateFilters()\">\n \n <label style=\"margin-top:10px;\">Contrast \ud83c\udf17<\/label>\n <input type=\"range\" id=\"contrast\" min=\"0\" max=\"200\" value=\"100\" oninput=\"updateFilters()\">\n <\/div>\n <\/div>\n\n <script>\n const canvas = document.getElementById('editorCanvas');\n const ctx = canvas.getContext('2d');\n const imageUpload = document.getElementById('imageUpload');\n const canvasContainer = document.getElementById('canvasContainer');\n const placeholder = document.querySelector('.placeholder-text');\n\n let originalImage = null;\n let currentFilter = 'none';\n let emojis = []; \/\/ Store emoji objects\n\n \/\/ Handle Image Upload\n imageUpload.addEventListener('change', (e) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n originalImage = new Image();\n originalImage.onload = () => {\n \/\/ Resize canvas to fit image\n canvas.width = originalImage.width;\n canvas.height = originalImage.height;\n \n \/\/ Hide placeholder\n placeholder.style.display = 'none';\n \n \/\/ Reset emojis on new image\n emojis = [];\n \n draw();\n }\n originalImage.src = event.target.result;\n }\n reader.readAsDataURL(e.target.files[0]);\n });\n\n \/\/ Drawing Function\n function draw() {\n if (!originalImage) return;\n\n \/\/ Clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n \/\/ Apply Filters to Context\n ctx.filter = getFilterString();\n \n \/\/ Draw Image\n ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);\n\n \/\/ Reset filter so emojis aren't affected by image filters (optional, but looks better)\n ctx.filter = 'none';\n\n \/\/ Draw Emojis\n emojis.forEach(emoji => {\n ctx.font = `${emoji.size}px Arial`;\n ctx.fillText(emoji.char, emoji.x, emoji.y);\n });\n }\n\n \/\/ Get CSS Filter String based on sliders\n function getFilterString() {\n const bright = document.getElementById('brightness').value;\n const sat = document.getElementById('saturation').value;\n const cont = document.getElementById('contrast').value;\n \n let filter = `brightness(${bright}%) saturate(${sat}%) contrast(${cont}%)`;\n\n if (currentFilter === 'grayscale') filter += ' grayscale(100%)';\n if (currentFilter === 'sepia') filter += ' sepia(100%)';\n if (currentFilter === 'invert') filter += ' invert(100%)';\n\n return filter;\n }\n\n \/\/ Apply specific filters\n function applyFilter(filterName) {\n currentFilter = filterName;\n draw();\n }\n\n \/\/ Update sliders\n function updateFilters() {\n draw();\n }\n\n \/\/ THE MAGIC EMOJI FUNCTION\n function sprinkleEmojis() {\n if (!originalImage) {\n alert(\"Please upload a photo first! \ud83c\udf38\");\n return;\n }\n\n const emojiList = ['\u2728', '\ud83d\udc96', '\ud83c\udf38', '\ud83e\udd84', '\ud83c\udf6d', '\ud83c\udf80', '\ud83d\udc85', '\ud83d\udc51', '\ud83d\udc8b', '\ud83c\udf53', '\ud83c\udf52', '\ud83e\uddda\u200d\u2640\ufe0f', '\ud83d\udc8e'];\n \n \/\/ Add 15 random emojis\n for (let i = 0; i < 15; i++) {\n const randomEmoji = emojiList[Math.floor(Math.random() * emojiList.length)];\n const randomX = Math.random() * canvas.width;\n const randomY = Math.random() * canvas.height;\n const randomSize = Math.floor(Math.random() * 40) + 30; \/\/ Size between 30px and 70px\n \n emojis.push({\n char: randomEmoji,\n x: randomX,\n y: randomY,\n size: randomSize\n });\n }\n draw();\n }\n\n \/\/ Download Function\n function downloadImage() {\n if (!originalImage) return;\n \n const link = document.createElement('a');\n link.download = 'sinologlastirici-edit.png';\n link.href = canvas.toDataURL();\n link.click();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>sinologla\u015ft\u0131r\u0131c\u0131 \u2728 sinologla\u015ft\u0131r\u0131c\u0131 \u2728 Upload a photo to start! \ud83c\udf38 \ud83d\udcf7 Upload Photo Reset B&W Vintage Trippy \u2728 Magic Emoji Sprinkle \u2728 \ud83d\udcbe Save Brightness \u2600\ufe0f Saturation \ud83c\udfa8 Contrast \ud83c\udf17<\/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-158","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages\/158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atakan.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=158"}],"version-history":[{"count":1,"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages\/158\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages\/158\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/atakan.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":158,"date":"2026-02-28T14:30:44","date_gmt":"2026-02-28T11:30:44","guid":{"rendered":"https:\/\/atakan.online\/?page_id=158"},"modified":"2026-02-28T14:30:44","modified_gmt":"2026-02-28T11:30:44","slug":"sinologlastirici","status":"publish","type":"page","link":"https:\/\/atakan.online\/?page_id=158","title":{"rendered":"sinologla\u015ft\u0131r\u0131c\u0131"},"content":{"rendered":"\n\n\n\n \n \n sinologla\u015ft\u0131r\u0131c\u0131 \u2728<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Quicksand:wght@500;700&display=swap');\n\n :root {\n --primary: #ff69b4;\n --secondary: #ffb7c5;\n --bg: #fff0f5;\n --text: #d63384;\n }\n\n body {\n font-family: 'Quicksand', sans-serif;\n background-color: var(--bg);\n background-image: radial-gradient(#ff69b4 1px, transparent 1px);\n background-size: 20px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n color: var(--text);\n }\n\n h1 {\n font-family: 'Fredoka One', cursive;\n font-size: 3rem;\n text-shadow: 3px 3px 0px #fff;\n margin-bottom: 10px;\n letter-spacing: 2px;\n background: -webkit-linear-gradient(#ff69b4, #ff1493);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .container {\n background: white;\n padding: 20px;\n border-radius: 30px;\n box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3);\n text-align: center;\n max-width: 90%;\n width: 600px;\n border: 4px solid var(--secondary);\n }\n\n .canvas-wrapper {\n position: relative;\n margin: 20px auto;\n border-radius: 15px;\n overflow: hidden;\n border: 3px dashed var(--secondary);\n background: #fafafa;\n min-height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n canvas {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n .controls {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n justify-content: center;\n margin-top: 20px;\n }\n\n button, .file-upload {\n background: var(--primary);\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 50px;\n font-family: 'Fredoka One', cursive;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n box-shadow: 0 4px 0 #c71585;\n }\n\n button:hover, .file-upload:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 0 #c71585;\n }\n\n button:active {\n transform: translateY(2px);\n box-shadow: 0 0 0 #c71585;\n }\n\n button.secondary {\n background: var(--secondary);\n box-shadow: 0 4px 0 #ff69b4;\n }\n \n button.secondary:hover {\n box-shadow: 0 6px 0 #ff69b4;\n }\n\n input[type=\"file\"] {\n display: none;\n }\n\n .slider-group {\n width: 100%;\n margin: 15px 0;\n padding: 10px;\n background: #fff0f5;\n border-radius: 15px;\n }\n\n label {\n font-weight: bold;\n display: block;\n margin-bottom: 5px;\n }\n\n input[type=\"range\"] {\n width: 100%;\n accent-color: var(--primary);\n }\n\n .placeholder-text {\n color: #ccc;\n font-size: 1.2rem;\n }\n\n <\/style>\n<\/head>\n<body>\n\n <h1>sinologla\u015ft\u0131r\u0131c\u0131 \u2728<\/h1>\n\n <div class=\"container\">\n <div class=\"canvas-wrapper\" id=\"canvasContainer\">\n <p class=\"placeholder-text\">Upload a photo to start! \ud83c\udf38<\/p>\n <canvas id=\"editorCanvas\"><\/canvas>\n <\/div>\n\n <div class=\"controls\">\n <label for=\"imageUpload\" class=\"file-upload\">\ud83d\udcf7 Upload Photo<\/label>\n <input type=\"file\" id=\"imageUpload\" accept=\"image\/*\">\n \n <button onclick=\"applyFilter('none')\">Reset<\/button>\n <button class=\"secondary\" onclick=\"applyFilter('grayscale')\">B&W<\/button>\n <button class=\"secondary\" onclick=\"applyFilter('sepia')\">Vintage<\/button>\n <button class=\"secondary\" onclick=\"applyFilter('invert')\">Trippy<\/button>\n \n <button style=\"background: linear-gradient(45deg, #ff69b4, #ffd700);\" onclick=\"sprinkleEmojis()\">\u2728 Magic Emoji Sprinkle \u2728<\/button>\n \n <button onclick=\"downloadImage()\">\ud83d\udcbe Save<\/button>\n <\/div>\n\n <div class=\"slider-group\">\n <label>Brightness \u2600\ufe0f<\/label>\n <input type=\"range\" id=\"brightness\" min=\"0\" max=\"200\" value=\"100\" oninput=\"updateFilters()\">\n \n <label style=\"margin-top:10px;\">Saturation \ud83c\udfa8<\/label>\n <input type=\"range\" id=\"saturation\" min=\"0\" max=\"200\" value=\"100\" oninput=\"updateFilters()\">\n \n <label style=\"margin-top:10px;\">Contrast \ud83c\udf17<\/label>\n <input type=\"range\" id=\"contrast\" min=\"0\" max=\"200\" value=\"100\" oninput=\"updateFilters()\">\n <\/div>\n <\/div>\n\n <script>\n const canvas = document.getElementById('editorCanvas');\n const ctx = canvas.getContext('2d');\n const imageUpload = document.getElementById('imageUpload');\n const canvasContainer = document.getElementById('canvasContainer');\n const placeholder = document.querySelector('.placeholder-text');\n\n let originalImage = null;\n let currentFilter = 'none';\n let emojis = []; \/\/ Store emoji objects\n\n \/\/ Handle Image Upload\n imageUpload.addEventListener('change', (e) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n originalImage = new Image();\n originalImage.onload = () => {\n \/\/ Resize canvas to fit image\n canvas.width = originalImage.width;\n canvas.height = originalImage.height;\n \n \/\/ Hide placeholder\n placeholder.style.display = 'none';\n \n \/\/ Reset emojis on new image\n emojis = [];\n \n draw();\n }\n originalImage.src = event.target.result;\n }\n reader.readAsDataURL(e.target.files[0]);\n });\n\n \/\/ Drawing Function\n function draw() {\n if (!originalImage) return;\n\n \/\/ Clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n \/\/ Apply Filters to Context\n ctx.filter = getFilterString();\n \n \/\/ Draw Image\n ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);\n\n \/\/ Reset filter so emojis aren't affected by image filters (optional, but looks better)\n ctx.filter = 'none';\n\n \/\/ Draw Emojis\n emojis.forEach(emoji => {\n ctx.font = `${emoji.size}px Arial`;\n ctx.fillText(emoji.char, emoji.x, emoji.y);\n });\n }\n\n \/\/ Get CSS Filter String based on sliders\n function getFilterString() {\n const bright = document.getElementById('brightness').value;\n const sat = document.getElementById('saturation').value;\n const cont = document.getElementById('contrast').value;\n \n let filter = `brightness(${bright}%) saturate(${sat}%) contrast(${cont}%)`;\n\n if (currentFilter === 'grayscale') filter += ' grayscale(100%)';\n if (currentFilter === 'sepia') filter += ' sepia(100%)';\n if (currentFilter === 'invert') filter += ' invert(100%)';\n\n return filter;\n }\n\n \/\/ Apply specific filters\n function applyFilter(filterName) {\n currentFilter = filterName;\n draw();\n }\n\n \/\/ Update sliders\n function updateFilters() {\n draw();\n }\n\n \/\/ THE MAGIC EMOJI FUNCTION\n function sprinkleEmojis() {\n if (!originalImage) {\n alert(\"Please upload a photo first! \ud83c\udf38\");\n return;\n }\n\n const emojiList = ['\u2728', '\ud83d\udc96', '\ud83c\udf38', '\ud83e\udd84', '\ud83c\udf6d', '\ud83c\udf80', '\ud83d\udc85', '\ud83d\udc51', '\ud83d\udc8b', '\ud83c\udf53', '\ud83c\udf52', '\ud83e\uddda\u200d\u2640\ufe0f', '\ud83d\udc8e'];\n \n \/\/ Add 15 random emojis\n for (let i = 0; i < 15; i++) {\n const randomEmoji = emojiList[Math.floor(Math.random() * emojiList.length)];\n const randomX = Math.random() * canvas.width;\n const randomY = Math.random() * canvas.height;\n const randomSize = Math.floor(Math.random() * 40) + 30; \/\/ Size between 30px and 70px\n \n emojis.push({\n char: randomEmoji,\n x: randomX,\n y: randomY,\n size: randomSize\n });\n }\n draw();\n }\n\n \/\/ Download Function\n function downloadImage() {\n if (!originalImage) return;\n \n const link = document.createElement('a');\n link.download = 'sinologlastirici-edit.png';\n link.href = canvas.toDataURL();\n link.click();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>sinologla\u015ft\u0131r\u0131c\u0131 \u2728 sinologla\u015ft\u0131r\u0131c\u0131 \u2728 Upload a photo to start! \ud83c\udf38 \ud83d\udcf7 Upload Photo Reset B&W Vintage Trippy \u2728 Magic Emoji Sprinkle \u2728 \ud83d\udcbe Save Brightness \u2600\ufe0f Saturation \ud83c\udfa8 Contrast \ud83c\udf17<\/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-158","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages\/158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atakan.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=158"}],"version-history":[{"count":1,"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages\/158\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/atakan.online\/index.php?rest_route=\/wp\/v2\/pages\/158\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/atakan.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}