commit 15678547b7ce45bc1a77a6949af228994001a0a9
Author: root <root@hub.scroll.pub>
Date: 2025-01-17 14:50:31 +0000
Subject: Initial commit
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..98e7bcd
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,101 @@
+buildHtml
+baseUrl https://lightlab.powerhouse.wiki
+metaTags
+editButton /edit.html
+title Light Lab - Amazing Light Experiments at Home
+style.css
+header
+ class hero
+ nav
+ div Light Lab
+ class logo
+ div
+ class nav-links
+ a Home
+ href #top
+ a Experiments
+ href #experiments
+ a Safety
+ href #safety
+ a About
+ href #about
+main
+ section
+ class hero-content
+ h1 Discover the Magic of Light
+ p Explore fascinating light experiments you can safely do at home
+ a Start Experimenting
+ class cta-button
+ href #experiments
+ section
+ id safety
+ class safety-notice
+ h2 Safety First
+ div
+ class safety-grid
+ div
+ class safety-card
+ span 🥽
+ p Always wear eye protection when working with bright lights
+ div
+ class safety-card
+ span ⚡
+ p Never point lasers at eyes or reflective surfaces
+ div
+ class safety-card
+ span 👥
+ p Adult supervision recommended
+ section
+ id experiments
+ class experiments-grid
+ h2 Light Experiments
+ div
+ class experiment-card
+ h3 Rainbow in a Glass
+ p Create a stunning rainbow using water, a mirror, and sunlight
+ button Try It
+ class experiment-btn
+ data-experiment rainbow
+ div
+ class experiment-card
+ h3 Light Refraction Pencil
+ p Make a pencil appear to bend using a glass of water
+ button Try It
+ class experiment-btn
+ data-experiment refraction
+ div
+ class experiment-card
+ h3 DIY Spectroscope
+ p Build your own tool to see the spectrum of light
+ button Try It
+ class experiment-btn
+ data-experiment spectroscope
+ div
+ class experiment-card
+ h3 Shadow Theater
+ p Create amazing shadow art using household items
+ button Try It
+ class experiment-btn
+ data-experiment shadow
+ section
+ id modal
+ class modal hidden
+ div
+ class modal-content
+ span ×
+ class close-btn
+ div
+ class experiment-details
+footer
+ div
+ class footer-content
+ p Made with ✨ by science enthusiasts
+ div
+ class footer-links
+ a Safety Guidelines
+ href #safety
+ a Contact
+ href mailto:info@lightlab.powerhouse.wiki
+ a Contribute
+ href https://github.com/lightlab/experiments
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..230c007
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_018UmA6n1XzUNp7rJ8EQ2jn2",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website about home light experiments with the domain \"lightlab.powerhouse.wiki\". The website will feature interactive demonstrations and easy-to-follow experiments.\n\n---domain---\nlightlab.powerhouse.wiki\n---index.scroll---\nbuildHtml\nbaseUrl https://lightlab.powerhouse.wiki\nmetaTags\neditButton /edit.html\ntitle Light Lab - Amazing Light Experiments at Home\nstyle.css\nheader\n class hero\n nav\n div Light Lab\n class logo\n div\n class nav-links\n a Home\n href #top\n a Experiments\n href #experiments\n a Safety\n href #safety\n a About\n href #about\nmain\n section\n class hero-content\n h1 Discover the Magic of Light\n p Explore fascinating light experiments you can safely do at home\n a Start Experimenting\n class cta-button\n href #experiments\n section\n id safety\n class safety-notice\n h2 Safety First\n div\n class safety-grid\n div\n class safety-card\n span 🥽\n p Always wear eye protection when working with bright lights\n div\n class safety-card\n span ⚡\n p Never point lasers at eyes or reflective surfaces\n div\n class safety-card\n span 👥\n p Adult supervision recommended\n section\n id experiments\n class experiments-grid\n h2 Light Experiments\n div\n class experiment-card\n h3 Rainbow in a Glass\n p Create a stunning rainbow using water, a mirror, and sunlight\n button Try It\n class experiment-btn\n data-experiment rainbow\n div\n class experiment-card\n h3 Light Refraction Pencil\n p Make a pencil appear to bend using a glass of water\n button Try It\n class experiment-btn\n data-experiment refraction\n div\n class experiment-card\n h3 DIY Spectroscope\n p Build your own tool to see the spectrum of light\n button Try It\n class experiment-btn\n data-experiment spectroscope\n div\n class experiment-card\n h3 Shadow Theater\n p Create amazing shadow art using household items\n button Try It\n class experiment-btn\n data-experiment shadow\n section\n id modal\n class modal hidden\n div\n class modal-content\n span ×\n class close-btn\n div\n class experiment-details\nfooter\n div\n class footer-content\n p Made with ✨ by science enthusiasts\n div\n class footer-links\n a Safety Guidelines\n href #safety\n a Contact\n href mailto:info@lightlab.powerhouse.wiki\n a Contribute\n href https://github.com/lightlab/experiments\nscript.js\n---style.css---\n:root {\n --primary-color: #2a1b3d;\n --secondary-color: #44318d;\n --accent-color: #e98074;\n --text-color: #2d2d2d;\n --light-bg: #f4f4f4;\n --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\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}\n\n.hero {\n background: var(--gradient);\n color: white;\n padding: 2rem;\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.hero::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image/svg+xml,<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"2\" cy=\"2\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></svg>');\n pointer-events: none;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.hero-content {\n text-align: center;\n margin: auto;\n max-width: 800px;\n}\n\n.hero-content h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--accent-color);\n color: white;\n text-decoration: none;\n border-radius: 50px;\n transition: transform 0.3s ease;\n margin-top: 2rem;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n.experiments-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n background: var(--light-bg);\n}\n\n.experiment-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.experiment-card:hover {\n transform: translateY(-5px);\n}\n\n.experiment-btn {\n background: var(--secondary-color);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n cursor: pointer;\n margin-top: 1rem;\n}\n\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0,0,0,0.8);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.modal-content {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n max-width: 600px;\n width: 90%;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n}\n\n.close-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n cursor: pointer;\n font-size: 1.5rem;\n}\n\n.hidden {\n display: none;\n}\n\n@media (max-width: 768px) {\n .hero-content h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .experiments-grid {\n padding: 2rem 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const modal = document.getElementById('modal');\n const experimentDetails = document.querySelector('.experiment-details');\n const closeBtn = document.querySelector('.close-btn');\n \n const experiments = {\n rainbow: {\n title: 'Rainbow in a Glass',\n materials: ['Glass of water', 'Mirror', 'White paper', 'Sunlight'],\n steps: [\n 'Fill a glass with water',\n 'Place mirror in the water at an angle',\n 'Place in direct sunlight',\n 'Hold white paper to catch the rainbow'\n ]\n },\n refraction: {\n title: 'Light Refraction Pencil',\n materials: ['Glass of water', 'Pencil'],\n steps: [\n 'Fill a glass with water',\n 'Place pencil in water at an angle',\n 'Observe the optical illusion'\n ]\n },\n spectroscope: {\n title: 'DIY Spectroscope',\n materials: ['CD or DVD', 'Cardboard box', 'Scissors', 'Tape'],\n steps: [\n 'Cut a slit in the box',\n 'Place CD at 45° angle',\n 'Make viewing window',\n 'Point at light source'\n ]\n },\n shadow: {\n title: 'Shadow Theater',\n materials: ['Flashlight', 'White wall or sheet', 'Various objects'],\n steps: [\n 'Darken the room',\n 'Position light source',\n 'Create shadows with objects',\n 'Experiment with distances'\n ]\n }\n };\n\n document.querySelectorAll('.experiment-btn').forEach(button => {\n button.addEventListener('click', () => {\n const experiment = experiments[button.dataset.experiment];\n let content = `\n <h3>${experiment.title}</h3>\n <h4>Materials Needed:</h4>\n <ul>${experiment.materials.map(item => `<li>${item}</li>`).join('')}</ul>\n <h4>Steps:</h4>\n <ol>${experiment.steps.map(step => `<li>${step}</li>`).join('')}</ol>\n `;\n experimentDetails.innerHTML = content;\n modal.classList.remove('hidden');\n });\n });\n\n closeBtn.addEventListener('click', () => {\n modal.classList.add('hidden');\n });\n\n window.addEventListener('click', (e) => {\n if (e.target === modal) {\n modal.classList.add('hidden');\n }\n });\n});\n---end---\n\nThis creates a beautiful, interactive website with a modern design featuring a gradient hero section, card-based experiment listings, and a modal system for viewing experiment details. It's fully responsive and includes smooth animations and transitions. The color scheme is carefully chosen to create an engaging scientific atmosphere while maintaining readability and accessibility.\n\nThe JavaScript handles the modal system and experiment details dynamically, while the CSS provides sophisticated styling with variables, transforms, and responsive design. The layout adapts seamlessly to different screen sizes, and the interface includes hover effects and smooth transitions for an enhanced user experience."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 830,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2699
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..87b7742
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# lightlab.powerhouse.wiki
+
+website generated by Claude from prompt: a website listing experiments you can do at home involving light
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e0769cc
--- /dev/null
+++ b/script.js
@@ -0,0 +1,72 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const modal = document.getElementById('modal');
+ const experimentDetails = document.querySelector('.experiment-details');
+ const closeBtn = document.querySelector('.close-btn');
+
+ const experiments = {
+ rainbow: {
+ title: 'Rainbow in a Glass',
+ materials: ['Glass of water', 'Mirror', 'White paper', 'Sunlight'],
+ steps: [
+ 'Fill a glass with water',
+ 'Place mirror in the water at an angle',
+ 'Place in direct sunlight',
+ 'Hold white paper to catch the rainbow'
+ ]
+ },
+ refraction: {
+ title: 'Light Refraction Pencil',
+ materials: ['Glass of water', 'Pencil'],
+ steps: [
+ 'Fill a glass with water',
+ 'Place pencil in water at an angle',
+ 'Observe the optical illusion'
+ ]
+ },
+ spectroscope: {
+ title: 'DIY Spectroscope',
+ materials: ['CD or DVD', 'Cardboard box', 'Scissors', 'Tape'],
+ steps: [
+ 'Cut a slit in the box',
+ 'Place CD at 45° angle',
+ 'Make viewing window',
+ 'Point at light source'
+ ]
+ },
+ shadow: {
+ title: 'Shadow Theater',
+ materials: ['Flashlight', 'White wall or sheet', 'Various objects'],
+ steps: [
+ 'Darken the room',
+ 'Position light source',
+ 'Create shadows with objects',
+ 'Experiment with distances'
+ ]
+ }
+ };
+
+ document.querySelectorAll('.experiment-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ const experiment = experiments[button.dataset.experiment];
+ let content = `
+ <h3>${experiment.title}</h3>
+ <h4>Materials Needed:</h4>
+ <ul>${experiment.materials.map(item => `<li>${item}</li>`).join('')}</ul>
+ <h4>Steps:</h4>
+ <ol>${experiment.steps.map(step => `<li>${step}</li>`).join('')}</ol>
+ `;
+ experimentDetails.innerHTML = content;
+ modal.classList.remove('hidden');
+ });
+ });
+
+ closeBtn.addEventListener('click', () => {
+ modal.classList.add('hidden');
+ });
+
+ window.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ modal.classList.add('hidden');
+ }
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..328519a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,173 @@
+:root {
+ --primary-color: #2a1b3d;
+ --secondary-color: #44318d;
+ --accent-color: #e98074;
+ --text-color: #2d2d2d;
+ --light-bg: #f4f4f4;
+ --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+}
+
+* {
+ 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);
+}
+
+.hero {
+ background: var(--gradient);
+ color: white;
+ padding: 2rem;
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
+ pointer-events: none;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.hero-content {
+ text-align: center;
+ margin: auto;
+ max-width: 800px;
+}
+
+.hero-content h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--accent-color);
+ color: white;
+ text-decoration: none;
+ border-radius: 50px;
+ transition: transform 0.3s ease;
+ margin-top: 2rem;
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+}
+
+.experiments-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+ background: var(--light-bg);
+}
+
+.experiment-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.experiment-card:hover {
+ transform: translateY(-5px);
+}
+
+.experiment-btn {
+ background: var(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-top: 1rem;
+}
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0,0,0,0.8);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ max-width: 600px;
+ width: 90%;
+ max-height: 90vh;
+ overflow-y: auto;
+ position: relative;
+}
+
+.close-btn {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ cursor: pointer;
+ font-size: 1.5rem;
+}
+
+.hidden {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .experiments-grid {
+ padding: 2rem 1rem;
+ }
+}
\ No newline at end of file