Lista de Projetos - Minimal<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #111111;\n --primary-text-color: #FFFFFF;\n --secondary-text-color: #A09FB1;\n --accent-color-1: #6C5DD3;\n --negative-color: #F87171;\n --card-bg-color-glass: rgba(38, 38, 38, 0.6);\n --card-border-color: rgba(255, 255, 255, 0.1);\n --shadow-dark: rgba(0, 0, 0, 0.4);\n --shadow-light: rgba(255, 255, 255, 0.05);\n --status-aguardando: #F59E0B;\n --status-construindo: #3B82F6;\n --status-pronto: #10B981;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--bg-color);\n background-image: url('https:\/\/globalmidia.digital\/wp-content\/uploads\/2025\/07\/purple-planet-earth-space-global-network-connections-cosmos-background-abstract-art.jpg');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n color: var(--primary-text-color);\n padding: 3rem;\n min-height: 100vh;\n }\n .app-container {\n width: 100%;\n max-width: 1800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2.5rem;\n }\n h1 {\n font-size: 4rem;\n font-weight: 700;\n text-shadow: 0 0 20px rgba(0,0,0,0.5);\n margin-bottom: 2rem;\n }\n .table-container {\n width: 100%;\n background-color: var(--card-bg-color-glass);\n backdrop-filter: blur(15px);\n padding: 2rem;\n border-radius: 24px;\n border: 1px solid var(--card-border-color);\n box-shadow: 5px 5px 15px var(--shadow-dark), inset 1px 1px 2px var(--shadow-light);\n }\n table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 1rem;\n }\n th {\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--secondary-text-color);\n text-align: left;\n padding: 0 1.5rem 1rem 1.5rem;\n border-bottom: 2px solid var(--card-border-color);\n }\n td {\n font-size: 1.75rem;\n padding: 1.5rem;\n vertical-align: middle;\n background-color: rgba(0,0,0,0.2);\n }\n tr:not(:first-child) {\n transition: all 0.2s ease-in-out;\n }\n tr:not(:first-child):hover {\n transform: scale(1.02);\n background-color: rgba(255,255,255,0.05);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n }\n td:first-child { border-radius: 12px 0 0 12px; }\n td:last-child { border-radius: 0 12px 12px 0; }\n .task-status {\n display: inline-block;\n font-weight: 700;\n font-size: 1.25rem;\n padding: 0.5rem 1.5rem;\n border-radius: 8px;\n color: #fff;\n text-align: center;\n }\n .task-status[data-status=\"Aguardando\"] { background-color: var(--status-aguardando); }\n .task-status[data-status=\"Construindo\"] { background-color: var(--status-construindo); }\n .task-status[data-status=\"Pronto\"] { background-color: var(--status-pronto); }\n .project-form {\n background: var(--card-bg-color-glass);\n border-radius: 18px;\n box-shadow: 0 4px 18px rgba(0,0,0,0.18);\n padding: 1.5rem 2rem 1.2rem 2rem;\n margin-bottom: 2.5rem;\n display: flex;\n gap: 1.5rem;\n flex-wrap: wrap;\n justify-content: center;\n align-items: flex-end;\n border: 1px solid var(--card-border-color);\n }\n .project-form .form-group {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n }\n .project-form label {\n font-size: 1.1rem;\n color: var(--secondary-text-color);\n font-weight: 500;\n }\n .project-form input, .project-form select {\n font-family: 'Inter', sans-serif;\n font-size: 1.2rem;\n font-weight: 500;\n padding: 0.7rem 1rem;\n border-radius: 10px;\n border: 1px solid var(--card-border-color);\n background-color: rgba(0, 0, 0, 0.18);\n color: var(--primary-text-color);\n transition: all 0.3s;\n min-width: 120px;\n }\n .project-form input:focus, .project-form select:focus {\n outline: none;\n border-color: var(--accent-color-1);\n box-shadow: 0 0 8px rgba(108, 93, 211, 0.3);\n }\n .submit-button, .io-button {\n font-family: 'Inter', sans-serif;\n font-size: 1.3rem;\n font-weight: 600;\n padding: 0.8rem 2.2rem;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n background: linear-gradient(90deg, var(--accent-color-1) 0%, #8F6FE8 100%);\n color: #fff;\n transition: all 0.3s;\n box-shadow: 0 2px 10px rgba(108, 93, 211, 0.18);\n }\n .submit-button:hover, .io-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(108, 93, 211, 0.28);\n }\n \/* Estilo espec\u00edfico para bot\u00e3o de importar *\/\n .io-button.import {\n background: linear-gradient(90deg, var(--status-construindo) 0%, #60a5fa 100%);\n }\n \/* Estilo espec\u00edfico para bot\u00e3o de exportar *\/\n .io-button.export {\n background: linear-gradient(90deg, var(--status-pronto) 0%, #34d399 100%);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n <h1>Lista de Projetos<\/h1>\n <form id=\"project-form\" class=\"project-form\">\n <div class=\"form-group\">\n <label for=\"client-name\">Cliente<\/label>\n <input type=\"text\" id=\"client-name\" name=\"client\" placeholder=\"Nome do Cliente\" required style=\"min-width:180px;\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"product\">Produto<\/label>\n <select id=\"product\" name=\"product\" required style=\"min-width:120px;\">\n <option value=\"Site\">Site<\/option>\n <option value=\"Landing Page\">Landing Page<\/option>\n <option value=\"Loja Virtual\">E-commerce<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"team\">Equipe<\/label>\n <select id=\"team\" name=\"team\" required style=\"min-width:120px;\">\n <option value=\"Livre\">Livre<\/option>\n <option value=\"Rodrigo\">Rodrigo<\/option>\n <option value=\"Ana Carolina\">Ana Carolina<\/option>\n <option value=\"Allan\">Allan<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"status\">Status<\/label>\n <select id=\"status\" name=\"status\" required style=\"min-width:120px;\">\n <option value=\"Aguardando\">Aguardando<\/option>\n <option value=\"Construindo\">Construindo<\/option>\n <option value=\"Pronto\">Pronto<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"submit-button\">Adicionar<\/button>\n \n \n <label for=\"import-file\" class=\"io-button import\" style=\"text-align: center;\">Importar JSON<\/label>\n <input type=\"file\" id=\"import-file\" accept=\".json\" style=\"display:none;\">\n <button type=\"button\" id=\"export-btn\" class=\"io-button export\">Exportar JSON<\/button>\n\n <\/form>\n <div class=\"table-container\">\n <table>\n <thead>\n <tr>\n <th>Cliente<\/th>\n <th>Produto<\/th>\n <th>Equipe<\/th>\n <th style=\"text-align: center;\">Status<\/th>\n <th style=\"text-align: center;\">A\u00e7\u00e3o<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const form = document.getElementById('project-form');\n const tableBody = document.querySelector('.table-container tbody');\n const exportBtn = document.getElementById('export-btn');\n const importFile = document.getElementById('import-file');\n\n \/\/ --- Persist\u00eancia localStorage ---\n const STORAGE_KEY = 'projetos-lista-v1';\n\n \/\/ Carrega dados salvos\n function loadProjects() {\n const data = localStorage.getItem(STORAGE_KEY);\n if (!data) return;\n try {\n const projetos = JSON.parse(data);\n projetos.forEach(proj => addRow(proj, false)); \/\/ n\u00e3o salvar ao carregar\n } catch (e) {\n console.error(\"Erro ao carregar projetos do localStorage:\", e);\n }\n }\n \n \/\/ Salva todos os projetos da tabela\n function saveProjects() {\n const rows = Array.from(tableBody.querySelectorAll('tr'));\n const projetos = rows.map(tr => {\n const tds = tr.querySelectorAll('td');\n return {\n client: tds[0].innerText,\n product: tds[1].innerText,\n team: tds[2].innerText,\n status: tds[3].querySelector('.task-status').innerText.trim() \/\/ Corrigido para pegar o texto do status\n };\n });\n localStorage.setItem(STORAGE_KEY, JSON.stringify(projetos));\n }\n\n \/\/ Adiciona linha e bot\u00e3o de excluir\n function addRow({client, product, team, status}, shouldSave = true) {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${client}<\/td>\n <td>${product}<\/td>\n <td>${team}<\/td>\n <td style=\"text-align:center;\"><span class=\"task-status\" data-status=\"${status}\">${status}<\/span><\/td>\n <td style=\"text-align:center;\"><button class=\"delete-row\" title=\"Excluir\" style=\"background:transparent;border:none;color:var(--secondary-text-color);font-size:1.5rem;cursor:pointer;\">\u00d7<\/button><\/td>\n `;\n tr.querySelector('.delete-row').addEventListener('click', function() {\n tr.remove();\n saveProjects();\n });\n tableBody.appendChild(tr);\n \n if (shouldSave) {\n saveProjects();\n }\n }\n \n \/\/ Submiss\u00e3o do formul\u00e1rio\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n const client = document.getElementById('client-name').value.trim();\n const product = document.getElementById('product').value;\n const team = document.getElementById('team').value;\n const status = document.getElementById('status').value;\n if (!client) return;\n addRow({client, product, team, status});\n form.reset();\n document.getElementById('client-name').focus();\n });\n\n \/\/ --- NOVAS FUN\u00c7\u00d5ES DE IMPORT\/EXPORT ---\n\n \/\/ Fun\u00e7\u00e3o para Exportar dados da tabela para um arquivo JSON\n function handleExport() {\n const rows = Array.from(tableBody.querySelectorAll('tr'));\n if (rows.length === 0) {\n alert(\"N\u00e3o h\u00e1 projetos para exportar!\");\n return;\n }\n \/\/ Usa a mesma l\u00f3gica de `saveProjects` para pegar os dados\n const projetos = rows.map(tr => {\n const tds = tr.querySelectorAll('td');\n return {\n client: tds[0].innerText,\n product: tds[1].innerText,\n team: tds[2].innerText,\n status: tds[3].querySelector('.task-status').innerText.trim()\n };\n });\n \n const dataStr = JSON.stringify(projetos, null, 2); \/\/ O '2' formata o JSON para ser leg\u00edvel\n const blob = new Blob([dataStr], {type: \"application\/json\"});\n const url = URL.createObjectURL(blob);\n \n const a = document.createElement('a');\n a.href = url;\n a.download = 'projetos-backup.json';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url); \/\/ Libera mem\u00f3ria\n }\n\n \/\/ Fun\u00e7\u00e3o para Importar dados de um arquivo JSON para a tabela\n function handleImport(event) {\n const file = event.target.files[0];\n if (!file) return;\n\n \/\/ Confirma\u00e7\u00e3o para evitar perda de dados\n if (!confirm(\"Isso substituir\u00e1 todos os projetos atuais. Deseja continuar?\")) {\n event.target.value = null; \/\/ Reseta o input de arquivo\n return;\n }\n\n const reader = new FileReader();\n reader.onload = function(e) {\n try {\n const projetos = JSON.parse(e.target.result);\n if (!Array.isArray(projetos)) throw new Error(\"O arquivo n\u00e3o cont\u00e9m uma lista de projetos v\u00e1lida.\");\n\n \/\/ Limpa a tabela atual\n tableBody.innerHTML = '';\n \n \/\/ Adiciona os novos projetos\n projetos.forEach(proj => {\n \/\/ Valida\u00e7\u00e3o simples do objeto importado\n if (proj.client && proj.product && proj.team && proj.status) {\n addRow(proj, false); \/\/ Adiciona sem salvar repetidamente\n }\n });\n\n saveProjects(); \/\/ Salva a lista importada no localStorage\n alert(\"Projetos importados com sucesso!\");\n\n } catch (error) {\n alert(\"Erro ao ler o arquivo. Verifique se \u00e9 um arquivo JSON v\u00e1lido gerado por este sistema.\\nDetalhes: \" + error.message);\n } finally {\n event.target.value = null; \/\/ Reseta para permitir importar o mesmo arquivo novamente\n }\n };\n reader.readAsText(file);\n }\n\n \/\/ --- Conectando eventos ---\n exportBtn.addEventListener('click', handleExport);\n importFile.addEventListener('change', handleImport);\n \n \/\/ Inicializa\u00e7\u00e3o\n loadProjects();\n\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lista de Projetos – Minimal Lista de Projetos Cliente Produto SiteLanding PageE-commerce Equipe LivreRodrigoAna CarolinaAllan Status AguardandoConstruindoPronto Adicionar Importar JSON Exportar JSON Cliente Produto Equipe Status A\u00e7\u00e3o<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"hide_page_title":"","footnotes":""},"class_list":["post-45230","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>dash-sites - Global M\u00eddia Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/globalmidiadigital.com.br\/dash-sites\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"dash-sites - Global M\u00eddia Digital\" \/>\n<meta property=\"og:description\" content=\"Lista de Projetos – Minimal Lista de Projetos Cliente Produto SiteLanding PageE-commerce Equipe LivreRodrigoAna CarolinaAllan Status AguardandoConstruindoPronto Adicionar Importar JSON Exportar JSON Cliente Produto Equipe Status A\u00e7\u00e3o\" \/>\n<meta property=\"og:url\" content=\"https:\/\/globalmidiadigital.com.br\/dash-sites\/\" \/>\n<meta property=\"og:site_name\" content=\"Global M\u00eddia Digital\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-22T19:31:40+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/\",\"name\":\"dash-sites - Global M\u00eddia Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#website\"},\"datePublished\":\"2025-07-22T19:22:39+00:00\",\"dateModified\":\"2025-07-22T19:31:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"dash-sites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#website\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/\",\"name\":\"Global M\u00eddia Digital\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#organization\",\"name\":\"Global M\u00eddia Digital\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-logo-global-1.png\",\"contentUrl\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-logo-global-1.png\",\"width\":\"280\",\"height\":\"80\",\"caption\":\"Global M\u00eddia Digital\"},\"image\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"dash-sites - Global M\u00eddia Digital","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","og_locale":"pt_BR","og_type":"article","og_title":"dash-sites - Global M\u00eddia Digital","og_description":"Lista de Projetos – Minimal Lista de Projetos Cliente Produto SiteLanding PageE-commerce Equipe LivreRodrigoAna CarolinaAllan Status AguardandoConstruindoPronto Adicionar Importar JSON Exportar JSON Cliente Produto Equipe Status A\u00e7\u00e3o","og_url":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","og_site_name":"Global M\u00eddia Digital","article_modified_time":"2025-07-22T19:31:40+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","url":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","name":"dash-sites - Global M\u00eddia Digital","isPartOf":{"@id":"https:\/\/globalmidiadigital.com.br\/#website"},"datePublished":"2025-07-22T19:22:39+00:00","dateModified":"2025-07-22T19:31:40+00:00","breadcrumb":{"@id":"https:\/\/globalmidiadigital.com.br\/dash-sites\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/globalmidiadigital.com.br\/dash-sites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/globalmidiadigital.com.br\/dash-sites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/globalmidiadigital.com.br\/"},{"@type":"ListItem","position":2,"name":"dash-sites"}]},{"@type":"WebSite","@id":"https:\/\/globalmidiadigital.com.br\/#website","url":"https:\/\/globalmidiadigital.com.br\/","name":"Global M\u00eddia Digital","description":"","publisher":{"@id":"https:\/\/globalmidiadigital.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/globalmidiadigital.com.br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/globalmidiadigital.com.br\/#organization","name":"Global M\u00eddia Digital","url":"https:\/\/globalmidiadigital.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/globalmidiadigital.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/globalmidiadigital.com.br\/wp-content\/uploads\/2023\/08\/cropped-logo-global-1.png","contentUrl":"https:\/\/globalmidiadigital.com.br\/wp-content\/uploads\/2023\/08\/cropped-logo-global-1.png","width":"280","height":"80","caption":"Global M\u00eddia Digital"},"image":{"@id":"https:\/\/globalmidiadigital.com.br\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/pages\/45230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/comments?post=45230"}],"version-history":[{"count":0,"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/pages\/45230\/revisions"}],"wp:attachment":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/media?parent=45230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Lista de Projetos - Minimal<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #111111;\n --primary-text-color: #FFFFFF;\n --secondary-text-color: #A09FB1;\n --accent-color-1: #6C5DD3;\n --negative-color: #F87171;\n --card-bg-color-glass: rgba(38, 38, 38, 0.6);\n --card-border-color: rgba(255, 255, 255, 0.1);\n --shadow-dark: rgba(0, 0, 0, 0.4);\n --shadow-light: rgba(255, 255, 255, 0.05);\n --status-aguardando: #F59E0B;\n --status-construindo: #3B82F6;\n --status-pronto: #10B981;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--bg-color);\n background-image: url('https:\/\/globalmidia.digital\/wp-content\/uploads\/2025\/07\/purple-planet-earth-space-global-network-connections-cosmos-background-abstract-art.jpg');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n color: var(--primary-text-color);\n padding: 3rem;\n min-height: 100vh;\n }\n .app-container {\n width: 100%;\n max-width: 1800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2.5rem;\n }\n h1 {\n font-size: 4rem;\n font-weight: 700;\n text-shadow: 0 0 20px rgba(0,0,0,0.5);\n margin-bottom: 2rem;\n }\n .table-container {\n width: 100%;\n background-color: var(--card-bg-color-glass);\n backdrop-filter: blur(15px);\n padding: 2rem;\n border-radius: 24px;\n border: 1px solid var(--card-border-color);\n box-shadow: 5px 5px 15px var(--shadow-dark), inset 1px 1px 2px var(--shadow-light);\n }\n table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 1rem;\n }\n th {\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--secondary-text-color);\n text-align: left;\n padding: 0 1.5rem 1rem 1.5rem;\n border-bottom: 2px solid var(--card-border-color);\n }\n td {\n font-size: 1.75rem;\n padding: 1.5rem;\n vertical-align: middle;\n background-color: rgba(0,0,0,0.2);\n }\n tr:not(:first-child) {\n transition: all 0.2s ease-in-out;\n }\n tr:not(:first-child):hover {\n transform: scale(1.02);\n background-color: rgba(255,255,255,0.05);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n }\n td:first-child { border-radius: 12px 0 0 12px; }\n td:last-child { border-radius: 0 12px 12px 0; }\n .task-status {\n display: inline-block;\n font-weight: 700;\n font-size: 1.25rem;\n padding: 0.5rem 1.5rem;\n border-radius: 8px;\n color: #fff;\n text-align: center;\n }\n .task-status[data-status=\"Aguardando\"] { background-color: var(--status-aguardando); }\n .task-status[data-status=\"Construindo\"] { background-color: var(--status-construindo); }\n .task-status[data-status=\"Pronto\"] { background-color: var(--status-pronto); }\n .project-form {\n background: var(--card-bg-color-glass);\n border-radius: 18px;\n box-shadow: 0 4px 18px rgba(0,0,0,0.18);\n padding: 1.5rem 2rem 1.2rem 2rem;\n margin-bottom: 2.5rem;\n display: flex;\n gap: 1.5rem;\n flex-wrap: wrap;\n justify-content: center;\n align-items: flex-end;\n border: 1px solid var(--card-border-color);\n }\n .project-form .form-group {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n }\n .project-form label {\n font-size: 1.1rem;\n color: var(--secondary-text-color);\n font-weight: 500;\n }\n .project-form input, .project-form select {\n font-family: 'Inter', sans-serif;\n font-size: 1.2rem;\n font-weight: 500;\n padding: 0.7rem 1rem;\n border-radius: 10px;\n border: 1px solid var(--card-border-color);\n background-color: rgba(0, 0, 0, 0.18);\n color: var(--primary-text-color);\n transition: all 0.3s;\n min-width: 120px;\n }\n .project-form input:focus, .project-form select:focus {\n outline: none;\n border-color: var(--accent-color-1);\n box-shadow: 0 0 8px rgba(108, 93, 211, 0.3);\n }\n .submit-button, .io-button {\n font-family: 'Inter', sans-serif;\n font-size: 1.3rem;\n font-weight: 600;\n padding: 0.8rem 2.2rem;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n background: linear-gradient(90deg, var(--accent-color-1) 0%, #8F6FE8 100%);\n color: #fff;\n transition: all 0.3s;\n box-shadow: 0 2px 10px rgba(108, 93, 211, 0.18);\n }\n .submit-button:hover, .io-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(108, 93, 211, 0.28);\n }\n \/* Estilo espec\u00edfico para bot\u00e3o de importar *\/\n .io-button.import {\n background: linear-gradient(90deg, var(--status-construindo) 0%, #60a5fa 100%);\n }\n \/* Estilo espec\u00edfico para bot\u00e3o de exportar *\/\n .io-button.export {\n background: linear-gradient(90deg, var(--status-pronto) 0%, #34d399 100%);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n <h1>Lista de Projetos<\/h1>\n <form id=\"project-form\" class=\"project-form\">\n <div class=\"form-group\">\n <label for=\"client-name\">Cliente<\/label>\n <input type=\"text\" id=\"client-name\" name=\"client\" placeholder=\"Nome do Cliente\" required style=\"min-width:180px;\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"product\">Produto<\/label>\n <select id=\"product\" name=\"product\" required style=\"min-width:120px;\">\n <option value=\"Site\">Site<\/option>\n <option value=\"Landing Page\">Landing Page<\/option>\n <option value=\"Loja Virtual\">E-commerce<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"team\">Equipe<\/label>\n <select id=\"team\" name=\"team\" required style=\"min-width:120px;\">\n <option value=\"Livre\">Livre<\/option>\n <option value=\"Rodrigo\">Rodrigo<\/option>\n <option value=\"Ana Carolina\">Ana Carolina<\/option>\n <option value=\"Allan\">Allan<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"status\">Status<\/label>\n <select id=\"status\" name=\"status\" required style=\"min-width:120px;\">\n <option value=\"Aguardando\">Aguardando<\/option>\n <option value=\"Construindo\">Construindo<\/option>\n <option value=\"Pronto\">Pronto<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"submit-button\">Adicionar<\/button>\n \n \n <label for=\"import-file\" class=\"io-button import\" style=\"text-align: center;\">Importar JSON<\/label>\n <input type=\"file\" id=\"import-file\" accept=\".json\" style=\"display:none;\">\n <button type=\"button\" id=\"export-btn\" class=\"io-button export\">Exportar JSON<\/button>\n\n <\/form>\n <div class=\"table-container\">\n <table>\n <thead>\n <tr>\n <th>Cliente<\/th>\n <th>Produto<\/th>\n <th>Equipe<\/th>\n <th style=\"text-align: center;\">Status<\/th>\n <th style=\"text-align: center;\">A\u00e7\u00e3o<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const form = document.getElementById('project-form');\n const tableBody = document.querySelector('.table-container tbody');\n const exportBtn = document.getElementById('export-btn');\n const importFile = document.getElementById('import-file');\n\n \/\/ --- Persist\u00eancia localStorage ---\n const STORAGE_KEY = 'projetos-lista-v1';\n\n \/\/ Carrega dados salvos\n function loadProjects() {\n const data = localStorage.getItem(STORAGE_KEY);\n if (!data) return;\n try {\n const projetos = JSON.parse(data);\n projetos.forEach(proj => addRow(proj, false)); \/\/ n\u00e3o salvar ao carregar\n } catch (e) {\n console.error(\"Erro ao carregar projetos do localStorage:\", e);\n }\n }\n \n \/\/ Salva todos os projetos da tabela\n function saveProjects() {\n const rows = Array.from(tableBody.querySelectorAll('tr'));\n const projetos = rows.map(tr => {\n const tds = tr.querySelectorAll('td');\n return {\n client: tds[0].innerText,\n product: tds[1].innerText,\n team: tds[2].innerText,\n status: tds[3].querySelector('.task-status').innerText.trim() \/\/ Corrigido para pegar o texto do status\n };\n });\n localStorage.setItem(STORAGE_KEY, JSON.stringify(projetos));\n }\n\n \/\/ Adiciona linha e bot\u00e3o de excluir\n function addRow({client, product, team, status}, shouldSave = true) {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${client}<\/td>\n <td>${product}<\/td>\n <td>${team}<\/td>\n <td style=\"text-align:center;\"><span class=\"task-status\" data-status=\"${status}\">${status}<\/span><\/td>\n <td style=\"text-align:center;\"><button class=\"delete-row\" title=\"Excluir\" style=\"background:transparent;border:none;color:var(--secondary-text-color);font-size:1.5rem;cursor:pointer;\">\u00d7<\/button><\/td>\n `;\n tr.querySelector('.delete-row').addEventListener('click', function() {\n tr.remove();\n saveProjects();\n });\n tableBody.appendChild(tr);\n \n if (shouldSave) {\n saveProjects();\n }\n }\n \n \/\/ Submiss\u00e3o do formul\u00e1rio\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n const client = document.getElementById('client-name').value.trim();\n const product = document.getElementById('product').value;\n const team = document.getElementById('team').value;\n const status = document.getElementById('status').value;\n if (!client) return;\n addRow({client, product, team, status});\n form.reset();\n document.getElementById('client-name').focus();\n });\n\n \/\/ --- NOVAS FUN\u00c7\u00d5ES DE IMPORT\/EXPORT ---\n\n \/\/ Fun\u00e7\u00e3o para Exportar dados da tabela para um arquivo JSON\n function handleExport() {\n const rows = Array.from(tableBody.querySelectorAll('tr'));\n if (rows.length === 0) {\n alert(\"N\u00e3o h\u00e1 projetos para exportar!\");\n return;\n }\n \/\/ Usa a mesma l\u00f3gica de `saveProjects` para pegar os dados\n const projetos = rows.map(tr => {\n const tds = tr.querySelectorAll('td');\n return {\n client: tds[0].innerText,\n product: tds[1].innerText,\n team: tds[2].innerText,\n status: tds[3].querySelector('.task-status').innerText.trim()\n };\n });\n \n const dataStr = JSON.stringify(projetos, null, 2); \/\/ O '2' formata o JSON para ser leg\u00edvel\n const blob = new Blob([dataStr], {type: \"application\/json\"});\n const url = URL.createObjectURL(blob);\n \n const a = document.createElement('a');\n a.href = url;\n a.download = 'projetos-backup.json';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url); \/\/ Libera mem\u00f3ria\n }\n\n \/\/ Fun\u00e7\u00e3o para Importar dados de um arquivo JSON para a tabela\n function handleImport(event) {\n const file = event.target.files[0];\n if (!file) return;\n\n \/\/ Confirma\u00e7\u00e3o para evitar perda de dados\n if (!confirm(\"Isso substituir\u00e1 todos os projetos atuais. Deseja continuar?\")) {\n event.target.value = null; \/\/ Reseta o input de arquivo\n return;\n }\n\n const reader = new FileReader();\n reader.onload = function(e) {\n try {\n const projetos = JSON.parse(e.target.result);\n if (!Array.isArray(projetos)) throw new Error(\"O arquivo n\u00e3o cont\u00e9m uma lista de projetos v\u00e1lida.\");\n\n \/\/ Limpa a tabela atual\n tableBody.innerHTML = '';\n \n \/\/ Adiciona os novos projetos\n projetos.forEach(proj => {\n \/\/ Valida\u00e7\u00e3o simples do objeto importado\n if (proj.client && proj.product && proj.team && proj.status) {\n addRow(proj, false); \/\/ Adiciona sem salvar repetidamente\n }\n });\n\n saveProjects(); \/\/ Salva a lista importada no localStorage\n alert(\"Projetos importados com sucesso!\");\n\n } catch (error) {\n alert(\"Erro ao ler o arquivo. Verifique se \u00e9 um arquivo JSON v\u00e1lido gerado por este sistema.\\nDetalhes: \" + error.message);\n } finally {\n event.target.value = null; \/\/ Reseta para permitir importar o mesmo arquivo novamente\n }\n };\n reader.readAsText(file);\n }\n\n \/\/ --- Conectando eventos ---\n exportBtn.addEventListener('click', handleExport);\n importFile.addEventListener('change', handleImport);\n \n \/\/ Inicializa\u00e7\u00e3o\n loadProjects();\n\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lista de Projetos – Minimal Lista de Projetos Cliente Produto SiteLanding PageE-commerce Equipe LivreRodrigoAna CarolinaAllan Status AguardandoConstruindoPronto Adicionar Importar JSON Exportar JSON Cliente Produto Equipe Status A\u00e7\u00e3o<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"hide_page_title":"","footnotes":""},"class_list":["post-45230","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>dash-sites - Global M\u00eddia Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/globalmidiadigital.com.br\/dash-sites\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"dash-sites - Global M\u00eddia Digital\" \/>\n<meta property=\"og:description\" content=\"Lista de Projetos – Minimal Lista de Projetos Cliente Produto SiteLanding PageE-commerce Equipe LivreRodrigoAna CarolinaAllan Status AguardandoConstruindoPronto Adicionar Importar JSON Exportar JSON Cliente Produto Equipe Status A\u00e7\u00e3o\" \/>\n<meta property=\"og:url\" content=\"https:\/\/globalmidiadigital.com.br\/dash-sites\/\" \/>\n<meta property=\"og:site_name\" content=\"Global M\u00eddia Digital\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-22T19:31:40+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/\",\"name\":\"dash-sites - Global M\u00eddia Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#website\"},\"datePublished\":\"2025-07-22T19:22:39+00:00\",\"dateModified\":\"2025-07-22T19:31:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/dash-sites\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"dash-sites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#website\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/\",\"name\":\"Global M\u00eddia Digital\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#organization\",\"name\":\"Global M\u00eddia Digital\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-logo-global-1.png\",\"contentUrl\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-logo-global-1.png\",\"width\":\"280\",\"height\":\"80\",\"caption\":\"Global M\u00eddia Digital\"},\"image\":{\"@id\":\"https:\\\/\\\/globalmidiadigital.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"dash-sites - Global M\u00eddia Digital","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","og_locale":"pt_BR","og_type":"article","og_title":"dash-sites - Global M\u00eddia Digital","og_description":"Lista de Projetos – Minimal Lista de Projetos Cliente Produto SiteLanding PageE-commerce Equipe LivreRodrigoAna CarolinaAllan Status AguardandoConstruindoPronto Adicionar Importar JSON Exportar JSON Cliente Produto Equipe Status A\u00e7\u00e3o","og_url":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","og_site_name":"Global M\u00eddia Digital","article_modified_time":"2025-07-22T19:31:40+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","url":"https:\/\/globalmidiadigital.com.br\/dash-sites\/","name":"dash-sites - Global M\u00eddia Digital","isPartOf":{"@id":"https:\/\/globalmidiadigital.com.br\/#website"},"datePublished":"2025-07-22T19:22:39+00:00","dateModified":"2025-07-22T19:31:40+00:00","breadcrumb":{"@id":"https:\/\/globalmidiadigital.com.br\/dash-sites\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/globalmidiadigital.com.br\/dash-sites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/globalmidiadigital.com.br\/dash-sites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/globalmidiadigital.com.br\/"},{"@type":"ListItem","position":2,"name":"dash-sites"}]},{"@type":"WebSite","@id":"https:\/\/globalmidiadigital.com.br\/#website","url":"https:\/\/globalmidiadigital.com.br\/","name":"Global M\u00eddia Digital","description":"","publisher":{"@id":"https:\/\/globalmidiadigital.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/globalmidiadigital.com.br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/globalmidiadigital.com.br\/#organization","name":"Global M\u00eddia Digital","url":"https:\/\/globalmidiadigital.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/globalmidiadigital.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/globalmidiadigital.com.br\/wp-content\/uploads\/2023\/08\/cropped-logo-global-1.png","contentUrl":"https:\/\/globalmidiadigital.com.br\/wp-content\/uploads\/2023\/08\/cropped-logo-global-1.png","width":"280","height":"80","caption":"Global M\u00eddia Digital"},"image":{"@id":"https:\/\/globalmidiadigital.com.br\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/pages\/45230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/comments?post=45230"}],"version-history":[{"count":0,"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/pages\/45230\/revisions"}],"wp:attachment":[{"href":"https:\/\/globalmidiadigital.com.br\/wp-json\/wp\/v2\/media?parent=45230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}