Site Builder

Editing: indexlllllllllllll.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ultimate Prompt Playground v6 (Full)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

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

/* BUSINESS PROFILE CARD */
    .biz-card {
      background: #f9fafb;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 1rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .biz-card h2 { margin: 0; font-size: 1.5rem; }
    .biz-details { display: flex; flex-direction: column; gap: .25rem; }
    .biz-details p { margin: 0; font-size: 1rem; }
    .biz-icon { font-size: 1.5rem; color: #6c48ff; }

/* NAVIGATION BUTTONS */
    .nav-buttons {
      display: flex;
      justify-content: space-between;
      margin: 1rem 0;
    }
    .nav-buttons button {
      padding: .75rem 1.5rem;
      font-size: 1rem;
      border: none;
      border-radius: 6px;
      background: #6c48ff;
      color: #fff;
      cursor: pointer;
    }
    .nav-buttons button:disabled {
      background: #ccc;
      cursor: default;
    }

/* PROMPT CARD */
    .prompt-card {
      position: relative;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }
    .prompt-text {
      white-space: pre-wrap;
      line-height: 1.6;
    }
    .prompt-text h2      { font-size: 1.25rem; margin: 1rem 0 .5rem; }
    .prompt-text ul,
    .prompt-text ol      { margin: .5rem 0 .5rem 1.25rem; }
    .prompt-text li      { margin: .25rem 0; }
    .prompt-text strong  { font-weight: 700; }

/* TOKENS */
    .token {
      display: inline-flex;
      background: #e8e0ff;
      color: #5c3bff;
      padding: .3rem .6rem;
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
      flex: 0 1 auto;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      margin-bottom: .3rem;
    }
    .token.placeholder { opacity: .6; }

/* TOOLBAR */
    .toolbar {
      position: absolute;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-shadow: 0 2px 12px rgba(0,0,0,.1);
      padding: .8rem;
      display: flex;
      flex-direction: column;
      gap: .6rem;
      z-index: 10;
      width: 300px;
    }
    .toolbar label { font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
    .toolbar input[type="text"], .toolbar select, .toolbar textarea {
      width: 100%;
      padding: .4rem;
      border: 1px solid #999;
      border-radius: 4px;
      font-size: 1rem;
    }
    .toolbar select { max-height: 200px; overflow: auto; }
    .toolbar textarea { resize: vertical; }

/* CHECKBOX LIST */
    .checkbox-list {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      max-height: 200px;
      overflow: auto;
      padding-right: .2rem;
    }
    .checkbox-list label {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .4rem .6rem;
      background: #f0f4ff;
      border-radius: 4px;
      cursor: pointer;
      transition: background .2s;
    }
    .checkbox-list label:hover { background: #e0e8ff; }
    .checkbox-list input[type="checkbox"] {
      accent-color: #3b82f6;
      width: 1.2em;
      height: 1.2em;
      flex-shrink: 0;
    }

/* AI BUTTONS */
    .ai-btns {
      display: flex;
      gap: .6rem;
      margin-top: 1rem;
    }
    .ai-btns a {
      flex: 1;
      text-align: center;
      padding: .7rem;
      border-radius: 6px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
    }
    .ai-btns a.chatgpt    { background: #6c48ff; }
    .ai-btns a.perplexity { background: #1ca7ec; }
    .ai-btns a.copilot    { background: #00c853; color: #173E22; }
    .ai-btns a:hover      { filter: brightness(1.1); }
  </style>
</head>
<body>
<h1>Promptinator By Melanie AI</h1>

<div id="biz-profile" class="biz-card" hidden>
  <div class="biz-icon">🏢</div>
  <div class="biz-details">
    <h2></h2>
    <p>📍 <span class="biz-address"></span></p>
    <p>📞 <span class="biz-phone"></span></p>
  </div>
</div>

<div class="nav-buttons">
  <button id="prev-btn" disabled>Previous</button>
  <button id="next-btn" disabled>Next</button>
</div>

<div id="app"></div>

// Load business data
  const params = new URLSearchParams(location.search);
  const ph = params.get('ph') || '';
  let biz = {};
  try {
    biz = await fetch(`/ph/${ph}/business.json`).then(r => r.json());
  } catch {}

function formatPhone(num) {
    const d = (num || '').replace(/\D/g, '');
    return d.length === 10
      ? `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`
      : num;
  }

// Populate business card
  const profile = document.getElementById('biz-profile');
  if (biz.name) {
    profile.querySelector('h2').textContent = biz.name;
    profile.querySelector('.biz-address').textContent = biz.address || '';
    profile.querySelector('.biz-phone').textContent = formatPhone(biz.phone);
    profile.hidden = false;
  }

// Load prompts
  let prompts = [];
  try {
    prompts = await fetch('prompts.json')
      .then(r => r.json())
      .then(a => a.map(o => o.prompt));
  } catch {}

const app = document.getElementById('app');
  const cards = [];

// Helper: toolbar placement
  function placeToolbar(tb, tok) {
    const card = tok.closest('.prompt-card');
    const tr = tok.getBoundingClientRect();
    const cr = card.getBoundingClientRect();
    tb.style.top = (tr.bottom - cr.top) + 'px';
    tb.style.left = (tr.left - cr.left) + 'px';
  }

// Build prompt cards
  for (const tpl of prompts) {
    const meta = [];
    const state = {};
    ['name','slogan','description','address','city','state','zip','phone','website']
      .forEach(k => state[k] = biz[k] || '');
    state.service = Array.isArray(biz.tags) ? biz.tags.slice(0,1) : [];
    state.location = Array.isArray(biz.location_tags) ? biz.location_tags.slice(0,1) : [];

tpl.replace(RX, (m, cmd = '', lab, ops = '', def = '') => {
      lab = lab.trim();
      let opts = [];
      if (cmd === 'C') {
        opts = lab === 'service' ? biz.tags :
               lab === 'location' ? biz.location_tags : ops.split('|').filter(Boolean);
        state[lab] = def ? def.split(',').map(v => v.trim()) : (opts.length ? [opts[0]] : []);
      } else if (cmd === 'B') {
        opts = ops.split('|').filter(Boolean);
        state[lab] = def || opts[0] || '';
      } else if (cmd === 'D') {
        if (ops.includes('|')) {
          opts = ops.split('|').filter(Boolean);
          state[lab] = def || opts[0] || '';
        } else {
          state[lab] = def || state[lab] || '';
        }
      } else if (cmd === 'I') {
        opts = ops.split('|').filter(Boolean);
        state[lab] = def || state[lab] || '';
      } else {
        state[lab] = def || state[lab] || '';
      }
      meta.push({cmd: cmd || 'A', lab, opts, rawOps: ops, defaultVal: def});
      return '';
    });

const card = document.createElement('div');
    card.className = 'prompt-card';
    card.innerHTML = `
      <div class="prompt-text"></div>
      <div class="ai-btns">
        <a class="chatgpt" data-base="https://chatgpt.com/?prompt=" target="_blank">ChatGPT</a>
        <a class="perplexity" data-base="https://www.perplexity.ai/search?q=" target="_blank">Perplexity</a>
        <a class="copilot" data-base="https://copilot.microsoft.com/?q="  target="_blank">Copilot</a>
      </div>`;
    app.append(card);
    cards.push(card);

const tb = document.createElement('div');
    tb.className = 'toolbar';
    tb.style.display = 'none';
    card.append(tb);

function rebuild() {
      renderText();
      const out = tpl.replace(RX, (m, cmd = '', lab) => {
        const v = state[lab.trim()];
        return cmd === 'C' ? (v || []).join(SEP) : v || '';
      });
      card.querySelectorAll('.ai-btns a').forEach(a => a.href = a.dataset.base + encodeURIComponent(out));
    }

renderText();
    rebuild();

// Navigation logic
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  let current = 0;
  function show(idx) {
    cards.forEach((c, i) => c.style.display = (i === idx ? 'block' : 'none'));
    prevBtn.disabled = idx === 0;
    nextBtn.disabled = idx === cards.length - 1;
    prevBtn.textContent = idx > 0
      ? '← ' + prompts[idx-1].split(/\s+/).slice(0,4).join(' ') + '...'
      : 'Previous';
    nextBtn.textContent = idx < cards.length - 1
      ? prompts[idx+1].split(/\s+/).slice(0,4).join(' ') + '... →'
      : 'Next';
  }
  prevBtn.addEventListener('click', () => { if (current > 0) show(--current); });
  nextBtn.addEventListener('click', () => { if (current < cards.length - 1) show(++current); });
  show(0);

// Tutorial
  const tutorial = document.createElement('section');
  tutorial.style.cssText = 'margin-top:2rem;padding:1rem;border-top:1px solid #ddd;';
  tutorial.innerHTML = `
    <h2>Shortcode Tutorial</h2>
    <ul>
      <li><strong>A-tokens (Free Text)</strong>: <code>[A-key-~default~]</code> → textarea preset.</li>
      <li><strong>B-tokens (Single Choice)</strong>: <code>[B-key-|opt1|opt2|~default~]</code> → radio buttons.</li>
      <li><strong>C-tokens (Multi-Select)</strong>: <code>[C-key-|opt1|opt2|]</code> → checkboxes.</li>
      <li><strong>D-tokens (Dropdown)</strong>: <code>[D-key-5~3~]</code> → dropdown.</li>
      <li><strong>I-tokens (Iframe Preview)</strong>: <code>[I-key-|url1|url2|]</code> → site picker.</li>
    </ul>`;
  app.append(tutorial);
})();
</script>
</body>
</html>

Site Builder

Editing: indexlllllllllllll.php

Site Builder