first commit
This commit is contained in:
Ronnie
commit
233796310d
4 changed files with 564 additions and 0 deletions
38
README.md
Normal file
38
README.md
Normal file
|
|
@ -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!
|
||||||
74
index.html
Normal file
74
index.html
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>TimelineCheck | Are You in the Right Timeline?</title>
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="https://images.icon-icons.com/580/PNG/512/News_icon-icons.com_54984.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="https://images.icon-icons.com/580/PNG/512/News_icon-icons.com_54984.png">
|
||||||
|
<link rel="apple-touch-icon" href="https://images.icon-icons.com/580/PNG/512/News_icon-icons.com_54984.png">
|
||||||
|
|
||||||
|
<!-- Theme Colors -->
|
||||||
|
<meta name="theme-color" content="#2c3e50">
|
||||||
|
<meta name="msapplication-navbutton-color" content="#2c3e50">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="#2c3e50">
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<meta name="title" content="TimelineCheck | Are You in the Right Timeline?">
|
||||||
|
<meta name="description" content="Check if you're in the right timeline with our timeline checker. Get instant timeline readings and discover if you're in the correct reality!">
|
||||||
|
<meta name="keywords" content="timeline checker, reality checker, timeline reading, reality reading, timeline test">
|
||||||
|
<meta name="author" content="TimelineCheck">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="language" content="English">
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Serif+Pro:wght@400;600&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- styles -->
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="newspaper">
|
||||||
|
<header class="newspaper-header">
|
||||||
|
<div class="newspaper-masthead">
|
||||||
|
<h1 class="newspaper-title">THE TIMELINE CHRONICLE</h1>
|
||||||
|
<div class="newspaper-date" id="current-date"></div>
|
||||||
|
</div>
|
||||||
|
<div class="newspaper-subtitle">"Your Daily Dose of Timeline Anomalies"</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="newspaper-content">
|
||||||
|
<div class="headline-section">
|
||||||
|
<h2 id="headline" class="headline">Click to Check Your Timeline</h2>
|
||||||
|
<div class="headline-decoration"></div>
|
||||||
|
<p id="subtext" class="subtext">Press the button below to discover if you're in the right timeline...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="newspaper-columns">
|
||||||
|
<div class="column">
|
||||||
|
<p class="newspaper-text">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.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="newspaper-text">Using cutting-edge quantum technology and advanced timeline detection algorithms, we ensure that every reading is precise and reliable.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="button-container">
|
||||||
|
<button id="checkButton" class="check-button">Check My Timeline</button>
|
||||||
|
<button id="shareButton" class="share-button">Share Timeline</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="newspaper-footer">
|
||||||
|
<div class="footer-text">© 2024 The Timeline Chronicle. All rights reserved.</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- scripts -->
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
213
script.js
Normal file
213
script.js
Normal file
|
|
@ -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);
|
||||||
239
styles.css
Normal file
239
styles.css
Normal file
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue