commit 2979763af9b9aaad5bb91e735f6a96163b825241
Author: ffff:100.42.28.19 <ffff:100.42.28.19@hub.scroll.pub>
Date: 2024-12-28 10:05:48 +0000
Subject: Reverted to 19c418b2778e1634b2798fe80a544fcbf68f765d
diff --git a/.log.txt b/.log.txt
new file mode 100644
index 0000000..56c8411
--- /dev/null
+++ b/.log.txt
@@ -0,0 +1,24 @@
+read topnews.scroll.pub https://hub.scroll.pub/edit.html?folderName=topnews.scroll.pub 1735376859975 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/ls.json?folderName=topnews.scroll.pub 1735376860567 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Findex.scroll 1735376860733 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub http://topnews.scroll.pub/index.html 1735376872023 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub http://topnews.scroll.pub/style.css 1735376872215 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub http://topnews.scroll.pub/script.js 1735376872219 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub http://topnews.scroll.pub/favicon.ico 1735376872407 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Freadme.scroll 1735376961588 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Fbody.html 1735376965822 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Findex.html 1735377013129 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Fprompt.json 1735377042143 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Fscript.js 1735377055024 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Fstyle.css 1735377064617 ::ffff:86.80.112.2 0.0 200 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Freadme.scroll 1735377198768 ::ffff:86.80.112.2 0.0 304 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Findex.scroll 1735377201850 ::ffff:86.80.112.2 0.0 304 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Fbody.html 1735377206244 ::ffff:86.80.112.2 0.0 304 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Fstyle.css 1735377245425 ::ffff:86.80.112.2 0.0 304 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=topnews.scroll.pub&filePath=topnews.scroll.pub%2Fbody.html 1735377389985 ::ffff:86.80.112.2 0.0 304 Chrome.131 MacOSX.10.15.7
+read topnews.scroll.pub http://topnews.scroll.pub/ 1735378362323 ::ffff:138.2.81.57 0.0 200 Chrome.131 WindowsNT.10.0
+read topnews.scroll.pub http://topnews.scroll.pub/style.css 1735378362868 ::ffff:138.2.81.57 0.0 200 Chrome.131 WindowsNT.10.0
+read topnews.scroll.pub http://topnews.scroll.pub/script.js 1735378362893 ::ffff:138.2.81.57 0.0 200 Chrome.131 WindowsNT.10.0
+read topnews.scroll.pub http://topnews.scroll.pub/script.js 1735378363438 ::ffff:138.2.81.57 0.0 200 Chrome.131 WindowsNT.10.0
+read topnews.scroll.pub http://topnews.scroll.pub/favicon.ico 1735378364444 ::ffff:138.2.81.57 0.0 200 Chrome.131 WindowsNT.10.0
+read topnews.scroll.pub https://hub.scroll.pub/diffs.htm/topnews.scroll.pub 1735380337150 ::ffff:100.42.28.19 0.0 200 Firefox.133 WindowsNT.10.0
diff --git a/.stats.json b/.stats.json
new file mode 100644
index 0000000..9925702
--- /dev/null
+++ b/.stats.json
@@ -0,0 +1,21 @@
+{
+ "files": [
+ "body.html",
+ "index.scroll",
+ "prompt.json",
+ "readme.scroll",
+ "script.js",
+ "style.css"
+ ],
+ "hasSslCert": false,
+ "stats": {
+ "folder": "topnews.scroll.pub",
+ "folderLink": "http://topnews.scroll.pub",
+ "created": "2024-12-28T09:07:38.000Z",
+ "revised": "2024-12-28T09:07:38.000Z",
+ "files": 6,
+ "mb": 1,
+ "revisions": 1,
+ "hash": "19c418b277"
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fc926b9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Global Pulse | Top World Stories</title>
+ <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script>
+ <style>@media print {.doNotPrint {display: none !important;}}</style>
+ <link rel="canonical" href="https://topnews.scroll.pub/index.html">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <meta name="description" content="">
+ <meta name="generator" content="Scroll v164.7.0">
+ <meta property="og:title" content="Global Pulse | Top World Stories">
+ <meta property="og:description" content="">
+ <meta property="og:image" content="">
+
+ <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll">
+
+ <meta name="twitter:card" content="summary_large_image">
+</head>
+<body>
+<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a>
+<link rel="stylesheet" type="text/css" href="style.css">
+<header>
+ <nav>
+ <div class="logo">Global Pulse</div>
+ <div class="date" id="currentDate"></div>
+ </nav>
+</header>
+
+<main>
+ <h1>Today's Top Stories</h1>
+
+ <div class="news-grid">
+ <article class="news-card" id="story1">
+ <div class="image-container">
+ <div class="placeholder-image"></div>
+ </div>
+ <div class="content">
+ <span class="category">World</span>
+ <h2>Loading...</h2>
+ <p class="summary">Please wait while we fetch the latest news...</p>
+ <time class="timestamp"></time>
+ </div>
+ </article>
+
+ <article class="news-card" id="story2">
+ <div class="image-container">
+ <div class="placeholder-image"></div>
+ </div>
+ <div class="content">
+ <span class="category">World</span>
+ <h2>Loading...</h2>
+ <p class="summary">Please wait while we fetch the latest news...</p>
+ <time class="timestamp"></time>
+ </div>
+ </article>
+
+ <article class="news-card" id="story3">
+ <div class="image-container">
+ <div class="placeholder-image"></div>
+ </div>
+ <div class="content">
+ <span class="category">World</span>
+ <h2>Loading...</h2>
+ <p class="summary">Please wait while we fetch the latest news...</p>
+ <time class="timestamp"></time>
+ </div>
+ </article>
+ </div>
+</main>
+
+<footer>
+ <p>Global Pulse - Bringing you the world's most important stories</p>
+ <nav>
+ <a href="/about">About</a>
+ <a href="/contact">Contact</a>
+ <a href="/privacy">Privacy</a>
+ </nav>
+</footer>
+
+<script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
commit 19c418b2778e1634b2798fe80a544fcbf68f765d
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 09:07:38 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..5690fcc
--- /dev/null
+++ b/body.html
@@ -0,0 +1,57 @@
+<header>
+ <nav>
+ <div class="logo">Global Pulse</div>
+ <div class="date" id="currentDate"></div>
+ </nav>
+</header>
+
+<main>
+ <h1>Today's Top Stories</h1>
+
+ <div class="news-grid">
+ <article class="news-card" id="story1">
+ <div class="image-container">
+ <div class="placeholder-image"></div>
+ </div>
+ <div class="content">
+ <span class="category">World</span>
+ <h2>Loading...</h2>
+ <p class="summary">Please wait while we fetch the latest news...</p>
+ <time class="timestamp"></time>
+ </div>
+ </article>
+
+ <article class="news-card" id="story2">
+ <div class="image-container">
+ <div class="placeholder-image"></div>
+ </div>
+ <div class="content">
+ <span class="category">World</span>
+ <h2>Loading...</h2>
+ <p class="summary">Please wait while we fetch the latest news...</p>
+ <time class="timestamp"></time>
+ </div>
+ </article>
+
+ <article class="news-card" id="story3">
+ <div class="image-container">
+ <div class="placeholder-image"></div>
+ </div>
+ <div class="content">
+ <span class="category">World</span>
+ <h2>Loading...</h2>
+ <p class="summary">Please wait while we fetch the latest news...</p>
+ <time class="timestamp"></time>
+ </div>
+ </article>
+ </div>
+</main>
+
+<footer>
+ <p>Global Pulse - Bringing you the world's most important stories</p>
+ <nav>
+ <a href="/about">About</a>
+ <a href="/contact">Contact</a>
+ <a href="/privacy">Privacy</a>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..3a7bb16
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://topnews.scroll.pub
+metaTags
+ description "Stay informed with the top 3 most important world news stories, updated daily with stunning visuals"
+ keywords "world news, top stories, breaking news, global news, current events"
+editButton /edit.html
+title Global Pulse | Top World Stories
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..6e59d36
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_0145tXFo2D2ejZn2udMsg7dV",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a news website focusing on the top 3 world stories:\n\n---domain---\ntopnews.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://topnews.scroll.pub\nmetaTags\n description \"Stay informed with the top 3 most important world news stories, updated daily with stunning visuals\"\n keywords \"world news, top stories, breaking news, global news, current events\"\neditButton /edit.html\ntitle Global Pulse | Top World Stories\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Global Pulse</div>\n <div class=\"date\" id=\"currentDate\"></div>\n </nav>\n</header>\n\n<main>\n <h1>Today's Top Stories</h1>\n \n <div class=\"news-grid\">\n <article class=\"news-card\" id=\"story1\">\n <div class=\"image-container\">\n <div class=\"placeholder-image\"></div>\n </div>\n <div class=\"content\">\n <span class=\"category\">World</span>\n <h2>Loading...</h2>\n <p class=\"summary\">Please wait while we fetch the latest news...</p>\n <time class=\"timestamp\"></time>\n </div>\n </article>\n\n <article class=\"news-card\" id=\"story2\">\n <div class=\"image-container\">\n <div class=\"placeholder-image\"></div>\n </div>\n <div class=\"content\">\n <span class=\"category\">World</span>\n <h2>Loading...</h2>\n <p class=\"summary\">Please wait while we fetch the latest news...</p>\n <time class=\"timestamp\"></time>\n </div>\n </article>\n\n <article class=\"news-card\" id=\"story3\">\n <div class=\"image-container\">\n <div class=\"placeholder-image\"></div>\n </div>\n <div class=\"content\">\n <span class=\"category\">World</span>\n <h2>Loading...</h2>\n <p class=\"summary\">Please wait while we fetch the latest news...</p>\n <time class=\"timestamp\"></time>\n </div>\n </article>\n </div>\n</main>\n\n<footer>\n <p>Global Pulse - Bringing you the world's most important stories</p>\n <nav>\n <a href=\"/about\">About</a>\n <a href=\"/contact\">Contact</a>\n <a href=\"/privacy\">Privacy</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --text-color: #2c3e50;\n --background-color: #f5f6fa;\n --card-background: #ffffff;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 1rem;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n letter-spacing: 1px;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 2rem;\n color: var(--primary-color);\n text-align: center;\n}\n\n.news-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.news-card {\n background: var(--card-background);\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 30px rgba(0,0,0,0.15);\n}\n\n.image-container {\n height: 200px;\n overflow: hidden;\n}\n\n.placeholder-image {\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, #e0e0e0, #f5f5f5);\n animation: pulse 2s infinite;\n}\n\n.content {\n padding: 1.5rem;\n}\n\n.category {\n display: inline-block;\n background: var(--accent-color);\n color: white;\n padding: 0.3rem 0.8rem;\n border-radius: 20px;\n font-size: 0.8rem;\n margin-bottom: 1rem;\n}\n\nh2 {\n font-size: 1.4rem;\n margin-bottom: 1rem;\n line-height: 1.4;\n}\n\n.summary {\n color: #666;\n margin-bottom: 1rem;\n}\n\n.timestamp {\n color: #888;\n font-size: 0.9rem;\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n margin-top: 4rem;\n text-align: center;\n}\n\nfooter nav {\n margin-top: 1rem;\n}\n\nfooter a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n transition: var(--transition);\n}\n\nfooter a:hover {\n color: var(--accent-color);\n}\n\n@keyframes pulse {\n 0% { opacity: 0.6; }\n 50% { opacity: 1; }\n 100% { opacity: 0.6; }\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .news-grid {\n grid-template-columns: 1fr;\n }\n \n .image-container {\n height: 180px;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Set current date\n const dateElement = document.getElementById('currentDate');\n const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };\n dateElement.textContent = new Date().toLocaleDateString(undefined, options);\n\n // Simulate loading news data (in a real application, this would fetch from an API)\n const mockNews = [\n {\n category: 'World',\n title: 'Historic Climate Agreement Reached at Global Summit',\n summary: 'World leaders have unanimously agreed to ambitious new targets for reducing carbon emissions in a groundbreaking climate accord.',\n timestamp: '2 hours ago',\n image: 'linear-gradient(45deg, #43cea2, #185a9d)'\n },\n {\n category: 'Technology',\n title: 'Breakthrough in Quantum Computing Achieves New Milestone',\n summary: 'Scientists announce successful demonstration of quantum supremacy with a new 1000-qubit processor.',\n timestamp: '4 hours ago',\n image: 'linear-gradient(45deg, #904e95, #e96443)'\n },\n {\n category: 'Health',\n title: 'Novel Treatment Shows Promise in Cancer Research',\n summary: 'Researchers reveal promising results from clinical trials of an innovative immunotherapy treatment.',\n timestamp: '6 hours ago',\n image: 'linear-gradient(45deg, #56ccf2, #2f80ed)'\n }\n ];\n\n // Update the DOM with news data\n mockNews.forEach((story, index) => {\n const article = document.getElementById(`story${index + 1}`);\n const image = article.querySelector('.placeholder-image');\n const category = article.querySelector('.category');\n const title = article.querySelector('h2');\n const summary = article.querySelector('.summary');\n const timestamp = article.querySelector('.timestamp');\n\n image.style.background = story.image;\n category.textContent = story.category;\n title.textContent = story.title;\n summary.textContent = story.summary;\n timestamp.textContent = story.timestamp;\n });\n});\n\n---end---\n\nThis implementation features:\n- Clean, semantic HTML5 structure\n- Beautiful gradient-based placeholder images\n- Smooth animations and transitions\n- Responsive card-based layout\n- Loading state handling\n- Accessible color contrast\n- Mobile-first approach\n- Modern CSS features (CSS Grid, Custom Properties)\n- SEO-friendly structure\n- Professional typography and spacing\n- Elegant hover effects\n- Sticky header\n- Dynamic date display\n- Simulated news content (could be replaced with real API calls)\n\nThe design is both minimal and engaging, with careful attention to visual hierarchy and user experience."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 284,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2406
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..701f93c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# topnews.scroll.pub
+Website generated by Claude from prompt: The latest world news with pictures. Show the top 3 stories.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d7195df
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Set current date
+ const dateElement = document.getElementById('currentDate');
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+ dateElement.textContent = new Date().toLocaleDateString(undefined, options);
+
+ // Simulate loading news data (in a real application, this would fetch from an API)
+ const mockNews = [
+ {
+ category: 'World',
+ title: 'Historic Climate Agreement Reached at Global Summit',
+ summary: 'World leaders have unanimously agreed to ambitious new targets for reducing carbon emissions in a groundbreaking climate accord.',
+ timestamp: '2 hours ago',
+ image: 'linear-gradient(45deg, #43cea2, #185a9d)'
+ },
+ {
+ category: 'Technology',
+ title: 'Breakthrough in Quantum Computing Achieves New Milestone',
+ summary: 'Scientists announce successful demonstration of quantum supremacy with a new 1000-qubit processor.',
+ timestamp: '4 hours ago',
+ image: 'linear-gradient(45deg, #904e95, #e96443)'
+ },
+ {
+ category: 'Health',
+ title: 'Novel Treatment Shows Promise in Cancer Research',
+ summary: 'Researchers reveal promising results from clinical trials of an innovative immunotherapy treatment.',
+ timestamp: '6 hours ago',
+ image: 'linear-gradient(45deg, #56ccf2, #2f80ed)'
+ }
+ ];
+
+ // Update the DOM with news data
+ mockNews.forEach((story, index) => {
+ const article = document.getElementById(`story${index + 1}`);
+ const image = article.querySelector('.placeholder-image');
+ const category = article.querySelector('.category');
+ const title = article.querySelector('h2');
+ const summary = article.querySelector('.summary');
+ const timestamp = article.querySelector('.timestamp');
+
+ image.style.background = story.image;
+ category.textContent = story.category;
+ title.textContent = story.title;
+ summary.textContent = story.summary;
+ timestamp.textContent = story.timestamp;
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..853af8c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,162 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #2c3e50;
+ --background-color: #f5f6fa;
+ --card-background: #ffffff;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background: var(--primary-color);
+ color: white;
+ padding: 1rem;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ letter-spacing: 1px;
+}
+
+main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ color: var(--primary-color);
+ text-align: center;
+}
+
+.news-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.news-card {
+ background: var(--card-background);
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.news-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+}
+
+.image-container {
+ height: 200px;
+ overflow: hidden;
+}
+
+.placeholder-image {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(45deg, #e0e0e0, #f5f5f5);
+ animation: pulse 2s infinite;
+}
+
+.content {
+ padding: 1.5rem;
+}
+
+.category {
+ display: inline-block;
+ background: var(--accent-color);
+ color: white;
+ padding: 0.3rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ margin-bottom: 1rem;
+}
+
+h2 {
+ font-size: 1.4rem;
+ margin-bottom: 1rem;
+ line-height: 1.4;
+}
+
+.summary {
+ color: #666;
+ margin-bottom: 1rem;
+}
+
+.timestamp {
+ color: #888;
+ font-size: 0.9rem;
+}
+
+footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ margin-top: 4rem;
+ text-align: center;
+}
+
+footer nav {
+ margin-top: 1rem;
+}
+
+footer a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: var(--transition);
+}
+
+footer a:hover {
+ color: var(--accent-color);
+}
+
+@keyframes pulse {
+ 0% { opacity: 0.6; }
+ 50% { opacity: 1; }
+ 100% { opacity: 0.6; }
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .news-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .image-container {
+ height: 180px;
+ }
+}