Hugging Face's logo

Spaces:
bxnzo
/
undefined
Running

App Files Community
undefined / index.html
bxnzo's picture
bxnzo
okay good, now add a landing ppage for each page on the website so when i click every button in the website it will take me to a new landing page. Each page must be different and be about what it says on the button
21e2942 verified
Raw History Blame Contribute Delete
17.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PolyOracle | Crypto Market 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>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<style>
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
.gradient-text {
background: linear-gradient(90deg, #6366f1, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.chart-container {
height: 400px;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-dark text-gray-100 min-h-screen">
<div id="vanta-bg"></div>
<div class="relative z-10">
<!-- Navigation -->
<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">
<span class="text-xl font-bold gradient-text">PolyOracle</span>
</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-white bg-primary">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-gray-300 hover:text-white">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="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
<i data-feather="bell"></i>
</button>
<button class="ml-4 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
<i data-feather="settings"></i>
</button>
<div class="ml-3 relative">
<div>
<button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
<img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/42" alt="User profile">
</button>
</div>
</div>
</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>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="md:col-span-2">
<h1 class="text-3xl font-bold text-white mb-2">Welcome to <span class="gradient-text">PolyOracle</span></h1>
<p class="text-gray-400">Advanced prediction markets analytics and forecasting for Polymarket</p>
</div>
<div class="flex items-center justify-end">
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<i data-feather="download" class="mr-2"></i> Get Chrome Extension
</a>
</div>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-darker p-6 rounded-lg border border-gray-800 hover:border-primary transition-all duration-200">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-primary">
<i data-feather="trending-up" class="text-primary"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-400">Active Markets</p>
<p class="text-2xl font-semibold text-white">142</p>
</div>
</div>
</div>
<div class="bg-darker p-6 rounded-lg border border-gray-800 hover:border-secondary transition-all duration-200">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-secondary">
<i data-feather="bar-chart-2" class="text-secondary"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-400">Total Volume</p>
<p class="text-2xl font-semibold text-white">$4.2M</p>
</div>
</div>
</div>
<div class="bg-darker p-6 rounded-lg border border-gray-800 hover:border-green-500 transition-all duration-200">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-green-500">
<i data-feather="check-circle" class="text-green-500"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-400">Accuracy</p>
<p class="text-2xl font-semibold text-white">87.3%</p>
</div>
</div>
</div>
<div class="bg-darker p-6 rounded-lg border border-gray-800 hover:border-purple-500 transition-all duration-200">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-purple-500">
<i data-feather="users" class="text-purple-500"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-400">Active Users</p>
<p class="text-2xl font-semibold text-white">3,456</p>
</div>
</div>
</div>
</div>
<!-- Main Dashboard -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Market Overview -->
<div class="lg:col-span-2 bg-darker rounded-lg border border-gray-800 p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold text-white">Market Overview</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 text-xs rounded-md bg-primary text-white">24h</button>
<button class="px-3 py-1 text-xs rounded-md bg-gray-800 text-gray-300">7d</button>
<button class="px-3 py-1 text-xs rounded-md bg-gray-800 text-gray-300">30d</button>
</div>
</div>
<div class="chart-container rounded-lg mb-4">
<!-- This would be a chart in a real implementation -->
<div class="h-full flex items-center justify-center">
<div class="text-center">
<i data-feather="activity" class="w-16 h-16 mx-auto text-primary mb-4 floating"></i>
<p class="text-gray-400">Live market data visualization</p>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="bg-gray-900 p-4 rounded-lg">
<p class="text-sm text-gray-400">ETH Price</p>
<p class="text-lg font-semibold text-white">$3,458.23 <span class="text-green-500 text-sm">+2.4%</span></p>
</div>
<div class="bg-gray-900 p-4 rounded-lg">
<p class="text-sm text-gray-400">PolyMarket TVL</p>
<p class="text-lg font-semibold text-white">$14.2M <span class="text-green-500 text-sm">+5.1%</span></p>
</div>
<div class="bg-gray-900 p-4 rounded-lg">
<p class="text-sm text-gray-400">Predictions Today</p>
<p class="text-lg font-semibold text-white">1,234 <span class="text-red-500 text-sm">-0.8%</span></p>
</div>
</div>
</div>
<!-- Top Predictions -->
<div class="bg-darker rounded-lg border border-gray-800 p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold text-white">Top Predictions</h2>
<button class="text-primary text-sm font-medium">View All</button>
</div>
<div class="space-y-4">
<div class="bg-gray-900 p-4 rounded-lg border-l-4 border-primary">
<div class="flex justify-between">
<p class="text-white font-medium">ETH to $4K by EOY</p>
<span class="text-xs px-2 py-1 rounded-full bg-primary bg-opacity-20 text-primary">85%</span>
</div>
<p class="text-sm text-gray-400 mt-1">12,345 predictions</p>
<div class="w-full bg-gray-800 rounded-full h-2 mt-2">
<div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
<div class="bg-gray-900 p-4 rounded-lg border-l-4 border-secondary">
<div class="flex justify-between">
<p class="text-white font-medium">BTC ETF approval</p>
<span class="text-xs px-2 py-1 rounded-full bg-secondary bg-opacity-20 text-secondary">72%</span>
</div>
<p class="text-sm text-gray-400 mt-1">9,876 predictions</p>
<div class="w-full bg-gray-800 rounded-full h-2 mt-2">
<div class="bg-secondary h-2 rounded-full" style="width: 72%"></div>
</div>
</div>
<div class="bg-gray-900 p-4 rounded-lg border-l-4 border-green-500">
<div class="flex justify-between">
<p class="text-white font-medium">Polygon zkEVM adoption</p>
<span class="text-xs px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-500">63%</span>
</div>
<p class="text-sm text-gray-400 mt-1">7,654 predictions</p>
<div class="w-full bg-gray-800 rounded-full h-2 mt-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 63%"></div>
</div>
</div>
<div class="bg-gray-900 p-4 rounded-lg border-l-4 border-yellow-500">
<div class="flex justify-between">
<p class="text-white font-medium">Stablecoin regulation</p>
<span class="text-xs px-2 py-1 rounded-full bg-yellow-500 bg-opacity-20 text-yellow-500">51%</span>
</div>
<p class="text-sm text-gray-400 mt-1">5,432 predictions</p>
<div class="w-full bg-gray-800 rounded-full h-2 mt-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 51%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Extension Section -->
<div class="bg-gradient-to-r from-darker to-primary rounded-lg p-8 mb-8">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-2/3 mb-6 md:mb-0">
<h2 class="text-2xl font-bold text-white mb-2">Enhance Your Trading with Our Chrome Extension</h2>
<p class="text-gray-200 mb-4">Get real-time Polymarket predictions and analytics directly in your browser. Our extension provides instant access to market data, prediction accuracy metrics, and automated trading signals.</p>
<div class="flex flex-wrap gap-3">
<a href="#" class="inline-flex items-center px-4 py-2 bg-white text-dark font-medium rounded-md shadow-sm hover:bg-gray-100">
<i data-feather="download" class="mr-2"></i> Download Now
</a>
<a href="#" class="inline-flex items-center px-4 py-2 border border-white text-white font-medium rounded-md shadow-sm hover:bg-white hover:text-dark">
<i data-feather="info" class="mr-2"></i> Learn More
</a>
</div>
</div>
<div class="md:w-1/3 flex justify-center">
<div class="relative">
<div class="w-48 h-48 bg-white bg-opacity-10 rounded-lg flex items-center justify-center backdrop-filter backdrop-blur-sm">
<i data-feather="chrome" class="w-16 h-16 text-white"></i>
</div>
<div class="absolute -top-4 -right-4 bg-secondary rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<i data-feather="zap" class="w-5 h-5 text-white"></i>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<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">Features</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">&copy; 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>
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x6366f1,
backgroundColor: 0x0f172a,
points: 10.00,
maxDistance: 22.00,
spacing: 18.00
});
feather.replace();
// Simple animation for dashboard elements
document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.bg-darker');
cards.forEach((card, index) => {
card.style.transition = 'all 0.3s ease';
card.style.transform = 'translateY(20px)';
card.style.opacity = '0';
setTimeout(() => {
card.style.transform = 'translateY(0)';
card.style.opacity = '1';
}, 100 * index);
});
});
</script>
</body>
</html>