Skip to content

Commit 6cfdbd0

Browse files
robotalehrobotaleh
committed
Añade contador de eventos para OBS
1 parent fa8d557 commit 6cfdbd0

2 files changed

Lines changed: 215 additions & 0 deletions

File tree

‎assets/img/timers/gorro.png‎

14.4 KB
Loading

‎timers/index.html‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<!doctype html>
2+
<html lang="es">
3+
4+
<head>
5+
<title>OPRobots - Empirismo y SAAAV sin límites</title>
6+
<!-- Required meta tags -->
7+
<meta charset="utf-8">
8+
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
10+
<!-- Favicon -->
11+
<link rel="apple-touch-icon" sizes="180x180" href="../assets/img/favicon/apple-touch-icon.png">
12+
<link rel="icon" type="image/png" sizes="32x32" href="../assets/img/favicon/favicon-32x32.png">
13+
<link rel="icon" type="image/png" sizes="16x16" href="../assets/img/favicon/favicon-16x16.png">
14+
<link rel="manifest" href="../assets/img/favicon/site.webmanifest">
15+
<link rel="mask-icon" href="../assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
16+
<link rel="shortcut icon" href="../assets/img/favicon/favicon.ico">
17+
<meta name="msapplication-TileColor" content="#2d89ef">
18+
<meta name="msapplication-config" content="../assets/img/favicon/browserconfig.xml">
19+
<meta name="theme-color" content="#ffffff">
20+
<!-- Fonts and icons -->
21+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
22+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
23+
<!-- Material Kit CSS -->
24+
<link href="../assets/css/material-kit.css?v=2.0.4" rel="stylesheet" />
25+
<style type="text/css">
26+
body {
27+
color: rgb(27, 23, 107);
28+
}
29+
30+
.title-container {
31+
32+
height: 85px;
33+
position: relative;
34+
/* background-color: red; */
35+
display: flex;
36+
align-items: center;
37+
}
38+
39+
img:is(:visible) + .title-container{
40+
margin-right: 70px;
41+
}
42+
43+
.title {
44+
color: rgb(27, 23, 107);
45+
font-size: 2em;
46+
font-weight: 800;
47+
line-height: 1;
48+
font-family: Arial, Helvetica, sans-serif;
49+
/* margin-right: 25px; */
50+
/* padding-right: 30px; */
51+
text-size-adjust: auto;
52+
}
53+
54+
.carousel {
55+
white-space: nowrap;
56+
overflow: hidden;
57+
white-space: nowrap;
58+
overflow: hidden;
59+
box-sizing: border-box;
60+
position: relative;
61+
62+
}
63+
64+
.carousel>span {
65+
display: inline-block;
66+
animation: move 5s ease-in-out infinite alternate;
67+
position: relative;
68+
padding-inline: 1rem;
69+
}
70+
71+
@keyframes move {
72+
5% {
73+
transform: translate(0, 0);
74+
left: 0%;
75+
}
76+
77+
95%,
78+
100% {
79+
transform: translate(-100%, 0);
80+
left: 100%;
81+
}
82+
}
83+
84+
.time {
85+
font-weight: bold;
86+
font-family: Arial, Helvetica, sans-serif;
87+
}
88+
89+
.time span {
90+
display: inline-block;
91+
margin-top: 4px;
92+
font-size: 0.75em;
93+
}
94+
95+
.time .col:not(:last-child) {
96+
position: relative;
97+
}
98+
99+
.time .col:not(:last-child)::after {
100+
content: '';
101+
height: 80%;
102+
width: 1px;
103+
104+
position: absolute;
105+
right: 0;
106+
top: 0;
107+
108+
background-color: rgba(27, 23, 107, 0.438);
109+
}
110+
111+
.number {
112+
font-size: 3em;
113+
}
114+
115+
.hat {
116+
position: absolute;
117+
top: 0;
118+
right: 0;
119+
width: 130px;
120+
z-index: 999;
121+
transform: scaleX(-1) rotate(-10deg);
122+
/* rotate 45deg */
123+
124+
}
125+
</style>
126+
</head>
127+
128+
<body>
129+
130+
<div class="container-fluid text-center">
131+
<div class="row">
132+
<div class="col">
133+
<img src="../assets/img/timers/gorro.png" class="hat" alt="">
134+
<div class="title-container mt-2 justify-content-center">
135+
<p class="title m-0"><span id="title">Micromouse Portugal 2025</span></p>
136+
</div>
137+
</div>
138+
</div>
139+
<div class="row time mt-2">
140+
<div class="col">
141+
<div id="days" class="number">00</div>
142+
<span>dias</span>
143+
</div>
144+
<div class="col">
145+
<div id="hours" class="number">00</div>
146+
<span>horas</span>
147+
</div>
148+
<div class="col">
149+
<div id="minutes" class="number">00</div>
150+
<span>minutos</span>
151+
</div>
152+
<div class="col">
153+
<div id="seconds" class="number">00.0</div>
154+
<span>segundos</span>
155+
</div>
156+
</div>
157+
158+
159+
160+
161+
</div>
162+
163+
<script>
164+
(function () {
165+
const urlParams = new URLSearchParams(window.location.search);
166+
const title = urlParams.get('title') || "Evento 2025";
167+
const date = urlParams.get('date') || "2025-01-01 00:00:00";
168+
const showHat = urlParams.get('hat') || 1;
169+
const carousel = urlParams.get('carousel') || 0;
170+
171+
document.getElementById("title").textContent = title;
172+
if (parseInt(showHat)) {
173+
document.querySelector('.hat').style.display = 'block';
174+
} else {
175+
document.querySelector('.hat').style.display = 'none';
176+
}
177+
if (parseInt(carousel)) {
178+
document.querySelector('.title').classList.add('carousel');
179+
} else {
180+
document.querySelector('.title').classList.remove('carousel');
181+
}
182+
183+
var countDownDate = new Date(date).getTime();
184+
185+
var x = setInterval(function () {
186+
187+
var now = new Date().getTime();
188+
189+
var distance = countDownDate - now;
190+
191+
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
192+
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
193+
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
194+
var seconds = (distance % (1000 * 60)) / 1000;
195+
196+
if (distance < 0) {
197+
clearInterval(x);
198+
days = 0;
199+
hours = 0;
200+
minutes = 0;
201+
seconds = 0;
202+
}
203+
204+
document.getElementById("days").textContent = String(days).padStart(2, '0');
205+
document.getElementById("hours").textContent = String(hours).padStart(2, '0');
206+
document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
207+
document.getElementById("seconds").textContent = String(seconds.toFixed(1)).padStart(4, '0');
208+
209+
}, 100);
210+
211+
})();
212+
</script>
213+
</body>
214+
215+
</html>

0 commit comments

Comments
 (0)