Site Builder

Editing: copywrite.php

writable 0666

<?php
/* ------------------------------------------------------------------
   RF Safe – OpenAI Article Generator + Promptinator (v2.2 AUTOSCROLL/SPINNER)
   ------------------------------------------------------------------
   • Location/service tag editing, pills, sorting, delete, sticky
   • Promptinator, business prefilling, radio switcher, full prompt patch
   • Adds: spinner by Generate button + smooth scroll to result
   ------------------------------------------------------------------ */

const COOKIE_NAME = 'openai_key';
const COOKIE_TTL  = 30 * 24 * 3600;
const SECRET      = __FILE__;

$host = $_SERVER['HTTP_HOST'] ?? '';
if (filter_var($host, FILTER_VALIDATE_IP)) {
    $cookieDomain = '';
} elseif (preg_match('/([a-z0-9-]+\.[a-z]{2,})$/i', $host, $m)) {
    $cookieDomain = '.'.$m[1];
} else $cookieDomain = '';

function crypt_val(string $v, bool $enc = true): string {
    $m = 'aes-128-ctr';
    $k = substr(hash('sha256', SECRET, true), 0, 16);
    if ($enc) {
        $iv = random_bytes(openssl_cipher_iv_length($m));
        return base64_encode(openssl_encrypt($v, $m, $k, 0, $iv).'::'.$iv);
    }
    [$ct, $iv] = explode('::', base64_decode($v), 2) + [null, null];
    return $ct && $iv ? (openssl_decrypt($ct, $m, $k, 0, $iv) ?: '') : '';
}

$ph   = preg_replace('/\D/', '', $_GET['ph'] ?? '');
$idx  = (int)($_GET['idx'] ?? 0);
$biz  = [];
if (strlen($ph) === 10) {
    $bizPath = $_SERVER['DOCUMENT_ROOT']."/ph/$ph/business.json";
    if (is_readable($bizPath)) $biz = json_decode(file_get_contents($bizPath), true) ?: [];
}

$promptTpl = '';
if (is_readable(__DIR__.'/prompts.json')) {
    $ary = json_decode(file_get_contents(__DIR__.'/prompts.json'), true);
    if (!empty($ary[$idx]['prompt'])) $promptTpl = $ary[$idx]['prompt'];
}

$msg='';
if ($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['save_key'])) {
    $raw = trim($_POST['api_key']);
    $ctx = stream_context_create(['http'=>['method'=>'GET','header'=>"Authorization: Bearer $raw\r\n",'timeout'=>8]]);
    if (@file_get_contents('https://api.openai.com/v1/models',false,$ctx)) {
        setcookie(COOKIE_NAME, crypt_val($raw, true), time()+COOKIE_TTL, '/', $cookieDomain, isset($_SERVER['HTTPS']), true);
        header('Location: '.$_SERVER['REQUEST_URI']);
        exit;
    }
    $msg = '❌ Invalid key.';
}
if (isset($_GET['delete_key'])) {
    setcookie(COOKIE_NAME,'',time()-3600,'/',$cookieDomain,isset($_SERVER['HTTPS']),true);
    header('Location: '.$_SERVER['PHP_SELF']);
    exit;
}
$hasKey  = !empty($_COOKIE[COOKIE_NAME]) && crypt_val($_COOKIE[COOKIE_NAME], false);
$apiKey  = $hasKey ? crypt_val($_COOKIE[COOKIE_NAME], false) : '';

$topic = $biz['name'] ?? '';
$keywords = isset($biz['tags']) ? implode(', ', $biz['tags']) : '';
$linkurl = $biz['website'] ?? '';
$sections = 3; $paras = 3; $lang='English'; $style='Creative'; $tone='Neutral';
$points = $biz['tags'] ?? [];
$location_tags = $biz['location_tags'] ?? [];
$model  = 'gpt-4o-mini';
$rawHTML='';
$usePromptinator = false;

