Añado archivos html, css, js para una primera prueba de funcionamiento de la app

app.py

@@ -1,14 +1,12 @@
+from flask import Flask, render_template, jsonify
 import os
 from dotenv import load_dotenv
 import cx_Oracle
 
-print("Usuario:", os.getenv("OraHome"))
-
-print("cx_Oracle version:", cx_Oracle.__version__)
-print(cx_Oracle.clientversion())
-
 load_dotenv()
 
+app = Flask(__name__)
+
 user = os.getenv("DB_USER")
 password = os.getenv("DB_PASSWORD")
 host = os.getenv("DB_HOST")
@@ -17,15 +15,17 @@ sid = os.getenv("DB_SID")
 
 dsn = cx_Oracle.makedsn(host, port, sid=sid)
 
+def conectar_oracle(user, password, dsn):
     try:
         connection = cx_Oracle.connect(user=user, password=password, dsn=dsn)
-    cursor = connection.cursor()
-    cursor.execute("SELECT CODIGO_PERSONAL FROM FPERSONA WHERE APELLIDO1 LIKE '%ALFARO%' AND NOMBRE LIKE '%JESUS%'")
-
-    for row in cursor:
-        print(row)
-
-    cursor.close()
-    connection.close()
+        return connection
     except cx_Oracle.DatabaseError as e:
         print(f"Error de conexión: {e}")
+        raise
+
+@app.route('/')
+def index():
+    return render_template("index.html")
+
+if __name__ == '__main__':
+    app.run(debug=True)

example.env

@@ -1,5 +1,5 @@
-DB_USER=NOVAHIS
-DB_PASSWORD=NOVAHIS
+DB_USER=CSMKIOSCOS
+DB_PASSWORD=CSMKIOSCOS
 DB_HOST=192.168.1.76
 DB_PORT=1521
 DB_SID=REALRAC1

static/css/styles.css

@@ -0,0 +1,23 @@
+@keyframes scroll {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+.animate-scroll {
+  display: inline-block;
+  animation: scroll 20s linear infinite;
+}
+
+
+@keyframes blink {
+  0%, 100% { background-color: #0a6eb2} 
+  50% { background-color: #ffff00; color: black; }     
+}
+
+.blink-yellow {
+  animation: blink 3s steps(1,end) infinite;
+}

static/js/scripts.js

@@ -0,0 +1,65 @@
+const sonido = new Audio("/static/media/0457.wav");
+const estadoAnterior = {};
+
+function cargarTabla() {
+    fetch("/api/datos")
+        .then(res => res.json())
+        .then(filas => {
+            const tbody = document.getElementById("turnos");
+            tbody.innerHTML = "";
+            filas.forEach(fila => {
+                const id = fila[0];
+
+                const tr = document.createElement("tr");
+
+                const td1 = document.createElement("td");
+                td1.textContent = fila[0];
+                td1.className = "border px-4 py-2 bg-[#114b94] align-middle";
+                tr.appendChild(td1);
+
+                const td2 = document.createElement("td");
+
+                const estadoConsulta = fila[1];
+                const estadoTurno = fila[3];
+
+                if (estadoConsulta == 0) {
+                    td2.textContent = "-";
+                    td2.className = "border px-4 py-2 bg-[#a9a9a9] align-middle";
+                } else if (estadoConsulta == 1) {
+                    td2.textContent = fila[2];
+                    if (estadoTurno == 1) {
+                        sonido.play();
+                        td2.className = "border px-4 py-2 blink-yellow align-middle";
+                    } else {
+                        td2.className = "border px-4 py-2 bg-[#0a6eb2] align-middle";
+                    }
+                } else {
+                    td2.textContent = fila[2];
+                    td2.className = "border px-4 py-2 bg-[#a9a9a9] align-middle";
+                }
+
+                if (estadoAnterior[id] === 2 && estadoTurno === 1) {
+                    sonido.play();
+                }
+
+                estadoAnterior[id] = estadoTurno;
+
+                tr.appendChild(td2);
+                tbody.appendChild(tr);
+            });
+        });
+}
+
+function cargarFooter() {
+  fetch("/api/footer")
+    .then(res => res.text())
+    .then(data => {
+      const footerText = document.getElementById("footer-text");
+      footerText.textContent = data.mensaje;
+    });
+}
+
+cargarFooter();
+cargarTabla();
+setInterval(cargarTabla, 30000);
+setInterval(cargarFooter, 60000);

static/js/utils.js

@@ -0,0 +1,39 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+  function mostrarFecha() {
+    const hoy = new Date();
+
+    const opciones = {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+    };
+
+    const fechaFormateada = hoy.toLocaleDateString('es-ES', opciones);
+
+    const divFecha = document.getElementById('fecha');
+    if (divFecha) {
+      divFecha.textContent = fechaFormateada;
+    }
+  }
+
+  function actualizarHora() {
+    const ahora = new Date();
+
+    const horas = String(ahora.getHours()).padStart(2, '0');
+    const minutos = String(ahora.getMinutes()).padStart(2, '0');
+    const segundos = String(ahora.getSeconds()).padStart(2, '0');
+
+    const horaFormateada = `${horas}:${minutos}:${segundos}`;
+
+    const divHora = document.getElementById('hora');
+    if (divHora) {
+      divHora.textContent = horaFormateada;
+    }
+  }
+
+  mostrarFecha();
+  actualizarHora();
+  setInterval(actualizarHora, 1000); 
+});

templates/index.html

@@ -0,0 +1,39 @@
+<html>
+<head>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
+</head>
+
+<body class="flex flex-col min-h-screen">
+    <header class="flex justify-between items-center bg-white p-10 h-[225px]">
+        <div id="logo">
+            <img src="{{ url_for('static', filename='media/csm.svg') }}" alt="Clínica San Miguel | Cuidamos Tu Salud" height="172" width="380">
+        </div>
+        <div id="fecha" class="text-5xl text-[#696969]"></div>
+        <div id="hora" class="text-7xl font-bold text-[#696969]"></div>
+    </header>
+    <div class="flex flex-col md:flex-row gap-4 p-4 bg-gray-100 h-[783px]">
+        <div class="md:w-1/2 w-full flex items-center bg-black">
+            <video src="{{ url_for('static', filename='media/CSM-HD.mp4') }}" class="w-full shadow-md" autoplay muted loop
+                preload="metadata"></video>
+        </div>
+        <div class="md:w-1/2 w-full overflow-auto h-[751px]">
+            <table class="min-w-full text-center text-white text-3xl table-fixed border-collapse h-full">
+                <thead>
+                    <tr class="h-[90px]">
+                        <th class="border px-4 py-2 bg-[#114b94]">CONSULTA</th>
+                        <th class="border px-4 py-2 bg-[#0a6eb2]">TURNO</th>
+                    </tr>
+                </thead>
+                <tbody id="turnos" class="text-7xl">
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <footer class="w-full bg-[#008968] overflow-hidden h-14">
+        <div id="footer-text" class="whitespace-nowrap animate-scroll px-4 text-white"></div>
+    </footer>
+</body>
+</html>