\n
\n ${item.title}
\n${item.description}
\n\n \n \n \n \n
\n 
body.html
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://futurefeed.scroll.pub
+ metaTags
+ editButton /edit.html
+ title FutureFeed - Your Curated Tech News
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_014AfWKog5r85czH8on6ez9D",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a modern, accessible news aggregator website:\n\n---domain---\nfuturefeed.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://futurefeed.scroll.pub\nmetaTags\neditButton /edit.html\ntitle FutureFeed - Your Curated Tech News\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n \n\n\n \n \n \n\n \n \n \n \n\n\n\n---style.css---\n:root {\n --primary: #2d6cdf;\n --background: #ffffff;\n --text: #333333;\n --card-bg: #f5f7fa;\n --shadow: rgba(0,0,0,0.1);\n}\n\n[data-theme=\"dark\"] {\n --primary: #64a5ff;\n --background: #1a1a1a;\n --text: #ffffff;\n --card-bg: #2d2d2d;\n --shadow: rgba(255,255,255,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n background: var(--background);\n color: var(--text);\n transition: background-color 0.3s, color 0.3s;\n}\n\nheader {\n position: sticky;\n top: 0;\n backdrop-filter: blur(10px);\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\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 color: var(--primary);\n}\n\n.nav-items a {\n margin: 0 1rem;\n text-decoration: none;\n color: var(--text);\n position: relative;\n}\n\n.nav-items a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary);\n transition: width 0.3s;\n}\n\n.nav-items a:hover::after,\n.nav-items a.active::after {\n width: 100%;\n}\n\n.theme-toggle {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.2rem;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.filters {\n margin-bottom: 2rem;\n}\n\n#search {\n width: 100%;\n padding: 1rem;\n border: 2px solid var(--card-bg);\n border-radius: 8px;\n background: var(--card-bg);\n color: var(--text);\n font-size: 1rem;\n transition: border-color 0.3s;\n}\n\n#search:focus {\n outline: none;\n border-color: var(--primary);\n}\n\n.filter-chips {\n margin-top: 1rem;\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n}\n\n.chip {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 20px;\n background: var(--card-bg);\n color: var(--text);\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.chip.active {\n background: var(--primary);\n color: white;\n}\n\n.news-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.5rem;\n}\n\n.news-card {\n background: var(--card-bg);\n border-radius: 12px;\n overflow: hidden;\n transition: transform 0.3s;\n box-shadow: 0 4px 6px var(--shadow);\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-content {\n padding: 1.5rem;\n}\n\n.news-content h2 {\n margin-bottom: 0.5rem;\n font-size: 1.2rem;\n}\n\n.news-content p {\n color: var(--text);\n opacity: 0.8;\n line-height: 1.5;\n}\n\nfooter {\n background: var(--card-bg);\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.footer-nav a {\n margin-left: 1rem;\n color: var(--text);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .nav-items {\n display: none;\n }\n \n .footer-content {\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n }\n \n .footer-nav a {\n margin: 0 0.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const newsContainer = document.getElementById('news-container');\n const searchInput = document.getElementById('search');\n const filterChips = document.querySelectorAll('.chip');\n const themeToggle = document.querySelector('.theme-toggle');\n \n let currentFilter = 'all';\n let newsData = [];\n\n // Fetch and display news\n async function fetchNews() {\n // Simulated news data - in production, this would fetch from an API\n newsData = [\n {\n title: 'New Solar Technology Breakthrough',\n category: 'renewables',\n description: 'Scientists develop high-efficiency solar panels...',\n image: 'solar-panel.jpg'\n },\n {\n title: 'AI Model Predicts Climate Patterns',\n category: 'ai',\n description: 'Advanced AI system helps forecast weather...',\n image: 'ai-climate.jpg'\n },\n // Add more news items here\n ];\n \n renderNews();\n }\n\n function renderNews() {\n const filteredNews = newsData.filter(item => {\n const matchesFilter = currentFilter === 'all' || item.category === currentFilter;\n const matchesSearch = item.title.toLowerCase().includes(searchInput.value.toLowerCase());\n return matchesFilter && matchesSearch;\n });\n\n newsContainer.innerHTML = filteredNews.map(item => `\n \n ![\"\"](\"${item.image}\")
\n \n `).join('');\n }\n\n // Event Listeners\n filterChips.forEach(chip => {\n chip.addEventListener('click', () => {\n filterChips.forEach(c => c.classList.remove('active'));\n chip.classList.add('active');\n currentFilter = chip.dataset.filter;\n renderNews();\n });\n });\n\n searchInput.addEventListener('input', renderNews);\n\n themeToggle.addEventListener('click', () => {\n document.documentElement.setAttribute('data-theme',\n document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'\n );\n });\n\n // Initialize\n fetchNews();\n});\n\n---end---\n\nThis implementation features:\n- Clean, semantic HTML5 structure\n- Responsive design with mobile-first approach\n- Dark/light theme toggle\n- Dynamic news filtering and search\n- Smooth animations and transitions\n- Accessible navigation and interactive elements\n- CSS Grid for news layout\n- Modern card design with hover effects\n- Sticky header with blur effect\n- Clean and professional typography\n- Proper color contrast for accessibility\n- Flexible layout that adapts to different screen sizes\n\nThe domain name \"futurefeed.scroll.pub\" is memorable and accurately represents the website's purpose of aggregating future-focused tech news."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 287,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2588
+ }
+ }
readme.scroll
Changed around line 1
+ # futurefeed.scroll.pub
+
+ website generated by Claude from prompt: I want a website with customized news feed on renewables, ai and startups
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const newsContainer = document.getElementById('news-container');
+ const searchInput = document.getElementById('search');
+ const filterChips = document.querySelectorAll('.chip');
+ const themeToggle = document.querySelector('.theme-toggle');
+
+ let currentFilter = 'all';
+ let newsData = [];
+
+ // Fetch and display news
+ async function fetchNews() {
+ // Simulated news data - in production, this would fetch from an API
+ newsData = [
+ {
+ title: 'New Solar Technology Breakthrough',
+ category: 'renewables',
+ description: 'Scientists develop high-efficiency solar panels...',
+ image: 'solar-panel.jpg'
+ },
+ {
+ title: 'AI Model Predicts Climate Patterns',
+ category: 'ai',
+ description: 'Advanced AI system helps forecast weather...',
+ image: 'ai-climate.jpg'
+ },
+ // Add more news items here
+ ];
+
+ renderNews();
+ }
+
+ function renderNews() {
+ const filteredNews = newsData.filter(item => {
+ const matchesFilter = currentFilter === 'all' || item.category === currentFilter;
+ const matchesSearch = item.title.toLowerCase().includes(searchInput.value.toLowerCase());
+ return matchesFilter && matchesSearch;
+ });
+
+ newsContainer.innerHTML = filteredNews.map(item => `
+
+ 
+
+
${item.title}
+
${item.description}
+
+
+ `).join('');
+ }
+
+ // Event Listeners
+ filterChips.forEach(chip => {
+ chip.addEventListener('click', () => {
+ filterChips.forEach(c => c.classList.remove('active'));
+ chip.classList.add('active');
+ currentFilter = chip.dataset.filter;
+ renderNews();
+ });
+ });
+
+ searchInput.addEventListener('input', renderNews);
+
+ themeToggle.addEventListener('click', () => {
+ document.documentElement.setAttribute('data-theme',
+ document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+ );
+ });
+
+ // Initialize
+ fetchNews();
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #2d6cdf;
+ --background: #ffffff;
+ --text: #333333;
+ --card-bg: #f5f7fa;
+ --shadow: rgba(0,0,0,0.1);
+ }
+
+ [data-theme="dark"] {
+ --primary: #64a5ff;
+ --background: #1a1a1a;
+ --text: #ffffff;
+ --card-bg: #2d2d2d;
+ --shadow: rgba(255,255,255,0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ transition: background-color 0.3s, color 0.3s;
+ }
+
+ header {
+ position: sticky;
+ top: 0;
+ backdrop-filter: blur(10px);
+ z-index: 100;
+ }
+
+ nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary);
+ }
+
+ .nav-items a {
+ margin: 0 1rem;
+ text-decoration: none;
+ color: var(--text);
+ position: relative;
+ }
+
+ .nav-items a::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background: var(--primary);
+ transition: width 0.3s;
+ }
+
+ .nav-items a:hover::after,
+ .nav-items a.active::after {
+ width: 100%;
+ }
+
+ .theme-toggle {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 1.2rem;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .filters {
+ margin-bottom: 2rem;
+ }
+
+ #search {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid var(--card-bg);
+ border-radius: 8px;
+ background: var(--card-bg);
+ color: var(--text);
+ font-size: 1rem;
+ transition: border-color 0.3s;
+ }
+
+ #search:focus {
+ outline: none;
+ border-color: var(--primary);
+ }
+
+ .filter-chips {
+ margin-top: 1rem;
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+ }
+
+ .chip {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 20px;
+ background: var(--card-bg);
+ color: var(--text);
+ cursor: pointer;
+ transition: all 0.3s;
+ }
+
+ .chip.active {
+ background: var(--primary);
+ color: white;
+ }
+
+ .news-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .news-card {
+ background: var(--card-bg);
+ border-radius: 12px;
+ overflow: hidden;
+ transition: transform 0.3s;
+ box-shadow: 0 4px 6px var(--shadow);
+ }
+
+ .news-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .news-card img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+ }
+
+ .news-content {
+ padding: 1.5rem;
+ }
+
+ .news-content h2 {
+ margin-bottom: 0.5rem;
+ font-size: 1.2rem;
+ }
+
+ .news-content p {
+ color: var(--text);
+ opacity: 0.8;
+ line-height: 1.5;
+ }
+
+ footer {
+ background: var(--card-bg);
+ padding: 2rem;
+ margin-top: 4rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .footer-nav a {
+ margin-left: 1rem;
+ color: var(--text);
+ text-decoration: none;
+ }
+
+ @media (max-width: 768px) {
+ .nav-items {
+ display: none;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ gap: 1rem;
+ text-align: center;
+ }
+
+ .footer-nav a {
+ margin: 0 0.5rem;
+ }
+ }