Checklist interativo para festa Infantil

Checklist Interativo - Planejamento de Festa Infantil /* Estilos CSS Completos */ body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif; /* Fontes mais modernas */ line-height: 1.6; margin: 0; /* Remove margem padrão */ padding: 0; /* Remove padding padrão */ background-color: #f4f7f6; /* Fundo suave */ } .checklist-container { max-width: 850px; /* Um pouco mais largo */ margin: 30px auto; /* Mais margem no topo/baixo */ background-color: #ffffff; padding: 20px 30px 30px 30px; /* Ajuste padding */ border-radius: 10px; /* Bordas mais arredondadas */ box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Sombra mais pronunciada */ } h2 { color: #e84393; /* Rosa */ text-align: center; margin-top: 0; /* Remove margem topo do H2 */ margin-bottom: 30px; /* Mais espaço abaixo do título */ font-size: 1.8em; /* Tamanho maior */ } h3 { color: #d83682; /* Rosa mais escuro */ margin-top: 35px; /* Mais espaço entre seções */ margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #f0f0f0; /* Borda um pouco mais forte */ font-size: 1.4em; } ul { list-style: none; padding-left: 0; } li { margin-bottom: 15px; /* Mais espaço entre itens */ position: relative; padding-left: 35px; /* Mais espaço para checkbox maior */ transition: opacity 0.3s ease, max-height 0.3s ease; overflow: hidden; } input[type=“checkbox”] { position: absolute; left: 5px; /* Leve afastamento da borda */ top: 5px; margin-right: 10px; cursor: pointer; width: 20px; /* Checkbox maior */ height: 20px; accent-color: #e84393; /* Cor do check (navegadores modernos) */ } label { cursor: pointer; display: inline; transition: color 0.3s ease, text-decoration 0.3s ease; font-size: 1.05em; /* Texto do item um pouco maior */ } input[type=“checkbox”]:checked + label { text-decoration: line-through wavy #aaa; /* Linha ondulada e cinza */ color: #888; } em { /* Estilo para notas/avançado */ color: #555; font-style: italic; font-size: 0.9em; display: block; margin-left: 0; margin-top: 4px; padding-left: 5px; /* Pequeno recuo para a nota */ border-left: 2px solid #eee; /* Linha lateral sutil */ } ul ul { /* Sub-listas */ padding-left: 30px; /* Mais indentação */ margin-top: 10px; margin-bottom: 10px; } ul ul li { margin-bottom: 10px; font-size: 0.95em; padding-left: 30px; /* Indentação consistente com checkbox */ } ul ul input[type=“checkbox”] { /* Checkbox da sub-lista */ width: 16px; height: 16px; top: 3px; } .calculator-step strong { /* Destaque Calculadora */ color: #0984e3; font-weight: bold; background-color: #dfe6e9; /* Fundo sutil */ padding: 2px 4px; border-radius: 3px; } .checklist-controls { /* Controles (Filtro) */ text-align: right; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .checklist-controls button { background-color: #6c757d; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 0.95em; /* Tamanho botão */ transition: background-color 0.2s, transform 0.1s; } .checklist-controls button:hover { background-color: #5a6268; } .checklist-controls button:active { transform: scale(0.95); } .checklist-controls button.active { background-color: #0984e3; } .progress-bar-container { /* Barras de Progresso */ background-color: #e9ecef; border-radius: 8px; /* Mais arredondada */ margin-bottom: 15px; /* Espaço abaixo da barra da seção */ margin-top: 5px; /* Espaço acima da barra (abaixo do H3) */ overflow: hidden; height: 24px; /* Barra mais alta */ position: relative; } .progress-bar { background-color: #28a745; height: 100%; width: 0%; border-radius: 8px; transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Transição mais suave */ text-align: center; color: white; font-size: 0.8em; line-height: 24px; } .progress-text { /* Texto da porcentagem */ position: absolute; width: 100%; text-align: center; top: 0; left: 0; line-height: 24px; font-size: 0.9em; /* Texto maior */ font-weight: bold; color: #343a40; text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); /* Sombra mais eficaz */ } .overall-progress { /* Barra de progresso geral */ margin-bottom: 25px; /* Mais espaço abaixo */ } .hide-completed li.completed { /* Esconder itens */ opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; /* Remove padding para colapsar melhor */ padding-bottom: 0; border-top: none; overflow: hidden; /* Garante que conteúdo não vaze */ } li.completed {} /* Classe adicionada via JS */ /* Container para o botão de sugestão */ .suggestion-button-container { margin-left: 0px; /* Resetado pois o LI já tem padding */ margin-top: 8px; } /* Estilo para o botão de link externo */ .external-link-btn { background-color: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s ease, transform 0.1s ease; display: inline-block; text-decoration: none; /* Garante que não haja sublinhado no botão */ } .external-link-btn:hover { background-color: #0056b3; text-decoration: none; } .external-link-btn:active { transform: scale(0.96); } /* Responsividade básica */ @media (max-width: 768px) { .checklist-container { margin: 15px; padding: 15px 20px 20px 20px; } h2 { font-size: 1.5em; margin-bottom: 20px;} h3 { font-size: 1.25em; margin-top: 25px; } li { padding-left: 30px; } input[type=“checkbox”] { width: 18px; height: 18px; left: 3px;} label { font-size: 1em; } .checklist-controls { text-align: center; } .suggestion-button-container { margin-left: 0;} /* Ajuste responsivo */ } @media (max-width: 480px) { body { font-size: 13px; } h2 { font-size: 1.3em; } h3 { font-size: 1.1em; } .checklist-controls button { width: 100%; margin-top: 5px; } .external-link-btn { width: auto; /* Botão não ocupa 100% */ padding: 5px 10px; font-size: 0.85em;} }

