<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>üí° EnergIA - Editor de prompt</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
      </style>
    <style>
        body {
        /* Gradiente linear */
        background: linear-gradient(135deg, #26aa21, #205329);
        font-family: Arial, sans-serif;

        /* Efeito granulado */
        background-size: 400% 400%;
        animation: granular 30s ease infinite;
    }

    @keyframes granular {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
        
        .chat-container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 40px auto;
        }

        .selection-panel{
            background-color: #ffffff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 40px auto;
        }

        h2 {
            color: #4caf50;
        }

        .chat-messages {
            height: 30vh;
            overflow-y: scroll;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
            padding: 20px;
            border-radius: 10px;
            
        }

        .chat-messages p {
            margin: 10px 0;
            padding: 10px;
            border-radius: 15px;
        }

        .chat-messages p.user {
            background-color: #4caf50;
            color: #ffffff;
            text-align: right;
        }

        .chat-messages p.bot {
            background-color: #e0e0e0;
            color: #333;
        }
        
        button.btn-primary {
            background-color: #4caf50;
            border: none;
        }

        button.btn-primary:hover {
            background-color: #45a049;
        }

        button.btn-primary:disabled{
            background-color: #666;
        }

        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }

        .loader {
            border: 6px solid #f3f3f3;
            border-top: 6px solid #4caf50;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }

        .header {
            background-color: #ffffff;
            padding: 10px 0;
            border-bottom: 2px solid #4caf50;
        }

        .btn-group .btn {
            background-color: #4caf50;
            border-color: #4caf50;
            color: #fff;
        }

        .btn-group .btn:hover {
            background-color: #45a049;
            border-color: #45a049;
        }

        .btn-selected {
        background-color: #387c44!important;
        border-color: #387c44!important;
    }

    .group-title {
        color: #4caf50; 
        margin-bottom: 10px; /* Espa√ßamento abaixo do t√≠tulo */
        text-align: center; 
        font-size: 1rem;
    }

    h2{
        font-family: 'Lato', sans-serif;
    }

    .footer {
            background-color: #ffffff;
            color: #4caf50;
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer a {
            color: #4caf50;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        .patrocinadores {
        }

    
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* Altura total da viewport */
    }

    .content {
        flex-grow: 1; /* Ocupa todo o espa√ßo dispon√≠vel */
    }

    /* Estilos gerais */
* {
    box-sizing: border-box;
}

/* Estiliza√ß√£o do Checkbox */
.checkbox-custom {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Esconde o checkbox original */
.checkbox-custom input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Cria um novo checkbox personalizado */
.checkbox-custom .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #aaa;
    border-radius: 4px;
}

/* Quando o checkbox √© marcado, muda a cor do fundo do checkmark */
.checkbox-custom input:checked ~ .checkmark {
    background-color: #4caf50;
}

/* Estiliza√ß√£o do Campo Num√©rico */
.input-number-custom {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.input-number-custom:focus {
    border-color: #4caf50;
    outline: none;
}

.btn-selected {
    background-color: #387c44; /* Cor de fundo para o bot√£o selecionado */
    color: white; /* Cor do texto para o bot√£o selecionado */
    border-color: #387c44; /* Cor da borda para o bot√£o selecionado */
}

/* Estilo para quando o mouse passa sobre o bot√£o que n√£o est√° selecionado */
.btn-primary:not(.btn-selected):hover {
    background-color: #4caf50; /* Cor de fundo para hover */
    border-color: #4caf50; /* Cor da borda para hover */
}

.config-visualization-container {
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 20px;
    color: #333;
}

.text-preview {
    white-space: pre-line; /* Mant√©m quebras de linha */
}

/* Estilos para as vari√°veis do texto de visualiza√ß√£o */
.variavel-tema { color: #4caf50; } /* Verde */
.variavel-area { color: #007bff; } /* Azul */
.variavel-nivelConhecimento { color: #ff5722; } /* Laranja */
.variavel-estiloComunicacao { color: #9c27b0; } /* Roxo */
.variavel-personalidade { color: #e91e63; } /* Rosa */
.variavel-humor { color: #00bcd4; } /* Ciano */
.variavel-humorNivel { color: #c9b508; } /* Amarelo */
.variavel-breviedade { color: #8bc34a; } /* Verde Claro */
.variavel-idioma { color: #ff9800; } /* Laranja Claro */
.variavel-localidade { color: #858484; } /* Cinza */
.variavel-roundAvaliacao { color: #3f51b5; } /* √çndigo */
.variavel-historicoInteracao { color: #4d6977; } /* Azul Cinza */

    
    </style>
</head>
<body>

        <div class="page-container">
            <header class="header">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 text-center">
                            <h3 class="group-title">Escolha o Modelo de Chatbot:</h3>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-auto">
                            <div class="btn-group" role="group" aria-label="Op√ß√£o">
                                <button type="button" id="gpt3" class="btn btn-secondary btn-selected">GPT 3.5 - Turbo</button>
                                <button type="button" id="claude" class="btn btn-secondary">Claude-v2</button>
                            </div>                    
                        </div>
                    </div>
                </div>
            </header>

        <div class="content container">
            <div class="row">
                <!-- Coluna da esquerda: Painel de sele√ß√£o -->
                <div class="col-md-6">
                    <div class="selection-panel" id="painelopcoes">
                        <!-- Bot√µes para sele√ß√£o de caracter√≠sticas -->
                        <h3>Selecione as Caracter√≠sticas</h3> 
                        <!-- Bot√£o de Upload -->
                        <form id="file-upload-form" class="mt-3">
                            <div class="form-group">
                                <label for="jsonFileUpload" class="btn btn-secondary">Upload de Configura√ß√µes</label>
                                <input type="file" id="jsonFileUpload" name="jsonFile" class="form-control-file" hidden>
                            </div>
                        </form>

                        <button class="btn btn-primary">Caracter√≠stica 1</button>
                        <button class="btn btn-primary">Caracter√≠stica 2</button>
                        <!-- ... outros bot√µes ... -->

                        
                    </div>
                </div>

                <!-- Coluna da direita: Chat -->
                <div class="col-md-6">
                    <div class="chat-container">
                        <h2 class="mb-4">üí° EnergIA: Efici√™ncia Energ√©tica </h2> 
                        <div class="chat-messages"></div>
                        <form id="chatForm"  method="POST">
                            <div class="mb-3">
                                <textarea class="form-control" name="userInput" rows="3" placeholder="Digite sua pergunta aqui..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">Enviar</button>
                        </form>
                    </div>

                    <!-- Se√ß√£o de Visualiza√ß√£o de Configura√ß√µes -->
                    <div class="config-visualization-container rounded bg-white mt-3 p-3">
                        <h2 class="mb-4">Prompt de sistema:</h2> 
                        <div id="configText" class="text-preview">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

       
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-left">
                        Criado por <a href="https://github.com/PedroThiagoRoque" target="_blank">Pedro Thiago Roque</a>
                    </div>
                    <div class="col-md-6 text-right patrocinadores">
                        <!-- Espa√ßo para os logos dos patrocinadores -->
                    </div>
                </div>
            </div>
        </footer>
    </div>
    


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/public/editor.js"></script>
    
    </body>
    </html>