Brazilian Cookbook Homepage - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minhas Receitas</title> <link href="https://fonts.googleapis.com/css2?family=Handlee&display=swap" rel="stylesheet"> <style> body { margin: 0; font-family: 'Handlee', cursive; background: #f4f1ea; } .container { width: 90%; max-width: 960px; margin: 50px auto; padding: 20px; position: relative; background: #fff8e1; border-radius: 12px; box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2); } .tab { position: absolute; top: -40px; left: 30px; background: #F8CA66; padding: 10px 20px; border-radius: 8px 8px 0 0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-weight: bold; font-size: 18px; } .filters { margin-bottom: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .filters input, .filters select { padding: 8px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; flex: 1; } #recipesList { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .recipe-card { background: #fff6d6; border: 1px solid #f2c24f; border-radius: 10px; padding: 15px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); height: 150px; display: flex; flex-direction: column; justify-content: space-between; } .recipe-title { font-size: 30px; color: #704214; margin-bottom: 10px; } .recipe-type { font-size: 14px; color: #888; margin-top: auto; } </style> </head> <body> <div class="container"> <div class="tab">Minhas Receitas</div> <!-- š Filtros --> <div class="filters"> <input type="text" id="searchInput" placeholder="Buscar receita..."> <select id="typeFilter"> <option value="todos">Todos os tipos</option> <option value="doce">Doce</option> <option value="salgado">Salgado</option> <option value="outros">Outros</option> </select> </div> <!-- š Lista de receitas --> <div id="recipesList"> <!-- As receitas serĆ£o geradas pelo JS --> </div> </div> <script> const receitas = [ { titulo: 'Bolo de Cenoura', tipo: 'doce' }, { titulo: 'PĆ£o Caseiro', tipo: 'salgado' }, { titulo: 'Torta de Frango', tipo: 'salgado' }, { titulo: 'Brigadeiro', tipo: 'doce' }, { titulo: 'Molho Especial', tipo: 'outros' }, { titulo: 'Pudim de Leite', tipo: 'doce' }, { titulo: 'Esfiha', tipo: 'salgado' }, { titulo: 'Farofa', tipo: 'outros' } ]; const recipesList = document.getElementById('recipesList'); const searchInput = document.getElementById('searchInput'); const typeFilter = document.getElementById('typeFilter'); function renderReceitas() { const searchTerm = searchInput.value.toLowerCase(); const selectedType = typeFilter.value; recipesList.innerHTML = ''; const filtradas = receitas.filter(r => { const matchTitulo = r.titulo.toLowerCase().includes(searchTerm); const matchTipo = selectedType === 'todos' || r.tipo === selectedType; return matchTitulo && matchTipo; }); if (filtradas.length === 0) { recipesList.innerHTML = '<p>Nenhuma receita encontrada.</p>'; return; } filtradas.forEach(r => { const card = document.createElement('div'); card.className = 'recipe-card'; card.innerHTML = ` <h2 class="recipe-title">${r.titulo}</h2> <p class="recipe-type">Tipo: ${r.tipo}</p> `; recipesList.appendChild(card); }); } // Eventos searchInput.addEventListener('input', renderReceitas); typeFilter.addEventListener('change', renderReceitas); // Primeira renderizaĆ§Ć£o renderReceitas(); </script> </body> </html>