Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ThreadKey — Smart Contracts for Conversations</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0f0f17; | |
| color: #e2e2e2; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glow-box { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .thread-line { | |
| position: relative; | |
| } | |
| .thread-line:before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 2px; | |
| background: linear-gradient(to bottom, #3b82f6, #8b5cf6, #ec4899); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #3b82f6; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #3b82f6; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="border-b border-gray-800 py-4 px-6 fixed w-full bg-black bg-opacity-80 backdrop-blur-sm z-50"> | |
| <div class="max-w-6xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-key text-white text-sm"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">ThreadKey</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-gray-300 hover:text-white transition">About</a> | |
| <a href="#features" class="text-gray-300 hover:text-white transition">Features</a> | |
| <a href="#usecases" class="text-gray-300 hover:text-white transition">Use Cases</a> | |
| <a href="#tech" class="text-gray-300 hover:text-white transition">Technology</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium hover:opacity-90 transition"> | |
| Join Waitlist | |
| </button> | |
| <button class="md:hidden text-gray-300"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="gradient-text">Threads</span> with <br> | |
| <span class="typewriter">superpowers</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| Turn any social thread into a programmable smart wallet that holds assets, triggers logic, runs AI agents, or governs itself — all based on replies and interactions. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-6 py-3 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium hover:opacity-90 transition flex items-center justify-center"> | |
| <i class="fab fa-ethereum mr-2"></i> Try Demo | |
| </button> | |
| <button class="px-6 py-3 rounded-full border border-gray-700 text-white font-medium hover:bg-gray-800 transition flex items-center justify-center"> | |
| <i class="fas fa-book mr-2"></i> Documentation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative glow-box bg-gray-900 rounded-2xl p-1"> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden"> | |
| <div class="bg-gray-900 p-4 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700"></div> | |
| <div class="ml-3"> | |
| <div class="w-32 h-3 rounded-full bg-gray-700"></div> | |
| <div class="w-24 h-2 rounded-full bg-gray-800 mt-1"></div> | |
| </div> | |
| </div> | |
| <div class="p-4 thread-line pl-8"> | |
| <div class="mb-6"> | |
| <div class="w-10/12 h-4 rounded-full bg-gray-700 mb-2"></div> | |
| <div class="w-8/12 h-4 rounded-full bg-gray-700"></div> | |
| </div> | |
| <div class="ml-6 mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-purple-600"></div> | |
| <div class="ml-2 w-24 h-3 rounded-full bg-gray-700"></div> | |
| </div> | |
| <div class="w-9/12 h-4 rounded-full bg-gray-700 mb-2"></div> | |
| <div class="flex space-x-2 mt-2"> | |
| <div class="w-16 h-6 rounded-full bg-blue-900 flex items-center justify-center text-xs text-blue-300"> | |
| <i class="fas fa-coins mr-1"></i> 0.1 ETH | |
| </div> | |
| <div class="w-16 h-6 rounded-full bg-purple-900 flex items-center justify-center text-xs text-purple-300"> | |
| <i class="fas fa-thumbs-up mr-1"></i> Vote | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-12 mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-pink-600"></div> | |
| <div class="ml-2 w-24 h-3 rounded-full bg-gray-700"></div> | |
| </div> | |
| <div class="w-10/12 h-4 rounded-full bg-gray-700 mb-2"></div> | |
| <div class="flex space-x-2 mt-2"> | |
| <div class="w-16 h-6 rounded-full bg-blue-900 flex items-center justify-center text-xs text-blue-300"> | |
| <i class="fas fa-coins mr-1"></i> 0.5 ETH | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-3 mt-4 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700"></div> | |
| <div class="ml-3 w-full h-8 rounded-full bg-gray-700"></div> | |
| <div class="ml-3 w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-paper-plane text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full"> | |
| Powered by Base | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-6 bg-gray-900"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Tokenizing Conversations</span>, Not Just Content | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| ThreadKey makes the thread itself an actor onchain — it can hold assets, execute logic, and interact with the world. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 rounded-xl p-8 feature-card transition duration-300"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 flex items-center justify-center mb-6"> | |
| <i class="fas fa-wallet text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Smart Wallets</h3> | |
| <p class="text-gray-400"> | |
| Every thread becomes a programmable wallet that can hold ETH, stablecoins, or any other assets. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8 feature-card transition duration-300"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 flex items-center justify-center mb-6"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">AI Integration</h3> | |
| <p class="text-gray-400"> | |
| Threads can trigger AI workflows like summarization, response generation, or autonomous agents. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8 feature-card transition duration-300"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 flex items-center justify-center mb-6"> | |
| <i class="fas fa-users text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Community Governance</h3> | |
| <p class="text-gray-400"> | |
| Threads act like micro-DAOs where replies become votes that control funds and decisions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| How <span class="gradient-text">ThreadKey</span> Works | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Activate any thread with a simple reply and unlock powerful onchain capabilities. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <div class="flex"> | |
| <div class="text-2xl font-bold text-blue-500 mr-6">1</div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Activate the Thread</h3> | |
| <p class="text-gray-400"> | |
| Reply to any thread with <code class="bg-gray-800 px-2 py-1 rounded text-blue-400">/activate</code> to create a linked smart contract wallet. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-2xl font-bold text-purple-500 mr-6">2</div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Interact & Contribute</h3> | |
| <p class="text-gray-400"> | |
| Participants can add funds, vote, or trigger actions through replies, likes, or mints. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-2xl font-bold text-pink-500 mr-6">3</div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Execute Logic</h3> | |
| <p class="text-gray-400"> | |
| The thread wallet executes predefined logic based on interactions: payments, NFTs, AI, etc. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-2xl overflow-hidden glow-box"> | |
| <div class="p-6 bg-gray-800"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <div class="ml-auto text-sm text-gray-400">ThreadKey Contract</div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 font-mono text-sm overflow-x-auto"> | |
| <div class="text-blue-400">contract <span class="text-white">ThreadWallet</span> {</div> | |
| <div class="ml-4"> | |
| <div class="text-purple-400">address public</div> | |
| <div class="text-white">threadId;</div> | |
| <br> | |
| <div class="text-purple-400">mapping(address => uint256) public</div> | |
| <div class="text-white">votes;</div> | |
| <br> | |
| <div class="text-purple-400">uint256 public</div> | |
| <div class="text-white">totalFunds;</div> | |
| <br> | |
| <div class="text-blue-400">function</div> | |
| <div class="text-white">vote(bool support) external {</div> | |
| <div class="ml-4 text-gray-500">// Logic to count votes</div> | |
| <div class="text-white">}</div> | |
| <br> | |
| <div class="text-blue-400">function</div> | |
| <div class="text-white">execute() external {</div> | |
| <div class="ml-4 text-gray-500">// Execute based on votes</div> | |
| <div class="ml-4 text-gray-500">// Send funds, mint NFTs, etc.</div> | |
| <div class="text-white">}</div> | |
| </div> | |
| <div class="text-blue-400">}</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Use Cases Section --> | |
| <section id="usecases" class="py-20 px-6 bg-gray-900"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Use Cases</span> That Change Everything | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| From fundraising to storytelling, ThreadKey unlocks new possibilities for social interactions. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden feature-card transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center"> | |
| <i class="fas fa-hand-holding-usd text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Fundraising Threads</h3> | |
| <p class="text-gray-400 mb-4"> | |
| "Should we fund this project?" Replies become votes that automatically release funds when thresholds are met. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">DAO</span> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Crowdfunding</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden feature-card transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-purple-900 to-pink-900 flex items-center justify-center"> | |
| <i class="fas fa-robot text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">AI-Powered Threads</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Threads that automatically summarize discussions, generate responses, or execute AI workflows based on interactions. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-pink-900 text-pink-300 px-2 py-1 rounded-full">AI</span> | |
| <span class="text-xs bg-indigo-900 text-indigo-300 px-2 py-1 rounded-full">Automation</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden feature-card transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-pink-900 to-blue-900 flex items-center justify-center"> | |
| <i class="fas fa-trophy text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Community Challenges</h3> | |
| <p class="text-gray-400 mb-4"> | |
| "Best idea wins 1 ETH" - Thread collects submissions, community votes, and automatically rewards the winner. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">Bounties</span> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Rewards</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Section --> | |
| <section id="tech" class="py-20 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Built for <span class="gradient-text">Protocol-Level Disruption</span> | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| ThreadKey combines the best of social, blockchain, and AI into a seamless experience. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 rounded-2xl overflow-hidden mb-12"> | |
| <div class="grid md:grid-cols-4 divide-x divide-gray-800 text-center"> | |
| <div class="p-8"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fab fa-ethereum"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Base Chain</h3> | |
| <p class="text-gray-400">Low-cost, high-speed transactions</p> | |
| </div> | |
| <div class="p-8"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Social APIs</h3> | |
| <p class="text-gray-400">Farcaster, Lens, X integration</p> | |
| </div> | |
| <div class="p-8"> | |
| <div class="text-pink-500 text-4xl mb-4"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">AI Layer</h3> | |
| <p class="text-gray-400">OpenAI, Claude, AgentKit</p> | |
| </div> | |
| <div class="p-8"> | |
| <div class="text-green-500 text-4xl mb-4"> | |
| <i class="fas fa-cubes"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Modular Logic</h3> | |
| <p class="text-gray-400">Plug-and-play smart modules</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="text-2xl font-bold mb-6">Ready to Build the Future of Social?</h3> | |
| <button class="px-8 py-4 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold hover:opacity-90 transition text-lg"> | |
| Get Early Access | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12 px-6 border-t border-gray-800"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-key text-white text-sm"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">ThreadKey</span> | |
| </div> | |
| <p class="text-gray-400"> | |
| Smart contracts for conversations. Wallets with personality. Threads with power. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Demo</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-700 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-700 transition"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-700 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400"> | |
| Join our community of builders shaping the future of social. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| <p>© 2023 ThreadKey Protocol. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple typewriter effect | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const phrases = [ | |
| "superpowers", | |
| "smart wallets", | |
| "AI agents", | |
| "community DAOs", | |
| "onchain logic" | |
| ]; | |
| let currentPhrase = 0; | |
| const element = document.querySelector('.typewriter'); | |
| function typeWriter() { | |
| let i = 0; | |
| const text = phrases[currentPhrase]; | |
| element.innerHTML = ''; | |
| element.style.width = '0'; | |
| element.style.borderRight = '.15em solid #3b82f6'; | |
| function typing() { | |
| if (i < text.length) { | |
| element.innerHTML += text.charAt(i); | |
| element.style.width = (i + 1) * 10 + 'px'; | |
| i++; | |
| setTimeout(typing, 100); | |
| } else { | |
| setTimeout(erase, 2000); | |
| } | |
| } | |
| function erase() { | |
| if (i >= 0) { | |
| element.innerHTML = text.substring(0, i); | |
| element.style.width = i * 10 + 'px'; | |
| i--; | |
| setTimeout(erase, 50); | |
| } else { | |
| currentPhrase = (currentPhrase + 1) % phrases.length; | |
| setTimeout(typeWriter, 500); | |
| } | |
| } | |
| typing(); | |
| } | |
| typeWriter(); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=W3cgymnott/threadkey" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |