Nedflix/index.html at master · StandardInput/Nedflix · 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
133
134
135
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Nedflix</title>
    <link rel="stylesheet" href="css/material.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>

  <body>
    <!-- Simple header with scrollable tabs. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">

      <header class="mdl-layout__header mdl-color--orange-600">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Nedflix</span>

          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>

          <!-- Navigation -->
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Settings</a>
            <a class="mdl-button mdl-js-button mdl-button--icon" href=""><i class="material-icons mdl-color-text--white">info</i></a>
            <!--a class="mdl-navigation__link" href="">Settings</a>
            <a class="mdl-navigation__link" href="">About</a-->
          </nav>
        </div>

        <!-- Tabs -->
        <div class="nedflix-layout-header mdl-layout__tab-bar mdl-color--orange-700">
          <a href="#live" class="mdl-layout__tab is-active">LIVE</a>
          <a href="#npo" class="mdl-layout__tab">NPO</a>
          <a href="#rtl-xl" class="mdl-layout__tab">RTL XL</a>
          <a href="#sbs" class="mdl-layout__tab">SBS</a>
          <a href="#mtv" class="mdl-layout__tab">MTV</a>
          <a href="#sport-1" class="mdl-layout__tab">Sport 1</a>
          <a href="#vtm" class="mdl-layout__tab">VTM</a>
          <a href="#foxsports" class="mdl-layout__tab">Foxsports</a>
        </div>
      </header>

      <main class="mdl-layout__content">

        <section class="mdl-layout__tab-panel is-active" id="live">
          <div class="page-content mdl-grid">

            <div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title mdl-color--purple-400 mdl-color-text--white">
                <h4 class="mdl-card__title-text">Live programs</h4>
              </div>
              <div class="mdl-card__supporting-text mdl-color--grey-200">
                <a class="nedflix__program-button" href="">Zandkoekjes bakken</a>
              <a class="nedflix__program-button" href="">Tierelantijntjes kwijlen</a>
              <a class="nedflix__program-button" href="">Speeksel rapen</a>
              <a class="nedflix__program-button" href="">Toetsen afnemen</a>
              <a class="nedflix__program-button" href="">Kleuren kotsen</a>
              <a class="nedflix__program-button" href="">Smoesjes sturen</a>
              <a class="nedflix__program-button" href="">De Trammelante Trut</a>
              <a class="nedflix__program-button" href="">Heel Holland Hapert</a>
              <a class="nedflix__program-button" href="">Treurwilgen van dichtbij</a>
              <a class="nedflix__program-button" href="">De flop van groot kaliber</a>
              <a class="nedflix__program-button" href="">Half Holland Hangt</a>
              <a class="nedflix__program-button" href="">In den bakkerij</a>
              </div>
            </div>

            <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet"></div>

            <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-tablet">
              <div id="loader" class="mdl-spinner mdl-js-spinner is-active"></div>
            </div>

            <div class="mdl-tooltip mdl-tooltip--large" for="loader">
              Loading video..
            </div>

          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="npo">
          <div class="page-content mdl-grid">

          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="rtl-xl">
          <div class="page-content mdl-grid">

          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="sbs">
          <div class="page-content mdl-grid">

          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="mtv">
          <div class="page-content mdl-grid">

          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="sport-1">
          <div class="page-content mdl-grid">

          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="vtm">
          <div class="page-content mdl-grid">

          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="foxsports">
          <div class="page-content mdl-grid">

          </div>
        </section>

      </main>

    </div>

    <script src="js/material.min.js"></script>
    <script src="js/handlebars-v3.0.3.js"></script>
    <script src="js/programs.js"></script>
  </body>

</html>