Add 2 files

index.html

@@ -181,7 +181,7 @@
                         <label for="file-input" class="file-input-label">
                             <i class="fas fa-upload mr-2"></i> Importar Foto
                         </label>
-                        <input type="file" id="file-input" class="file-input" accept="image/*">
+                        <input type="file" id="file-input", class="file-input" accept="image/*">
                     </div>
                     
                     <!-- Imagem será carregada aqui -->
@@ -235,6 +235,30 @@
                     </div>
                 </div>
                 
+                <!-- Seletor de marcadores para vista lateral direita -->
+                <div id="lateral-direita-marker-selector" class="p-4 border-t border-gray-200 hidden">
+                    <h3 class="text-sm font-medium text-gray-700 mb-2">Selecione o marcador para adicionar:</h3>
+                    <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Trago Direito">Trago Direito</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Acrômio Direito">Acrômio Direito</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Trocânter Maior Direito">Trocânter Maior Direito</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Linha Articular do Joelho Direito">Linha Articular Joelho D</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Maléolo Lateral Direito">Maléolo Lateral Direito</button>
+                    </div>
+                </div>
+                
+                <!-- Seletor de marcadores para vista lateral esquerda -->
+                <div id="lateral-esquerda-marker-selector" class="p-4 border-t border-gray-200 hidden">
+                    <h3 class="text-sm font-medium text-gray-700 mb-2">Selecione o marcador para adicionar:</h3>
+                    <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Trago Esquerdo">Trago Esquerdo</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Acrômio Esquerdo">Acrômio Esquerdo</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Trocânter Maior Esquerdo">Trocânter Maior Esquerdo</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Linha Articular do Joelho Esquerdo">Linha Articular Joelho E</button>
+                        <button class="marker-option px-3 py-1 bg-gray-100 text-gray-800 rounded text-sm", data-marker="Maléolo Lateral Esquerdo">Maléolo Lateral Esquerdo</button>
+                    </div>
+                </div>
+                
                 <!-- Tabela de ângulos para vista anterior -->
                 <div id="anterior-angle-table" class="p-4 border-t border-gray-200 hidden">
                     <h3 class="text-sm font-medium text-gray-700 mb-2">Análise Angular (Vista Anterior)</h3>
@@ -332,6 +356,78 @@
                     </table>
                 </div>
                 
+                <!-- Tabela de ângulos para vista lateral direita -->
+                <div id="lateral-direita-angle-table" class="p-4 border-t border-gray-200 hidden">
+                    <h3 class="text-sm font-medium text-gray-700 mb-2">Análise Angular (Vista Lateral Direita)</h3>
+                    <table class="angle-table">
+                        <thead>
+                            <tr>
+                                <th>Estruturas</th>
+                                <th>Diferença Angular</th>
+                                <th>Normal</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Trago Direito - Acrômio Direito</td>
+                                <td id="lat-dir-angle-tragos-acromio">0º</td>
+                                <td>0º</td>
+                            </tr>
+                            <tr>
+                                <td>Acrômio Direito - Trocânter Maior Direito</td>
+                                <td id="lat-dir-angle-acromio-trocanter">0º</td>
+                                <td>0º</td>
+                            </tr>
+                            <tr>
+                                <td>Trocânter Maior Direito - Linha Articular Joelho D</td>
+                                <td id="lat-dir-angle-trocanter-joelho">0º</td>
+                                <td>0º</td>
+                            </tr>
+                            <tr>
+                                <td>Linha Articular Joelho D - Maléolo Lateral Direito</td>
+                                <td id="lat-dir-angle-joelho-maleolo">0º</td>
+                                <td>0º</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                
+                <!-- Tabela de ângulos para vista lateral esquerda -->
+                <div id="lateral-esquerda-angle-table" class="p-4 border-t border-gray-200 hidden">
+                    <h3 class="text-sm font-medium text-gray-700 mb-2">Análise Angular (Vista Lateral Esquerda)</h3>
+                    <table class="angle-table">
+                        <thead>
+                            <tr>
+                                <th>Estruturas</th>
+                                <th>Diferença Angular</th>
+                                <th>Normal</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Trago Esquerdo - Acrômio Esquerdo</td>
+                                <td id="lat-esq-angle-tragos-acromio">0º</td>
+                                <td>0º</td>
+                            </tr>
+                            <tr>
+                                <td>Acrômio Esquerdo - Trocânter Maior Esquerdo</td>
+                                <td id="lat-esq-angle-acromio-trocanter">0º</td>
+                                <td>0º</td>
+                            </tr>
+                            <tr>
+                                <td>Trocânter Maior Esquerdo - Linha Articular Joelho E</td>
+                                <td id="lat-esq-angle-trocanter-joelho">0º</td>
+                                <td>0º</td>
+                            </tr>
+                            <tr>
+                                <td>Linha Articular Joelho E - Maléolo Lateral Esquerdo</td>
+                                <td id="lat-esq-angle-joelho-maleolo">0º</td>
+                                <td>0º</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                
                 <div class="p-4 border-t border-gray-200 flex justify-between">
                     <button id="resetBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
                         <i class="fas fa-undo mr-2"></i> Limpar Marcadores
