⚡ নোটিশ: নিচের বাটনে ক্লিক করে টেক্সট কপি করুন
টেক্সট কপি করুন
TEMP-MAIL DETAILED PROMLT
I want you to create a fully functional
mobile-friendly temporary email web
app named "Din TEMPMAIL" using
HTML, Tailwind CSS, and JavaScript-
all inside a single file named index.html.
Strict Requirements:
The app must work only by opening the
single HTML file in a browser- no
backend, no external files.
AlI CSS and JavaScript must be
embedded inside the same HTML file.
You can use Tailwind CSS via CDN and
Google Fonts.
Use the Mail.tm API (https://api.mail.tm
) as the base API for generating and
reading temporary emails.
The app must automatically generate a
new temp email when it starts, fetch
emails periodically, and display them in
an inbox.
It must support Dark Mode toggle, Copy
to Clipboard, Inbox auto-refresh, Timer
countdown, Splash screen loading
animation, and Toast notifications.
It should look and feel like a modern
mobile app - clean UI, rounded corners,
gradients, and shadows.
App Structure & Features:
Splash Screen (App Intro)
Shows the app name "Din TEMPMAIL"
with the tagline "No Login, No Signup,
Just Privacy."
Includes a loading bar animation that
fills before entering the main screen.
Background color and theme should
switch according to light/dark mode.
2 Home Screen (Main Dashboard)
Header: Title "Din TEMPMAIL" centered,
with a dark/light mode toggle button on
the right.
Two main buttons at top:
"Change Mail"→ Generates a new
temp email instantly using Mail.tm API.
"Delete Mail"→ Deletes the current
account and generates a new one.
Email display card showing the current
temp email and a "[ Copy" button to
copy it.
Timer card showing the 10-minute
lifetime of the email with a countdown
(MM:SS) and an "Extend" button that
resets the timer to 10 minutes.
Inbox section listing incoming emails
with sender, subject, time, and preview
text.
"Refresh" button to manually reload the
inbox.
If no emails exist, show an empty inbox
state with an icon and text "Your inbox
is empty -Waiting for incoming
emails.".
Email Details Screen (Message View)
Back button at the top to return to the
inbox.
Shows subject, sender name, initial
avatar circle, timestamp, and the email
body (render HTML safely).
"Delete Message" button at the bottom
(simulated locally).
Dark/Light Mode:
Save user preference using
localStorage.theme.
Use Tailwind's dark: classes for color
switching.
Default theme: light.
Toggle icon changes between
(light_mode) and
(dark_mode).
Toast Notifications:
Display bottom-center toast for actions
like "Copied!","New email generated!",
"Timer expired!", etc.
Animate using fade/slide transitions
(toastln, toastOut keyframes).
Show for 3 seconds and hide
automatically.
Timer Logic:
10-minute countdown timer for the
email account.
Show formatted time (MM:SS).
When expired, show toast "Timer
expired! Extend or get new email."
"Extend" button resets to 10 minutes.
API Functionalities (Mail.tm API):
Base URL: https://api.mail.tm
Flow:
Fetch available domain →, Create
account with random email -. Get auth
token - Start inbox polling.
Fetch inbox every 10 seconds (/
messages) with Authorization header
(Bearer token).
Display messages sorted by newest first.
Use message ID to load details(/
messages/{id}).
Handle 401 token expiry by auto-
generating a new email.
JavaScript Features & Functions:
fetchWithTimeout()-. Safe fetch with
timeout error handling.
initApp0)→ Initializes app, handles
splash, sets up theme, fetches first
email, starts inbox checking.
getNewEmail()-, Generates a new
temp email.
checklnbox()→ Fetches and updates
message list.
openEmail(id)→ Loads full message in
detail screen.
copyToClipboard)- Copies current
email address.
extendTimer()→, Adds 10 minutes to
timer.
showToast(msg, type)-. Displays
animated toast.
escapeHTML()→ Escapes unsafe
HTML in subjects/previews.
formatDate)-, Human-friendly
timestamps like "Just now","5 min ago",
"2h ago"
showSpinner(button)→ Shows loading
spinner on buttons during API actions.
Design Guidelines:
Use TailwindCSS utility classes for
layout and color.
Use Google Font:"Space Grotesk".
Use Material Symbols Outlined for icons.
Rounded corners (rounded-lg or more),
shadows, and spacing should follow
mobile Ul best practices.
Hide scrollbars (no-scrollbar class).
Technical Details:
Must be 100% responsive (mobile-first).
Include meta viewport for scaling.
Splash screen should auto-fade after
progress bar reaches 100%.
Inbox auto-refresh every 10 seconds.
All code (HTML, CSS, JS) must be within
a single file.
Use module type for JavaScript to
maintain modern ES syntax.
Expected Output:
A complete single HTML file named
index.html that:
Looks exactly like a polished mobile
Temp Mail app.
Uses the real Mail.tm API (https://
api.mail.tm).
Includes splash animation, toast
notifications, dark/light mode, inbox list,
and full message viewer.
Contains no missing logic or external
dependencies besides Tailwind and
Google Fonts CDNs.
The final output should be a ready-to-
use single-file mobile web app.
Give me all code single file Html code
ব্যবহার নির্দেশিকা:
- "কপি করুন" বাটনে ক্লিক করুন
- টেক্সটটি আপনার ক্লিপবোর্ডে কপি হয়ে যাবে
- এরপর আপনি যেকোনো জায়গায় পেস্ট করতে পারবেন
- কোন সমস্যা হলে আবার চেষ্টা করুন