jarrad/Guard-fenix_CodigoFenix_2026
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Guard-fenix_CodigoFenix_2026/_Sort/WebSite/Phoenix Guardian.html

623 lines
No EOL
18 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!-- saved from url=(0060)https://mendozarodriguezs124-debug.github.io/guardian-f-nix/ -->
<html lang="en" class="translated-ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phoenix Guardian</title>
<script src="./Phoenix Guardian_files/chart.js.download"></script>
<style>
body{
font-family:Arial,Helvetica,sans-serif;
margin:0;
background:#fdf2f2;
color:#333;
}
header{
background:linear-gradient(90deg,#8b0000,#c62828);
color:#fff;
padding:15px;
text-align:center;
}
.nav{
display:flex;
background:#8b0000;
}
.nav button{
flex:1;
padding:12px;
border:none;
background:#8b0000;
color:#fff;
font-weight:bold;
cursor:pointer;
}
.nav button.active{
background:#c62828;
}
.section{
display:none;
padding:10px;
}
.section.active{
display:block;
}
.card{
background:#fff;
padding:22px 20px;
margin:16px 12px;
border-radius:16px;
box-shadow:0 4px 10px rgba(0,0,0,.15);
line-height:1.6;
}
.logo{
width:70%;
max-width:280px;
display:block;
margin:16px auto;
}
h2{color:#8b0000}
.data{margin:6px 0}
button.action{
background:#c62828;
color:#fff;
border:none;
padding:10px 15px;
border-radius:5px;
cursor:pointer;
margin-top:8px;
}
button.action:hover{background:#8b0000}
.alerta{
display:none;
background:#fdeaea;
border-left:6px solid #c62828;
padding:15px;
margin-top:12px;
font-weight:bold;
}
table{
width:100%;
border-collapse:collapse;
margin-top:10px;
}
th,td{
border:1px solid #ccc;
padding:6px;
text-align:center;
}
th{
background:#c62828;
color:#fff;
}
</style>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="./Phoenix Guardian_files/m=el_main_css"></head>
<body data-new-gr-c-s-check-loaded="14.1270.0" data-gr-ext-installed="">
<header>
<h1><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">🛡️ Phoenix Guardian 🔥</font></font></h1><img <img="" src="./Phoenix Guardian_files/freepik_23c11d8d-723a-469e-ae09-1d9d4a639e0a.png" alt="Phoenix Guardian" class="logo">
<p><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Environmental and vibration monitoring prototype</font></font></p>
</header>
<div class="nav">
<button class="active" onclick="mostrar(&#39;inicio&#39;,this)"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Start</font></font></button>
<button onclick="mostrar(&#39;sensores&#39;,this)"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Sensors</font></font></button>
<button onclick="mostrar(&#39;graficas&#39;,this)"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Graphics</font></font></button>
</div>
<!-- INICIO -->
<div id="inicio" class="section active">
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Project description</font></font></h2>
<p><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">
Guardian Phoenix is ​​a monitoring prototype designed for remote sites without electrical infrastructure. The system simulates physical sensors using the sensors of a mobile phone.
</font></font></p>
<p><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">
The device's battery represents the system's backup battery, while the connection to an electrical source simulates an active solar panel.
</font></font></p>
</div>
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Energy state</font></font></h2>
<p class="data"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">System battery: </font></font><span id="bat"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">100</font></font></span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;"> %</font></font></p>
<p class="data"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Power source: </font></font><span id="energia"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Active solar panel</font></font></span></p>
</div>
</div>
<!-- SENSORES -->
<div id="sensores" class="section">
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Environmental Sensor</font></font></h2>
<p class="data"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Temperature: </font></font><span id="temp"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">--</font></font></span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;"> °C</font></font></p>
<p class="data"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Humidity: </font></font><span id="hum"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">--</font></font></span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;"> %</font></font></p>
<p class="data"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Pressure: </font></font><span id="pres"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">--</font></font></span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;"> hPa</font></font></p>
<button class="action" onclick="clima()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Update weather</font></font></button>
<p id="errorClima" style="color:#b00000;font-size:0.85em;"></p>
</div>
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Vibration Sensor</font></font></h2>
<p class="data"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Vibration: </font></font><span id="vib"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">0.00</font></font></span></p>
<p class="data"><font dir="auto" style="vertical-align: inherit;"><span id="estado"><font dir="auto" style="vertical-align: inherit;">Steady</font></span><font dir="auto" style="vertical-align: inherit;"> state</font></font><span id="estado"><font dir="auto" style="vertical-align: inherit;"></font></span></p>
<button class="action" id="btnVib" onclick="toggleVibracion()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Activate sensor</font></font></button>
<div class="alerta" id="alerta"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">
🚨 Dangerous vibration detected</font></font><br><br>
<button class="action" onclick="alertar()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Alert nearby users</font></font></button>
</div>
</div>
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Records</font></font></h2>
<table>
<thead>
<tr>
<th><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Hour</font></font></th>
<th><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Temp</font></font></th>
<th><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Hum</font></font></th>
<th><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">President</font></font></th>
<th><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Event</font></font></th>
</tr>
</thead>
<tbody id="tabla"></tbody>
</table>
<button class="action" onclick="guardar()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Save record</font></font></button>
<button class="action" style="background:#555" onclick="borrarUltimo()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Delete last</font></font></button>
</div>
</div>
<!-- GRAFICAS -->
<div id="graficas" class="section">
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Humidity</font></font></h2>
<canvas id="gHum"></canvas>
</div>
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Temperature</font></font></h2>
<canvas id="gTemp"></canvas>
</div>
<div class="card">
<h2><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Pressure</font></font></h2>
<canvas id="gPres"></canvas>
</div>
</div>
<audio id="sonido" loop="">
<source src="https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg">
</audio>
<script>
const apiKey="729294e1fe04354f62449218961044b8";
let sensorActivo=false;
let alertaActiva=false;
let vibracion=0;
let charts={};
// Navegación
function mostrar(id,btn){
document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
document.querySelectorAll('.nav button').forEach(b=>b.classList.remove('active'));
document.getElementById(id).classList.add('active');
btn.classList.add('active');
actualizarGraficas();
}
// Batería y panel solar
if(navigator.getBattery){
navigator.getBattery().then(b=>{
function actualizar(){
bat.innerText=Math.round(b.level*100);
energia.innerText=b.charging?"Panel solar activo":"Batería de respaldo";
}
actualizar();
b.addEventListener("levelchange",actualizar);
b.addEventListener("chargingchange",actualizar);
});
}
// Clima
async function clima(){
errorClima.innerText="";
try{
const r=await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=25.6866&lon=-100.3161&appid=${apiKey}&units=metric`);
const d=await r.json();
temp.innerText=Math.round(d.main.temp);
hum.innerText=d.main.humidity;
pres.innerText=d.main.pressure;
}catch{
errorClima.innerText="No se pudo acceder al clima";
}
}
// Vibración
function toggleVibracion(){
if(!sensorActivo){
window.addEventListener("devicemotion",leerVibracion);
btnVib.innerText="Desactivar sensor";
}else{
window.removeEventListener("devicemotion",leerVibracion);
btnVib.innerText="Activar sensor";
}
sensorActivo=!sensorActivo;
}
function leerVibracion(e){
let x=e.accelerationIncludingGravity?.x||0;
let y=e.accelerationIncludingGravity?.y||0;
let z=e.accelerationIncludingGravity?.z||0;
vibracion=Math.sqrt(x*x+y*y+z*z).toFixed(2);
vib.innerText=vibracion;
if(vibracion>12 && !alertaActiva){
alertaActiva=true;
estado.innerText="Inestable";
alerta.style.display="block";
sonido.play();
}
}
function alertar(){
alerta.style.display="none";
sonido.pause();
sonido.currentTime=0;
estado.innerText="Alerta atendida";
alertaActiva=false;
alert("Usuarios cercanos alertados");
}
// Registros
function guardar(){
const r={
h:new Date().toLocaleTimeString(),
t:temp.innerText,
hu:hum.innerText,
p:pres.innerText,
e:estado.innerText
};
let d=JSON.parse(localStorage.getItem("reg"))||[];
d.push(r);
localStorage.setItem("reg",JSON.stringify(d));
cargarTabla();
actualizarGraficas();
}
function cargarTabla(){
tabla.innerHTML="";
(JSON.parse(localStorage.getItem("reg"))||[]).forEach(r=>{
tabla.innerHTML+=`
<tr>
<td>${r.h}</td>
<td>${r.t}</td>
<td>${r.hu}</td>
<td>${r.p}</td>
<td>${r.e}</td>
</tr>`;
});
}
cargarTabla();
function borrarUltimo(){
let d=JSON.parse(localStorage.getItem("reg"))||[];
d.pop();
localStorage.setItem("reg",JSON.stringify(d));
cargarTabla();
actualizarGraficas();
}
// Gráficas automáticas
function graf(id,label,data,color){
if(charts[id]) charts[id].destroy();
charts[id]=new Chart(document.getElementById(id),{
type:"line",
data:{
labels:data.map((_,i)=>i+1),
datasets:[{
label:label,
data:data,
borderColor:color,
backgroundColor:color+"33",
fill:true,
tension:0.3
}]
}
});
}
function actualizarGraficas(){
const d=JSON.parse(localStorage.getItem("reg"))||[];
graf("gHum","Humedad (%)",d.map(x=>x.hu),"#1976d2");
graf("gTemp","Temperatura (°C)",d.map(x=>x.t),"#d32f2f");
graf("gPres","Presión (hPa)",d.map(x=>x.p),"#388e3c");
}
</script><div id="goog-gt-tt" class="VIpgJd-yAWNEb-L7lbkb skiptranslate" style="border-radius: 12px; margin: 0 0 0 -23px; padding: 0; font-family: &#39;Google Sans&#39;, Arial, sans-serif;" data-id=""><div id="goog-gt-vt" class="VIpgJd-yAWNEb-hvhgNd"><div class="VIpgJd-yAWNEb-hvhgNd-Ud7fr"><img src="./Phoenix Guardian_files/24px.svg" width="24" height="24" alt=""><div class=" VIpgJd-yAWNEb-hvhgNd-IuizWc-i3jM8c " dir="ltr">Original text</div></div><div class="VIpgJd-yAWNEb-hvhgNd-k77Iif"><div id="goog-gt-original-text" class="VIpgJd-yAWNEb-nVMfcd-fmcmS VIpgJd-yAWNEb-hvhgNd-axAV1"></div></div><div class="VIpgJd-yAWNEb-hvhgNd-N7Eqid ltr"><div class="VIpgJd-yAWNEb-hvhgNd-N7Eqid-B7I4Od ltr" dir="ltr"><div class="VIpgJd-yAWNEb-hvhgNd-UTujCb">Rate this translation</div><div class="VIpgJd-yAWNEb-hvhgNd-eO9mKe">Your feedback will be used to help improve Google Translate</div></div><div class="VIpgJd-yAWNEb-hvhgNd-xgov5 ltr"><button id="goog-gt-thumbUpButton" type="button" class="VIpgJd-yAWNEb-hvhgNd-bgm6sf" title="Good translation" aria-label="Good translation" aria-pressed="false"><span id="goog-gt-thumbUpIcon"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M21 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 0S7.08 6.85 7 7H2v13h16c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2zM7 18H4V9h3v9zm14-7l-3 7H9V8l4.34-4.34L12 9h9v2z"></path></svg></span><span id="goog-gt-thumbUpIconFilled"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M21 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 0S7.08 6.85 7 7v13h11c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2zM5 7H1v13h4V7z"></path></svg></span></button><button id="goog-gt-thumbDownButton" type="button" class="VIpgJd-yAWNEb-hvhgNd-bgm6sf" title="Poor translation" aria-label="Poor translation" aria-pressed="false"><span id="goog-gt-thumbDownIcon"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M3 17h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 24s7.09-6.85 7.17-7h5V4H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2zM17 6h3v9h-3V6zM3 13l3-7h9v10l-4.34 4.34L12 15H3v-2z"></path></svg></span><span id="goog-gt-thumbDownIconFilled"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M3 17h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 24s7.09-6.85 7.17-7V4H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2zm16 0h4V4h-4v13z"></path></svg></span></button></div></div><div id="goog-gt-votingHiddenPane" class="VIpgJd-yAWNEb-hvhgNd-aXYTce"><form id="goog-gt-votingForm" action="https://translate.googleapis.com/translate_voting?client=te_lib" method="post" target="votingFrame" class="VIpgJd-yAWNEb-hvhgNd-aXYTce"><input type="text" name="sl" id="goog-gt-votingInputSrcLang"><input type="text" name="tl" id="goog-gt-votingInputTrgLang"><input type="text" name="query" id="goog-gt-votingInputSrcText"><input type="text" name="gtrans" id="goog-gt-votingInputTrgText"><input type="text" name="vote" id="goog-gt-votingInputVote"></form><iframe name="votingFrame" frameborder="0" src="./Phoenix Guardian_files/saved_resource.html"></iframe></div></div></div>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"><template shadowrootmode="open"><style>
div.grammarly-desktop-integration {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
div.grammarly-desktop-integration:before {
content: attr(data-content);
}
</style><div aria-label="grammarly-integration" role="group" tabindex="-1" class="grammarly-desktop-integration" data-content="{&quot;mode&quot;:&quot;full&quot;,&quot;isActive&quot;:true,&quot;isUserDisabled&quot;:false}"></div></template></grammarly-desktop-integration></html>
Reference in a new issue View git blame Copy permalink