chore: Improve readme UI, use raw HTML for the table

README.md

@@ -35,3 +35,105 @@ Repository](https://git.itsdrike.com/ap7pd/event-management-backend).
 > (<http://localhost:8000>) and set the base URL to `http://10.0.2.2:8000`.
 > This will allow the Android emulator to access the local backend server. Note
 > that this is also the default value.
+
+## Showcase
+
+Below is a showcase of key features and screens in the application:
+
+<div style="padding: 20px; max-width: 1200px; margin: auto;">
+  <table style="width: 100%; border-collapse: collapse;">
+    <thead>
+      <tr>
+        <th colspan="3" style="text-align: center; font-size: 24px; padding: 10px;">Showcase</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/01_api_unreachable.png" style="max-width: 100%; height: auto;" alt="API Unreachable" />
+            <p>Error screen, shown whenever the API becomes unreachable.</p>
+          </div>
+        </td>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/02_login.png" style="max-width: 100%; height: auto;" alt="Login Screen" />
+            <p>Login screen for user authentication.</p>
+          </div>
+        </td>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/02_login_base_url_change.png" style="max-width: 100%; height: auto;" alt="Base URL Change" />
+            <p>Screen to update the API base URL, available from the login, register & API unreachable pages.</p>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/03_register.png" style="max-width: 100%; height: auto;" alt="Register Screen" />
+            <p>User registration screen.</p>
+          </div>
+        </td>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/04_month_view.png" style="max-width: 100%; height: auto;" alt="Month View" />
+            <p>Monthly calendar view to browse events.</p>
+          </div>
+        </td>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/05_day_view.png" style="max-width: 100%; height: auto;" alt="Day View" />
+            <p>Daily event view with event details for that day.</p>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/06_duration_event_edit.png" style="max-width: 100%; height: auto;" alt="Edit Duration Event" />
+            <p>Edit screen for duration-based events.</p>
+          </div>
+        </td>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/07_instant_event_edit.png" style="max-width: 100%; height: auto;" alt="Edit Instant Event" />
+            <p>Edit screen for instant events.</p>
+          </div>
+        </td>
+        <td>
+          <div style="text-align: center;">
+            <img src="showcase/08_invite_user_to_event.png" style="max-width: 100%; height: auto;" alt="Invite User to Event" />
+            <p>Interface for inviting users to an event.</p>
+          </div>
+        </td>
+      </tr>
+      <!-- Add more rows similarly -->
+    </tbody>
+  </table>
+</div>
+
+<style>
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  td {
+    padding: 10px;
+    vertical-align: top;
+    text-align: center;
+  }
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 300px;
+    display: block;
+    margin: auto;
+  }
+  @media screen and (max-width: 900px) {
+    td {
+      display: block;
+      width: 100%;
+    }
+  }
+</style>