Upload 8 files

index.html

@@ -22,20 +22,20 @@
         .sidebar {
             width: 280px;
             min-height: 100vh;
-            background-color: #181818; /* Fundo escuro simples */
+            background-color: #181818; /*  Fundo escuro simples */
             backdrop-filter: none;
             color: #F5F5F5;
             padding: 20px;
             box-sizing: border-box;
             flex-shrink: 0;
-            display: flex; /* Adicionado para layout flexível */
-            flex-direction: column; /* Organiza os itens verticalmente */
+            display: flex; /* Adicionado para layout flexível */ 
+            flex-direction: column; /*  Organiza os itens verticalmente */
         }
         .sidebar-content {
-            flex-grow: 1; /* Permite que o conteúdo cresça e empurre a imagem para baixo */
+            flex-grow: 1; /*  Permite que o conteúdo cresça e empurre a imagem para baixo */
         }
         .sidebar-image {
-            margin-top: auto; /* Empurra a imagem para o final */
+            margin-top: auto; /*  Empurra a imagem para o final */
             padding-top: 20px;
             text-align: left;
         }
@@ -44,13 +44,14 @@
             height: auto;
             border-radius: 8px;
         }
+
         .sidebar-logo {
-            text-align: left; /* Alinha a logomarca à esquerda */
-            padding: 20px 0 0 0; /* Remove o padding extra para alinhar com o menu */
-            bbackground-color: transparent; /* Cor de fundo da sidebar */ */
+            text-align: left; /*  Alinha a logomarca à esquerda */
+            padding: 20px 0 0 0; /*  Remove o padding extra para alinhar com o menu */
+            bbackground-color: transparent; /*  Cor de fundo da sidebar  */
         }
         .sidebar-menu {
-            margin-top: 40px; /* Aumenta o espaço entre a logo e o menu */
+            margin-top: 40px; /* Ajusta o espaço entre a logo e o menu */
             margin-bottom: 20px;
         }
         .sidebar-menu a {
@@ -58,25 +59,25 @@
             color: #F5F5F5;
             text-decoration: none;
             padding: 15px 20px; /* Aumenta o padding */
-            margin: 5px -20px; /* Estende a área de destaque para a borda da sidebar */
-            font-size: 28px; /* Aumenta a fonte para maior visibilidade */
-            font-family: sans-serif; /* Volta para a fonte padrão do corpo, mais legível */
-            font-weight: 700; /* Negrito, mas não excessivo */
+            margin: 5px -20px; /*  Estende a área de destaque para a borda da sidebar */
+            font-size: 28px; /*  Aumenta a fonte para maior visibilidade */
+            font-family: sans-serif; /*  Volta para a fonte padrão do corpo, mais legível */
+            font-weight: 700; /*  Negrito, mas não excessivo */
             transition: all 0.2s ease-in-out;
-            border-radius: 0 10px 10px 0; /* Borda arredondada no lado direito */
+            border-radius: 0 10px 10px 0; /*  Borda arredondada no lado direito */
         }
         .sidebar-menu a:hover {
-            background-color: #303030; /* Fundo mais escuro no hover */
-            color: #F5F5F5; /* Texto branco no hover */
+            background-color: #303030; /*  Fundo mais escuro no hover */
+            color: #F5F5F5; /*  Texto branco no hover */
             box-shadow: none;
         }
         .sidebar-menu a.active {
-            background-color: #303030; /* Fundo mais escuro no ativo */
+            background-color: #303030; /*  Fundo mais escuro no ativo */
             color: #F5F5F5;
             box-shadow: none;
             font-weight: bold;
-            border-left: 3px solid #00C853; /* Linha de destaque minimalista */
-            padding-left: 17px; /* Ajusta o padding */
+            border-left: 3px solid #00C853; /*  Linha de destaque minimalista */
+            padding-left: 17px; /*  Ajusta o padding */
         }
         .main-content {
             flex-grow: 1;
@@ -89,7 +90,7 @@
         }
         .image-placeholder {
             width: 100%;
-            height: 520px; /* Aumentado em 30% de 400px */
+            height: 520px; /*  Aumentado em 30% de 400px */
             background-color: #303030;
             border-radius: 8px;
             display: flex;
@@ -101,9 +102,9 @@
             overflow: hidden;
         }
         .image-placeholder img {
-            width: 100%; /* Garante que a imagem tente ocupar 100% da largura */
-            height: 100%; /* Garante que a imagem tente ocupar 100% da altura */
-            object-fit: contain; /* Garante que a proporção seja mantida */
+            width: 100%; /*  Garante que a imagem tente ocupar 100% da largura */
+            height: 100%; /*  Garante que a imagem tente ocupar 100% da altura */
+            object-fit: contain; /*  Garante que a proporção seja mantida */
         }
         .prediction-placeholder {
             min-height: 50px;
@@ -149,7 +150,7 @@
             display: none;
         }
          .footer {
-            text-align: left; /* Garante o alinhamento à esquerda */
+            text-align: left; /*  Garante o alinhamento à esquerda */
             padding: 1rem 0;
             color: #aaa;
             font-size: 14px;
@@ -170,14 +171,15 @@
             font-size: 16px;
             margin-bottom: 1.5rem;
         }