Checklist Interativo - Festa Infantil

Esconder Concluídos

Progresso Geral: 0%

FASE 1: CONCEITUALIZAÇÃO E BASE (3+ Meses Antes)

Progresso Seção: 0%

• Definir Data e Horário: Verificar feriados, eventos concorrentes, melhor horário, duração. Ter 1-2 datas alternativas.
• Estimar Nº de Convidados: Pré-lista detalhada (separar adultos/crianças).
• Definir Orçamento Detalhado: Alocar verba por categoria (local, buffet/comida, decoração, entretenimento, etc.). Avançado: Incluir 10-15% para imprevistos.
• Pesquisar e Visitar Locais: Considerar tamanho, infraestrutura, regras, plano B para chuva.
• Pesquisar Fornecedores-Chave: Buffet, Decoração, Animação, Fotografia. Pedir orçamentos e verificar referências.
• Definir Tema (Opcional): Pensar em algo viável e que agrade a criança.

FASE 2: CONTRATAÇÕES E DEFINIÇÕES (2-3 Meses Antes)

Progresso Seção: 0%

• Reservar/Contratar Local:** Confirmar data, horário e assinar contrato.

• Finalizar Lista de Convidados:** Revisar e coletar contatos.

• Contratar Fornecedores Principais:**

  • Buffet/Serviço de Comida
  • Decoração
  • Animação/Recreação
  • Fotografia/Filmagem

  Avançado: Ler contratos atentamente (cancelamento, horários, inclusões). Confirmar por escrito.

• Pesquisar/Contratar Aluguel de Brinquedos (Ex: Pula-pula, Piscina de Bolinhas).

[Ver Sugestão de Brinquedos (Aluguel de Sonhos)](/)

• Definir Paleta de Cores e Estilo Visual.**

FASE 3: CONVITES E DETALHAMENTO (1.5 - 2 Meses Antes)

Progresso Seção: 0%

• Criar/Encomendar Convites:** Incluir infos essenciais.
• Informações Adicionais no Convite:**
  • Prazo e forma de RSVP.
  • Mapa/instruções de acesso (se necessário).
  • Sugestão de presente (opcional).
  • Contato para dúvidas.
• Enviar Convites:** Físicos ou digitais.
• Criar Sistema de Controle de RSVP:** Planilha, app, grupo.
• Planejar o Layout do Espaço:** Otimizar fluxo (mesas, estações, pista, etc.).
• Detalhar Decoração DIY:** Listar materiais e cronograma de confecção.

