agora coloque a parte dos estagios a funcionar, ou seja , ao clicar deverá abrir uma pagina só relacionada a estagio, onde vira diversos cartazes especificando cada estagio existente e ao clicar em um determinado cartaz deverá aparecer um formulario de inscrição para poder se increver no estagio escolhido, pedindo assim informações essencias como (nome, sobrenome, data de nascimento, numero de BI e dps o metodo de pagamento)
c4739db verified | document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize products data for all product pages | |
| if (window.location.pathname.includes('products.html') || | |
| window.location.pathname.includes('produtos/')) { | |
| initializeProducts(); | |
| } | |
| // Close internship modal when clicking outside | |
| document.addEventListener('click', (e) => { | |
| const modal = document.getElementById('internshipModal'); | |
| if (modal && !modal.contains(e.target) && e.target !== modal) { | |
| modal.classList.add('hidden'); | |
| } | |
| }); | |
| // Initialize all tooltips | |
| const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); | |
| // Form submission handling | |
| const contactForm = document.querySelector('custom-contact-form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const formData = new FormData(e.target); | |
| // Here you would typically send the form data to a server | |
| console.log('Form submitted:', Object.fromEntries(formData)); | |
| // Show success message | |
| alert('Obrigado pela sua mensagem! Entraremos em contato em breve.'); | |
| e.target.reset(); | |
| }); | |
| function initializeProducts() { | |
| const products = [ | |
| { | |
| id: 'ARDU-001', | |
| name: 'Arduino Uno R3', | |
| price: 15000, | |
| image: 'http://static.photos/technology/400x300/10', | |
| category: 'arduino', | |
| stock: 15 | |
| }, | |
| { | |
| id: 'ARDU-002', | |
| name: 'Arduino Mega 2560', | |
| price: 25000, | |
| image: 'http://static.photos/technology/400x300/11', | |
| category: 'arduino', | |
| stock: 8 | |
| }, | |
| { | |
| id: 'ARDU-003', | |
| name: 'Kit Arduino Iniciante', | |
| price: 35000, | |
| image: 'http://static.photos/technology/400x300/101', | |
| category: 'arduino', | |
| stock: 10 | |
| }, | |
| { | |
| id: 'ARDU-004', | |
| name: 'Arduino Nano', | |
| price: 12000, | |
| image: 'http://static.photos/technology/400x300/105', | |
| category: 'arduino', | |
| stock: 5 | |
| }, | |
| { | |
| id: 'LED-001', | |
| name: 'LED Vermelho 5mm', | |
| price: 500, | |
| image: 'http://static.photos/technology/400x300/12', | |
| category: 'led', | |
| stock: 100 | |
| }, | |
| { | |
| id: 'LED-002', | |
| name: 'LED RGB 5mm', | |
| price: 1000, | |
| image: 'http://static.photos/technology/400x300/13', | |
| category: 'led', | |
| stock: 50 | |
| }, | |
| { | |
| id: 'LED-003', | |
| name: 'LED Branco 5mm', | |
| price: 600, | |
| image: 'http://static.photos/technology/400x300/106', | |
| category: 'led', | |
| stock: 75 | |
| }, | |
| { | |
| id: 'LED-004', | |
| name: 'LED Azul 5mm', | |
| price: 600, | |
| image: 'http://static.photos/technology/400x300/107', | |
| category: 'led', | |
| stock: 60 | |
| }, | |
| { | |
| id: 'LED-005', | |
| name: 'Fita LED RGB 1m', | |
| price: 12000, | |
| image: 'http://static.photos/technology/400x300/102', | |
| category: 'led', | |
| stock: 25 | |
| }, | |
| { | |
| id: 'PLACA-001', | |
| name: 'Placa de Teste 400 Pontos', | |
| price: 3000, | |
| image: 'http://static.photos/technology/400x300/14', | |
| category: 'placa', | |
| stock: 20 | |
| }, | |
| { | |
| id: 'PLACA-002', | |
| name: 'Placa de Teste 630 Pontos', | |
| price: 5500, | |
| image: 'http://static.photos/technology/400x300/108', | |
| category: 'placa', | |
| stock: 12 | |
| }, | |
| { | |
| id: 'PLACA-003', | |
| name: 'Placa de Teste 830 Pontos', | |
| price: 8000, | |
| image: 'http://static.photos/technology/400x300/103', | |
| category: 'placa', | |
| stock: 15 | |
| }, | |
| { | |
| id: 'CABO-001', | |
| name: 'Cabo USB 2.0', | |
| price: 1500, | |
| image: 'http://static.photos/technology/400x300/15', | |
| category: 'cabo', | |
| stock: 30 | |
| }, | |
| { | |
| id: 'CABO-002', | |
| name: 'Cabo HDMI', | |
| price: 3000, | |
| image: 'http://static.photos/technology/400x300/109', | |
| category: 'cabo', | |
| stock: 18 | |
| }, | |
| { | |
| id: 'CABO-003', | |
| name: 'Cabo de Rede CAT6', | |
| price: 2500, | |
| image: 'http://static.photos/technology/400x300/110', | |
| category: 'cabo', | |
| stock: 22 | |
| }, | |
| { | |
| id: 'CABO-004', | |
| name: 'Conector BNC', | |
| price: 1000, | |
| image: 'http://static.photos/technology/400x300/111', | |
| category: 'cabo', | |
| stock: 35 | |
| }, | |
| { | |
| id: 'OUT-001', | |
| name: 'Fonte 5V 2A', | |
| price: 5000, | |
| image: 'http://static.photos/technology/400x300/16', | |
| category: 'outros', | |
| stock: 12 | |
| }, | |
| { | |
| id: 'OUT-002', | |
| name: 'Sensor de Movimento PIR', | |
| price: 3500, | |
| image: 'http://static.photos/technology/400x300/17', | |
| category: 'outros', | |
| stock: 18 | |
| }, | |
| { | |
| id: 'OUT-003', | |
| name: 'Módulo Relé 5V', | |
| price: 4000, | |
| image: 'http://static.photos/technology/400x300/112', | |
| category: 'outros', | |
| stock: 15 | |
| }, | |
| { | |
| id: 'OUT-004', | |
| name: 'Display LCD 16x2', | |
| price: 5500, | |
| image: 'http://static.photos/technology/400x300/113', | |
| category: 'outros', | |
| stock: 10 | |
| }, | |
| { | |
| id: 'OUT-005', | |
| name: 'Sensor de Umidade Solo', | |
| price: 6500, | |
| image: 'http://static.photos/technology/400x300/104', | |
| category: 'outros', | |
| stock: 30 | |
| } | |
| ]; | |
| const productsGrid = document.getElementById('productsGrid'); | |
| const searchInput = document.getElementById('productSearch'); | |
| // Get current category from URL | |
| const currentCategory = window.location.pathname.includes('produtos/') ? | |
| window.location.pathname.split('/').pop().replace('.html', '') : 'all'; | |
| // Filter products by category | |
| let filteredProducts = products; | |
| if (currentCategory !== 'all' && currentCategory !== 'products.html') { | |
| filteredProducts = products.filter(p => | |
| currentCategory === 'todos' ? true : p.category === currentCategory | |
| ); | |
| } | |
| // Render products initially | |
| renderProducts(filteredProducts); | |
| // Search functionality | |
| searchInput.addEventListener('input', (e) => { | |
| const searchTerm = e.target.value.toLowerCase(); | |
| const filteredProducts = products.filter(p => | |
| p.name.toLowerCase().includes(searchTerm) || | |
| p.id.toLowerCase().includes(searchTerm) | |
| ); | |
| renderProducts(filteredProducts); | |
| }); | |
| function renderProducts(productsToRender) { | |
| productsGrid.innerHTML = ''; | |
| if (productsToRender.length === 0) { | |
| productsGrid.innerHTML = '<p class="col-span-3 text-center text-gray-500 py-8">Nenhum produto encontrado.</p>'; | |
| return; | |
| } | |
| productsToRender.forEach(product => { | |
| const card = document.createElement('product-card'); | |
| card.setAttribute('id', product.id); | |
| card.setAttribute('name', product.name); | |
| card.setAttribute('price', product.price); | |
| card.setAttribute('image', product.image); | |
| card.setAttribute('category', product.category); | |
| card.setAttribute('stock', product.stock); | |
| productsGrid.appendChild(card); | |
| }); | |
| if (window.feather) { | |
| window.feather.replace(); | |
| } | |
| } | |
| } | |
| } | |
| // Newsletter subscription | |
| const newsletterForm = document.querySelector('custom-newsletter-form'); | |
| if (newsletterForm) { | |
| newsletterForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = e.target.querySelector('input[type="email"]').value; | |
| // Here you would typically send the email to a server | |
| console.log('Newsletter subscription:', email); | |
| // Show success message | |
| alert('Obrigado por assinar nossa newsletter!'); | |
| e.target.reset(); | |
| }); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Animation on scroll | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.fade-in'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.2; | |
| if (elementPosition < screenPosition) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', animateOnScroll); | |
| animateOnScroll(); // Initialize | |
| }); | |
| // Service card interaction | |
| document.addEventListener('mouseover', function(e) { | |
| if (e.target.closest('service-card')) { | |
| const card = e.target.closest('service-card'); | |
| const icon = card.shadowRoot.querySelector('.service-icon'); | |
| icon.style.transform = 'scale(1.1)'; | |
| } | |
| }); | |
| document.addEventListener('mouseout', function(e) { | |
| if (e.target.closest('service-card')) { | |
| const card = e.target.closest('service-card'); | |
| const icon = card.shadowRoot.querySelector('.service-icon'); | |
| icon.style.transform = 'scale(1)'; | |
| } | |
| }); |