Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Netflix Recommender</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body class="container my-4"> | |
| <h1 class="text-center">Netflix Recommender Application</h1> | |
| <!-- Input + Autocomplete --> | |
| <div class="mb-3 position-relative"> | |
| <label for="movie-input" class="form-label">Enter a Movie or Show Title:</label> | |
| <input type="text" class="form-control" id="movie-input" placeholder="e.g., 3 Idiots" autocomplete="off" /> | |
| <div id="autocomplete-list" class="list-group position-absolute w-100 d-none" | |
| style="z-index: 1000; max-height: 200px; overflow-y: auto;"></div> | |
| </div> | |
| <!-- Recommendation Button --> | |
| <button id="recommend-btn" class="btn btn-primary">Get Recommendations</button> | |
| <!-- Recommendation Results with Spinner --> | |
| <div id="results" class="mt-4"> | |
| <div class="spinner-border text-primary d-none" role="status"> | |
| <span class="visually-hidden">Loading...</span> | |
| </div> | |
| </div> | |
| <!-- Visualizations --> | |
| <div id="visualizations" class="mt-5"></div> | |
| <!-- NoScript Message --> | |
| <noscript> | |
| <p class="text-danger text-center">JavaScript is required to use this site. Please enable JavaScript in your browser settings.</p> | |
| </noscript> | |
| <!-- Scripts (Now with type="module") --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script type="module"> | |
| import "/static/js/config.js"; | |
| import "/static/js/api.js"; | |
| import "/static/js/ui.js"; | |
| import "/static/js/autocomplete.js"; | |
| import "/static/js/visualizations.js"; | |
| import "/static/js/app.js"; | |
| </script> | |
| </body> | |
| </html> | |