<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ProntuAI: Sistema de Transcrição + Geração de Prontuário por IA</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
</head>
<body>
    <header>
        <div class="header-container">
            <img src="https://marcelopsiquiatra.com/pront/logo.png" alt="Logo" class="header-logo">
            <h1>ProntuAI: Sistema de Transcrição e Geração de Prontuário por IA✨</h1>
        </div>
    </header>
    <main>
        <section id="audio-source">
            <label for="audio-source-select">Escolha a fonte de áudio🎧:</label>
            <select id="audio-source-select">
                <option value="internal-external" selected>💻Teleconsulta: Áudio Interno + Microfone Externo</option>
                <option value="internal">🔊Captação de Som do Navegador: Áudio Interno</option>
                <option value="microphone">🎤Consulta Presencial: Microfone Externo</option>
            </select>
            <!-- Barra de teste do microfone -->
            <div id="microphone-test">
                <div id="mic-level"></div>
            </div>
            <!-- Símbolo de aviso -->
            <div id="mic-warning" class="hidden">🔴 Microfone não detectado</div>
        </section>
        
        <!-- Escolha de Idioma para Transcrição -->
        <section id="transcription-language-selection">
            
                <div>
                    <label for="transcription-language">Idioma da Transcrição🌐:</label>
                    <select id="transcription-language">
                        <option value="pt-BR" selected>Português (Brasil) 🇵🇹-🇧🇷</option>
                        <option value="en-US">Inglês (EUA) 🇺🇸</option>
                        <option value="es-ES">Espanhol (Espanha) 🇪🇸</option>
                        <option value="fr-FR">Francês (França) 🇫🇷</option>
                        <option value="de-DE">Alemão (Alemanha) 🇩🇪</option>
                        <option value="it-IT">Italiano (Itália) 🇮🇹</option>
                        <option value="ja-JP">Japonês (Japão) 🇯🇵</option>
                        <option value="zh-CN">Chinês (China) 🇨🇳</option>
                    </select>
                </div>
                <div>
                    <label>
                        <input type="checkbox" id="remember-transcription-language"> Lembrar Minha Seleção de Idioma📌
                    </label>
                </div>
            </div>
        </section>
        <hr>
        <section id="controls">
            <button id="start-btn">Iniciar Transcrição</button>
            <button id="pause-btn" disabled>Pausar Transcrição</button>
            <button id="stop-btn" disabled>Parar Transcrição</button>
            <span id="rec-indicator" class="hidden">🔴 REC</span>
        </section>

        <section id="transcription">
            <h2>Transcrição 🎙️ // Anotação Manual ✍️</h2>
            <div id="transcription-content" contenteditable="true" spellcheck="false"></div>
            <div class="button-group">
                <button id="undo-transcription-btn">Desfazer</button>
                <button id="redo-transcription-btn">Refazer</button>
                <button id="clear-transcription-btn">Limpar Transcrição</button>
                <button id="copy-transcription-btn">Copiar Transcrição</button>
                <button id="transcription-counter-btn">Contador</button>
                <button id="minificadorButton">Minificador de Texto</button>
                <button id="mic-button">🎙️</button>
            </div>
            <hr>
            <div class="nota-transcricao-inicial">
                <p>
                    ⚠️ <strong>Olha que bacana</strong> 👀📣: A caixa acima é <strong>totalmente editável</strong>. Além da transcrição em áudio, você tem a possibilidade de digitar manualmente as informações da consulta. Recomendamos que você insira dados relevantes, como o <strong>sexo/gênero do(a) paciente</strong> e quaisquer outros detalhes que considerar necessários. Assim, o prontuário gerado por IA será mais completo e alinhado com as informações fornecidas.
                </p>
                <p>
                    ⚠️ Um <strong>Minificador de Texto</strong> (botão acima) é uma ferramenta que diminui o tamanho de um texto, removendo espaços extras, quebras de linha e caracteres desnecessários, sem mudar o conteúdo principal. Em consultas longas, isso é importante para tornar a informação mais fácil e rápida de ser processada.
                </p>
                <p class="more-text">
                    ⚠️ No uso do ChatGPT, o Minificador de Texto ajuda a reduzir a quantidade de <strong>"tokens"</strong> — que são como blocos de palavras que a IA utiliza para entender e responder. Cada palavra ou símbolo conta como um <strong>token</strong>, e há um limite de tokens que podem ser enviados e recebidos em cada "conversa". Ao diminuir o tamanho do texto enviado, você deixa mais espaço e permite que mais dados sejam enviados para que o ChatGPT possa dar respostas mais completas e detalhadas.
                </p>
                <p class="more-text">
                    ⚠️ <strong>Entender os tokens é essencial:</strong> eles são a maneira que o ChatGPT usa para processar as informações. Textos muito longos podem ultrapassar esse limite, fazendo com que nem tudo seja analisado corretamente (surgirá aviso de <strong>1. Erro na conexão com a API⚠️🔌:</strong> This model's maximum context length is XXXX tokens. However, you requested XXXX tokens. Please reduce the length of the messages or completion. <strong>2. Erro na conexão com a API⚠️🔌:</strong> Request too large for gpt-4 ... The input or output tokens must be reduced in order to run successfully). Por isso, usar um Minificador de Texto não só facilita a comunicação com a IA, mas também garante respostas mais ricas e informativas dentro das limitações técnicas do ChatGPT.
                </p>
                <p class="more-text">
                    ⚠️ Quando usamos o ChatGPT para textos longos (consultas muito longas), há um limite de tamanho que ele consegue processar de uma vez. Para contornar isso, aqui estão algumas dicas simples:
                    <br><br>
                    💡<strong>Divida o Texto:</strong> Separe o texto em partes menores e envie cada uma separadamente. Depois, junte as respostas para formar o prontuário completo. Lembre-se que você consegue editar facilmente a caixa de texto de transcrição.
                    <br><br>
                    💡<strong>Use Resumos:</strong> Resuma as partes mais importantes antes de enviar para o ChatGPT (Gerar Prontuário). Assim, você usa menos espaço e foca no essencial. Destacamos novamente que você consegue editar facilmente a caixa de texto de transcrição.
                    <br><br>
                    💡<strong>Reduza o Texto:</strong> Remova espaços e caracteres desnecessários para diminuir o tamanho do texto (use o botão Minificador de Texto).
                    <br><br>
                    💡<strong>Priorize o Importante:</strong> Identifique e envie apenas as informações realmente necessárias, eliminando detalhes que não são essenciais (ex., conversas informais em uma consulta).
                    <br><br>
                    Seguindo essas dicas, você consegue usar o ChatGPT de forma mais eficiente, mesmo com textos grandes.
                </p>
                <p class="more-text">
                    ⚠️ <strong>Por que algumas palavras não aparecem na transcrição?</strong> Nosso sistema de transcrição às vezes ignora certas palavras de propósito. Isso não é um erro, mas uma maneira de melhorar a qualidade do texto final que você recebe. Programamos o sistema para filtrar termos que não são relevantes, algumas repetições sem sentido ou palavras muito curtas que não fazem parte do contexto principal. Ao aplicar essas regras e filtros, garantimos que o texto fique mais fácil de ler e entender, focando nas informações importantes e eliminando distrações.
                </p>
                <a href="#" class="toggle-text">Leia Mais 📖➡️</a>                               
            </div>
            <hr>
        </section>

        <section id="profession-selection">
            <label for="profession-select">Selecione o Profissional/Especialista⚕️:</label>
            <select id="profession-select">
                <optgroup label="Especialidades Médicas">
                    <option value="Acupuntura">🪡Acupuntura</option>
                    <option value="Alergia e Imunologia">🤧Alergia e Imunologia</option>
                    <option value="Anestesiologia">💉Anestesiologia</option>
                    <option value="Angiologia">🦵Angiologia</option>
                    <option value="Cardiologia">❤️Cardiologia</option>
                    <option value="Cirurgia">🔪Cirurgia</option>
                    <option value="Clínica Médica">🩺Clínica Médica</option>
                    <option value="Coloproctologia">🚽Coloproctologia</option>
                    <option value="Dermatologia">🧴Dermatologia</option>
                    <option value="Endocrinologia">🧪Endocrinologia</option>
                    <option value="Endoscopia">📹Endoscopia</option>
                    <option value="Gastroenterologia">🍴Gastroenterologia</option>
                    <option value="Genética Médica">🧬Genética Médica</option>
                    <option value="Geriatria">👴Geriatria</option>
                    <option value="Ginecologia e Obstetrícia">🤰Ginecologia e Obstetrícia</option>
                    <option value="Hematologia e Hemoterapia">🩸Hematologia e Hemoterapia</option>
                    <option value="Homeopatia">🌿Homeopatia</option>
                    <option value="Infectologia">🦠Infectologia</option>
                    <option value="Mastologia">🌸Mastologia</option>
                    <option value="Medicina Aeroespacial">✈️Medicina Aeroespacial</option>
                    <option value="Medicina de Emergência">🚑Medicina de Emergência</option>
                    <option value="Medicina de Família e Comunidade">🏘️Medicina de Família e Comunidade</option>
                    <option value="Medicina do Trabalho">🛠️Medicina do Trabalho</option>
                    <option value="Medicina do Tráfego">🚗Medicina do Tráfego</option>
                    <option value="Medicina Esportiva">⚽Medicina Esportiva</option>
                    <option value="Medicina Física e Reabilitação">🪑Medicina Física e Reabilitação</option>
                    <option value="Medicina Intensiva">🏥Medicina Intensiva</option>
                    <option value="Medicina Legal">⚖️Medicina Legal</option>
                    <option value="Medicina Nuclear">☢️Medicina Nuclear</option>
                    <option value="Nefrologia">💧Nefrologia</option>
                    <option value="Neurocirurgia">🧠Neurocirurgia</option>
                    <option value="Neurologia">🔄Neurologia</option>
                    <option value="Nutrologia">🥗Nutrologia</option>
                    <option value="Oftalmologia">👁️Oftalmologia</option>
                    <option value="Oncologia">🌟Oncologia</option>
                    <option value="Ortopedia e Traumatologia">🦴Ortopedia e Traumatologia</option>
                    <option value="Otorrinolaringologia">👃Otorrinolaringologia</option>
                    <option value="Patologia">🔬Patologia</option>
                    <option value="Pediatria">🍼Pediatria</option>
                    <option value="Pneumologia">🫁Pneumologia</option>
                    <option value="Psiquiatria">🎗️Psiquiatria</option>
                    <option value="Radiologia">🩻Radiologia</option>
                    <option value="Radioterapia">⚡Radioterapia</option>
                    <option value="Reumatologia">🤲Reumatologia</option>
                    <option value="Urologia">💦Urologia</option>
                </optgroup>
                <optgroup label="Profissões da Saúde">
                    <option value="Biomedicina">⚗️Biomedicina</option>
                    <option value="Educação Física">🏋️‍♂️Educação Física</option>
                    <option value="Enfermagem">👩‍⚕️Enfermagem</option>
                    <option value="Fisioterapia">🧘‍♂️Fisioterapia</option>
                    <option value="Fonoaudiologia">👂Fonoaudiologia</option>
                    <option value="Medicina Veterinária Clínica">🐾Medicina Veterinária Clínica</option>
                    <option value="Medicina Veterinária Cirúrgica">🐕Medicina Veterinária Cirúrgica</option>
                    <option value="Nutrição">🍎Nutrição</option>
                    <option value="Odontologia">🦷Odontologia</option>
                    <option value="Psicologia">💭Psicologia</option>
                    <option value="Terapia Ocupacional">🖐️Terapia Ocupacional</option>
                </optgroup>
            </select>
            <br>
            <label>
                
                <input type="checkbox" id="remember-profession-checkbox">
                Lembrar Minha Seleção de Profissão/Especialidade📌
            </label>
            <br><br>
        </section>

        <!-- Escolha de Idioma para Prontuário -->
        <section id="medical-record-language-selection">
            
                <div>
                    <label for="medical-record-language">Idioma para Geração do Prontuário🌐:</label>
                    <select id="medical-record-language">
                        <option value="pt-BR" selected>Português (Brasil) 🇵🇹-🇧🇷</option>
                        <option value="en-US">Inglês (EUA) 🇺🇸</option>
                        <option value="es-ES">Espanhol (Espanha) 🇪🇸</option>
                        <option value="fr-FR">Francês (França) 🇫🇷</option>
                        <option value="de-DE">Alemão (Alemanha) 🇩🇪</option>
                        <option value="it-IT">Italiano (Itália) 🇮🇹</option>
                        <option value="ja-JP">Japonês (Japão) 🇯🇵</option>
                        <option value="zh-CN">Chinês (China) 🇨🇳</option>
                    </select>
                </div>
                <div>
                    <label>
                        <input type="checkbox" id="remember-medical-record-language"> Lembrar Minha Seleção de Idioma📌
                    </label>
                </div>
            </div>
            <br>
            <hr>
            <div class="right-align">
                <button id="generate-medical-record-btn" class="green-button">Gerar Prontuário</button>
            </div>
        </section>

        <section id="medical-record">
            <h2>Prontuário 📄🤖</h2>
            <div id="medical-record-content" contenteditable="true"></div>
            <div class="button-group">
                <button id="undo-medical-record-btn">Desfazer</button>
                <button id="redo-medical-record-btn">Refazer</button>
                <button id="clear-medical-record-btn">Limpar Prontuário</button>
                <button id="copy-medical-record-btn">Copiar Prontuário</button>
                <button id="medical-record-counter-btn">Contador</button>
            </div>
            <hr>
            <div class="nota-prontuario-inicial">
                <p>
                    ⚠️ A autonomia profissional está intrinsecamente ligada à responsabilidade pelos atos desempenhados no exercício da profissão. É fundamental que o profissional esteja plenamente ciente de que, ao utilizar recursos de apoio, como a inteligência artificial, eventuais insucessos ou erros não poderão ser atribuídos ao meio tecnológico ou a terceiros.
                </p>
                <p class="more-text">
                    ⚠️ A inteligência artificial representa uma valiosa aliada no aprimoramento dos serviços profissionais, oferecendo agilidade e suporte na tomada de decisões. No entanto, seu uso deve ser sempre acompanhado de uma postura crítica, ética e responsável por parte dos profissionais. A revisão rigorosa, a aplicação do bom senso e a conscientização das limitações da IA são pilares fundamentais para garantir que a tecnologia contribua positivamente para a qualidade do atendimento e a segurança dos pacientes.
                </p>
                <p class="more-text">
                    ⚠️ É imprescindível que o profissional revise cuidadosamente todo o conteúdo produzido pela inteligência artificial antes de integrá-lo ao prontuário definitivo do paciente. Embora as ferramentas de IA ofereçam suporte eficiente na geração de informações, elas não substituem a expertise e o julgamento clínico do profissional. A revisão garante que os dados inseridos sejam precisos, relevantes e adequados ao contexto específico de cada paciente, evitando possíveis equívocos que possam comprometer a qualidade do atendimento.
                </p>
                <p class="more-text">
                    ⚠️ O uso da inteligência artificial deve sempre ser pautado pelo bom senso e pela ética profissional. A IA é uma ferramenta poderosa, mas está sujeita a falhas e limitações. Portanto, é fundamental que os profissionais mantenham uma postura crítica e discernente ao interpretar e aplicar as informações fornecidas por sistemas automatizados. Decisões clínicas devem ser baseadas não apenas nos dados gerados pela IA, mas também na experiência e conhecimento do profissional.
                </p>
                <p class="more-text">
                    ⚠️ Reconhecer que a inteligência artificial é passível de erro é essencial para um uso responsável. Problemas como vieses algorítmicos, interpretações equivocadas e falta de contextualização podem impactar negativamente os resultados. Profissionais devem estar cientes dessas limitações e adotar medidas preventivas, como a validação cruzada das informações e a busca por fontes adicionais de dados quando necessário.
                </p>
                <p class="more-text">
                    ⚠️ A autonomia no exercício da profissão está diretamente relacionada à responsabilidade pelas ações e decisões tomadas. Mesmo com o apoio de tecnologias avançadas, o profissional deve manter o controle sobre o processo decisório, garantindo que as intervenções estejam alinhadas com os melhores interesses do paciente e as diretrizes éticas da área.
                </p>
                <p class="more-text">
                    ⚠️ A rápida evolução das tecnologias de IA exige que os profissionais se mantenham atualizados sobre as novidades e melhores práticas relacionadas ao seu uso. Investir em capacitação contínua e participar de treinamentos específicos sobre ferramentas de inteligência artificial contribui para uma utilização mais eficaz e segura dessas tecnologias no ambiente de trabalho.
                </p>
                <p class="more-text">
                    ⚠️ É essencial manter uma comunicação transparente com os pacientes sobre o uso de inteligência artificial no processo de atendimento. Explicar de forma clara como as tecnologias são utilizadas, quais dados são processados e de que maneira contribuem para o cuidado pode fortalecer a confiança e o relacionamento entre profissional e paciente.
                </p>
                
                <a href="#" class="toggle-text">Leia Mais 📖➡️</a>            
            </div>
        </section>
        <hr>
        <section id="history">
            <h2>Histórico 📝🗂️</h2>
            <input type="text" id="search-history" placeholder="Buscar por nome ou data...🗓️🕵️‍♀️">
            <ul id="history-list"></ul>
            <div class="button-group">
                <button id="export-history-btn">Exportar Histórico</button>
                <input type="file" id="import-history-input" style="display:none;">
                <button id="import-history-btn">Importar Histórico</button>
                <button id="clear-history-btn">Limpar Histórico</button>
            </div>

            <hr>
            <div class="privacy-policy">
                <p>
                    ⚠️ <strong>Política de Privacidade e Segurança de Dados</strong> 🔒📜
                </p>
                <p>
                    ⚠️ Gostaríamos de informar que nenhuma informação transcrita a partir de áudio ou gerada, como prontuários eletrônicos, é armazenada em nossos servidores. Todos os dados (em texto) permanecem exclusivamente no computador pessoal do profissional de saúde que os está utilizando.
                </p>
                <p class="more-text">
                    ⚠️ Os dados em texto são armazenados temporariamente no navegador, uma funcionalidade que permite ao navegador guardar informações localmente no dispositivo do usuário (os dados são mantidos até que sejam apagados). Assim, uma vez que o cache do navegador seja limpo, todas as informações armazenadas são definitivamente removidas do dispositivo.
                </p>
                <p class="more-text">
                    ⚠️ Para garantir a segurança e a confidencialidade das informações, orientamos que o acesso seja realizado exclusivamente por computadores de uso pessoal e devidamente protegidos com senha. Evite utilizar computadores públicos ou aqueles que são acessados por múltiplas pessoas, para prevenir qualquer risco de exposição ou acesso não autorizado aos dados sensíveis.
                </p>
                <p class="more-text">
                    ⚠️ Caso seja necessário exportar informações em formato eletrônico (.txt; .json), é imprescindível que esses arquivos sejam geridos com a máxima segurança. Recomendamos que tais arquivos sejam armazenados de forma segura e, preferencialmente, eliminados após o uso para evitar qualquer vulnerabilidade.
                </p>
                <p class="more-text">
                    ⚠️ O armazenamento e o compartilhamento de informações de saúde confidenciais devem ser tratados com a máxima segurança.
                </p>
                <p class="more-text">
                    ⚠️ As normas de sigilo e segurança de dados devem ser amplamente garantidas. No aspecto legal, a Lei Geral de Proteção de Dados (LGPD) deverá servir como o marco jurídico aplicado. Nas questões éticas, as resoluções e normas vigentes, assim como o próprio Código de Ética Profissional, deverão orientar os profissionais de saúde.
                </p>
                <p class="more-text">
                    ⚠️ Cabe ao profissional assistente a responsabilidade pela guarda e proteção dos dados registrados, seja em formato físico ou eletrônico, nos termos das normas éticas vigentes.
                </p>
                <p class="more-text">
                    ⚠️ Ao utilizar ferramentas de inteligência artificial, é crucial assegurar a confidencialidade e a proteção das informações dos pacientes. Implementar medidas de segurança robustas e aderir às regulamentações de privacidade de dados são passos fundamentais para prevenir acessos não autorizados e garantir a integridade dos prontuários eletrônicos.
                </p>
                <p class="more-text">
                    ⚠️ É fundamental que o profissional informe ao paciente que está utilizando ferramentas de Inteligência Artificial para transcrever consultas e gerar prontuários eletrônicos. Antes de implementar essa tecnologia, solicite a anuência do paciente, explicando os benefícios e as medidas de segurança adotadas para proteger os dados.
                </p>
                <a href="#" class="toggle-text">Leia Mais 📖➡️</a>
            </div>


        </section>

        <section id="timer">
            <h2 class="section-title">
                Temporizador de Consulta 📋⏰
                <button class="toggle-btn" data-target="timer-content">+</button>
            </h2>
            <div id="timer-content" class="hidden">
                <div id="timer-controls">
                    <input type="number" id="timer-input" placeholder="Minutos da Consulta" min="1">

                    <div id="increment-buttons">
                        <button class="increment-btn" data-increment="1">+1</button>
                        <button class="increment-btn" data-increment="5">+5</button>
                        <button class="increment-btn" data-increment="10">+10</button>
                        <button class="increment-btn" data-increment="15">+15</button>
                        <button class="increment-btn" data-increment="20">+20</button>
                        <button class="increment-btn" data-increment="25">+25</button>
                        <button class="increment-btn" data-increment="30">+30</button>
                        <button class="increment-btn" data-increment="40">+40</button>
                        <button class="increment-btn" data-increment="45">+45</button>
                        <button class="increment-btn" data-increment="50">+50</button>
                        <button class="increment-btn" data-increment="60">+60</button>
                        <button id="clear-btn" class="clear-btn">Apagar</button>
                    </div>

                    <div class="alert-options">
                        <label>
                            <input type="checkbox" class="alert-checkbox" data-alert-minute="5">
                            Alertar 5 minuto(s) antes de finalizar consulta 🔔
                        </label>
                        <label>
                            <input type="checkbox" class="alert-checkbox" data-alert-minute="1">
                            Alertar 1 minuto(s) antes de finalizar consulta 🔔
                        </label>
                        <label>
                            <input type="checkbox" id="alert-end-checkbox">
                            Alertar quando a consulta finalizar  🚨
                        </label>
                    </div>
                </div>
                <div id="timer-display" class="timer-display">00:00</div>
                <div class="button-group">
                    <button id="start-btn-timer">Iniciar</button>
                    <button id="pause-resume-btn-timer" disabled>Pausar</button>
                    <button id="stop-btn-timer" disabled>Parar</button>
                </div>
            </div>
        </section>

        <section id="cid10-search">
            <h2 class="section-title">
                Pesquisa CID-10 🔍🩺
                <button class="toggle-btn" data-target="cid10-content">+</button>
            </h2>
            <div id="cid10-content" class="hidden">
                <input type="text" id="cid10-input" placeholder="Digite o código CID ou doença..." onkeydown="if(event.key === 'Enter') document.getElementById('cid10-search-btn').click();">
                <button id="cid10-search-btn">Ok</button>
                <ul id="cid10-results"></ul>
            </div>
        </section>

        <section id="medical-calculator">
            <h2 class="section-title">
                Cálculo de Consumo e Quantidade de Medicamentos 📦💊
                <button class="toggle-btn" data-target="calculator-content">+</button>
            </h2>
            <div id="calculator-content" class="hidden">
                <div class="dose-type-selection">
                    <label>
                        <input type="radio" name="dose-type" id="calc-single-dose" checked>
                        Dose <strong>única</strong> diária ☀️
                    </label>
                    <label>
                        <input type="radio" name="dose-type" id="calc-variable-dose">
                        Dose <strong>variável</strong> semanal 📆
                    </label>
                </div>
                <hr>
                <div>
                    <label><strong>Forma do medicamento:</strong></label>
                    <div>
                        <label><input type="radio" name="med-form" id="calc-solid-form" checked>Sólida💊(comprimido, cápsula, pílula, drágea, pastilha)</label>
                        <label><input type="radio" name="med-form" id="calc-liquid-form">Líquida💧(ampola, frasco-ampola, suspensão)</label>
                    </div>
                </div>
                <hr>
                <div id="liquid-unit-container" class="hidden">
                    <label><input type="radio" name="liquid-unit" id="liquid-unit-ml" value="ml" checked> mL</label>
                    <label><input type="radio" name="liquid-unit" id="liquid-unit-gotas" value="gotas"> Gotas (20 gotas = 1 mL)</label>
                </div>

                <div id="single-dose-container">
                    <label for="pills-per-day">Comprimidos ou mL por dia:</label>
                    <input type="number" id="pills-per-day" min="0" step="0.01">
                </div>

                <div id="variable-dose-container" class="hidden">
                    <label><strong>Quantidade por dia na semana: </strong><br><br>Se o paciente tomar 1 comprimido por dia nos primeiros 7 dias e, posteriormente, passar a tomar 2 comprimidos por dia a partir da segunda semana, insira o valor '1' na semana 1 e o valor '2' na semana 2.<br><br>Se o paciente tomar 20 gotas por dia nos primeiros 7 dias e, posteriormente, passar a tomar 40 gotas por dia a partir da segunda semana, insira o valor '20' na semana 1 e o valor '40' na semana 2.</label>
                    
                    <div class="week-inputs">
                        <div class="week-column">
                            <div>
                                <label for="week-1">Semana 1:</label>
                                <input type="number" id="week-1" class="variable-dose-input" min="0" step="0.01">
                            </div>
                            <div>
                                <label for="week-2">Semana 2:</label>
                                <input type="number" id="week-2" class="variable-dose-input" min="0" step="0.01">
                            </div>
                            <div>
                                <label for="week-3">Semana 3:</label>
                                <input type="number" id="week-3" class="variable-dose-input" min="0" step="0.01">
                            </div>
                            <div>
                                <label for="week-4">Semana 4:</label>
                                <input type="number" id="week-4" class="variable-dose-input" min="0" step="0.01">
                            </div>
                        </div>
                        <div class="week-column hidden" id="additional-weeks">
                            <div>
                                <label for="week-5">Semana 5:</label>
                                <input type="number" id="week-5" class="variable-dose-input" min="0" step="0.01">
                            </div>
                            <div>
                                <label for="week-6">Semana 6:</label>
                                <input type="number" id="week-6" class="variable-dose-input" min="0" step="0.01">
                            </div>
                            <div>
                                <label for="week-7">Semana 7:</label>
                                <input type="number" id="week-7" class="variable-dose-input" min="0" step="0.01">
                            </div>
                            <div>
                                <label for="week-8">Semana 8:</label>
                                <input type="number" id="week-8" class="variable-dose-input" min="0" step="0.01">
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <label for="calc-months">Duração do tratamento (em meses):</label>
                <select id="calc-months">
                    <option value="1">1 mês</option>
                    <option value="2">2 meses</option>
                    <option value="3">3 meses</option>
                    <option value="4">4 meses</option>
                    <option value="5">5 meses</option>
                    <option value="6">6 meses</option>
                    <option value="7">7 meses</option>
                    <option value="8">8 meses</option>
                    <option value="9">9 meses</option>
                    <option value="10">10 meses</option>
                    <option value="11">11 meses</option>
                    <option value="12">12 meses</option>
                </select>
                <hr>
                <label for="pills-in-box">Quantidade por caixa/frasco (cps/mL):</label>
                <input type="number" id="pills-in-box" min="1">

                <div class="button-group">
                    <button id="calc-calculate-btn">Calcular</button>
                    <button id="calc-clear-btn">Limpar Tudo</button>
                </div>
                <div id="calc-result"></div>
            </div>
        </section>

        <section id="price-calculator-section">
            <h2 class="section-title">Comparador de Preços de Medicamentos 💊🛒
                <button class="toggle-btn" data-target="price-calculator-content">+</button>
            </h2>
            
            <div id="price-calculator-content" class="hidden">
            
                <div id="medicamentos-container" class="medicamentos-flex"></div>
                <div class="button-group">
                    <button id="adicionar-medicamento-btn">Adicionar Medicamento</button>
                    <button id="remover-medicamento-btn" disabled>Remover Medicamento</button>
                    <button id="limpar-tudo-btn">Limpar Tudo</button>
                    <button id="calcular-preco-btn">Calcular e Comparar</button>
                    <button id="exportar-excel-btn">Exportar Excel</button>
                    <button id="exportar-txt-btn">Exportar TXT</button>
                </div>
                <div id="preco-resultado"></div>
                <div id="analise-financeira"></div>
            </div>
        </section>

        <section id="tradutor-section">
            <h2>
                Tradutor Online 🌍💬
                <button id="toggle-tradutor-btn" class="toggle-btn">+</button>
            </h2>
            <div id="tradutor-content" class="hidden">
                <div class="language-selectors">
                    <label for="source-language">De:</label>
                    <select id="source-language">
                        <option value="Português" selected>Português 🇵🇹-🇧🇷</option>
                        <option value="Inglês">Inglês 🇺🇸-🇬🇧</option>
                        <option value="Espanhol">Espanhol 🇪🇸</option>
                        <option value="Francês">Francês 🇫🇷</option>
                        <option value="Alemão">Alemão 🇩🇪</option>
                        <option value="Italiano">Italiano 🇮🇹</option>
                        <option value="Chinês">Chinês 🇨🇳</option>
                        <option value="Japonês">Japonês 🇯🇵</option>
                        <option value="Coreano">Coreano 🇰🇷</option>
                    </select>

                    <button id="swap-languages-btn">⇄</button>

                    <label for="target-language">Para:</label>
                    <select id="target-language">
                        <option value="Inglês" selected>Inglês 🇺🇸-🇬🇧</option>
                        <option value="Português">Português 🇵🇹-🇧🇷</option>
                        <option value="Espanhol">Espanhol 🇪🇸</option>
                        <option value="Francês">Francês 🇫🇷</option>
                        <option value="Alemão">Alemão 🇩🇪</option>
                        <option value="Italiano">Italiano 🇮🇹</option>
                        <option value="Chinês">Chinês 🇨🇳</option>
                        <option value="Japonês">Japonês 🇯🇵</option>
                        <option value="Coreano">Coreano 🇰🇷</option>
                    </select>
                </div>
                <div class="translator-textareas">
                    <div class="text-area-group">
                        <textarea id="source-text" placeholder="Digite o texto aqui... 📝⌨️"></textarea>
                        <div class="button-group">
                            <button id="undo-source-btn">Desfazer</button>
                            <button id="redo-source-btn">Refazer</button>
                            <button id="clear-source-btn">Limpar</button>
                            <button id="copy-source-btn">Copiar</button>
                            <button id="counter-source-btn">Contador</button>
                            <button id="translate-btn">Traduzir</button> <!-- Novo botão -->
                        </div>
                    </div>
                    <div class="text-area-group">
                        <textarea id="translated-text" placeholder="Após inserir o texto na caixa acima,⏳espere alguns segundos⏳para que a tradução seja concluída 🔤🖊️" readonly></textarea>
                        <div class="button-group">
                            <button id="undo-translated-btn">Desfazer</button>
                            <button id="redo-translated-btn">Refazer</button>
                            <button id="clear-translated-btn">Limpar</button>
                            <button id="copy-translated-btn">Copiar</button>
                            <button id="counter-translated-btn">Contador</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div id="warning-modal" class="modal">
            <div class="modal-content">
                <span id="warning-modal-close" class="close-button">&times;</span>
                <p id="warning-message"></p>
            </div>
        </div>
        <div id="error-modal" class="modal">
            <div class="modal-content">
                <span id="error-modal-close" class="close-button">&times;</span>
                <p id="error-message"></p>
            </div>
        </div>
    </main>
    <footer>
        <button id="settings-btn">Configurações</button>
    </footer>
    <div id="settings-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="settings-close">&times;</span>
            <h2>Configurações</h2>
            <label for="api-key">Chave API OpenAI:</label>
            <input type="text" id="api-key" placeholder="Insira sua chave API">
            <p class="settings-text">🔑 Certifique-se de que não há espaços extras antes ou depois da chave. Certifique-se de copiá-la corretamente.</p>
            <p class="settings-text">⚠️ Inserir uma chave incorreta, mal formatada, antiga ou vencida pode gerar falhas.</p>
            <p class="settings-text">💳 Verifique se você possui saldo ou créditos na OpenAI para evitar interrupções no serviço.</p>
                
            <div id="api-key-status"></div>
            <div class="settings-buttons">
                <button id="save-api-key-btn">Salvar Chave</button>
                <button id="copy-api-key-btn">Copiar Chave</button>
                <button id="delete-api-key-btn">Apagar Chave</button>
                <button id="theme-toggle">Alternar Tema</button>
                <p class="settings-text">🧠 Para utilizar o sistema inteligente da ProntuAI, é necessário possuir uma chave API da OpenAI.</p>
                <p class="settings-text">🔒 Sua chave API é armazenada localmente no navegador e nunca é enviada para terceiros. Sua chave API será usada apenas para conectar o site ao serviço OpenAI e não será compartilhada.
                </p>
                
            </div>

<!-- Seção de Passos -->
<section id="steps" class="steps">
    <h2>✨Como Adquirir sua API Key🔑</h2>
    <div class="step-container">
        <div class="step">
            <div class="step-number">1</div>
            <div class="step-description">
                <p>Crie uma conta na plataforma oficial da OpenAI.<br>📝🌐</p>
            </div>
        </div>
        <div class="step">
            <div class="step-number">2</div>
            <div class="step-description">
                <p>Forneça as informações necessárias e métodos de pagamento.<br>💳🛡️</p>
            </div>
        </div>
        <div class="step">
            <div class="step-number">3</div>
            <div class="step-description">
                <p>Após a verificação, sua API Key estará disponível para uso.<br>✅🔑</p>
                
            </div>
                    </div>
    </div>
</section>
    <section>
<div>
    <button class="openai-button" onclick="window.open('https://platform.openai.com/settings/organization/api-keys', '_blank')">
        Comprar API Key
    </button>
</div>

</section>

<!-- Seção de FAQ -->
<section id="faq" class="faq">
    <h2>Perguntas Frequentes</h2>
    <div class="faq-item">
        <div class="faq-question">1. O que é uma API Key da OpenAI?</div>
        <div class="faq-answer">
            <p>É um código que conecta o serviço da ProntuAI à inteligência da OpenAI. Ela permite que o nosso sistema use as funcionalidades inteligentes oferecidas pela OpenAI.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">2. É necessário ter uma chave API para utilizar o sistema inteligente da ProntuAI?</div>
        <div class="faq-answer">
            <p>Sim, é necessário possuir uma chave API da OpenAI para utilizar o sistema inteligente da ProntuAI.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">3. Como criar uma conta na OpenAI para gerar uma chave API?</div>
        <div class="faq-answer">
            <p>Caso ainda não tenha uma conta, será necessário criar uma fornecendo um e-mail válido. Após isso, acesse a seção “API Keys” e clique em “Create new secret key” para gerar sua chave única.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">4. É obrigatório ter uma assinatura do ChatGPT Plus para utilizar o sistema?</div>
        <div class="faq-answer">
            <p>Não, não é obrigatório ter uma assinatura do ChatGPT Plus.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">5. Como adiciono um método de pagamento para utilizar a API da OpenAI?</div>
        <div class="faq-answer">
            <p>Certifique-se de adicionar suas informações de cobrança na página de faturamento da OpenAI para evitar interrupções no serviço.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">6. Como funciona a cobrança da OpenAI?</div>
        <div class="faq-answer">
            <p>A OpenAI cobra com base no uso. Para monitorar gastos e ajustar o uso conforme necessário, acesse o painel de controle da OpenAI.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">7. Posso limitar meus gastos na OpenAI?</div>
        <div class="faq-answer">
            <p>Sim, é possível configurar limites de uso ou orçamento no painel para evitar exceder o valor que deseja gastar.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">8. Preciso ter saldo ou créditos na OpenAI para usar o serviço?</div>
        <div class="faq-answer">
            <p>Sim, verifique se você possui saldo ou créditos na OpenAI para evitar interrupções no serviço.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">9. O que devo fazer após gerar minha chave API?</div>
        <div class="faq-answer">
            <p>Salve sua chave imediatamente em um local seguro, pois ela pode não ser exibida novamente no painel.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">10. Onde encontrar a chave gerada?</div>
        <div class="faq-answer">
            <p>Após criar sua conta e acessar a página de configuração na OpenAI, copie a chave fornecida. Normalmente, ela é uma sequência longa de letras e números.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">11. Como a chave API é armazenada ao usar o ProntuAI?</div>
        <div class="faq-answer">
            <p>Sua chave API é armazenada localmente no navegador e nunca é enviada para terceiros. Ela será usada apenas para conectar o site ao serviço OpenAI e não será compartilhada.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">12. Minha chave API está armazenada no navegador. É seguro?</div>
        <div class="faq-answer">
            <p>Sim, armazenar a chave API localmente no navegador é seguro, desde que você mantenha seu dispositivo protegido. A chave nunca é enviada para terceiros.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">13. Minha chave API será compartilhada com outras pessoas ou serviços?</div>
        <div class="faq-answer">
            <p>Não, sua chave API será usada apenas para conectar o site ao serviço OpenAI e não será compartilhada.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">14. Como devo proteger minha chave API?</div>
        <div class="faq-answer">
            <p>Não compartilhe sua chave API com outras pessoas para evitar usos não autorizados. Não exponha sua chave publicamente ou em fóruns, pois isso pode levar ao uso indevido.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">15. O que fazer caso minha chave API seja usada de forma indevida?</div>
        <div class="faq-answer">
            <p>Revogue a chave imediatamente no painel da OpenAI e gere uma nova para garantir a segurança.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">16. Inseri minha chave API no campo apropriado, porém a seguinte mensagem surgiu: "Chave de API inválida". O que pode estar acontecendo? Minha chave API pode falhar ao ser utilizada?</div>
        <div class="faq-answer">
            <p>Certifique-se de que não há espaços extras antes ou depois da chave. Certifique-se de copiá-la corretamente. Inserir uma chave incorreta, mal formatada, antiga ou vencida pode gerar falhas. Verifique se você possui saldo ou créditos na OpenAI para evitar interrupções no serviço.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">17. Como posso verificar se minha chave API está funcionando corretamente?</div>
        <div class="faq-answer">
            <p>Após inserir sua chave API, tente acessar as funcionalidades da ProntuAI para garantir que está operando sem erros. Se encontrar problemas, revise se a chave foi copiada corretamente e se está ativa.</p>
        </div>
    </div>
    <div class="faq-item">
        <div class="faq-question">18. O que fazer se eu encontrar problemas ao utilizar minha chave API?</div>
        <div class="faq-answer">
            <p>Acesse a página de ajuda ou suporte da OpenAI (https://help.openai.com) para resolver problemas técnicos.</p>
        </div>
    </div>
   
            
    
</section>


        </div>
    </div>
    <div id="transcription-name-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="transcription-name-close">&times;</span>
            <h2>Nome do Prontuário</h2>
            <label for="transcription-name-input">Insira um nome para o prontuário:</label>
            <input type="text" id="transcription-name-input">
            <button id="save-transcription-name-btn">Salvar Nome</button>
        </div>
    </div>
    <div id="api-key-saved-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="api-key-saved-close">&times;</span>
            <h2>Sucesso</h2>
            <p>Chave API salva com sucesso!</p>
        </div>
    </div>
    <div id="copy-success-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="copy-success-close">&times;</span>
            <h2>Sucesso</h2>
            <p>Conteúdo copiado com sucesso!</p>
        </div>
    </div>
    <div id="delete-confirmation-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>Confirmação</h2>
            <p>Você tem certeza que deseja apagar?</p>
            <button id="confirm-delete-btn">Sim</button>
            <button id="cancel-delete-btn">Não</button>
        </div>
    </div>
    <div id="warning-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="warning-modal-close">&times;</span>
            <h2>Aviso</h2>
            <p id="warning-message">Por favor, insira um nome para a transcrição.</p>
        </div>
    </div>
    <div id="error-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="error-modal-close">&times;</span>
            <h2>Erro</h2>
            <p id="error-message">Ocorreu um erro.</p>
        </div>
    </div>
    <div id="delete-api-key-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="delete-api-key-close">&times;</span>
            <h2>Confirmar Exclusão</h2>
            <p>Tem certeza de que deseja apagar a chave API? Esta ação não pode ser desfeita.</p>
            <div class="modal-buttons">
                <button id="confirm-delete-api-key">Confirmar</button>
                <button id="cancel-delete-api-key">Cancelar</button>
            </div>
        </div>
    </div>
    <div id="transcription-counter-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="transcription-counter-close">&times;</span>
            <h2>Contadores da Transcrição</h2>
            <p>Caracteres (com espaços): <span id="transcription-char-with-spaces">0</span></p>
            <p>Caracteres (sem espaços): <span id="transcription-char-no-spaces">0</span></p>
            <p>Palavras: <span id="transcription-word-count">0</span></p>
        </div>
    </div>
    <div id="medical-record-counter-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="medical-record-counter-close">&times;</span>
            <h2>Contadores do Prontuário</h2>
            <p>Caracteres (com espaços): <span id="medical-record-char-with-spaces">0</span></p>
            <p>Caracteres (sem espaços): <span id="medical-record-char-no-spaces">0</span></p>
            <p>Palavras: <span id="medical-record-word-count">0</span></p>
        </div>
    </div>
    <script src="serve_app_js.php"></script>
    <script src="temp.js"></script>
    <script src="cid10.js"></script>
    <script src="scripts.js"></script>
    <script src="calc.js"></script>
    <script src="preco.js"></script>
    <script src="tradutor.js"></script>
    <script>
        </script>

        <!-- JavaScript para interatividade -->
        <script>
            // Toggle das respostas do FAQ
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', () => {
                question.classList.toggle('active');
                const answer = question.nextElementSibling;
                if (question.classList.contains('active')) {
                    answer.style.display = 'block';
                } else {
                    answer.style.display = 'none';
                }
            });
        });
        </script>

</body>
</html>
