commit 266e8be70106bffd4deac3d9bdc2e8c8105503ea
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 09:38:57 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..e429af6
--- /dev/null
+++ b/body.html
@@ -0,0 +1,57 @@
+<header>
+ <nav>
+ <div class="logo">WorldNews</div>
+ <div class="nav-links">
+ <a href="#" class="active">Top Stories</a>
+ <a href="#">World</a>
+ <a href="#">Business</a>
+ <a href="#">Technology</a>
+ <a href="#">Science</a>
+ </div>
+ <button class="menu-toggle" aria-label="Toggle menu">
+ <span></span>
+ <span></span>
+ <span></span>
+ </button>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Global News at Your Fingertips</h1>
+ <p>Top stories from leading news organizations worldwide</p>
+ </section>
+
+ <section class="news-grid" id="newsGrid">
+ <!-- News articles will be inserted here via JavaScript -->
+ </section>
+
+ <div class="loading" id="loading">
+ <div class="spinner"></div>
+ </div>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h3>WorldNews</h3>
+ <p>Aggregating news from trusted sources worldwide</p>
+ </div>
+ <div class="footer-section">
+ <h3>Sources</h3>
+ <ul>
+ <li>BBC News</li>
+ <li>The New York Times</li>
+ <li>The Washington Post</li>
+ </ul>
+ </div>
+ <div class="footer-section">
+ <h3>Navigation</h3>
+ <ul>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Contact</a></li>
+ <li><a href="#">Privacy Policy</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..0e06ead
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://worldnews.scroll.pub
+metaTags
+editButton /edit.html
+title WorldNews - Global News Aggregator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..04edb7a
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_015Dzgc9P35XwRxChEbqhvGe",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a news aggregation website with the requested specifications.\n\n---domain---\nworldnews.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://worldnews.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WorldNews - Global News Aggregator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">WorldNews</div>\n <div class=\"nav-links\">\n <a href=\"#\" class=\"active\">Top Stories</a>\n <a href=\"#\">World</a>\n <a href=\"#\">Business</a>\n <a href=\"#\">Technology</a>\n <a href=\"#\">Science</a>\n </div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span>\n <span></span>\n <span></span>\n </button>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Global News at Your Fingertips</h1>\n <p>Top stories from leading news organizations worldwide</p>\n </section>\n\n <section class=\"news-grid\" id=\"newsGrid\">\n <!-- News articles will be inserted here via JavaScript -->\n </section>\n\n <div class=\"loading\" id=\"loading\">\n <div class=\"spinner\"></div>\n </div>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h3>WorldNews</h3>\n <p>Aggregating news from trusted sources worldwide</p>\n </div>\n <div class=\"footer-section\">\n <h3>Sources</h3>\n <ul>\n <li>BBC News</li>\n <li>The New York Times</li>\n <li>The Washington Post</li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h3>Navigation</h3>\n <ul>\n <li><a href=\"#\">About</a></li>\n <li><a href=\"#\">Contact</a></li>\n <li><a href=\"#\">Privacy Policy</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --text-color: #333;\n --background-color: #f5f6fa;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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 line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\nheader {\n background-color: var(--primary-color);\n padding: 1rem;\n position: sticky;\n top: 0;\n z-index: 100;\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 color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.nav-links a.active {\n color: var(--secondary-color);\n}\n\n.menu-toggle {\n display: none;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.news-grid {\n max-width: 1200px;\n margin: 2rem auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 0 1rem;\n}\n\n.news-card {\n background: white;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.news-card:hover {\n transform: translateY(-5px);\n}\n\n.news-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n\n.news-card-content {\n padding: 1.5rem;\n}\n\n.news-card h2 {\n font-size: 1.25rem;\n margin-bottom: 0.5rem;\n}\n\n.news-source {\n color: var(--secondary-color);\n font-weight: 500;\n}\n\n.loading {\n text-align: center;\n padding: 2rem;\n}\n\n.spinner {\n width: 40px;\n height: 40px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid var(--secondary-color);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto;\n}\n\nfooter {\n background-color: var(--primary-color);\n color: white;\n padding: 3rem 1rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.footer-section h3 {\n margin-bottom: 1rem;\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n color: white;\n text-decoration: none;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background-color: white;\n margin: 5px 0;\n transition: 0.3s;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const newsGrid = document.getElementById('newsGrid');\n const loading = document.getElementById('loading');\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n // Sample news data (in real implementation, this would come from an API)\n const sampleNews = [\n {\n title: 'Global Climate Summit Reaches Historic Agreement',\n source: 'BBC News',\n image: 'climate-summit.jpg',\n url: '#'\n },\n {\n title: 'Tech Giants Face New Regulations in Europe',\n source: 'The New York Times',\n image: 'tech-regulations.jpg',\n url: '#'\n },\n {\n title: 'Breakthrough in Renewable Energy Storage',\n source: 'The Washington Post',\n image: 'renewable-energy.jpg',\n url: '#'\n }\n // Add more sample news items\n ];\n\n function createNewsCard(article) {\n return `\n <article class=\"news-card\">\n <img src=\"${article.image}\" alt=\"${article.title}\">\n <div class=\"news-card-content\">\n <h2>${article.title}</h2>\n <p class=\"news-source\">${article.source}</p>\n </div>\n </article>\n `;\n }\n\n function loadNews() {\n loading.style.display = 'block';\n \n // Simulate API delay\n setTimeout(() => {\n newsGrid.innerHTML = sampleNews.map(article => createNewsCard(article)).join('');\n loading.style.display = 'none';\n }, 1000);\n }\n\n // Mobile menu toggle\n menuToggle.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n // Load initial news\n loadNews();\n\n // Infinite scroll simulation\n window.addEventListener('scroll', () => {\n if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 1000) {\n loadNews();\n }\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive news aggregation website with a clean and professional design. Key features include:\n\n1. Responsive navigation with mobile menu\n2. Hero section with gradient background\n3. News grid with card layout and hover effects\n4. Loading spinner animation\n5. Infinite scroll simulation\n6. Footer with multiple columns\n7. Modern CSS variables for easy theming\n8. Smooth animations and transitions\n9. Semantic HTML5 structure\n10. Accessibility considerations\n\nThe design is minimalist yet sophisticated, with careful attention to typography, spacing, and visual hierarchy. The color scheme is professional and easy on the eyes, while the hover effects and animations add polish without being overwhelming.\n\nNote: In a real implementation, you would need to:\n1. Replace the sample news data with actual API calls to news sources\n2. Add proper error handling\n3. Implement real image handling\n4. Add proper authentication for API access\n5. Implement caching mechanisms\n6. Add proper rate limiting"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 296,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2563
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..f634cd8
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# worldnews.scroll.pub
+Website generated by Claude from prompt: Create a news aggregation website taking in the top stories from news organisations around the world including BBC, new York times and Washington post
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..50e4c50
--- /dev/null
+++ b/script.js
@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const newsGrid = document.getElementById('newsGrid');
+ const loading = document.getElementById('loading');
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ // Sample news data (in real implementation, this would come from an API)
+ const sampleNews = [
+ {
+ title: 'Global Climate Summit Reaches Historic Agreement',
+ source: 'BBC News',
+ image: 'climate-summit.jpg',
+ url: '#'
+ },
+ {
+ title: 'Tech Giants Face New Regulations in Europe',
+ source: 'The New York Times',
+ image: 'tech-regulations.jpg',
+ url: '#'
+ },
+ {
+ title: 'Breakthrough in Renewable Energy Storage',
+ source: 'The Washington Post',
+ image: 'renewable-energy.jpg',
+ url: '#'
+ }
+ // Add more sample news items
+ ];
+
+ function createNewsCard(article) {
+ return `
+ <article class="news-card">
+ <img src="${article.image}" alt="${article.title}">
+ <div class="news-card-content">
+ <h2>${article.title}</h2>
+ <p class="news-source">${article.source}</p>
+ </div>
+ </article>
+ `;
+ }
+
+ function loadNews() {
+ loading.style.display = 'block';
+
+ // Simulate API delay
+ setTimeout(() => {
+ newsGrid.innerHTML = sampleNews.map(article => createNewsCard(article)).join('');
+ loading.style.display = 'none';
+ }, 1000);
+ }
+
+ // Mobile menu toggle
+ menuToggle.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ // Load initial news
+ loadNews();
+
+ // Infinite scroll simulation
+ window.addEventListener('scroll', () => {
+ if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 1000) {
+ loadNews();
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3db22f2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,189 @@
+:root {
+ --primary-color: #2c3e50;
+ --secondary-color: #3498db;
+ --text-color: #333;
+ --background-color: #f5f6fa;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
+
+header {
+ background-color: var(--primary-color);
+ padding: 1rem;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--secondary-color);
+}
+
+.nav-links a.active {
+ color: var(--secondary-color);
+}
+
+.menu-toggle {
+ display: none;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.news-grid {
+ max-width: 1200px;
+ margin: 2rem auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 0 1rem;
+}
+
+.news-card {
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s ease;
+}
+
+.news-card:hover {
+ transform: translateY(-5px);
+}
+
+.news-card img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+}
+
+.news-card-content {
+ padding: 1.5rem;
+}
+
+.news-card h2 {
+ font-size: 1.25rem;
+ margin-bottom: 0.5rem;
+}
+
+.news-source {
+ color: var(--secondary-color);
+ font-weight: 500;
+}
+
+.loading {
+ text-align: center;
+ padding: 2rem;
+}
+
+.spinner {
+ width: 40px;
+ height: 40px;
+ border: 4px solid #f3f3f3;
+ border-top: 4px solid var(--secondary-color);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin: 0 auto;
+}
+
+footer {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 3rem 1rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section h3 {
+ margin-bottom: 1rem;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section a {
+ color: white;
+ text-decoration: none;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .menu-toggle {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+ }
+
+ .menu-toggle span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background-color: white;
+ margin: 5px 0;
+ transition: 0.3s;
+ }
+}