Comic Index Page

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Comics - <?php echo basename(getcwd());?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function(){
      var comicLinks = [];
      if(localStorage["comicLinks"]){
        var storedLinks = JSON.parse(localStorage["comicLinks"]);
        storedLinks.forEach(function(item){
          $("a[href*='"+item+"']").css({ opacity: 0.4});
          comicLinks.push(item);
        });
      }

      $(".comicLink").click(function(){
        var link = $(this).attr("href");
        comicLinks.push(link);
        localStorage["comicLinks"] = JSON.stringify(comicLinks);
      })
    });
  </script>
  <style>
    h1{
      color:red;
    }
    body {
      background-color: #b0c4de;
    }
  </style>
</head>
<body>

<div class="container-fluid">
  <a href="../">
    <h1><?php echo basename(getcwd());?></h1>
  </a>
  <div class="row">
<?php
  $directory = './';
  $comics = array_diff(scandir($directory), array('..', '.'));
  foreach ($comics as $comic) {
    if(is_dir($comic)){
      $pages = glob($comic.'/*.jpg');
      $num = count($pages);
      print "<a href='$comic' class='comicLink'>\n";
      print "<div class='col-sm-6 col-md-2' style='height:225px'>\n";
      print "<div style='background-image:url(\"$comic.jpg\"); background-size: cover; background-position: 50%; height:200px;'>\n";
      print "<h1>$num</h1>\n";
      print "</div>\n";
      print "<div>$comic</div>\n";
      print "</div></a>\n";
    }
  }
?>

  </div>
</div>

</body>
</html>