commit bb22cd81456c8c790abd5a319e4cdcc0a69e95b1
Author: root <root@hub.scroll.pub>
Date: 2025-01-08 09:56:42 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..1b0bab7
--- /dev/null
+++ b/body.html
@@ -0,0 +1,90 @@
+<header>
+ <nav>
+ <div class="logo">SolanaID</div>
+ <div class="menu-toggle" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </div>
+ <ul class="nav-links">
+ <li><a href="#features">Features</a></li>
+ <li><a href="#how-it-works">How It Works</a></li>
+ <li><a href="#download">Download</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="container">
+ <h1>Identify Solana Tokens Instantly</h1>
+ <p>Your trusted Chrome extension for quick and accurate Solana token identification</p>
+ <a href="#download" class="cta-button">Get Extension</a>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <div class="container">
+ <h2>Features</h2>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <div class="feature-icon">🔍</div>
+ <h3>Real-time Detection</h3>
+ <p>Instantly identify Solana tokens on any webpage</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">📊</div>
+ <h3>Token Analytics</h3>
+ <p>View detailed token information and metrics</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🔒</div>
+ <h3>Secure</h3>
+ <p>Safe and private token identification</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="how-it-works" class="how-it-works">
+ <div class="container">
+ <h2>How It Works</h2>
+ <div class="steps">
+ <div class="step">
+ <span class="step-number">1</span>
+ <h3>Install Extension</h3>
+ <p>Add SolanaID to Chrome browser</p>
+ </div>
+ <div class="step">
+ <span class="step-number">2</span>
+ <h3>Browse</h3>
+ <p>Visit any website with Solana tokens</p>
+ </div>
+ <div class="step">
+ <span class="step-number">3</span>
+ <h3>Identify</h3>
+ <p>Click the extension icon to view token details</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="download" class="download">
+ <div class="container">
+ <h2>Download Now</h2>
+ <p>Available on Chrome Web Store</p>
+ <a href="#" class="download-button">Add to Chrome</a>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="container">
+ <div class="footer-content">
+ <div class="footer-links">
+ <a href="#">Privacy Policy</a>
+ <a href="#">Terms of Use</a>
+ <a href="#">Contact</a>
+ </div>
+ <p>Made with ❤️ for the Solana community</p>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..1140aa9
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://solanaid.scroll.pub
+metaTags
+ description "Identify Solana tokens instantly with our powerful Chrome extension"
+ keywords "Solana, crypto, token identifier, blockchain, Chrome extension"
+ author "SolanaID Team"
+editButton /edit.html
+title SolanaID - Solana Token Identifier Extension
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..0b8d558
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_014xcSKK48Yg2hvA8vMTYJsU",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website for a Chrome extension that identifies Solana tokens.\n\n---domain---\nsolanaid.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://solanaid.scroll.pub\nmetaTags\n description \"Identify Solana tokens instantly with our powerful Chrome extension\"\n keywords \"Solana, crypto, token identifier, blockchain, Chrome extension\"\n author \"SolanaID Team\"\neditButton /edit.html\ntitle SolanaID - Solana Token Identifier Extension\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">SolanaID</div>\n <div class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </div>\n <ul class=\"nav-links\">\n <li><a href=\"#features\">Features</a></li>\n <li><a href=\"#how-it-works\">How It Works</a></li>\n <li><a href=\"#download\">Download</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"container\">\n <h1>Identify Solana Tokens Instantly</h1>\n <p>Your trusted Chrome extension for quick and accurate Solana token identification</p>\n <a href=\"#download\" class=\"cta-button\">Get Extension</a>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <div class=\"container\">\n <h2>Features</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🔍</div>\n <h3>Real-time Detection</h3>\n <p>Instantly identify Solana tokens on any webpage</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📊</div>\n <h3>Token Analytics</h3>\n <p>View detailed token information and metrics</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🔒</div>\n <h3>Secure</h3>\n <p>Safe and private token identification</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"how-it-works\" class=\"how-it-works\">\n <div class=\"container\">\n <h2>How It Works</h2>\n <div class=\"steps\">\n <div class=\"step\">\n <span class=\"step-number\">1</span>\n <h3>Install Extension</h3>\n <p>Add SolanaID to Chrome browser</p>\n </div>\n <div class=\"step\">\n <span class=\"step-number\">2</span>\n <h3>Browse</h3>\n <p>Visit any website with Solana tokens</p>\n </div>\n <div class=\"step\">\n <span class=\"step-number\">3</span>\n <h3>Identify</h3>\n <p>Click the extension icon to view token details</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"download\" class=\"download\">\n <div class=\"container\">\n <h2>Download Now</h2>\n <p>Available on Chrome Web Store</p>\n <a href=\"#\" class=\"download-button\">Add to Chrome</a>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"container\">\n <div class=\"footer-content\">\n <div class=\"footer-links\">\n <a href=\"#\">Privacy Policy</a>\n <a href=\"#\">Terms of Use</a>\n <a href=\"#\">Contact</a>\n </div>\n <p>Made with ❤️ for the Solana community</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #9945FF;\n --secondary-color: #14F195;\n --background-color: #1A1A1A;\n --text-color: #FFFFFF;\n --card-background: #2A2A2A;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n/* Header & Navigation */\nheader {\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n background: rgba(26, 26, 26, 0.95);\n backdrop-filter: blur(10px);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 0;\n}\n\n.logo {\n font-size: 24px;\n font-weight: bold;\n background: linear-gradient(45deg, 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 list-style: none;\n gap: 30px;\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n/* Hero Section */\n.hero {\n padding: 160px 0 80px;\n text-align: center;\n background: linear-gradient(135deg, rgba(153, 69, 255, 0.1), rgba(20, 241, 149, 0.1));\n}\n\n.hero h1 {\n font-size: 48px;\n margin-bottom: 20px;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n/* Buttons */\n.cta-button, .download-button {\n display: inline-block;\n padding: 15px 30px;\n border-radius: 30px;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n color: var(--text-color);\n text-decoration: none;\n font-weight: bold;\n transition: var(--transition);\n border: none;\n cursor: pointer;\n}\n\n.cta-button:hover, .download-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(153, 69, 255, 0.3);\n}\n\n/* Features Section */\n.features {\n padding: 80px 0;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 30px;\n margin-top: 40px;\n}\n\n.feature-card {\n background: var(--card-background);\n padding: 30px;\n border-radius: 15px;\n text-align: center;\n transition: var(--transition);\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}\n\n.feature-icon {\n font-size: 40px;\n margin-bottom: 20px;\n}\n\n/* How It Works Section */\n.steps {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 30px;\n margin-top: 40px;\n}\n\n.step {\n text-align: center;\n position: relative;\n}\n\n.step-number {\n display: inline-block;\n width: 40px;\n height: 40px;\n line-height: 40px;\n border-radius: 50%;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n margin-bottom: 20px;\n}\n\n/* Footer */\nfooter {\n background: var(--card-background);\n padding: 40px 0;\n margin-top: 80px;\n}\n\n.footer-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n}\n\n.footer-links {\n display: flex;\n gap: 20px;\n}\n\n.footer-links a {\n color: var(--text-color);\n text-decoration: none;\n transition: var(--transition);\n}\n\n.footer-links a:hover {\n color: var(--secondary-color);\n}\n\n/* Mobile Responsive */\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n cursor: pointer;\n }\n\n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text-color);\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background: var(--background-color);\n padding: 20px;\n flex-direction: column;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero h1 {\n font-size: 36px;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle.addEventListener('click', function() {\n navLinks.classList.toggle('active');\n \n // Animate hamburger menu\n const spans = menuToggle.querySelectorAll('span');\n spans.forEach(span => span.classList.toggle('active'));\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 \n if (target) {\n window.scrollTo({\n top: target.offsetTop - 80,\n behavior: 'smooth'\n });\n \n // Close mobile menu if open\n if (navLinks.classList.contains('active')) {\n navLinks.classList.remove('active');\n }\n }\n });\n });\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n // Observe all sections\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n\n // Add hover effects to feature cards\n const featureCards = document.querySelectorAll('.feature-card');\n featureCards.forEach(card => {\n card.addEventListener('mouseover', function() {\n this.style.transform = 'translateY(-10px)';\n });\n \n card.addEventListener('mouseout', function() {\n this.style.transform = 'translateY(0)';\n });\n });\n});\n\n---end---\n\nThis website features a modern, dark theme with purple and green accents inspired by Solana's brand colors. It includes smooth animations, responsive design, and interactive elements. The layout is clean and professional, with clear sections for features, how-it-works, and download information. The design uses gradient effects and subtle animations to create an engaging user experience while maintaining functionality and accessibility."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 288,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3206
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..6c4dec3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# solanaid.scroll.pub
+
+website generated by Claude from prompt: 做一个chrome插件的网站，用于识别solana代币
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..2c94341
--- /dev/null
+++ b/script.js
@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', function() {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger menu
+ const spans = menuToggle.querySelectorAll('span');
+ spans.forEach(span => span.classList.toggle('active'));
+ });
+
+ // 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'));
+
+ if (target) {
+ window.scrollTo({
+ top: target.offsetTop - 80,
+ behavior: 'smooth'
+ });
+
+ // Close mobile menu if open
+ if (navLinks.classList.contains('active')) {
+ navLinks.classList.remove('active');
+ }
+ }
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ observer.unobserve(entry.target);
+ }
+ });
+ }, observerOptions);
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+
+ // Add hover effects to feature cards
+ const featureCards = document.querySelectorAll('.feature-card');
+ featureCards.forEach(card => {
+ card.addEventListener('mouseover', function() {
+ this.style.transform = 'translateY(-10px)';
+ });
+
+ card.addEventListener('mouseout', function() {
+ this.style.transform = 'translateY(0)';
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..490dccb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,221 @@
+:root {
+ --primary-color: #9945FF;
+ --secondary-color: #14F195;
+ --background-color: #1A1A1A;
+ --text-color: #FFFFFF;
+ --card-background: #2A2A2A;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Inter', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* Header & Navigation */
+header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ background: rgba(26, 26, 26, 0.95);
+ backdrop-filter: blur(10px);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 0;
+}
+
+.logo {
+ font-size: 24px;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 30px;
+}
+
+.nav-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--secondary-color);
+}
+
+/* Hero Section */
+.hero {
+ padding: 160px 0 80px;
+ text-align: center;
+ background: linear-gradient(135deg, rgba(153, 69, 255, 0.1), rgba(20, 241, 149, 0.1));
+}
+
+.hero h1 {
+ font-size: 48px;
+ margin-bottom: 20px;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+/* Buttons */
+.cta-button, .download-button {
+ display: inline-block;
+ padding: 15px 30px;
+ border-radius: 30px;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ color: var(--text-color);
+ text-decoration: none;
+ font-weight: bold;
+ transition: var(--transition);
+ border: none;
+ cursor: pointer;
+}
+
+.cta-button:hover, .download-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(153, 69, 255, 0.3);
+}
+
+/* Features Section */
+.features {
+ padding: 80px 0;
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 30px;
+ margin-top: 40px;
+}
+
+.feature-card {
+ background: var(--card-background);
+ padding: 30px;
+ border-radius: 15px;
+ text-align: center;
+ transition: var(--transition);
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.feature-icon {
+ font-size: 40px;
+ margin-bottom: 20px;
+}
+
+/* How It Works Section */
+.steps {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 30px;
+ margin-top: 40px;
+}
+
+.step {
+ text-align: center;
+ position: relative;
+}
+
+.step-number {
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ border-radius: 50%;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ margin-bottom: 20px;
+}
+
+/* Footer */
+footer {
+ background: var(--card-background);
+ padding: 40px 0;
+ margin-top: 80px;
+}
+
+.footer-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.footer-links {
+ display: flex;
+ gap: 20px;
+}
+
+.footer-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.footer-links a:hover {
+ color: var(--secondary-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: block;
+ cursor: pointer;
+ }
+
+ .menu-toggle span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ margin: 5px 0;
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background: var(--background-color);
+ padding: 20px;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 36px;
+ }
+}