Last 10 Commits for novelidea.scroll.pub

commit b9f19534dddeb0cd87c6c7a037236e30af98b4ce Author: root <root@hub.scroll.pub> Date: 2024-12-27 09:28:12 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..a815047 --- /dev/null +++ b/body.html @@ -0,0 +1,32 @@ +<header> + <h1>Novelty Idea Generator</h1> + <p class="tagline">Spark your creativity with unique combinations</p> +</header> + +<main> + <div class="generator-container"> + <div class="idea-display"> + <p id="ideaOutput">Your novel idea will appear here...</p> + </div> + + <button id="generateBtn" class="generate-button" aria-label="Generate new idea"> + <span class="button-text">Generate Idea</span> + <span class="button-icon">✨</span> + </button> + </div> + + <div class="categories"> + <div class="category-pill">Products</div> + <div class="category-pill">Services</div> + <div class="category-pill">Art</div> + <div class="category-pill">Tech</div> + </div> +</main> + +<footer> + <p>Made with creativity by NovelIdea</p> + <nav> + <a href="#about">About</a> + <a href="#contact">Contact</a> + </nav> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..86457ea --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://novelidea.scroll.pub +metaTags +editButton /edit.html +title Novelty Idea Generator | Get Creative Inspiration +style.css +body.html +script.js diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..212c9f3 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# novelidea.scroll.pub +Website generated by Claude from prompt: Novelty generator \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..c1fc994 --- /dev/null +++ b/script.js @@ -0,0 +1,37 @@ +document.addEventListener('DOMContentLoaded', () => { + const generateBtn = document.getElementById('generateBtn'); + const ideaOutput = document.getElementById('ideaOutput'); + + const adjectives = ['Smart', 'Solar-powered', 'AI-driven', 'Eco-friendly', 'Portable', 'Autonomous', 'Interactive', 'Customizable']; + const objects = ['Coffee Maker', 'Backpack', 'Garden Tool', 'Fitness Device', 'Home Assistant', 'Learning Platform', 'Travel Companion', 'Wellness Monitor']; + const features = ['that learns from your habits', 'with built-in sustainability features', 'that connects to your smartphone', 'powered by renewable energy', 'with voice control capabilities']; + + function getRandomElement(array) { + return array[Math.floor(Math.random() * array.length)]; + } + + function generateIdea() { + const adjective = getRandomElement(adjectives); + const object = getRandomElement(objects); + const feature = getRandomElement(features); + + const idea = `A ${adjective} ${object} ${feature}`; + + ideaOutput.style.opacity = '0'; + setTimeout(() => { + ideaOutput.textContent = idea; + ideaOutput.style.opacity = '1'; + }, 200); + } + + generateBtn.addEventListener('click', () => { + generateBtn.classList.add('clicked'); + generateIdea(); + setTimeout(() => { + generateBtn.classList.remove('clicked'); + }, 200); + }); + + // Initial idea generation + generateIdea(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..cf6af25 --- /dev/null +++ b/style.css @@ -0,0 +1,143 @@ +:root { + --primary-color: #6366f1; + --secondary-color: #818cf8; + --background: #fafafa; + --text-color: #1f2937; + --transition: all 0.3s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', system-ui, sans-serif; + background: var(--background); + color: var(--text-color); + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + text-align: center; + padding: 4rem 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; + animation: fadeIn 1s ease-out; +} + +.tagline { + font-size: 1.2rem; + opacity: 0.9; +} + +.generator-container { + max-width: 800px; + margin: 2rem auto; + padding: 2rem; +} + +.idea-display { + background: white; + padding: 2rem; + border-radius: 1rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + min-height: 150px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 1.25rem; + transition: var(--transition); +} + +.generate-button { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + background: var(--primary-color); + color: white; + border: none; + padding: 1rem 2rem; + border-radius: 2rem; + font-size: 1.1rem; + cursor: pointer; + transition: var(--transition); + margin: 0 auto; +} + +.generate-button:hover { + transform: translateY(-2px); + background: var(--secondary-color); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); +} + +.button-icon { + font-size: 1.2rem; +} + +.categories { + display: flex; + gap: 1rem; + flex-wrap: wrap; + justify-content: center; + padding: 2rem; +} + +.category-pill { + background: white; + padding: 0.5rem 1.5rem; + border-radius: 2rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: var(--transition); +} + +.category-pill:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +footer { + margin-top: auto; + padding: 2rem; + text-align: center; + background: white; + box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); +} + +footer nav { + margin-top: 1rem; +} + +footer a { + color: var(--primary-color); + text-decoration: none; + margin: 0 1rem; + transition: var(--transition); +} + +footer a:hover { + color: var(--secondary-color); +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-20px); } + to { opacity: 1; transform: translateY(0); } +} + +@media (max-width: 768px) { + h1 { font-size: 2rem; } + .generator-container { padding: 1rem; } + .idea-display { padding: 1.5rem; } +}