text-decoration: none; transition: color 0.3s; } .nav-links a:hover { color: var(--warning-color); } /* Hero Section */ .hero { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('data:image/svg+xml,'); background-size: cover; background-position: center; height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } .hero-content h1 { font-size: 3.5rem; margin-bottom: 1rem; font-weight: bold; } .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; } .cta-button { background: var(--warning-color); color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; transition: all 0.3s; display: inline-block; } .cta-button:hover { background: #E67E22; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); color: white; } /* Products Section */ .products-section { padding: 4rem 0; background-color: var(--bg-light); } .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: var(--text-dark); } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .product-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s; display: flex; flex-direction: column; height: 100%; } .product-card:hover { transform: translateY(-5px); } .product-image { height: 200px; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; overflow: hidden; border-radius: 10px 10px 0 0; } .product-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px 10px 0 0; } .product-info { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; } .product-name { font-size: 1.3rem; font-weight: bold; margin-bottom: 0.5rem; color: var(--text-dark); } .product-description { color: var(--text-light); margin-bottom: 1rem; line-height: 1.5; } .product-price { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); margin-bottom: 1rem; } .add-to-cart { width: 90%; max-width: 240px; min-width: 180px; margin-left: auto; margin-right: auto; margin-bottom: 0; display: block; padding: 0.8rem 0; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.3s; margin-top: auto; } .customize-btn { background: #1976d2 !important; color: #fff !important; border: none; box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08); transition: background 0.2s; } .customize-btn:hover { background: #1565c0 !important; } .add-to-cart:hover { background: #E55A2B; } /* Cart */ .cart-icon { position: relative; cursor: pointer; } .cart-count { position: absolute; top: -8px; right: -8px; background: var(--warning-color); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; } .cart-sidebar { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: white; box-shadow: -2px 0 10px rgba(0,0,0,0.1); transition: right 0.3s; z-index: 1001; overflow-y: auto; } .cart-sidebar.active { right: 0; } .cart-header { background: var(--primary-color); color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .cart-content { padding: 1rem; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #eee; } .cart-item:last-child { border-bottom: none; } .cart-item-info { flex: 1; } .cart-item-name { font-weight: bold; margin-bottom: 0.5rem; } .cart-item-description { font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.5rem; line-height: 1.3; } /* Admin Panel Styles */ .admin-login-modal, .admin-panel-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 2000; } .product-edit-modal, .category-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: none; justify-content: center; align-items: center; z-index: 3000; } .admin-modal-content { background: white; border-radius: 15px; padding: 2rem; max-width: 90%; max-height: 90%; overflow-y: auto; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .product-edit-modal .admin-modal-content { max-width: 800px; width: 90%; } .category-modal .admin-modal-content { max-width: 600px; width: 90%; } .admin-login-form { display: flex; flex-direction: column; gap: 1rem; min-width: 300px; } .admin-panel-content { min-width: 800px; } .admin-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 2px solid #eee; } .admin-tab { padding: 1rem 2rem; background: none; border: none; cursor: pointer; font-weight: bold; color: var(--text-light); border-bottom: 3px solid transparent; transition: all 0.3s ease; } .admin-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } .admin-tab-content { display: none; } .admin-tab-content.active { display: block; } .admin-form-group { margin-bottom: 1.5rem; } .admin-form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: var(--text-dark); } .admin-form-group input, .admin-form-group textarea, .admin-form-group select { width: 100%; padding: 0.75rem; border: 2px solid #ddd; border-radius: 8px; font-size: 1rem; } .admin-form-group input:focus, .admin-form-group textarea:focus, .admin-form-group select:focus { border-color: var(--primary-color); outline: none; } .admin-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; } .admin-product-card { border: 2px solid #ddd; border-radius: 10px; padding: 1rem; background: #f9f9f9; } .admin-product-actions { display: flex; gap: 0.5rem; margin-top: 1rem; } .admin-btn { padding: 0.5rem 1rem; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; } .admin-btn-primary { background: var(--primary-color); color: white; } .admin-btn-danger { background: #dc3545; color: white; } .admin-btn-warning { background: #ffc107; color: black; } /* Estilos do Crawler */ .crawler-status { padding: 12px; border-radius: 5px; font-weight: bold; } .crawler-status.running { background: #e3f2fd; color: #1976d2; border: 1px solid #2196f3; } .crawler-status.success { background: #e8f5e8; color: #2e7d32; border: 1px solid #4caf50; } .crawler-status.error { background: #ffebee; color: #c62828; border: 1px solid #f44336; } .alert { padding: 15px; border-radius: 5px; margin: 15px 0; } .admin-access-btn { position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px; border-radius: 50%; background: var(--primary-color); color: white; border: none; cursor: pointer; font-size: 1.2rem; z-index: 1000; opacity: 0.7; transition: opacity 0.3s ease; } .admin-access-btn:hover { opacity: 1; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .image-preview { max-width: 200px; max-height: 200px; border-radius: 8px; margin-top: 0.5rem; } .cart-item-price { color: var(--primary-color); font-weight: bold; } .cart-item-controls { display: flex; align-items: center; gap: 0.5rem; } .quantity-btn { background: var(--primary-color); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .quantity-btn:hover { background: #E55A2B; } .cart-total { text-align: center; margin-top: 2rem; padding: 1rem; background: var(--bg-light); border-radius: 8px; } .total-price { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); margin-bottom: 1rem; } .checkout-btn { width: 100%; padding: 1rem; background: var(--success-color); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background 0.3s; } .checkout-btn:hover { background: #229954; } .empty-cart { text-align: center; padding: 2rem; color: var(--text-light); } /* Filtros */ .filter-btn { background: white; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 0.5rem 1rem; margin: 0 0.5rem; border-radius: 25px; cursor: pointer; transition: all 0.3s; font-weight: bold; } .filter-btn:hover, .filter-btn.active { background: var(--primary-color); color: white; } /* Animações */ .product-card { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hidden { display: none !important; } /* Notificações */ .notification { position: fixed; top: 20px; right: 20px; background: var(--success-color); color: white; padding: 1rem; border-radius: 5px; z-index: 2000; animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Login/User System */ .login-btn { background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid white; padding: 0.5rem 1rem; border-radius: 25px; cursor: pointer; transition: all 0.3s; font-size: 0.9rem; } .login-btn:hover { background: white; color: var(--primary-color); } .user-menu { display: flex; align-items: center; gap: 0.5rem; color: white; } .user-action-btn { background: rgba(255, 255, 255, 0.2); color: white; border: none; padding: 0.5rem; border-radius: 50%; cursor: pointer; transition: all 0.3s; } .user-action-btn:hover { background: rgba(255, 255, 255, 0.3); } /* Modal */ .modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; } .modal-content { background: white; border-radius: 15px; padding: 2rem; max-width: 90%; max-height: 90%; overflow-y: auto; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); min-width: 340px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; position: relative; } @media (max-width: 500px) { .modal-content { min-width: 90vw; max-width: 98vw; padding: 1.2rem 0.5rem; } } .modal-header { text-align: center; margin-bottom: 1.5rem; } .modal-header h2 { color: var(--primary-color); margin-bottom: 0.5rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: var(--text-dark); } .form-group input { width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; } .form-group input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2); } .form-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; } .btn-primary { flex: 1; background: var(--primary-color); color: white; border: none; padding: 0.8rem; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.3s; } .btn-primary:hover { background: #E55A2B; } .btn-secondary { flex: 1; background: var(--text-light); color: white; border: none; padding: 0.8rem; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.3s; } .btn-secondary:hover { background: #6C7B7D; } .switch-mode { text-align: center; margin-top: 1rem; color: var(--text-light); } .switch-mode a { color: var(--primary-color); text-decoration: none; cursor: pointer; } .switch-mode a:hover { text-decoration: underline; } /* Custom Poke Modal */ .custom-poke-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; overflow-y: auto; } .custom-poke-content { background: white; padding: 2rem; border-radius: 15px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .custom-section { margin-bottom: 2rem; border-bottom: 1px solid #eee; padding-bottom: 1.5rem; transition: all 0.3s ease; } .custom-section.collapsed { margin-bottom: 1rem; padding-bottom: 0.5rem; } .custom-section.collapsed .option-list { display: none; } .custom-section:last-child { border-bottom: none; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: background 0.3s; } .section-header:hover { background: var(--bg-light); } .section-title { font-size: 1.2rem; font-weight: bold; color: var(--primary-color); } .section-requirement { font-size: 0.9rem; color: var(--text-light); background: var(--bg-light); padding: 0.3rem 0.8rem; border-radius: 15px; } .section-status { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 12px; margin-left: 0.5rem; } .section-status.complete { background: var(--success-color); color: white; } .section-status.incomplete { background: var(--warning-color); color: white; } .expand-icon { font-size: 0.8rem; transition: transform 0.3s; } .custom-section.collapsed .expand-icon { transform: rotate(180deg); } .option-list { display: grid; gap: 0.8rem; } .option-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border: 2px solid #eee; border-radius: 10px; cursor: pointer; transition: all 0.3s; } .option-item:hover { border-color: var(--primary-color); background: rgba(255, 107, 53, 0.05); } .option-item.selected { border-color: var(--primary-color); background: rgba(255, 107, 53, 0.1); } .option-info { flex: 1; } .option-name { font-weight: bold; margin-bottom: 0.3rem; } .option-note { font-size: 0.8rem; color: var(--text-light); font-style: italic; } .option-price { font-weight: bold; color: var(--primary-color); display: flex; align-items: center; gap: 0.5rem; } .quantity-controls { display: flex; align-items: center; gap: 0.3rem; } .quantity-btn { background: var(--primary-color); color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .quantity-btn:hover { background: #E55A2B; } .quantity-btn:disabled { background: #ccc; cursor: not-allowed; } .validation-message { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 1rem; border-radius: 8px; margin-top: 1rem; font-size: 0.9rem; } .validation-message ul { margin: 0.5rem 0 0 1rem; padding: 0; } .comments-section { margin-top: 1.5rem; } .comments-textarea { width: 100%; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; resize: vertical; min-height: 80px; font-family: inherit; } .custom-poke-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--bg-light); } .total-price-display { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); } .custom-poke-actions { display: flex; gap: 1rem; } /* Footer */ .footer { background: var(--text-dark); color: white; padding: 2rem 0; text-align: center; } /* Responsive */ @media (max-width: 768px) { .nav-links { display: none; } .hero-content h1 { font-size: 2.5rem; } .product-grid { grid-template-columns: 1fr; } .cart-sidebar { width: 100%; right: -100%; } } /* Custom Combinado Modal Styles */ .custom-combinado-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 1rem; } .custom-combinado-content { background: white; border-radius: 15px; max-width: 800px; max-height: 90vh; width: 100%; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .modal-header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 1.5rem; text-align: center; border-radius: 15px 15px 0 0; } .modal-header h2 { margin: 0; font-size: 1.8rem; } .modal-header p { margin: 0.5rem 0 0 0; opacity: 0.9; } .custom-section { padding: 1.5rem; } .section-header { margin-bottom: 1rem; } .section-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .section-title { color: var(--text-dark); margin: 0; font-size: 1.2rem; } .section-indicators { display: flex; gap: 0.5rem; align-items: center; } .section-requirement { background: var(--warning-color); color: white; padding: 0.3rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; } .section-status { padding: 0.3rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; } .section-status.complete { background: var(--success-color); color: white; } .section-status.incomplete { background: #e74c3c; color: white; } .combinado-products-grid { display: grid; gap: 1rem; max-height: 400px; overflow-y: auto; border: 1px solid #eee; border-radius: 8px; padding: 1rem; } .combinado-product-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 2px solid #eee; border-radius: 10px; transition: all 0.3s ease; background: white; } .combinado-product-item.selected { border-color: var(--primary-color); background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(78, 205, 196, 0.1)); } .combinado-product-header { display: flex; align-items: center; gap: 1rem; flex: 1; } .combinado-product-image { width: 80px; height: 80px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 2px solid #eee; transition: border-color 0.3s ease; } .combinado-product-item.selected .combinado-product-image { border-color: var(--primary-color); } .combinado-product-info { flex: 1; } .combinado-product-name { font-weight: bold; color: var(--text-dark); margin-bottom: 0.3rem; } .combinado-product-description { font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem; } .combinado-product-price { font-weight: bold; color: var(--primary-color); font-size: 1.1rem; } .combinado-quantity-controls { display: flex; align-items: center; gap: 0.5rem; border: 1px solid #ddd; border-radius: 25px; padding: 0.3rem; background: white; } .combinado-quantity-btn { width: 35px; height: 35px; border: none; border-radius: 50%; background: var(--primary-color); color: white; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .combinado-quantity-btn:hover { background: var(--secondary-color); transform: scale(1.1); } .combinado-quantity-display { min-width: 40px; text-align: center; font-weight: bold; font-size: 1.1rem; color: var(--text-dark); } .comments-section { padding: 1.5rem; border-top: 1px solid #eee; } .comments-section label { display: block; margin-bottom: 0.5rem; color: var(--text-dark); } .comments-textarea { width: 100%; min-height: 80px; padding: 0.8rem; border: 2px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 0.9rem; resize: vertical; transition: border-color 0.3s ease; } .comments-textarea:focus { outline: none; border-color: var(--primary-color); } .validation-messages { background: #fff5f5; border: 1px solid #fed7d7; border-radius: 8px; padding: 1rem; margin: 1rem 1.5rem; } .validation-content h4 { color: #c53030; margin-bottom: 0.5rem; } .validation-content ul { margin: 0; padding-left: 1.5rem; color: #c53030; } .custom-combinado-footer { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background: #f8f9fa; border-radius: 0 0 15px 15px; border-top: 1px solid #eee; } .total-price-display { font-size: 1.3rem; font-weight: bold; color: var(--primary-color); } .custom-combinado-actions { display: flex; gap: 1rem; } .btn-secondary { background: #6c757d; color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 25px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; } .btn-secondary:hover { background: #5a6268; transform: translateY(-2px); } .btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 25px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Responsive */ @media (max-width: 768px) { .custom-combinado-content { margin: 0.5rem; max-height: 95vh; } .combinado-product-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .combinado-product-item { flex-direction: column; align-items: stretch; } .combinado-quantity-controls { align-self: flex-end; margin-top: 1rem; } .custom-combinado-footer { flex-direction: column; gap: 1rem; text-align: center; } .custom-combinado-actions { width: 100%; justify-content: center; } }
0

Talue Poke

Sabor autêntico do oceano direto na sua mesa. Ingredientes frescos, combinações únicas e muito sabor em cada bowl.

Ver Produtos

Nossos Produtos

Seu Carrinho

Seu carrinho está vazio

Adicionar Produto

Cole o link direto da imagem (ex: do iFood, Instagram, etc.)

Adicionar Categoria

🔐 Acesso Administrativo

🛠️ Painel Administrativo

📦 Pedidos Recebidos

ID Cliente Telefone Endereço Itens Total Status Data Ações
Carregando pedidos...

Gerenciar Produtos

Gerenciar Categorias

Configuração de Entrega

Localização da Loja

Identidade Visual

Informações do Rodapé

Página Inicial

🗄️ Configurações do Sistema

Gerencie como o sistema armazena e processa dados dos usuários.

📊 Status Atual

Modo de Autenticação: localStorage
MySQL Disponível: Verificando...
Usuários Cadastrados: Carregando...

⚙️ Configurações

📤 Migração de Dados

Transfira dados existentes do localStorage para o MySQL.

👥 Usuários do Sistema

Clique em "Atualizar Lista" para carregar os usuários

🤖 Crawler do iFood

Importe automaticamente produtos do iFood para sua loja.

Cole aqui o link da sua página no iFood

📋 Logs do Crawler:

Nenhum log ainda. Execute o crawler para ver os resultados.

ℹ️ Como usar:
  1. Cole a URL da sua página no iFood
  2. Clique em "Salvar URL" para guardar a configuração
  3. Clique em "Executar Crawler" para importar produtos
  4. Acompanhe o progresso nos logs abaixo
🖼️ Extração de Imagens:
  • Imagens reais: O crawler extrai as imagens originais dos produtos do iFood
  • Conversão automática: Imagens são convertidas para base64 e salvas localmente
  • Qualidade preservada: Mantém a qualidade original das fotos dos pratos
  • Compatibilidade: Funciona com JPG, PNG e WebP do iFood
⚠️ Nota: Por limitações técnicas do navegador, atualmente o sistema simula a extração de imagens gerando previews avançados. Para imagens reais do iFood, seria necessário um backend com proxy para contornar políticas CORS.