Changes to scroll1.scroll.pub

root
root
15 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
+
+

One Bundle.
Infinite Possibilities.

+

The complete Scroll stack for data science and analytics

+
+ import { scroll } from 'jscroll';
+
+
+
+
+
+

Why jscroll?

+
+
+

Unified Stack

+

One import. Complete access to the entire Scroll ecosystem.

+
+
+

Data Science Ready

+

Built-in analytics, visualization, and processing capabilities.

+
+
+

Zero Config

+

Works out of the box. No setup required.

+
+
+

Blazing Fast

+

Optimized for performance and minimal bundle size.

+
+
+
+
+
+

See it in Action

+
+
+
+
+
+
+
+
+
+

Ready to Begin?

+
+ npm install jscroll
+
+
+
+
+
+
+
+

Built with Scroll

+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://scroll.scroll.pub
+ metaTags
+ editButton /edit.html
+ title jscroll - The Complete Scroll Stack Bundle
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01JQpesSEnpbhiHrXPEx1BTh",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a landing page for jscroll that showcases its data science capabilities with a modern, elegant design.\n\nSuggested domain: scroll.scroll.pub (simple, memorable, and directly relates to the product)\n\n---domain---\nscroll.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://scroll.scroll.pub\nmetaTags\neditButton /edit.html\ntitle jscroll - The Complete Scroll Stack Bundle\nstyle.css\nbody.html\nscript.js\n---body.html---\n
\n \n
\n\n
\n
\n

One Bundle.
Infinite Possibilities.

\n

The complete Scroll stack for data science and analytics

\n
\n import { scroll } from 'jscroll';\n
\n
\n
\n\n
\n

Why jscroll?

\n
\n
\n

Unified Stack

\n

One import. Complete access to the entire Scroll ecosystem.

\n
\n
\n

Data Science Ready

\n

Built-in analytics, visualization, and processing capabilities.

\n
\n
\n

Zero Config

\n

Works out of the box. No setup required.

\n
\n
\n

Blazing Fast

\n

Optimized for performance and minimal bundle size.

\n
\n
\n
\n\n
\n

See it in Action

\n
\n
\n
\n
\n
\n
\n
\n\n
\n

Ready to Begin?

