Calculadora de Fotos para \u00c1lbum<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n \/* Efeito de transi\u00e7\u00e3o suave para os resultados *\/\r\n #resultadoContainer {\r\n transition: all 0.3s ease-in-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\r\n\r\n <div class=\"w-full max-w-md bg-white rounded-xl shadow-lg p-8 space-y-6\">\r\n \r\n \r\n <div class=\"text-center\">\r\n <h1 class=\"text-3xl font-bold text-gray-800\">Calculadora de \u00c1lbum<\/h1>\r\n <p class=\"text-gray-500 mt-2\">Calcule a combina\u00e7\u00e3o de fotos para o seu \u00e1lbum.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-blue-50 border border-blue-200 text-blue-800 rounded-lg p-4 text-sm\">\r\n <p><strong>Regras do \u00e1lbum:<\/strong><\/p>\r\n <ul class=\"list-disc list-inside mt-2 space-y-1\">\r\n <li>Cada p\u00e1gina do \u00e1lbum comporta <strong>2 fotos 10x15cm<\/strong>.<\/li>\r\n <li>Uma foto <strong>15x21cm<\/strong> ocupa o espa\u00e7o de uma p\u00e1gina inteira.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n <div>\r\n <label for=\"numero_paginas\" class=\"block text-lg font-medium text-gray-700 mb-2\">\r\n N\u00famero de p\u00e1ginas do \u00e1lbum\r\n <\/label>\r\n <input \r\n type=\"number\" \r\n id=\"numero_paginas\" \r\n name=\"numero_paginas\"\r\n min=\"1\"\r\n value=\"40\"\r\n class=\"w-full px-4 py-3 text-lg text-gray-900 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\"\r\n placeholder=\"Ex: 40\"\r\n >\r\n <\/div>\r\n <div>\r\n <label for=\"fotos_15x21\" class=\"block text-lg font-medium text-gray-700 mb-2\">\r\n Quantas fotos 15x21cm voc\u00ea quer usar?\r\n <\/label>\r\n <input \r\n type=\"number\" \r\n id=\"fotos_15x21\" \r\n name=\"fotos_15x21\"\r\n min=\"0\"\r\n value=\"15\"\r\n class=\"w-full px-4 py-3 text-lg text-gray-900 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\"\r\n placeholder=\"Ex: 15\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"resultadoContainer\" class=\"text-center bg-gray-50 rounded-lg p-6\">\r\n <p class=\"text-lg text-gray-600 mb-1\">Voc\u00ea ainda pode adicionar:<\/p>\r\n <p id=\"resultado\" class=\"text-5xl font-bold text-blue-600\">50<\/p>\r\n <p class=\"text-lg text-gray-600 mt-1\">fotos no tamanho 10x15cm<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- Elementos do DOM ---\r\n const inputNumeroPaginas = document.getElementById('numero_paginas');\r\n const inputFotosGrandes = document.getElementById('fotos_15x21');\r\n const resultadoTexto = document.getElementById('resultado');\r\n const resultadoContainer = document.getElementById('resultadoContainer');\r\n\r\n \/\/ --- Constante da L\u00f3gica ---\r\n const fatorConversao = 2; \/\/ Cada foto 15x21cm ocupa o espa\u00e7o de 2 fotos 10x15cm\r\n\r\n \/\/ --- Fun\u00e7\u00e3o de C\u00e1lculo ---\r\n function calcularFotosRestantes() {\r\n \/\/ L\u00ea o n\u00famero de p\u00e1ginas e valida\r\n let numPaginas = parseInt(inputNumeroPaginas.value, 10);\r\n if (isNaN(numPaginas) || numPaginas < 0) {\r\n numPaginas = 0;\r\n }\r\n\r\n \/\/ Calcula a capacidade total do \u00e1lbum com base nas p\u00e1ginas\r\n const totalEspacosPequenos = numPaginas * fatorConversao;\r\n const maxFotosGrandes = numPaginas; \/\/ O m\u00e1ximo de fotos grandes \u00e9 o n\u00famero de p\u00e1ginas\r\n\r\n \/\/ Atualiza o atributo 'max' do input de fotos grandes dinamicamente\r\n inputFotosGrandes.max = maxFotosGrandes;\r\n\r\n \/\/ L\u00ea a quantidade de fotos grandes e valida\r\n let quantidadeFotosGrandes = parseInt(inputFotosGrandes.value, 10);\r\n\r\n if (isNaN(quantidadeFotosGrandes) || quantidadeFotosGrandes < 0) {\r\n quantidadeFotosGrandes = 0;\r\n }\r\n \/\/ Garante que o n\u00famero de fotos grandes n\u00e3o exceda o m\u00e1ximo permitido\r\n if (quantidadeFotosGrandes > maxFotosGrandes) {\r\n quantidadeFotosGrandes = maxFotosGrandes;\r\n inputFotosGrandes.value = maxFotosGrandes;\r\n }\r\n\r\n \/\/ Calcula o espa\u00e7o utilizado e o restante\r\n const espacoOcupado = quantidadeFotosGrandes * fatorConversao;\r\n const fotosPequenasRestantes = totalEspacosPequenos - espacoOcupado;\r\n\r\n \/\/ Anima\u00e7\u00e3o e atualiza\u00e7\u00e3o do resultado\r\n resultadoContainer.style.transform = 'scale(0.95)';\r\n resultadoContainer.style.opacity = '0.7';\r\n \r\n setTimeout(() => {\r\n resultadoTexto.textContent = fotosPequenasRestantes;\r\n resultadoContainer.style.transform = 'scale(1)';\r\n resultadoContainer.style.opacity = '1';\r\n }, 150);\r\n }\r\n\r\n \/\/ --- Event Listeners ---\r\n \/\/ Adiciona ouvintes para ambos os campos de input\r\n inputNumeroPaginas.addEventListener('input', calcularFotosRestantes);\r\n inputFotosGrandes.addEventListener('input', calcularFotosRestantes);\r\n\r\n \/\/ --- Execu\u00e7\u00e3o Inicial ---\r\n \/\/ Garante que o c\u00e1lculo seja executado quando a p\u00e1gina carregar\r\n document.addEventListener('DOMContentLoaded', calcularFotosRestantes);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculadora de Fotos para \u00c1lbum Calculadora de \u00c1lbum Calcule a combina\u00e7\u00e3o de fotos para o seu \u00e1lbum. Regras do \u00e1lbum: Cada p\u00e1gina do \u00e1lbum comporta 2 fotos 10x15cm. Uma foto 15x21cm ocupa o espa\u00e7o de uma p\u00e1gina inteira. N\u00famero de p\u00e1ginas do \u00e1lbum Quantas fotos 15x21cm voc\u00ea quer usar? Voc\u00ea ainda pode adicionar: 50 fotos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2123","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages\/2123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=2123"}],"version-history":[{"count":7,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages\/2123\/revisions"}],"predecessor-version":[{"id":2130,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages\/2123\/revisions\/2130"}],"wp:attachment":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=2123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Calculadora de Fotos para \u00c1lbum<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n \/* Efeito de transi\u00e7\u00e3o suave para os resultados *\/\r\n #resultadoContainer {\r\n transition: all 0.3s ease-in-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\r\n\r\n <div class=\"w-full max-w-md bg-white rounded-xl shadow-lg p-8 space-y-6\">\r\n \r\n \r\n <div class=\"text-center\">\r\n <h1 class=\"text-3xl font-bold text-gray-800\">Calculadora de \u00c1lbum<\/h1>\r\n <p class=\"text-gray-500 mt-2\">Calcule a combina\u00e7\u00e3o de fotos para o seu \u00e1lbum.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-blue-50 border border-blue-200 text-blue-800 rounded-lg p-4 text-sm\">\r\n <p><strong>Regras do \u00e1lbum:<\/strong><\/p>\r\n <ul class=\"list-disc list-inside mt-2 space-y-1\">\r\n <li>Cada p\u00e1gina do \u00e1lbum comporta <strong>2 fotos 10x15cm<\/strong>.<\/li>\r\n <li>Uma foto <strong>15x21cm<\/strong> ocupa o espa\u00e7o de uma p\u00e1gina inteira.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n <div>\r\n <label for=\"numero_paginas\" class=\"block text-lg font-medium text-gray-700 mb-2\">\r\n N\u00famero de p\u00e1ginas do \u00e1lbum\r\n <\/label>\r\n <input \r\n type=\"number\" \r\n id=\"numero_paginas\" \r\n name=\"numero_paginas\"\r\n min=\"1\"\r\n value=\"40\"\r\n class=\"w-full px-4 py-3 text-lg text-gray-900 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\"\r\n placeholder=\"Ex: 40\"\r\n >\r\n <\/div>\r\n <div>\r\n <label for=\"fotos_15x21\" class=\"block text-lg font-medium text-gray-700 mb-2\">\r\n Quantas fotos 15x21cm voc\u00ea quer usar?\r\n <\/label>\r\n <input \r\n type=\"number\" \r\n id=\"fotos_15x21\" \r\n name=\"fotos_15x21\"\r\n min=\"0\"\r\n value=\"15\"\r\n class=\"w-full px-4 py-3 text-lg text-gray-900 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\"\r\n placeholder=\"Ex: 15\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"resultadoContainer\" class=\"text-center bg-gray-50 rounded-lg p-6\">\r\n <p class=\"text-lg text-gray-600 mb-1\">Voc\u00ea ainda pode adicionar:<\/p>\r\n <p id=\"resultado\" class=\"text-5xl font-bold text-blue-600\">50<\/p>\r\n <p class=\"text-lg text-gray-600 mt-1\">fotos no tamanho 10x15cm<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- Elementos do DOM ---\r\n const inputNumeroPaginas = document.getElementById('numero_paginas');\r\n const inputFotosGrandes = document.getElementById('fotos_15x21');\r\n const resultadoTexto = document.getElementById('resultado');\r\n const resultadoContainer = document.getElementById('resultadoContainer');\r\n\r\n \/\/ --- Constante da L\u00f3gica ---\r\n const fatorConversao = 2; \/\/ Cada foto 15x21cm ocupa o espa\u00e7o de 2 fotos 10x15cm\r\n\r\n \/\/ --- Fun\u00e7\u00e3o de C\u00e1lculo ---\r\n function calcularFotosRestantes() {\r\n \/\/ L\u00ea o n\u00famero de p\u00e1ginas e valida\r\n let numPaginas = parseInt(inputNumeroPaginas.value, 10);\r\n if (isNaN(numPaginas) || numPaginas < 0) {\r\n numPaginas = 0;\r\n }\r\n\r\n \/\/ Calcula a capacidade total do \u00e1lbum com base nas p\u00e1ginas\r\n const totalEspacosPequenos = numPaginas * fatorConversao;\r\n const maxFotosGrandes = numPaginas; \/\/ O m\u00e1ximo de fotos grandes \u00e9 o n\u00famero de p\u00e1ginas\r\n\r\n \/\/ Atualiza o atributo 'max' do input de fotos grandes dinamicamente\r\n inputFotosGrandes.max = maxFotosGrandes;\r\n\r\n \/\/ L\u00ea a quantidade de fotos grandes e valida\r\n let quantidadeFotosGrandes = parseInt(inputFotosGrandes.value, 10);\r\n\r\n if (isNaN(quantidadeFotosGrandes) || quantidadeFotosGrandes < 0) {\r\n quantidadeFotosGrandes = 0;\r\n }\r\n \/\/ Garante que o n\u00famero de fotos grandes n\u00e3o exceda o m\u00e1ximo permitido\r\n if (quantidadeFotosGrandes > maxFotosGrandes) {\r\n quantidadeFotosGrandes = maxFotosGrandes;\r\n inputFotosGrandes.value = maxFotosGrandes;\r\n }\r\n\r\n \/\/ Calcula o espa\u00e7o utilizado e o restante\r\n const espacoOcupado = quantidadeFotosGrandes * fatorConversao;\r\n const fotosPequenasRestantes = totalEspacosPequenos - espacoOcupado;\r\n\r\n \/\/ Anima\u00e7\u00e3o e atualiza\u00e7\u00e3o do resultado\r\n resultadoContainer.style.transform = 'scale(0.95)';\r\n resultadoContainer.style.opacity = '0.7';\r\n \r\n setTimeout(() => {\r\n resultadoTexto.textContent = fotosPequenasRestantes;\r\n resultadoContainer.style.transform = 'scale(1)';\r\n resultadoContainer.style.opacity = '1';\r\n }, 150);\r\n }\r\n\r\n \/\/ --- Event Listeners ---\r\n \/\/ Adiciona ouvintes para ambos os campos de input\r\n inputNumeroPaginas.addEventListener('input', calcularFotosRestantes);\r\n inputFotosGrandes.addEventListener('input', calcularFotosRestantes);\r\n\r\n \/\/ --- Execu\u00e7\u00e3o Inicial ---\r\n \/\/ Garante que o c\u00e1lculo seja executado quando a p\u00e1gina carregar\r\n document.addEventListener('DOMContentLoaded', calcularFotosRestantes);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculadora de Fotos para \u00c1lbum Calculadora de \u00c1lbum Calcule a combina\u00e7\u00e3o de fotos para o seu \u00e1lbum. Regras do \u00e1lbum: Cada p\u00e1gina do \u00e1lbum comporta 2 fotos 10x15cm. Uma foto 15x21cm ocupa o espa\u00e7o de uma p\u00e1gina inteira. N\u00famero de p\u00e1ginas do \u00e1lbum Quantas fotos 15x21cm voc\u00ea quer usar? Voc\u00ea ainda pode adicionar: 50 fotos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2123","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages\/2123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=2123"}],"version-history":[{"count":7,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages\/2123\/revisions"}],"predecessor-version":[{"id":2130,"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/pages\/2123\/revisions\/2130"}],"wp:attachment":[{"href":"https:\/\/valores.jrfotografo.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=2123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}