| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PolyOracle Extension | Chrome Extension for Polymarket Predictions</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#8b5cf6', |
| dark: '#0f172a', |
| darker: '#020617', |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| .gradient-text { |
| background: linear-gradient(90deg, #6366f1, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .extension-preview { |
| box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25); |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4); |
| } |
| .step-number { |
| width: 40px; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #6366f1, #8b5cf6); |
| color: white; |
| font-weight: bold; |
| margin-right: 16px; |
| flex-shrink: 0; |
| } |
| </style> |
| </head> |
| <body class="bg-dark text-gray-100 min-h-screen"> |
| <div class="relative z-10"> |
| |
| <nav class="bg-darker bg-opacity-80 border-b border-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <a href="index.html" class="text-xl font-bold gradient-text">PolyOracle</a> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-4"> |
| <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Dashboard</a> |
| <a href="markets.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Markets</a> |
| <a href="predictions.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Predictions</a> |
| <a href="extension.html" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-primary">Extension</a> |
| <a href="api.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">API</a> |
| </div> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-4 flex items-center md:ml-6"> |
| <button class="ml-4 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <i data-feather="settings"></i> |
| </button> |
| </div> |
| </div> |
| <div class="-mr-2 flex md:hidden"> |
| <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="bg-gradient-to-r from-darker to-primary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Supercharge Your <span class="gradient-text">Polymarket</span> Experience</h1> |
| <p class="text-xl text-gray-300 mb-8">Our Chrome Extension brings powerful prediction analytics and trading tools directly to your browser, giving you an edge in every market.</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-indigo-600"> |
| <i data-feather="download" class="mr-2"></i> Add to Chrome |
| </a> |
| <a href="#features" class="inline-flex items-center px-6 py-3 border border-white text-base font-medium rounded-md shadow-sm text-white hover:bg-white hover:text-dark"> |
| <i data-feather="info" class="mr-2"></i> Learn More |
| </a> |
| </div> |
| </div> |
| <div class="flex justify-center"> |
| <div class="extension-preview bg-darker rounded-xl overflow-hidden border border-gray-700 transform rotate-1"> |
| <div class="bg-gray-900 h-8 flex items-center px-3"> |
| <div class="flex space-x-2"> |
| <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="ml-2 text-xs text-gray-400">PolyOracle Extension</div> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="zap" class="text-primary"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="text-sm font-medium text-white">Prediction Strength</div> |
| <div class="text-xs text-gray-400">Current market: ETH Price</div> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 mb-4"> |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> |
| <span>Bullish</span> |
| <span>82% Confidence</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-green-400 to-primary h-2 rounded-full" style="width: 82%"></div> |
| </div> |
| </div> |
| <div class="grid grid-cols-2 gap-2"> |
| <div class="bg-gray-800 p-2 rounded text-center"> |
| <div class="text-xs text-gray-400">Target Price</div> |
| <div class="text-sm font-medium text-white">$3,842</div> |
| </div> |
| <div class="bg-gray-800 p-2 rounded text-center"> |
| <div class="text-xs text-gray-400">Timeframe</div> |
| <div class="text-sm font-medium text-white">7 Days</div> |
| </div> |
| </div> |
| <button class="w-full mt-4 py-2 bg-primary text-white rounded text-sm font-medium hover:bg-indigo-600">Place Trade</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| |
| <section id="features" class="mb-20"> |
| <h2 class="text-3xl font-bold text-center text-white mb-4">Powerful Features</h2> |
| <p class="text-xl text-center text-gray-400 max-w-3xl mx-auto mb-12">The PolyOracle extension provides real-time insights and predictive analytics directly in your browser</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="feature-card bg-darker p-8 rounded-lg border border-gray-800 transition-all duration-300"> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> |
| <i data-feather="activity" class="text-primary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Real-time Predictions</h3> |
| <p class="text-gray-400">Get instant access to our AI-powered market predictions while browsing Polymarket.</p> |
| </div> |
| <div class="feature-card bg-darker p-8 rounded-lg border border-gray-800 transition-all duration-300"> |
| <div class="w-12 h-12 rounded-full bg-secondary bg-opacity-20 flex items-center justify-center mb-4"> |
| <i data-feather="bar-chart-2" class="text-secondary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Enhanced Analytics</h3> |
| <p class="text-gray-400">Visualize market trends and prediction probabilities directly on market pages.</p> |
| </div> |
| <div class="feature-card bg-darker p-8 rounded-lg border border-gray-800 transition-all duration-300"> |
| <div class="w-12 h-12 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mb-4"> |
| <i data-feather="bell" class="text-green-500"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Custom Alerts</h3> |
| <p class="text-gray-400">Set up notifications for when prediction confidence reaches your specified thresholds.</p> |
| </div> |
| <div class="feature-card bg-darker p-8 rounded-lg border border-gray-800 transition-all duration-300"> |
| <div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mb-4"> |
| <i data-feather="zap" class="text-purple-500"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Quick Actions</h3> |
| <p class="text-gray-400">Place trades directly from the extension without navigating away.</p> |
| </div> |
| <div class="feature-card bg-darker p-8 rounded-lg border border-gray-800 transition-all duration-300"> |
| <div class="w-12 h-12 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center mb-4"> |
| <i data-feather="eye" class="text-yellow-500"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Market Sentiment</h3> |
| <p class="text-gray-400">See aggregated sentiment from other PolyOracle users on each market.</p> |
| </div> |
| <div class="feature-card bg-darker p-8 rounded-lg border border-gray-800 transition-all duration-300"> |
| <div class="w-12 h-12 rounded-full bg-pink-500 bg-opacity-20 flex items-center justify-center mb-4"> |
| <i data-feather="lock" class="text-pink-500"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Secure Integration</h3> |
| <p class="text-gray-400">Read-only access to market data with no wallet connection required.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-20"> |
| <h2 class="text-3xl font-bold text-center text-white mb-4">How It Works</h2> |
| <p class="text-xl text-center text-gray-400 max-w-3xl mx-auto mb-12">Get started in just a few simple steps</p> |
| |
| <div class="bg-darker rounded-lg border border-gray-800 p-8"> |
| <div class="flex items-start mb-8"> |
| <div class="step-number">1</div> |
| <div> |
| <h3 class="text-xl font-bold text-white mb-2">Install the Extension</h3> |
| <p class="text-gray-400">Add the PolyOracle extension from the Chrome Web Store with one click.</p> |
| </div> |
| </div> |
| <div class="flex items-start mb-8"> |
| <div class="step-number">2</div> |
| <div> |
| <h3 class="text-xl font-bold text-white mb-2">Navigate to Polymarket</h3> |
| <p class="text-gray-400">Visit any market page on polymarket.com to see the extension in action.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="step-number">3</div> |
| <div> |
| <h3 class="text-xl font-bold text-white mb-2">Access Predictive Insights</h3> |
| <p class="text-gray-400">View our prediction overlays and analytics directly on the market page.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-gradient-to-r from-primary to-secondary rounded-lg p-12 text-center"> |
| <h2 class="text-3xl font-bold text-white mb-4">Ready to Enhance Your Trading?</h2> |
| <p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">Join thousands of traders who are using PolyOracle to make smarter predictions on Polymarket.</p> |
| <a href="#" class="inline-flex items-center px-8 py-3 border border-transparent text-lg font-medium rounded-md shadow-sm text-dark bg-white hover:bg-gray-100"> |
| <i data-feather="download" class="mr-2"></i> Install Extension Now |
| </a> |
| </section> |
| </div> |
|
|
| |
| <footer class="bg-darker border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="index.html" class="text-gray-300 hover:text-white">Dashboard</a></li> |
| <li><a href="extension.html" class="text-gray-300 hover:text-white">Extension</a></li> |
| <li><a href="api.html" class="text-gray-300 hover:text-white">API</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Pricing</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Tutorials</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Support</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-white">About</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Privacy</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Terms</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-white">Twitter</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Discord</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">Telegram</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white">GitHub</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-8 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between"> |
| <p class="text-gray-400 text-sm">© 2023 PolyOracle. All rights reserved.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="github"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="discord"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="linkedin"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const features = document.querySelectorAll('.feature-card'); |
| features.forEach((feature, index) => { |
| feature.style.transition = 'all 0.3s ease'; |
| feature.style.transform = 'translateY(20px)'; |
| feature.style.opacity = '0'; |
| |
| setTimeout(() => { |
| feature.style.transform = 'translateY(0)'; |
| feature.style.opacity = '1'; |
| }, 100 * index); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
