<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Movie Search</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> </head> <body> <div class="container my-5"> <h1>Movie Search</h1> <div id="loginArea"> <form id="login"> <div class="mb-3"> <label for="token" class="form-label">Access Token</label> <input class="form-control" id="token"> </div> <button class="btn btn-primary" type="submit">Login</button> </form> </div> <div id="searchArea"> <form id="movieSearch" class="mb-3"> <div class="input-group mb-3"> <input class="form-control"> <button class="btn btn-primary" type="submit">Search</button> </div> </form> <div class="mb-3"> <a class="btn btn-primary" href="javascript:localStorage.clear(); location.reload();"> Logout </a> </div> <table id="output" class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Poster</th> <th scope="col">Name</th> <th scope="col">Rating</th> <th scope="col">Description</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="./main.js"></script> </body> </html>