Site Builder

Editing: prompt-landing-page2.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Promptinator by Melanie AI: A revolutionary lightweight scripting engine for dynamic prompts and forms. Works on any website or WordPress.">
  <title>Promptinator by Melanie AI - Revolutionize Web Interactions</title>
  <style>
    :root {
      --primary: #5c3bff;
      --primary-dark: #4a26b2;
      --accent: #22a8e5;
      --text: #1a1a1a;
      --bg: #f8f9ff;
      --gradient: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      --部分

System: I notice you're asking for a landing page for Promptinator, which is a fantastic project! Since you want a pure HTML/CSS/JavaScript solution with no images, I'll create a modern, stylish landing page that highlights Promptinator's key features and benefits. The design will use 2025 web trends like vibrant gradients, smooth animations, and a clean, futuristic aesthetic. I'll include an interactive demo section to showcase Promptinator's token-parsing capabilities, using vanilla JavaScript for dynamic interactions. The page will be lightweight, framework-agnostic, and compatible with both standalone sites and WordPress, aligning with Promptinator's ~14 KB footprint. I'll ensure the content is engaging, with clear CTAs to drive excitement for the product launch.

Here's the complete landing page:

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

body {
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

header {
      background: var(--gradient);
      color: #fff;
      text-align: center;
      padding: 4rem 2rem;
      position: relative;
      overflow: hidden;
    }

header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
      animation: pulse 10s infinite;
    }

@keyframes pulse {
      0% { transform: scale(1); opacity: 0.2; }
      50% { transform: scale(1.2); opacity: 0.1; }
      100% { transform: scale(1); opacity: 0.2; }
    }

h1 {
      font-size: 3.5rem;
      font-weight: 800;
      margin-bottom: 1rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

h2 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: var(--primary);
    }

section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

.features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-bottom: 2rem;
    }

.feature-card {
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: var(--shadow);
      transition: transform 0.3s ease;
    }

.feature-card:hover {
      transform: translateY(-5px);
    }

.feature-card h3 {
      font-size: 1.5rem;
      color: var(--primary);
      margin-bottom: 1rem;
    }

.demo-container {
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: var(--shadow);
      margin-top: 2rem;
    }

.demo-container .prompt-text {
      font-family: monospace;
      font-size: 1.1rem;
      line-height: 1.8;
      margin-bottom: 1rem;
    }

.token {
      color: var(--primary);
      font-weight: 600;
      cursor: pointer;
      transition: color 0.2s ease;
    }

.token:hover {
      color: var(--primary-dark);
      text-decoration: underline;
    }

.popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

.popup-body {
      background: #fff;
      border-radius: 12px;
      padding: 1.5rem;
      max-width: 500px;
      width: 90%;
      box-shadow: var(--shadow);
      animation: fadeIn 0.3s ease;
    }

@keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

.popup-body label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
      color: var(--text);
    }

.popup-body input,
    .popup-body select,
    .popup-body textarea {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ccd;
      border-radius: 6px;
      font-size: 1rem;
      margin-bottom: 1rem;
    }

.popup-body button {
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease;
    }

.popup-body button:hover {
      background: var(--primary-dark);
    }

.cta {
      text-align: center;
      padding: 3rem 2rem;
      background: var(--gradient);
      color: #fff;
      border-radius: 12px;
      margin: 2rem 0;
    }

.cta a {
      display: inline-block;
      background: #fff;
      color: var(--primary);
      padding: 1rem 2rem;
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.cta a:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }

footer {
      text-align: center;
      padding: 2rem;
      background: #1a1a1a;
      color: #fff;
    }

