Hugging Face's logo

Spaces:
LeireTedCas
/
quirohelpWebapp
Sleeping

App Files Community
LeireTedCas commited on
Commit
0271465
·
1 Parent(s): 9f32c3f

Update templates/escuchar_trauma1.html

Browse files
Files changed (1) hide show
  1. templates/escuchar_trauma1.html +101 -8
templates/escuchar_trauma1.html CHANGED
@@ -3,7 +3,95 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <title> Quirohelp </title>
6
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
 
8
  </head>
9
  <body>
@@ -12,20 +100,25 @@
12
  <h3 style="padding-left: 80%;font-size: 1.2rem;" onclick="location.href='/ajustes'">AJUSTES <img src="{{ user_image6 }}" alt="" style="max-width:18%;"></h3>
13
  <hr />
14
  <h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.7rem;">Asistente de voz:</h2>
15
- <form action="{{url_for('escuchar_trauma1')}}" method="post">
16
- <!--<button type="button" style="padding-right: 85%;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.2rem;padding-left: 1%;background-color: white; border: solid white" onclick="location.href='/escuchar_trauma'">Escuchar: <img src="{{ user_image5 }}" width="30% " style=" border-radius: 100%;box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);" onclick="location.href='/escuchar_trauma'"></button>
17
- -->
18
 
19
 
20
- </form>
21
  <!---------------------------------------------------------------------------------------->
22
 
23
- <div id="controls">
 
 
 
 
 
24
  <button id="recordButton">Grabar Voz</button>
25
  <!--<button id="pauseButton" disabled>Pause</button>-->
26
- <button id="stopButton">Parar grabacion y buscar</button>
27
  </div>
28
- <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>
29
  <p><strong>Grabación:</strong></p>
30
  <ol id="recordingsList"></ol>
31
 
 
3
  <head>
4
  <meta charset="utf-8">
5
  <title> Quirohelp </title>
6
+ <style>
7
+ body {
8
+ background-color: #333; /* Fondo oscuro */
9
+ color: #fff; /* Texto blanco */
10
+ font-family: Georgia, 'Times New Roman', Times, serif;
11
+ margin: 0;
12
+ padding: 0;
13
+ text-align: center;
14
+ }
15
+ .quiro {
16
+ background-color: blueviolet;
17
+ font-size: 3.5rem;
18
+ padding: 20px 0;
19
+ }
20
+ .login2 {
21
+ text-align: center;
22
+ padding: 20px;
23
+ }
24
+ /* Estilos para pantallas pequeñas (por ejemplo, hasta 768px) */
25
+ @media screen and (max-width: 768px) {
26
+ .quiro {
27
+ font-size: 2.5rem; /* Reducir el tamaño de la fuente */
28
+ }
29
+ input[type="button"] {
30
+ width: 100%; /* Ajustar el ancho al 100% para ocupar todo el ancho disponible */
31
+ }
32
+ }
33
+ /* Estilos para pantallas medianas y grandes (más de 768px) */
34
+ @media screen and (min-width: 769px) {
35
+ .quiro {
36
+ font-size: 3.5rem; /* Restablecer el tamaño de la fuente original */
37
+ }
38
+ }
39
+ h2, h3 {
40
+ color: #fff; /* Texto blanco */
41
+ }
42
+ h2 {
43
+ font-size: 3rem;
44
+ background-color: #008b8b; /* Color de fondo */
45
+ display: flex;
46
+ align-items: center;
47
+ }
48
+ h3 {
49
+ font-size: 1.2rem;
50
+ padding-left: 80%;
51
+ }
52
+ button {
53
+ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
54
+ font-size: 1.2rem;
55
+ background-color: white;
56
+ border: solid white;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ }
61
+ img {
62
+ max-width: 5%;
63
+ }
64
+ .controls {
65
+ background-color: #333; /* Fondo oscuro */
66
+ //padding: 20px;
67
+ //margin: 10px 0;
68
+ display: flex;
69
+ flex-direction: column; /* Para alinear verticalmente */
70
+ align-items: center; /* Para centrar horizontalmente */
71
+ justify-content: center; /* Opcional para centrar verticalmente */
72
+ }
73
+ #controls2 {
74
+ display: flex;
75
+ align-items: center;
76
+ //height: 100vh; /* Ajusta la altura del contenedor según sea necesario */
77
+ justify-content: center;
78
+ }
79
+ button#recordButton {
80
+ background-color: #008b8b; /* Color de fondo */
81
+ color: #fff; /* Texto blanco */
82
+ align-items: center;
83
+ justify-content: center;
84
+ }
85
+ button#stopButton {
86
+ background-color: #8b0000; /* Color de fondo */
87
+ color: #fff; /* Texto blanco */
88
+ align-items: center;
89
+ justify-content: center;
90
+ }
91
+ /* Estilos para el contenido de audio (no proporcionado en el código) */
92
+ /* Puedes agregar estilos adicionales para otros elementos según tus necesidades. */
93
+ </style>
94
+
95
 
96
  </head>
97
  <body>
 
100
  <h3 style="padding-left: 80%;font-size: 1.2rem;" onclick="location.href='/ajustes'">AJUSTES <img src="{{ user_image6 }}" alt="" style="max-width:18%;"></h3>
101
  <hr />
102
  <h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.7rem;">Asistente de voz:</h2>
103
+ <!--<form action="{{url_for('escuchar_trauma1')}}" method="post">
104
+ <button type="button" style="padding-right: 85%;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.2rem;padding-left: 1%;background-color: white; border: solid white" onclick="location.href='/escuchar_trauma'">Escuchar: <img src="{{ user_image5 }}" width="30% " style=" border-radius: 100%;box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);" onclick="location.href='/escuchar_trauma'"></button>
105
+
106
 
107
 
108
+ </form>-->
109
  <!---------------------------------------------------------------------------------------->
110
 
111
+ <div class="image-container">
112
+ <img src="{{ user_image5 }}" alt="Descripción de la imagen">
113
+ </div>
114
+ <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>
115
+
116
+ <div id="controls2">
117
  <button id="recordButton">Grabar Voz</button>
118
  <!--<button id="pauseButton" disabled>Pause</button>-->
119
+ <button id="stopButton" disabled>Parar grabacion y buscar</button>
120
  </div>
121
+ <div id="formats"></div>
122
  <p><strong>Grabación:</strong></p>
123
  <ol id="recordingsList"></ol>
124