header.php 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!DOCTYPE html>
  2. <html lang="de">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>moeFlix</title>
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  10. <style>
  11. h1 {
  12. font-size: 3vw;
  13. }
  14. #logo {
  15. margin: 0 auto;
  16. text-align: center;
  17. }
  18. #logo img {
  19. width: 100%;
  20. }
  21. @media only screen and (min-width : 768px) {
  22. #logo img {
  23. width: auto;
  24. height: 200px;
  25. }
  26. }
  27. .col-sm-3 > div > a > img {
  28. width: 100%;
  29. }
  30. .col-sm-3 {
  31. padding-bottom: 15px;
  32. min-height: 500px;
  33. }
  34. .col-sm-3.episode {
  35. min-height: 50px;
  36. }
  37. .col-sm-3.episode > div > a > img {
  38. min-height: 50px;
  39. }
  40. .image-zoom {
  41. overflow: hidden;
  42. }
  43. .image-zoom img {
  44. -webkit-transition: all 1s ease; /* Safari and Chrome */
  45. -moz-transition: all 1s ease; /* Firefox */
  46. -ms-transition: all 1s ease; /* IE 9 */
  47. -o-transition: all 1s ease; /* Opera */
  48. transition: all 1s ease;
  49. outline: 1px solid transparent;
  50. }
  51. .image-zoom:hover img {
  52. -webkit-transform:scale(1.15); /* Safari and Chrome */
  53. -moz-transform:scale(1.15); /* Firefox */
  54. -ms-transform:scale(1.15); /* IE 9 */
  55. -o-transform:scale(1.15); /* Opera */
  56. transform:scale(1.15);
  57. }
  58. .episode-title {
  59. padding-top: 15px;
  60. }
  61. #user-menu {
  62. text-align: center;
  63. }
  64. .series-search, .movie-search {
  65. width: 100%;
  66. margin-bottom: 25px;
  67. }
  68. .row.list {
  69. display: flex;
  70. flex-wrap; wrap;
  71. }
  72. @media only screen and (max-width : 480px) {
  73. .col-sm-3 {
  74. text-align: center;
  75. }
  76. }
  77. </style>
  78. </head>
  79. <body>
  80. <div id="logo">
  81. <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>"><img src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/moeflix.png" alt="moeflix"></a>
  82. </div>
  83. <div id="user-menu">
  84. <span>
  85. <i class="fa fa-hand-peace-o"></i>, <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?view=user"><?php echo $_SESSION['mail']; ?></a> <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?action=logout">Logout</a>
  86. </span>
  87. </div>