From 1ad75a0cb19c0b9df7072a21a0ef89a0180407de Mon Sep 17 00:00:00 2001
From: Josue L <69768362+MXJosueDev@users.noreply.github.com>
Date: Mon, 16 Dec 2024 12:08:02 -0600
Subject: [PATCH] Initial commit
---
assets/css/style.css | 260 +++++++++++++++++++++++++++++++++++++++++
assets/js/lights.js | 36 ++++++
assets/js/snowflake.js | 16 +++
assets/js/timer.js | 32 +++++
index.html | 84 +++++++++++++
5 files changed, 428 insertions(+)
create mode 100644 assets/css/style.css
create mode 100644 assets/js/lights.js
create mode 100644 assets/js/snowflake.js
create mode 100644 assets/js/timer.js
create mode 100644 index.html
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..9d35d0f
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,260 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ --red: #de4332;
+ --green: #27ae60;
+ --yellow: #f1c40f;
+ --blue: #2980b9;
+
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+ overflow-x: hidden;
+}
+
+/* Wrapper */
+
+#wrapper {
+ background: radial-gradient(circle, rgba(236, 33, 57, 1) 0%, rgba(147, 41, 30, 1) 100%);
+
+ /* background: radial-gradient(circle, rgba(93, 93, 93, 1) 0%, rgba(49, 49, 49, 1) 100%); */
+
+ height: 100dvh;
+
+ padding: 0 0.5rem;
+
+ overflow: hidden;
+
+ display: flex;
+ flex-direction: column;
+
+ justify-content: space-between;
+ align-items: center;
+}
+
+/* Counter */
+
+#counter {
+ margin: auto;
+
+ max-width: 1100px;
+ width: 100%;
+
+ background: rgba(255, 255, 255, 0.2);
+
+ border-radius: 0.5rem;
+
+ padding: 1rem;
+
+ z-index: 1;
+}
+
+#counter h1 {
+ font-size: 4rem;
+ text-align: center;
+
+ color: #fff;
+
+ text-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.8);
+}
+
+#clock {
+ margin-top: 1rem;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0.8rem;
+
+ justify-content: space-around;
+ align-items: center;
+
+ font-size: 3rem;
+
+ text-align: center;
+}
+
+.clock-number {
+ flex: 1 1 100px;
+ min-width: 100px;
+}
+
+.clock-number>div:first-child {
+ padding: 0.3rem;
+ border-radius: 0.5rem;
+
+ box-shadow: 0 0 0.3rem 0.2rem rgba(255, 255, 255, 0.8);
+
+ background: #fff;
+}
+
+.clock-number>div:last-child {
+ margin-top: 0.5rem;
+ font-size: 1.2rem;
+}
+
+/* Lights */
+
+.lights {
+ width: 100%;
+
+ display: flex;
+
+ z-index: 1;
+}
+
+.light {
+ position: relative;
+
+ margin: 0 1px;
+
+ aspect-ratio: 1/1;
+
+ width: 100%;
+}
+
+.light::before {
+ position: absolute;
+
+ display: block;
+ content: '';
+
+ left: 50%;
+ transform: translateX(-50%);
+
+ width: 22%;
+ height: 50%;
+
+ margin: auto;
+}
+
+.lights#up>.light::before {
+ top: 0;
+
+ background: linear-gradient(180deg, rgba(49, 49, 49, 1) 0%, rgba(255, 255, 255, 1) 70%);
+}
+
+.lights#down>.light::before {
+ bottom: 0;
+
+ background: linear-gradient(0, rgba(49, 49, 49, 1) 0%, rgba(255, 255, 255, 1) 70%);
+}
+
+.light::after {
+ content: '';
+ display: block;
+
+ --light-color: #fff;
+ background: var(--light-color);
+
+ position: absolute;
+
+ top: 50%;
+ left: 50%;
+
+ transform: translate(-50%, -50%);
+
+ aspect-ratio: 1/1;
+ width: 80%;
+
+ border-radius: 50%;
+
+ animation: glow 1.5s infinite;
+}
+
+.light.red::after {
+ --light-color: var(--red);
+
+ animation-delay: 0s;
+}
+
+.light.yellow::after {
+ --light-color: var(--yellow);
+
+ animation-delay: 1s;
+}
+
+.light.green::after {
+ --light-color: var(--green);
+
+ animation-delay: 2s;
+}
+
+.light.blue::after {
+ --light-color: var(--blue);
+
+ animation-delay: 3s;
+}
+
+@keyframes glow {
+
+ 0%,
+ 100% {
+ box-shadow: none;
+ }
+
+ 50% {
+ box-shadow: 0 0 0.8rem 0.2rem var(--light-color);
+ }
+}
+
+/* Snowflake */
+
+.snowflake {
+ position: absolute;
+ top: -10px;
+ z-index: 0;
+ user-select: none;
+ pointer-events: none;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 1em;
+ will-change: transform;
+ animation: fall linear infinite;
+}
+
+@keyframes fall {
+ 0% {
+ transform: translateY(0);
+ }
+
+ 100% {
+ transform: translateY(100dvh);
+ }
+}
+
+/* Footer */
+
+footer {
+ height: 30vh;
+ color: white;
+ padding: 1rem;
+ text-align: center;
+ z-index: 1;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ gap: 0.5rem;
+
+ /*
+ background: #147d40;
+
+ background: rgb(20, 125, 64);
+ background: linear-gradient(180deg, rgba(20, 125, 64, 1) 0%, rgb(14, 164, 76) 100%); */
+
+ --s: 20px;
+ background: repeating-conic-gradient(from 45deg, #147d40 0 25%, #2e8b57 0 50%);
+ background-size: calc(2 * var(--s)) calc(2 * var(--s));
+}
+footer a {
+ color: white;
+ text-decoration: none;
+}
+
+footer a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/assets/js/lights.js b/assets/js/lights.js
new file mode 100644
index 0000000..edbfeb2
--- /dev/null
+++ b/assets/js/lights.js
@@ -0,0 +1,36 @@
+function changeLights() {
+ lightsWrapper = document.getElementsByClassName('lights');
+ screenSize = window.innerWidth;
+ lights = [];
+
+ colorOrder = ['red', 'green', 'blue', 'yellow'];
+
+ for (let i = 0; i < Math.floor(screenSize / 90); i++) {
+ let light = document.createElement('div');
+ light.classList.add('light');
+ light.classList.add(colorOrder[i % colorOrder.length]);
+
+ lights.push(light);
+ }
+
+ wrappers = [lightsWrapper.up, lightsWrapper.down];
+ wrappers.forEach(wrapper => {
+ wrapper.innerHTML = '';
+ });
+
+ lights.forEach(light => {
+ lightsWrapper.up.appendChild(light.cloneNode(true));
+ });
+
+ lights.reverse().forEach(light => {
+ lightsWrapper.down.appendChild(light.cloneNode(true));
+ });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ changeLights();
+
+ window.addEventListener('resize', () => {
+ changeLights();
+ });
+});
diff --git a/assets/js/snowflake.js b/assets/js/snowflake.js
new file mode 100644
index 0000000..55a3c9c
--- /dev/null
+++ b/assets/js/snowflake.js
@@ -0,0 +1,16 @@
+function createSnowflake() {
+ const snowflake = document.createElement('div');
+ snowflake.classList.add('snowflake');
+ snowflake.textContent = '❄';
+ snowflake.style.left = Math.random() * window.innerWidth + 'px';
+ snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
+ snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
+
+ document.getElementById('wrapper').appendChild(snowflake);
+
+ setTimeout(() => {
+ snowflake.remove();
+ }, 7 * 1000);
+}
+
+setInterval(createSnowflake, 350);
diff --git a/assets/js/timer.js b/assets/js/timer.js
new file mode 100644
index 0000000..7fc3faa
--- /dev/null
+++ b/assets/js/timer.js
@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', function () {
+ const days = document.getElementById('days');
+ const hours = document.getElementById('hours');
+ const minutes = document.getElementById('minutes');
+ const seconds = document.getElementById('seconds');
+
+ function countdown() {
+ const currentDate = new Date();
+ const eventDate = new Date(`${currentDate.getFullYear()}-12-25T00:00:00`);
+
+ if (eventDate < currentDate) {
+ // TODO:
+ console.log('Christmas has passed!');
+ return;
+ }
+
+ const totalSeconds = (eventDate - currentDate) / 1000;
+
+ const d = Math.floor(totalSeconds / 3600 / 24);
+ const h = Math.floor(totalSeconds / 3600) % 24;
+ const m = Math.floor(totalSeconds / 60) % 60;
+ const s = Math.floor(totalSeconds) % 60;
+
+ days.innerHTML = d < 10 ? '0' + d : d;
+ hours.innerHTML = h < 10 ? '0' + h : h;
+ minutes.innerHTML = m < 10 ? '0' + m : m;
+ seconds.innerHTML = s < 10 ? '0' + s : s;
+ }
+
+ countdown();
+ setInterval(countdown, 1000);
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..64c4920
--- /dev/null
+++ b/index.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+ Navidad
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Navidad
+
+
+
+
+
+
+
+
+
+
+ 00
+
+
+ Segundos
+
+
+
+
+
+
+