diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..20a80fd --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,66 @@ + +:root { + --primary-color: #007BFF; + --secondary-color: #6C757D; + --background-color: #F8F9FA; + --surface-color: #FFFFFF; + --accent-color: #FFC107; + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + +body { + font-family: var(--font-family); + background-color: var(--background-color); +} + +.navbar { + background: linear-gradient(90deg, var(--primary-color), #0056b3); +} + +.category-tabs .nav-link { + color: var(--secondary-color); + border: 1px solid transparent; +} + +.category-tabs .nav-link.active { + color: var(--primary-color); + border-bottom: 2px solid var(--primary-color); + background-color: transparent; +} + +.product-card { + border-radius: 0.5rem; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + border: 1px solid #dee2e6; +} + +.product-card:hover { + transform: translateY(-5px); + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} + +.product-card img { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + aspect-ratio: 4 / 3; + object-fit: cover; +} + +.product-price { + color: var(--primary-color); + font-weight: bold; +} + +.loader { + border: 4px solid #f3f3f3; + border-radius: 50%; + border-top: 4px solid var(--primary-color); + width: 40px; + height: 40px; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..f1aec23 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,98 @@ + +document.addEventListener('DOMContentLoaded', () => { + const categoriesContainer = document.getElementById('category-tabs'); + const productsContainer = document.getElementById('product-list'); + const loader = document.getElementById('loader'); + + let allProducts = []; + let allGroups = []; + + const fetchMockData = async () => { + try { + const [groupsRes, productsRes] = await Promise.all([ + fetch('data/grupos.json'), + fetch('data/produtos.json') + ]); + allGroups = await groupsRes.json(); + allProducts = await productsRes.json(); + return { groups: allGroups, products: allProducts }; + } catch (error) { + console.error('Error fetching mock data:', error); + productsContainer.innerHTML = '

Failed to load menu data.

'; + return { groups: [], products: [] }; + } + }; + + const renderCategories = (groups) => { + if (!categoriesContainer) return; + categoriesContainer.innerHTML = ''; + const nav = document.createElement('ul'); + nav.className = 'nav nav-tabs category-tabs'; + + const allTab = document.createElement('li'); + allTab.className = 'nav-item'; + allTab.innerHTML = `All`; + nav.appendChild(allTab); + + groups.forEach(group => { + const tab = document.createElement('li'); + tab.className = 'nav-item'; + tab.innerHTML = `${group.GRUPNOME}`; + nav.appendChild(tab); + }); + categoriesContainer.appendChild(nav); + + nav.addEventListener('click', (e) => { + e.preventDefault(); + if (e.target.tagName === 'A') { + nav.querySelector('.active').classList.remove('active'); + e.target.classList.add('active'); + const groupId = e.target.getAttribute('data-group-id'); + renderProducts(allProducts, groupId); + } + }); + }; + + const renderProducts = (products, groupId = 'all') => { + if (!productsContainer) return; + productsContainer.innerHTML = ''; + const filteredProducts = groupId === 'all' + ? products + : products.filter(p => p.PRODGRUPO == groupId); + + if (filteredProducts.length === 0) { + productsContainer.innerHTML = '

No products found in this category.

'; + return; + } + + filteredProducts.forEach(product => { + const col = document.createElement('div'); + col.className = 'col-md-4 col-lg-3 mb-4'; + const card = ` +
+ ${product.PRODNOME} +
+
${product.PRODNOME}
+

${product.OBS || ''}

+
+ R$ ${product.PRODPRECOVENDA.toFixed(2)} + +
+
+
+ `; + col.innerHTML = card; + productsContainer.appendChild(col); + }); + }; + + const init = async () => { + loader.style.display = 'block'; + const { groups, products } = await fetchMockData(); + loader.style.display = 'none'; + renderCategories(groups); + renderProducts(products); + }; + + init(); +}); diff --git a/data/grupos.json b/data/grupos.json new file mode 100644 index 0000000..707f089 --- /dev/null +++ b/data/grupos.json @@ -0,0 +1,23 @@ + +[ + { + "GRUPCODIGO": 14, + "GRUPNOME": "BONIFICAÇÃO", + "GRUPCODORDENACAO": 14 + }, + { + "GRUPCODIGO": 16, + "GRUPNOME": "BRINDES", + "GRUPCODORDENACAO": 16 + }, + { + "GRUPCODIGO": 4, + "GRUPNOME": "BEBIDAS", + "GRUPCODORDENACAO": 4 + }, + { + "GRUPCODIGO": 6, + "GRUPNOME": "ACOMPANHAMENTOS", + "GRUPCODORDENACAO": 6 + } +] diff --git a/data/produtos.json b/data/produtos.json new file mode 100644 index 0000000..ac5d626 --- /dev/null +++ b/data/produtos.json @@ -0,0 +1,53 @@ + +[ + { + "PRODCODIGO": 307, + "PRODCODIGOBARRA": "7890000003070", + "PRODNOME": "ACENDEDEOR FOGO FACIL 10 UND", + "PRODGRUPO": 4, + "SERVICO": false, + "PRODPRECOVENDA": 25, + "PRODFOTO": "", + "OBS": "", + "EXPORTASITE": "S", + "PRODATIVO": "S", + "PRODMAXCOMPLEMENTOS": 0 + }, + { + "PRODCODIGO": 306, + "PRODCODIGOBARRA": "7890000003063", + "PRODNOME": "ACENDEDOR FOGO FACIL INDUSTRIA", + "PRODGRUPO": 6, + "SERVICO": false, + "PRODPRECOVENDA": 1.05, + "PRODFOTO": "", + "OBS": "", + "EXPORTASITE": "S", + "PRODATIVO": "S", + "PRODMAXCOMPLEMENTOS": 0 + }, + { + "PRODCODIGO": 4, + "PRODNOME": "ALECRIM INDUSTRIA", + "PRODGRUPO": 16, + "SERVICO": false, + "PRODPRECOVENDA": 11.86, + "PRODFOTO": "", + "OBS": "", + "EXPORTASITE": "S", + "PRODATIVO": "S", + "PRODMAXCOMPLEMENTOS": 0 + }, + { + "PRODCODIGO": 1, + "PRODNOME": "AÇAFRÃO 4 ESTAÇÕES FD 10X20G", + "PRODGRUPO": 14, + "SERVICO": false, + "PRODPRECOVENDA": 19.2, + "PRODFOTO": "", + "OBS": "", + "EXPORTASITE": "S", + "PRODATIVO": "S", + "PRODMAXCOMPLEMENTOS": 0 + } + ] diff --git a/index.php b/index.php index 7205f3d..e350485 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,59 @@ - - - + + - - - New Style - - - - - - - - - - - - - - - - - - - + + + cardapiQr + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + +
+
+

Nosso Cardápio

+

Explore nossos pratos e bebidas.

+
+ + +
+ + + + + - + \ No newline at end of file