| ```html |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>StockLens - Historical Data</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .progress-bar { |
| transition: width 1s ease-in-out; |
| } |
| .data-card { |
| transition: all 0.5s ease; |
| } |
| .data-card:hover { |
| transform: scale(1.02); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="gradient-bg text-white"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <a href="index.html" class="flex items-center"> |
| <i data-feather="trending-up" class="h-8 w-8 mr-2"></i> |
| <h1 class="text-2xl font-bold">StockLens</h1> |
| </a> |
| </div> |
| <nav class="hidden md:block"> |
| <ul class="flex space-x-6"> |
| <li><a href="index.html" class="hover:underline">Home</a></li> |
| <li><a href="backtesting.html" class="hover:underline">Backtesting</a></li> |
| <li><a href="historical-data.html" class="hover:underline font-bold">Historical Data</a></li> |
| <li><a href="#" class="hover:underline">Documentation</a></li> |
| <li><a href="#" class="hover:underline">Contact</a></li> |
| </ul> |
| </nav> |
| <button class="md:hidden"> |
| <i data-feather="menu" class="h-6 w-6"></i> |
| </button> |
| </div> |
| |
| <div class="mt-12 text-center" data-aos="fade-up"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Historical Data Sources</h2> |
| <p class="text-xl max-w-2xl mx-auto">Access multiple data sources for comprehensive historical stock data beyond one year</p> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-12"> |
| |
| <section class="mb-16" data-aos="fade-up"> |
| <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Select Data Source</h2> |
| <form id="dataSourceForm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label for="dataTicker" class="block text-sm font-medium text-gray-700 mb-2">Ticker Symbol</label> |
| <input type="text" id="dataTicker" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., AAPL, MSFT, GOOGL" required> |
| </div> |
| |
| <div> |
| <label for="dataSource" class="block text-sm font-medium text-gray-700 mb-2">Data Source</label> |
| <select id="dataSource" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <option value="polygon">Polygon.io (API Key Required)</option> |
| <option value="yahoo">Yahoo Finance (Free)</option> |
| <option value="alpha_vantage">Alpha Vantage (Free API Key)</option> |
| <option value="iex">IEX Cloud (API Key Required)</option> |
| <option value="csv">Upload CSV File</option> |
| </select> |
| </div> |
| </div> |
| |
| <div id="apiKeySection" class="mb-6"> |
| <label for="dataApiKey" class="block text-sm font-medium text-gray-700 mb-2">API Key</label> |
| <input type="password" id="dataApiKey" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter your API key"> |
| <p class="text-xs text-gray-500 mt-1">Required for Polygon.io, Alpha Vantage, and IEX Cloud sources</p> |
| </div> |
| |
| <div id="csvSection" class="mb-6 hidden"> |
| <label for="csvFile" class="block text-sm font-medium text-gray-700 mb-2">Upload CSV File</label> |
| <input type="file" id="csvFile" accept=".csv" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <p class="text-xs text-gray-500 mt-1">CSV format should include Date, Open, High, Low, Close, Volume columns</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label for="startDate" class="block text-sm font-medium text-gray-7 mb-2">Start Date</label> |
| <input type="date" id="startDate" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| |
| <div> |
| <label for="endDate" class="block text-sm font-medium text-gray-700 mb-2">End Date</label> |
| <input type="date" id="endDate" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Data Interval</label> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <label class="flex items-center bg-gray-50 p-4 rounded-lg cursor-pointer"> |
| <input type="radio" name="interval" value="daily" class="text-indigo-600 focus:ring-indigo-500" checked> |
| <span class="ml-3 text-sm text-gray-700">Daily</span> |
| </label> |
| <label class="flex items-center bg-gray-50 p-4 rounded-lg cursor-pointer"> |
| <input type="radio" name="interval" value="weekly" class="text-indigo-600 focus:ring-indigo-500"> |
| <span class="ml-3 text-sm text-gray-700">Weekly</span> |
| </label> |
| <label class="flex items-center bg-gray-50 p-4 rounded-lg cursor-pointer"> |
| <input type="radio" name="interval" value="monthly" class="text-indigo-600 focus:ring-indigo-500"> |
| <span class="ml-3 text-sm text-gray-700">Monthly</span> |
| </label> |
| <label class="flex items-center bg-gray-50 p-4 rounded-lg cursor-pointer"> |
| <input type="radio" name="interval" value="quarterly" class="text-indigo-600 focus:ring-indigo-500"> |
| <span class="ml-3 text-sm text-gray-700">Quarterly</span> |
| </label> |
| </div> |
| </div> |
| |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 flex items-center justify-center"> |
| <i data-feather="download" class="mr-2 h-5 w-5"></i> |
| Fetch Historical Data |
| </button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <section id="dataResults" class="hidden mb-16" data-aos="fade-up"> |
| <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Historical Data for <span id="dataTickerResult" class="text-indigo-600">AAPL</span></h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
| <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl data-card"> |
| <p class="text-sm text-gray-600 mb-1">Data Points</p> |
| <p class="text-2xl font-bold text-gray-800"><span id="dataPoints">0</span></p> |
| </div> |
| |
| <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl data-card"> |
| <p class="text-sm text-gray-600 mb-1">Date Range</p> |
| <p class="text-lg font-bold text-gray-800" id="dateRange">N/A</p> |
| </div> |
| |
| <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl data-card"> |
| <p class="text-sm text-gray-600 mb-1">Data Source</p> |
| <p class="text-lg font-bold text-gray-800" id="dataSourceResult">N/A</p> |
| </div> |
| |
| <div class="bg-gradient-to-r from-yellow-50 to-orange-50 p-4 rounded-xl data-card"> |
| <p class="text-sm text-gray-600 mb-1">Data Quality</p> |
| <p class="text-2xl font-bold text-gray-800" id="dataQuality">N/A</p> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Price Chart</h3> |
| <div class="bg-gray-50 p-4 rounded-xl"> |
| <canvas id="historicalChart" height="350"></canvas> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Data Preview</h3> |
| <div class="bg-gray-50 rounded-xl overflow-hidden"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Open</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">High</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Low</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Close</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volume</th> |
| </tr> |
| </thead> |
| <tbody id="dataPreview" class="bg-white divide-y divide-gray-200"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-center space-x-4"> |
| <button id="downloadCSV" class="bg-indigo-600 text-white py-2 px-6 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 flex items-center justify-center"> |
| <i data-feather="download" class="mr-2 h-4 w-4"></i> |
| Download CSV |
| </button> |
| <button id="useForTraining" class="bg-green-600 text-white py-2 px-6 rounded-lg font-medium hover:bg-green-700 transition duration-300 flex items-center justify-center"> |
| <i data-feather="activity" class="mr-2 h-4 w-4"></i> |
| Use for Model Training |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16" data-aos="fade-up"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Available Data Sources</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> |
| <div class="bg-indigo-100 p-3 rounded-lg inline-block mb-4"> |
| <i data-feather="database" class="h-6 w-6 text-indigo-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Polygon.io</h3> |
| <p class="text-gray-600 mb-4">Professional-grade financial data API with real-time and historical market data.</p> |
| <div class="text-sm text-gray-500"> |
| <span class="font-medium">Coverage:</span> Stocks, Options, Forex, Crypto |
| </div> |
| <div class="text-sm text-gray-500 mt-1"> |
| <span class="font-medium">History:</span> Up to 20+ years |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> |
| <div class="bg-green-100 p-3 rounded-lg inline-block mb-4"> |
| <i data-feather="bar-chart-2" class="h-6 w-6 text-green-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Yahoo Finance</h3> |
| <p class="text-gray-600 mb-4">Free financial data source with extensive historical data for most publicly traded companies.</p> |
| <div class="text-sm text-gray-500"> |
| <span class="font-medium">Coverage:</span> Stocks, ETFs, Indices |
| </div> |
| <div class="text-sm text-gray-500 mt-1"> |
| <span class="font-medium">History:</span> Up to full history |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> |
| <div class="bg-purple-100 p-3 rounded-lg inline-block mb-4"> |
| <i data-feather="cloud" class="h-6 w-6 text-purple-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Alpha Vantage</h3> |
| <p class="text-gray-600 mb-4">Free API with historical and real-time data for global equities, forex, and cryptocurrencies.</p> |
| <div class="text-sm text-gray-500"> |
| <span class="font-medium">Coverage:</span> Global Stocks, Forex, Crypto |
| </div> |
| <div class="text-sm text-gray-500 mt-1"> |
| <span class="font-medium">History:</span> 20+ years for US stocks |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> |
| <div class="bg-blue-100 p-3 rounded-lg inline-block mb-4"> |
| <i data-feather="box" class="h-6 w-6 text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">IEX Cloud</h3> |
| <p class="text-gray-600 mb-4">Financial data platform with real-time and historical data for US equities and market data.</p> |
| <div class="text-sm text |