FASE 4: CARDÁPIO, ATIVIDADES E COMPRAS (1 Mês Antes)

Progresso Seção: 0%

• Definir Cardápio Detalhado: >>> Usar a Calculadora para Festa Infantil! <<< Balancear opções. Avançado: Considerar restrições alimentares, planejar identificação dos pratos.
• Encomendar Bolo e Doces Especiais:** Definir sabores e modelos.
• Planejar Cronograma das Atividades:** Coordenar com animadores/DJ.
• Selecionar/Montar Playlist:** Músicas para diferentes momentos. Avançado: Testar/alugar equipamento de som.
• Finalizar/Comprar Lembrancinhas.**
• Iniciar Compras Não Perecíveis:** Descartáveis, bebidas, itens de decoração.

FASE 5: CONFIRMAÇÕES E RETA FINAL (2-3 Semanas Antes)

Progresso Seção: 0%

• Fazer Follow-up de RSVPs:** Ter o número final de convidados.
• Ajustar Quantidades: >>> Revisar a Calculadora com o nº final! <<< Ajustar encomendas/lista de compras.
• Confirmar TODOS os Fornecedores:** Rever horários, pagamentos, detalhes. Avançado: Ter um contato secundário para cada fornecedor.
• Planejar Logística:** Transporte de itens, refrigeração no local.
• Comprar/Separar Roupa do Aniversariante e Família.**
• Montar Kit de Emergência:** Primeiros socorros, costura, ferramentas básicas, carregador portátil.

FASE 6: ÚLTIMA SEMANA

Progresso Seção: 0%

• [5-7 dias antes] Compras de Supermercado:** Perecíveis duráveis.
• [3-4 dias antes] Preparar Comidas Antecipadas:** Molhos, sobremesas, pré-preparos.
• [2-3 dias antes] Compras Finais:** Gelo, frescos.
• [2 dias antes] Organizar Bebidas:** Colocar para gelar.
• [2 dias antes] Definir e Delegar Tarefas:** Briefing para ajudantes. Avançado: Mini-roteiro escrito.
• [Véspera] Buscar/Receber Encomendas:** Bolo, doces, salgados.
• [Véspera] Montagem Prévia:** Levar itens, iniciar decoração.
• [Véspera] Revisão Final:** Checklist, cronograma, eletrônicos carregados. Descansar!

FASE 7: DIA DA FESTA!

Progresso Seção: 0%

• Manhã/Tarde:** Gelo, montagem final, organizar mesas.
• Pré-Festa:** Receber fornecedores, dispor comidas/bebidas iniciais, som, checagem geral.
• Durante a Festa:**
  • Recepcionar convidados.
  • Coordenar cronograma (parabéns, etc.).
  • Garantir reposição e limpeza.
  • Gerenciar estação de presentes.
  • Ter um “apagador de incêndios”.
  • Aproveitar!
• Final da Festa:** Agradecer/pagar fornecedores, lembrancinhas, organizar sobras, desmontagem.

FASE 8: PÓS-FESTA (Dia Seguinte e Além)

Progresso Seção: 0%

• Devolver Itens Alugados/Emprestados.**
• Organizar Presentes.**
• Enviar Agradecimentos:** Convidados, ajudantes, fornecedores especiais.
• Organizar/Compartilhar Fotos/Vídeos.**
• Avaliar:** O que funcionou, o que melhorar, orçamento final. Avançado: Anotar lições aprendidas.