$finalPrompt = '';
if ($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['generate'])) {
    $usePromptinator = isset($_POST['use_promptinator']);
    $topic     = trim($_POST['topic']    ?? $topic);
    $keywords  = trim($_POST['keywords'] ?? $keywords);
    $linkurl   = trim($_POST['linkurl']  ?? $linkurl);
    $sections  = max(1, intval($_POST['sections'] ?? $sections));
    $paras     = max(1, intval($_POST['paras']    ?? $paras));
    $lang      = $_POST['lang']  ?? $lang;
    $style     = $_POST['style'] ?? $style;
    $tone      = $_POST['tone']  ?? $tone;
    $points    = array_filter(array_map('trim', $_POST['points'] ?? $points));
    $location_tags = isset($_POST['location_tags_str'])
        ? array_filter(array_map('trim', explode(',', $_POST['location_tags_str'])))
        : $location_tags;
    $model     = $_POST['model'] ?? $model;
    $finalPrompt = trim($_POST['final_prompt'] ?? '');

$key = $apiKey;
    if (!$key) {
        $msg='❌ Missing API key.';
    } else {
        $payload=[
            'model'=>$model,
            'messages'=>[['role'=>'user','content'=>$finalPrompt]],
            'max_tokens'=>max(800,$sections*$paras*200),
            'temperature'=>0.7
        ];
        $ch=curl_init('https://api.openai.com/v1/chat/completions');
        curl_setopt_array($ch,[CURLOPT_RETURNTRANSFER=>true,CURLOPT_HTTPHEADER=>[
            'Authorization: Bearer '.$key,'Content-Type: application/json'],CURLOPT_POST=>true,CURLOPT_POSTFIELDS=>json_encode($payload),CURLOPT_TIMEOUT=>60]);
        $resp=curl_exec($ch); curl_close($ch);
        $data=json_decode($resp,true);
        $rawHTML=$data['choices'][0]['message']['content'] ?? '❌ No content returned.';
    }
}

