commit 81036353a98da787af3b9b0d75f3863bd4c1cdc6
Author: root <root@hub.scroll.pub>
Date: 2025-01-15 23:52:52 +0000
Subject: Initial commit
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2ecd62e
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,105 @@
+buildHtml
+baseUrl https://viz.scroll.pub
+metaTags
+editButton /edit.html
+title Graph Viz - Interactive Network Visualization
+style.css
+header
+ class hero
+ nav
+ div GraphViz
+ class logo
+ div
+ class nav-links
+ a Create
+ href #canvas
+ a Examples
+ href #examples
+ a Guide
+ href #guide
+ a Share
+ class cta-button
+ href #share
+ div
+ class hero-content
+ h1 Visualize Your Networks
+ p Create beautiful, interactive graph visualizations with simple commands
+ div
+ class action-buttons
+ button Start Drawing
+ id startButton
+ class primary-button
+ button View Examples
+ class secondary-button
+main
+ section
+ id canvas
+ class graph-canvas
+ canvas
+ id graphCanvas
+ div
+ class toolbar
+ button
+ class tool-btn
+ data-tool add-node
+ Add Node
+ button
+ class tool-btn
+ data-tool add-edge
+ Add Edge
+ button
+ class tool-btn
+ data-tool delete
+ Delete
+ section
+ id examples
+ class example-gallery
+ h2 Example Visualizations
+ div
+ class gallery-grid
+ div
+ class example-card
+ canvas
+ class mini-graph
+ data-type social-network
+ div
+ class example-card
+ canvas
+ class mini-graph
+ data-type tree-structure
+ div
+ class example-card
+ canvas
+ class mini-graph
+ data-type neural-network
+ section
+ id guide
+ class guide-section
+ h2 Quick Guide
+ div
+ class guide-steps
+ div
+ class step
+ h3 1. Create Nodes
+ p Click the canvas to add nodes
+ div
+ class step
+ h3 2. Connect Nodes
+ p Drag between nodes to create edges
+ div
+ class step
+ h3 3. Customize
+ p Style your nodes and edges
+footer
+ div
+ class footer-content
+ p Built with love for network visualization
+ div
+ class footer-links
+ a Guide
+ href #guide
+ a Share
+ href #share
+ a Examples
+ href #examples
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..a7bde87
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01V6ottaiUcUPuwPkkJceXiQ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "For a graph visualization website, I suggest:\n\n---domain---\nviz.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://viz.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Graph Viz - Interactive Network Visualization\nstyle.css\nheader\n class hero\n nav\n div GraphViz\n class logo\n div\n class nav-links\n a Create\n href #canvas\n a Examples\n href #examples\n a Guide\n href #guide\n a Share\n class cta-button\n href #share\n div\n class hero-content\n h1 Visualize Your Networks\n p Create beautiful, interactive graph visualizations with simple commands\n div\n class action-buttons\n button Start Drawing\n id startButton\n class primary-button\n button View Examples\n class secondary-button\nmain\n section\n id canvas\n class graph-canvas\n canvas\n id graphCanvas\n div\n class toolbar\n button\n class tool-btn\n data-tool add-node\n Add Node\n button\n class tool-btn\n data-tool add-edge\n Add Edge\n button\n class tool-btn\n data-tool delete\n Delete\n section\n id examples\n class example-gallery\n h2 Example Visualizations\n div\n class gallery-grid\n div\n class example-card\n canvas\n class mini-graph\n data-type social-network\n div\n class example-card\n canvas\n class mini-graph\n data-type tree-structure\n div\n class example-card\n canvas\n class mini-graph\n data-type neural-network\n section\n id guide\n class guide-section\n h2 Quick Guide\n div\n class guide-steps\n div\n class step\n h3 1. Create Nodes\n p Click the canvas to add nodes\n div\n class step\n h3 2. Connect Nodes\n p Drag between nodes to create edges\n div\n class step\n h3 3. Customize\n p Style your nodes and edges\nfooter\n div\n class footer-content\n p Built with love for network visualization\n div\n class footer-links\n a Guide\n href #guide\n a Share\n href #share\n a Examples\n href #examples\nscript.js\n---style.css---\n:root {\n --primary-color: #2a6ee8;\n --secondary-color: #34d399;\n --background: #f8fafc;\n --text-primary: #1f2937;\n --text-secondary: #4b5563;\n --accent: #8b5cf6;\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.5;\n color: var(--text-primary);\n background: var(--background);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--accent));\n color: white;\n padding: 2rem;\n min-height: 60vh;\n display: flex;\n flex-direction: column;\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 background: linear-gradient(to right, #fff, rgba(255,255,255,0.8));\n -webkit-background-clip: text;\n color: transparent;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: opacity 0.2s;\n}\n\n.cta-button {\n background: white;\n color: var(--primary-color) !important;\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n font-weight: 500;\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}\n\n.action-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n margin-top: 2rem;\n}\n\n.primary-button, .secondary-button {\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n border: none;\n font-weight: 500;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.primary-button {\n background: white;\n color: var(--primary-color);\n}\n\n.secondary-button {\n background: rgba(255,255,255,0.1);\n color: white;\n backdrop-filter: blur(10px);\n}\n\n.graph-canvas {\n padding: 2rem;\n background: white;\n border-radius: 1rem;\n margin: 2rem;\n box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);\n}\n\ncanvas {\n width: 100%;\n height: 500px;\n border-radius: 0.5rem;\n background: #fafafa;\n}\n\n.toolbar {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.tool-btn {\n padding: 0.5rem 1rem;\n border: 1px solid var(--text-secondary);\n border-radius: 0.5rem;\n background: white;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.tool-btn:hover {\n background: var(--primary-color);\n color: white;\n border-color: var(--primary-color);\n}\n\n.example-gallery {\n padding: 4rem 2rem;\n}\n\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.example-card {\n background: white;\n border-radius: 1rem;\n padding: 1rem;\n box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);\n transition: transform 0.2s;\n}\n\n.example-card:hover {\n transform: translateY(-5px);\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 .action-buttons {\n flex-direction: column;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const canvas = document.getElementById('graphCanvas');\n const ctx = canvas.getContext('2d');\n \n // Set canvas size\n function resizeCanvas() {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n }\n \n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n \n // Graph data structure\n let nodes = [];\n let edges = [];\n let selectedTool = 'add-node';\n let selectedNode = null;\n \n // Node class\n class Node {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.radius = 20;\n }\n \n draw() {\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#2a6ee8';\n ctx.fill();\n }\n }\n \n // Edge class\n class Edge {\n constructor(startNode, endNode) {\n this.startNode = startNode;\n this.endNode = endNode;\n }\n \n draw() {\n ctx.beginPath();\n ctx.moveTo(this.startNode.x, this.startNode.y);\n ctx.lineTo(this.endNode.x, this.endNode.y);\n ctx.strokeStyle = '#4b5563';\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n }\n \n // Handle canvas clicks\n canvas.addEventListener('click', (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n if (selectedTool === 'add-node') {\n nodes.push(new Node(x, y));\n draw();\n }\n });\n \n // Tool selection\n document.querySelectorAll('.tool-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n selectedTool = btn.dataset.tool;\n document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n });\n });\n \n // Draw function\n function draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n edges.forEach(edge => edge.draw());\n nodes.forEach(node => node.draw());\n }\n \n // Animation loop\n function animate() {\n draw();\n requestAnimationFrame(animate);\n }\n \n animate();\n});\n---end---\n\nThis implementation creates an interactive graph visualization tool with a clean, modern interface. Users can create nodes and edges, with a responsive canvas that adapts to screen size. The design features a beautiful gradient header, smooth animations, and an intuitive toolbar for different graph operations. The CSS includes modern features like CSS variables, flexible layouts, and smooth transitions. The JavaScript provides basic graph visualization functionality with canvas-based rendering and interactive tools for node/edge manipulation."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 818,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2562
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..803dce1
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# viz1.scroll.pub
+
+website generated by Claude from prompt: graph viz
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3a2f3b0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,89 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.getElementById('graphCanvas');
+ const ctx = canvas.getContext('2d');
+
+ // Set canvas size
+ function resizeCanvas() {
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+ }
+
+ resizeCanvas();
+ window.addEventListener('resize', resizeCanvas);
+
+ // Graph data structure
+ let nodes = [];
+ let edges = [];
+ let selectedTool = 'add-node';
+ let selectedNode = null;
+
+ // Node class
+ class Node {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.radius = 20;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = '#2a6ee8';
+ ctx.fill();
+ }
+ }
+
+ // Edge class
+ class Edge {
+ constructor(startNode, endNode) {
+ this.startNode = startNode;
+ this.endNode = endNode;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.moveTo(this.startNode.x, this.startNode.y);
+ ctx.lineTo(this.endNode.x, this.endNode.y);
+ ctx.strokeStyle = '#4b5563';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ }
+ }
+
+ // Handle canvas clicks
+ canvas.addEventListener('click', (e) => {
+ const rect = canvas.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ if (selectedTool === 'add-node') {
+ nodes.push(new Node(x, y));
+ draw();
+ }
+ });
+
+ // Tool selection
+ document.querySelectorAll('.tool-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ selectedTool = btn.dataset.tool;
+ document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ });
+ });
+
+ // Draw function
+ function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ edges.forEach(edge => edge.draw());
+ nodes.forEach(node => node.draw());
+ }
+
+ // Animation loop
+ function animate() {
+ draw();
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5f5170a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,175 @@
+:root {
+ --primary-color: #2a6ee8;
+ --secondary-color: #34d399;
+ --background: #f8fafc;
+ --text-primary: #1f2937;
+ --text-secondary: #4b5563;
+ --accent: #8b5cf6;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.5;
+ color: var(--text-primary);
+ background: var(--background);
+}
+
+.hero {
+ background: linear-gradient(135deg, var(--primary-color), var(--accent));
+ color: white;
+ padding: 2rem;
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(to right, #fff, rgba(255,255,255,0.8));
+ -webkit-background-clip: text;
+ color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: opacity 0.2s;
+}
+
+.cta-button {
+ background: white;
+ color: var(--primary-color) !important;
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
+ font-weight: 500;
+}
+
+.hero-content {
+ text-align: center;
+ margin: auto;
+ max-width: 800px;
+}
+
+.hero-content h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+}
+
+.action-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin-top: 2rem;
+}
+
+.primary-button, .secondary-button {
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ border: none;
+ font-weight: 500;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.primary-button {
+ background: white;
+ color: var(--primary-color);
+}
+
+.secondary-button {
+ background: rgba(255,255,255,0.1);
+ color: white;
+ backdrop-filter: blur(10px);
+}
+
+.graph-canvas {
+ padding: 2rem;
+ background: white;
+ border-radius: 1rem;
+ margin: 2rem;
+ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+}
+
+canvas {
+ width: 100%;
+ height: 500px;
+ border-radius: 0.5rem;
+ background: #fafafa;
+}
+
+.toolbar {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.tool-btn {
+ padding: 0.5rem 1rem;
+ border: 1px solid var(--text-secondary);
+ border-radius: 0.5rem;
+ background: white;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.tool-btn:hover {
+ background: var(--primary-color);
+ color: white;
+ border-color: var(--primary-color);
+}
+
+.example-gallery {
+ padding: 4rem 2rem;
+}
+
+.gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.example-card {
+ background: white;
+ border-radius: 1rem;
+ padding: 1rem;
+ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+ transition: transform 0.2s;
+}
+
+.example-card:hover {
+ transform: translateY(-5px);
+}
+
+@media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .action-buttons {
+ flex-direction: column;
+ }
+}
\ No newline at end of file