From 233796310d31b339394d9b6b5382983a9567346c Mon Sep 17 00:00:00 2001 From: Ronnie Date: Mon, 26 May 2025 21:09:32 -0400 Subject: [PATCH] first commit --- README.md | 38 +++++++++ index.html | 74 +++++++++++++++++ script.js | 213 +++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 239 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 564 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..7dd0ba9 --- /dev/null +++ b/README.md @@ -0,0 +1,38 @@ +# TimelineCheck + +A fun web application that generates random timeline anomalies and parallel universe scenarios in a newspaper-style format. Check if you're in the right timeline and share your findings with others! + +## Features + +- Generates random timeline anomaly headlines +- Newspaper-style layout with classic typography +- Share functionality to copy timeline readings +- Responsive design for all devices +- Dynamic date and year updates + +## How to Use + +1. Open `index.html` in your web browser +2. Click "Check My Timeline" to generate a random timeline reading +3. Click "Share Timeline" to copy a shareable link +4. Share the link with others to show them your timeline reading + +## Technologies Used + +- HTML5 +- CSS3 +- JavaScript (Vanilla) +- Google Fonts (Playfair Display & Source Serif Pro) + +## Local Development + +Simply clone the repository and open `index.html` in your browser. No build process or dependencies required! + +```bash +git clone https://github.com/Ronniie/TimelineCheck.git +cd TimelineCheck +``` + +## License + +MIT License - Feel free to use and modify as you wish! \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..94c6feb --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + TimelineCheck | Are You in the Right Timeline? + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+

THE TIMELINE CHRONICLE

+
+
+
"Your Daily Dose of Timeline Anomalies"
+
+ +
+
+

Click to Check Your Timeline

+
+

Press the button below to discover if you're in the right timeline...

+
+ +
+
+

In a world where timelines constantly shift and reality bends, our expert timeline analysts work tirelessly to bring you the most accurate readings of your current reality.

+
+
+

Using cutting-edge quantum technology and advanced timeline detection algorithms, we ensure that every reading is precise and reliable.