@@ -424,7 +520,7 @@
                                     <input type="radio" name="spine" id="spine-kyphosis" class="hidden custom-radio">
                                     <label for="spine-kyphosis" class="px-3 py-1 border border-gray-300 rounded-full text-sm cursor-pointer hover:bg-blue-50">Cifose</label>
                                     
-                                    <input type="radio" name="spine" id="spine-lordosis" class="hidden custom-radio">
+                                    <input type="radio" name="spine" id="spine-llordosis" class="hidden custom-radio">
                                     <label for="spine-lordosis" class="px-3 py-1 border border-gray-300 rounded-full text-sm cursor-pointer hover:bg-blue-50">Lordose</label>
                                     
                                     <input type="radio" name="spine" id="spine-scoliosis" class="hidden custom-radio">
@@ -480,8 +576,12 @@
             const viewTabs = document.querySelectorAll('.view-tab');
             const anteriorMarkerSelector = document.getElementById('anterior-marker-selector');
             const posteriorMarkerSelector = document.getElementById('posterior-marker-selector');
+            const lateralDireitaMarkerSelector = document.getElementById('lateral-direita-marker-selector');
+            const lateralEsquerdaMarkerSelector = document.getElementById('lateral-esquerda-marker-selector');
             const anteriorAngleTable = document.getElementById('anterior-angle-table');
             const posteriorAngleTable = document.getElementById('posterior-angle-table');
+            const lateralDireitaAngleTable = document.getElementById('lateral-direita-angle-table');
+            const lateralEsquerdaAngleTable = document.getElementById('lateral-esquerda-angle-table');
             const markerOptions = document.querySelectorAll('.marker-option');
             
             let markers = [];
@@ -509,21 +609,27 @@
                     currentView = this.dataset.view;
                     
                     // Mostrar/ocultar seletor de marcadores específicos para cada vista
+                    anteriorMarkerSelector.classList.add('hidden');
+                    anteriorAngleTable.classList.add('hidden');
+                    posteriorMarkerSelector.classList.add('hidden');
+                    posteriorAngleTable.classList.add('hidden');
+                    lateralDireitaMarkerSelector.classList.add('hidden');
+                    lateralDireitaAngleTable.classList.add('hidden');
+                    lateralEsquerdaMarkerSelector.classList.add('hidden');
+                    lateralEsquerdaAngleTable.classList.add('hidden');
+                    
                     if (currentView === 'anterior') {
                         anteriorMarkerSelector.classList.remove('hidden');
                         anteriorAngleTable.classList.remove('hidden');
-                        posteriorMarkerSelector.classList.add('hidden');
-                        posteriorAngleTable.classList.add('hidden');
                     } else if (currentView === 'posterior') {
-                        anteriorMarkerSelector.classList.add('hidden');
-                        anteriorAngleTable.classList.add('hidden');
                         posteriorMarkerSelector.classList.remove('hidden');
                         posteriorAngleTable.classList.remove('hidden');
-                    } else {
-                        anteriorMarkerSelector.classList.add('hidden');
-                        anteriorAngleTable.classList.add('hidden');
-                        posteriorMarkerSelector.classList.add('hidden');
-                        posteriorAngleTable.classList.add('hidden');
+                    } else if (currentView === 'lateral-direita') {
+                        lateralDireitaMarkerSelector.classList.remove('hidden');
+                        lateralDireitaAngleTable.classList.remove('hidden');
+                    } else if (currentView === 'lateral-esquerda') {
+                        lateralEsquerdaMarkerSelector.classList.remove('hidden');
+                        lateralEsquerdaAngleTable.classList.remove('hidden');
                     }
                     
                     // Atualizar imagem exibida
