Spaces:
Sleeping
Sleeping
| <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 ; | |
| } | |
| /* Always restore Font Awesome for any .fa* element */ | |
| .fas, | |
| .far, | |
| .fab, | |
| [class^="fa-"] { | |
| font-family: "Font Awesome 6 Free" ; | |
| 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> | |