finalcapstone / static /index.html
Eric Hierholzer
updates
c3e681b
<!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>