+
+
+ +
+ + +
+
+ +
+
© 2024 The Timeline Chronicle. All rights reserved.
+
+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b162de1 --- /dev/null +++ b/script.js @@ -0,0 +1,213 @@ +// Arrays of random headlines and subtexts +const headlines = [ + "BREAKING: Cats Now Speak Fluent French in Timeline 42", + "Scientists Discover That Trees Have Been Secretly Dancing at Night", + "Local Man Claims to Remember the Timeline Where Pizza Was a Vegetable", + "BREAKING: Dolphins Elected to Congress in Parallel Universe", + "Timeline Anomaly: Gravity Works Sideways on Tuesdays", + "BREAKING: Clouds Found to Be Made of Cotton Candy in This Reality", + "Scientists Confirm: Dreams Are Actually Just TV Shows from Other Timelines", + "BREAKING: Time Travelers Union Announces Strike", + "Local Man Discovers His Shadow Has a Different Personality", + "BREAKING: Moon Confirmed to Be Made of Cheese in This Timeline", + "BREAKING: Parallel Universe Where Coffee Makes You Sleepy Discovered", + "Timeline Experts Baffled by Reality Where Weekends Last 5 Days", + "BREAKING: In This Timeline, Plants Have Started Writing Poetry", + "Scientists Find Universe Where Rain Falls Upward", + "BREAKING: Local Man's Pet Rock Elected Mayor in Alternate Reality", + "Timeline Anomaly: In This Reality, Computers Run on Lemonade", + "BREAKING: Parallel Universe Where Silence is Actually Loud Discovered", + "Scientists Confirm: In This Timeline, Time Moves Backwards on Thursdays", + "BREAKING: Reality Where Socks Never Get Lost Found", + "Timeline Experts Stunned by Universe Where Gravity is Optional", + "BREAKING: Parallel World Where Traffic Lights Show Emojis Discovered", + "Scientists Find Timeline Where Internet Runs on Snail Power", + "BREAKING: Reality Where Pizza Delivery is Instantaneous Confirmed", + "Timeline Anomaly: In This Universe, Clouds are Made of Marshmallows", + "BREAKING: Parallel World Where Everyone Speaks in Rhyme Found", + "Scientists Discover Timeline Where Weekends Last Forever", + "BREAKING: Reality Where Coffee Grows on Trees Confirmed", + "Timeline Experts Baffled by Universe Where Time Stands Still", + "BREAKING: Parallel World Where Rainbows are Square Discovered", + "Scientists Find Timeline Where Dreams are Broadcast on TV", + "BREAKING: Reality Where Internet Never Crashes Confirmed", + "Timeline Anomaly: In This Universe, Books Read Themselves", + "BREAKING: Parallel World Where Traffic Jams Don't Exist Found", + "Scientists Discover Timeline Where Weekdays are Optional", + "BREAKING: Reality Where Coffee is Always the Perfect Temperature", + "Timeline Experts Stunned by Universe Where Time is Currency", + "BREAKING: Parallel World Where Emails Write Themselves Discovered", + "Scientists Find Timeline Where Internet is Powered by Happiness", + "BREAKING: Reality Where Weekends Last 7 Days Confirmed", + "Timeline Anomaly: In This Universe, Clouds are WiFi Hotspots", + "BREAKING: Parallel World Where Traffic Lights Show Memes Found", + "Scientists Discover Timeline Where Time Moves in Circles", + "BREAKING: Reality Where Coffee Never Gets Cold Confirmed", + "Timeline Experts Baffled by Universe Where Time is Edible", + "BREAKING: Parallel World Where Emails Sort Themselves Discovered", + "Scientists Find Timeline Where Internet is Powered by Dreams", + "BREAKING: Reality Where Weekends are 72 Hours Long Confirmed", + "Timeline Anomaly: In This Universe, Books are Written by AI", + "BREAKING: Parallel World Where Traffic is Always Green Found", + "Scientists Discover Timeline Where Time is a Physical Object" +]; + +const subtexts = [ + "Experts are baffled by this timeline's peculiar characteristics.", + "This timeline appears to be slightly more absurd than the standard one.", + "Quantum physicists are having a field day with these readings.", + "The timeline seems to be operating on a different set of physics.", + "Reality checks indicate we're in a particularly interesting timeline.", + "Timeline analysis suggests we're in a parallel universe.", + "The laws of physics seem to be taking a coffee break in this timeline.", + "This timeline appears to be running on a different version of reality.", + "Quantum fluctuations suggest we're in a particularly unusual timeline.", + "Timeline diagnostics indicate we're in a reality with extra features.", + "Reality distortion levels are off the charts in this timeline.", + "Quantum entanglement readings show unusual patterns.", + "Timeline stability metrics indicate we're in a unique reality.", + "Parallel universe experts are scratching their heads at these readings.", + "Reality checks confirm we're in a particularly quirky timeline.", + "Timeline analysis reveals unusual quantum fluctuations.", + "The fabric of reality seems to be particularly flexible here.", + "Quantum physicists report unprecedented timeline anomalies.", + "Reality distortion field readings are through the roof.", + "Timeline stability indicators suggest we're in a special universe.", + "Quantum entanglement patterns show remarkable variations.", + "Reality checks confirm we're in a timeline with extra features.", + "Timeline analysis reveals quantum-level peculiarities.", + "The laws of physics appear to be on vacation in this timeline.", + "Quantum fluctuations indicate we're in a unique reality.", + "Reality distortion metrics are showing unusual patterns.", + "Timeline stability readings suggest we're in a parallel universe.", + "Quantum physicists are amazed by these timeline readings.", + "Reality checks indicate we're in a particularly interesting timeline.", + "Timeline analysis shows quantum-level anomalies.", + "The fabric of reality seems to be particularly stretchy here.", + "Quantum entanglement readings are off the charts.", + "Reality distortion field analysis reveals unique patterns.", + "Timeline stability indicators suggest we're in a special reality.", + "Quantum physicists are having trouble explaining these readings.", + "Reality checks confirm we're in a timeline with unusual features.", + "Timeline analysis reveals quantum-level peculiarities.", + "The laws of physics seem to be particularly flexible here.", + "Quantum fluctuations indicate we're in a unique universe.", + "Reality distortion metrics are showing remarkable patterns.", + "Timeline stability readings suggest we're in a parallel reality.", + "Quantum physicists are puzzled by these timeline readings.", + "Reality checks indicate we're in a particularly unusual timeline.", + "Timeline analysis shows quantum-level anomalies.", + "The fabric of reality appears to be particularly elastic here.", + "Quantum entanglement readings reveal unique patterns.", + "Reality distortion field analysis suggests we're in a special timeline.", + "Timeline stability indicators show quantum-level peculiarities.", + "Quantum physicists are amazed by these reality readings.", + "Reality checks confirm we're in a timeline with extra features." +]; + +// Get DOM elements +const headlineElement = document.getElementById('headline'); +const subtextElement = document.getElementById('subtext'); +const checkButton = document.getElementById('checkButton'); +const shareButton = document.getElementById('shareButton'); +const currentDateElement = document.getElementById('current-date'); +const footerYearElement = document.querySelector('.footer-text'); + +// Set current date and year +function updateDate() { + const now = new Date(); + const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + currentDateElement.textContent = now.toLocaleDateString('en-US', options); + + // Update copyright year + const currentYear = now.getFullYear(); + footerYearElement.textContent = `© ${currentYear} The Timeline Chronicle. All rights reserved.`; +} + +// Create notification element +const notification = document.createElement('div'); +notification.className = 'copy-notification'; +notification.textContent = 'URL copied to clipboard!'; +document.body.appendChild(notification); + +// Function to show notification +function showNotification() { + notification.classList.add('show'); + setTimeout(() => { + notification.classList.remove('show'); + }, 2000); +} + +// Function to copy text to clipboard +async function copyToClipboard(text) { + try { + await navigator.clipboard.writeText(text); + showNotification(); + } catch (err) { + console.error('Failed to copy text: ', err); + } +} + +// Function to generate share URL +function generateShareURL(headline, subtext) { + const baseUrl = window.location.href.split('?')[0]; + const params = new URLSearchParams({ + headline: encodeURIComponent(headline), + subtext: encodeURIComponent(subtext), + date: encodeURIComponent(currentDateElement.textContent) + }); + return `${baseUrl}?${params.toString()}`; +} + +// Function to handle sharing +function shareTimeline() { + const headline = headlineElement.textContent; + const subtext = subtextElement.textContent; + const shareUrl = generateShareURL(headline, subtext); + copyToClipboard(shareUrl); +} + +// Function to load timeline from URL parameters +function loadFromURL() { + const params = new URLSearchParams(window.location.search); + const headline = params.get('headline'); + const subtext = params.get('subtext'); + const date = params.get('date'); + + if (headline && subtext) { + headlineElement.textContent = decodeURIComponent(headline); + subtextElement.textContent = decodeURIComponent(subtext); + if (date) { + currentDateElement.textContent = decodeURIComponent(date); + } + headlineElement.classList.add('changed'); + } +} + +// Generate random timeline check +function checkTimeline() { + // Remove previous animation class + headlineElement.classList.remove('changed'); + + // Force reflow + void headlineElement.offsetWidth; + + // Add animation class + headlineElement.classList.add('changed'); + + // Get random headline and subtext + const randomHeadline = headlines[Math.floor(Math.random() * headlines.length)]; + const randomSubtext = subtexts[Math.floor(Math.random() * subtexts.length)]; + + // Update the content + headlineElement.textContent = randomHeadline; + subtextElement.textContent = randomSubtext; +} + +// Initialize +updateDate(); +loadFromURL(); + +// Add event listeners +checkButton.addEventListener('click', checkTimeline); +shareButton.addEventListener('click', shareTimeline); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0c88a44 --- /dev/null +++ b/styles.css @@ -0,0 +1,239 @@ +/* reset some default browser styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* main page styles */ +body { + font-family: 'Source Serif Pro', serif; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: #f4f4f4; + padding: 2rem; + color: #333; +} + +.container { + max-width: 1000px; + width: 100%; +} + +.newspaper { + background-color: #fff; + padding: 2rem; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + border: 1px solid #ddd; + position: relative; +} + +/* Newspaper Header Styles */ +.newspaper-header { + text-align: center; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 2px solid #000; +} + +.newspaper-masthead { + margin-bottom: 0.5rem; +} + +.newspaper-title { + font-family: 'Playfair Display', serif; + font-size: 3.5rem; + font-weight: 900; + letter-spacing: 2px; + margin-bottom: 0.5rem; + line-height: 1.1; +} + +.newspaper-subtitle { + font-family: 'Playfair Display', serif; + font-style: italic; + font-size: 1.2rem; + color: #666; + margin-bottom: 0.5rem; +} + +.newspaper-date { + font-family: 'Source Serif Pro', serif; + font-style: italic; + color: #666; + font-size: 1.1rem; +} + +/* Newspaper Content Styles */ +.newspaper-content { + margin-bottom: 2rem; +} + +.headline-section { + text-align: center; + margin-bottom: 2rem; + padding: 1rem; + background-color: #f9f9f9; + border: 1px solid #eee; +} + +.headline { + font-family: 'Playfair Display', serif; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.3; + color: #000; +} + +.headline-decoration { + width: 100px; + height: 2px; + background-color: #000; + margin: 1rem auto; +} + +.subtext { + font-size: 1.2rem; + color: #444; + line-height: 1.6; + font-style: italic; +} + +.newspaper-columns { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + margin: 2rem 0; + padding: 0 1rem; +} + +.column { + text-align: justify; +} + +.newspaper-text { + font-size: 1.1rem; + line-height: 1.8; + color: #333; + margin-bottom: 1rem; +} + +/* Button Styles */ +.button-container { + display: flex; + gap: 1rem; + justify-content: center; + margin: 2rem 0; +} + +.check-button, .share-button { + padding: 1rem 2rem; + font-size: 1.2rem; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; + font-family: 'Source Serif Pro', serif; + text-transform: uppercase; + letter-spacing: 1px; +} + +.check-button { + background-color: #2c3e50; +} + +.share-button { + background-color: #27ae60; +} + +.check-button:hover { + background-color: #34495e; + transform: translateY(-2px); +} + +.share-button:hover { + background-color: #2ecc71; + transform: translateY(-2px); +} + +.check-button:active, .share-button:active { + transform: translateY(0); +} + +/* Footer Styles */ +.newspaper-footer { + text-align: center; + padding-top: 1rem; + border-top: 1px solid #ddd; + color: #666; + font-size: 0.9rem; +} + +/* Copy Notification */ +.copy-notification { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background-color: #2c3e50; + color: white; + padding: 1rem 2rem; + border-radius: 4px; + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1000; + font-family: 'Source Serif Pro', serif; +} + +.copy-notification.show { + opacity: 1; +} + +/* Animation for headline changes */ +@keyframes headlineChange { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } +} + +.headline.changed { + animation: headlineChange 0.5s ease; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .newspaper { + padding: 1rem; + } + + .newspaper-title { + font-size: 2.5rem; + } + + .newspaper-columns { + grid-template-columns: 1fr; + gap: 1rem; + } + + .headline { + font-size: 2rem; + } + + .button-container { + flex-direction: column; + } + + .check-button, .share-button { + width: 100%; + } +} \ No newline at end of file