index.scroll
Changed around line 1
+ 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
prompt.json
Changed around line 1
+ {
+ "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
+ }
+ }
readme.scroll
Changed around line 1
+ # viz1.scroll.pub
+
+ website generated by Claude from prompt: graph viz
script.js
Changed around line 1
+ 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();
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }