View Code - 20260722

page_generatore.php | 20260722_120325.php Initial Domain Snapshot

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Screenshot Style Page</title>
<style>
    body {
        margin: 0;
        padding: 40px 0;
        background: #f2a9a9;
        font-family: "Courier New", monospace;
    }

.page-wrap {
        width: 500px;
        margin: auto;
        background: #b9e7dd;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

.section {
        margin-bottom: 18px;
        text-align: center;
    }

.title {
        background: #1f1f1f;
        color: #fff;
        display: inline-block;
        padding: 8px 20px;
        border-radius: 6px;
        font-size: 14px;
        margin-bottom: 14px;
    }

/* EDITABLE CODE BOX */
    .code-box {
        background: #ecfff7;
        padding: 20px;
        border: 3px solid #4d4d4d;
        border-radius: 6px;
        white-space: pre;
        overflow-x: auto;
        font-size: 12px;
        line-height: 18px;
        min-height: 100px;
        text-align: left;
    }

.editable {
        outline: none;
        white-space: pre-wrap;
    }

/* controls */
    .controls { display:flex; gap:8px; justify-content:center; margin: 16px 0; flex-wrap:wrap; }
    .btn { padding:8px 12px; border-radius:6px; border:none; cursor:pointer; font-weight:600; font-family: inherit; }
    .btn.generate { background:#1fae4f; color:#fff; }
    .btn.preview { background:#666; color:#fff; }
    .btn.copy { background:#0b5; color:#013; }
    .btn.download { background:#0b66ff; color:#fff; }
    #full_output { width: calc(100% - 60px); margin: 12px 30px 0; min-height:140px; font-family:monospace; font-size:13px; padding:10px; border-radius:6px; border:1px solid rgba(0,0,0,0.12); background:#fff; display:block; }
    .note { font-size:12px; color:#222; text-align:center; margin-top:8px; }
</style>
</head>
<body>

<div class="section">
        <div class="title">FILE HEADER</div>
        <div class="code-box editable" contenteditable="true" data-block="1">
<?php echo "Your code block here..."; ?>
        </div>
    </div>

<div class="section">
        <div class="title">AUTH</div>
        <div class="code-box editable" contenteditable="true" data-block="2">
<?php
echo "Auth code block lines...\nLine 1\nLine 2\nLine 3...";
?>
        </div>
    </div>

<div class="section">
        <div class="title">FORM SECTION</div>
        <div class="code-box editable" contenteditable="true" data-block="3">
<?php
echo "Form related code...\nInputs...\nValidation...";
?>
        </div>
    </div>

<div class="section">
        <div class="title">LOGIC</div>
        <div class="code-box editable" contenteditable="true" data-block="4">
<?php
echo "Processing logic...\nDB queries...\nLoops...";
?>
        </div>
    </div>

<div class="section">
        <div class="title">FOOTER</div>
        <div class="code-box editable" contenteditable="true" data-block="5">
<?php
echo "Footer scripts here...\nClosing tags...";
?>
        </div>
    </div>

<div class="controls">
      <button id="genBtn" class="btn generate">Generate Full Page</button>
      <button id="previewBtn" class="btn preview">Preview</button>
      <button id="copyBtn" class="btn copy">Copy</button>
      <button id="downloadBtn" class="btn download">Download .php</button>
    </div>

<textarea id="full_output" placeholder="Generated full page will appear here..."></textarea>
    <div class="note">Click Generate → then Copy / Preview / Download</div>

</div>

function gatherBlocks(){
    // select .code-box in DOM order
    const boxes = Array.from(document.querySelectorAll('.code-box'));
    return boxes.map(b => b.textContent.replace(/\r\n/g,'\n').trim()).join("\n\n");
  }

genBtn.addEventListener('click', function(){
    const generated = gatherBlocks();
    out.value = generated;
    out.focus();
    out.select();
  });

copyBtn.addEventListener('click', async function(){
    if(!out.value){ alert('Generate first'); return; }
    try{
      await navigator.clipboard.writeText(out.value);
      alert('Copied to clipboard');
    }catch(e){
      const ta = document.createElement('textarea');
      ta.value = out.value;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      ta.remove();
      alert('Copied (fallback)');
    }
  });

dlBtn.addEventListener('click', function(){
    if(!out.value){ alert('Generate first'); return; }
    const blob = new Blob([out.value], { type: 'text/x-php' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'generated_page.php';
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  });

previewBtn.addEventListener('click', function(){
    if(!out.value){ alert('Generate first'); return; }
    const w = window.open('', '_blank');
    w.document.write('<pre style="white-space:pre-wrap;font-family:monospace;">' +
      out.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') +
    '</pre>');
    w.document.close();
  });

// allow Ctrl/Cmd+G to generate quickly
  document.addEventListener('keydown', function(e){
    if((e.ctrlKey || e.metaKey) && e.key.toLowerCase()==='g'){ e.preventDefault(); genBtn.click(); }
  });

})();
</script>

</body>
</html>