// JavaScript (interatividade) document.addEventListener(‘DOMContentLoaded’, () => { const checklistContainer = document.getElementById(‘checklistContainer’); // Seleciona apenas checkboxes que são descendentes diretos ou indiretos de ULs dentro do container const allCheckboxes = checklistContainer.querySelectorAll(‘ul input[type=“checkbox”]’); const toggleCompletedBtn = document.getElementById(‘toggleCompletedBtn’); const overallProgressBar = document.getElementById(‘overallProgressBar’); const overallProgressText = document.getElementById(‘overallProgressText’); const sectionContainers = checklistContainer.querySelectorAll(‘.checklist-section’); const STORAGE_KEY = ‘partyChecklistState_v2’; // Mantenha ou incremente se a estrutura de IDs mudar const FILTER_STORAGE_KEY = ‘partyChecklistFilter_v1’; let hideCompleted = false; function saveState() { const state = {}; allCheckboxes.forEach(checkbox => { state[checkbox.id] = checkbox.checked; }); localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); localStorage.setItem(FILTER_STORAGE_KEY, hideCompleted); } function loadState() { const savedState = localStorage.getItem(STORAGE_KEY); const savedFilterState = localStorage.getItem(FILTER_STORAGE_KEY); if (savedState) { try { const state = JSON.parse(savedState); allCheckboxes.forEach(checkbox => { if (state.hasOwnProperty(checkbox.id)) { checkbox.checked = state[checkbox.id]; } updateLiCompletedClass(checkbox); }); } catch (e) { console.error(“Erro ao carregar estado do checklist:”, e); } } else { allCheckboxes.forEach(checkbox => { updateLiCompletedClass(checkbox); }); } if (savedFilterState !== null) { try { hideCompleted = JSON.parse(savedFilterState); } catch (e) { console.error(“Erro ao carregar estado do filtro:”, e); hideCompleted = false; } applyFilterState(); } updateAllProgress(); } function updateLiCompletedClass(checkbox) { const li = checkbox.closest(‘li’); if (li) { if (checkbox.checked) { li.classList.add(‘completed’); } else { li.classList.remove(‘completed’); } } } function updateProgress(sectionElement) { const sectionCheckboxes = sectionElement.querySelectorAll(‘ul input[type=“checkbox”]’); const totalTasks = sectionCheckboxes.length; if (totalTasks === 0) return { completed: 0, total: 0, percentage: 0 }; const completedTasks = Array.from(sectionCheckboxes).filter(cb => cb.checked).length; const percentage = Math.round((completedTasks / totalTasks) * 100); const progressBarContainer = sectionElement.querySelector(‘.section-progress’); if (progressBarContainer) { const progressBar = progressBarContainer.querySelector(‘.progress-bar’); const progressText = progressBarContainer.querySelector(‘.progress-text’); progressBar.style.width = `${percentage}%`; progressText.textContent = `Progresso Seção: ${percentage}%`; } return { completed: completedTasks, total: totalTasks, percentage: percentage }; } function updateAllProgress() { let overallCompleted = 0; const allTasksCheckboxes = checklistContainer.querySelectorAll(‘ul input[type=“checkbox”]’); const overallTotal = allTasksCheckboxes.length; overallCompleted = Array.from(allTasksCheckboxes).filter(cb => cb.checked).length; sectionContainers.forEach(section => { updateProgress(section); }); if (overallProgressBar && overallProgressText) { const overallPercentage = overallTotal === 0 ? 0 : Math.round((overallCompleted / overallTotal) * 100); overallProgressBar.style.width = `${overallPercentage}%`; overallProgressText.textContent = `Progresso Geral: ${overallPercentage}% (${overallCompleted}/${overallTotal})`; } } function applyFilterState() { if (hideCompleted) { checklistContainer.classList.add(‘hide-completed’); toggleCompletedBtn.textContent = ‘Mostrar Concluídos’; toggleCompletedBtn.classList.add(‘active’); } else { checklistContainer.classList.remove(‘hide-completed’); toggleCompletedBtn.textContent = ‘Esconder Concluídos’; toggleCompletedBtn.classList.remove(‘active’); } } checklistContainer.addEventListener(‘change’, (event) => { if (event.target.matches(‘ul input[type=“checkbox”]’)) { updateLiCompletedClass(event.target); updateAllProgress(); saveState(); } }); if (toggleCompletedBtn) { toggleCompletedBtn.addEventListener(‘click’, () => { hideCompleted = !hideCompleted; applyFilterState(); saveState(); }); } else { console.warn(“Botão de filtro não encontrado.”); } loadState(); });

Este checklist cobre todas as etapas da organização. Para dicas detalhadas sobre cada fase — orçamento, local, cardápio e brinquedos — confira nosso guia completo de planejamento de festa infantil.