Spaces:

LeireTedCas
/

quirohelpWebapp

Sleeping

App Files Files Community

LeireTedCas commited on Nov 8, 2023

Commit

d52bce0

•

1 Parent(s): 5922f7f

Update templates/escuchar_uro1.html

Browse files

Files changed (1) hide show

templates/escuchar_uro1.html +98 -5

templates/escuchar_uro1.html CHANGED Viewed

@@ -3,7 +3,95 @@
 <head>
 	<meta charset="utf-8">
 	<title> Quirohelp </title>
 </head>
 <body>
@@ -12,7 +100,7 @@
 		<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';font-size: 1.7rem;">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)
@@ -21,15 +109,20 @@
-		</form>
 		<!---------------------------------------------------------------------------------------->
-		<div id="controls">
 			<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">Dele al botón "Grabar Voz". Cuando acabe, dele al botón "Parar grabación..." y obtendrá el resultado de la búsqueda</div>
 		<p><strong>Grabación:</strong></p>
 		<ol id="recordingsList"></ol>

 <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;
+        }
+        /* 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 */
+            }
+        }
+		h2, h3 {
+			color: #fff; /* Texto blanco */
+		}
+		h2 {
+			font-size: 3rem;
+			background-color: #008b8b; /* Color de fondo */
+			display: flex;
+			align-items: center;
+		}
+		h3 {
+			font-size: 1.2rem;
+			padding-left: 80%;
+		}
+		button {
+			font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
+			font-size: 1.2rem;
+			background-color: white;
+			border: solid white;
+			display: flex;
+			align-items: center;
+          justify-content: center;
+		}
+		img {
+			max-width: 5%;
+		}
+		.controls {
+			background-color: #333; /* Fondo oscuro */
+			//padding: 20px;
+			//margin: 10px 0;
+            display: flex;
+            flex-direction: column; /* Para alinear verticalmente */
+            align-items: center; /* Para centrar horizontalmente */
+            justify-content: center; /* Opcional para centrar verticalmente */
+		}
+      #controls2 {
+              display: flex;
+              align-items: center;
+              //height: 100vh; /* Ajusta la altura del contenedor según sea necesario */
+              justify-content: center;
+            }
+		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 el contenido de audio (no proporcionado en el código) */
+		/* Puedes agregar estilos adicionales para otros elementos según tus necesidades. */
+	</style>
 </head>
 <body>
 		<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';font-size: 1.7rem;">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)
+		</form>-->
 		<!---------------------------------------------------------------------------------------->
+		<div class="image-container">
+			<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>