Site Builder

Editing: promptinator-landing-demo.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Promptinator Demos | Interactive Forms & AI Prompts</title>

<style>
:root{
  --bg-1:#0e0f14; --bg-2:#14151d;
  --brand:#865bfd; --txt:#ecf0ff; --accent:#12d6ff;
  --glass:rgba(255,255,255,.05); --blur:blur(14px);
  --step-0:clamp(.96rem,1vw + .78rem,1.24rem);
  --step-1:clamp(1.25rem,1vw +1.1rem,1.55rem);
  --step-2:clamp(1.6rem,1vw +1.6rem,2.2rem);
  --step-3:clamp(2.4rem,1vw +2rem,3.2rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--txt); background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
  min-height:100vh; display:flex; flex-direction:column;
}
h1{font-size:var(--step-3);font-weight:900;line-height:1.1;text-align:center;margin-top:6rem;}
h2{font-size:var(--step-2);margin-bottom:1rem;color:var(--accent);}
p{font-size:var(--step-0);line-height:1.55;}
section{width:min(92ch,90%);margin-inline:auto;padding:4.5rem 0;}
.grid{display:grid;gap:3rem;}@media(min-width:900px){.grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}}
.demo-box{
  background:var(--glass);backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:1.8rem;display:flex;flex-direction:column;gap:1.2rem;
}
.demo-box .Promptinator{
  padding:1rem;border-radius:12px;border:1px dashed var(--brand);background:rgba(255,255,255,.04);line-height:1.55;
}
.Promptinator input[type="radio"]+label,
.Promptinator input[type="checkbox"]+label{filter:grayscale(100%) brightness(185%);transition:filter .2s;}
.Promptinator input:checked+label{filter:none;}
.Promptinator .e-btn{background:var(--brand);color:#fff;border:none;padding:.4em 1em;border-radius:7px;}
.ai-buttons a{font-size:.9rem;}
pre{background:rgba(255,255,255,.04);padding:.9rem 1.1rem;border-radius:12px;font-size:.85rem;overflow:auto;}
footer{margin-top:auto;padding:2rem 0;text-align:center;font-size:.85rem;color:#8b91b8;}
footer a{color:var(--accent);text-decoration:none;}
</style>
</head>
<body>

<h1>Promptinator Live Demos</h1>

<section>
  <p style="text-align:center;max-width:68ch;margin-inline:auto;">
    Explore copy‑paste examples that highlight Promptinator’s flexibility—from classic contact forms to AI‑powered prompt builders.
    Every box is editable in‑place; try clicking any blue token or use the ✏️ icon!
  </p>
</section>

<section>
  <div class="grid">

<div class="demo-box">
      <h2>📬 Contact Us</h2>
      <div id="demo-contact" class="Promptinator" data-edit="1" data-think="0">
        Name: [-name-~Jane Doe~]  
        Email: [-email-~you@example.com~]  
        Message: [A-msg-~How can we help?~]  
        [E-Contact Form-~support@promptinator.io~]
      </div>
      <details><summary>View markup</summary>
<pre>&lt;div class="Promptinator" data-edit="1"&gt;
  Name: [-name-~Jane Doe~]  
  Email: [-email-~you@example.com~]  
  Message: [A-msg-~How can we help?~]  
  [E-Contact Form-~support@promptinator.io~]
&lt;/div&gt;</pre></details>
    </div>

<div class="demo-box">
      <h2>💼 Quick Quote</h2>
      <div id="demo-quote" class="Promptinator" data-edit="1" data-think="0">
        Project: [-title-~Website revamp~]  
        Budget Range: [D-budget-|&lt;$5 k|$5‑10 k|$10‑25 k|&gt;$25 k|~$5‑10 k~]  
        Deadline (months): [D-due-12~3~]  
        Key Requirements: [A-req-~SEO, e‑commerce, blog~]  
        [E-Request Quote-~sales@promptinator.io~]
      </div>
      <details><summary>View markup</summary>
<pre>&lt;div class="Promptinator"&gt;
  Project: [-title-~Website revamp~]  
  Budget Range: [D-budget-|&lt;$5 k|$5‑10 k|$10‑25 k|&gt;$25 k|~$5‑10 k~]  
  Deadline (months): [D-due-12~3~]  
  Key Requirements: [A-req-~SEO, e‑commerce, blog~]  
  [E-Request Quote-~sales@promptinator.io~]
&lt;/div&gt;</pre></details>
    </div>

<div class="demo-box">
      <h2>🤖 AI Email Drafter</h2>
      <div id="demo-ai" class="Promptinator" data-edit="1" data-think="1">
        Topic: [A-topic-~New feature announcement~]  
        Tone: [B-tone-|Formal|Friendly|Energetic|~Friendly~]  
        Length (paragraphs): [D-len-8~4~]
        
      </div>
      <details><summary>View markup</summary>
<pre>&lt;div class="Promptinator" data-think="1"&gt;
  Topic: [A-topic-~New feature announcement~]  
  Tone: [B-tone-|Formal|Friendly|Energetic|~Friendly~]  
  Length (paragraphs): [D-len-8~4~]
&lt;/div&gt;</pre></details>
    </div>

<div class="demo-box">
      <h2>🛠️ Support Ticket</h2>
      <div id="demo-ticket" class="Promptinator" data-edit="1" data-think="0">
        Name: [-cust-~Full name~]  
        Email: [-custmail-~you@example.com~]  
        Urgency: [B-urgency-|🐞 Minor|⚠️ Major|🔥 Critical|~⚠️ Major~]  
        Issue Details: [A-details-~Describe the problem…~]  
        [E-Submit Ticket-~support@promptinator.io~]
      </div>
      <details><summary>View markup</summary>
<pre>&lt;div class="Promptinator"&gt;
  Name: [-cust-~Full name~]  
  Email: [-custmail-~you@example.com~]  
  Urgency: [B-urgency-|🐞 Minor|⚠️ Major|🔥 Critical|~⚠️ Major~]  
  Issue Details: [A-details-~Describe the problem…~]  
  [E-Submit Ticket-~support@promptinator.io~]
&lt;/div&gt;</pre></details>
    </div>

<div class="demo-box">
      <h2>⭐ Product Feedback</h2>
      <div id="demo-stars" class="Promptinator" data-edit="1" data-think="0">
        Overall Experience: [B-rate-|☆|⭐|⭐⭐|⭐⭐⭐|⭐⭐⭐⭐|⭐⭐⭐⭐⭐|~☆~]  
        Comments: [A-comm-~Tell us what you loved…~]  
        [E-Share Feedback-~feedback@promptinator.io~]
      </div>
      <details><summary>View markup</summary>
<pre>&lt;div class="Promptinator"&gt;
  Overall Experience: [B-rate-|☆|⭐|⭐⭐|⭐⭐⭐|⭐⭐⭐⭐|⭐⭐⭐⭐⭐|~☆~]  
  Comments: [A-comm-~Tell us what you loved…~]  
  [E-Share Feedback-~feedback@promptinator.io~]
&lt;/div&gt;</pre></details>
    </div>

</div>
</section>

<script src="promptinator.js"></script>
<script>
['demo-contact','demo-quote','demo-ai','demo-ticket','demo-lunch','demo-stars']
  .forEach(id=>Promptinator.init({ mount: document.getElementById(id) }));
</script>
</body>
</html>

Site Builder

Editing: promptinator-landing-demo.html

Site Builder