Spaces:
Sleeping
Sleeping
File size: 5,818 Bytes
10cbd60 56e6985 10cbd60 44ace97 10cbd60 44ace97 10cbd60 00a7d20 49cf2a3 00a7d20 73023a0 49cf2a3 00a7d20 10cbd60 c622296 10cbd60 e2e78fa 10cbd60 e2e78fa 10cbd60 e2e78fa 10cbd60 c3d68f0 44ace97 0e2e36c 10cbd60 e2e78fa cd1bee4 e2e78fa fa5f3d3 e2e78fa 10cbd60 e2e78fa 10cbd60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
<title>Stock Price Forecast</title>
<!-- Favicon & Loader -->
<link rel="icon" href="{{ url_for('static', filename='assets/js/favicon.ico') }}" type="image/x-icon"/>
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/loader.css') }}"/>
<!-- Bootstrap & Plugins CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/plugins.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/dash_1.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/apexcharts.css') }}"/>
<!-- Icons & Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet"/>
<style>
/* Uncomment the next two lines if you re-enable the Times New Roman reset: */
body, * {
font-family: 'Times New Roman', Times, serif !important;
}
/* Always restore Font Awesome for any .fa* element */
.fas,
.far,
.fab,
[class^="fa-"] {
font-family: "Font Awesome 6 Free" !important;
font-weight: 900; /* needed for solid icons */
}
body {
background: #f4f6fa;
}
.widget-card {
border-radius: .75rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
overflow: hidden;
}
.form-card {
border-radius: .75rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
padding: 2rem;
background: #fff;
}
.btn-forecast {
font-weight: 600;
}
#loadingBar {
height: 4px;
display: none;
margin-top: 1rem;
}
</style>
</head>
<body>
<div id="global-loader"></div>
<div class="container py-5">
<div class="row mb-4">
<div class="col text-center">
<h1>Stock Price Forecast</h1>
</div>
</div>
<!-- TradingView Widget -->
<div class="ratio ratio-16x9 widget-card mb-5">
<div id="tradingview_widget"></div>
</div>
<script src="https://s3.tradingview.com/tv.js"></script>
<script>
new TradingView.widget({
width: '100%',
height: '350',
symbol: '{{ quote or "SPY" }}',
timezone: 'America/New_York',
theme: 'dark',
style: '1',
locale: 'en',
toolbar_bg: '#f1f3f6',
enable_publishing: false,
range: 'YTD',
allow_symbol_change: true,
details: true,
hotlist: true,
calendar: true,
container_id: 'tradingview_widget'
});
</script>
<!-- Input Form & Progress Bar -->
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="form-card text-center">
<h4 class="mb-4">Enter Ticker Symbol</h4>
{% if not_found %}
<div class="alert alert-danger">Stock Symbol Not Found. Please try again.</div>
{% endif %}
<form id="forecastForm" action="{{ url_for('insertintotable') }}" method="POST">
<div class="input-group mb-3">
<span class="input-group-text"><i class="fas fa-chart-line"></i></span>
<input
type="text"
id="tickerInput"
name="nm"
class="form-control form-control-lg"
placeholder="e.g. SPY"
required
/>
</div>
<!-- now a true submit button -->
<button type="submit" class="btn btn-primary btn-forecast btn-lg w-100">
Forecast
</button>
</form>
<!-- this will animate once the form starts submitting -->
<!-- Loader bar only -->
<div
id="loaderWrapper"
style="display:none;
position:relative;
width:100%;
height:4px;
background:#e9ecef;
margin-top:1rem;"
>
<div
id="loaderBar"
style="width:0%;
height:100%;
background:#0d6efd;"
></div>
</div>
</div>
</div>
</div>
</div>
<!-- Mandatory Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="{{ url_for('static', filename='assets/js/popper.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/css/perfect-scrollbar.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/app.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('forecastForm');
const wrapper = document.getElementById('loaderWrapper');
const bar = document.getElementById('loaderBar');
form.addEventListener('submit', () => {
// show & reset the bar
wrapper.style.display = 'block';
bar.style.width = '0%';
// animate 0→100% in 45s
let pct = 0;
const intervalId = setInterval(() => {
pct = Math.min(100, pct + 1);
bar.style.width = pct + '%';
if (pct === 100) clearInterval(intervalId);
}, 150);
// short delay to ensure paint, then submit
setTimeout(() => form.submit(), 1);
});
});
</script>
</body>
</html>
|