public/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>OMDB Search</title>
        <style>
         body {
             font-family: sans-serif;
             font-size: 14pt;
         }

         a {
             text-decoration: none;
         }

         a.fav-control {
             opacity: 0.5;
             border-radius: 10px;
         }

         a.favorite {
             opacity: 1;
         }

         a:hover {
             opacity: 1;
         }
         
         #header {
             background-color: lightgray;
             padding: 7px;
             border-radius: 4px;
         }
         
         #app {
             margin: 10px;
         }

         #search-form {
             margin-left: 10px;
             margin-bottom: 10px;
             font-size: 16pt;
             width: 45%;
         }

         #search-term {
             width: 95%;
             font-size: 16pt;
         }

         #all-favorites {
             float: right;
         }
         
         #movie-list {
             display: none;
             width: 45%;
             float: left;
             padding: 1%;
             border: 1px solid lightgray;
             margin-top: 5px;
             border-radius: 10px;
         }

         #movie-list td {
             padding-top: 0.5em;
             padding-bottom: 0.5em;
             border-bottom: 1px solid lightgray;
             cursor: pointer;
         }

         #movie-list td:first-of-type:hover {
             background-color: lightblue;
         }
         
         #movie-details {
             display: none;
             width: 48%;
             float: right;
             border: 1px solid lightgray;
             border-radius: 10px;
             padding: 10px;
         }

         .favorite {
             background-color: lightgreen;
         }
         
        </style>
    </head>
    <body>
        <div id="header"><h2>OMDB Search</h2></div>
        <div id="app">

            <div><a id="all-favorites" href="#">See all favorites</a></div>
            
            <form id="search-form">
                <input type="text" name="search" id="search-term" placeholder="Movie title" />
            </form>

            <div>
                <table id="movie-list"></table>
            </div>

            <div id="movie-details">
                <div><h3 id="movie-title"></h3></div>
                <div><b>Year:</b> <span id="movie-year"></span></div> 
                <div><b>Rated:</b> <span id="movie-rating"></span></div>
                <div><b>Director:</b> <span id="movie-director"></span></div>
                <div><b>Cast:</b> <span id="movie-cast"></span></div>
                <br>
                <div id="movie-plot"></div>
            </div>
                
        </div>

        <script src="client.js"></script>
    </body>
</html>