commit afd4b4c3b33e0cc78ae543f00c1ba76363de6b7a
Author: root <root@hub.scroll.pub>
Date: 2025-01-05 21:30:45 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..1145d08
--- /dev/null
+++ b/body.html
@@ -0,0 +1,62 @@
+<header>
+ <nav>
+ <div class="logo">Sets²</div>
+ <div class="nav-links">
+ <a href="#basics">Basics</a>
+ <a href="#operations">Operations</a>
+ <a href="#playground">Playground</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Explore Set Theory</h1>
+ <p>An interactive journey into mathematical sets</p>
+ </section>
+
+ <section id="basics" class="card-grid">
+ <h2>Set Basics</h2>
+ <div class="cards">
+ <div class="card">
+ <h3>Definition</h3>
+ <p>A set is a collection of distinct objects</p>
+ </div>
+ <div class="card">
+ <h3>Notation</h3>
+ <p>Sets are written as {a, b, c}</p>
+ </div>
+ <div class="card">
+ <h3>Properties</h3>
+ <p>Order doesn't matter, duplicates are ignored</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="operations" class="operations">
+ <h2>Set Operations</h2>
+ <div class="operation-container">
+ <div class="operation" id="union">
+ <h3>Union</h3>
+ <div class="venn-diagram"></div>
+ </div>
+ <div class="operation" id="intersection">
+ <h3>Intersection</h3>
+ <div class="venn-diagram"></div>
+ </div>
+ </div>
+ </section>
+
+ <section id="playground" class="playground">
+ <h2>Interactive Playground</h2>
+ <div class="set-builder">
+ <input type="text" id="setInput" placeholder="Enter set elements (comma separated)">
+ <button id="createSet">Create Set</button>
+ </div>
+ <div id="setDisplay"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Built with Scroll | <a href="https://github.com/breck7/sets.scroll.pub">Source</a></p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..65ff5fd
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://sets2.scroll.pub
+metaTags
+editButton /edit.html
+title Sets2 - Modern Set Theory Explorer
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..af92c5f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_015PqJpq5bTRXk4h2CmiTAFw",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "For a website about sets and set theory, I suggest:\n\n---domain---\nsets2.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://sets2.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Sets2 - Modern Set Theory Explorer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Sets²</div>\n <div class=\"nav-links\">\n <a href=\"#basics\">Basics</a>\n <a href=\"#operations\">Operations</a>\n <a href=\"#playground\">Playground</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Explore Set Theory</h1>\n <p>An interactive journey into mathematical sets</p>\n </section>\n\n <section id=\"basics\" class=\"card-grid\">\n <h2>Set Basics</h2>\n <div class=\"cards\">\n <div class=\"card\">\n <h3>Definition</h3>\n <p>A set is a collection of distinct objects</p>\n </div>\n <div class=\"card\">\n <h3>Notation</h3>\n <p>Sets are written as {a, b, c}</p>\n </div>\n <div class=\"card\">\n <h3>Properties</h3>\n <p>Order doesn't matter, duplicates are ignored</p>\n </div>\n </div>\n </section>\n\n <section id=\"operations\" class=\"operations\">\n <h2>Set Operations</h2>\n <div class=\"operation-container\">\n <div class=\"operation\" id=\"union\">\n <h3>Union</h3>\n <div class=\"venn-diagram\"></div>\n </div>\n <div class=\"operation\" id=\"intersection\">\n <h3>Intersection</h3>\n <div class=\"venn-diagram\"></div>\n </div>\n </div>\n </section>\n\n <section id=\"playground\" class=\"playground\">\n <h2>Interactive Playground</h2>\n <div class=\"set-builder\">\n <input type=\"text\" id=\"setInput\" placeholder=\"Enter set elements (comma separated)\">\n <button id=\"createSet\">Create Set</button>\n </div>\n <div id=\"setDisplay\"></div>\n </section>\n</main>\n\n<footer>\n <p>Built with Scroll | <a href=\"https://github.com/breck7/sets.scroll.pub\">Source</a></p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6c8f;\n --secondary: #f0f7ff;\n --accent: #ff6b6b;\n --text: #333;\n --background: #fff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 2rem;\n color: white;\n font-weight: bold;\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);\n}\n\nmain {\n margin-top: 4rem;\n padding: 2rem;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 0;\n background: var(--secondary);\n border-radius: 1rem;\n margin-bottom: 3rem;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.card-grid {\n margin: 3rem 0;\n}\n\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.operations {\n margin: 3rem 0;\n}\n\n.operation-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.operation {\n text-align: center;\n padding: 2rem;\n background: var(--secondary);\n border-radius: 1rem;\n}\n\n.venn-diagram {\n width: 200px;\n height: 200px;\n margin: 2rem auto;\n position: relative;\n border: 2px solid var(--primary);\n border-radius: 50%;\n}\n\n.playground {\n margin: 3rem 0;\n}\n\n.set-builder {\n display: flex;\n gap: 1rem;\n margin-bottom: 2rem;\n}\n\ninput {\n flex: 1;\n padding: 0.8rem;\n border: 2px solid var(--primary);\n border-radius: 0.5rem;\n font-size: 1rem;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\nbutton:hover {\n background: var(--accent);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--secondary);\n margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n \n .cards {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Set creation functionality\n const setInput = document.getElementById('setInput');\n const createSetBtn = document.getElementById('createSet');\n const setDisplay = document.getElementById('setDisplay');\n\n createSetBtn.addEventListener('click', () => {\n const elements = setInput.value.split(',').map(e => e.trim());\n const uniqueElements = [...new Set(elements)];\n \n if (elements.length > 0 && elements[0] !== '') {\n const setElement = document.createElement('div');\n setElement.classList.add('card');\n setElement.innerHTML = `\n <h3>Created Set</h3>\n <p>{${uniqueElements.join(', ')}}</p>\n `;\n setDisplay.prepend(setElement);\n }\n \n setInput.value = '';\n });\n\n // Smooth scrolling for navigation\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Animation for cards on scroll\n const observerOptions = {\n threshold: 0.1\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'all 0.5s ease-out';\n observer.observe(card);\n });\n});\n\n---end---\n\nThis implementation creates a modern, interactive website for exploring set theory. It features:\n\n1. Clean, semantic HTML5 structure\n2. Beautiful gradient text and smooth animations\n3. Responsive design that works on all devices\n4. Interactive set creation playground\n5. Smooth scrolling navigation\n6. Intersection Observer for scroll animations\n7. CSS variables for easy theming\n8. Accessible navigation and content structure\n9. Modern card-based layout\n10. Beautiful color scheme and visual hierarchy\n\nThe design is minimal yet engaging, with subtle animations and interactions that make the experience feel polished and professional."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 287,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2444
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..5e93b1f
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# sets2.scroll.pub
+Website generated by Claude from prompt: https://github.com/breck7/sets.scroll.pub sets2
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8bd3e8b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Set creation functionality
+ const setInput = document.getElementById('setInput');
+ const createSetBtn = document.getElementById('createSet');
+ const setDisplay = document.getElementById('setDisplay');
+
+ createSetBtn.addEventListener('click', () => {
+ const elements = setInput.value.split(',').map(e => e.trim());
+ const uniqueElements = [...new Set(elements)];
+
+ if (elements.length > 0 && elements[0] !== '') {
+ const setElement = document.createElement('div');
+ setElement.classList.add('card');
+ setElement.innerHTML = `
+ <h3>Created Set</h3>
+ <p>{${uniqueElements.join(', ')}}</p>
+ `;
+ setDisplay.prepend(setElement);
+ }
+
+ setInput.value = '';
+ });
+
+ // Smooth scrolling for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Animation for cards on scroll
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'all 0.5s ease-out';
+ observer.observe(card);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b7ae362
--- /dev/null
+++ b/style.css
@@ -0,0 +1,179 @@
+:root {
+ --primary: #2a6c8f;
+ --secondary: #f0f7ff;
+ --accent: #ff6b6b;
+ --text: #333;
+ --background: #fff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+}
+
+header {
+ background: var(--primary);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 100;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 2rem;
+ color: white;
+ font-weight: bold;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--accent);
+}
+
+main {
+ margin-top: 4rem;
+ padding: 2rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 0;
+ background: var(--secondary);
+ border-radius: 1rem;
+ margin-bottom: 3rem;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--primary), var(--accent));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.card-grid {
+ margin: 3rem 0;
+}
+
+.cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.operations {
+ margin: 3rem 0;
+}
+
+.operation-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.operation {
+ text-align: center;
+ padding: 2rem;
+ background: var(--secondary);
+ border-radius: 1rem;
+}
+
+.venn-diagram {
+ width: 200px;
+ height: 200px;
+ margin: 2rem auto;
+ position: relative;
+ border: 2px solid var(--primary);
+ border-radius: 50%;
+}
+
+.playground {
+ margin: 3rem 0;
+}
+
+.set-builder {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+input {
+ flex: 1;
+ padding: 0.8rem;
+ border: 2px solid var(--primary);
+ border-radius: 0.5rem;
+ font-size: 1rem;
+}
+
+button {
+ padding: 0.8rem 1.5rem;
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+button:hover {
+ background: var(--accent);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--secondary);
+ margin-top: 3rem;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .cards {
+ grid-template-columns: 1fr;
+ }
+}