\n
\n npm install jscroll\n \n
\n Read the docs →\n
\n
\n\n\n---style.css---\n:root {\n --primary: #6366f1;\n --secondary: #818cf8;\n --background: #0f172a;\n --text: #e2e8f0;\n --card-bg: #1e293b;\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 background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\n.nav-header {\n position: fixed;\n width: 100%;\n top: 0;\n background: rgba(15, 23, 42, 0.8);\n backdrop-filter: blur(10px);\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem 2rem;\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 background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n color: transparent;\n}\n\n.nav-links a {\n color: var(--text);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.cta-button {\n background: var(--primary);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n transition: transform 0.2s ease;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n}\n\nh1 {\n font-size: 4rem;\n line-height: 1.2;\n margin-bottom: 1rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n color: transparent;\n}\n\n.subtitle {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.code-preview {\n background: var(--card-bg);\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n margin: 2rem 0;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.demos {\n padding: 4rem 2rem;\n}\n\n.demo-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.demo-visual {\n background: var(--card-bg);\n border-radius: 1rem;\n min-height: 400px;\n}\n\n.install-command {\n background: var(--card-bg);\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 500px;\n margin: 2rem auto;\n}\n\n.copy-button {\n background: var(--primary);\n border: none;\n color: var(--text);\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n cursor: pointer;\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 text-align: center;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .demo-container {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Demo visualization\n const demoVisual = document.getElementById('demoVisual');\n const demoCode = document.getElementById('demoCode');\n \n // Sample data visualization\n const createVisualization = () => {\n const data = Array.from({length: 50}, () => Math.random() * 100);\n const maxValue = Math.max(...data);\n \n demoVisual.innerHTML = data\n .map(value => {\n const height = (value / maxValue) * 100;\n return `
`;\n })\n .join('');\n \n demoCode.textContent = `\nconst data = getData();\nscroll.visualize(data, {\n type: 'bar',\n animate: true,\n color: '#6366f1'\n});`;\n };\n \n createVisualization();\n \n // Copy button functionality\n const copyButton = document.querySelector('.copy-button');\n copyButton.addEventListener('click', () => {\n navigator.clipboard.writeText('npm install jscroll');\n copyButton.textContent = 'Copied!';\n setTimeout(() => {\n copyButton.textContent = 'Copy';\n }, 2000);\n });\n \n // Smooth scroll for navigation\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', (e) => {\n e.preventDefault();\n document.querySelector(anchor.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n});\n---end---\n\nThis implementation features:\n- Clean, semantic HTML5 structure\n- Modern, dark-themed design with gradient accents\n- Responsive layout that works on all devices\n- Interactive demo section with data visualization\n- Smooth scrolling navigation\n- Copy-to-clipboard functionality\n- Accessible design with proper ARIA labels\n- Performance-optimized animations and transitions\n- SEO-friendly structure\n- Beautiful hover effects and micro-interactions\n\nThe design focuses on showcasing jscroll's capabilities while maintaining a professional and modern aesthetic. The dark theme with gradient accents creates a developer-friendly environment while still being visually appealing."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 309,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2675
+ }
+ }
readme.scroll
Changed around line 1
+ # scroll1.scroll.pub
+ Website generated by Claude from prompt: Make a landing page for jscroll . A bundle that includes the whole Scroll stack, and you can include with a single file and use immediately. Show it doing data science and cool stuff
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Demo visualization
+ const demoVisual = document.getElementById('demoVisual');
+ const demoCode = document.getElementById('demoCode');
+
+ // Sample data visualization
+ const createVisualization = () => {
+ const data = Array.from({length: 50}, () => Math.random() * 100);
+ const maxValue = Math.max(...data);
+
+ demoVisual.innerHTML = data
+ .map(value => {
+ const height = (value / maxValue) * 100;
+ return `
`;
+ })
+ .join('');
+
+ demoCode.textContent = `
+ const data = getData();
+ scroll.visualize(data, {
+ type: 'bar',
+ animate: true,
+ color: '#6366f1'
+ });`;
+ };
+
+ createVisualization();
+
+ // Copy button functionality
+ const copyButton = document.querySelector('.copy-button');
+ copyButton.addEventListener('click', () => {
+ navigator.clipboard.writeText('npm install jscroll');
+ copyButton.textContent = 'Copied!';
+ setTimeout(() => {
+ copyButton.textContent = 'Copy';
+ }, 2000);
+ });
+
+ // Smooth scroll for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', (e) => {
+ e.preventDefault();
+ document.querySelector(anchor.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #6366f1;
+ --secondary: #818cf8;
+ --background: #0f172a;
+ --text: #e2e8f0;
+ --card-bg: #1e293b;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+ }
+
+ .nav-header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ background: rgba(15, 23, 42, 0.8);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ }
+
+ nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ color: transparent;
+ }
+
+ .nav-links a {
+ color: var(--text);
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+ }
+
+ .cta-button {
+ background: var(--primary);
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
+ transition: transform 0.2s ease;
+ }
+
+ .cta-button:hover {
+ transform: translateY(-2px);
+ }
+
+ .hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ }
+
+ h1 {
+ font-size: 4rem;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ color: transparent;
+ }
+
+ .subtitle {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ .code-preview {
+ background: var(--card-bg);
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ margin: 2rem 0;
+ }
+
+ .feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .feature-card {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ transition: transform 0.3s ease;
+ }
+
+ .feature-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .demos {
+ padding: 4rem 2rem;
+ }
+
+ .demo-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .demo-visual {
+ background: var(--card-bg);
+ border-radius: 1rem;
+ min-height: 400px;
+ }
+
+ .install-command {
+ background: var(--card-bg);
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 500px;
+ margin: 2rem auto;
+ }
+
+ .copy-button {
+ background: var(--primary);
+ border: none;
+ color: var(--text);
+ padding: 0.5rem 1rem;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ }
+
+ footer {
+ background: var(--card-bg);
+ padding: 2rem;
+ margin-top: 4rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .demo-container {
+ grid-template-columns: 1fr;
+ }
+ }