@media (max-width: 768px) {
      h1 { font-size: 2.5rem; }
      h2 { font-size: 2rem; }
      .features { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <header>
    <h1>Promptinator by Melanie AI</h1>
    <p style="font-size: 1.2rem; max-width: 600px; margin: 0 auto;">Revolutionize web interactions with a 14 KB scripting engine for dynamic prompts and forms. Lightweight, versatile, and AI-ready.</p>
  </header>

<section>
    <h2>Why Promptinator?</h2>
    <div class="features">
      <div class="feature-card">
        <h3>Lightweight & Fast</h3>
        <p>At just ~14 KB, Promptinator delivers powerful functionality without bloat, ensuring lightning-fast performance on any site.</p>
      </div>
      <div class="feature-card">
        <h3>Intuitive Shortcodes</h3>
        <p>Concise, human-readable shortcodes like <code>[A-Topic]</code> and <code>[C-Audience-bloggers,marketers]</code> simplify prompt creation.</p>
      </div>
      <div class="feature-card">
        <h3>AI Integration</h3>
        <p>One-click links to ChatGPT, Perplexity, and Copilot streamline AI-driven workflows.</p>
      </div>
      <div class="feature-card">
        <h3>WordPress & Beyond</h3>
        <p>Works seamlessly in WordPress with i18n support or as a standalone script for any web project.</p>
      </div>
      <div class="feature-card">
        <h3>Dynamic Forms</h3>
        <p>Create interactive forms with text inputs, checkboxes, dropdowns, and email/form submissions in seconds.</p>
      </div>
      <div class="feature-card">
        <h3>AI-Ready Future</h3>
        <p>Train AI to generate shortcodes, minimizing token overhead for efficient human-AI interactions.</p>
      </div>
    </div>

<div class="demo-container">
      <h2>Try Promptinator Live</h2>
      <p>Click the tokens below to interact with Promptinator’s dynamic interface:</p>
      <div class="prompt-text">Write a [D-Tone-positive,neutral,formal~positive~] blog post about [A-Topic] for [C-Audience-bloggers,marketers~bloggers~].</div>
      <div class="ai-buttons" style="display: flex; gap: 0.6rem; margin-top: 1rem;">
        <a class="ai-btn" href="#" target="_blank" style="background: var(--primary); color: #fff; padding: 0.4rem 1.2rem; border-radius: 7px; text-decoration: none; font-weight: 600;">🧠 ChatGPT</a>
        <a class="ai-btn" href="#" target="_blank" style="background: var(--accent); color: #fff; padding: 0.4rem 1.2rem; border-radius: 7px; text-decoration: none; font-weight: 600;">🔎 Perplexity</a>
      </div>
    </div>
  </section>

<section class="cta">
    <h2>Get Promptinator Now</h2>
    <p style="margin-bottom: 1.5rem;">Launch dynamic prompts and forms on your site today. Free for basic use, with Promptinator Pro unlocking advanced AI features.</p>
    <a href="https://melanie.ai/promptinator">Download for Free</a>
  </section>

function render() {
          meta.length = 0;
          let idx = 0;
          template.replace(RX, (_, cmd = '', lab = '', ops = '', def = '') => {
            lab = lab.trim();
            const opts = ops.split('|').filter(Boolean);
            if (!(idx in state)) state[idx] = def || opts[0] || lab;
            meta.push({ cmd, lab, opts, def });
            idx++;
            return '';
          });

idx = 0;
          promptText.innerHTML = template.replace(RX, (_, cmd = '', lab = '', ops = '', def = '') => {
            lab = lab.trim();
            const val = state[idx];
            let out = `<span class="token" data-i="${idx}" data-label="${lab}">[${val}]</span>`;
            idx++;
            return out;
          }).replace(/\n/g, '<br>');

function popup(meta, cur, done) {
          const popup = document.getElementById('promptinator-popup');
          const pb = popup.querySelector('.popup-body');
          const nice = meta.lab.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());

pb.innerHTML = inner;
          popup.style.display = 'flex';

const commit = v => {
            done(v);
            popup.style.display = 'none';
          };

if (meta.cmd === 'A') {
            const ta = pb.querySelector('textarea');
            ta.focus();
            pb.querySelector('button').onclick = () => commit(ta.value);
          } else if (meta.cmd === 'D') {
            pb.querySelector('select').onchange = e => commit(e.target.value);
          } else if (meta.cmd === 'C') {
            pb.querySelector('button').onclick = () => commit([...pb.querySelectorAll('input:checked')].map(i => i.value).join(', ') || cur);
          }
        }

promptText.addEventListener('click', e => {
          if (!e.target.classList.contains('token')) return;
          const i = +e.target.dataset.i;
          popup(meta[i], state[i], v => {
            state[i] = v;
            render();
          });
        });

render();
      }
    }

PromptinatorDemo.init();
  </script>
</body>
</html>

Site Builder

Editing: prompt-landing-page2.html

Site Builder