HTML Files Documentation
[Link], [Link], and [Link] - Complete Explanations with Code
Overview
Your project uses 3 HTML templates that follow a parent-child relationship:
[Link] = The layout template (like the frame of a house)
[Link] = The home page (what users see first)
[Link] = The results page (what users see after predictions)
This is called template inheritance, which means avoiding code duplication by sharing common
code.
1. [Link] - The Foundation/Layout Template
What It Does:
This is the master template that provides the common structure for all pages. Think of it as the
"skeleton" or "wrapper" for the entire website.
Structure Breakdown:
A. Head Section (The Invisible Brain)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<!-- CSS & Libraries -->
</head>
Meta tags: Tell the browser how to display the page
CDN Libraries loaded: External tools for styling and charts
B. CSS Libraries Loaded:
Library Purpose
Tailwind CSS CDN Quick styling framework (makes things look
pretty)
[Link] Creates interactive charts
Font Awesome Icon library (bitcoins, arrows, stars, etc.)
Custom CSS Website's custom styling ([Link])
C. Custom Animations Defined:
The [Link] includes 4 CSS animations:
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
1. 1. slideInRight - Elements slide from right to left with fade effect
2. 2. fadeInUp - Elements fade in while moving up
3. 3. slideInLeft - Sidebar slides in from the left
4. 4. shimmer - A shimmering effect (like light reflecting)
D. Fixed Sidebar Navigation (Left Panel)
<!-- Fixed Sidebar Navigation -->
<div class="fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-gray-900 via-gray-800 to-
gray-900 shadow-2xl animate-slide-in-left z-50">
<!-- Logo Section -->
<div class="p-6 border-b border-gray-700">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg">
<i class="fas fa-bitcoin text-white text-xl"></i>
</div>
<div>
<h1 class="text-white font-bold text-sm">CryptoPredict</h1>
<p class="text-gray-400 text-xs">AI Price Forecasting</p>
</div>
</div>
</div>
</div>
Fixed width: 256px (w-64) - stays on left side always
Gradient background: Dark gray to black to dark gray (premium look)
Logo section: Bitcoin icon + "CryptoPredict" title
Navigation menu: Links to pages (currently only Dashboard/Home)
Animation: Slides in from left when page loads
Visual breakdown:
┌─────────────────┐
│ 🪙 CryptoPredict│ ← Logo
│ AI Forecasting │
├─────────────────┤
│ 🏠 Dashboard │ ← Navigation
└─────────────────┘
E. Top Navigation Bar (Top Panel)
<!-- Top Navigation Bar -->
<div class="fixed top-0 left-64 right-0 h-16 bg-white border-b border-gray-200 shadow-sm
z-40">
<div class="h-full px-8 flex items-center justify-between">
<div>
<h2 class="text-2xl font-bold gradient-text">
Cryptocurrency Price Predictor
</h2>
</div>
</div>
</div>
Positioned: Below the logo, spanning the width (except sidebar)
White background: Clean, professional look
Gradient text: Text changes color from blue to purple
Fixed height: 64px (h-16)
F. Main Content Area
<!-- Main Content Area -->
<div class="ml-64 mt-16 min-h-screen">
<div class="animate-slide-in-right">
{% block content %}{% endblock %}
</div>
</div>
<!-- Dashboard JavaScript -->
<script src="{{ url_for('static', filename='[Link]') }}"></script>
ml-64: Adds left margin (pushes content away from sidebar)
mt-16: Adds top margin (pushes content below top bar)
{% block content %}{% endblock %}: Placeholder where child templates insert their content
Animation: Content slides in from the right
How It Looks:
┌──────────────────────────────────────────────────────┐
│ CryptoPredict Cryptocurrency Price Predictor │
├──────────────┬──────────────────────────────────────┤
│ │ │
│ 🏠 Dashboard │ ← Content from [Link] or │
│ │ [Link] goes here │
│ │ │
│ │ │
└──────────────┴──────────────────────────────────────┘
2. [Link] - The Home Page
What It Does:
This is the first page users see. It displays a welcome message and a form where users enter:
5. Cryptocurrency ticker (e.g., "BTC-USD")
6. Number of days to predict
Structure Breakdown:
A. Welcome Section
<!-- Welcome Section -->
<div class="mb-12">
<h1 class="text-4xl font-bold text-gray-900 mb-2">
Welcome to CryptoPredict
</h1>
<p class="text-lg text-gray-600">
Advanced AI-powered cryptocurrency price prediction powered by LSTM neural
networks
</p>
</div>
Large heading: Grabs attention
Subtext: Explains what the app does
B. Features Grid (3 Cards)
┌─────────────────┬──────────────────┬──────────────────┐
│ Real-time │ 🧠 AI Predictions│ 📊 Analysis │
│ Data │ LSTM neural nets │ Charts & metrics │
└─────────────────┴──────────────────┴──────────────────┘
<!-- Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div class="bg-white rounded-lg p-6 shadow-md border-l-4 border-blue-500 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">
Real-time Data
</h3>
<i class="fas fa-database text-blue-500 text-2xl"></i>
</div>
<p class="text-gray-600">
Access live cryptocurrency market data with historical price information
</p>
</div>
<!-- More cards... -->
</div>
Blue left border: Visual accent
Icon + Title: Easy identification
Description: Short explanation
Hover effect: Scales up slightly when you hover over it
C. The Main Prediction Form
Input 1: Cryptocurrency Ticker
<!-- Stock Ticker Input -->
<div>
<label for="stock" class="block text-sm font-semibold text-gray-900 mb-3">
<i class="fas fa-coins text-blue-500 mr-2"></i>Cryptocurrency Ticker
</label>
<div class="relative">
<input
type="text"
class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none
focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
id="stock"
name="stock"
placeholder="e.g., BTC-USD, ETH-USD, ADA-USD"
required
>
</div>
</div>
Placeholder text: Gives examples (BTC = Bitcoin, ETH = Ethereum)
Required field: User must fill this in
Focus effect: Border turns blue when clicked
Input 2: Days to Predict (Slider)
<!-- Days to Predict Input -->
<div>
<label for="no_of_days" class="block text-sm font-semibold text-gray-900 mb-3">
<i class="fas fa-calendar text-green-500 mr-2"></i>Number of Days to Predict
</label>
<div class="flex items-center space-x-4">
<input
type="range"
id="no_of_days"
name="no_of_days"
min="1"
max="100"
value="30"
class="flex-1 h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer
accent-blue-500"
oninput="updateDaysValue([Link])"
>
<div class="w-16 px-4 py-2 bg-blue-100 rounded-lg text-center">
<span id="days-value" class="text-lg font-bold text-blue-600">30</span>
<p class="text-xs text-gray-600">days</p>
</div>
</div>
</div>
Slider control: Drag to select 1-100 days
Default value: 30 days
Visual feedback: Shows selected number in blue box
JavaScript function: updateDaysValue() updates the number display in real-time
Submit Button
<!-- Submit Button -->
<button
type="submit"
class="w-full py-3 px-6 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-
bold rounded-lg shadow-md hover:shadow-lg hover:from-blue-600 hover:to-blue-700 cursor-
pointer"
>
<i class="fas fa-magic"></i>
<span>Predict Prices</span>
</button>
Gradient button: Blue background
Icon: Magic wand (implies AI magic)
Form action: Submits to "/" endpoint in Flask
Info Box
<!-- Info Box -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<p class="text-sm text-blue-800">
<i class="fas fa-info-circle mr-2"></i>
Our AI model uses 100 days of historical data to make accurate future price
predictions. More data history = better accuracy.
</p>
</div>
Light blue background: Informational tone
Blue border: Matches theme
Text: Explains the model's approach
D. Stats Grid (4 Cards Below Form)
┌──────────────┬───────────────┬──────────────┬──────────────┐
│ 92% Accuracy │ 1000+ Cryptos │ 10Y Data │ Technology │
│ on test data │ Supported │ Historical │ Stack info │
└──────────────┴───────────────┴──────────────┴──────────────┘
<!-- Quick Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<!-- Stats Card 1 -->
<div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-
white card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold opacity-90">
Model Accuracy
</h3>
<i class="fas fa-check-circle text-xl opacity-75"></i>
</div>
<p class="text-3xl font-bold">92%</p>
<p class="text-sm opacity-75 mt-2">On historical test data</p>
</div>
<!-- More cards... -->
</div>
Gradient background: Different color for each stat
Icon: Visual representation
Big number: The key metric
Small text: Explanation
JavaScript for Dynamic Updates
<script>
function updateDaysValue(value) {
[Link]('days-value').textContent = value;
}
</script>
This JavaScript function updates the displayed number when the slider is moved.
User Flow on [Link]:
1. User visits website → Sees welcome + features
↓
2. User scrolls down → Sees prediction form
↓
3. User enters ticker (e.g., "BTC-USD") and days (e.g., 30)
↓
4. User clicks "Predict Prices" button
↓
5. Flask processes the form and redirects to [Link]
3. [Link] - The Results Page
What It Does:
After user submits the form, this page displays:
7. 3 interactive charts (historical, accuracy test, future forecast)
8. Key metrics (latest price, accuracy, forecast period)
9. Data table with predicted prices
10. Summary with disclaimers
Structure Breakdown:
A. Header Section
<!-- Header Section -->
<div class="mb-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-4xl font-bold text-gray-900 mb-2">
<i class="fas fa-chart-line text-blue-500 mr-2"></i>Prediction Results
</h1>
<p class="text-lg text-gray-600">
Comprehensive analysis for
<span class="font-semibold text-blue-600">{{ stock }}</span>
</p>
</div>
<a href="/" class="inline-flex items-center space-x-2">
<i class="fas fa-arrow-left"></i>
<span>New Prediction</span>
</a>
</div>
</div>
Shows which ticker is being analyzed (e.g., BTC-USD)
"New Prediction" button: Link back to home page
B. Error Handling
{% if error %}
<!-- Error Message -->
<div class="mb-8 bg-red-50 border-l-4 border-red-500 rounded-lg p-6 shadow-md">
<div class="flex items-start">
<i class="fas fa-exclamation-circle text-red-500 text-2xl mr-4 mt-1"></i>
<div>
<h3 class="font-bold text-red-800 mb-1">
Error Processing Request
</h3>
<p class="text-red-700">{{ error }}</p>
</div>
</div>
</div>
{% endif %}
If the ticker is invalid, displays error message
C. Cryptocurrency Information Card
┌────────────────────────────────────┐
│ About BTC-USD │
├────────────────────────────────────┤
│ Description of the ticker │
├──────────┬───────────┬────────────┬┐
│ Ticker │ Data │ Model ││
│ BTC-USD │ 10 Years │ LSTM ││
└──────────┴───────────┴────────────┴┘
<!-- Cryptocurrency Information Section -->
<div class="mb-12">
<div class="bg-white rounded-lg shadow-lg p-8 border-l-4 border-blue-500">
<h2 class="text-2xl font-bold text-gray-900 mb-4">
<i class="fas fa-info-circle text-blue-500 mr-3"></i>About {{ stock }}
</h2>
<p class="text-gray-600 mb-4">
The ticker symbol {{ stock }} represents a cryptocurrency asset...
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-blue-50 rounded-lg p-4">
<p class="text-sm text-gray-600">Ticker</p>
<p class="text-2xl font-bold text-blue-600">
{{ stock }}
</p>
</div>
<!-- More info boxes -->
</div>
</div>
</div>
Shows: Ticker symbol, Data period (10 years), Model type (LSTM), Accuracy rate (92%)
D. Key Metrics Grid (4 Cards)
┌────────────────┬─────────────────┬──────────────┬────────────┐
│ Latest Price │ Prediction │ Forecast │ Data │
│ $XX,XXX │ Confidence 92% │ 30 days │ 2,500+ │
└────────────────┴─────────────────┴──────────────┴────────────┘
<!-- Key Metrics Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
<div class="bg-white rounded-lg shadow-md p-6 border-t-4 border-blue-500 card-hover">
<p class="text-gray-600 text-sm font-semibold mb-2">
Latest Close Price
</p>
<p class="text-3xl font-bold text-gray-900">
${{ latest_close_price }}
</p>
<p class="text-xs text-gray-500 mt-2">
From historical data
</p>
</div>
<!-- More metric cards... -->
</div>
Each card contains: Title, Big number (actual value), Icon, Border color
E. Three Interactive Charts
All charts are created using [Link] (JavaScript charting library).
Chart 1: Historical Closing Prices
<!-- Chart 1: Historical Data -->
<div class="bg-white rounded-lg shadow-lg p-8">
<h2 class="text-2xl font-bold text-gray-900 flex items-center">
<i class="fas fa-history text-blue-500 mr-3"></i>
Historical Closing Prices Over Time
</h2>
<p class="text-gray-600 text-sm mt-2">
10 years of historical price data
</p>
<div id="historicalChart" style="min-height: 500px;"></div>
</div>
X-axis: Dates (10 years of data)
Y-axis: Price in dollars
Line: Blue solid line showing price history
Fill: Light blue area under the line for visual appeal
Hover: Shows date and price when you hover
JavaScript code:
const trace1 = {
x: [Link], // All dates
y: [Link], // All prices
mode: 'lines', // Draw as line chart
name: 'Close Price', // Legend label
line: {
color: '#3b82f6', // Blue
width: 3 // Thick line
},
fill: 'tozeroy' // Fill area
};
[Link]('historicalChart', [trace1], layout1, { responsive: true });
Chart 2: Original vs Predicted Test Data
<!-- Chart 2: Original vs Predicted -->
<div class="bg-white rounded-lg shadow-lg p-8">
<h2 class="text-2xl font-bold text-gray-900">
<i class="fas fa-code-branch text-purple-500 mr-3"></i>
Original vs Predicted Test Data
</h2>
<p class="text-gray-600 text-sm mt-2">
Model validation on historical test set
</p>
<div id="testPredictionChart" style="min-height: 500px;"></div>
</div>
Orange solid line: Actual prices (from the test data)
Green dashed line: What the AI predicted
Comparison: Shows how accurate the model is
JavaScript code:
// Orange line for actual data
const trace2Original = {
x: [Link],
y: [Link],
mode: 'lines',
name: 'Original Test Data',
line: { color: '#f59e0b', width: 2 } // Orange
};
// Green dashed line for predictions
const trace2Predicted = {
x: [Link],
y: [Link],
mode: 'lines',
name: 'Predicted Test Data',
line: { color: '#10b981', width: 2, dash: 'dash' } // Green dashed
};
Chart 3: Future Predictions
<!-- Chart 3: Future Predictions -->
<div class="bg-white rounded-lg shadow-lg p-8">
<h2 class="text-2xl font-bold text-gray-900">
<i class="fas fa-crystal-ball text-green-500 mr-3"></i>
Future Close Price Predictions
</h2>
<p class="text-gray-600 text-sm mt-2">
AI-powered forecast for upcoming days
</p>
<div id="futurePredictionChart" style="min-height: 500px;"></div>
</div>
X-axis: Days ahead (1-30 or whatever user selected)
Y-axis: Predicted price
Purple line: Future price predictions
Diamond markers: Points for each day
Fill: Light purple area under the line
JavaScript code:
const trace3 = {
x: [Link],
y: [Link],
mode: 'lines+markers', // Line and points
name: 'Predicted Future Prices',
line: { color: '#8b5cf6', width: 3 }, // Purple
marker: {
size: 10,
color: '#8b5cf6',
symbol: 'diamond'
},
fill: 'tozeroy',
fillcolor: 'rgba(139, 92, 246, 0.1)'
};
F. Data Table
<!-- Data Table Section -->
<div class="bg-white rounded-lg shadow-lg p-8">
<h2 class="text-2xl font-bold text-gray-900">
<i class="fas fa-table text-indigo-500 mr-3"></i>Predicted Prices Table
</h2>
<table class="w-full">
<thead>
<tr class="bg-gray-50 border-b-2 border-gray-200">
<th class="px-6 py-4 text-left">Day</th>
<th class="px-6 py-4 text-left">
Predicted Close Price
</th>
<th class="px-6 py-4 text-left">Status</th>
</tr>
</thead>
<tbody>
{% for price in future_predictions %}
<tr class="border-b border-gray-200 hover:bg-blue-50">
<td class="px-6 py-4">
Day {{ [Link] }}
</td>
<td class="px-6 py-4">
<span class="text-lg font-bold text-green-600">
${{ price | round(2) }}
</span>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full">
✓ Forecasted
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
Loop through predictions: {% for price in future_predictions %}
Loop counter: {{ [Link] }} = Day 1, Day 2, etc.
Format price: {{ price | round(2) }} = Shows 2 decimal places
Status badge: Green badge saying "Forecasted"
Hover effect: Rows light up blue when you hover
G. Summary Card
<!-- Summary Card -->
<div class="bg-gradient-to-r from-blue-50 to-indigo-50">
<h3 class="text-xl font-bold text-gray-900 mb-4">
<i class="fas fa-lightbulb text-yellow-500 mr-3"></i>
Prediction Summary
</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-circle text-blue-500 mr-3 mt-1 text-xs"></i>
<span>
Model analyzed <strong>2,500+ data points</strong> from {{ stock }}
</span>
</li>
<li>
Using <strong>LSTM neural network</strong> with 92% accuracy
</li>
<li>
Considers market trends and seasonality
</li>
<li>
<strong>Disclaimer:</strong> For informational purposes only
</li>
</ul>
</div>
Summarizes the analysis: What was done
Explains the method: LSTM with 92% accuracy
Adds disclaimer: Not financial advice
Summary Table: What Each File Does
File Purpose What Users See
[Link] Template structure with Sidebar logo, navigation,
sidebar & top bar consistent layout
[Link] Home/input page Welcome message, features,
prediction form with slider
[Link] Results display page Charts (historical, accuracy
test, future), table with
predictions, metrics
Page Flow Diagram
Start
↓
User visits website
↓
Sees [Link] (home page)
↓
Enters ticker (BTC-USD) and days (30)
↓
Clicks "Predict Prices" button
↓
Form submits to Flask backend
↓
Flask downloads data, runs AI model
↓
Redirects to [Link]
↓
Sees 3 interactive charts + table with predictions
↓
Can click "New Prediction" to go back to [Link]
Key Technologies Used in HTML:
Technology Purpose
Tailwind CSS Responsive styling (makes site work on
mobile too)
[Link] Interactive, zoomable charts
Font Awesome Icons (bitcoin, chart, brain, etc.)
Jinja2 Templates Python templating ({% %} syntax)
JavaScript Interactive elements (slider, chart rendering)
Responsive Design:
The HTML uses grid-cols-1 md:grid-cols-X which means:
On mobile: 1 column (stack vertically)
On desktop (medium screen and up): Multiple columns (side by side)
This makes the site work beautifully on phones, tablets, and computers!
JavaScript Data Integration:
The Flask backend sends JSON data to [Link]:
const historicalData = {{ historical_data | safe }};
const testPredictionData = {{ test_prediction_data | safe }};
const futurePredictionData = {{ future_prediction_data | safe }};
How it works:
11. 1. Flask processes the prediction
12. 2. Prepares data as JSON
13. 3. Passes it to HTML template with {{ }} notation
14. 4. JavaScript reads this JSON
15. 5. Plotly creates interactive charts from the data