forked from git-ankit/MovieRecommender
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
pylint refactor, UI improve & code cleaning
- Loading branch information
1 parent
ca2cdaf
commit da1db46
Showing
2 changed files
with
75 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,177 +1,94 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link | ||
| rel="stylesheet" | ||
| type="text/css" | ||
| href="{{ url_for('static', filename='stylesheet.css') }}" | ||
| /> | ||
| <!-- Include stylesheets and scripts --> | ||
| <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheet.css') }}"> | ||
| <title>PopcornPicks🍿</title> | ||
| <script src="{{ url_for('static', filename='script.js') }}"></script> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" | ||
| /> | ||
| <link | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
| rel="stylesheet" | ||
| integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" | ||
| crossorigin="anonymous" | ||
| /> | ||
| <script | ||
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| <meta name="viewport" content="width device-width, initial-scale=1" /> | ||
| <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar"> | ||
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar fixed-top"> | ||
| <div class="container-fluid"> | ||
| <a class="navbar-brand" href="#">PopcornPicks🍿</a> | ||
| <button | ||
| class="navbar-toggler" | ||
| type="button" | ||
| data-bs-toggle="collapse" | ||
| data-bs-target="#navbarSupportedContent" | ||
| aria-controls="navbarSupportedContent" | ||
| aria-expanded="false" | ||
| aria-label="Toggle navigation" | ||
| > | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <!-- <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||
| <div class="d-flex"> | ||
| <a class="nav-link" href="#">Link</a> | ||
| </div> | ||
| </div> --> | ||
| </div> | ||
| </nav> | ||
| <div class="heading1"> | ||
| <div class="d-flex"> | ||
| <h2>🎬Pick a Movie!🎬</h2> | ||
| </div> | ||
| <div class="d-flex"> | ||
| <input | ||
| class="form-control mr-sm-2" | ||
| type="search" | ||
| placeholder="Search for a Movie" | ||
| aria-label="Search" | ||
| id="searchBox" | ||
| /> | ||
| <div class="container" style="margin-top: 40px;"> | ||
| <div class="heading1"> | ||
| <!-- Heading for picking a movie --> | ||
| <h2><center>🎬 Pick a Movie! 🎬</center></h2> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- <div style="width: 600px; margin: auto"> | ||
| <h2>Please select movies for training</h2> | ||
| <p style="width: 560px; margin: auto"> | ||
| <label>Search Here</label> <input | ||
| type="text" | ||
| name="search" | ||
| id="searchBox" | ||
| /> | ||
| </p> | ||
| </div> --> | ||
| <div style="width: 600px; margin: auto"> | ||
| <h2>Selected movie :</h2> | ||
| <ul class="list-group" id="selectedMovies"></ul> | ||
| </div> | ||
| <div style="width: 600px; margin: auto"> | ||
| <input | ||
| type="button" | ||
| class="btn btn-primary" | ||
| name="predict" | ||
| id="predict" | ||
| value="Predict" | ||
| /> | ||
| </div> | ||
| <div style="width: 600px; margin: auto"> | ||
| <h2>Predicted Movies</h2> | ||
| <form class="recos" id="recos"> | ||
| <ul class="list-group" id="predictedMovies"></ul> | ||
| </form> | ||
| </div> | ||
| <div style="width: 600px; margin: auto"> | ||
| <input | ||
| type="button" | ||
| class="btn btn-primary" | ||
| name="feedback" | ||
| data-toggle="modal" | ||
| id="feedback" | ||
| value="Give Feedback" | ||
| data-target="#exampleModalCenter" | ||
| /> | ||
| <!--TODO Button trigger modal--> | ||
| <button | ||
| type="button" | ||
| data-bs-toggle="modal" | ||
| data-bs-target="#exampleModalCenter" | ||
| > | ||
| button | ||
| </button> | ||
| <div | ||
| class="modal fade" | ||
| id="exampleModalCenter" | ||
| tabindex="-1" | ||
| role="dialog" | ||
| aria-labelledby="exampleModalCenterTitle" | ||
| aria-hidden="true" | ||
| > | ||
| <div class="modal-dialog modal-dialog-centered" role="document"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title" id="exampleModalLongTitle"> | ||
| Modal title | ||
| </h5> | ||
| <button | ||
| type="button" | ||
| class="close" | ||
| data-bs-dismiss="modal" | ||
| aria-label="Close" | ||
| > | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
|
|
||
| <div class="row" style="margin-top: 25px;"> | ||
| <div class="col-md-6"> | ||
| <!-- Left Column (Selected Movie(s) and Search) --> | ||
| <div class="row"> | ||
| <div class="col-md-10"> | ||
| <!-- Selected Movie(s) section --> | ||
| <h2>Selected Movie(s):</h2> | ||
| <input class="form-control mr-sm-2" type="search" placeholder="Search for a Movie" aria-label="Search" id="searchBox" /> | ||
| <ul class="list-group" id="selectedMovies"></ul> | ||
| </div> | ||
| <div class="col-md-2"> | ||
| <!-- Predict button --> | ||
| <input type="button" class="btn btn-primary" name="predict" id="predict" value="Predict" style="margin-top: 47.5px;" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-1"> | ||
| <!-- Empty column for spacing --> | ||
| </div> | ||
| <div class="col-md-5"> | ||
| <!-- Right Column (Recommended Movies) --> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <!-- Recommended Movies section --> | ||
| <h2>Recommended Movies:</h2> | ||
| <form class="recos" id="recos"> | ||
| <ul class="list-group" id="predictedMovies"></ul> | ||
| </form> | ||
| </div> | ||
| <div class="modal-body">...</div> | ||
| <div class="modal-footer"> | ||
| <button | ||
| type="button" | ||
| class="btn btn-secondary" | ||
| data-bs-dismiss="modal" | ||
| > | ||
| Close | ||
| </button> | ||
| <button type="button" class="btn btn-primary"> | ||
| Save changes | ||
| </button> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <!-- Feedback button (modal) --> | ||
| <input type="button" class="btn btn-primary" name="feedback" data-toggle="modal" id="feedback" value="Give Feedback" data-target="#exampleModalCenter"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <input class="c-checkbox" type="checkbox" id="checkbox" /> | ||
| <div id="dataCollected" style="width: 600px; margin: auto; display: none"> | ||
| <h1>Thanks!! Your response was stored.</h1> | ||
| <input | ||
| type="button" | ||
| id="refreshPage" | ||
| class="btn btn-danger" | ||
| name="refreshPage" | ||
| value="Take another attempt" | ||
| /> | ||
| <div class="container" style="margin-top: 20px;"> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <!-- Checkbox section --> | ||
| <input class="c-checkbox" type="checkbox" id="checkbox" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="container" style="margin-top: 20px;"> | ||
| <div class="row"> | ||
| <div class="col-md-8"> | ||
| <!-- Data collected section --> | ||
| <div id="dataCollected" style="display: none;"> | ||
| <h1>Thanks!! Your response was stored.</h1> | ||
| <input type="button" id="refreshPage" class="btn btn-danger" name="refreshPage" value="Take another attempt" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <br /><br /><br /> | ||
| </body> | ||
| <script | ||
| src="https://code.jquery.com/jquery-3.5.1.min.js" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| <script | ||
| src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script> | ||
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigin="anonymous"></script> | ||
| <script src="{{ url_for('static', filename='script.js') }}"></script> | ||
| </html> |