index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Movie-Reviews On Decentralized Web</title>
      <script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>
    <script src="https://unpkg.com/aviondb/dist/aviondb.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="index.js"></script>
      <style type="text/css">
         body {
         color: #566787;
         background: #f5f5f5;
         font-family: 'Varela Round', sans-serif;
         font-size: 13px;
         }
         .table-wrapper {
         background: #fff;
         padding: 20px 25px;
         margin: 30px 0;
         border-radius: 3px;
         box-shadow: 0 1px 1px rgba(0,0,0,.05);
         }
         .search-box {
         position: relative;
         float: right;
         }
         .table-title {        
         padding-bottom: 15px;
         background: #435d7d;
         color: #fff;
         padding: 16px 30px;
         margin: -20px -25px 10px;
         border-radius: 3px 3px 0 0;
         }
         .table-title h2 {
         margin: 5px 0 0;
         font-size: 24px;
         }
         .table-title .btn-group {
         float: right;
         }
         .table-title .btn {
         color: #fff;
         float: right;
         font-size: 13px;
         border: none;
         min-width: 50px;
         border-radius: 2px;
         border: none;
         outline: none !important;
         margin-left: 10px;
         }
         .table-title .btn i {
         float: left;
         font-size: 21px;
         margin-right: 5px;
         }
         .table-title .btn span {
         float: left;
         margin-top: 2px;
         }
         table.table tr th, table.table tr td {
         border-color: #e9e9e9;
         padding: 12px 15px;
         vertical-align: middle;
         }
         table.table tr th:first-child {
         width: 60px;
         }
         table.table tr th:last-child {
         width: 100px;
         }
         table.table-striped tbody tr:nth-of-type(odd) {
         background-color: #fcfcfc;
         }
         table.table-striped.table-hover tbody tr:hover {
         background: #f5f5f5;
         }
         table.table th i {
         font-size: 13px;
         margin: 0 5px;
         cursor: pointer;
         } 
         table.table td:last-child i {
         opacity: 0.9;
         font-size: 22px;
         margin: 0 5px;
         }
         table.table td a {
         font-weight: bold;
         color: #566787;
         display: inline-block;
         text-decoration: none;
         outline: none !important;
         }
         table.table td a:hover {
         color: #2196F3;
         }
         table.table td a.edit {
         color: #FFC107;
         }
         table.table td a.delete {
         color: #F44336;
         }
         table.table td i {
         font-size: 19px;
         }
         table.table .avatar {
         border-radius: 50%;
         vertical-align: middle;
         margin-right: 10px;
         }  
         /* Modal styles */
         .modal .modal-dialog {
         max-width: 400px;
         }
         .modal .modal-header, .modal .modal-body, .modal .modal-footer {
         padding: 20px 30px;
         }
         .modal .modal-content {
         border-radius: 3px;
         }
         .modal .modal-footer {
         background: #ecf0f1;
         border-radius: 0 0 3px 3px;
         }
         .modal .modal-title {
         display: inline-block;
         }
         .modal .form-control {
         border-radius: 2px;
         box-shadow: none;
         border-color: #dddddd;
         }
         .modal textarea.form-control {
         resize: vertical;
         }
         .modal .btn {
         border-radius: 2px;
         min-width: 100px;
         } 
         .modal form label {
         font-weight: normal;
         } 
      </style>
      <script type="text/javascript"></script>
   </head>
   <body>
      <div class="container">
      <div class="table-wrapper">
      <div class="table-title">
         <div class="row">
            <div class="col-sm-6">
               <h2 id="getMovies" onclick="getMovies()">Movie <b>Reviews</b></h2>
            </div>
            <div class="col-sm-6">
               <a href="#addMovieModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New Movie</span></a>
               <a href="#editMovieModal" class="btn btn-info" data-toggle="modal"><i class="material-icons">&#xE254;</i> <span>Update</span></a>  
               <a href="#deleteMovieModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons">&#xE872;</i> <span>Delete</span></a>          
            </div>
         </div>
      </div>
      <div class="col-sm-4">
         <div class="search-box">
            <div class="input-group">
               <input id="searchMovieName" type="text" class="form-control" placeholder="Search&hellip;">
               <span class="input-group-addon"><i  onclick="getMovie()" class="material-icons">&#xE8B6;</i></span>
            </div>
         </div>
      </div>
      <span id="response"></span>
      <!-- Edit Modal HTML -->
      <div id="addMovieModal" class="modal fade">
         <div class="modal-dialog">
            <div class="modal-content">
               <form>
                  <div class="modal-header">
                     <h4 class="modal-title">Add Movie</h4>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                     <div class="form-group">
                        <label>Name</label>
                        <input id="a-name" type="text" class="form-control" required>
                     </div>
                     <div class="form-group">
                        <label>Producer</label>
                        <input id="a-producer" type="text" class="form-control" required>
                     </div>
                     <div class="form-group">
                        <label>Rating</label>
                        <input id="a-rating" type="number" class="form-control" required></input>
                     </div>
                     <div class="form-group">
                        <label>Rank</label>
                        <input id="a-rank" type="number" class="form-control" required>
                     </div>
                  </div>
                  <div class="modal-footer">
                     <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                     <button type="button" class="btn btn-success" data-dismiss="modal" onclick="addMovie()">Submit</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
      <!-- Edit Modal HTML -->
      <div id="editMovieModal" class="modal fade">
         <div class="modal-dialog">
            <div class="modal-content">
               <form>
                  <div class="modal-header">
                     <h4 class="modal-title">Update Movie</h4>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                     <div class="form-group">
                        <label>Name</label>
                        <input id="u-name" type="text" class="form-control" required>
                     </div>
                     <div class="form-group">
                        <label>Producer</label>
                        <input id="u-producer" type="text" class="form-control" required>
                     </div>
                     <div class="form-group">
                        <label>Rating</label>
                        <input id="u-rating" type="number" class="form-control" required></input>
                     </div>
                     <div class="form-group">
                        <label>Rank</label>
                        <input id="u-rank" type="number" class="form-control" required>
                     </div>
                  </div>
                  <div class="modal-footer">
                     <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                     <button type="button" class="btn btn-info" data-dismiss="modal" onclick="updateMovie()">Update</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
      <!-- Delete Modal HTML -->
      <div id="deleteMovieModal" class="modal fade">
         <div class="modal-dialog">
            <div class="modal-content">
               <form>
                  <div class="modal-header">
                     <h4 class="modal-title">Delete Movie</h4>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                     <div class="form-group">
                        <label>Movie Name</label>
                        <input id="d-name" type="text" class="form-control" required>
                     </div>
                     <p>Are you sure you want to delete Movie</p>
                     <p class="text-warning"><small>This action cannot be undone.</small></p>
                  </div>
                  </form>
                  <div class="modal-footer">
                     <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                     <button class="btn btn-danger" data-dismiss="modal" onclick="deleteMovie()">Delete</button>
                  </div>
            </div>
         </div>
      </div>
      <script>
         setTimeout(function(){$('#getMovies').click()},2000);
      </script>
   </body>
</html>