$langs  = ['English','Spanish','German','French','Italian','Portuguese','Dutch'];
$styles = ['Creative','Informative','Narrative','Persuasive','Analytical','Journalistic'];
$tones  = ['Neutral','Cheerful','Humorous','Assertive','Inspirational','Professional','Emotional'];
$models = ['gpt-3.5-turbo','gpt-4o-mini','gpt-4'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promptinator + Article Generator</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">
  <style>
    :root{--purple:#6c48ff;--grey:#f5f7fa;--radius:.75rem}
    body{margin:0;display:flex;min-height:100vh;font-family:system-ui,sans-serif;background:var(--grey)}
    .sidebar{flex:0 0 280px;background:#181c23;color:#fff;padding:2rem;display:flex;flex-direction:column;gap:1.25rem}
    .sidebar h1{margin:0;font-size:1.6rem;color:var(--purple)}
    .main{flex:1;padding:2rem;overflow-y:auto}
    .panel{background:#fff;border-radius:var(--radius);box-shadow:0 4px 24px rgba(0,0,0,.08);padding:2rem;max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:1.4rem}
    .mic-btn{position:absolute;right:2.3em;top:50%;transform:translateY(-50%);border:none;background:transparent;font-size:1.1em;cursor:pointer}
    .del-btn{position:absolute;right:.5em;top:50%;transform:translateY(-50%);border:none;background:transparent;font-size:1.05em;cursor:pointer;color:#e04a4a}
    .del-btn:hover{color:#ff0000}
    .point-row{position:relative;display:inline-block;width:100%}
    .point-row input{width:100%;padding-right:4.5em}
    #locationTagsBar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;}
    .location-pill{display:inline-block;background:#e6efff;color:#222;border-radius:2em;padding:.4em 1em;font-size:1em;margin-right:.3em;position:relative;}
    .location-pill .loc-del{color:#c00;cursor:pointer;margin-left:.5em;}
    .location-pill .loc-del:hover{color:#a00;}
    textarea{width:100%;min-height:140px;font-family:"Fira Code",monospace}
    .preview{border:1px solid #d0d4e0;padding:1rem;border-radius:var(--radius);background:#fafbff}
    #promptinator{border-top:1px solid #ddd;padding-top:2rem}
    .token{display:inline-flex;background:#e8e0ff;color:#5c3bff;padding:.3rem .6rem;border-radius:4px;cursor:pointer;margin:0 .1rem;white-space:normal;word-break:break-word}
    .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}
    .checkbox-list{display:flex;flex-direction:column;gap:.4rem;max-height:200px;overflow:auto}
    /* Spinner styles */
    #genSpinner{display:inline-block;vertical-align:middle;margin-left:.7em;}
    @media(max-width:850px){body{flex-direction:column}.sidebar{width:100%;order:2}.main{order:1;padding:1rem}}
  </style>
</head>
<body>
  <div class="sidebar">
    <h1>Promptinator</h1>
    <?php if(!$hasKey): ?>
      <form method="post" autocomplete="off">
        <input type="password" name="api_key" placeholder="sk-..." required>
        <button name="save_key">Save & Login</button>
        <a href="https://platform.openai.com/api-keys" target="_blank" style="font-size:.9rem;color:var(--purple)">👉 Get API Key</a>
      </form>
      <small><?= $msg ?: 'Your key is stored only in your browser cookie.' ?></small>
    <?php else: ?>
      <div style="font-size:.95rem"><span style="color:#72eb99">●</span> Logged in</div>
      <form method="get" style="margin-bottom:1rem">
        <label style="font-size:.8rem">Model
          <select name="model" onchange="this.form.submit()" style="margin-top:.3rem">
            <?php foreach($models as $m): ?><option value="<?= $m ?>" <?= $model===$m?'selected':''?>><?= $m ?></option><?php endforeach; ?>
          </select>
        </label>
      </form>
      <a href="?delete_key=1" style="color:#fff;text-decoration:none;font-size:.9rem">Logout</a>
    <?php endif; ?>
  </div>

<div class="main">
    <div class="panel">
      <h2>Create an Article</h2>
      <?php if(!$hasKey): ?>
        <p>Please enter your OpenAI API key to continue.</p>
      <?php else: ?>
        <form method="post" id="frm">
          <input type="hidden" name="model" value="<?= htmlspecialchars($model) ?>">
          <input type="hidden" name="final_prompt" id="final_prompt">
          <input type="hidden" name="location_tags_str" id="location_tags_str">

<label>Topic
            <div class="point-row" style="width:100%">
              <input name="topic" id="topic" required value="<?= htmlspecialchars($topic,ENT_QUOTES) ?>" style="padding-right:2.5em;">
              <button type="button" class="mic-btn" data-target="topic" title="Speak topic">🎤</button>
            </div>
          </label>

<label>Main Points
            <div id="pointsContainer" style="display:flex;flex-direction:column;gap:.6rem"></div>
            <button type="button" id="addPointBtn" style="margin-top:.6rem">Add Point</button>
          </label>

<label>Location Tags
            <div id="locationTagsBar"></div>
          </label>

<label>Keywords <input name="keywords" id="keywords" value="<?= htmlspecialchars($keywords,ENT_QUOTES) ?>"></label>
          <label>Link URL <input name="linkurl" id="linkurl" type="url" value="<?= htmlspecialchars($linkurl,ENT_QUOTES) ?>"></label>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem">
            <label># Sections <select name="sections" id="sections"><?php for($i=1;$i<=8;$i++):?><option value="<?=$i?>" <?= $sections==$i?'selected':''?>><?=$i?></option><?php endfor;?></select></label>
            <label># Paragraphs/Section <select name="paras" id="paras"><?php for($i=1;$i<=6;$i++):?><option value="<?=$i?>" <?= $paras==$i?'selected':''?>><?=$i?></option><?php endfor;?></select></label>
            <label>Language <select name="lang" id="lang"><?php foreach($langs as $l):?><option value="<?=$l?>" <?= $lang===$l?'selected':''?>><?=$l?></option><?php endforeach;?></select></label>
            <label>Style <select name="style" id="style"><?php foreach($styles as $s):?><option value="<?=$s?>" <?= $style===$s?'selected':''?>><?=$s?></option><?php endforeach;?></select></label>
            <label>Tone <select name="tone" id="tone"><?php foreach($tones as $t):?><option value="<?=$t?>" <?= $tone===$t?'selected':''?>><?=$t?></option><?php endforeach;?></select></label>
          </div>

<fieldset style="border:1px solid #ccc;padding:.8rem">
            <legend>Prompt Source</legend>
            <label><input type="radio" name="use_promptinator" value="" <?= !$usePromptinator?'checked':'' ?>> Auto‑build Article Prompt</label>
            <label><input type="radio" name="use_promptinator" value="1" <?= $usePromptinator?'checked':'' ?>> Use Promptinator Output</label>
          </fieldset>

<label>Article Prompt Preview <textarea id="promptPreview" readonly></textarea></label>
          <button type="button" class="secondary" id="copyPrompt">Copy Prompt</button>
          <button name="generate" style="margin-top:1rem" id="genArticleBtn">Generate Article</button>
          <span id="genSpinner" style="display:none;vertical-align:middle;">
            <svg width="18" height="18" viewBox="0 0 50 50" style="vertical-align:middle">
              <circle cx="25" cy="25" r="20" fill="none" stroke="#6c48ff" stroke-width="6" stroke-linecap="round" stroke-dasharray="31.415,31.415" transform="rotate(72 25 25)">
                <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.75s" repeatCount="indefinite"/>
              </circle>
            </svg>
          </span>

<?php if($rawHTML): ?>
          <details style="margin-top:1rem"><summary style="cursor:pointer;font-weight:600">Raw HTML</summary>
            <label style="margin-top:1rem"><textarea id="articleHTMLRaw" readonly><?= htmlspecialchars($rawHTML) ?></textarea></label>
            <button type="button" id="copyRaw" class="secondary">Copy HTML</button>
          </details>
          <h3>Rendered Preview</h3>
          <div id="articlePreview" class="preview"></div>
          <button type="button" id="copyRendered" class="secondary">Copy Rendered HTML</button>
        <?php endif; ?>
      <?php endif; ?>

<div id="promptinator">
        <h2 style="margin-top:0">Promptinator Editor</h2>
        <p style="margin-bottom:1rem">Click tokens to change content. When you’re happy, choose “Use Promptinator Output” above before generating.</p>
        <?php if(!empty($biz['name'])): ?>
          <div class="biz-card" style="margin-bottom:1rem">
            <div class="biz-details">
              <strong><?= htmlspecialchars($biz['name']) ?></strong>
              <?php if(!empty($biz['address'])): ?><small><?= htmlspecialchars($biz['address']) ?></small><?php endif; ?>
              <?php if(!empty($biz['phone'])): ?><small><?= htmlspecialchars($biz['phone']) ?></small><?php endif; ?>
            </div>
          </div>
        <?php endif; ?>
        <div id="promptCards"></div>
      </div>
    </div>
  </div>

// --- Location Tags pill bar ---
  const locationTagsBar = document.getElementById('locationTagsBar');
  let locationTags = <?= json_encode($location_tags) ?>;

// SpeechRecognition setup (multi-mic)
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  let recognizer;
  if(SpeechRecognition){
    recognizer = new SpeechRecognition();
    recognizer.lang='en-US';
    recognizer.interimResults=false;
    recognizer.maxAlternatives=1;

recognizer.addEventListener('result',evt=>{
      const transcript=evt.results[0][0].transcript;
      const tgtId=recognizer._currentTarget;
      if(tgtId){
        const inp=document.getElementById(tgtId);
        if(inp){inp.value=transcript; buildAutoPrompt();}
      }
    });
  }
  document.addEventListener('click',e=>{
    if(e.target.classList.contains('mic-btn')){
      if(!recognizer){alert('Speech API not supported'); return;}
      recognizer._currentTarget=e.target.dataset.target;
      recognizer.start();
    }
  });

// --- Prompt build logic, now with location tags included ---
  function buildAutoPrompt(){
    const kw=q('keywords').value.trim(), link=q('linkurl').value.trim();
    const sec=q('sections').value, par=q('paras').value, lang=q('lang').value, style=q('style').value, tone=q('tone').value;
    const pts=[...document.querySelectorAll('input[name="points[]"]')].map(i=>i.value.trim()).filter(Boolean);
    let str=`Write a ${lang} article in a ${tone} tone and ${style} style about "${q('topic').value.trim()}". `+
            `Structure it into ${sec} sections, each starting with an <h2> and containing ${par} paragraph${par>1?'s':''}. `+
            `Use additional <h3> sub‑headings if it improves readability.`;
    if(kw)str+=` Include the following keywords naturally throughout the article: ${kw}.`;
    if(kw&&link)str+=` Hyperlink each keyword exactly once to ${link} using <a> tags.`;
    if(pts.length)str+=` The following main points must each be covered (preferably as section headings): ${pts.join('; ')}.`;
    if(locationTags.length)str+=` Focus the content on these locations: ${sortLocTags(locationTags).join(', ')}.`;
    str+=' After the body, append <p class="excerpt">Excerpt: …</p>. Return ONLY the complete HTML.';
    q('promptPreview').value=str;
  }
  ['topic','keywords','linkurl','sections','paras','lang','style','tone'].forEach(id=>q(id).addEventListener('input',buildAutoPrompt));
  document.addEventListener('input',e=>{if(e.target.name==='points[]') buildAutoPrompt();});
  buildAutoPrompt();

// Copy helpers
  function setupCopy(btnId,producer){const btn=q(btnId);if(!btn) return;btn.addEventListener('click',()=>{navigator.clipboard.writeText(producer()).then(()=>{const t=btn.textContent;btn.textContent='Copied!';setTimeout(()=>btn.textContent=t,1200);});});}
  setupCopy('copyPrompt',()=>q('promptPreview').value);
  setupCopy('copyRaw',()=>q('articleHTMLRaw')?q('articleHTMLRaw').value:'');
  setupCopy('copyRendered',()=>q('articlePreview')?q('articlePreview').innerHTML:'');

// Spinner logic and prompt assignment on submit
  let spinner = document.getElementById('genSpinner');
  document.getElementById('frm').addEventListener('submit', function(e){
    if(spinner) spinner.style.display = 'inline-block';
    let prompt = '';
    let radio = document.querySelector('input[name="use_promptinator"]:checked');
    if (radio && radio.value) {
      prompt = q('promptinator_out').value || '';
    } else {
      prompt = q('promptPreview').value || '';
    }
    q('final_prompt').value = prompt;
    q('location_tags_str').value = sortLocTags(locationTags).join(',');
  });

// Auto-scroll to article on response, hide spinner
  <?php if($rawHTML): ?>
    window.addEventListener('DOMContentLoaded', function() {
      const prev = q('articlePreview');
      if(prev){
        prev.innerHTML=<?= json_encode($rawHTML) ?>;
        prev.scrollIntoView({behavior:'smooth'});
        let s = document.getElementById('genSpinner');
        if(s) s.style.display = 'none';
      }
    });
  <?php endif; ?>

// PROMPTINATOR JS unchanged ...
  const RX=/\[(?:([ABCDI]?)\-)?([^~|\-\]]+)(?:\-([^~]*?))?(?:~([^~]*?)~)?\]/g;
  const SEP=' • ';
  const promptTpl=<?= json_encode($promptTpl) ?> || '';
  const biz = <?= json_encode($biz) ?>;
  const cardsDiv=q('promptCards');
  if(!promptTpl){cardsDiv.innerHTML='<em>No prompt template loaded.</em>';return;}

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):[];

promptTpl.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'){state[lab]=def||state[lab]||'';opts=ops.split('|').filter(Boolean);} 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,def});return'';
  });

const card=document.createElement('div');card.className='prompt-card';card.style.position='relative';cardsDiv.append(card);
  const tb=document.createElement('div');tb.className='toolbar';tb.style.display='none';card.append(tb);
  const txt=document.createElement('div');txt.className='prompt-text';card.append(txt);
  const btns=document.createElement('div');btns.style.marginTop='1rem';card.append(btns);
  const useBtn=document.createElement('button');useBtn.type='button';useBtn.textContent='Insert output above';useBtn.onclick=()=>{q('promptinator_out').value=buildPlain();q('promptPreview').value=q('promptinator_out').value;document.querySelector('input[name="use_promptinator"][value="1"]').checked=true;alert('Promptinator output inserted');};btns.append(useBtn);
  const copyBtn=document.createElement('button');copyBtn.type='button';copyBtn.textContent='Copy output';copyBtn.style.marginLeft='.6rem';copyBtn.onclick=()=>navigator.clipboard.writeText(buildPlain()).then(()=>alert('Copied'));btns.append(copyBtn);

Site Builder

Editing: copywrite.php

Site Builder