Widget:Cozinha

 <header>

Carrinho de Compras

 </header>
 
 <section id="carrinho">

     <button id="esvaziar-carrinho" class="acao-carrinho">Esvaziar Carrinho</button>
     <button id="mostrar-total" class="acao-carrinho">Mostrar Total</button>

 </section>
 
 <section id="lista-receitas" class="receitas-container">
 </section>

<style>

 /* CSS centralizado para a widget */
 #widget-cozinha {
   font-family: sans-serif;
   background-color: #f7f7f7;
   padding: 16px;
   border: 1px solid #ddd;
   border-radius: 8px;
   max-width: 1000px;
   margin: auto;
 }
 
 #widget-cozinha header h3 {
   margin-bottom: 10px;
   color: #333;
   text-align: center;
 }
 
 .acoes {
   margin-top: 20px;
   display: flex;
   gap: 10px;
   justify-content: center;
 }
 
 .acao-carrinho {
   padding: 8px 16px;
   background-color: #4393ff;
   color: #fff;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
 
 .acao-carrinho:hover {
   background-color: #3275c7;
 }
 
 .receitas-container {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 20px;
 }
 
 /* Demais estilos para os cards e modais podem ser mantidos com ajustes para retirar emojis */
 .receita-card {
   width: 150px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 8px;
   padding: 8px;
   background-color: #fff;
   box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
   transition: transform 0.2s;
   position: relative;
 }
 
 .remover-item {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 14px;
 }
 
 /* Resto do CSS conforme a necessidade */

</style>

<script>

 // Variáveis globais
 let receitas = {};
 const carrinho = {};

 document.addEventListener('DOMContentLoaded', function() {
   initWidget();
   
   document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho);
   document.getElementById('mostrar-total').addEventListener('click', mostrarTotal);
 });
 
 async function initWidget() {
   try {
     const response = await fetch('https://wiki.gla.com.br/index.php?title=Receitas.json&action=raw');
     const data = await response.json();
     receitas = processarReceitas(data);
     renderizarReceitas();
   } catch (error) {
     console.error('Erro ao carregar receitas:', error);
     alert('Não foi possível carregar as receitas. Tente novamente mais tarde.');
   }
 }
 
 function processarReceitas(data) {
   return {
     baratie: Object.entries(data.baratie).map(([id, item]) => ({
       id,
       nome: item.nome,
       preco: item.cost,
       img: item.thumb,
       ingredientes: item.ingredients || [],
       lvl: item.lvl,
       tempo: item.time,
       descricao: item.description
     })),
     alianca: Object.entries(data.alianca).map(([id, item]) => ({
       id,
       nome: item.nome,
       preco: item.cost,
       img: item.thumb,
       ingredientes: item.ingredients || [],
       lvl: item.lvl,
       tempo: item.time,
       descricao: item.description
     }))
   };
 }
 
 function renderizarReceitas() {
   renderizarSecao('baratie');
   renderizarSecao('alianca');
 }
 
 function renderizarSecao(secao) {
   const container = document.getElementById(`receitas-${secao}`) || document.getElementById('lista-receitas');
   if (!container) return;
   
   container.innerHTML = ;
   
   receitas[secao].forEach(receita => {
     const card = document.createElement('div');
     card.className = 'receita-card';
     card.innerHTML = `
       <button class="info-btn" onclick="mostrarModalReceita(this)" 
         data-descricao="${encodeURIComponent(receita.descricao)}"
         data-lvl="${receita.lvl}"
         data-tempo="${receita.tempo}">i</button>
       <img src="${receita.img}" width="64" height="64" />

${receita.nome}

${receita.preco.toLocaleString()}

       <button onclick="adicionarAoCarrinho('${receita.id}')">Adicionar</button>
     `;
     container.appendChild(card);
   });
 }
 
 // Outras funções de gerenciamento do carrinho, modal e cálculos seguem de forma similar, apenas removendo ou substituindo os emojis.
 function adicionarAoCarrinho(id) {
   const receita = encontrarReceita(id);
   if (!receita) return;
   if (!carrinho[id]) {
     carrinho[id] = { ...receita, quantidade: 1 };
   } else {
     carrinho[id].quantidade++;
   }
   renderizarCarrinho();
 }
 
 function encontrarReceita(id) {
   for (const secao in receitas) {
     const receita = receitas[secao].find(r => r.id === id);
     if (receita) return receita;
   }
   return null;
 }
 
 function renderizarCarrinho() {
   const container = document.getElementById('carrinho-container');
   container.innerHTML = ;
   let total = 0;
   for (const id in carrinho) {
     const item = carrinho[id];
     const subtotal = item.preco * item.quantidade;
     total += subtotal;
     
     const itemDiv = document.createElement('div');
     itemDiv.className = 'item-carrinho';
     itemDiv.innerHTML = `
       <img src="${item.img}" width="40" height="40" />

${item.nome}

           <button onclick="alterarQuantidade('${id}', -1)">−</button>
           <input type="number" value="${item.quantidade}" min="0" onchange="atualizarQuantidadeManual('${id}', event)">
           <button onclick="alterarQuantidade('${id}', 1)">+</button>

${subtotal.toLocaleString()}

       <button class="remover-item" onclick="removerDoCarrinho('${id}')">Remover</button>
     `;
     container.appendChild(itemDiv);
   }
   document.getElementById('carrinho-total').innerHTML = total > 0
     ? `Total: ${total.toLocaleString()}`
     : ;
 }
 
 function alterarQuantidade(id, alteracao) {
   if (alteracao === 100) {
     carrinho[id].quantidade = 100;
   } else {
     carrinho[id].quantidade += alteracao;
   }
   if (carrinho[id].quantidade <= 0) {
     delete carrinho[id];
   }
   renderizarCarrinho();
 }
 
 function atualizarQuantidadeManual(id, event) {
   const novoValor = parseInt(event.target.value);
   if (!isNaN(novoValor) && novoValor >= 0) {
     if (novoValor === 0) {
       delete carrinho[id];
     } else {
       carrinho[id].quantidade = novoValor;
     }
     renderizarCarrinho();
   }
 }
 
 function removerDoCarrinho(id) {
   delete carrinho[id];
   renderizarCarrinho();
 }
 
 function esvaziarCarrinho() {
   Object.keys(carrinho).forEach(id => delete carrinho[id]);
   renderizarCarrinho();
 }
 
 function mostrarTotal() {
   // Implementação similar para calcular e exibir os ingredientes totais necessários
   // usando um layout organizado na seção "resumo-total"
 }
 
 function mostrarModalReceita(button) {
   const descricao = decodeURIComponent(button.getAttribute('data-descricao'));
   const lvl = button.getAttribute('data-lvl');
   const tempo = button.getAttribute('data-tempo');
   const descricaoFormatada = descricao.replace(/\n/g, '
').replace(/Tempo de recarga/g, '
Tempo de recarga');
   
   const modalHTML = `

         <button class="close-modal" onclick="fecharModal(event)">×</button>

Nível: ${lvl}

Tempo de preparo: ${tempo} min

Descrição:
${descricaoFormatada}

   `;
   document.body.insertAdjacentHTML('beforeend', modalHTML);
   document.addEventListener('keydown', (e) => e.key === 'Escape' && fecharModal(e));
 }
 
 function fecharModal(event) {
   event.preventDefault();
   const modal = document.querySelector('.modal-overlay');
   if (modal) {
     modal.classList.remove('active');
     setTimeout(() => modal.remove(), 300);
   }
 }

</script>