BitBard/index.html at main · sahidDev09/BitBard · 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- daisy UI cdn -->
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@4.7.2/dist/full.min.css"
      rel="stylesheet"
      type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- font awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header class="container mx-auto">
      <!-- html design and css for navbar -->
      <nav class="py-2 md:flex text-center justify-between items-center mb-10">
        <h1 class="md:text-4xl text-3xl mb-5 md:mb-0 font-extrabold mt-10">
          Bit<span class="text-blue-600">Bard</span>
        </h1>
        <div class="flex gap-4 justify-center">
          <div class="toolDiv flex flex-col gap-2">
            <h1 class="toolText">Home</h1>
            <button class="btn rounded-full border border-blue-200">
              <i class="fa-solid fa-house"></i>
            </button>
          </div>

          <div class="toolDiv flex flex-col gap-2">
            <h1 class="toolText">Edit</h1>
            <button class="btn rounded-full border border-blue-200">
              <i class="fa-solid fa-pen"></i>
            </button>
          </div>

          <div class="toolDiv flex flex-col gap-2">
            <h1 class="toolText">Add</h1>
            <button class="btn rounded-full border border-blue-200">
              <i class="fa-solid fa-user-plus"></i>
            </button>
          </div>

          <div class="toolDiv flex flex-col gap-2">
            <h1 class="toolText">Flags</h1>
            <button class="btn rounded-full border border-blue-200">
              <i class="fa-solid fa-flag"></i>
            </button>
          </div>
          <button class="btn bg-blue-600 text-white rounded-full text-lg mt-8">
            Sign In
          </button>
        </div>
      </nav>

      <!-- html design css for hero section -->

      <section
        class="hero-section bg-blue-950 md:py-32 md:px-24 p-6 text-white rounded-3xl md:flex justify-between">
        <div class="hero-left flex flex-col gap-5">
          <h1 class="md:text-7xl text-3xl font-extrabold">
            Welcome to the <br />
            <span class="text-blue-600">BitBard</span> Forum
          </h1>
          <p class="md:text-2xl">
            Hello and Welcome to BitBard, Your Virtual Haven <br />for Ideas and
            Creativity
          </p>
          <div class="p-2 rounded-full flex justify-between bg-white">
            <input
              id="searchBox"
              class="input-field py-2 md:pr-20 bg-transparent text-black"
              type="text"
              placeholder=" Search here anything.." />
            <button
              onclick="handleSearch()"
              class="btn-primary bg-blue-600 text-white px-6 py-4 rounded-full">
              Search
            </button>
          </div>
        </div>
        <div
          class="hero-right bg-white md:p-10 p-5 w-80 mx-auto text-gray-500 md:text-2xl mt-6 flex flex-col gap-5 justify-center rounded-xl">
          <div class="flex justify-between items-center">
            <h1>Registered Users</h1>
            <p>01</p>
          </div>
          <div class="flex justify-between items-center">
            <h1>Forum</h1>
            <p>05</p>
          </div>
          <div class="flex justify-between items-center">
            <h1>Topics</h1>
            <p>03</p>
          </div>
          <div class="flex justify-between items-center">
            <h1>Replies</h1>
            <p>01</p>
          </div>
        </div>
      </section>
    </header>

    <main class="container mx-auto p-5">
      <!-- loading animaiton -->

      <!-- html css code for discuss section -->
      <section class="discuss-section">
        <h1 class="text-4xl font-extrabold text-center md:mt-24 mt-10">
          Let's Discuss
        </h1>
        <p class="text-center py-10">
          Let your voice be heard in our Discuss Section! It's more than
          comments; <br />
          it's a space for meaningful conversations. Connect, share, and grow
          together with Retro.
        </p>

        <div class="md:flex gap-5">
          <div class="md:w-[63%]">
            <div
              id="loading-spinner"
              class="load-anim flex justify-center items-center my-10 scale-[2] hidden">
              <span
                class="loading loading-infinity loading-lg bg-blue-600"></span>
            </div>
            <div
              id="mainCardParent"
              class="discuss-left rounded-xl mb-10"></div>
          </div>

          <div
            class="discuss right md:w-[37%] bg-gray-100 rounded-xl p-10 overflow-hidden">
            <div class="flex items-center justify-between">
              <h1 class="text-2xl font-semibold">Title</h1>
              <div class="flex gap-2 items-center text-lg">
                <i class="fa-regular fa-circle-check text-green-500"></i>
                <p>Mark as read (<span id="countRead">0</span>)</p>
              </div>
            </div>
            <hr class="my-3" />

            <div id="total-section"></div>
          </div>
        </div>
      </section>

      <!-- html css for join forum section -->

      <section
        class="forum-section md:flex bg-blue-950 text-white md:p-20 justify-between items-center my-10 rounded-xl p-10">
        <div class="flex flex-col gap-5 items-start mb-5 md:mb-0">
          <h1 class="md:text-6xl text-3xl font-bold">Join Our Forum</h1>
          <p>
            Our newest blog posts are live! Uncover inspiration, gain insights,
            and join the conversation. <br />
            Don't miss out – read the latest stories now!
          </p>
          <button class="py-4 px-8 bg-blue-600 rounded-xl">
            Registered Now
          </button>
        </div>

        <div>
          <img src="/images/joinforum.png" alt="" />
        </div>
      </section>

      <!-- latest posts section html css -->

      <section>
        <h1 class="text-4xl font-bold text-center mt-20">Latest Posts</h1>
        <p class="text-center my-5 mb-10">
          Our newest blog posts are live! Uncover inspiration, gain insights,
          and join the conversation. <br />
          Don't miss out – read the latest stories now!
        </p>

        <div id="card-container" class="cards-container md:flex gap-5"></div>
      </section>
    </main>

    <footer class="mt-10">
      <footer
        class="footer footer-center p-10 bg-base-200 text-base-content rounded">
        <h1 class="text-4xl font-bold">BitBard</h1>

        <nav class="grid grid-flow-col gap-4">
          <a class="link link-hover">About us</a>
          <a class="link link-hover">Contact</a>
          <a class="link link-hover">Jobs</a>
          <a class="link link-hover">Press kit</a>
        </nav>
        <nav>
          <div class="grid grid-flow-col gap-4">
            <a
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                class="fill-current">
                <path
                  d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg
            ></a>
            <a
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                class="fill-current">
                <path
                  d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg
            ></a>
            <a
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                class="fill-current">
                <path
                  d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg
            ></a>
          </div>
        </nav>
        <aside>
          <p>Copyright © 2024 - All right reserved by BitBard Industries Ltd</p>
        </aside>
      </footer>
    </footer>

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