css-framework/index.html at main · MohammedAbi/css-framework · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Feed || SMA</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <script type="module" src="/src/app.js"></script>
  </head>
  <body class="bg-gray-100">
    <header class="shadow mb-2 px-4 sticky top-0 z-10 bg-white">
      <div
        class="relative max-w-screen-lg mx-auto py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between"
      >
        <a href="/" class="text-2xl flex items-center font-black">
          <span class="mr-2 text-blue-600 text-3xl">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              width="24"
              height="24"
            >
              <path
                fill="#2563EB"
                d="M493.7 .9L299.4 75.6l2.3-29.3c1-12.8-12.8-21.5-24-15.1L101.3 133.4C38.6 169.7 0 236.6 0 309C0 421.1 90.9 512 203 512c72.4 0 139.4-38.6 175.7-101.3L480.8 234.3c6.5-11.1-2.2-25-15.1-24l-29.3 2.3L511.1 18.3c.6-1.5 .9-3.2 .9-4.8C512 6 506 0 498.5 0c-1.7 0-3.3 .3-4.8 .9zM192 192a128 128 0 1 1 0 256 128 128 0 1 1 0-256zm0 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm16 96a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"
              />
            </svg>
          </span>
          <span class="text-blue-600">SMA</span>
        </a>
        <input class="peer hidden" type="checkbox" id="navbar-open" />
        <label
          class="sm:hidden cursor-pointer absolute right-0 mt-2 text-xl"
          for="navbar-open"
        >
          <span class="sr-only">Toggle Navigation</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </label>
        <nav
          aria-label="Header Navigation"
          class="peer-checked:block hidden sm:block py-4 sm:py-0"
        >
          <ul
            class="flex flex-col gap-y-4 sm:flex-row sm:gap-x-8 sm:items-center"
          >
            <li class="text-gray-600 hover:text-blue-600">
              <a href="/">Home</a>
            </li>
            <li class="text-gray-600 hover:text-blue-600">
              <a href="/post/create/">Create post</a>
            </li>
            <li class="text-gray-600 hover:text-blue-600">
              <a href="/profile/">Profile</a>
            </li>
            <li class="text-gray-600 md:mr-12 hover:text-blue-600">
              <a href="/auth/login/">
                <button
                  class="mt-2 sm:mt-0 rounded-md border-2 border-blue-600 px-6 py-1 font-medium text-blue-600 transition-colors hover:bg-blue-600 hover:text-white"
                >
                  Login
                </button>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <main class="container mx-auto p-4 mb-12">
      <h1 class="text-3xl font-bold mb-6">
        Feed - Stay Updated with the Latest Posts
      </h1>
      <div id="message" class="message"></div>
      <div class="flex flex-col sm:flex-row justify-between gap-4 mb-6">
        <div class="relative">
          <input
            type="text"
            id="searchInput"
            placeholder="Search posts..."
            class="w-full sm:w-64 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 pl-10"
          />
          <div
            class="absolute inset-y-0 right-3 flex items-center pointer-events-none"
          >
            <i class="fas fa-search text-gray-500"></i>
          </div>
        </div>

        <div class="relative">
          <select
            class="appearance-none w-full sm:w-auto px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 pr-8 select"
          >
            <option>Sort by Latest</option>
            <option>Sort by Popularity</option>
          </select>
          <div
            class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
          >
            <svg
              class="w-4 h-4 text-gray-500"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.72-3.72a.75.75 0 011.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 01.02-1.06z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </div>
      <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-12"
        id="postContainer"
      ></div>
      <div class="text-center">
        <button
          id="loadMoreButton"
          class="rounded-md border-2 border-gray-600 px-6 py-1 font-medium text-gray-600 transition-colors hover:bg-gray-700 hover:text-white hidden"
        >
          Load More posts
        </button>
      </div>
    </main>
  </body>
</html>