Changes to solanaid.scroll.pub

root
root
14 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
    +
  • Features
    • +
  • How It Works
    • +
  • Download
    • +
    +
    +
    +
    +
    +
    +
    +

    Identify Solana Tokens Instantly

    +

    Your trusted Chrome extension for quick and accurate Solana token identification

    + Get Extension
    +
    +
    +
    +
    +
    +

    Features

    +
    +
    +
    🔍
    +

    Real-time Detection

    +

    Instantly identify Solana tokens on any webpage

    +
    +
    +
    📊
    +

    Token Analytics

    +

    View detailed token information and metrics

    +
    +
    +
    🔒
    +

    Secure

    +

    Safe and private token identification

    +
    +
    +
    +
    +
    +
    +
    +

    How It Works

    +
    +
    + 1
    +

    Install Extension

    +

    Add SolanaID to Chrome browser

    +
    +
    + 2
    +

    Browse

    +

    Visit any website with Solana tokens

    +
    +
    + 3
    +

    Identify

    +

    Click the extension icon to view token details

    +
    +
    +
    +
    +
    +
    +
    +

    Download Now

    +

    Available on Chrome Web Store

    + Add to Chrome
    +
    +
    +
    +
    +
    +
    +
    +
    + Privacy Policy
    + Terms of Use
    + Contact
    +
    +

    Made with ❤️ for the Solana community

    +
    +
    +
    index.scroll
    Changed around line 1
    + 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
    prompt.json
    Changed around line 1
    + {
    + "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
    \n \n
    \n\n
    \n
    \n
    \n

    Identify Solana Tokens Instantly

    \n

    Your trusted Chrome extension for quick and accurate Solana token identification

    \n Get Extension\n
    \n
    \n\n
    \n
    \n

    Features

    \n
    \n
    \n
    🔍
    \n

    Real-time Detection

    \n

    Instantly identify Solana tokens on any webpage

    \n
    \n
    \n
    📊
    \n

    Token Analytics

    \n

    View detailed token information and metrics

    \n
    \n
    \n
    🔒
    \n

    Secure

    \n

    Safe and private token identification

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

    How It Works

    \n
    \n
    \n 1\n

    Install Extension

    \n

    Add SolanaID to Chrome browser

    \n
    \n
    \n 2\n

    Browse

    \n

    Visit any website with Solana tokens

    \n
    \n
    \n 3\n

    Identify

    \n

    Click the extension icon to view token details

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

    Download Now

    \n

    Available on Chrome Web Store

    \n Add to Chrome\n
    \n
    \n
    \n\n\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
    + }
    + }
    readme.scroll
    Changed around line 1
    + # solanaid.scroll.pub
    +
    + website generated by Claude from prompt: 做一个chrome插件的网站，用于识别solana代币
    script.js
    Changed around line 1
    + 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)';
    + });
    + });
    + });
    style.css
    Changed around line 1
    + :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;
    + }
    + }