English-Janala-Lesson-Project/index.html at main · SowvikSuvo/English-Janala-Lesson-Project · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- title and logo -->
    <title>English Janala | Best Platform for learning English</title>
    <link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon" />

    <!-- font awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
      integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!-- font integration -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />

    <!-- tailwind & daisyUi -->
    <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>

    <!-- style css -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!-- Navbar section -->
    <header>
      <div class="navbar bg-base-100 shadow-sm">
        <div class="navbar-start">
          <div class="dropdown">
            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h8m-8 6h16"
                />
              </svg>
            </div>
            <ul
              tabindex="0"
              class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
            >
              <li>
                <a href="" class=""
                  ><i class="fa-solid fa-circle-question"></i>FAQ</a
                >
              </li>
              <li>
                <a href="" class=""
                  ><i class="fa-solid fa-book-open"></i>Learn</a
                >
              </li>
              <li>
                <a href="" class=""
                  ><i class="fa-solid fa-arrow-right-from-bracket"></i>Logout</a
                >
              </li>
            </ul>
          </div>
          <a href="" class="flex items-center gap-1">
            <span class="text-lg font-bold">English</span>
            <img src="./assets/logo.png" alt="" />
            <span class="font-bangla text-lg font-semibold">জানালা</span>
          </a>
        </div>
        <div class="navbar-end hidden lg:flex">
          <ul class="menu menu-horizontal px-1 space-x-4">
            <li>
              <a href="" class="btn btn-outline btn-primary"
                ><i class="fa-solid fa-circle-question"></i>FAQ</a
              >
            </li>
            <li>
              <a href="" class="btn btn-outline btn-primary"
                ><i class="fa-solid fa-book-open"></i>Learn</a
              >
            </li>
            <li>
              <a href="" class="btn btn-outline btn-primary"
                ><i class="fa-solid fa-arrow-right-from-bracket"></i>Logout</a
              >
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- Banner section -->
    <section
      class="flex flex-col-reverse md:flex-row gap-10 justify-between items-center py-5 w-11/12 mx-auto"
    >
      <div class="content flex-1 text-center md:text-left">
        <h2 class="text-4xl font-bold mb-8">
          <span class="text-sky-400">English</span> is Easy!!
        </h2>
        <p class="font-bangla">
          আজ থেকেই আপনার ভাষা শেখার যাত্রা শুরু করুন। আপনি যদি নতুন হন অথবা
          আপনার দক্ষতা বাড়াতে চান, আমাদের Interactive Lessons আপনাকে নিয়ে যাবে
          অন্য একটি Level এ
        </p>
      </div>
      <div class="image flex-1">
        <img src="./assets/hero-student.png" alt="" />
      </div>
    </section>

    <!-- Lessons section -->
    <section>
      <h2 class="text-4xl font-bold mb-8 text-center">
        <span class="text-sky-400">Let's</span> Learn Vocabularies
      </h2>
      <div
        id="level-container"
        class="flex gap-5 flex-wrap justify-center"
      ></div>
    </section>

    <section class="flex justify-center pt-9">
      <div class="join">
        <div>
          <label class="input validator join-item">
            <input id="input-search" type="text" placeholder="Search Vocabulary" required />
          </label>
        </div>
        <button id="btn-search" class="btn btn-primary join-item">Search</button>
      </div>
    </section>

    <!-- spinner loading -->
    <section id="spinner" class="flex justify-center items-center py-10 hidden">
      <span class="loading loading-bars loading-xl"></span>
    </section>

    <section
      id="word-container"
      class="bg-gray-100 p-10 w-11/12 mx-auto my-10 grid grid-cols-3 gap-5"
    ></section>

    <!-- Open the modal using ID.showModal() method -->
    <!-- <button class="btn" onclick="my_modal_5.showModal()">open modal</button> -->
    <dialog id="word_modal" class="modal modal-bottom sm:modal-middle">
      <div class="modal-box">
        <div id="details-container" class="space-y-5"></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>

    <script src="./script/index.js"></script>
  </body>
</html>