PunctuOwlity is a multi-screen application available as both a static web app and an Android app. The two platforms share the same logical flow — login, optional sign-up, a one-time SMS preference prompt, a main events grid, and an add/edit event form — but the implementation differs: the web app uses HTML pages withDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/PunctuOwlity/llms.txt
Use this file to discover all available pages before exploring further.
data-page attributes and JavaScript-driven navigation, while the Android app uses Activity subclasses wired together by Intent objects.
Navigation Flow
The following steps describe the expected user journey from first launch through the main event view.Login
The user lands on the login screen (web:
index.html, data-page="login" / Android: LoginActivity, the launcher activity). They enter a username or email and password. On success the web app sets sessionStorage key punctuowlity-authenticated to "true" and navigates to events.html; the Android app starts MainActivity directly and calls finish().Sign Up (optional)
New users tap the Sign Up link/button to reach the sign-up screen (web:
signup.html, data-page="signup" / Android: SignupActivity, exported="false"). On successful account creation the web app redirects back to index.html; the Android app starts LoginActivity and calls finish().SMS / Notification Preference
On the web,
events.html checks whether localStorage key punctuowlity-sms is set; if it is null, the user is redirected to sms.html (data-page="sms") before they can see the events grid. In the Android app, MainActivity.onCreate checks for SEND_SMS permission and starts SmsPermissionActivity (exported="false") if permission has not been granted. Both platforms present Allow and Deny choices. The preference is stored (web: "allowed" or "denied" in localStorage; Android: OS permission grant) and the user proceeds.Events Grid
The main view (web:
events.html, data-page="main" / Android: MainActivity, exported="false") displays all events in a card grid. The web version supports live search via #eventSearch and category tab filtering (all, birthday, appointment, trip). Each card shows the day abbreviation, date number, title, time, and alert status, along with Edit and Delete action buttons. Tapping the floating action button (FAB) navigates to the add/edit screen.Add / Edit Event
The add and edit form is a single screen (web:
add-event.html, data-page="add" / Android: AddEventActivity, android:label="Add Event", exported="false"). When launched from an Edit button, the existing event’s fields are pre-populated (web: via ?id= query parameter; Android: via "event_id" Intent extra). Saving a new event calls insertEvent; saving an existing one calls updateEvent. The web app shows a toast() confirmation and redirects back to events.html after 600 ms; the Android app calls finish() to return to MainActivity, which reloads the grid in onResume.Web Pages
The back button (
<button class="icon-button back">) is wired in app.js on every page. Clicking it calls history.back() if history.length > 1; otherwise it falls back to location.assign('index.html').| File | data-page | <title> | Description |
|---|---|---|---|
index.html | login | Login | PunctuOwlity | Entry point. Contains #loginForm with username/email and password fields. Authenticates against the punctuowlity-users array and sets punctuowlity-authenticated in sessionStorage. |
signup.html | signup | Create an Account | PunctuOwlity | Account registration form. Collects first name, last name, email, optional phone number, username, password, and password confirmation. Writes the new user object to both localStorage and sessionStorage. |
sms.html | sms | SMS Alerts | PunctuOwlity | One-time SMS/notification preference prompt shown after login if punctuowlity-sms is not set. Two buttons: Allow SMS Notifications (sets "allowed") and No, thanks (sets "denied"). Both navigate to events.html. |
events.html | main | PunctuOwlity | Main events grid. Guarded by an auth check (redirects to index.html if not authenticated) and an SMS check (redirects to sms.html if preference is unset). Supports search and category tab filtering. |
add-event.html | add | Add/Edit An Event | PunctuOwlity | Add and edit form. Fields: event title (#eventTitle), date (#eventDate, type date), time (#eventTime, type time), and an alert toggle switch (#eventAlert). Reads ?id= from the query string to determine insert vs. update mode. |
Android Activities
All activities are declared inAndroidManifest.xml under package com.example.punctuowlityeventtracker. The application requests the android.permission.SEND_SMS permission, marked android:required="false" for telephony hardware.
| Class | exported | android:label | Description |
|---|---|---|---|
LoginActivity | true (launcher) | (app name) | App entry point. Declared with android.intent.action.MAIN and android.intent.category.LAUNCHER. Validates credentials via DatabaseHelper.checkUser(). A Sign Up button starts SignupActivity. |
SignupActivity | false | (app name) | Registration screen. Collects email (used as username), password, and password confirmation. Calls DatabaseHelper.insertUser() and starts LoginActivity on success. |
SmsPermissionActivity | false | (app name) | SMS permission prompt. Allow button calls ActivityCompat.requestPermissions for SEND_SMS (request code 1); Deny button navigates directly to MainActivity. Both paths end with finish(). |
AddEventActivity | false | Add Event | Add and edit form. If launched with an "event_id" Intent extra, it loads the event via DatabaseHelper.getEventById() and pre-fills the fields. Calls insertEvent or updateEvent depending on whether eventId is -1. |
MainActivity | false | (app name) | Main events grid. Loads all events via DatabaseHelper.getAllEvents() and inflates one event_card layout per event in a GridLayout. Calls loadEvents() again in onResume to refresh after returning from AddEventActivity. |
Case Study and Articles
case-study.html and articles.html (along with individual article pages article-responsive-conversion.html and article-useful-reminders.html) are supplementary pages linked from the hamburger menu in the topbar. They document the design process and UX rationale behind PunctuOwlity but are not part of the authentication or event-management flow. The topbar menu is injected by app.js if .topbar-menu is not already present in the markup, so these links appear on every page including the login screen.