@@ -558,6 +664,10 @@
                         updateAnteriorAngleTable();
                     } else if (currentView === 'posterior') {
                         updatePosteriorAngleTable();
+                    } else if (currentView === 'lateral-direita') {
+                        updateLateralDireitaAngleTable();
+                    } else if (currentView === 'lateral-esquerda') {
+                        updateLateralEsquerdaAngleTable();
                     }
                 } else {
                     postureImage.classList.add('hidden');
@@ -591,11 +701,17 @@
                     } else if (currentView === 'posterior') {
                         posteriorMarkerSelector.classList.remove('hidden');
                         posteriorAngleTable.classList.remove('hidden');
+                    } else if (currentView === 'lateral-direita') {
+                        lateralDireitaMarkerSelector.classList.remove('hidden');
+                        lateralDireitaAngleTable.classList.remove('hidden');
+                    } else if (currentView === 'lateral-esquerda') {
+                        lateralEsquerdaMarkerSelector.classList.remove('hidden');
+                        lateralEsquerdaAngleTable.classList.remove('hidden');
                     }
                 };
                 
                 reader.onerror = function() {
-                    alert('Ocorreu um erro ao read o arquivo. Por favor, tente novamente.');
+                    alert('Ocorreu um erro ao ler o arquivo. Por favor, tente novamente.');
                 };
                 
                 reader.readAsDataURL(file);
@@ -613,13 +729,13 @@
                     const y = e.clientY - rect.top;
                     
                     // Verificar se um tipo de marcador foi selecionado (para vistas que requerem)
-                    if ((currentView === 'anterior' || currentView === 'posterior') && !selectedMarkerType) {
+                    if ((currentView === 'anterior' || currentView === 'posterior' || currentView === 'lateral-direita' || currentView === 'lateral-esquerda') && !selectedMarkerType) {
                         alert('Por favor, selecione o tipo de marcador que deseja adicionar.');
                         return;
                     }
                     
                     // Verificar se já existe um marcador com o mesmo nome nesta visualização
-                    if (currentView === 'anterior' || currentView === 'posterior') {
+                    if (currentView === 'anterior' || currentView === 'posterior' || currentView === 'lateral-direita' || currentView === 'lateral-esquerda') {
                         const existingMarker = markers.find(m => 
                             m.view === currentView && m.type === selectedMarkerType
                         );
@@ -652,8 +768,8 @@
                 marker.className = `marker ${color} animate-pulse`;
                 markerContainer.appendChild(marker);
                 
-                // Criar label para o marcador (apenas para vistas anterior e posterior)
-                if ((currentView === 'anterior' || currentView === 'posterior') && selectedMarkerType) {
+                // Criar label para o marcador (apenas para vistas com tipos definidos)
+                if ((currentView === 'anterior' || currentView === 'posterior' || currentView === 'lateral-direita' || currentView === 'lateral-esquerda') && selectedMarkerType) {
                     const label = document.createElement('div');
                     label.className = 'marker-label';
                     label.textContent = selectedMarkerType;
@@ -674,7 +790,7 @@
                     x: x,
                     y: y,
                     view: currentView,
-                    type: (currentView === 'anterior' || currentView === 'posterior') ? selectedMarkerType : null
+                    type: (currentView === 'anterior' || currentView === 'posterior' || currentView === 'lateral-direita' || currentView === 'lateral-esquerda') ? selectedMarkerType : null
                 });
                 
                 // Configurar arrastar do marcador
@@ -690,6 +806,10 @@
                     updateAnteriorAngleTable();
                 } else if (currentView === 'posterior') {
                     updatePosteriorAngleTable();
+                } else if (currentView === 'lateral-direita') {
+                    updateLateralDireitaAngleTable();
+                } else if (currentView === 'lateral-esquerda') {
+                    updateLateralEsquerdaAngleTable();
                 }
             }
             
@@ -748,6 +868,10 @@
                                 updateAnteriorAngleTable();
                             } else if (currentView === 'posterior') {
                                 updatePosteriorAngleTable();
+                            } else if (currentView === 'lateral-direita') {
+                                updateLateralDireitaAngleTable();
+                            } else if (currentView === 'lateral-esquerda') {
+                                updateLateralEsquerdaAngleTable();
                             }
                         }
                     }, { once: true });
@@ -778,8 +902,8 @@
                     markerElement.className = `marker ${color}`;
                     markerContainer.appendChild(markerElement);
                     
-                    // Adicionar label se for vista anterior/posterior e tiver tipo definido
-                    if ((currentView === 'anterior' || currentView === 'posterior') && marker.type) {
+                    // Adicionar label se for vista com tipos definidos
+                    if ((currentView === 'anterior' || currentView === 'posterior' || currentView === 'lateral-direita' || currentView === 'lateral-esquerda') && marker.type) {
                         const label = document.createElement('div');
                         label.className = 'marker-label';
                         label.textContent = marker.type;
@@ -900,6 +1024,68 @@
                 }
             }
             
