quirohelpWebapp / templates /escuchar_uro1.html
LeireTedCas's picture
Update templates/escuchar_uro1.html
8619201
raw
history blame
6.39 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Quirohelp </title>
<style>
body {
background-color: #333; /* Fondo oscuro */
color: #fff; /* Texto blanco */
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
text-align: center;
}
.quiro {
background-color: blueviolet;
font-size: 3.5rem;
padding: 20px 0;
}
.login2 {
text-align: center;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
grid-gap: 10px;
align-items: center;
}
.element {
text-align: center;
max-height: 100%;
}
.img {
max-width: 5%;
height: auto;
}
.img2 {
max-width: 15%;
height: auto;
}
.text {
font-size: 36px; /* Tamaño de letra deseado */
}
.text2 {
font-size: 24px; /* Tamaño de letra deseado */
}
button#recordButton {
background-color: #008b8b; /* Color de fondo */
color: #fff; /* Texto blanco */
align-items: center;
justify-content: center;
}
button#stopButton {
background-color: #8b0000; /* Color de fondo */
color: #fff; /* Texto blanco */
align-items: center;
justify-content: center;
}
/* Estilos para pantallas pequeñas (por ejemplo, hasta 768px) */
@media screen and (max-width: 768px) {
.quiro {
font-size: 2.5rem; /* Reducir el tamaño de la fuente */
}
input[type="button"] {
width: 100%; /* Ajustar el ancho al 100% para ocupar todo el ancho disponible */
}
}
/* Estilos para pantallas medianas y grandes (más de 768px) */
@media screen and (min-width: 769px) {
.quiro {
font-size: 3.5rem; /* Restablecer el tamaño de la fuente original */
}
}
</style>
</head>
<body>
<div class="login22">
<!--<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;font-size: 3rem;background-color: saddlebrown;"><img src="{{ user_image7 }}" alt="" style="max-width:5%;" onclick="location.href='/especialidad'"> Urología </h2>
<h3 style="padding-left: 80%;font-size: 1.2rem;" onclick="location.href='/ajustes'">AJUSTES <img src="{{ user_image6 }}" alt="" style="max-width:18%;"></h3>
<hr />-->
<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 3rem; background-color: saddlebrown; max-width: 100%; overflow: hidden; display: flex; align-items: center;">
<div class="container">
<div class="element">
<img class="img2" src="{{ user_image7 }}" alt="Atrás" onclick="location.href='/especialidad'">
</div>
<div class="element">
<p class="text2">Volver</p>
</div>
<div class="element">
<p class="text">UROLOGÍA</p>
</div>
<div class="element">
<p class="text2">Ajustes</p>
</div>
<div class="element">
<img class="img2" src="{{ user_image6 }}" alt="Config." onclick="location.href='/ajustes'">
</div>
</div>
</h2>
</div>
<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.7rem;background-color: saddlebrown;">Asistente de voz:</h2>
<!--<form action="{{url_for('escuchar_uro1')}}" method="post">
<script>
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
const mediaRecorder = new MediaRecorder(stream)
})
</script>
</form>-->
<!---------------------------------------------------------------------------------------->
<div class="image-container">
<img class="img" src="{{ user_image5 }}" alt="Descripción de la imagen">
</div>
<div id="instructions">Dele al botón "Grabar Voz". Cuando acabe, dele al botón "Parar grabación..." y obtendrá el resultado de la búsqueda</div>
<div id="controls2">
<button id="recordButton">Grabar Voz</button>
<!--<button id="pauseButton" disabled>Pause</button>-->
<button id="stopButton" disabled>Parar grabacion y buscar</button>
</div>
<div id="formats"></div>
<p><strong>Grabación:</strong></p>
<ol id="recordingsList"></ol>
<!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script src="/static/js/appuro.js"></script>
<!-- Agrega un cuadro de texto para mostrar la respuesta -->
<!--<input type="text" id="responseTextBox" readonly>-->
<!--<div id="textElement">-->
<!-- El texto plano se mostrará aquí -->
<!--</div>-->
<!--<h1>Grabación de Audio</h1>
<br>
<br>
<!--<b style="font-size: 1.4rem;font-family: Arial, Helvetica, sans-serif;">{{prediction_text}}</b>-->
<br>
<br>
<!---------------------------------------------------------------------------------------->
<br>
<br>
<b style="font-size: 1.4rem;font-family: Arial, Helvetica, sans-serif;">{{prediction_text}}</b>
<br>
<br>
<!--<b style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.8rem;">Selectores: </b>
<br>
<br>
<img src="{{ user_image8 }}" style="max-width:20%;" onclick="location.href='/pdf_casa_uro?link2={{nid2}}'">
<img src="{{ user_image9 }}" style="max-width:20%;" onclick="location.href='/protocolos_uro?link2={{nid2}}'">
<img src="{{ user_image10 }}" style="max-width:20%;" onclick="location.href='/guia_visual_uro?link2={{nid2}}'">
<br>
<img src="{{ user_image11 }}" style="max-width:20%;" onclick="location.href='/videos_uro?link2={{nid2}}'">
<img src="{{ user_image12 }}" style="max-width:20%;" onclick="location.href='/materiales_uro?link2={{nid2}}'">
</div>-->
</body>
</html>