-        .about-content .card {
-            background-color: #181818;
-            backdrop-filter: none;
-            border-radius: 0;
-            padding: 15px;
-            box-shadow: none;
-            border: 1px solid #333;
-        }
+	        .about-content .card {
+	            background-color: #181818;
+	            backdrop-filter: none;
+	            border-radius: 0;
+	            padding: 15px;
+	            box-shadow: none;
+	            border: 1px solid #303030; /* Borda sutil */
+	            transition: all 0.3s ease-in-out;
+	        }
         .about-content .pill {
             display: inline-block;
             padding: 4px 8px;
@@ -207,15 +209,88 @@
         .about-content .step {
             flex: 1;
             min-width: 150px;
-            background-color: #181818;
-            padding: 10px;
-            border-radius: 6px;
-        }
-        .about-content .step h4 {
+	            background-color: #181818;
+	            padding: 10px;
+	            border-radius: 6px;
+	            border: 1px solid #303030; /*  Adicionar borda sutil */
+	            transition: all 0.3s ease-in-out; /*  Adicionar transição para o hover */
+        }
+	        .about-content .step:hover {
+	            background-color: #303030; /*  Fundo um pouco mais escuro no hover */
+	            border-color: #00C853; /*  Borda de destaque verde no hover */
+	            transform: translateY(-2px); /*  Efeito de elevação sutil */
+	            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*  Sombra sutil */
+	        }
+/*  Novo Design para o Card de Benefícios Chave */
+.benefit-key-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px; /* Aumentar o gap */
+    padding: 25px; /* Aumentar o padding */
+    border: 2px solid #00C853;
+    box-shadow: 0 0 15px rgba(0, 200, 83, 0.3);
+}
+
+.benefit-key-card .card-content {
+    flex-grow: 1;
+}
+
+.benefit-key-card .card-title {
+    font-size: 20px; /* Aumentar o título para 20px */
+    font-weight: 800; /* Deixar mais bold */
+    margin: 8px 0 0;
+}
+
+.benefit-key-card .card-subtitle {
+    font-size: 14px; /* Uniformizar com o p dos outros cards */
+    margin: 6px 0 0;
+}
+
+.benefit-key-card .card-aside {
+    text-align: right;
+    font-size: 14px; /* Aumentar para 14px */
+    color: #00C853; /* Dar destaque à cor */
+    font-weight: 700;
+    flex-shrink: 0;
+    max-width: 200px; /* Aumentar a largura */
+}
+
+	        .about-content .step h4 {
             margin: 0 0 5px;
             font-size: 14px;
         }
-        .about-content .step p {
+	        .about-content .step p {
+	            margin: 0;
+	            color: #aaa;
+	            font-size: 13px;
+	        }
+
+/*  Novo CSS para Títulos de Seção */
+.section-title {
+    font-size: 28px;
+    font-weight: 800;
+    color: #fff; /* Garantir que o título seja branco */
+    margin-bottom: 5px;
+    position: relative;
+    display: inline-block;
+}
+
+.section-title::after {
+    content: '';
+    display: block;
+    width: 50px; /* Largura do separador */
+    height: 4px; /* Espessura do separador */
+    background-color: #00C853; /* Cor de destaque verde */
+    margin-top: 8px;
+    border-radius: 2px;
+}
+
+.section-sub {
+    font-size: 16px;
+    color: #aaa;
+    margin-bottom: 30px;
+}
             margin: 0;
             color: #aaa;
             font-size: 13px;
@@ -229,32 +304,58 @@
             font-size: 24px;
             line-height: 1;
         }
