Site Builder

Editing: prompter.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Melanie AI Prompt Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>

*, *::before, *::after {
    box-sizing: border-box;
  }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    padding: 2rem;
  }

.prompt-container {
    background: var(--card);
    width: 100%;
    max-width: 720px;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px var(--shadow-light);
    padding: 2rem;
    position: relative;
  }

[data-m-output] {
    margin-bottom: 1.5rem;
    line-height: 1.6;
  }

.token {
    display: inline-block;
    background: var(--token-bg);
    padding: .25em .6em;
    margin: .15em;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    user-select: none;
  }

.token:hover {
    background: var(--token-hover);
    transform: translateY(-1px);
  }

a[data-m-ai] {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: .75em 1.5em;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px var(--shadow-light);
    transition: background var(--transition), transform var(--transition);
  }

a[data-m-ai]:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
  }

dialog {
    padding: 0;
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 16px 48px var(--shadow-light);
  }

.popup-body {
    background: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius);
  }

.popup-body label,
  .popup-body legend {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
  }

.popup-body input[type="text"],
  .popup-body select {
    width: 100%;
    padding: .6em .8em;
    border: 1px solid #ccd;
    border-radius: var(--radius);
    margin-top: .4em;
    transition: border-color var(--transition);
  }

.popup-body input[type="text"]:focus,
  .popup-body select:focus {
    outline: none;
    border-color: var(--primary);
  }

.popup-body button {
    margin-top: 1rem;
    padding: .6em 1.2em;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
  }

.popup-body button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
  }
</style>
</head>
<body>

<a data-m-ai="https://api.your-ai-endpoint.com/generate?prompt=">
      Send to AI
    </a>
  </div>

<script src="melanie-prompts.js"></script>
  
  <script>
    if (window.MelaniePrompts) {
      MelaniePrompts.init();
    }
  </script>
</body>
</html>

Site Builder

Editing: prompter.html

Site Builder