Prompt Details
Model
Chat - (gpt-5)
Token size
647 ($0.02022 / call)
Example input
[image_path]: "https://www.svgrepo.com/show/530604/glasses.svg"
[title_text_and_color]: Verify your email | #0078FF
[body_text]: We’ve sent a link to your inbox. Please verify to continue.
[cta_text_and_color]: Open Email App | #0078FF
[footer_text_and_link]: Didn’t get it? Resend email | support@bluepost.app
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
<title>Success / Info</title>
<style>
:root{
--bg:#FFFFFF;
--text:#6E6E6E;
--link:#5EDC3B;
--title:#000000;
--btn-bg:#000000;
--btn-bg-hover:#000000;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background:var(--bg);
font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
}
.wrap{
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.card{
width:min(720px,92vw);
text-align:center;
opacity:0;
animation:fadeIn .4s ease-out forwards;
}
@keyframes fadeIn{to{opacity:1}}
.ill{
height:120px;
width:auto;
display:block;
margin:0 auto 16px auto;
}
h1{
margin:0;
font-weight:700;
font-size:30px;
line-height:1.2;
color:var(--title);
}
.body{
margin:8px 0 24px 0;
font-weight:400;
font-size:18px;
color:var(--text);
}
.cta{
display:inline-block;
background:var(--btn-bg);
color:#FFFFFF;
font-weight:700;
font-size:18px;
padding:14px 32px;
border:none;
border-radius:9999px;
cursor:pointer;
text-decoration:none;
transition:background-color .2s ease;
}
.cta:hover{ background:var(--btn-bg-hover); }
.footer{
margin-top:24px;
font-size:16px;
color:var(--text);
}
.footer a{
color:var(--link);
text-decoration:none;
}
.footer a:hover{ text-decoration:underline; }
</style>
</head>
<body>
<div class="wrap">
<main class="card" aria-live="polite">
<img id="ill" class="ill" alt="" />
<h1 id="title"></h1>
<p id="body" class="body"></p>
<a id="cta" class="cta" href="javascript:void(0)" role="button"></a>
<p id="footer" class="footer"></p>
</main>
</div>
<script>
const variables = {
image_path: "https://www.svgrepo.com/show/530604/glasses.svg",
title_text_and_color: "Verify your email | #0078FF",
body_text: "We’ve sent a link to your inbox. Please verify to continue.",
cta_text_and_color: "Open Email App | #0078FF",
footer_text_and_link: "Didn’t get it? Resend email | support@bluepost.app"
};
function parsePipePair(input){
const i = input.lastIndexOf("|");
if(i === -1) return [input.trim(), ""];
return [input.slice(0,i).trim(), input.slice(i+1).trim()];
}
function darkenHex(hex, pct=5){
const h = hex.replace("#","").trim();
if(!/^[0-9A-Fa-f]{6}$/.test(h)) return hex;
const d = (v)=> {
const n = Math.max(0, Math.min(255, Math.round(v * (1 - pct/100))));
return n.toString(16).padStart(2,"0");
};
const r = parseInt(h.slice(0,2),16);
const g = parseInt(h.slice(2,4),16);
const b = parseInt(h.slice(4,6),16);
return "#" + d(r) + d(g) + d(b);
}
(function apply(){
const ill = document.getElementById("ill");
const title = document.getElementById("title");
const body = document.getElementById("body");
const cta = document.getElementById("cta");
const footer = document.getElementById("footer");
ill.src = variables.image_path;
ill.alt = "";
const [titleText, titleColor] = parsePipePair(variables.title_text_and_color);
title.textContent = titleText || "";
if(titleColor) document.documentElement.style.setProperty("--title", titleColor);
body.textContent = variables.body_text || "";
const [ctaText, ctaColor] = parsePipePair(variables.cta_text_and_color);
cta.textContent = ctaText || "";
if(ctaColor){
document.documentElement.style.setProperty("--btn-bg", ctaColor);
document.documentElement.style.setProperty("--btn-bg-hover", darkenHex(ctaColor, 5));
}
const [footerSentence, footerLinkRaw] = parsePipePair(variables.footer_text_and_link);
const a = document.createElement("a");
const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(footerLinkRaw);
a.href = isEmail ? `mailto:${footerLinkRaw}` : (footerLinkRaw || "#");
a.textContent = footerLinkRaw || "";
footer.textContent = "";
footer.append(document.createTextNode(footerSentence + (footerSentence && footerLinkRaw ? " " : "")));
footer.append(a);
})();
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
2
Favorites
17
Views
GPT-5
Create elegant, production-ready HTML + CSS empty-state pages in seconds.
This prompt outputs a perfectly centered, minimal design with your own image, title, body, button, and footer link.
Use it to instantly generate:
Password reset confirmations
404 “page not found” screens
Email verification notices
Maintenance or success messages
Subscription confirmations
ETC...
...more
Added over 1 month ago
