diff --git a/backend/app.py b/backend/app.py index 9d7d9bf..1945abc 100644 --- a/backend/app.py +++ b/backend/app.py @@ -18,10 +18,10 @@ datos = { "El punto", "Estación de Sevilla", "Nuevo Mercado" ], "Línea 2": [ - "Zafra", "Nuevo Mercado", "Villa de Madrid", "Avenida Italia", - "Estación de Sevilla", "El Punto", "Estación de Ferrocarril", "Juzgados", + "Zafra", "Nuevo Mercado", "Villa de Madrid", "Avenida Italia Estación de Sevilla", + "El Punto", "Estación de Ferrocarril", "Juzgados", "Barrio Obrero", "El Porvenir", "Las Delicias", "Isla Chica", - "Bda, José Antonio", "Fuerzas Armadas Los Rosales", "Palacio de Deporte", + "Bda. José Antonio", "Fuerzas Armadas Los Rosales", "Palacio de Deportes", "Ciencias de la Educación (Universidad)", "Biblioteca (Universidad)", "Monumento al Fútbol", "Relaciones Laborales (Universidad)", "Vista Alegre-Universidad", "Centro Comercial Holea", "Plaza las Amapolas", @@ -31,7 +31,7 @@ datos = { "Bda. Navidad", "Molino de la Vega", "Paseo de las Palmeras", "Julio Caro Baroja (Aqualon)" ], - "Línea 131": ["Puente de Vallecas"] + "Línea 141": ["Puente de Vallecas"] } @app.route("/") diff --git a/package-lock.json b/package-lock.json index bcc23db..6f37a67 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,14 @@ "name": "mi-app-paradas-react", "version": "0.1.0", "dependencies": { + "@fontsource/roboto": "^5.2.6", + "@material/web": "^2.3.0", "bootstrap": "^5.3.3", - "cra-template": "1.2.0", + "cra-template": "^1.2.0", + "flask": "^0.2.10", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", "web-vitals": "^4.2.4" } }, @@ -2305,6 +2308,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource/roboto": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.6.tgz", + "integrity": "sha512-hzarG7yAhMoP418smNgfY4fO7UmuUEm5JUtbxCoCcFHT0hOJB+d/qAEyoNjz7YkPU5OjM2LM8rJnW8hfm0JLaA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -2778,6 +2790,34 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==" }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz", + "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==", + "license": "BSD-3-Clause" + }, + "node_modules/@lit/reactive-element": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.0.tgz", + "integrity": "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, + "node_modules/@material/web": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@material/web/-/web-2.3.0.tgz", + "integrity": "sha512-r7ccZHthMk5tM05goPJ965hQ99ptMyZt7i8Xi8+RmEqK3ZXaMtjx+s4p+9OVX+vgOS3zpop+g1yGYXtOOlrwUg==", + "license": "Apache-2.0", + "workspaces": [ + "catalog" + ], + "dependencies": { + "lit": "^2.8.0 || ^3.0.0", + "tslib": "^2.4.0" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4804,6 +4844,7 @@ "url": "https://opencollective.com/bootstrap" } ], + "license": "MIT", "peerDependencies": { "@popperjs/core": "^2.11.8" } @@ -5433,6 +5474,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/cra-template/-/cra-template-1.2.0.tgz", "integrity": "sha512-06WBUmTq79NvqU91Y9OPCXv/ENy/UkUmQS0lBrOYCl/4f4l67idnGbBARDGLopCHfff6pf6UftcFRWHg+CVfRw==", + "license": "MIT", "engines": { "node": ">=14" } @@ -7459,6 +7501,12 @@ "node": ">=8" } }, + "node_modules/flask": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/flask/-/flask-0.2.10.tgz", + "integrity": "sha512-Zy69KIuFsoX0o2W5uDHHk1GHMwRT8QT0AboPQY7b1soCfJ2pfwKxHF2AGVwJmDUjzawgOavoY/UsXnZ7fk3lVQ==", + "license": "MIT" + }, "node_modules/flat-cache": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", @@ -10178,6 +10226,37 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/lit": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.0.tgz", + "integrity": "sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^2.1.0", + "lit-element": "^4.2.0", + "lit-html": "^3.3.0" + } + }, + "node_modules/lit-element": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.0.tgz", + "integrity": "sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.1.0", + "lit-html": "^3.3.0" + } + }, + "node_modules/lit-html": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.0.tgz", + "integrity": "sha512-RHoswrFAxY2d8Cf2mm4OZ1DgzCoBKUKSPvA1fhtSELxUERq2aQQ2h05pO9j81gS1o7RIRJ+CePLogfyahwmynw==", + "license": "BSD-3-Clause", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -12595,6 +12674,7 @@ "version": "19.0.0", "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz", "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==", + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -12723,6 +12803,7 @@ "version": "19.0.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", + "license": "MIT", "dependencies": { "scheduler": "^0.25.0" }, @@ -12752,6 +12833,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==", + "license": "MIT", "dependencies": { "@babel/core": "^7.16.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", @@ -15234,7 +15316,8 @@ "node_modules/web-vitals": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz", - "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==" + "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==", + "license": "Apache-2.0" }, "node_modules/webidl-conversions": { "version": "6.1.0", diff --git a/package.json b/package.json index 8b6d245..daa58f4 100755 --- a/package.json +++ b/package.json @@ -3,11 +3,14 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fontsource/roboto": "^5.2.6", + "@material/web": "^2.3.0", "bootstrap": "^5.3.3", - "cra-template": "1.2.0", + "cra-template": "^1.2.0", + "flask": "^0.2.10", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", "web-vitals": "^4.2.4" }, "scripts": { diff --git a/public/audio/1-aquilon.wav b/public/audio/1-aquilon.wav deleted file mode 100644 index d110783..0000000 Binary files a/public/audio/1-aquilon.wav and /dev/null differ diff --git a/public/audio/1-av._andalucia_(castaño_robledo).wav b/public/audio/1-av._andalucia_(castaño_robledo).wav index 9010f7f..7d7b156 100644 Binary files a/public/audio/1-av._andalucia_(castaño_robledo).wav and b/public/audio/1-av._andalucia_(castaño_robledo).wav differ diff --git a/public/audio/1-el_punto.wav b/public/audio/1-el_punto.wav index 99d3414..d030c1b 100644 Binary files a/public/audio/1-el_punto.wav and b/public/audio/1-el_punto.wav differ diff --git a/public/audio/1-estación_de_sevilla.wav b/public/audio/1-estación_de_sevilla.wav index eba6eb7..989b803 100644 Binary files a/public/audio/1-estación_de_sevilla.wav and b/public/audio/1-estación_de_sevilla.wav differ diff --git a/public/audio/1-plaza_las_amapolas.wav b/public/audio/1-plaza_las_amapolas.wav index 1376099..444b3e7 100644 Binary files a/public/audio/1-plaza_las_amapolas.wav and b/public/audio/1-plaza_las_amapolas.wav differ diff --git a/public/audio/141-puente_de_vallecas.wav b/public/audio/141-puente_de_vallecas.wav new file mode 100644 index 0000000..b2cf6b7 Binary files /dev/null and b/public/audio/141-puente_de_vallecas.wav differ diff --git a/src/App.js b/src/App.js index 51b3ad9..4bb11f3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,15 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef, useMemo } from 'react'; +import '@material/web/button/filled-button.js'; +import '@material/web/button/outlined-button.js'; +import '@material/web/select/filled-select.js'; +import '@material/web/select/select-option.js'; +import '@material/web/radio/radio.js'; +import '@material/web/slider/slider.js'; +// import '@material/web/card/card.js'; // Temporalmente comentado import './App.css'; -import 'bootstrap/dist/css/bootstrap.min.css'; + +// Importa la fuente Roboto de Google Fonts +import "@fontsource/roboto"; // npm install @fontsource/roboto function App() { const [lineaSeleccionada, setLineaSeleccionada] = useState(''); @@ -11,8 +20,10 @@ function App() { const audioRef = useRef(null); const [theme, setTheme] = useState('light'); const [playing, setPlaying] = useState(false); + const [ciudadSeleccionada, setCiudadSeleccionada] = useState(''); - const datos = { + // Diccionario de paradas por línea para evitar mezclas y garantizar independencia + const paradasPorLinea = useMemo(() => ({ "Línea 1": [ "Zafra", "Julio Caro Baroja (Aqualon)", "Avda. Alemania (Esquina Ruiz de Alda)", "Avda. Alemania (Plaza de Toros)", "Bda. Navidad", "Don Bosco", @@ -27,10 +38,10 @@ function App() { "El punto", "Estación de Sevilla", "Nuevo Mercado" ], "Línea 2": [ - "Zafra", "Nuevo Mercado", "Villa de Madrid", "Avenida Italia", - "Estación de Sevilla", "El Punto", "Estación de Ferrocarril", "Juzgados", + "Zafra", "Nuevo Mercado", "Villa de Madrid", "Avenida Italia Estación de Sevilla", + "El Punto", "Estación de Ferrocarril", "Juzgados", "Barrio Obrero", "El Porvenir", "Las Delicias", "Isla Chica", - "Bda, José Antonio", "Fuerzas Armadas Los Rosales", "Palacio de Deporte", + "Bda. José Antonio", "Fuerzas Armadas Los Rosales", "Palacio de Deportes", "Ciencias de la Educación (Universidad)", "Biblioteca (Universidad)", "Monumento al Fútbol", "Relaciones Laborales (Universidad)", "Vista Alegre-Universidad", "Centro Comercial Holea", "Plaza las Amapolas", @@ -40,25 +51,60 @@ function App() { "Bda. Navidad", "Molino de la Vega", "Paseo de las Palmeras", "Julio Caro Baroja (Aqualon)" ], - "Línea 131": ["Puente de Vallecas"], - "Línea T32": ["Profesor Raúl Vázquez"], - "xx": ["tristante"] - }; + "Línea 3": [ + "Zafra", "Plaza de la Vera Cruz", "San Andrés", "Av. Manuel Siurot", "La Morana", + "Obispado", "Colegio Mayor San Pablo", "Ciudad Deportiva", "Av. Manuel Siurot (Montessori)", + "Santuario Nuestra Sra. de la Cinta", "Legión Española (O. Alta)", "Montevideo (Legión Española)", + "Orden Baja", "Zenobia (IPFD)", "Cruce Cementerio", "La Orden", "Avda. Santa Marta", + "Gómez de Avellaneda", "Urb. Santa Mª del Pilar (Verdeluz)", "Honduras (Saladillo)", + "Alanís de la Sierra", "Galaroza (H. Palomo)", "Jabugo", "Pérez Cubillas", "Jabugo", + "Isla Chica", "Las Delicias", "El Árbol", "Polideportivo Andrés Estrada", "Bomberos", + "San Sebastián (Bomberos)", "San Sebastián (Plaza los Litri)", "San Andrés", + "Plaza de la Merced (Universidad)", "Molino de la Vega", "Paseo de las Palmeras", "Zafra" + ], + "Línea 141": ["Puente de Vallecas"], + "Línea T32": ["Profesor Raúl Vázquez"] + }), []); + + // Estructura de líneas con ciudad + const datos = [ + { ciudad: "Huelva", linea: "Línea 1" }, + { ciudad: "Huelva", linea: "Línea 2" }, + { ciudad: "Huelva", linea: "Línea 3" }, + { ciudad: "Madrid", linea: "Línea 141" }, + { ciudad: "Madrid", linea: "Línea T32" } + ]; + + const ciudades = [ + "Huelva", + "Madrid", + "Sevilla" + ]; + + // Filtra las líneas por ciudad seleccionada + const lineasFiltradas = datos.filter(d => d.ciudad === ciudadSeleccionada); + + // Busca las paradas de la línea seleccionada de forma segura + const paradasFiltradas = paradasPorLinea[lineaSeleccionada] || []; + const handleLineaChange = (event) => { setLineaSeleccionada(event.target.value); setParadaSeleccionada(''); + // Recarga interna: fuerza el componente de paradas a "resetearse" + // Si usas un key en el select de paradas, cambiará el componente y limpiará el menú + setParadasKey(Math.random()); }; + // Key para forzar recarga del select de paradas + const [paradasKey, setParadasKey] = useState(0); + const handleParadaChange = (event) => { setParadaSeleccionada(event.target.value); }; - const handleTipoParadaChange = (event) => { - setTipoParada(event.target.value); - }; - const handleVolumeChange = (event) => { setVolume(event.target.value); + // Aplica el volumen global a cualquier audio que esté sonando if (audioRef.current) { audioRef.current.volume = event.target.value; } @@ -71,6 +117,7 @@ function App() { } else if (lineaSeleccionada && paradaSeleccionada) { const playAudio = (audioFile) => { const nuevoAudio = new Audio(audioFile); + nuevoAudio.volume = volume; // Aplica volumen global nuevoAudio.play().catch(error => { console.error("Error al reproducir audio:", error); }); @@ -111,35 +158,114 @@ function App() { } }; - const reproducirColision = () => { const audioColision = new Audio('/audio/colision.wav'); + audioColision.volume = volume; // Aplica volumen global audioColision.play().catch(error => { console.error("Error al reproducir audio:", error); }); }; + const reproducirCanceladora = (audioNombre) => { + const audioCanceladora = new Audio(`/audio/${audioNombre}.mp3`); + audioCanceladora.volume = volume; // Aplica volumen global + audioCanceladora.play().catch(error => { + console.error("Error al reproducir audio:", error); + }); + }; + useEffect(() => { - const cargarAudios = () => { - const audioActual = new Audio(`/audio/parada_actual.wav`); - const audioSiguiente = new Audio(`/audio/parada_siguiente.wav`); + // Elimina variables no usadas + // const audioActual = new Audio(`/audio/parada_actual.wav`); + // const audioSiguiente = new Audio(`/audio/parada_siguiente.wav`); - for (const linea in datos) { - datos[linea].forEach(parada => { - const lineaSinEspacios = linea.split(" ")[1] || linea.split(" ")[0]; - const audio = new Audio(`/audio/${lineaSinEspacios}-${parada.toLowerCase().replace(/ /g, "_")}.wav`); - }); - } - - const audioVallecas = new Audio(`/audio/vallecas.wav`); - const audioColision = new Audio(`/audio/colision.m4a`); - }; - - cargarAudios(); - }, []); + // Usar paradasPorLinea para evitar error de undefined + Object.entries(paradasPorLinea).forEach(([linea, paradas]) => { + paradas.forEach(parada => { + const lineaSinEspacios = linea.split(" ")[1] || linea.split(" ")[0]; + // Solo crea el objeto, no lo asignes a una variable no usada + new Audio(`/audio/${lineaSinEspacios}-${parada.toLowerCase().replace(/ /g, "_")}.wav`); + }); + }); + }, [paradasPorLinea]); useEffect(() => { localStorage.setItem('theme', theme); + + // Material 3 green-based color schemes (from your images) + const lightScheme = { + '--md-sys-color-primary': '#4C7A1F', // P-40 + '--md-sys-color-on-primary': '#FFFFFF', // P-100 + '--md-sys-color-primary-container': '#B6F397', // P-90 + '--md-sys-color-on-primary-container': '#17360D', // P-10 + '--md-sys-color-secondary': '#6A745F', // S-40 + '--md-sys-color-on-secondary': '#FFFFFF', // S-100 + '--md-sys-color-secondary-container': '#D7E2C7', // S-90 + '--md-sys-color-on-secondary-container': '#23281B', // S-10 + '--md-sys-color-tertiary': '#2B6A78', // T-40 + '--md-sys-color-on-tertiary': '#FFFFFF', // T-100 + '--md-sys-color-tertiary-container': '#B6EAF3', // T-90 + '--md-sys-color-on-tertiary-container': '#102A2F', // T-10 + '--md-sys-color-error': '#BA1A1A', // E-40 + '--md-sys-color-on-error': '#FFFFFF', // E-100 + '--md-sys-color-error-container': '#FFDAD6', // E-90 + '--md-sys-color-on-error-container': '#410002', // E-10 + '--md-sys-color-background': '#F7F9F3', // N-98 + '--md-sys-color-on-background': '#1A1C18', // N-10 + '--md-sys-color-surface': '#F7F9F3', // N-98 + '--md-sys-color-on-surface': '#1A1C18', // N-10 + '--md-sys-color-surface-variant': '#E1E3D6', // NV-80 + '--md-sys-color-on-surface-variant': '#45483C', // NV-30 + '--md-sys-color-outline': '#76786B', // NV-50 + '--md-sys-color-outline-variant': '#C5C8B7', // NV-80 + '--md-sys-color-surface-dim': '#E3E3DB', // N-87 + '--md-sys-color-surface-bright': '#F7F9F3', // N-98 + '--md-sys-color-surface-container-lowest': '#FFFFFF', // N-100 + '--md-sys-color-surface-container-low': '#F1F3EB', // N-96 + '--md-sys-color-surface-container': '#ECEEE6', // N-94 + '--md-sys-color-surface-container-high': '#E7E9E1', // N-92 + '--md-sys-color-surface-container-highest': '#E3E3DB', // N-90 + }; + + const darkScheme = { + '--md-sys-color-primary': '#B6F397', // P-80 + '--md-sys-color-on-primary': '#17360D', // P-20 + '--md-sys-color-primary-container': '#2B5A1B', // P-30 + '--md-sys-color-on-primary-container': '#D6FFD6', // P-90 + '--md-sys-color-secondary': '#B6BFA8', // S-80 + '--md-sys-color-on-secondary': '#23281B', // S-20 + '--md-sys-color-secondary-container': '#3C4430', // S-30 + '--md-sys-color-on-secondary-container': '#E7F3D7', // S-90 + '--md-sys-color-tertiary': '#8FE6F3', // T-80 + '--md-sys-color-on-tertiary': '#102A2F', // T-20 + '--md-sys-color-tertiary-container': '#1B4A5A', // T-30 + '--md-sys-color-on-tertiary-container': '#D6F6FF', // T-90 + '--md-sys-color-error': '#FFDAD6', // E-80 + '--md-sys-color-on-error': '#BA1A1A', // E-20 + '--md-sys-color-error-container': '#93000A', // E-30 + '--md-sys-color-on-error-container': '#FFDAD6', // E-90 + '--md-sys-color-background': '#23281B', // N-6 + '--md-sys-color-on-background': '#E3E3DB', // N-90 + '--md-sys-color-surface': '#23281B', // N-6 + '--md-sys-color-on-surface': '#E3E3DB', // N-90 + '--md-sys-color-surface-variant': '#45483C', // NV-30 + '--md-sys-color-on-surface-variant': '#C5C8B7', // NV-80 + '--md-sys-color-outline': '#76786B', // NV-60 + '--md-sys-color-outline-variant': '#45483C', // NV-30 + '--md-sys-color-surface-dim': '#1A1C18', // N-4 + '--md-sys-color-surface-bright': '#3C4430', // N-24 + '--md-sys-color-surface-container-lowest': '#181A14', // N-4 + '--md-sys-color-surface-container-low': '#23281B', // N-10 + '--md-sys-color-surface-container': '#23281B', // N-12 + '--md-sys-color-surface-container-high': '#2B2F23', // N-17 + '--md-sys-color-surface-container-highest': '#353A2B', // N-22 + }; + + const scheme = theme === 'dark' ? darkScheme : lightScheme; + for (const [key, value] of Object.entries(scheme)) { + document.body.style.setProperty(key, value); + } + document.body.classList.toggle('dark-theme', theme === 'dark'); document.body.classList.toggle('light-theme', theme === 'light'); }, [theme]); @@ -148,91 +274,172 @@ function App() { setTheme(theme === 'light' ? 'dark' : 'light'); }; - const reproducirCanceladora = (audioNombre) => { - const audioCanceladora = new Audio(`/audio/${audioNombre}.mp3`); - audioCanceladora.play().catch(error => { - console.error("Error al reproducir audio:", error); - }); - }; - return ( -
-

Aplicación de Megafonía

+
+

Aplicación de Megafonía

-
-
-
- - +
- - +
-
-
hora_de_salida.wav -
-
-