Comparativo de Versões

body { font-family: ‘Roboto’, sans-serif; background-color: #ffffff; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; height: 100vh; } .container { width: 40%; display: flex; flex-direction: column; align-items: center; } table, button { width: 100%; } table { table.linhasAlternadas { border-collapse: collapse; /* CSS2 */ background: #FFFFF0; border: solid green 1px; } table.linhasAlternadas tr:nth-child(even) /* CSS3 */ { background: #F0FFFF; } border-collapse: collapse; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 12px; overflow: hidden; background-color: #fff; margin-top: 20px; max-height: 0; opacity: 0; transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin-top 0.5s ease-out; border: 2px solid #000000; /* Adiciona um contorno à tabela */ } table.show { opacity: 1; max-height: 1000px; /* Ajuste conforme necessário */ margin-top: 20px; } th, td { padding: 15px; text-align: center; } th { background-color: #4e7dbf; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } .positive { color: green; } .negative { color: red; } button { padding: 15px 20px; font-size: 16px; border: none; border-radius: 5px; background-color: #1a3f97; color: white; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } button:hover { background-color: #4e7dbf; } button.active { background-color: #4e7dbf; } button .icon { font-size: 20px; transition: color 0.3s; } h2 { color: #333; } function toggleTable() { var table = document.getElementById(“comparisonTable”); var button = document.getElementById(“toggleButton”); if (table.classList.contains(“show”)) { table.classList.remove(“show”); button.innerHTML = ‘Comparar funcionalidades entre as versões +‘; button.classList.remove(“active”); } else { table.classList.add(“show”); button.innerHTML = ‘Comparar funcionalidades entre as versões –‘; button.classList.add(“active”); } }