+            // Atualizar tabela de ângulos para vista lateral direita
+            function updateLateralDireitaAngleTable() {
+                // Obter marcadores específicos
+                const tragoDir = markers.find(m => m.view === 'lateral-direita' && m.type === 'Trago Direito');
+                const acromioDir = markers.find(m => m.view === 'lateral-direita' && m.type === 'Acrômio Direito');
+                const trocanterDir = markers.find(m => m.view === 'lateral-direita' && m.type === 'Trocânter Maior Direito');
+                const joelhoDir = markers.find(m => m.view === 'lateral-direita' && m.type === 'Linha Articular do Joelho Direito');
+                const maleoloLatDir = markers.find(m => m.view === 'lateral-direita' && m.type === 'Maléolo Lateral Direito');
+                
+                // Calcular ângulos se os marcadores existirem
+                if (tragoDir && acromioDir) {
+                    const angle = calculateAngle(tragoDir, acromioDir);
+                    document.getElementById('lat-dir-angle-tragos-acromio').textContent = `${angle}º`;
+                }
+                
+                if (acromioDir && trocanterDir) {
+                    const angle = calculateAngle(acromioDir, trocanterDir);
+                    document.getElementById('lat-dir-angle-acromio-trocanter').textContent = `${angle}º`;
+                }
+                
+                if (trocanterDir && joelhoDir) {
+                    const angle = calculateAngle(trocanterDir, joelhoDir);
+                    document.getElementById('lat-dir-angle-trocanter-joelho').textContent = `${angle}º`;
+                }
+                
+                if (joelhoDir && maleoloLatDir) {
+                    const angle = calculateAngle(joelhoDir, maleoloLatDir);
+                    document.getElementById('lat-dir-angle-joelho-maleolo').textContent = `${angle}º`;
+                }
+            }
+            
+            // Atualizar tabela de ângulos para vista lateral esquerda
+            function updateLateralEsquerdaAngleTable() {
+                // Obter marcadores específicos
+                const tragoEsq = markers.find(m => m.view === 'lateral-esquerda' && m.type === 'Trago Esquerdo');
+                const acromioEsq = markers.find(m => m.view === 'lateral-esquerda' && m.type === 'Acrômio Esquerdo');
+                const trocanterEsq = markers.find(m => m.view === 'lateral-esquerda' && m.type === 'Trocânter Maior Esquerdo');
+                const joelhoEsq = markers.find(m => m.view === 'lateral-esquerda' && m.type === 'Linha Articular do Joelho Esquerdo');
+                const maleoloLatEsq = markers.find(m => m.view === 'lateral-esquerda' && m.type === 'Maléolo Lateral Esquerdo');
+                
+                // Calcular ângulos se os marcadores existirem
+                if (tragoEsq && acromioEsq) {
+                    const angle = calculateAngle(tragoEsq, acromioEsq);
+                    document.getElementById('lat-esq-angle-tragos-acromio').textContent = `${angle}º`;
+                }
+                
+                if (acromioEsq && trocanterEsq) {
+                    const angle = calculateAngle(acromioEsq, trocanterEsq);
+                    document.getElementById('lat-esq-angle-acromio-trocanter').textContent = `${angle}º`;
+                }
+                
+                if (trocanterEsq && joelhoEsq) {
+                    const angle = calculateAngle(trocanterEsq, joelhoEsq);
+                    document.getElementById('lat-esq-angle-trocanter-joelho').textContent = `${angle}º`;
+                }
+                
+                if (joelhoEsq && maleoloLatEsq) {
+                    const angle = calculateAngle(joelhoEsq, maleoloLatEsq);
+                    document.getElementById('lat-esq-angle-joelho-maleolo').textContent = `${angle}º`;
+                }
+            }
+            
             // Função para calcular ângulo entre dois marcadores
             function calculateAngle(marker1, marker2) {
                 // Calcular diferença vertical e horizontal
@@ -938,6 +1124,16 @@
                     document.getElementById('post-angle-joelho').textContent = '0º';
                     document.getElementById('post-angle-maleolo-dir').textContent = '0º';
                     document.getElementById('post-angle-maleolo-esq').textContent = '0º';
+                } else if (currentView === 'lateral-direita') {
+                    document.getElementById('lat-dir-angle-tragos-acromio').textContent = '0º';
+                    document.getElementById('lat-dir-angle-acromio-trocanter').textContent = '0º';
+                    document.getElementById('lat-dir-angle-trocanter-joelho').textContent = '0º';
+                    document.getElementById('lat-dir-angle-joelho-maleolo').textContent = '0º';
+                } else if (currentView === 'lateral-esquerda') {
+                    document.getElementById('lat-esq-angle-tragos-acromio').textContent = '0º';
+                    document.getElementById('lat-esq-angle-acromio-trocanter').textContent = '0º';
+                    document.getElementById('lat-esq-angle-trocanter-joelho').textContent = '0º';
+                    document.getElementById('lat-esq-angle-joelho-maleolo').textContent = '0º';
                 }
             });
             

