MovieToday/index.html at master · Elvis-017/MovieToday · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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.0">
  <title>MovieToday</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
    integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a id="brandColor" class="navbar-brand " href="#">MovieToday</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
      <ul class="navbar-nav mr-auto text-center">
        <li class="nav-item ">
          <a class="nav-link " aria-current="page" data-val="popular" href="#">Popular</a>
        </li>
        <li class="nav-item ">
          <a class="nav-link " aria-current="page" data-val="top_rated" href="#">Top Rated</a>
        </li>

        <!-- <li class="nav-item ">
          <a class="nav-link" aria-current="page" data-val="upcoming" href="#">now-playing</a>
        </li> -->

      </ul>
      <button title="change theme" onclick="changeTheme(this)" id="btn-change-theme" class="btn nav-item">
        <i class="fas fa-moon"></i>
      </button>
      <form id="form" class="form-inline ml-2 d-flex justify-content-center">
        <div class="form-control mr-sm-2 search-container">
          <input id="search-value" id="btn-search" class="search-input" type="text" placeholder="Search"
            aria-label="Search">

          <button title="search" class="btn" type="submit"><i class="fas fa-search"></i></button>
        </div>
      </form>
    </div>
  </nav>

  <!-- mx-auto float-right -->
  <aside id="left-container" class="col col-md-4 left-container">
    <div class="card">
      <div class="card-header text-center header-change">
        <h4 id="up-text">Upcoming</h4>
      </div>
      <div class="card-body">
        <div id="upcoming-movie-list">

        </div>
      </div>
    </div>

  </aside>


  <main class="col col-md-8">
    <div id="movie-list" class="container">

    </div>

    <!--load-button-->
    <button id="load-btn" class="btn btn-secondary load-btn"><i class="fas fa-arrow-down"></i> Load more</button>
    <!--modal-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Description</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

            <h6 id="modal-date" class="mr -auto float-right">Date</h6>
            <h4 id="modal-title">Title</h4>

            <div id="modal-info" class="d-flex  mt-3">
              <img id="modal-image" src="" alt="...">
              <p id="modal-description" class="text-justify mx-2">Description</p>

            </div>

          </div>
        </div>
      </div>
    </div>
  </main>

  <template id="template-card">
    <div class="col portrait">
      <div class="card "  style=" padding:0">
        <button onclick="showMovieDescription(this)" data-image="" data-title="" data-overview="" data-date=""
          class="card-info" data-toggle="modal" data-target="#exampleModal">

          <span class="rating"> <i class="fas fa-star"></i></span>

          <p class="card-title"></p>
          <p class="year"></p>
        </button>
        <div class="card-header">
          <img class="card-img-top" src="" alt="..."/>

        </div>
      </div>
    </div>
  </template>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
    integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
  </script>
  <script src="index.js"></script>

</body>

</html>