Spaces:
Sleeping
Sleeping
File size: 1,955 Bytes
0a2f730 c3e681b 0a2f730 | 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 | <!DOCTYPE html>
<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>
|