Frontend
Uploaded by
Shiva AcharyaFrontend
Uploaded by
Shiva AcharyaAuth/login
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEPSE Predictor - Login</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=
swap" rel="stylesheet">
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--accent-color: #4cc9f0;
--dark-color: #1a1a2e;
--light-color: #f8f9fa;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
height: 100vh;
display: flex;
align-items: center;
color: var(--light-color);
}
.auth-container {
max-width: 450px;
width: 100%;
margin: 0 auto;
}
.auth-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.auth-card:hover {
transform: translateY(-5px);
}
.auth-header {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
padding: 2rem;
text-align: center;
color: white;
}
.auth-header h2 {
font-weight: 600;
margin-bottom: 0.5rem;
}
.auth-header p {
opacity: 0.8;
font-weight: 300;
}
.auth-body {
padding: 2rem;
}
.form-control {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 0.75rem 1rem;
border-radius: 10px;
transition: all 0.3s;
}
.form-control:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--accent-color);
box-shadow: 0 0 0 0.25rem rgba(76, 201, 240, 0.25);
color: white;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.btn-auth {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border: none;
padding: 0.75rem;
border-radius: 10px;
font-weight: 500;
letter-spacing: 0.5px;
transition: all 0.3s;
}
.btn-auth:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
}
.auth-footer {
text-align: center;
padding: 1.5rem;
font-size: 0.9rem;
opacity: 0.7;
}
.auth-link {
color: var(--accent-color);
text-decoration: none;
transition: all 0.3s;
}
.auth-link:hover {
color: white;
text-decoration: underline;
}
.input-group-text {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
}
.logo {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="auth-container">
<div class="text-center mb-4">
<div class="logo">
<i class="fas fa-chart-line"></i> NEPSE Predictor
</div>
<p class="text-muted">AI-powered stock market predictions</p>
</div>
<div class="auth-card">
<div class="auth-header">
<h2><i class="fas fa-sign-in-alt"></i> Welcome Back</h2>
<p>Sign in to access your portfolio and predictions</p>
</div>
<div class="auth-body">
<form th:action="@{/auth/login}" method="post">
<div th:if="${param.error}" class="alert alert-danger">
Invalid username or password
</div>
<div th:if="${param.logout}" class="alert alert-success">
You have been logged out successfully
</div>
<div th:if="${success}" class="alert alert-success" th:text="${success}"></div>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="text" class="form-control" id="username" name="username"
th:value="${loginRequest?.username}"
placeholder="Enter your username" required>
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" id="password" name="password"
placeholder="Enter your password" required>
</div>
</div>
<div class="d-grid gap-2 mb-3">
<button type="submit" class="btn btn-auth">
<i class="fas fa-sign-in-alt me-2"></i> Login
</button>
</div>
<div class="text-center mb-3">
<a href="#" class="auth-link">Forgot password?</a>
</div>
<div class="text-center">
<p class="mb-0">Don't have an account?
<a href="/auth/register" class="auth-link">Register here</a>
</p>
</div>
</form>
</div>
<div class="auth-footer">
<p>© 2023 NEPSE Predictor. All rights reserved.</p>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Register
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEPSE Predictor - Register</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=
swap" rel="stylesheet">
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--accent-color: #4cc9f0;
--dark-color: #1a1a2e;
--light-color: #f8f9fa;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
height: 100vh;
display: flex;
align-items: center;
color: var(--light-color);
}
.auth-container {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
.auth-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.auth-card:hover {
transform: translateY(-5px);
}
.auth-header {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
padding: 2rem;
text-align: center;
color: white;
}
.auth-header h2 {
font-weight: 600;
margin-bottom: 0.5rem;
}
.auth-header p {
opacity: 0.8;
font-weight: 300;
}
.auth-body {
padding: 2rem;
}
.form-control {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 0.75rem 1rem;
border-radius: 10px;
transition: all 0.3s;
}
.form-control:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--accent-color);
box-shadow: 0 0 0 0.25rem rgba(76, 201, 240, 0.25);
color: white;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.btn-auth {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border: none;
padding: 0.75rem;
border-radius: 10px;
font-weight: 500;
letter-spacing: 0.5px;
transition: all 0.3s;
}
.btn-auth:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
}
.auth-footer {
text-align: center;
padding: 1.5rem;
font-size: 0.9rem;
opacity: 0.7;
}
.auth-link {
color: var(--accent-color);
text-decoration: none;
transition: all 0.3s;
}
.auth-link:hover {
color: white;
text-decoration: underline;
}
.input-group-text {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
}
.password-strength {
height: 5px;
margin-top: 5px;
border-radius: 5px;
background: #e9ecef;
overflow: hidden;
}
.strength-meter {
height: 100%;
width: 0;
transition: width 0.3s ease;
}
.logo {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="auth-container">
<div class="text-center mb-4">
<div class="logo">
<i class="fas fa-chart-line"></i> NEPSE Predictor
</div>
<p class="text-muted">AI-powered stock market predictions</p>
</div>
<div class="auth-card">
<div class="auth-header">
<h2><i class="fas fa-user-plus"></i> Create Account</h2>
<p>Join us to unlock stock predictions and portfolio tracking</p>
</div>
<div class="auth-body">
<form th:action="@{/auth/register}" th:object="${registerRequest}" method="post">
<div th:if="${error}" class="alert alert-danger" th:text="${error}"></div>
<div class="mb-3">
<label for="fullName" class="form-label">Full Name</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="text" class="form-control" id="fullName"
th:field="*{fullName}"
placeholder="Enter your full name" required>
</div>
</div>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-at"></i></span>
<input type="text" class="form-control" id="username"
th:field="*{username}"
placeholder="Choose a username" required>
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
<input type="email" class="form-control" id="email"
th:field="*{email}"
placeholder="Enter your email" required>
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" id="password"
th:field="*{password}"
placeholder="Create a password" required
oninput="checkPasswordStrength(this.value)">
</div>
<div class="password-strength mt-2">
<div class="strength-meter" id="strengthMeter"></div>
</div>
<small class="text-muted">Minimum 6 characters</small>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="terms" required>
<label class="form-check-label" for="terms">
I agree to the <a href="#" class="auth-link">Terms of Service</a> and
<a href="#" class="auth-link">Privacy Policy</a>
</label>
</div>
<div class="d-grid gap-2 mb-3">
<button type="submit" class="btn btn-auth">
<i class="fas fa-user-plus me-2"></i> Register
</button>
</div>
<div class="text-center">
<p class="mb-0">Already have an account?
<a href="/auth/login" class="auth-link">Login here</a>
</p>
</div>
</form>
</div>
<div class="auth-footer">
<p>© 2023 NEPSE Predictor. All rights reserved.</p>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
function checkPasswordStrength(password) {
const strengthMeter = document.getElementById('strengthMeter');
let strength = 0;
// Check length
if (password.length >= 6) strength += 1;
if (password.length >= 8) strength += 1;
// Check for mixed case
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1;
// Check for numbers
if (password.match(/([0-9])/)) strength += 1;
// Check for special chars
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
// Update meter
const strengthPercent = (strength / 5) * 100;
strengthMeter.style.width = strengthPercent + '%';
// Update color
if (strength <= 2) {
strengthMeter.style.backgroundColor = '#dc3545'; // Red
} else if (strength <= 4) {
strengthMeter.style.backgroundColor = '#ffc107'; // Yellow
} else {
strengthMeter.style.backgroundColor = '#28a745'; // Green
}
}
</script>
</body>
</html>
Dashboard
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard | NEPSE Predictor</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=
swap" rel="stylesheet">
<style>
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--danger: #f72585;
--warning: #ff9e00;
--dark: #1a1a2e;
--light: #f8f9fa;
--card-bg: rgba(255, 255, 255, 0.05);
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: var(--light);
min-height: 100vh;
}
.navbar {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
border-right: 1px solid rgba(255, 255, 255, 0.1);
height: calc(100vh - 56px);
position: sticky;
top: 56px;
}
.nav-link {
color: rgba(255, 255, 255, 0.7);
border-radius: 8px;
margin-bottom: 5px;
transition: all 0.3s;
}
.nav-link:hover, .nav-link.active {
background: rgba(67, 97, 238, 0.2);
color: white;
}
.nav-link i {
width: 24px;
text-align: center;
margin-right: 10px;
}
.card {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
color: var(--light);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}
.card-header {
background: rgba(30, 41, 59, 0.6);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 600;
letter-spacing: 0.5px;
padding: 1rem 1.5rem;
border-radius: 12px 12px 0 0 !important;
}
.trend-up {
color: #00b894;
}
.trend-down {
color: #ff7675;
}
.btn-primary {
background: linear-gradient(to right, var(--primary), var(--secondary));
border: none;
font-weight: 500;
}
.btn-outline-primary {
border-color: rgba(67, 97, 238, 0.5);
color: #4361ee;
}
.progress {
background: rgba(30, 41, 59, 0.5);
height: 20px;
border-radius: 10px;
}
.progress-bar {
border-radius: 10px;
}
.search-box {
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
}
.search-box:focus {
background: rgba(30, 41, 59, 0.9);
border-color: rgba(67, 97, 238, 0.5);
box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
color: white;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(to right, #4361ee, #3f37c9);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.stock-card {
border-left: 4px solid var(--success);
transition: all 0.3s;
}
.stock-card.danger {
border-left-color: var(--danger);
}
.market-indicator {
font-size: 1.2rem;
font-weight: 600;
}
.market-up {
color: var(--success);
}
.market-down {
color: var(--danger);
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="/dashboard">
<i class="fas fa-chart-line fa-lg me-2"></i>
<span class="fw-bold">NEPSE</span> PREDICTOR
</a>
<div class="d-flex align-items-center">
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none
dropdown-toggle"
id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<div class="user-avatar me-2">
<span th:text="${user.fullName.substring(0,1)}">U</span>
</div>
<span th:text="${user.fullName}">User Name</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" aria-
labelledby="userDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user me-
2"></i>Profile</a></li>
<li><a class="dropdown-item" href="/portfolio"><i class="fas fa-wallet me-
2"></i>Portfolio</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/auth/logout"><i class="fas fa-sign-out-alt me-
2"></i>Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-lg-2 sidebar p-0">
<div class="p-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="/dashboard">
<i class="fas fa-tachometer-alt"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/prediction">
<i class="fas fa-chart-line"></i> Predictions
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/portfolio">
<i class="fas fa-wallet"></i> Portfolio
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-bell"></i> Alerts
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-cog"></i> Settings
</a>
</li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="col-lg-10 py-4">
<div class="container-fluid">
<!-- Market Overview -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card">
<div class="card-header">NEPSE Index</div>
<div class="card-body">
<h3 class="card-title">2,018.76</h3>
<span class="market-indicator market-up">+12.45 (0.62%)</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Total Turnover</div>
<div class="card-body">
<h3 class="card-title">Rs. 4.56B</h3>
<span class="market-indicator market-up">+0.32B (7.5%)</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Total Volume</div>
<div class="card-body">
<h3 class="card-title">4,562,890</h3>
<span class="market-indicator market-down">-124,560 (2.7%)</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Total Transactions</div>
<div class="card-body">
<h3 class="card-title">54,321</h3>
<span class="market-indicator market-up">+2,456 (4.7%)</span>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Prediction Card -->
<div class="col-lg-8 mb-4">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<i class="fas fa-chart-line me-2"></i>
Stock Prediction - <span th:text="${prediction.symbol}">NEPSE</span>
</div>
<div class="input-group" style="width: 300px;">
<input type="text" class="form-control search-box"
placeholder="Search stock..." id="stockSearch">
<button class="btn btn-primary" type="button" id="searchButton">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<canvas id="stockChart" height="300"></canvas>
</div>
<div class="col-md-4">
<div class="card mb-4 stock-card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Current Price</h5>
<i class="fas fa-coins fa-2x text-warning"></i>
</div>
<h2 class="mb-0">Rs. <span
th:text="${#numbers.formatDecimal(prediction.currentPrice, 1, 2)}">0</span></h2>
</div>
</div>
<div th:class="${prediction.trend == 'UP' ? 'card mb-4 stock-card' : 'card
mb-4 stock-card danger'}">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Predicted Price</h5>
<i th:if="${prediction.trend == 'UP'}" class="fas fa-arrow-up fa-2x
text-success"></i>
<i th:if="${prediction.trend == 'DOWN'}" class="fas fa-arrow-down
fa-2x text-danger"></i>
</div>
<h2 th:class="${prediction.trend == 'UP' ? 'trend-up' : 'trend-
down'}">
Rs. <span
th:text="${#numbers.formatDecimal(prediction.predictedPrice, 1, 2)}">0</span>
</h2>
<div class="mt-3">
<span>Potential Gain:</span>
<strong th:class="${prediction.potentialGain >= 0 ? 'text-success' :
'text-danger'}">
<span th:text="${prediction.potentialGain >= 0 ? '+' :
''}"></span>
<span
th:text="${#numbers.formatDecimal(prediction.potentialGain, 1, 2)}">0</span>%
</strong>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title mb-3">Prediction Confidence</h5>
<div class="progress mb-3">
<div class="progress-bar bg-success"
role="progressbar"
th:style="'width: ' + ${prediction.confidence} + '%;'"
th:attr="aria-valuenow=${prediction.confidence}"
aria-valuemin="0"
aria-valuemax="100">
<span th:text="${prediction.confidence} + '%'">0%</span>
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary">
<i class="fas fa-plus-circle me-2"></i>Add to Portfolio
</button>
<button class="btn btn-outline-primary">
<i class="fas fa-bell me-2"></i>Set Price Alert
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Summary -->
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<i class="fas fa-wallet me-2"></i> Portfolio Summary
</div>
<a href="/portfolio" class="btn btn-sm btn-outline-primary">View All</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<span>Total Value:</span>
<strong>Rs. <span th:text="${#numbers.formatDecimal(portfolio.totalValue,
1, 2)}">0</span></strong>
</div>
<div class="d-flex justify-content-between mb-3">
<span>Today's Gain:</span>
<strong th:class="${portfolio.todaysGain >= 0 ? 'text-success' : 'text-
danger'}">
<span th:if="${portfolio.todaysGain >= 0}">+</span>
Rs. <span th:text="${#numbers.formatDecimal(portfolio.todaysGain, 1,
2)}">0</span>
</strong>
</div>
<div class="d-flex justify-content-between mb-4">
<span>Overall Gain:</span>
<strong th:class="${portfolio.overallGain >= 0 ? 'text-success' : 'text-
danger'}">
<span th:if="${portfolio.overallGain >= 0}">+</span>
Rs. <span th:text="${#numbers.formatDecimal(portfolio.overallGain, 1,
2)}">0</span>
(<span th:text="${#numbers.formatDecimal(portfolio.gainPercentage, 1,
2)}">0</span>%)
</strong>
</div>
<h6 class="mb-3">Your Holdings</h6>
<div class="table-responsive">
<table class="table table-dark table-hover mb-0">
<thead>
<tr>
<th>Symbol</th>
<th>Value</th>
<th>Gain</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${portfolio.items}" th:if="${item.quantity > 0}">
<td th:text="${item.symbol}">NICA</td>
<td th:text="${'Rs. ' + #numbers.formatDecimal(item.currentPrice *
item.quantity, 1, 2)}">Rs. 15,000</td>
<td th:class="${item.gain >= 0 ? 'text-success' : 'text-danger'}">
<span th:text="${item.gain >= 0 ? '+' : ''}"></span>
<span th:text="${#numbers.formatDecimal(item.gainPercentage, 1,
2)}">0</span>%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Market Data -->
<div class="row">
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<i class="fas fa-arrow-up me-2 text-success"></i> Top Gainers
</div>
<a href="#" class="btn btn-sm btn-outline-success">View All</a>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-dark table-hover mb-0">
<thead>
<tr>
<th>Symbol</th>
<th>Price</th>
<th>Change</th>
</tr>
</thead>
<tbody>
<tr th:each="gainer : ${topGainers}">
<td th:text="${gainer.symbol}">ABC</td>
<td th:text="${gainer.price}">1500</td>
<td class="text-success" th:text="'+' + ${gainer.change} +
'%'">+5.25%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<i class="fas fa-arrow-down me-2 text-danger"></i> Top Losers
</div>
<a href="#" class="btn btn-sm btn-outline-danger">View All</a>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-dark table-hover mb-0">
<thead>
<tr>
<th>Symbol</th>
<th>Price</th>
<th>Change</th>
</tr>
</thead>
<tbody>
<tr th:each="loser : ${topLosers}">
<td th:text="${loser.symbol}">XYZ</td>
<td th:text="${loser.price}">1200</td>
<td class="text-danger" th:text="'-' + ${loser.change} + '%'">-
3.45%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Initialize chart
const ctx = document.getElementById('stockChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1M', '2W', '1W', '3D', '2D', '1D', 'Today', 'Pred'],
datasets: [{
label: 'Stock Price',
data: [1800, 1850, 1900, 1950, 2000, 2050, 2100, 2180],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
borderWidth: 3,
pointRadius: 5,
pointBackgroundColor: '#4361ee',
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#f8f9fa',
bodyColor: '#f8f9fa',
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 1,
padding: 12,
displayColors: false
}
},
scales: {
y: {
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: '#94a3b8'
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#94a3b8'
}
}
}
}
});
function searchStock(symbol) {
document.getElementById('stockSearch').value = symbol;
document.getElementById('searchButton').click();
}
document.getElementById('searchButton').addEventListener('click', function() {
const symbol = document.getElementById('stockSearch').value;
if (symbol.trim() !== '') {
// Create a form to submit the search
const form = document.createElement('form');
form.method = 'POST';
form.action = '/dashboard/predict';
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'symbol';
input.value = symbol;
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
});
</script>
</body>
</html>
Portfolio
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio | NEPSE Predictor</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=
swap" rel="stylesheet">
<style>
/* Same styles as dashboard.html */
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--danger: #f72585;
--warning: #ff9e00;
--dark: #1a1a2e;
--light: #f8f9fa;
--card-bg: rgba(255, 255, 255, 0.05);
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: var(--light);
min-height: 100vh;
}
/* Include all other styles from dashboard.html */
</style>
</head>
<body>
<!-- Navbar (same as dashboard.html) -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<!-- ... same navbar content ... -->
</nav>
<div class="container-fluid">
<div class="row">
<!-- Sidebar (same as dashboard.html) -->
<div class="col-lg-2 sidebar p-0">
<!-- ... same sidebar content ... -->
</div>
<!-- Main Content -->
<div class="col-lg-10 py-4">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="mb-0"><i class="fas fa-wallet me-2"></i> My Portfolio</h2>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#addStockModal">
<i class="fas fa-plus me-2"></i> Add Stock
</button>
</div>
<!-- Portfolio Summary -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card">
<div class="card-header">Total Value</div>
<div class="card-body">
<h3 class="card-title">Rs. <span
th:text="${#numbers.formatDecimal(portfolio.totalValue, 1, 2)}">0</span></h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Today's Gain</div>
<div class="card-body">
<h3 th:class="${portfolio.todaysGain >= 0 ? 'text-success' : 'text-danger'}">
<span th:if="${portfolio.todaysGain >= 0}">+</span>
Rs. <span th:text="${#numbers.formatDecimal(portfolio.todaysGain, 1,
2)}">0</span>
</h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Overall Gain</div>
<div class="card-body">
<h3 th:class="${portfolio.overallGain >= 0 ? 'text-success' : 'text-danger'}">
<span th:if="${portfolio.overallGain >= 0}">+</span>
Rs. <span th:text="${#numbers.formatDecimal(portfolio.overallGain, 1,
2)}">0</span>
</h3>
<p class="mb-0" th:class="${portfolio.gainPercentage >= 0 ? 'text-success' :
'text-danger'}">
(<span th:text="${#numbers.formatDecimal(portfolio.gainPercentage, 1,
2)}">0</span>%)
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Diversification</div>
<div class="card-body">
<div class="progress" style="height: 20px;">
<div class="progress-bar bg-success" style="width: 45%">Banking
45%</div>
<div class="progress-bar bg-info" style="width: 25%">Finance 25%</div>
<div class="progress-bar bg-warning" style="width: 15%">Hydro 15%</div>
<div class="progress-bar bg-danger" style="width: 15%">Others 15%</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Holdings -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<i class="fas fa-chart-pie me-2"></i> Holdings
</div>
<div class="input-group" style="width: 300px;">
<input type="text" class="form-control search-box" placeholder="Filter
stocks...">
<button class="btn btn-outline-primary" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-dark table-hover mb-0">
<thead>
<tr>
<th>Symbol</th>
<th>Quantity</th>
<th>Avg. Price</th>
<th>Current Price</th>
<th>Invested</th>
<th>Value</th>
<th>Gain/Loss</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${portfolio.items}" th:if="${item.quantity > 0}">
<td th:text="${item.symbol}">NICA</td>
<td th:text="${item.quantity}">10</td>
<td th:text="${'Rs. ' + #numbers.formatDecimal(item.averagePrice, 1,
2)}">Rs. 1,500</td>
<td th:text="${'Rs. ' + #numbers.formatDecimal(item.currentPrice, 1,
2)}">Rs. 1,600</td>
<td th:text="${'Rs. ' + #numbers.formatDecimal(item.averagePrice *
item.quantity, 1, 2)}">Rs. 15,000</td>
<td th:text="${'Rs. ' + #numbers.formatDecimal(item.currentPrice *
item.quantity, 1, 2)}">Rs. 16,000</td>
<td th:class="${item.gain >= 0 ? 'text-success' : 'text-danger'}">
<span th:text="${item.gain >= 0 ? '+' : ''}"></span>
Rs. <span th:text="${#numbers.formatDecimal(item.gain, 1,
2)}">1,000</span>
(<span th:text="${#numbers.formatDecimal(item.gainPercentage, 1,
2)}">6.67</span>%)
</td>
<td>
<button class="btn btn-sm btn-outline-primary me-2"
data-bs-toggle="modal"
data-bs-target="#buyStockModal"
th:attr="data-symbol=${item.symbol}">
<i class="fas fa-plus"></i> Buy
</button>
<button class="btn btn-sm btn-outline-danger"
data-bs-toggle="modal"
data-bs-target="#sellStockModal"
th:attr="data-symbol=${item.symbol}">
<i class="fas fa-minus"></i> Sell
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Performance Chart -->
<div class="card">
<div class="card-header">
<i class="fas fa-chart-line me-2"></i> Portfolio Performance
</div>
<div class="card-body">
<canvas id="portfolioChart" height="300"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add Stock Modal -->
<div class="modal fade" id="addStockModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-dark text-white">
<div class="modal-header">
<h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i> Add New Stock</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<form th:action="@{/portfolio/add}" th:object="${portfolioRequest}" method="post">
<div class="modal-body">
<div class="mb-3">
<label for="symbol" class="form-label">Stock Symbol</label>
<input type="text" class="form-control" id="symbol" th:field="*{symbol}"
required>
</div>
<div class="mb-3">
<label for="quantity" class="form-label">Quantity</label>
<input type="number" class="form-control" id="quantity" th:field="*{quantity}"
min="1" required>
</div>
<div class="mb-3">
<label for="averagePrice" class="form-label">Average Price (Rs.)</label>
<input type="number" step="0.01" class="form-control" id="averagePrice"
th:field="*{averagePrice}" min="0.01" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add to Portfolio</button>
</div>
</form>
</div>
</div>
</div>
<!-- Buy Stock Modal -->
<div class="modal fade" id="buyStockModal" tabindex="-1" aria-hidden="true">
<!-- Similar structure to addStockModal -->
</div>
<!-- Sell Stock Modal -->
<div class="modal fade" id="sellStockModal" tabindex="-1" aria-hidden="true">
<!-- Similar structure to addStockModal -->
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Portfolio Performance Chart
const portfolioCtx = document.getElementById('portfolioChart').getContext('2d');
const portfolioChart = new Chart(portfolioCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Portfolio Value',
data: [100000, 105000, 110000, 115000, 120000, 125000, 130000, 135000, 140000,
145000, 150000, 155000],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.3
}, {
label: 'NEPSE Index',
data: [1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350],
borderColor: '#4cc9f0',
backgroundColor: 'rgba(76, 201, 240, 0.1)',
borderWidth: 2,
borderDash: [5, 5],
fill: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false,
}
},
scales: {
y: {
beginAtZero: false
}
}
}
});
</script>
</body>
</html>
Prediction
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stock Prediction | NEPSE Predictor</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=
swap" rel="stylesheet">
<style>
/* Same styles as dashboard.html */
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--danger: #f72585;
--warning: #ff9e00;
--dark: #1a1a2e;
--light: #f8f9fa;
--card-bg: rgba(255, 255, 255, 0.05);
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: var(--light);
min-height: 100vh;
}
/* Include all other styles from dashboard.html */
</style>
</head>
<body>
<!-- Navbar (same as dashboard.html) -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<!-- ... same navbar content ... -->
</nav>
<div class="container-fluid">
<div class="row">
<!-- Sidebar (same as dashboard.html) -->
<div class="col-lg-2 sidebar p-0">
<!-- ... same sidebar content ... -->
</div>
<!-- Main Content -->
<div class="col-lg-10 py-4">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="mb-0"><i class="fas fa-chart-line me-2"></i> Stock Predictions</h2>
<div class="input-group" style="width: 400px;">
<input type="text" class="form-control search-box"
placeholder="Search stock..." id="predictionSearch"
th:value="${symbol} ? ${symbol} : ''">
<button class="btn btn-primary" type="button" id="predictionSearchButton">
<i class="fas fa-search"></i> Predict
</button>
</div>
</div>
<div th:if="${error}" class="alert alert-danger" th:text="${error}"></div>
<!-- Prediction Card -->
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-brain me-2"></i> LSTM AI Prediction -
<span th:text="${prediction.symbol} ? ${prediction.symbol} : 'Select a
stock'"></span>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div class="chart-container" style="position: relative; height:400px;">
<canvas id="predictionChart"></canvas>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-header">Prediction Summary</div>
<div class="card-body">
<div class="mb-3">
<h6>Current Price</h6>
<h3 th:if="${prediction}" th:text="${'Rs. ' +
#numbers.formatDecimal(prediction.currentPrice, 1, 2)}">Rs. 0</h3>
<h3 th:unless="${prediction}">-</h3>
</div>
<div class="mb-3" th:if="${prediction}">
<h6>Predicted Price (7 days)</h6>
<h3 th:class="${prediction.trend == 'UP' ? 'text-success' : 'text-
danger'}">
<span th:text="${'Rs. ' +
#numbers.formatDecimal(prediction.predictedPrice, 1, 2)}">Rs. 0</span>
<i th:if="${prediction.trend == 'UP'}" class="fas fa-arrow-up text-
success"></i>
<i th:if="${prediction.trend == 'DOWN'}" class="fas fa-arrow-down
text-danger"></i>
</h3>
</div>
<div class="mb-3" th:if="${prediction}">
<h6>Potential Gain</h6>
<h4 th:class="${prediction.potentialGain >= 0 ? 'text-success' : 'text-
danger'}">
<span th:text="${prediction.potentialGain >= 0 ? '+' : ''}"></span>
<span th:text="${#numbers.formatDecimal(prediction.potentialGain,
1, 2)}">0</span>%
</h4>
</div>
<div th:if="${prediction}">
<h6>AI Confidence</h6>
<div class="progress mb-2" style="height: 20px;">
<div class="progress-bar bg-success"
th:style="'width: ' + ${prediction.confidence} + '%;'"
th:text="${prediction.confidence} + '%'">0%</div>
</div>
<small class="text-muted">Model confidence in this prediction</small>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Recommended Action</div>
<div class="card-body text-center">
<div th:if="${prediction}">
<i th:if="${prediction.trend == 'UP'}"
class="fas fa-thumbs-up fa-3x text-success mb-3"></i>
<i th:if="${prediction.trend == 'DOWN'}"
class="fas fa-thumbs-down fa-3x text-danger mb-3"></i>
<h4 th:text="${prediction.trend == 'UP' ? 'BUY' : 'SELL'}">-</h4>
<p class="mb-0" th:text="${prediction.trend == 'UP' ?
'AI suggests this stock has upward potential' :
'AI suggests this stock may decline'}"></p>
</div>
<div th:unless="${prediction}">
<i class="fas fa-chart-line fa-3x text-muted mb-3"></i>
<h4>Select a stock</h4>
<p class="mb-0">Enter a stock symbol to get AI prediction</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Technical Indicators -->
<div class="row">
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header">
<i class="fas fa-wave-square me-2"></i> Technical Indicators
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h6>RSI (14)</h6>
<h3 th:if="${prediction}" th:class="${prediction.currentPrice >
prediction.predictedPrice ? 'text-danger' : 'text-success'}">
<span th:text="${#numbers.formatDecimal(45.6, 1, 1)}">0</span>
</h3>
<h3 th:unless="${prediction}">-</h3>
<small class="text-muted">30-70 range</small>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h6>MACD</h6>
<h3 th:if="${prediction}" th:class="${prediction.currentPrice >
prediction.predictedPrice ? 'text-danger' : 'text-success'}">
<span th:text="${#numbers.formatDecimal(1.2, 1, 2)}">0</span>
</h3>
<h3 th:unless="${prediction}">-</h3>
<small class="text-muted">Signal: 1.05</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h6>50-Day MA</h6>
<h3 th:if="${prediction}">
<span th:text="${'Rs. ' + #numbers.formatDecimal(1985.45, 1,
2)}">Rs. 0</span>
</h3>
<h3 th:unless="${prediction}">-</h3>
<small class="text-muted">Moving Average</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h6>200-Day MA</h6>
<h3 th:if="${prediction}">
<span th:text="${'Rs. ' + #numbers.formatDecimal(1856.78, 1,
2)}">Rs. 0</span>
</h3>
<h3 th:unless="${prediction}">-</h3>
<small class="text-muted">Moving Average</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header">
<i class="fas fa-lightbulb me-2"></i> AI Insights
</div>
<div class="card-body">
<div th:if="${prediction}">
<h5 class="mb-3">LSTM Model Analysis</h5>
<p>The Long Short-Term Memory neural network has detected
<span th:if="${prediction.trend == 'UP'}">a bullish pattern</span>
<span th:if="${prediction.trend == 'DOWN'}">a bearish pattern</span>
in the price movements of this stock.
</p>
<div class="alert" th:class="${prediction.trend == 'UP' ? 'alert-success' :
'alert-danger'}">
<h6><i class="fas fa-robot me-2"></i>AI Recommendation</h6>
<p th:text="${prediction.trend == 'UP' ?
'Based on historical patterns and current indicators, this stock shows
strong potential for growth in the coming days.' :
'The model suggests caution as this stock may experience downward
pressure based on current trends.'}"></p>
</div>
<h5 class="mt-4 mb-3">Key Factors</h5>
<ul>
<li th:if="${prediction.trend == 'UP'}">Increasing trading volume</li>
<li th:if="${prediction.trend == 'UP'}">Positive momentum indicators</li>
<li th:if="${prediction.trend == 'UP'}">Breakthrough resistance level</li>
<li th:if="${prediction.trend == 'DOWN'}">Decreasing trading volume</li>
<li th:if="${prediction.trend == 'DOWN'}">Negative momentum
indicators</li>
<li th:if="${prediction.trend == 'DOWN'}">Approaching support level</li>
</ul>
</div>
<div th:unless="${prediction}" class="text-center py-5">
<i class="fas fa-chart-line fa-4x text-muted mb-4"></i>
<h4>No Stock Selected</h4>
<p>Search for a stock symbol to view AI predictions and analysis</p>
</div>
</div>
</div>
</div>
</div>
<!-- Popular Stocks -->
<div class="card">
<div class="card-header">
<i class="fas fa-star me-2"></i> Popular Stocks
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3 mb-3" th:each="symbol : ${['NICA', 'NBL', 'SCB', 'HIDCL']}">
<div class="card stock-card h-100" th:class="${prediction?.symbol == symbol ?
'border-primary' : ''}">
<div class="card-body text-center">
<h5 th:text="${symbol}">NICA</h5>
<p class="mb-2">Nepal Investment Bank</p>
<button class="btn btn-sm btn-outline-primary"
th:onclick="'searchStock(\'' + ${symbol} + '\')'">
Predict Now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Prediction Chart
const predCtx = document.getElementById('predictionChart').getContext('2d');
const predChart = new Chart(predCtx, {
type: 'line',
data: {
labels: ['-30d', '-25d', '-20d', '-15d', '-10d', '-5d', 'Today', '+5d', '+10d'],
datasets: [{
label: 'Historical Data',
data: [1800, 1850, 1900, 1950, 2000, 2050, 2100, null, null],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
borderWidth: 3,
pointRadius: 5,
pointBackgroundColor: '#4361ee',
tension: 0.3,
fill: true
}, {
label: 'Prediction',
data: [null, null, null, null, null, null, 2100, 2150, 2200],
borderColor: '#4cc9f0',
backgroundColor: 'rgba(76, 201, 240, 0.1)',
borderWidth: 3,
borderDash: [5, 5],
pointRadius: 5,
pointBackgroundColor: '#4cc9f0',
tension: 0.3,
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#f8f9fa',
bodyColor: '#f8f9fa',
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 1,
padding: 12,
}
},
scales: {
y: {
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: '#94a3b8'
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#94a3b8'
}
}
}
}
});
function searchStock(symbol) {
document.getElementById('predictionSearch').value = symbol;
document.getElementById('predictionSearchButton').click();
}
document.getElementById('predictionSearchButton').addEventListener('click', function() {
const symbol = document.getElementById('predictionSearch').value;
if (symbol.trim() !== '') {
window.location.href = '/prediction?symbol=' + symbol;
}
});
</script>
</body>
</html>
Fragment/header
Footer
Static/css/main.css
/* Base Styles */
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--danger: #f72585;
--warning: #ff9e00;
--info: #4895ef;
--dark: #1a1a2e;
--light: #f8f9fa;
--gray: #6c757d;
--card-bg: rgba(255, 255, 255, 0.05);
--sidebar-bg: rgba(15, 23, 42, 0.7);
--navbar-bg: rgba(15, 23, 42, 0.8);
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: var(--light);
min-height: 100vh;
line-height: 1.6;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
}
a{
text-decoration: none;
transition: all 0.3s ease;
}
/* Layout Components */
.navbar {
background: var(--navbar-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.75rem 1rem;
}
.sidebar {
background: var(--sidebar-bg);
backdrop-filter: blur(10px);
border-right: 1px solid rgba(255, 255, 255, 0.1);
height: calc(100vh - 56px);
position: sticky;
top: 56px;
}
/* Cards */
.card {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transition: all 0.3s ease;
color: var(--light);
margin-bottom: 1.5rem;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}
.card-header {
background: rgba(30, 41, 59, 0.6);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 600;
letter-spacing: 0.5px;
padding: 1rem 1.5rem;
border-radius: 12px 12px 0 0 !important;
}
/* Buttons */
.btn {
font-weight: 500;
letter-spacing: 0.5px;
border-radius: 8px;
padding: 0.5rem 1.25rem;
transition: all 0.3s ease;
}
.btn-primary {
background: linear-gradient(to right, var(--primary), var(--secondary));
border: none;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
}
.btn-outline-primary {
border-color: rgba(67, 97, 238, 0.5);
color: var(--primary);
}
.btn-outline-primary:hover {
background: rgba(67, 97, 238, 0.1);
}
/* Forms */
.form-control {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 0.75rem 1rem;
border-radius: 10px;
transition: all 0.3s;
}
.form-control:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--success);
box-shadow: 0 0 0 0.25rem rgba(76, 201, 240, 0.25);
color: white;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
/* Tables */
.table {
color: var(--light);
}
.table-dark {
background-color: transparent;
}
.table-hover tbody tr:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* Progress Bars */
.progress {
background: rgba(30, 41, 59, 0.5);
height: 20px;
border-radius: 10px;
}
.progress-bar {
border-radius: 10px;
}
/* Utility Classes */
.trend-up {
color: #00b894;
}
.trend-down {
color: #ff7675;
}
.text-success {
color: var(--success) !important;
}
.text-danger {
color: var(--danger) !important;
}
.text-warning {
color: var(--warning) !important;
}
.bg-gradient-primary {
background: linear-gradient(to right, var(--primary), var(--secondary));
}
/* Stock Cards */
.stock-card {
border-left: 4px solid var(--success);
transition: all 0.3s;
}
.stock-card.danger {
border-left-color: var(--danger);
}
/* Auth Pages */
.auth-container {
max-width: 450px;
width: 100%;
margin: 0 auto;
}
.auth-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.auth-card:hover {
transform: translateY(-5px);
}
.auth-header {
background: linear-gradient(to right, var(--primary), var(--secondary));
padding: 2rem;
text-align: center;
color: white;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.sidebar {
height: auto;
position: relative;
top: 0;
}
.navbar {
padding: 0.5rem;
}
}
Static/js/main.js
/**
* Main Application JavaScript
* Contains common functionality used across all pages
*/
document.addEventListener('DOMContentLoaded', function() {
// Initialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Initialize popovers
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="popover"]'));
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
// Stock search functionality
if (document.getElementById('stockSearch')) {
document.getElementById('stockSearch').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
searchStock(this.value);
}
});
}
// Portfolio stock actions
document.querySelectorAll('.stock-action').forEach(button => {
button.addEventListener('click', function() {
const symbol = this.getAttribute('data-symbol');
const action = this.getAttribute('data-action');
handleStockAction(symbol, action);
});
});
// Initialize charts if they exist on the page
if (document.getElementById('stockChart')) {
initializeStockChart();
}
if (document.getElementById('portfolioChart')) {
initializePortfolioChart();
}
if (document.getElementById('predictionChart')) {
initializePredictionChart();
}
});
/**
* Search for a stock and redirect to prediction page
*/
function searchStock(symbol) {
if (symbol && symbol.trim() !== '') {
window.location.href = '/prediction?symbol=' + encodeURIComponent(symbol.trim());
}
}
/**
* Handle stock actions (buy/sell)
*/
function handleStockAction(symbol, action) {
console.log(`Handling ${action} action for ${symbol}`);
// Implement actual buy/sell logic here
// This would typically make an API call to your backend
}
/**
* Initialize stock chart
*/
function initializeStockChart() {
const ctx = document.getElementById('stockChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['1M', '2W', '1W', '3D', '2D', '1D', 'Today', 'Pred'],
datasets: [{
label: 'Stock Price',
data: [1800, 1850, 1900, 1950, 2000, 2050, 2100, 2180],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
borderWidth: 3,
pointRadius: 5,
pointBackgroundColor: '#4361ee',
tension: 0.3,
fill: true
}]
},
options: getChartOptions()
});
}
/**
* Initialize portfolio chart
*/
function initializePortfolioChart() {
const ctx = document.getElementById('portfolioChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Portfolio Value',
data: [100000, 105000, 110000, 115000, 120000, 125000, 130000, 135000, 140000,
145000, 150000, 155000],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.3
}, {
label: 'NEPSE Index',
data: [1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350],
borderColor: '#4cc9f0',
backgroundColor: 'rgba(76, 201, 240, 0.1)',
borderWidth: 2,
borderDash: [5, 5],
fill: false
}]
},
options: getChartOptions()
});
}
/**
* Initialize prediction chart
*/
function initializePredictionChart() {
const ctx = document.getElementById('predictionChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['-30d', '-25d', '-20d', '-15d', '-10d', '-5d', 'Today', '+5d', '+10d'],
datasets: [{
label: 'Historical Data',
data: [1800, 1850, 1900, 1950, 2000, 2050, 2100, null, null],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
borderWidth: 3,
pointRadius: 5,
pointBackgroundColor: '#4361ee',
tension: 0.3,
fill: true
}, {
label: 'Prediction',
data: [null, null, null, null, null, null, 2100, 2150, 2200],
borderColor: '#4cc9f0',
backgroundColor: 'rgba(76, 201, 240, 0.1)',
borderWidth: 3,
borderDash: [5, 5],
pointRadius: 5,
pointBackgroundColor: '#4cc9f0',
tension: 0.3,
fill: false
}]
},
options: getChartOptions()
});
}
/**
* Common chart options
*/
function getChartOptions() {
return {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#f8f9fa'
}
},
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#f8f9fa',
bodyColor: '#f8f9fa',
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 1,
padding: 12,
displayColors: false
}
},
scales: {
y: {
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: '#94a3b8'
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#94a3b8'
}
}
}
};
}
/**
* Format numbers as currency
*/
function formatCurrency(amount) {
return new Intl.NumberFormat('en-NP', {
style: 'currency',
currency: 'NPR',
minimumFractionDigits: 2
}).format(amount);
}
/**
* Show loading spinner
*/
function showLoading() {
const spinner = document.createElement('div');
spinner.className = 'spinner-overlay';
spinner.innerHTML = `
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
`;
document.body.appendChild(spinner);
}
/**
* Hide loading spinner
*/
function hideLoading() {
const spinner = document.querySelector('.spinner-overlay');
if (spinner) {
spinner.remove();
}
}
/**
* Show toast notification
*/
function showToast(message, type = 'success') {
const toastContainer = document.getElementById('toastContainer') ||
createToastContainer();
const toast = document.createElement('div');
toast.className = `toast show align-items-center text-white bg-${type} border-0`;
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">${message}</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-
dismiss="toast" aria-label="Close"></button>
</div>
`;
toastContainer.appendChild(toast);
// Auto-remove after 5 seconds
setTimeout(() => {
toast.remove();
}, 5000);
}
/**
* Create toast container if it doesn't exist
*/
function createToastContainer() {
const container = document.createElement('div');
container.id = 'toastContainer';
container.className = 'position-fixed bottom-0 end-0 p-3';
container.style.zIndex = '11';
document.body.appendChild(container);
return container;
}
/**
* Password strength checker
*/
function checkPasswordStrength(password) {
const strengthMeter = document.getElementById('strengthMeter');
if (!strengthMeter) return;
let strength = 0;
// Check length
if (password.length >= 6) strength += 1;
if (password.length >= 8) strength += 1;
// Check for mixed case
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1;
// Check for numbers
if (password.match(/([0-9])/)) strength += 1;
// Check for special chars
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
// Update meter
const strengthPercent = (strength / 5) * 100;
strengthMeter.style.width = strengthPercent + '%';
// Update color
if (strength <= 2) {
strengthMeter.style.backgroundColor = '#dc3545'; // Red
} else if (strength <= 4) {
strengthMeter.style.backgroundColor = '#ffc107'; // Yellow
} else {
strengthMeter.style.backgroundColor = '#28a745'; // Green
}
}
You might also like
- SEO Friendly Login Page - 20250912 - 204739 - 0000No ratings yetSEO Friendly Login Page - 20250912 - 204739 - 000043 pages
- 8d283fe074eff58a6d84325f69f8a284e37ca9798e8265f068bfcb25ce87db86No ratings yet8d283fe074eff58a6d84325f69f8a284e37ca9798e8265f068bfcb25ce87db864 pages
- Tampilan Form Login Sederhana 1234567890No ratings yetTampilan Form Login Sederhana 12345678903 pages
- U DP Protocol Full Presentation BP PT XNo ratings yetU DP Protocol Full Presentation BP PT X13 pages
- The Training and Application of Silicone Products in Eyebrow Transplantation Simulation - 2023No ratings yetThe Training and Application of Silicone Products in Eyebrow Transplantation Simulation - 20237 pages
- Advanced Calculus and Complex Analysis SemNo ratings yetAdvanced Calculus and Complex Analysis Sem4 pages
- Concrete Mixture: A Gauss Jordan Elimination Application)No ratings yetConcrete Mixture: A Gauss Jordan Elimination Application)3 pages
- Burket S Oral Medicine 12th Edition Michael Glick Full100% (2)Burket S Oral Medicine 12th Edition Michael Glick Full37 pages
- Stenografie Dup Sistemul Duploye Ion Vasilescu Pierre Dephanis100% (2)Stenografie Dup Sistemul Duploye Ion Vasilescu Pierre Dephanis112 pages
- Jazz - Wikipedia, The Free EncyclopediaNo ratings yetJazz - Wikipedia, The Free Encyclopedia43 pages
- Universal Gate - NOR: © 2014 Project Lead The Way, Inc. Digital ElectronicsNo ratings yetUniversal Gate - NOR: © 2014 Project Lead The Way, Inc. Digital Electronics15 pages
- Unity in Diversity for Indigenous PeoplesNo ratings yetUnity in Diversity for Indigenous Peoples3 pages
