carlos/pollets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pollets

Browse Source
This commit is contained in:
Carlos Narro
2026-03-17 17:57:56 +01:00
parent 2ae32f8914
commit e1c15fe015
1 changed files with 246 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
public/index.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="ca">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pollets - Directo</title> <title>🐣 Els Nostres Pollets - En Directe!</title>
<script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script>
<style> <style>
* { * {
@@ -13,10 +13,40 @@
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Comic Sans MS', 'Chalkboard', cursive, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); background: linear-gradient(135deg, #87CEEB 0%, #98FB98 50%, #FFE4B5 100%);
min-height: 100vh; min-height: 100vh;
color: #fff; color: #4a4a4a;
}
.clouds {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: -1;
}
.cloud {
position: absolute;
background: rgba(255,255,255,0.8);
border-radius: 50%;
animation: floatCloud 20s infinite linear;
}
.cloud::before, .cloud::after {
content: '';
position: absolute;
background: inherit;
border-radius: 50%;
}
@keyframes floatCloud {
from { transform: translateX(-200px); }
to { transform: translateX(calc(100vw + 200px)); }
} }
.container { .container {
@@ -31,12 +61,18 @@
} }
h1 { h1 {
font-size: 2.5rem; font-size: 2.8rem;
margin-bottom: 10px; margin-bottom: 15px;
background: linear-gradient(90deg, #ff6b6b, #feca57); color: #FF6B35;
-webkit-background-clip: text; text-shadow: 3px 3px 0 #FFD93D, 5px 5px 0 rgba(0,0,0,0.1);
-webkit-text-fill-color: transparent; }
background-clip: text;
h2 {
font-size: 2rem;
color: #FF6B35;
text-align: center;
margin: 40px 0 30px;
text-shadow: 2px 2px 0 #FFD93D;
} }
.live-badge { .live-badge {
@@ -65,11 +101,12 @@
} }
.video-container { .video-container {
background: #000; background: #2d2d2d;
border-radius: 12px; border-radius: 20px;
overflow: hidden; overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
margin: 20px 0; margin: 20px 0;
border: 6px solid #FFD93D;
} }
#videoPlayer { #videoPlayer {
@@ -102,21 +139,108 @@
} }
.btn-primary { .btn-primary {
background: linear-gradient(90deg, #00b894, #00cec9); background: linear-gradient(90deg, #4CAF50, #8BC34A);
color: #fff; color: #fff;
border: 3px solid #388E3C;
font-size: 1.2rem;
} }
.btn-danger { .btn-danger {
background: linear-gradient(90deg, #e74c3c, #c0392b); background: linear-gradient(90deg, #FF5722, #FF9800);
color: #fff; color: #fff;
border: 3px solid #E64A19;
font-size: 1.2rem;
} }
.status { .status {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.7);
border-radius: 8px; border-radius: 15px;
margin-top: 20px; margin-top: 20px;
border: 3px dashed #FFD93D;
font-size: 1.1rem;
}
/* Cicle de vida del pollet */
.cicle-section {
background: rgba(255, 255, 255, 0.85);
border-radius: 25px;
padding: 30px;
margin: 40px 0;
border: 4px solid #8BC34A;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.cicle-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-top: 20px;
}
.cicle-step {
background: linear-gradient(135deg, #FFF9C4, #FFECB3);
border-radius: 20px;
padding: 20px;
text-align: center;
border: 3px solid #FFD93D;
transition: transform 0.3s;
position: relative;
}
.cicle-step:hover {
transform: scale(1.05);
}
.cicle-step .numero {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #FF6B35;
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
border: 3px solid white;
}
.cicle-step .emoji {
font-size: 4rem;
margin: 15px 0;
display: block;
}
.cicle-step h3 {
color: #5D4037;
margin: 10px 0;
font-size: 1.3rem;
}
.cicle-step p {
color: #6D4C41;
font-size: 1rem;
line-height: 1.5;
}
.arrow {
display: none;
}
@media (min-width: 900px) {
.arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #FF6B35;
}
} }
.status-indicator { .status-indicator {
@@ -156,16 +280,47 @@
footer { footer {
text-align: center; text-align: center;
padding: 30px; padding: 30px;
color: #888; color: #5D4037;
font-size: 0.9rem; font-size: 1rem;
background: rgba(255,255,255,0.5);
border-radius: 20px;
margin-top: 30px;
}
.fun-fact {
background: linear-gradient(135deg, #E1F5FE, #B3E5FC);
border-radius: 20px;
padding: 25px;
margin: 30px 0;
border: 3px solid #03A9F4;
text-align: center;
}
.fun-fact h3 {
color: #0277BD;
margin-bottom: 15px;
font-size: 1.4rem;
}
.fun-fact p {
color: #01579B;
font-size: 1.1rem;
line-height: 1.6;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="clouds">
<div class="cloud" style="width:80px;height:40px;top:10%;left:-100px;animation-delay:0s;"></div>
<div class="cloud" style="width:120px;height:50px;top:25%;left:-100px;animation-delay:5s;"></div>
<div class="cloud" style="width:60px;height:30px;top:5%;left:-100px;animation-delay:10s;"></div>
</div>
<div class="container"> <div class="container">
<header> <header>
<h1>🐔 Pollets en Directo</h1> <h1><EFBFBD> Els Nostres Pollets! 🐥</h1>
<span class="live-badge" id="liveBadge" style="display: none;">EN DIRECTO</span> <p style="font-size:1.3rem;color:#5D4037;">Mira com neixen i creixen els pollets en directe!</p>
<span class="live-badge" id="liveBadge" style="display: none;">📺 EN DIRECTE</span>
</header> </header>
<div class="video-container"> <div class="video-container">
@@ -173,17 +328,77 @@
</div> </div>
<div class="controls"> <div class="controls">
<button class="btn-primary" onclick="conectar()">▶️ Conectar</button> <button class="btn-primary" onclick="conectar()">▶️ Connectar</button>
<button class="btn-danger" onclick="desconectar()">⏹️ Desconectar</button> <button class="btn-danger" onclick="desconectar()">⏹️ Desconnectar</button>
</div> </div>
<div class="status"> <div class="status">
<span class="status-indicator offline" id="statusIndicator"></span> <span class="status-indicator offline" id="statusIndicator"></span>
<span id="statusText">Sin conexión - Pulsa "Conectar" para ver el directo</span> <span id="statusText">Sense connexió - Prem "Connectar" per veure el directe</span>
</div>
<!-- CICLE DE VIDA DEL POLLET -->
<section class="cicle-section">
<h2>🥚 El Cicle de Vida del Pollet 🐔</h2>
<p style="text-align:center;font-size:1.2rem;color:#5D4037;margin-bottom:20px;">
Descobreix com un ou es converteix en un pollet!
</p>
<div class="cicle-container">
<div class="cicle-step">
<span class="numero">1</span>
<span class="emoji">🥚</span>
<h3>L'Ou</h3>
<p>La gallina pon un ou fecundat. L'ou té tot el que el pollet necessita per créixer!</p>
</div>
<div class="cicle-step">
<span class="numero">2</span>
<span class="emoji">🪺</span>
<h3>La Incubació</h3>
<p>La gallina escalfa l'ou durant <strong>21 dies</strong>. La calor fa que el pollet es formi dins!</p>
</div>
<div class="cicle-step">
<span class="numero">3</span>
<span class="emoji">🐣</span>
<h3>L'Eclosió</h3>
<p>El pollet trenca la closca amb el seu "dent d'ou". Triga unes hores en sortir!</p>
</div>
<div class="cicle-step">
<span class="numero">4</span>
<span class="emoji">🐥</span>
<h3>El Pollet Nounat</h3>
<p>El pollet és petit i groc. Ja pot caminar i piular! Menja solo des del primer dia.</p>
</div>
<div class="cicle-step">
<span class="numero">5</span>
<span class="emoji">🐤</span>
<h3>El Pollet Creix</h3>
<p>Durant setmanes, el pollet creix i li surten plomes de veritat. Menja molt!</p>
</div>
<div class="cicle-step">
<span class="numero">6</span>
<span class="emoji">🐔</span>
<h3>Gallina o Gall</h3>
<p>Als 6 mesos ja és adult! Les gallines ponen ous i els galls fan "quiquiriquic"!</p>
</div>
</div>
</section>
<!-- DADES CURIOSES -->
<div class="fun-fact">
<h3>🌟 Sabies que...?</h3>
<p>Un pollet pot recordar la veu de la seva mare des de dins de l'ou!
<br>Els pollets piulen dins l'ou abans de néixer per comunicar-se amb la gallina! 🐣💬</p>
</div> </div>
<footer> <footer>
<p>Proyecto escolar - pollets.com.es</p> <p>🏫 Projecte Escolar - 3r de Primària</p>
<p>🌐 pollets.com.es</p>
</footer> </footer>
</div> </div>
@@ -225,17 +440,17 @@
flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail) => { flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail) => {
console.error('Error:', errorType, errorDetail); console.error('Error:', errorType, errorDetail);
actualizarEstado(false, 'Error de conexión - ¿Está el stream activo?'); actualizarEstado(false, '⚠️ Error de connexió - El directe està actiu?');
}); });
flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => { flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
actualizarEstado(false, 'Stream finalizado'); actualizarEstado(false, '📺 El directe ha acabat');
}); });
actualizarEstado(true, 'Conectado al directo'); actualizarEstado(true, '🎬 Connectat al directe!');
} else { } else {
alert('Tu navegador no soporta FLV. Prueba con Chrome o Firefox.'); alert('El teu navegador no suporta aquest vídeo. Prova amb Chrome o Firefox!');
} }
} }
@@ -247,7 +462,7 @@
flvPlayer.destroy(); flvPlayer.destroy();
flvPlayer = null; flvPlayer = null;
} }
actualizarEstado(false, 'Desconectado'); actualizarEstado(false, '🔌 Desconnectat');
} }
function actualizarEstado(online, mensaje) { function actualizarEstado(online, mensaje) {