prompts.txt

@@ -1,2 +1,4 @@
 Na Vista Anterior, Vista Posterior, Vista Lateral Direita e Vista Lateral Esquerda, o usuário não pode usar mais de um marcador do mesmo nome. O nome do marcador não deve aparecer na foto que foi importada, apenas quando o usuário encosta com a seta do mouse. 
-Na Vista Posterior, coloque um total de 17 marcadores, com os seguintes nomes: C7, T5, L1, Acrômio Direito, Acrômio Esquerdo, EIPS Direita, EIPS Esquerda, Trocânter Maior Direito, Trocânter Maior Esquerdo,Linha Articular do Joelho D, Linha Articular do Joelho E, Calcâneo D, Calcâneo E, Maléolo Lateral Direito, Maléolo Medial Direito, Maléolo Lateral Esquerdo e Maléolo Medial Esquerdo. Repita a mesma tabela da Vista Anterior. Porém mude o nome das estruturas. Os ângulos que devem ser gerados devem ser entre Acrômio Direito e Acrômio Esquerdo, entre C7 e T5, entre T5 e L1, Entre EIPS Direita e EIPS Esquerda, entre Trocanter Maior Direito e Trocanter Maior Esquerdo, entre Linha Articular do Joelho D e Linha Articular do Joelho E, entre Maléolo Lateral Direito e Maléolo Medial Direito e entre Maléolo Lateral Esquerdo e Maléolo Medial Esquerdo. A coluna Normal da tabela, deve ter os mesmos valores de referência.
+Na Vista Posterior, coloque um total de 17 marcadores, com os seguintes nomes: C7, T5, L1, Acrômio Direito, Acrômio Esquerdo, EIPS Direita, EIPS Esquerda, Trocânter Maior Direito, Trocânter Maior Esquerdo,Linha Articular do Joelho D, Linha Articular do Joelho E, Calcâneo D, Calcâneo E, Maléolo Lateral Direito, Maléolo Medial Direito, Maléolo Lateral Esquerdo e Maléolo Medial Esquerdo. Repita a mesma tabela da Vista Anterior. Porém mude o nome das estruturas. Os ângulos que devem ser gerados devem ser entre Acrômio Direito e Acrômio Esquerdo, entre C7 e T5, entre T5 e L1, Entre EIPS Direita e EIPS Esquerda, entre Trocanter Maior Direito e Trocanter Maior Esquerdo, entre Linha Articular do Joelho D e Linha Articular do Joelho E, entre Maléolo Lateral Direito e Maléolo Medial Direito e entre Maléolo Lateral Esquerdo e Maléolo Medial Esquerdo. A coluna Normal da tabela, deve ter os mesmos valores de referência.
+na Vista Lateral Direita, estarão disponíveis 5 marcadores, com os seguintes nomes: Trago Direito, Acrômio Direito, Trocânter Maior Direito, Linha articular do Joelho Direito e Maléolo Lateral Direito. Repita a mesma tabela da Vista Posterior, apenas mudando o nome das estruturas. Na tabela, informe o ângulo formado entre Trago Direito e Acrômio Direito, entre Acrômio Direito e Trocânter Maior Direito e entre Trocânter Maior Direito e Linha Articular do Joelho Direito e entre a Linha Articular do Joelho Direito e Maléolo Lateral Direito. Mantenha os mesmos parâmetros na coluna Normal da tabela.
+na Vista Lateral Esquerda, estarão disponíveis 5 marcadores, com os seguintes nomes: Trago Esquerdo, Acrômio Esquerdo, Trocânter Maior Esquerdo, Linha articular do Joelho Esquerdo e Maléolo Lateral Esquerdo. Repita a mesma tabela da Vista Lateral Direita, apenas mudando o nome das estruturas. Na tabela, informe o ângulo formado entre Trago Esquerdo e Acrômio Esquerdo, entre Acrômio Esquerdo e Trocânter Maior Esquerdo e entre Trocânter Maior Esquerdo e Linha Articular do Joelho Esquerdo e entre a Linha Articular do Joelho Esquerdo e Maléolo Lateral Esquerdo. Mantenha os mesmos parâmetros na coluna Normal da tabela.