-        .about-content .grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 15px;
-            margin-top: 15px;
-        }
-        .about-content .feature h3 {
-            margin: 0 0 5px;
-        }
-        .about-content .feature p {
-            margin: 0;
-            color: #aaa;
-            font-size: 14px;
-        }
-        @media (max-width: 768px) {
-            .about-content .grid {
-                grid-template-columns: 1fr;
-            }
-        }
+/*  Novo Design para Benefícios */
+.benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.benefit-card {
+    background-color: #181818;
+    border: 1px solid #303030;
+    border-radius: 8px;
+    padding: 20px;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+}
+
+.benefit-card:hover {
+    border-color: #00C853;
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+}
+
+.benefit-icon {
+    font-size: 36px;
+    line-height: 1;
+    margin-bottom: 10px;
+    display: block;
+}
+
+.benefit-card h3 {
+    margin: 0 0 8px;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.benefit-card p.muted {
+    font-size: 14px;
+    color: #aaa;
+}
+
+
+
     </style>
 </head>
 <body>
     <div class="sidebar">
+
         <div class="sidebar-logo">
             <a href="index.html"><img src="pulmox_logo_v2.png" alt="PulmoX Logo" style="width: 220px; height: auto; margin-bottom: 20px;"></a>
         </div>
+
         <div class="sidebar-content">
 
             <div class="sidebar-menu">
@@ -267,30 +368,29 @@
     </div>
 	    <div class="main-content">
 		        <div class="main-container">
-			            <div style="font-size:32px; font-weight:bold; margin-top:0px; line-height:1.2; margin-bottom: 1.5rem;">
-			                Classificação de Doenças Pulmonares via IA
-			            </div>
-			            <div class="about-intro" style="margin-bottom: 2rem; padding: 1.5rem; background-color: #181818; border-radius: 0; backdrop-filter: none;">
-			                <h1>About PulmoX</h1>
-			                <p style="font-size: 18px; line-height: 1.6;">PulmoX – Um Sistema para Classificação de Doenças Pulmonares em Imagens de Raios-X com Aplicação de Técnicas de Inteligência Artificial.</p>
-			                <p style="font-size: 18px; line-height: 1.6;">Ele usa técnicas de Deep Learning com Transfer Learning e Vision Transformers (ViT) para classificação de doenças pulmonares em imagens de Raios-X de Pulmão.</p>
-			                <p style="font-size: 18px; line-height: 1.6;">Foram obtidas pouco mais de 7.000 imagens de Raios-X etiquetadas com as patologias, de fontes open source.</p>
-			            </div>
-			            <hr style="border-color: #303030; margin: 2rem 0;">
-	                        <div class="about-content">
-                <h2>PulmoX — Inteligência Artificial para Diagnósticos Pulmonares Mais Rápidos e Confiáveis</h2>
-                <p class="lead">Analise automaticamente raios‑X de tórax com modelos de ponta: Transfer Learning e Vision Transformers (ViT). Otimize triagens, padronize laudos e acelere decisões clínicas.</p>
-                <div style="margin-top:18px" class="card">
-                    <div style="display:flex;align-items:center;justify-content:space-between;gap:12px">
-                        <div>
-                            <div class="pill">Treinado com +7.000 imagens rotuladas</div>
-                            <div style="font-weight:700;margin-top:8px">Precisão clínica para triagem e apoio diagnóstico</div>
-                            <div class="muted" style="margin-top:6px;font-size:13px">Compatível com fluxos DICOM e integração via API</div>
-                        </div>
-                        <div style="text-align:right;font-size:12px;color:var(--muted)">Adequado para hospitais, clínicas e centros de pesquisa</div>
-                    </div>
-                </div>
-                <section style="margin-top: 2rem;">
+				            <div style="font-size:32px; font-weight:bold; margin-top:0px; line-height:1.2; margin-bottom: 1.5rem;">
+				                Classificação Inteligente de Patologias Pulmonares
+				            </div>
+				            <div class="about-intro" style="margin-bottom: 2rem; padding: 1.5rem; background-color: #181818; border-radius: 0; backdrop-filter: none;">
+				                <h1>PulmoX: Classificação Inteligente de Patologias Pulmonares</h1>
+				                <p style="font-size: 18px; line-height: 1.6;">O PulmoX é um sistema de Inteligência Artificial desenvolvido para a classificação de doenças pulmonares em imagens de Raios-X de Tórax. Utilizando Deep Learning (Transfer Learning e Vision Transformers - ViT), o software foi treinado com mais de 7.000 imagens rotuladas, garantindo precisão clínica para triagem e apoio diagnóstico.</p>
+				                <p style="font-size: 18px; line-height: 1.6;">Desenvolvido por pesquisadores do Laboratório de Análise de Dados e Inteligência Artificial (LANA) da Universidade Estadual da Paraíba (UEPB).</p>
+				            </div>
+				            <hr style="border-color: #303030; margin: 2rem 0;">
+		                        <div class="about-content">
+	                <h2>Benefícios Chave</h2>
+	                <p class="lead">O PulmoX visa otimizar o fluxo de trabalho clínico, padronizar laudos e acelerar decisões médicas.</p>
+		                <div style="margin-top:18px" class="card benefit-key-card">
+		                    <div class="card-content">
+		                        <div class="pill">Modelo Validado: +7.000 Imagens Rotuladas</div>
+		                        <h3 class="card-title">Otimização de Fluxo e Suporte Diagnóstico</h3>
+		                        <p class="card-subtitle muted">Integração Empresarial: Compatibilidade DICOM e API</p>
+		                    </div>
+		                    <div class="card-aside muted">
+		                        Valor Estratégico para Instituições de Saúde
+		                    </div>
+		                </div>
+	                <section style="margin-top: 2rem;">
                     <h2 class="section-title">Como Funciona</h2>
                     <p class="section-sub">Pipeline simples e integrado para incorporar IA ao seu fluxo de trabalho clínico.</p>
                     <div class="pipeline">
@@ -310,30 +410,56 @@
                             <h4><span class="icon" style="color: #00C853;">🎯</span> Mapa de Calor & Classe</h4>
                             <p>Geração de probabilidades, mapa de calor explicável e relatório pré‑formatado.</p>
                         </div>
-                        <div class="step">
-                            <h4><span class="icon" style="color: #00C853;">📄</span> Integração e Laudo</h4>
-                            <p>API para integração com PACS, EMR ou exportação em PDF.</p>
-                        </div>
-                    </div>
-                </section>
-                <section style="margin-top: 2rem;">
-                    <h2 class="section-title">Base de Treinamento</h2>
-                    <p class="section-sub">Modelo treinado com um conjunto open source de mais de 7.000 imagens de raios‑X rotuladas cobrindo patologias relevantes.</p>
-                    <div class="grid">
-                        <div class="card feature">
-                            <h3>Robustez</h3>
-                            <p>Treinamento com imagens de diferentes equipamentos e resoluções para melhor generalização.</p>
-                        </div>
-                        <div class="card feature">
-                            <h3>Variedade Clínica</h3>
-                            <p>Patologias múltiplas representadas para permitir classificação multi‑rótulo.</p>
-                        </div>
-                        <div class="card feature">
-                            <h3>Atualizações</h3>
-                            <p>Pipeline que suporta re‑treinamento contínuo e incorporação de novas anotações.</p>
-                        </div>
-                    </div>
-                </section>
+	                        <div class="step">
+	                            <h4><span class="icon" style="color: #00C853;">🎯</span> 4. Resultados</h4>
+	                            <p>Geração de probabilidades e relatório pré-formatado.</p>
+	                        </div>
+	                    </div>
+	                </section>
+	                
+	                <section id="beneficios" style="margin-top: 2rem;">
+	                    <h2 class="section-title">Benefícios Detalhados</h2>
+	                    <p class="section-sub">Resultados práticos que impactam a operação e a qualidade do atendimento.</p>
+	
+	                    <div class="benefits-grid">
+	                        <div class="benefit-card">
+	                            <span class="benefit-icon" style="color: #00C853;">⚡</span>
+	                            <h3>Agilidade Operacional</h3>
+	                            <p class="muted">Triagens mais rápidas e redução de filas de espera, otimizando o tempo clínico.</p>
+	                        </div>
+	                        <div class="benefit-card">
+	                            <span class="benefit-icon" style="color: #00C853;">✅</span>
+	                            <h3>Padronização e Consistência</h3>
+	                            <p class="muted">Menos variabilidade entre profissionais e maior consistência no diagnóstico.</p>
+	                        </div>
+	                        <div class="benefit-card">
+	                            <span class="benefit-icon" style="color: #00C853;">🧠</span>
+	                            <h3>Suporte à Decisão</h3>
+	                            <p class="muted">Relatórios com probabilidade e mapas de calor que auxiliam a interpretação clínica.</p>
+	                        </div>
+	                    </div>
+	                </section>
+	                <section style="margin-top: 2rem;">
+	                    <h2 class="section-title">Base de Treinamento</h2>
+	                    <p class="section-sub">Modelo treinado com um conjunto open source de mais de 7.000 imagens de raios‑X rotuladas cobrindo patologias relevantes.</p>
+	                    <div class="benefits-grid">
+	                        <div class="benefit-card">
+	                            <span class="benefit-icon" style="color: #00C853;">🛡️</span>
+	                            <h3>Robustez</h3>
+	                            <p class="muted">Treinamento com imagens de diferentes equipamentos e resoluções para melhor generalização.</p>
+	                        </div>
+	                        <div class="benefit-card">
+	                            <span class="benefit-icon" style="color: #00C853;">🔬</span>
+	                            <h3>Variedade Clínica</h3>
+	                            <p class="muted">Patologias múltiplas representadas para permitir classificação multi‑rótulo.</p>
+	                        </div>
+	                        <div class="benefit-card">
+	                            <span class="benefit-icon" style="color: #00C853;">🔄</span>
+	                            <h3>Atualizações</h3>
+	                            <p class="muted">Pipeline que suporta re‑treinamento contínuo e incorporaç��o de novas anotações.</p>
+	                        </div>
+	                    </div>
+	                </section>
             </div>
 	        </div>
 	    </div>