chore: Improve readme UI, use raw HTML for the table
This commit is contained in:
parent
2a1d1f9ef6
commit
c8ee6d123d
GPG key ID:
8CFC3837052871B4
197
README.md
197
README.md
|
|
@ -40,34 +40,183 @@ Repository](https://git.itsdrike.com/ap7pd/event-management-backend).
|
|||
|
||||
Below is a showcase of key features and screens in the application:
|
||||
|
||||
|  |  |  |
|
||||
| --------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| Error screen, shown whenever the API becomes unreachable. | Login screen for user authentication. | Screen to update the API base URL, available from the login, register & API unreachable pages. |
|
||||
<style>
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
table-layout: fixed; /* Ensures equal column widths */
|
||||
}
|
||||
|
||||
|  |  |  |
|
||||
| -------------------------------------------- | ----------------------------------------- | ------------------------------------------------- |
|
||||
| User registration screen. | Monthly calendar view to browse events. | Daily event view with event details for that day. |
|
||||
th, td {
|
||||
width: 33.33%; /* Ensures each column gets the same width */
|
||||
word-wrap: break-word; /* Handles long text gracefully */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|  |  |  |
|
||||
| ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- |
|
||||
| Edit screen for duration-based events. | Edit screen for instant events. | Interface for inviting users to an event. |
|
||||
img {
|
||||
max-width: 100%; /* Ensure images fit within the container */
|
||||
height: auto; /* Maintain aspect ratio */
|
||||
display: block;
|
||||
margin: 0 auto; /* Center images horizontally */
|
||||
}
|
||||
|
||||
|  |  |  |
|
||||
| ----------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------- |
|
||||
| Detailed view of a duration-based event. | Detailed view of an instant event. | List of event categories of the user. |
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|  |  |  |
|
||||
| ---------------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| Form to create a new category. | Updated list with a newly added category. | Settings menu for app configuration. Only available when logged in. |
|
||||
<table>
|
||||
<!-- First Image Row -->
|
||||
<tr>
|
||||
<th>📶 API Unreachable</th>
|
||||
<th>🔒 Login Screen</th>
|
||||
<th>🔧 Base URL Change</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="showcase/01_api_unreachable.png" alt="API Unreachable" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/02_login.png" alt="Login Screen" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/02_login_base_url_change.png" alt="Base URL Change" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Error screen, shown whenever the API becomes unreachable.</td>
|
||||
<td>Login screen for user authentication, first screen you will face when you start the app for the first time.</td>
|
||||
<td>Screen to change the API base URL, available from login, register & API unreachable pages (doesn't require being signed in).</td>
|
||||
</tr>
|
||||
|
||||
|  |  |  |
|
||||
| ---------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
|
||||
| Notification about an (incomming) event invite. | Preview of the event from the invite. | Notification for the (incomming) invite after accepting (already marked read). |
|
||||
<!-- Second Image Row -->
|
||||
<tr>
|
||||
<th>📝 Register Screen</th>
|
||||
<th>📆 Month View</th>
|
||||
<th>📅 Day View</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="showcase/03_register.png" alt="Register Screen" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/04_month_view.png" alt="Month View" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/05_day_view.png" alt="Day View" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User registration screen.</td>
|
||||
<td>Monthly calendar view to browse events, the screen shown immediately after login.</td>
|
||||
<td>Daily event view, listing the events for that day.</td>
|
||||
</tr>
|
||||
|
||||
|  |  |  |
|
||||
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| Day view showing the invited event. | Details of an event the user was invited to. | Notification about user having accepted an outgoing invite (from the invitor's account). |
|
||||
<!-- Third Image Row -->
|
||||
<tr>
|
||||
<th>⏳ Edit Duration Event</th>
|
||||
<th>⚡ Edit Instant Event</th>
|
||||
<th>📨 Invite User to Event</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="showcase/06_duration_event_edit.png" alt="Edit Duration Event" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/07_instant_event_edit.png" alt="Edit Instant Event" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/08_invite_user_to_event.png" alt="Invite User to Event" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Edit screen for duration-based events.</td>
|
||||
<td>Edit screen for instant events.</td>
|
||||
<td>Interface for inviting users to an event.</td>
|
||||
</tr>
|
||||
|
||||
|  |
|
||||
| --------------------------------------------------------------- |
|
||||
| Screen showing cleared notifications. |
|
||||
<!-- Fourth Image Row -->
|
||||
<tr>
|
||||
<th>⏱️ Duration Event Details</th>
|
||||
<th>🔍 Instant Event Details</th>
|
||||
<th>📂 Categories Overview</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="showcase/09_duration_event_details.png" alt="Duration Event Details" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/10_instant_event_details.png" alt="Instant Event Details" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/11_categories.png" alt="Categories Overview" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Detailed view of a duration-based event.</td>
|
||||
<td>Detailed view of an instant event.</td>
|
||||
<td>List of event categories of the user.</td>
|
||||
</tr>
|
||||
|
||||
<!-- Fifth Image Row -->
|
||||
<tr>
|
||||
<th>➕ Create New Category</th>
|
||||
<th>🆕 Updated Categories Overview</th>
|
||||
<th>⚙️ Settings Screen</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="showcase/12_new_category.png" alt="Create New Category" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/13_categories_with_new.png" alt="Updated Categories" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/14_settings.png" alt="Settings Screen" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Form to create a new category or edit an existing one.</td>
|
||||
<td>Updated list with a newly added category.</td>
|
||||
<td>Settings menu for configuring user details & the base url. This screen is only available to logged in users.</td>
|
||||
</tr>
|
||||
|
||||
<!-- Sixth Image Row -->
|
||||
<tr>
|
||||
<th>🔔 Notification: Invite</th>
|
||||
<th>👀 Invite Preview</th>
|
||||
<th>✅ Notification: Accepted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="showcase/15_notification_invite_bob.png" alt="Notification: Invite" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/16_invite_event_details_preview.png" alt="Invite Preview" />
|
||||
</td>
|
||||
<td>
|
||||
<img src="showcase/17_notification_invite_accepted_bob.png" alt="Notification: Accepted" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Notification about an incoming event invite.</td>
|
||||
<td>Preview of the event from the invite (after clicking the eye button).</td>
|
||||
<td>That same notification for the invite, after acceptance. This notification also doesn't have the orange bar on the left, meaning it's marked as read.</td>
|
||||
</tr>
|
||||
|
||||
<!-- Final Row -->
|
||||
<tr>
|
||||
<th colspan="3">🗑️ Notifications Cleared</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<img src="showcase/21_notifications_cleared.png" alt="Notifications Cleared" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">Screen showing cleared notifications, after the user has swiped all the notifications to the right, deleting them.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
Loading…
Reference in a new issue