<?php
// /tag-extractor/index.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tag Extractor – Studio1Live</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Turn your ChatGPT and AI articles into SEO magnets. Extract @handles, #hashtags, links & emails, then generate ready-to-paste HTML snippets for your blog.">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <header class="app-header">
    <h1>Tag Extractor by Studio1Live</h1>
    <p>Turn your ChatGPT articles into SEO magnets. Paste your content, extract @handles, #hashtags, links & emails, then generate ready-to-paste HTML snippets for your blog or site.</p>
  </header>

  <main class="app-main">
    <section class="card">
      <h2>Mode 1: Paste Article or Text</h2>
      <p>Paste your full article, chat logs, comments, or transcripts below and click <strong>Extract</strong>. We’ll pull out all @handles, #hashtags, links and emails.</p>
      <textarea id="inputText" placeholder="Paste your article or text here..."></textarea>
      <button id="extractTextBtn" class="btn">Extract Tags</button>
    </section>

    <section class="card">
      <h2>Mode 2: Upload File</h2>
      <p>Upload a <strong>.txt, .rtf, .csv, .log, .html</strong> file and we’ll extract tags from it.</p>
      <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="tagfile" id="tagfile" accept=".txt,.rtf,.csv,.log,.html,.htm">
        <button type="submit" class="btn">Upload &amp; Extract</button>
      </form>
      <small>Max size ~2MB (adjust in PHP if needed).</small>
    </section>

    <section class="card">
      <h2>Mode 3: Fetch From URL (Beta)</h2>
      <p>Enter a URL to fetch HTML and extract tags. <strong>Use only on content you have rights to and in compliance with each site&apos;s Terms of Service.</strong></p>
      <form id="urlForm">
        <input type="url" name="source_url" id="source_url" placeholder="https://example.com/page" required>
        <button type="submit" class="btn">Fetch &amp; Extract</button>
      </form>
    </section>

    <section id="resultsSection" class="card hidden">
      <h2>Extracted Results</h2>
      <div id="resultsSummary"></div>

      <div class="result-group">
        <h3>@Handles <span id="handlesCount" class="badge">0</span></h3>
        <button class="btn btn-small" data-copy-target="handlesList">Copy Handles</button>
        <pre id="handlesList" class="result-box"></pre>
      </div>

      <div class="result-group">
        <h3>#Hashtags <span id="hashtagsCount" class="badge">0</span></h3>
        <button class="btn btn-small" data-copy-target="hashtagsList">Copy Hashtags</button>
        <pre id="hashtagsList" class="result-box"></pre>
      </div>

      <div class="result-group">
        <h3>Links <span id="linksCount" class="badge">0</span></h3>
        <button class="btn btn-small" data-copy-target="linksList">Copy Links</button>
        <pre id="linksList" class="result-box"></pre>
      </div>

      <div class="result-group">
        <h3>Emails <span id="emailsCount" class="badge">0</span></h3>
        <button class="btn btn-small" data-copy-target="emailsList">Copy Emails</button>
        <pre id="emailsList" class="result-box"></pre>
      </div>
    </section>

    <!-- NEW: snippet generator block -->
    <section id="snippetSection" class="card hidden">
      <h2>Generated Code Snippets</h2>
      <p>Use these blocks to drop under your article, in your template, or on social media.</p>

      <div class="result-group">
        <h3>HTML Footer Block</h3>
        <button class="btn btn-small" data-copy-target="htmlFooterOutput">Copy HTML Footer</button>
        <pre id="htmlFooterOutput" class="result-box"></pre>
      </div>

      <div class="result-group">
        <h3>Hashtag Line (Social Media)</h3>
        <button class="btn btn-small" data-copy-target="hashtagsInlineOutput">Copy Hashtag Line</button>
        <pre id="hashtagsInlineOutput" class="result-box"></pre>
      </div>
    </section>
  </main>

  <footer class="app-footer">
    <p>Built by Studio1Live · <a href="https://studio1live.com" target="_blank">studio1live.com</a></p>
  </footer>

  <script src="assets/js/app.js"></script>
</body>
</html>
