commit a512ec744cda3a42fc8a9bdfc4d0171eb428193b

Author: root <root@hub.scroll.pub> Date: 2025-01-14 08:25:39 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..4e312bb --- /dev/null +++ b/body.html @@ -0,0 +1,41 @@ +<header> + <nav> + <div class="logo">FutureFeed</div> + <div class="nav-items"> + <a href="#renewables" class="active">Renewables</a> + <a href="#ai">AI</a> + <a href="#startups">Startups</a> + </div> + <button class="theme-toggle" aria-label="Toggle dark mode"> + <span class="sun">☀️</span> + <span class="moon">🌙</span> + </button> + </nav> +</header> + +<main> + <section class="filters"> + <input type="text" id="search" placeholder="Search articles..." aria-label="Search articles"> + <div class="filter-chips"> + <button class="chip active" data-filter="all">All</button> + <button class="chip" data-filter="renewables">Renewables</button> + <button class="chip" data-filter="ai">AI</button> + <button class="chip" data-filter="startups">Startups</button> + </div> + </section> + + <section class="news-grid" id="news-container"> + <!-- News items will be dynamically inserted here --> + </section> +</main> + +<footer> + <div class="footer-content"> + <p>FutureFeed - Curating tomorrow's tech news today</p> + <nav class="footer-nav"> + <a href="/about">About</a> + <a href="/privacy">Privacy</a> + <a href="/contact">Contact</a> + </nav> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..233aa79 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://futurefeed.scroll.pub +metaTags +editButton /edit.html +title FutureFeed - Your Curated Tech News +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..885ae4d --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "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<header>\n <nav>\n <div class=\"logo\">FutureFeed</div>\n <div class=\"nav-items\">\n <a href=\"#renewables\" class=\"active\">Renewables</a>\n <a href=\"#ai\">AI</a>\n <a href=\"#startups\">Startups</a>\n </div>\n <button class=\"theme-toggle\" aria-label=\"Toggle dark mode\">\n <span class=\"sun\">☀️</span>\n <span class=\"moon\">🌙</span>\n </button>\n </nav>\n</header>\n\n<main>\n <section class=\"filters\">\n <input type=\"text\" id=\"search\" placeholder=\"Search articles...\" aria-label=\"Search articles\">\n <div class=\"filter-chips\">\n <button class=\"chip active\" data-filter=\"all\">All</button>\n <button class=\"chip\" data-filter=\"renewables\">Renewables</button>\n <button class=\"chip\" data-filter=\"ai\">AI</button>\n <button class=\"chip\" data-filter=\"startups\">Startups</button>\n </div>\n </section>\n\n <section class=\"news-grid\" id=\"news-container\">\n <!-- News items will be dynamically inserted here -->\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <p>FutureFeed - Curating tomorrow's tech news today</p>\n <nav class=\"footer-nav\">\n <a href=\"/about\">About</a>\n <a href=\"/privacy\">Privacy</a>\n <a href=\"/contact\">Contact</a>\n </nav>\n </div>\n</footer>\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 <article class=\"news-card\">\n <img src=\"${item.image}\" alt=\"\">\n <div class=\"news-content\">\n <h2>${item.title}</h2>\n <p>${item.description}</p>\n </div>\n </article>\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 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..b03b755 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# futurefeed.scroll.pub + +website generated by Claude from prompt: I want a website with customized news feed on renewables, ai and startups \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..66e7e89 --- /dev/null +++ b/script.js @@ -0,0 +1,70 @@ +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 => ` + <article class="news-card"> + <img src="${item.image}" alt=""> + <div class="news-content"> + <h2>${item.title}</h2> + <p>${item.description}</p> + </div> + </article> + `).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(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..4add945 --- /dev/null +++ b/style.css @@ -0,0 +1,203 @@ +: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; + } +}