ap7pd/event-management-frontend
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Peter Vacho 2025-01-05 17:21:30 +01:00
parent 2a1d1f9ef6
commit eb32918e65
Signed by: school
GPG key ID: 8CFC3837052871B4
1 changed files with 144 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
README.md
View file

@ -40,34 +40,147 @@ Repository](https://git.itsdrike.com/ap7pd/event-management-backend).
Below is a showcase of key features and screens in the application: Below is a showcase of key features and screens in the application:
| ![API Unreachable](showcase/01_api_unreachable.png) | ![Login Screen](showcase/02_login.png) | ![Base URL Change](showcase/02_login_base_url_change.png) | <table style="width: 100%; border-collapse: collapse; text-align: center; margin: auto;">
| --------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------- | <tr>
| 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. | <th>📶 API Unreachable</th>
<th>🔒 Login Screen</th>
| ![Register Screen](showcase/03_register.png) | ![Month View](showcase/04_month_view.png) | ![Day View](showcase/05_day_view.png) | <th>🔧 Base URL Change</th>
| -------------------------------------------- | ----------------------------------------- | ------------------------------------------------- | </tr>
| User registration screen. | Monthly calendar view to browse events. | Daily event view with event details for that day. | <tr>
<td>
| ![Edit Duration Event](showcase/06_duration_event_edit.png) | ![Edit Instant Event](showcase/07_instant_event_edit.png) | ![Invite User to Event](showcase/08_invite_user_to_event.png) | <img src="showcase/01_api_unreachable.png" alt="API Unreachable" style="width: 200px; height: 450px;" />
| ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- | <p>Error screen, shown whenever the API becomes unreachable.</p>
| Edit screen for duration-based events. | Edit screen for instant events. | Interface for inviting users to an event. | </td>
<td>
| ![Duration Event Details](showcase/09_duration_event_details.png) | ![Instant Event Details](showcase/10_instant_event_details.png) | ![Categories Overview](showcase/11_categories.png) | <img src="showcase/02_login.png" alt="Login Screen" style="width: 200px; height: 450px;" />
| ----------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------- | <p>Login screen for user authentication.</p>
| Detailed view of a duration-based event. | Detailed view of an instant event. | List of event categories of the user. | </td>
<td>
| ![Create New Category](showcase/12_new_category.png) | ![Updated Categories](showcase/13_categories_with_new.png) | ![Settings Screen](showcase/14_settings.png) | <img src="showcase/02_login_base_url_change.png" alt="Base URL Change" style="width: 200px; height: 450px;" />
| ---------------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- | <p>Screen to update the API base URL, available from various pages.</p>
| Form to create a new category. | Updated list with a newly added category. | Settings menu for app configuration. Only available when logged in. | </td>
</tr>
| ![Notification: Invite](showcase/15_notification_invite_bob.png) | ![Invite Preview](showcase/16_invite_event_details_preview.png) | ![Notification: Invite Accepted](showcase/17_notification_invite_accepted_bob.png) | <tr>
| ---------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------- | <th>📝 Register Screen</th>
| Notification about an (incomming) event invite. | Preview of the event from the invite. | Notification for the (incomming) invite after accepting (already marked read). | <th>📆 Month View</th>
<th>📅 Day View</th>
| ![Day View with Invite](showcase/18_day_view_invited_event_bob.png) | ![Invited Event Details](showcase/19_invited_event_details_bob.png) | ![Notification Accepted John](showcase/20_notification_invite_accepted_john.png) | </tr>
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | <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). | <td>
<img src="showcase/03_register.png" alt="Register Screen" style="width: 200px; height: 450px;" />
| ![Notifications Cleared](showcase/21_notifications_cleared.png) | <p>User registration screen.</p>
| --------------------------------------------------------------- | </td>
| Screen showing cleared notifications. | <td>
<img src="showcase/04_month_view.png" alt="Month View" style="width: 200px; height: 450px;" />
<p>Monthly calendar view to browse events.</p>
</td>
<td>
<img src="showcase/05_day_view.png" alt="Day View" style="width: 200px; height: 450px;" />
<p>Daily event view with event details for that day.</p>
</td>
</tr>
<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" style="width: 200px; height: 450px;" />
<p>Edit screen for duration-based events.</p>
</td>
<td>
<img src="showcase/07_instant_event_edit.png" alt="Edit Instant Event" style="width: 200px; height: 450px;" />
<p>Edit screen for instant events.</p>
</td>
<td>
<img src="showcase/08_invite_user_to_event.png" alt="Invite User to Event" style="width: 200px; height: 450px;" />
<p>Interface for inviting users to an event.</p>
</td>
</tr>
<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" style="width: 200px; height: 450px;" />
<p>Detailed view of a duration-based event.</p>
</td>
<td>
<img src="showcase/10_instant_event_details.png" alt="Instant Event Details" style="width: 200px; height: 450px;" />
<p>Detailed view of an instant event.</p>
</td>
<td>
<img src="showcase/11_categories.png" alt="Categories Overview" style="width: 200px; height: 450px;" />
<p>List of event categories of the user.</p>
</td>
</tr>
<tr>
<th>➕ Create New Category</th>
<th>🆕 Updated Categories</th>
<th>⚙️ Settings Screen</th>
</tr>
<tr>
<td>
<img src="showcase/12_new_category.png" alt="Create New Category" style="width: 200px; height: 450px;" />
<p>Form to create a new category.</p>
</td>
<td>
<img src="showcase/13_categories_with_new.png" alt="Updated Categories" style="width: 200px; height: 450px;" />
<p>Updated list with a newly added category.</p>
</td>
<td>
<img src="showcase/14_settings.png" alt="Settings Screen" style="width: 200px; height: 450px;" />
<p>Settings menu for app configuration.</p>
</td>
</tr>
<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" style="width: 200px; height: 450px;" />
<p>Notification about an incoming event invite.</p>
</td>
<td>
<img src="showcase/16_invite_event_details_preview.png" alt="Invite Preview" style="width: 200px; height: 450px;" />
<p>Preview of the event from the invite.</p>
</td>
<td>
<img src="showcase/17_notification_invite_accepted_bob.png" alt="Notification: Accepted" style="width: 200px; height: 450px;" />
<p>Notification for an invite after acceptance.</p>
</td>
</tr>
<tr>
<th>📅 Day View with Invite</th>
<th>📖 Invited Event Details</th>
<th>👍 Notification: Accepted</th>
</tr>
<tr>
<td>
<img src="showcase/18_day_view_invited_event_bob.png" alt="Day View with Invite" style="width: 200px; height: 450px;" />
<p>Day view showing an invited event.</p>
</td>
<td>
<img src="showcase/19_invited_event_details_bob.png" alt="Invited Event Details" style="width: 200px; height: 450px;" />
<p>Details of an event the user was invited to.</p>
</td>
<td>
<img src="showcase/20_notification_invite_accepted_john.png" alt="Notification: Accepted" style="width: 200px; height: 450px;" />
<p>Notification about a user having accepted an outgoing invite.</p>
</td>
</tr>
<tr>
<th colspan="3">🗑️ Notifications Cleared</th>
</tr>
<tr>
<td colspan="3">
<img src="showcase/21_notifications_cleared.png" alt="Notifications Cleared" style="width: 200px; height: 450px;" />
<p>Screen showing cleared notifications.</p>
</td>
</tr>
</table>