commit 1a64dde78e258ee7287c736bda4cc6129f55eb42
Author: root <root@hub.scroll.pub>
Date: 2025-01-12 22:13:54 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..713bc3d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,84 @@
+<header>
+ <nav>
+ <div class="logo">EVM on Scroll</div>
+ <div class="menu-toggle"></div>
+ <ul class="nav-links">
+ <li><a href="#overview">Overview</a></li>
+ <li><a href="#features">Features</a></li>
+ <li><a href="#architecture">Architecture</a></li>
+ <li><a href="#developers">Developers</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <h1>EVM on Scroll</h1>
+ <p class="tagline">Scaling Ethereum with Zero-Knowledge Proofs</p>
+ <div class="hero-cta">
+ <button class="primary-btn">Get Started</button>
+ <button class="secondary-btn">Documentation</button>
+ </div>
+ </section>
+
+ <section id="overview">
+ <h2>Overview</h2>
+ <div class="card-container">
+ <div class="card">
+ <h3>Ethereum Compatible</h3>
+ <p>Full EVM compatibility with native Solidity support</p>
+ </div>
+ <div class="card">
+ <h3>Scalable</h3>
+ <p>High throughput with minimal gas fees</p>
+ </div>
+ <div class="card">
+ <h3>Secure</h3>
+ <p>Zero-Knowledge proof security guarantees</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="features">
+ <h2>Key Features</h2>
+ <div class="feature-grid">
+ <div class="feature">
+ <h3>Native EVM Support</h3>
+ <p>Deploy existing Ethereum contracts without modification</p>
+ </div>
+ <div class="feature">
+ <h3>ZK Rollups</h3>
+ <p>Advanced scaling with proof verification on Layer 1</p>
+ </div>
+ <div class="feature">
+ <h3>Developer Tools</h3>
+ <p>Comprehensive SDK and testing framework</p>
+ </div>
+ <div class="feature">
+ <h3>Low Latency</h3>
+ <p>Fast transaction confirmation times</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Resources</h4>
+ <ul>
+ <li><a href="#docs">Documentation</a></li>
+ <li><a href="#github">GitHub</a></li>
+ <li><a href="#blog">Blog</a></li>
+ </ul>
+ </div>
+ <div class="footer-section">
+ <h4>Community</h4>
+ <ul>
+ <li><a href="#discord">Discord</a></li>
+ <li><a href="#twitter">Twitter</a></li>
+ <li><a href="#telegram">Telegram</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..96436de
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://evmonscroll.scroll.pub
+metaTags
+editButton /edit.html
+title EVM on Scroll - The Ultimate Guide
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d301f7b
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_011v5jpHsuX6vvbfcQDzi7An",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a website about EVM (Ethereum Virtual Machine) on the Scroll blockchain.\n\n---domain---\nevmonscroll.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://evmonscroll.scroll.pub\nmetaTags\neditButton /edit.html\ntitle EVM on Scroll - The Ultimate Guide\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">EVM on Scroll</div>\n <div class=\"menu-toggle\"></div>\n <ul class=\"nav-links\">\n <li><a href=\"#overview\">Overview</a></li>\n <li><a href=\"#features\">Features</a></li>\n <li><a href=\"#architecture\">Architecture</a></li>\n <li><a href=\"#developers\">Developers</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>EVM on Scroll</h1>\n <p class=\"tagline\">Scaling Ethereum with Zero-Knowledge Proofs</p>\n <div class=\"hero-cta\">\n <button class=\"primary-btn\">Get Started</button>\n <button class=\"secondary-btn\">Documentation</button>\n </div>\n </section>\n\n <section id=\"overview\">\n <h2>Overview</h2>\n <div class=\"card-container\">\n <div class=\"card\">\n <h3>Ethereum Compatible</h3>\n <p>Full EVM compatibility with native Solidity support</p>\n </div>\n <div class=\"card\">\n <h3>Scalable</h3>\n <p>High throughput with minimal gas fees</p>\n </div>\n <div class=\"card\">\n <h3>Secure</h3>\n <p>Zero-Knowledge proof security guarantees</p>\n </div>\n </div>\n </section>\n\n <section id=\"features\">\n <h2>Key Features</h2>\n <div class=\"feature-grid\">\n <div class=\"feature\">\n <h3>Native EVM Support</h3>\n <p>Deploy existing Ethereum contracts without modification</p>\n </div>\n <div class=\"feature\">\n <h3>ZK Rollups</h3>\n <p>Advanced scaling with proof verification on Layer 1</p>\n </div>\n <div class=\"feature\">\n <h3>Developer Tools</h3>\n <p>Comprehensive SDK and testing framework</p>\n </div>\n <div class=\"feature\">\n <h3>Low Latency</h3>\n <p>Fast transaction confirmation times</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Resources</h4>\n <ul>\n <li><a href=\"#docs\">Documentation</a></li>\n <li><a href=\"#github\">GitHub</a></li>\n <li><a href=\"#blog\">Blog</a></li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h4>Community</h4>\n <ul>\n <li><a href=\"#discord\">Discord</a></li>\n <li><a href=\"#twitter\">Twitter</a></li>\n <li><a href=\"#telegram\">Telegram</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6366f1;\n --secondary-color: #818cf8;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\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-color);\n background: var(--background-color);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background: white;\n box-shadow: var(--card-shadow);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n#hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(135deg, #6366f1, #818cf8);\n color: white;\n}\n\n#hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n}\n\n.tagline {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.hero-cta {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\nbutton {\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\n.primary-btn {\n background: white;\n color: var(--primary-color);\n border: none;\n}\n\n.secondary-btn {\n background: transparent;\n color: white;\n border: 2px solid white;\n}\n\n.card-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.feature {\n text-align: center;\n padding: 2rem;\n}\n\nsection {\n padding: 4rem 2rem;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 2rem;\n color: var(--primary-color);\n}\n\nfooter {\n background: white;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.footer-section a:hover {\n color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n width: 30px;\n height: 20px;\n background: linear-gradient(\n to bottom,\n var(--text-color) 20%,\n transparent 20% 40%,\n var(--text-color) 40% 60%,\n transparent 60% 80%,\n var(--text-color) 80%\n );\n }\n\n .nav-links {\n display: none;\n }\n\n #hero h1 {\n font-size: 2.5rem;\n }\n\n .hero-cta {\n flex-direction: column;\n align-items: center;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n menuToggle.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n });\n });\n\n // Add animation 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, .feature').forEach(element => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(20px)';\n element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(element);\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2593
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..c15f359
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# evmonscroll.scroll.pub
+
+website generated by Claude from prompt: evm on scroll
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..2f60070
--- /dev/null
+++ b/script.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ });
+ });
+
+ // Add animation 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, .feature').forEach(element => {
+ element.style.opacity = '0';
+ element.style.transform = 'translateY(20px)';
+ element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(element);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bb93c68
--- /dev/null
+++ b/style.css
@@ -0,0 +1,198 @@
+:root {
+ --primary-color: #6366f1;
+ --secondary-color: #818cf8;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ background: white;
+ box-shadow: var(--card-shadow);
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+#hero {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: linear-gradient(135deg, #6366f1, #818cf8);
+ color: white;
+}
+
+#hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+}
+
+.tagline {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.hero-cta {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+}
+
+button {
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+}
+
+button:hover {
+ transform: translateY(-2px);
+}
+
+.primary-btn {
+ background: white;
+ color: var(--primary-color);
+ border: none;
+}
+
+.secondary-btn {
+ background: transparent;
+ color: white;
+ border: 2px solid white;
+}
+
+.card-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s ease;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.feature {
+ text-align: center;
+ padding: 2rem;
+}
+
+section {
+ padding: 4rem 2rem;
+}
+
+h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+ color: var(--primary-color);
+}
+
+footer {
+ background: white;
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+ color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: block;
+ width: 30px;
+ height: 20px;
+ background: linear-gradient(
+ to bottom,
+ var(--text-color) 20%,
+ transparent 20% 40%,
+ var(--text-color) 40% 60%,
+ transparent 60% 80%,
+ var(--text-color) 80%
+ );
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ #hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-cta {
+ flex-direction: column;
+ align-items: center;
+ }
+}