commit a4c12aefb8d90e0667aa3c27511da1681f75d80c
Author: root <root@hub.scroll.pub> Date: 2024-12-27 14:44:42 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..8e8696d --- /dev/null +++ b/body.html @@ -0,0 +1,31 @@ +<header> + <h1>TheNoods</h1> + <p>Your interactive AI & Tech news hub</p> +</header> +<main> + <div class="grid-container"> + <div class="module" data-topic="ai"> + <h2>AI Innovations</h2> + <p>Explore the latest in artificial intelligence.</p> + </div> + <div class="module" data-topic="tech"> + <h2>Tech Trends</h2> + <p>Discover cutting-edge technology developments.</p> + </div> + <div class="module" data-topic="startups"> + <h2>Startups</h2> + <p>Learn about emerging startups and their impact.</p> + </div> + <div class="module" data-topic="ethics"> + <h2>Ethics in Tech</h2> + <p>Dive into the ethical discussions in technology.</p> + </div> + </div> + <div id="related-stories" class="related-stories"> + <h3>Related Stories</h3> + <ul id="story-list"></ul> + </div> +</main> +<footer> + <p>Stay informed with TheNoods</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..9c4c23e --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://thenoods.scroll.pub +metaTags +editButton /edit.html +title TheNoods - Interactive AI/Tech News Hub +style.css +body.html +script.js \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..6200c1a --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# thenoods.scroll.pub +Website generated by DeepSeek from prompt: i want a website called thenoods that is an interactive ai/tech news hub with floating dynamic modules that can be interacted with. when one module is selected-- connect the selected module to relevant stories to aid the user in streamlined relation \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d529fd8 --- /dev/null +++ b/script.js @@ -0,0 +1,42 @@ +document.addEventListener('DOMContentLoaded', function() { + const modules = document.querySelectorAll('.module'); + const storyList = document.getElementById('story-list'); + + const stories = { + ai: [ + { title: 'AI Breakthrough in Healthcare', link: '#' }, + { title: 'New AI Language Model Released', link: '#' } + ], + tech: [ + { title: 'Quantum Computing Advances', link: '#' }, + { title: 'New Smartphone Tech Unveiled', link: '#' } + ], + startups: [ + { title: 'Startup Raises $10M in Funding', link: '#' }, + { title: 'New App Revolutionizes Social Media', link: '#' } + ], + ethics: [ + { title: 'Ethical AI Guidelines Published', link: '#' }, + { title: 'Tech Giants Face Privacy Scrutiny', link: '#' } + ] + }; + + modules.forEach(module => { + module.addEventListener('click', function() { + const topic = this.getAttribute('data-topic'); + displayStories(topic); + }); + }); + + function displayStories(topic) { + storyList.innerHTML = ''; + stories[topic].forEach(story => { + const li = document.createElement('li'); + const a = document.createElement('a'); + a.href = story.link; + a.textContent = story.title; + li.appendChild(a); + storyList.appendChild(li); + }); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1d210c5 --- /dev/null +++ b/style.css @@ -0,0 +1,64 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background: #f4f4f4; + color: #333; +} + +header { + background: #007BFF; + color: white; + padding: 20px; + text-align: center; +} + +h1 { + margin: 0; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + padding: 20px; +} + +.module { + background: white; + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; +} + +.module:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + +h2 { + margin-top: 0; +} + +.related-stories { + background: white; + border-radius: 10px; + padding: 20px; + margin: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +footer { + text-align: center; + padding: 20px; + background: #007BFF; + color: white; +} + +@media (max-width: 768px) { + .grid-container { + grid-template-columns: 1fr; + } +} \ No newline at end of file