Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Leve 6, Pague Só 3! - Polo Tucano Masculina Premium</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #2c3e50; | |
| --secondary-color: #3498db; | |
| --accent-color: #e74c3c; | |
| --light-color: #ecf0f1; | |
| --dark-color: #2c3e50; | |
| --success-color: #2ecc71; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f7fa; | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| } | |
| header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 1.5rem 0; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo-icon { | |
| font-size: 2rem; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| } | |
| .anycoder-link { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| transition: opacity 0.3s; | |
| } | |
| .anycoder-link:hover { | |
| opacity: 1; | |
| } | |
| .cart-icon { | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background: var(--accent-color); | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 0.7rem; | |
| } | |
| .breadcrumb { | |
| background-color: white; | |
| padding: 0.8rem 0; | |
| border-bottom: 1px solid #e1e8ed; | |
| } | |
| .breadcrumb-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.9rem; | |
| color: #7f8c8d; | |
| } | |
| .breadcrumb a { | |
| color: var(--secondary-color); | |
| text-decoration: none; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| padding: 2rem 0; | |
| align-items: start; | |
| } | |
| .product-gallery { | |
| background: white; | |
| padding: 1.5rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| .main-image-container { | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid #e1e8ed; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .main-image { | |
| width: 100%; | |
| height: 400px; | |
| object-fit: contain; | |
| background-color: #f0f0f0; | |
| display: block; | |
| } | |
| .thumbnail-container { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.5rem; | |
| } | |
| .thumbnail { | |
| width: 100%; | |
| height: 80px; | |
| object-fit: cover; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| border-radius: 4px; | |
| transition: all 0.3s; | |
| } | |
| .thumbnail:hover, .thumbnail.active { | |
| border-color: var(--secondary-color); | |
| } | |
| .product-info { | |
| background: white; | |
| padding: 1.5rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| .product-title { | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--primary-color); | |
| } | |
| .product-subtitle { | |
| font-size: 1.1rem; | |
| color: #7f8c8d; | |
| margin-bottom: 1rem; | |
| } | |
| .rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .stars { | |
| color: #f39c12; | |
| } | |
| .price-container { | |
| margin: 1.5rem 0; | |
| } | |
| .original-price { | |
| text-decoration: line-through; | |
| color: #95a5a6; | |
| font-size: 1.1rem; | |
| } | |
| .discount-price { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--accent-color); | |
| margin-left: 0.5rem; | |
| } | |
| .installments { | |
| color: #7f8c8d; | |
| font-size: 0.9rem; | |
| margin-top: 0.5rem; | |
| } | |
| .color-options { | |
| margin: 2rem 0; | |
| } | |
| .color-title { | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .colors-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.5rem; | |
| } | |
| .color-option { | |
| width: 100%; | |
| height: 60px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .color-option:hover, .color-option.active { | |
| border-color: var(--secondary-color); | |
| transform: scale(1.05); | |
| } | |
| .color-option::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 24px; | |
| height: 24px; | |
| background: white; | |
| border-radius: 50%; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .color-option.active::after { | |
| opacity: 1; | |
| } | |
| .rosa { background-color: #ff99cc; } | |
| .azul-claro { background-color: #87ceeb; } | |
| .azul-marinho { background-color: #000080; } | |
| .azul-escuro { background-color: #000033; } | |
| .ciano { background-color: #00ffff; } | |
| .preto { background-color: #000000; } | |
| .branco { background-color: #ffffff; border: 1px solid #ddd; } | |
| .product-details { | |
| margin: 2rem 0; | |
| } | |
| .detail-item { | |
| display: flex; | |
| margin-bottom: 0.8rem; | |
| } | |
| .detail-icon { | |
| color: var(--secondary-color); | |
| margin-right: 0.8rem; | |
| font-size: 1.1rem; | |
| } | |
| .detail-text { | |
| flex: 1; | |
| } | |
| .bonus-section { | |
| background-color: #f8f9fa; | |
| padding: 1.5rem; | |
| border-radius: 8px; | |
| margin: 2rem 0; | |
| } | |
| .bonus-title { | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| color: var(--success-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .bonus-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| margin-bottom: 0.8rem; | |
| padding-bottom: 0.8rem; | |
| border-bottom: 1px solid #e1e8ed; | |
| } | |
| .bonus-item:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .bonus-icon { | |
| color: var(--success-color); | |
| font-size: 1.2rem; | |
| } | |
| .quantity-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin: 2rem 0; | |
| } | |
| .quantity-btn { | |
| width: 30px; | |
| height: 30px; | |
| border: 1px solid #ddd; | |
| background: white; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 4px; | |
| transition: all 0.3s; | |
| } | |
| .quantity-btn:hover { | |
| background: #f0f0f0; | |
| } | |
| .quantity-input { | |
| width: 50px; | |
| height: 30px; | |
| text-align: center; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| .add-to-cart { | |
| width: 100%; | |
| padding: 1rem; | |
| background: var(--secondary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| margin-bottom: 1rem; | |
| } | |
| .add-to-cart:hover { | |
| background: #2980b9; | |
| transform: translateY(-2px); | |
| } | |
| .buy-now { | |
| width: 100%; | |
| padding: 1rem; | |
| background: var(--accent-color); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .buy-now:hover { | |
| background: #c0392b; | |
| transform: translateY(-2px); | |
| } | |
| .product-description { | |
| margin-top: 2rem; | |
| padding-top: 2rem; | |
| border-top: 1px solid #e1e8ed; | |
| } | |
| .description-title { | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .description-text { | |
| color: #555; | |
| line-height: 1.8; | |
| } | |
| .material-badge { | |
| display: inline-block; | |
| background: var(--success-color); | |
| color: white; | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| margin-top: 0.5rem; | |
| } | |
| .mobile-menu-toggle { | |
| display: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| @media (max-width: 768px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .header-content { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .header-right { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .mobile-menu-toggle { | |
| display: block; | |
| } | |
| .nav-menu { | |
| display: none; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .nav-menu.active { | |
| display: flex; | |
| } | |
| .colors-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .thumbnail-container { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .colors-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .thumbnail-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: 2rem; | |
| color: #7f8c8d; | |
| } | |
| .spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-radius: 50%; | |
| border-top: 4px solid var(--secondary-color); | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .error-message { | |
| background: #ffdddd; | |
| color: #d32f2f; | |
| padding: 1rem; | |
| border-radius: 4px; | |
| margin: 1rem 0; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-shopping-bag logo-icon"></i> | |
| <span>Tucano Premium</span> | |
| </div> | |
| <div class="header-right"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| <div class="cart-icon"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="cart-count">0</span> | |
| </div> | |
| <div class="mobile-menu-toggle"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="nav-menu"> | |
| <a href="#">Home</a> | |
| <a href="#">Produtos</a> | |
| <a href="#">Ofertas</a> | |
| <a href="#">Contato</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="breadcrumb"> | |
| <div class="container"> | |
| <div class="breadcrumb-content"> | |
| <i class="fas fa-home"></i> | |
| <a href="#">Home</a> | |
| <i class="fas fa-chevron-right"></i> | |
| <a href="#">Masculino</a> | |
| <i class="fas fa-chevron-right"></i> | |
| <span>Polos Premium</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="main-content"> | |
| <div class="product-gallery"> | |
| <div class="main-image-container"> | |
| <img src="https://i.imgur.com/GSB6PvF.png" alt="Polo Tucano Masculina Premium" class="main-image" id="mainProductImage"> | |
| <div class="loading" id="imageLoading"> | |
| <div class="spinner"></div> | |
| <p>Carregando imagem...</p> | |
| </div> | |
| </div> | |
| <div class="thumbnail-container"> | |
| <img src="https://i.imgur.com/GSB6PvF.png" alt="Thumbnail 1" class="thumbnail active" data-src="https://i.imgur.com/GSB6PvF.png"> | |
| <img src="https://i.imgur.com/lSCOCiz.png" alt="Thumbnail 2" class="thumbnail" data-src="https://i.imgur.com/lSCOCiz.png"> | |
| <img src="https://i.imgur.com/zDk6JxB.png" alt="Thumbnail 3" class="thumbnail" data-src="https://i.imgur.com/zDk6JxB.png"> | |
| <img src="https://i.imgur.com/OLrgRSN.png" alt="Thumbnail 4" class="thumbnail" data-src="https://i.imgur.com/OLrgRSN.png"> | |
| </div> | |
| <div class="error-message" id="imageError"> | |
| <i class="fas fa-exclamation-triangle"></i> Não foi possível carregar algumas imagens. | |
| </div> | |
| </div> | |
| <div class="product-info"> | |
| <h1 class="product-title">Polo Tucano Masculina Premium</h1> | |
| <p class="product-subtitle">Leve 6, Pague Só 3!</p> | |
| <div class="rating"> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span>(4.7) 128 avaliações</span> | |
| </div> | |
| <div class="price-container"> | |
| <span class="original-price">R$ 1.199,90</span> | |
| <span class="discount-price">R$ 599,90</span> | |
| <div class="installments">ou 10x de R$ 59,99 sem juros</div> | |
| </div> | |
| <div class="color-options"> | |
| <h3 class="color-title"> | |
| <i class="fas fa-palette"></i> | |
| Escolha sua cor (7 opções) | |
| </h3> | |
| <div class="colors-grid"> | |
| <div class="color-option rosa" data-color="Rosa" title="Rosa"></div> | |
| <div class="color-option azul-claro" data-color="Azul Claro" title="Azul Claro"></div> | |
| <div class="color-option azul-marinho" data-color="Azul Marinho" title="Azul Marinho"></div> | |
| <div class="color-option azul-escuro" data-color="Azul Escuro" title="Azul Escuro"></div> | |
| <div class="color-option ciano" data-color="Ciano" title="Ciano"></div> | |
| <div class="color-option preto" data-color="Preto" title="Preto"></div> | |
| <div class="color-option branco" data-color="Branco" title="Branco"></div> | |
| </div> | |
| </div> | |
| <div class="product-details"> | |
| <div class="detail-item"> | |
| <i class="fas fa-check-circle detail-icon"></i> | |
| <div class="detail-text"> | |
| <strong>Material Premium:</strong> Seda Gelada e Poliéster de Alta Respirabilidade | |
| <span class="material-badge">Alta Qualidade</span> | |
| </div> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-gem detail-icon"></i> | |
| <div class="detail-text"> | |
| <strong>Bordado Distintivo:</strong> Detalhes exclusivos que garantem autenticidade | |
| </div> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-tshirt detail-icon"></i> | |
| <div class="detail-text"> | |
| <strong>Quantidade:</strong> 6 Polos + 3 Brindes (Relógio Tático e 3 Bermudas) | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bonus-section"> | |
| <h3 class="bonus-title"> | |
| <i class="fas fa-gift"></i> | |
| Brindes Inclusos | |
| </h3> | |
| <div class="bonus-item"> | |
| <i class="fas fa-clock bonus-icon"></i> | |
| <div> | |
| <strong>Relógio Tático Premium</strong> | |
| <p>Resistente à água com design militar</p> | |
| </div> | |
| </div> | |
| <div class="bonus-item"> | |
| <i class="fas fa-tshirt bonus-icon"></i> | |
| <div> | |
| <strong>3 Bermudas Esportivas</strong> | |
| <p>Tecido leve e confortável para qualquer ocasião</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quantity-selector"> | |
| <span>Quantidade:</span> | |
| <button class="quantity-btn" id="decreaseQuantity">-</button> | |
| <input type="number" class="quantity-input" id="quantityInput" value="1" min="1" max="10"> | |
| <button class="quantity-btn" id="increaseQuantity">+</button> | |
| </div> | |
| <button class="add-to-cart"> | |
| <i class="fas fa-shopping-cart"></i> Adicionar ao Carrinho | |
| </button> | |
| <button class="buy-now"> | |
| <i class="fas fa-credit-card"></i> Comprar Agora | |
| </button> | |
| <div class="product-description"> | |
| <h3 class="description-title">Descrição do Produto</h3> | |
| <p class="description-text"> | |
| A Polo Tucano Masculina Premium é confeccionada com os melhores materiais do mercado, | |
| combinando seda gelada e poliéster de alta respirabilidade para garantir máximo conforto | |
| em qualquer ocasião. Com bordados distintivos e detalhes litrados, esta coleção oferece | |
| estilo e sofisticação. | |
| </p> | |
| <p class="description-text"> | |
| <strong>Promoção Especial:</strong> Leve 6 polos e pague apenas por 3, além de receber | |
| um relógio tático premium e 3 bermudas esportivas como brinde. Aproveite esta oferta | |
| por tempo limitado! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle | |
| const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); | |
| const navMenu = document.querySelector('.nav-menu'); | |
| mobileMenuToggle.addEventListener('click', function() { | |
| navMenu.classList.toggle('active'); | |
| }); | |
| // Color selection | |
| const colorOptions = document.querySelectorAll('.color-option'); | |
| colorOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| colorOptions.forEach(opt => opt.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Quantity selector | |
| const decreaseBtn = document.getElementById('decreaseQuantity'); | |
| const increaseBtn = document.getElementById('increaseQuantity'); | |
| const quantityInput = document.getElementById('quantityInput'); | |
| decreaseBtn.addEventListener('click', function() { | |
| let currentValue = parseInt(quantityInput.value); | |
| if (currentValue > 1) { | |
| quantityInput.value = currentValue - 1; | |
| } | |
| }); | |
| increaseBtn.addEventListener('click', function() { | |
| let currentValue = parseInt(quantityInput.value); | |
| if (currentValue < 10) { | |
| quantityInput.value = currentValue + 1; | |
| } | |
| }); | |
| // Image gallery | |
| const thumbnails = document.querySelectorAll('.thumbnail'); | |
| const mainImage = document.getElementById('mainProductImage'); | |
| const loadingIndicator = document.getElementById('imageLoading'); | |
| const errorMessage = document.getElementById('imageError'); | |
| thumbnails.forEach(thumbnail => { | |
| thumbnail.addEventListener('click', function() { | |
| // Show loading indicator | |
| loadingIndicator.style.display = 'block'; | |
| mainImage.style.display = 'none'; | |
| errorMessage.style.display = 'none'; | |
| // Remove active class from all thumbnails | |
| thumbnails.forEach(thumb => thumb.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Get the new image source | |
| const newSrc = this.getAttribute('data-src'); | |
| // Create a new image to check if it loads | |
| const tempImg = new Image(); | |
| tempImg.src = newSrc; | |
| tempImg.onload = function() { | |
| mainImage.src = newSrc; | |
| mainImage.style.display = 'block'; | |
| loadingIndicator.style.display = 'none'; | |
| }; | |
| tempImg.onerror = function() { | |
| loadingIndicator.style.display = 'none'; | |
| errorMessage.style.display = 'block'; | |
| }; | |
| }); | |
| }); | |
| // Initialize first image | |
| const firstThumbnail = document.querySelector('.thumbnail.active'); | |
| if (firstThumbnail) { | |
| const initialSrc = firstThumbnail.getAttribute('data-src'); | |
| const tempImg = new Image(); | |
| tempImg.src = initialSrc; | |
| tempImg.onload = function() { | |
| mainImage.src = initialSrc; | |
| mainImage.style.display = 'block'; | |
| loadingIndicator.style.display = 'none'; | |
| }; | |
| tempImg.onerror = function() { | |
| loadingIndicator.style.display = 'none'; | |
| errorMessage.style.display = 'block'; | |
| }; | |
| } | |
| // Add to cart functionality | |
| const addToCartBtn = document.querySelector('.add-to-cart'); | |
| const cartCount = document.querySelector('.cart-count'); | |
| addToCartBtn.addEventListener('click', function() { | |
| const quantity = parseInt(quantityInput.value); | |
| const currentCount = parseInt(cartCount.textContent); | |
| cartCount.textContent = currentCount + quantity; | |
| // Show feedback | |
| addToCartBtn.textContent = 'Adicionado!'; | |
| addToCartBtn.style.background = '#2ecc71'; | |
| setTimeout(() => { | |
| addToCartBtn.innerHTML = '<i class="fas fa-shopping-cart"></i> Adicionar ao Carrinho'; | |
| addToCartBtn.style.background = 'var(--secondary-color)'; | |
| }, 2000); | |
| }); | |
| // Buy now functionality | |
| const buyNowBtn = document.querySelector('.buy-now'); | |
| buyNowBtn.addEventListener('click', function() { | |
| alert('Redirecionando para o checkout...'); | |
| // In a real application, this would redirect to checkout | |
| }); | |
| // Preload images to check for errors | |
| const imageUrls = [ | |
| 'https://i.imgur.com/GSB6PvF.png', | |
| 'https://i.imgur.com/lSCOCiz.png', | |
| 'https://i.imgur.com/zDk6JxB.png', | |
| 'https://i.imgur.com/OLrgRSN.png', | |
| 'https://i.imgur.com/S4j3IGA.png', | |
| 'https://i.imgur.com/cdkLWrC.png', | |
| 'https://i.imgur.com/Ujd8GKf.png', | |
| 'https://i.imgur.com/D4Lmakb.jpeg', | |
| 'https://i.imgur.com/nkKCO6j.jpeg', | |
| 'https://i.imgur.com/b2Eqh1I.jpeg' | |
| ]; | |
| let errorCount = 0; | |
| imageUrls.forEach(url => { | |
| const img = new Image(); | |
| img.src = url; | |
| img.onerror = function() { | |
| errorCount++; | |
| if (errorCount > 0) { | |
| errorMessage.style.display = 'block'; | |
| } | |
| }; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |