Ambot

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Sorryy Baby — Marco</title>
<style>
  :root{
    --bg: #1e0f3e;
    --card: #2b1b58;
    --accent: #9b30ff;
    --text: #f3e8ff;
  }
  html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
  body{
    background: radial-gradient(circle at 20% 20%, rgba(155,48,255,0.1), transparent 10%),
                linear-gradient(180deg, #120b2f 0%, #1d093f 100%);
    display:flex;align-items:center;justify-content:center;color:var(--text);
  }
  .card{
    width: min(560px, 92%);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border-radius:18px;padding:28px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    display:grid;gap:16px;place-items:center;
  }
  .title{font-size:22px;font-weight:700;letter-spacing:0.2px;}
  .message{
    width:100%;
    min-height:100px;
    font-size:18px;
    line-height:1.5;
    background: rgba(255,255,255,0.03);
    padding:18px;border-radius:12px;
    box-sizing:border-box;
    color:var(--text);
    font-family: "Georgia", serif;
    white-space:pre-wrap;
  }
  .controls{display:flex;gap:10px;}
  .btn{
    padding:8px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:600;
    background:transparent;color:var(--text);outline:1px solid rgba(255,255,255,0.06);
  }
  .btn.primary{
    background: var(--accent);
    color: #ffffff;
    box-shadow:0 6px 18px rgba(155,48,255,0.4);
    outline: none;
  }
  .heart{
    width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);
    transform-origin:center;
    animation: pulse 1.6s infinite ease-in-out;
    box-shadow: 0 6px 18px rgba(155,48,255,0.3);
  }
  .heart svg{width:22px;height:22px;filter:drop-shadow(0 2px 6px rgba(155,48,255,0.3));}
  @keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.08)}
    100%{transform:scale(1)}
  }
  .meta{font-size:12px;color:rgba(243,232,255,0.6)}
  .muted{color:rgba(243,232,255,0.6);font-size:13px}
  footer{width:100%;display:flex;justify-content:space-between;align-items:center}
  .small-note{font-size:12px;color:rgba(243,232,255,0.55)}
</style>
</head>
<body>
  <div class="card" role="dialog" aria-labelledby="title">
    <div style="display:flex;align-items:center;gap:14px;width:100%;justify-content:space-between">
      <div>
        <div id="title" class="title">Marco’s Apology</div>
        <div class="meta">From the heart 💜</div>
      </div>
      <div class="heart" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M12 21s-7.5-4.934-9.5-8.5C-0.5 8.5 4.5 3 8.5 6.5 10 8 12 9.5 12 9.5s2-1.5 3.5-3C19.5 3 24.5 8.5 21.5 12.5 19.5 16.066 12 21 12 21z"/>
        </svg>
      </div>
    </div>

    <div id="message" class="message" aria-live="polite"></div>

    <div class="controls" role="group" aria-label="actions">
      <button class="btn" id="revealBtn">Reveal full (raw)</button>
      <button class="btn primary" id="copyBtn">Copy to clipboard</button>
      <button class="btn" id="gentleBtn">Make it gentler</button>
    </div>

    <footer>
      <div class="small-note">I mean this genuinely.</div>
      <div class="muted">— Marco</div>
    </footer>
  </div>

<script>
  const raw = "baby sorry na i wont bring up ur past anymore, itsz oky if my iban kna me understand, sorreyyy, kong natak an kana skon, itz okiii mah parents tak an to me too, so ssorrryyy ☹️☹️☹️";
  
  const gentle = "Baby, I’m really sorry. I won’t bring up your past anymore. It’s okay if you don’t understand me yet. I feel bad if I hurt you. I promise your feelings always matter to me. 💜";
  
  const out = document.getElementById('message');
  const revealBtn = document.getElementById('revealBtn');
  const copyBtn = document.getElementById('copyBtn');
  const gentleBtn = document.getElementById('gentleBtn');

  function typeText(text, speed = 30, callback){
    out.textContent = "";
    let i = 0;
    const timer = setInterval(()=> {
      out.textContent += text.charAt(i);
      i++;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Ambot #622

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Ambot #622

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions