Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vibecode | Onchain Replit with Vibes</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0a0e14; | |
| --neon-green: #00ff99; | |
| --neon-cyan: #66fff9; | |
| --neon-purple: #ab7cf9; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: white; | |
| font-family: 'IBM Plex Mono', monospace; | |
| overflow-x: hidden; | |
| } | |
| .pixel-font { | |
| font-family: 'Press Start 2P', cursive; | |
| } | |
| .terminal-font { | |
| font-family: 'VT323', monospace; | |
| } | |
| .neon-green { | |
| color: var(--neon-green); | |
| text-shadow: 0 0 5px var(--neon-green); | |
| } | |
| .neon-cyan { | |
| color: var(--neon-cyan); | |
| text-shadow: 0 0 5px var(--neon-cyan); | |
| } | |
| .neon-purple { | |
| color: var(--neon-purple); | |
| text-shadow: 0 0 5px var(--neon-purple); | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-purple); | |
| } | |
| .scanlines { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scanlines:before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| rgba(255, 255, 255, 0.05) 50%, | |
| transparent 100% | |
| ); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--bg-dark); | |
| } | |
| .glitch::before { | |
| left: 2px; | |
| text-shadow: -2px 0 var(--neon-purple); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim 5s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 var(--neon-cyan); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim2 5s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(31px, 9999px, 94px, 0); } | |
| 10% { clip: rect(112px, 9999px, 76px, 0); } | |
| 20% { clip: rect(85px, 9999px, 77px, 0); } | |
| 30% { clip: rect(27px, 9999px, 97px, 0); } | |
| 40% { clip: rect(64px, 9999px, 98px, 0); } | |
| 50% { clip: rect(61px, 9999px, 85px, 0); } | |
| 60% { clip: rect(99px, 9999px, 114px, 0); } | |
| 70% { clip: rect(34px, 9999px, 115px, 0); } | |
| 80% { clip: rect(98px, 9999px, 129px, 0); } | |
| 90% { clip: rect(43px, 9999px, 96px, 0); } | |
| 100% { clip: rect(82px, 9999px, 64px, 0); } | |
| } | |
| @keyframes glitch-anim2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 10% { clip: rect(144px, 9999px, 41px, 0); } | |
| 20% { clip: rect(6px, 9999px, 187px, 0); } | |
| 30% { clip: rect(133px, 9999px, 50px, 0); } | |
| 40% { clip: rect(115px, 9999px, 23px, 0); } | |
| 50% { clip: rect(187px, 9999px, 169px, 0); } | |
| 60% { clip: rect(40px, 9999px, 128px, 0); } | |
| 70% { clip: rect(45px, 9999px, 7px, 0); } | |
| 80% { clip: rect(24px, 9999px, 162px, 0); } | |
| 90% { clip: rect(138px, 9999px, 180px, 0); } | |
| 100% { clip: rect(6px, 9999px, 103px, 0); } | |
| } | |
| .typing { | |
| border-right: 2px solid var(--neon-green); | |
| animation: blink 0.75s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { border-color: transparent; } | |
| 50% { border-color: var(--neon-green); } | |
| } | |
| .pixel-corners { | |
| position: relative; | |
| } | |
| .pixel-corners::before, .pixel-corners::after { | |
| content: ''; | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| border: 2px solid var(--neon-green); | |
| } | |
| .pixel-corners::before { | |
| top: -5px; | |
| left: -5px; | |
| border-right: none; | |
| border-bottom: none; | |
| } | |
| .pixel-corners::after { | |
| bottom: -5px; | |
| right: -5px; | |
| border-left: none; | |
| border-top: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="scanlines min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col items-center mb-12"> | |
| <h1 class="glitch text-5xl md:text-6xl mb-4 pixel-font neon-green" data-text="VIBECODE">VIBECODE</h1> | |
| <p class="terminal-font text-xl neon-cyan mb-6">Onchain Replit with Vibes</p> | |
| <div class="flex space-x-4"> | |
| <button class="terminal-font px-6 py-2 bg-transparent border-2 border-neon-green neon-green hover:bg-green-900/20 transition-all"> | |
| DOCS | |
| </button> | |
| <button class="terminal-font px-6 py-2 bg-neon-green text-black hover:bg-green-300 transition-all"> | |
| LAUNCH APP | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Terminal --> | |
| <div class="max-w-4xl mx-auto bg-black/70 border-2 border-neon-green rounded-lg overflow-hidden neon-glow"> | |
| <!-- Terminal Header --> | |
| <div class="bg-gray-900 px-4 py-2 flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="terminal-font text-sm neon-green flex-1 text-center"> | |
| vibecode-terminal ~/launch-onchain-app | |
| </div> | |
| </div> | |
| <!-- Terminal Content --> | |
| <div class="p-4 h-96 overflow-y-auto terminal-font text-green-200"> | |
| <div class="mb-4"> | |
| <span class="neon-purple">user@vibecode:~$</span> <span class="neon-green">welcome to Vibecode</span> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="neon-purple">user@vibecode:~$</span> <span class="neon-green">type your onchain creation prompt below</span> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="neon-purple">user@vibecode:~$</span> <span class="neon-cyan">examples:</span> | |
| </div> | |
| <div class="mb-2 ml-8 text-gray-400"> | |
| > "Launch $VIBE token with 1% burn and 10% LP on Base" | |
| </div> | |
| <div class="mb-2 ml-8 text-gray-400"> | |
| > "Deploy an NFT mint for 777 images, free mint, 10% royalty" | |
| </div> | |
| <div class="mb-2 ml-8 text-gray-400"> | |
| > "Create a DAO with 30 day vesting and 5% treasury fee" | |
| </div> | |
| <div class="mb-6"> | |
| <span class="neon-purple">user@vibecode:~$</span> <span class="typing"></span> | |
| </div> | |
| <!-- Chat messages will appear here --> | |
| <div id="chat-messages" class="space-y-4"></div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-neon-green/50 p-4 bg-gray-900/50"> | |
| <div class="flex"> | |
| <span class="terminal-font text-lg neon-purple mr-2">></span> | |
| <input | |
| type="text" | |
| id="user-input" | |
| class="terminal-font flex-1 bg-transparent border-none outline-none text-green-200 caret-green-500" | |
| placeholder="Type your onchain creation prompt..." | |
| autofocus | |
| > | |
| <button id="send-btn" class="terminal-font px-4 py-1 bg-neon-green text-black hover:bg-green-300 transition-all"> | |
| SEND | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Grid --> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-900/50 border border-neon-green/30 rounded-lg p-6 relative pixel-corners hover:neon-glow transition-all"> | |
| <div class="text-4xl neon-green mb-4">1</div> | |
| <h3 class="terminal-font text-xl neon-cyan mb-3">Chat Interface</h3> | |
| <p class="text-gray-300"> | |
| Natural language prompts to create tokens, NFTs, DAOs, and more. No coding required. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-900/50 border border-neon-green/30 rounded-lg p-6 relative pixel-corners hover:neon-glow transition-all"> | |
| <div class="text-4xl neon-green mb-4">2</div> | |
| <h3 class="terminal-font text-xl neon-cyan mb-3">Auto Contracts</h3> | |
| <p class="text-gray-300"> | |
| ERC20, ERC721, vesting, and LP contracts generated from your prompts. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-900/50 border border-neon-green/30 rounded-lg p-6 relative pixel-corners hover:neon-glow transition-all"> | |
| <div class="text-4xl neon-green mb-4">3</div> | |
| <h3 class="terminal-font text-xl neon-cyan mb-3">Deploy Anywhere</h3> | |
| <p class="text-gray-300"> | |
| Testnet for free, mainnet when ready. Base, Polygon, Zora, and Solana supported. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="mt-20 text-center"> | |
| <h2 class="terminal-font text-3xl neon-green mb-6">Ready to launch your onchain app?</h2> | |
| <button class="terminal-font px-8 py-3 bg-neon-green text-black text-lg hover:bg-green-300 transition-all"> | |
| START BUILDING NOW | |
| </button> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-20 pt-8 border-t border-neon-green/20 text-center text-gray-400 terminal-font"> | |
| <div class="mb-4"> | |
| <a href="#" class="mx-2 hover:text-neon-green transition-all">Twitter</a> | |
| <a href="#" class="mx-2 hover:text-neon-green transition-all">Discord</a> | |
| <a href="#" class="mx-2 hover:text-neon-green transition-all">GitHub</a> | |
| </div> | |
| <p>Vibecode © 2023 | Onchain Replit with Vibes</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| // Typing animation for the terminal prompt | |
| const typingElement = document.querySelector('.typing'); | |
| const messages = [ | |
| "Launch $VIBE token with 1% burn...", | |
| "Create NFT collection...", | |
| "Deploy DAO with vesting...", | |
| "Build onchain app..." | |
| ]; | |
| let messageIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| function type() { | |
| const currentMessage = messages[messageIndex]; | |
| if (isDeleting) { | |
| typingElement.textContent = currentMessage.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typingElement.textContent = currentMessage.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| if (!isDeleting && charIndex === currentMessage.length) { | |
| isDeleting = true; | |
| setTimeout(type, 2000); | |
| } else if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| messageIndex = (messageIndex + 1) % messages.length; | |
| setTimeout(type, 500); | |
| } else { | |
| const speed = isDeleting ? 50 : 100; | |
| setTimeout(type, speed); | |
| } | |
| } | |
| setTimeout(type, 1000); | |
| // Handle user input | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| // Add user message | |
| addMessage(message, 'user'); | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const response = generateAIResponse(message); | |
| addMessage(response, 'ai'); | |
| // Scroll to bottom | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1000); | |
| // Clear input | |
| userInput.value = ''; | |
| } | |
| } | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`; | |
| const bubble = document.createElement('div'); | |
| bubble.className = `terminal-font max-w-3/4 rounded px-4 py-2 ${ | |
| sender === 'user' | |
| ? 'bg-neon-green/10 border border-neon-green/30 text-neon-green' | |
| : 'bg-gray-800/50 border border-neon-purple/30 text-gray-300' | |
| }`; | |
| bubble.textContent = text; | |
| messageDiv.appendChild(bubble); | |
| chatMessages.appendChild(messageDiv); | |
| // Scroll to bottom | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function generateAIResponse(message) { | |
| // Simple response logic - in a real app this would call an API | |
| const responses = [ | |
| `Processing your request: "${message}"...`, | |
| `Generating smart contract for: ${message}`, | |
| `Compiling deployment package for: ${message}`, | |
| `Setting up Uniswap LP for: ${message}`, | |
| `Deploying frontend UI for: ${message}` | |
| ]; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Event listeners | |
| sendBtn.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| }); | |
| </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=karhar92/astrology4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |