{"id":1717,"date":"2023-02-12T20:23:53","date_gmt":"2023-02-12T11:23:53","guid":{"rendered":"https:\/\/www.earce.biz\/?page_id=1717"},"modified":"2023-02-13T02:09:20","modified_gmt":"2023-02-12T17:09:20","slug":"tool-mockup-png-generator","status":"publish","type":"page","link":"https:\/\/www.earce.biz\/?page_id=1717","title":{"rendered":"[Tool] Mockup PNG Generator"},"content":{"rendered":"\n<style>\n  .toggle-input {\n    display   : none;\n  }\n\n  .toggle-input + label {\n    border    : inset 3px #f5f5f5;\n    border-radius : 28px;\n    padding-left  : 2em;\n    padding-right : 2em;\n    margin    : 5px;\n    background-color : #f8f8ff;\n    font-weight : bold !important;\n    color     : #808080;\n    height    : 3em;\n    display   : table-cell;\n    text-align: center;\n    vertical-align: middle;\n    line-height: 1.1;\n  }\n  \n  .toggle-input:checked + label{\n    background-color : #d3381c;\n    color     : white;\n  }\n<\/style>\n\n\n\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css?family=Source+Code+Pro');\n\n  .data-items {\n  }\n\n  .data-item {\n    display        : flex;\n    flex-wrap      : wrap;\n    margin-bottom  : 1em;\n    padding-bottom : 0.5em;\n    border-bottom  : solid 1px #eee;\n  }\n\n  .data-label {\n    width        : 100%;\n    margin-left  : 0.5em;\n    font-weight  : bold;\n  }\n\n  .data-value {\n    display   : -webkit-flex;\n    display   : flex;\n    -webkit-justify-content : space-between;\n    justify-content : space-between;\n    flex-wrap : wrap;\n    margin-left   : auto;\n    margin-right  : 0.5em;\n  }\n\n  .data-value-select {\n    display   : -webkit-flex;\n    display   : flex;\n    -webkit-justify-content : space-around;\n    justify-content : space-around;\n    flex-wrap : wrap;\n    width     : 100%;\n    margin-right  : 0.5em;\n  }\n\n  .data-value-select label {\n    width     : 20em;\n  }\n\n  #results div.flex {\n    display : flex;\n  }\n\n  #results div.flex div {\n    padding-right : 1em;\n  }\n\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\njQuery().ready(function($){\n\n$(\"#actionButton1\").click(\n  function(e) {\n\n    var url = 'https:\/\/www.earce.biz\/webapi\/png?width=' + $(\"#width\").val() + '&height=' + $(\"#height\").val() + \"&color=\" + $(\"#color\").val();\n\n    var htmlBuf = '<div class=\"flex\"><div><a target=\"_blank\" href=\"' + url + '\" rel=\"noopener\">' + $(\"#width\").val() + ' x ' + $(\"#height\").val() + ' (' + $(\"#color\").val() + ')<\/a><\/div><div><img decoding=\"async\" src=\"' + url + '\"><\/div><\/div><hr style=\"width:90%;\">';\n\n    \/\/htmlBuf += $(\"#color\").val();\n\n    beforeBuf = $(\"#results\").get()[0].innerHTML;\n    $(\"#results\").empty();\n    $(\"#results\").append(htmlBuf + beforeBuf);\n  }\n);\n\n});\n<\/script>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>PNG Setting<\/strong><\/p>\n\n\n\n<div class=\"data-items\">\n  <div class=\"data-item\">\n    <span class=\"data-label\"><span id=\"tip1\" class=\"tooltip\">Width<\/span><\/span>\n    <span class=\"data-value\"><input id=\"width\" type=\"number\" class=\"data-input\" style=\"width:6em;\" min=\"1\" max=\"9999\" maxlength=\"4\" value=\"160\" placeholder=\"\"><\/span>\n  <\/div>\n  <div class=\"data-item\">\n    <span class=\"data-label\"><span id=\"tip2\" class=\"tooltip\">Height<\/span><\/span>\n    <span class=\"data-value\"><input id=\"height\" type=\"number\" class=\"data-input\" style=\"width:6em;\" min=\"1\" max=\"9999\" maxlength=\"4\" value=\"160\" placeholder=\"\"><\/span>\n  <\/div>\n  <div class=\"data-item\">\n    <span class=\"data-label\"><span id=\"tip2\" class=\"tooltip\">Color (without #)<\/span><\/span>\n    <span class=\"data-value\" style=\"virtical-align:middle !important;\"><input id=\"color\" type=\"text\" class=\"data-input\" style=\"width:6em;\" maxlength=\"6\" value=\"a0a0a0\" placeholder=\"\"><\/span>\n  <\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-button aligncenter custom-wide-button\">\n  <button id=\"actionButton1\" type=\"button\" class=\"wp-block-button__link has-background has-vivid-cyan-blue-background-color\">Generate PNG<\/button>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Output List<\/strong><\/p>\n\n\n\n<div id=\"results\">\n  <div class=\"flex\">\n    <div><a target=\"_blank\" href=\"\/webapi\/png?width=64&#038;height=64&#038;color=a0a0a0\" rel=\"noopener\">64 x 64 (#a0a0a0)<\/a><\/div>\n    <div><img decoding=\"async\" src=\"https:\/\/www.earce.biz\/webapi\/png?width=64&amp;height=64\"><\/div>\n  <\/div>\n  <hr style=\"width:90%;\">\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>PNG Setting Width Height Color (without #) Generate PNG Output List 64 x 64 (#a0a0a0)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":35,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1717","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/1717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1717"}],"version-history":[{"count":90,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/1717\/revisions"}],"predecessor-version":[{"id":1809,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/1717\/revisions\/1809"}],"up":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/35"}],"wp:attachment":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}