Project Title: Rio TEMPNUMBER — Single-file Temporary Phone Number Web App (index.html)
Overview (short):
Create a polished, mobile-first, single-file web app named "Rio TEMPNUMBER" that generates temporary phone numbers and receives SMS messages using a public SMS API (example base URL: https://sms-activate.io/api/v2 or another compatible temp-SMS API). All HTML, CSS and JavaScript must live inside a single index.html file. Use Tailwind CSS via CDN and Google Fonts. No backend, no external JS/CSS files (besides allowed CDNs). The app should work simply by opening index.html in a browser.
Strict Requirements:
Single file: index.html containing all HTML, inline <style> (for any extra CSS) and <script type="module"> JS.
Can use Tailwind CSS CDN and Google Fonts only as external resources.
Mobile-first responsive design, looks and feels like a modern mobile app (rounded corners, gradients, shadows).
Use Material Symbols Outlined (via CDN) for icons.
Default theme: light; support Dark Mode using localStorage.theme and Tailwind dark: utilities.
Use an SMS API (example base: https://freesmsglobal.com/) for:
Fetching available countries / services / pools (if API supports),
Creating / reserving temporary phone number,
Fetching SMS messages for that number,
Reading message details.
Provide graceful fallback and simulated local behavior where the API doesn't support a feature (but prefer real endpoints when available).
App Name & Branding:
App title: Din TEMPNUMBER
Tagline: No Login, No Signup — Instant Numbers & Privacy
Use Google Font: Space Grotesk (or similar).
App iconography: rounded avatars, soft gradients, subtle shadows.
UI / Screens & Flow:
Splash Screen (Intro)
Shows app name & tagline.
Loading progress bar animation filling to 100% then cross-fades into main app.
Color/gradient adapts to light/dark mode.
Home Screen (Dashboard)
Header: centered title Din TEMPNUMBER, dark/light toggle on right.
Two primary action buttons:
Change Number → instantly reserve/generate a new temporary number (via API).
Delete Number → release/delete current number (if API allows) and generate a new one.
Current number card:
Shows the temporary phone number prominently.
"[ Copy ]" button to copy number to clipboard (toast on success).
Small badge with country/region if available.
Timer card:
Shows countdown for number lifetime (default 10 minutes) in MM:SS.
"Extend" button resets timer to 10 minutes (if API supports extend, call it; else just reset locally).
Inbox preview:
List incoming SMS messages with sender, short preview, timestamp (human friendly: "Just now", "5 min ago", "2h ago").
Manual Refresh button.
If no messages: show empty state with icon and text: "Your inbox is empty — Waiting for incoming messages."
Pull-to-refresh style affordance (optional JS).
Message Detail View
Back button to return to inbox.
Show sender, subject (if any), avatar initial, timestamp, and full message body (render plain text and safely render minimal HTML where appropriate).
Delete Message button (local simulation or API delete if available).
Detect and show clickable links in SMS bodies.
Toasts & Notifications
Bottom-center toasts for: Copied!, New number generated!, Timer expired!, Number deleted!, Message deleted!, API error!
Toast animations using @keyframes for toastIn and toastOut.
Auto-hide after 3 seconds.
Dark Mode
Toggle saves localStorage.theme.
Toggle icon switches between light_mode and dark_mode Material symbols.
Use Tailwind dark: classes for color switching.
Timer Behavior:
Each generated number has a 10-minute countdown displayed on the UI.
Auto-refresh inbox every 10 seconds (polling /messages endpoint).
When timer expires: show toast "Timer expired! Extend or get new number." and mark number as expired (disable receiving unless extended).
Extend button resets timer to 10:00 (call API extend if available, else reset locally).
If token/auth expires (401) while polling, auto-generate a fresh number and show toast "Session expired. Generated new number.".
API Integration (required flow):
Base URL: https://freesmsglobal.com/ (or configurable baseURL variable; must default to https://api.mail.tm-style pattern if user changes).
Steps:
Query API for available pools/domains/countries (if provided).
Reserve/create a new temporary phone number (POST) — store returned id, number, and any token if API uses auth.
Use returned credentials to authorize and poll messages: GET /messages?to={number} or GET /inbox with Authorization: Bearer <token>.
Poll messages every 10s and display newest-first.
GET message details by id for full view: /messages/{id}.
Handle 401 by creating a new number automatically.
Implement fetchWithTimeout(url, options, timeout = 10000) helper to avoid hanging requests and to show error toasts.
JavaScript API & Functions (names & behaviors):
fetchWithTimeout(url, opts, timeout) — safe fetch with timeout and errors handled (show toast on network error).
initApp() — initializes app: runs splash, applies theme, creates first number, starts inbox polling.
getNewNumber() — reserves a new temporary phone number; shows spinner on button; updates UI; resets timer.
deleteNumber() — releases current number via API or simulates release; then calls getNewNumber().
checkInbox() — fetches messages and updates message list (every 10s). Sort by newest first.
openMessage(id) — fetch and display full message in detail screen.
copyToClipboard(text) — copies number or text to clipboard; shows Copied! toast.
extendTimer() — resets timer to 10:00 (or calls API extend if available).
showToast(message, type) — displays animated toast (type can be success, error, info).
escapeHTML(str) — secure HTML escaping for any untrusted text.
formatDate(isoString) — human-friendly timestamp string.
showSpinner(buttonEl) / hideSpinner(buttonEl) — display spinner in buttons during API calls.
handle401() — called when API returns 401: calls getNewNumber() and shows toast.
UX & Design details:
Use meta viewport for mobile scaling.
Hide scrollbars with a .no-scrollbar utility if desired.
Use soft gradient backgrounds for header/cards.
Rounded corners: rounded-2xl for major cards.
Spacing: comfortable mobile padding (p-4, p-6).
Buttons: full-width, touch-friendly, with icons.
Provide small animation on new message arrival (pulse or badge).
Use prefers-reduced-motion respects for animations.
Error Handling & Edge Cases:
If API unreachable — show friendly error toast and switch into a simulated demo mode that uses locally generated sample messages for demo purposes.
If creating numbers fails repeatedly (3 times) — show persistent error card: "Unable to create number — check network or change API."
Ensure no sensitive data persisted besides localStorage.theme and maybe last-used number ID for UX (but if API tokens are returned, store securely in memory only; only persist tokens if strictly necessary).
Avoid exposing any API keys in code; if the API requires an API key, provide a clear variable at top const API_KEY = '' and show a UI method to paste a key (optional).
Deliverable:
A single index.html file that implements the full app as specified.
Works locally by opening in a browser (no server required).
Uses type="module" for JS.
Clean, well-structured code with comments for major blocks.
All features must be functional where the API supports them; where not supported, simulate locally but clearly comment that behavior is simulated.
0 Comments