diff --git a/CNAME b/CNAME deleted file mode 100644 index 6523d8c..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -october.today \ No newline at end of file diff --git a/grid.svg b/grid.svg new file mode 100644 index 0000000..9285434 --- /dev/null +++ b/grid.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html index 9553449..a5b51d3 100644 --- a/index.html +++ b/index.html @@ -7,20 +7,25 @@ - + +
+

Today is

October ??th

-

2019

+

2019.

-

...because October 2019 never ended

+
- \ No newline at end of file diff --git a/script.js b/script.js index cdf1f1f..8b8489f 100644 --- a/script.js +++ b/script.js @@ -12,31 +12,73 @@ document.addEventListener('DOMContentLoaded', function() { // Add 1 because October 1 is the first day const octoberDay = diffDays + 1; - // Set the day in the HTML - document.getElementById('october-day').textContent = octoberDay; + // Animate the counter + const octoberDayElement = document.getElementById('october-day'); + const targetNumber = octoberDay; + + // Start from a lower number for animation + let currentNumber = Math.max(1, targetNumber - 50); + + // Set initial value + octoberDayElement.textContent = currentNumber; + + // Animate the number counting up + const counterAnimation = setInterval(() => { + currentNumber++; + octoberDayElement.textContent = currentNumber; + + if (currentNumber >= targetNumber) { + clearInterval(counterAnimation); + // Once animation is done, set the correct ordinal suffix + setOrdinalSuffix(targetNumber); + } + }, 30); // Set the correct ordinal suffix (st, nd, rd, th) - const ordinal = document.getElementById('ordinal'); - - if (octoberDay % 100 >= 11 && octoberDay % 100 <= 13) { - // Special case for 11th, 12th, 13th - ordinal.textContent = 'th'; - } else { - switch (octoberDay % 10) { - case 1: - ordinal.textContent = 'st'; - break; - case 2: - ordinal.textContent = 'nd'; - break; - case 3: - ordinal.textContent = 'rd'; - break; - default: - ordinal.textContent = 'th'; + function setOrdinalSuffix(number) { + const ordinal = document.getElementById('ordinal'); + + if (number % 100 >= 11 && number % 100 <= 13) { + // Special case for 11th, 12th, 13th + ordinal.textContent = 'th'; + } else { + switch (number % 10) { + case 1: + ordinal.textContent = 'st'; + break; + case 2: + ordinal.textContent = 'nd'; + break; + case 3: + ordinal.textContent = 'rd'; + break; + default: + ordinal.textContent = 'th'; + } } + + // Set the page title to include the current October day + document.title = `October ${number}${ordinal.textContent}, 2019`; + + // Setup SMS share button + setupShareButton(number, ordinal.textContent); } - // Set the page title to include the current October day - document.title = `October ${octoberDay}${ordinal.textContent}, 2019`; + // Setup SMS share button + function setupShareButton(dayNumber, ordinalSuffix) { + const shareButton = document.getElementById('share-button'); + + if (shareButton) { + shareButton.addEventListener('click', function() { + // Create the message: "happy october xxxxth" + const message = `happy october ${dayNumber}${ordinalSuffix}`; + + // Create SMS link with the message + const smsLink = `sms:?&body=${encodeURIComponent(message)}`; + + // Open the SMS app + window.open(smsLink, '_blank'); + }); + } + } }); \ No newline at end of file diff --git a/style.css b/style.css index b7575c3..da32307 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,87 @@ +:root { + /* Light mode variables */ + --background: hsl(200, 30%, 97%); + --foreground: hsl(200, 50%, 20%); + --card: hsla(0, 0%, 100%, 0.5); + --card-foreground: hsl(200, 50%, 20%); + --primary: hsl(200, 85%, 45%); + --primary-foreground: hsl(0, 0%, 100%); + --secondary: hsl(37, 95%, 58%); /* Amber/orange color */ + --secondary-foreground: hsl(200, 50%, 20%); + --muted: hsl(200, 30%, 96%); + --muted-foreground: hsl(200, 30%, 40%); + --accent: hsl(200, 85%, 45%); + --accent-foreground: hsl(0, 0%, 100%); + --border: hsla(200, 30%, 90%, 0.2); + --radius: 0.75rem; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: hsl(200, 30%, 8%); + --foreground: hsl(200, 20%, 96%); + --card: hsla(200, 25%, 15%, 0.4); + --card-foreground: hsl(200, 15%, 85%); + --primary: hsl(200, 70%, 40%); + --primary-foreground: hsl(0, 0%, 100%); + --secondary: hsl(37, 92%, 50%); /* Darker amber for dark mode */ + --secondary-foreground: hsl(200, 20%, 96%); + --muted: hsl(200, 30%, 20%); + --muted-foreground: hsl(200, 30%, 65%); + --accent: hsl(200, 70%, 40%); + --accent-foreground: hsl(0, 0%, 100%); + --border: hsla(200, 30%, 20%, 0.2); + } +} + * { margin: 0; padding: 0; box-sizing: border-box; + border-color: var(--border); + font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +} + +@keyframes gradient-move-1 { + 0% { + transform: translate(-50%, -50%) scale(1) rotate(0deg); + } + 25% { + transform: translate(-50%, -50%) scale(1.05) rotate(90deg); + } + 50% { + transform: translate(-50%, -50%) scale(0.95) rotate(180deg); + } + 75% { + transform: translate(-50%, -50%) scale(1.05) rotate(270deg); + } + 100% { + transform: translate(-50%, -50%) scale(1) rotate(360deg); + } +} + +@keyframes gradient-move-2 { + 0% { + transform: translate(-50%, -50%) scale(0.95) rotate(0deg); + } + 25% { + transform: translate(-50%, -50%) scale(1) rotate(-90deg); + } + 50% { + transform: translate(-50%, -50%) scale(1.05) rotate(-180deg); + } + 75% { + transform: translate(-50%, -50%) scale(1) rotate(-270deg); + } + 100% { + transform: translate(-50%, -50%) scale(0.95) rotate(-360deg); + } } body { - font-family: 'Poppins', sans-serif; - background-color: #ff7518; /* Pumpkin orange */ - color: #333; + font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background-color: var(--background); + color: var(--foreground); display: flex; flex-direction: column; justify-content: center; @@ -15,22 +89,87 @@ body { min-height: 100vh; text-align: center; padding: 20px; + position: relative; + overflow: hidden; + isolation: isolate; +} + +/* Dot grid background */ +body { + background-image: url('grid.svg'); + background-size: 20px 20px; + background-position: center; +} + +/* Spinning orb gradient */ +.orb { + position: fixed; + width: 120vmax; + height: 120vmax; + top: 50%; + left: 50%; + border-radius: 50%; + pointer-events: none; + z-index: -10; + will-change: transform; + filter: blur(40px); +} + +.orb.primary { + background: radial-gradient(circle, var(--primary) 0%, transparent 70%); + opacity: 0.4; + animation: gradient-move-1 30s ease-in-out infinite; } .container { - background-color: #fff; + background-color: var(--card); + color: var(--card-foreground); padding: 50px; - border-radius: 15px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + border-radius: var(--radius); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); max-width: 600px; width: 100%; margin-bottom: 30px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--border); + transition: all 0.3s ease; + position: relative; + overflow: hidden; + z-index: 10; +} + +.container::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + border-radius: inherit; + background: linear-gradient( + to bottom right, + transparent 0%, + rgba(255, 255, 255, 0.05) 50%, + transparent 100% + ); + opacity: 0; + transition: opacity 0.3s ease; +} + +.container:hover { + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); + transform: translateY(-5px); +} + +.container:hover::before { + opacity: 1; } h1 { font-size: 2rem; margin-bottom: 30px; - font-weight: 400; + font-weight: 500; + color: var(--foreground); + letter-spacing: -0.02em; } .date { @@ -40,27 +179,84 @@ h1 { h2 { font-size: 3.5rem; margin-bottom: 5px; + color: var(--foreground); + letter-spacing: -0.03em; } #october-day { font-weight: 700; - color: #ff7518; /* Pumpkin orange */ + color: var(--primary); + position: relative; + display: inline-block; +} + +#october-day::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 100%; + height: 3px; + background-color: var(--primary); + transform: scaleX(0); + transition: transform 0.3s ease; +} + +.container:hover #october-day::after { + transform: scaleX(1); } .year { font-size: 1.5rem; - opacity: 0.7; + color: var(--muted-foreground); + letter-spacing: -0.02em; } .subtitle { font-style: italic; margin-top: 20px; - opacity: 0.8; + color: var(--muted-foreground); } footer { - color: rgba(255, 255, 255, 0.8); + color: var(--muted-foreground); font-size: 0.9rem; + margin-top: 20px; + position: relative; + z-index: 10; +} + +.share-button { + display: inline-flex; + align-items: center; + gap: 8px; + background-color: var(--primary); + color: var(--primary-foreground); + border: none; + border-radius: var(--radius); + padding: 10px 16px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + margin-top: 24px; +} + +.share-button:hover { + opacity: 0.9; + transform: translateY(-2px); +} + +.share-button:active { + transform: translateY(0); +} + +.share-button svg { + transition: transform 0.2s ease; +} + +.share-button:hover svg { + transform: translateY(-2px); } @media (max-width: 600px) { @@ -75,4 +271,9 @@ footer { h2 { font-size: 2.5rem; } + + .share-button { + padding: 8px 14px; + font-size: 13px; + } } \ No newline at end of file