PHTube/index.html at main · always-mohammad-ali/PHTube · 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
<!DOCTYPE html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHTube</title>

    <!-- Daisy UI CDN-->
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@5"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <!-- CSS LINK -->
    <link rel="stylesheet" href="style.css" />

  </head>

  <!-- START BODY PART -->
  <body>
    <header class="">
      <!-- START NAV PART -->
      <nav class="w-11/12 p-3 mx-auto flex justify-between my-5 items-center border-b border-gray-300 ">

        <!-- LOGO DIV -->
        <div class="logo w-[120px]">
          <img src="assets/Logo.png" alt="" />
        </div>

        <!-- SEARCH INPUT DIV -->
        <div class="search">

          <label class="input">
            <svg
              class="h-[1em] opacity-50"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
            >
              <g
                stroke-linejoin="round"
                stroke-linecap="round"
                stroke-width="2.5"
                fill="none"
                stroke="currentColor"
              >
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.3-4.3"></path>
              </g>
            </svg>
            <input id="search-input" type="search" required placeholder="Search" />
          </label>
        </div>

        <!-- BTN DIV -->
        <div class="sort">
          <button class="btn bg-[#FF1F3D] text-white text-lg py-4 px-6">Blog</button>
        </div>
      </nav>
    </header>

    <!-- CATEGORY CONTAINER -->
    <nav id="catagories-container" class="flex justify-center gap-5 p-3">

    </nav>

    <main>
        <section id="videos" class="w-11/12 mx-auto py-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">

        </section>
    </main>

    <!-- MODAL -->
     <!-- Open the modal using ID.showModal() method -->
<button id="showModalData" class="btn hidden" onclick="customModal.showModal()">open modal</button>
<dialog id="customModal" class="modal modal-bottom sm:modal-middle">
  <div class="modal-box">
   <div id="modal-content">

   </div>
    <div class="modal-action">
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

    <!-- JS SCRIPT CONNECTION LINK -->
    <script src="js/video.js"></script>
  </body>
</html>