<!-- /linkstorm/index.php -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>LinkStorm - Share Everywhere & Extract Tags</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- User auth bar -->
  <div class="auth-bar">
    <div id="authLoggedOut">
      <input type="email" id="authEmail" placeholder="Email" />
      <input type="password" id="authPassword" placeholder="Password" />
      <button id="authLoginBtn">Login</button>
      <button id="authRegisterBtn">Register</button>
      <span id="authStatus" class="small-text"></span>
    </div>
    <div id="authLoggedIn" class="hidden">
      <span id="authUserLabel"></span>
      <button id="authLogoutBtn">Logout</button>
    </div>
  </div>

  <div class="container">
    <h1>🔗 LinkStorm</h1>
    <p>Auto-share your link across platforms, then turn your ChatGPT articles into SEO magnets with Tag Extractor + templates.</p>
    <section class="hero-howto card">
  <h2>How You Use This Now</h2>
  <ol class="howto-steps">
    <li>
      <span class="step-badge">1</span>
      <div>
        <strong>Ask ChatGPT for your article.</strong>
        <p>Tell it what tags, keywords, and shoutouts you want included in the content.</p>
      </div>
    </li>
    <li>
      <span class="step-badge">2</span>
      <div>
        <strong>Paste the article into Tag Extractor.</strong>
        <p>Use “Paste Article or Text” and click <em>Extract</em> to pull out @handles, #hashtags, links & emails.</p>
      </div>
    </li>
    <li>
      <span class="step-badge">3</span>
      <div>
        <strong>Choose a template & copy.</strong>
        <p>Select <em>Full Article + Footer (HTML Page)</em> or another template, then click <em>Copy Snippet</em>.</p>
      </div>
    </li>
    <li>
      <span class="step-badge">4</span>
      <div>
        <strong>Paste into your site and publish.</strong>
        <p>Drop the HTML into your blog, static page, or CMS. Your post is now an SEO magnet, ready to share with the world.</p>
      </div>
    </li>
  </ol>
  <p class="hero-tagline">Paste content in → templates out → publish.</p>
</section>


    <!-- Existing share UI -->
    <section class="card">
      <h2>Share a Link</h2>
      <input type="text" id="shareLink" placeholder="Paste your link here..." />
      <div class="button-group">
        <button onclick="autoShare()">Auto Share (All)</button>
        <button onclick="shareLoggedIn()">Share via Saved API Tokens</button>
      </div>

      <div class="sidebar">
        <button onclick="shareTo('facebook')">Facebook</button>
        <button onclick="shareTo('twitter')">Twitter</button>
        <button onclick="shareTo('linkedin')">LinkedIn</button>
        <button onclick="shareTo('reddit')">Reddit</button>
      </div>

      <div id="apiSettings">
        <h3>🔐 API Settings (local)</h3>
        <input type="text" id="fbToken" placeholder="Enter Facebook Access Token" />
        <button onclick="saveFBToken()">Save FB Token</button>

        <input type="text" id="twitterToken" placeholder="Enter Twitter API Token" />
        <button onclick="saveTwitterToken()">Save Twitter Token</button>

        <input type="text" id="linkedinToken" placeholder="Enter LinkedIn API Token" />
        <button onclick="saveLinkedInToken()">Save LinkedIn Token</button>
      </div>
    </section>

    <!-- Tag Extractor -->
    <section class="card">
      <h2>Tag Extractor – Paste Article or Text</h2>
      <p>Paste your full article, chat log, or transcript below and click <strong>Extract</strong>.</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>Upload File</h2>
      <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>
    </section>

    <section class="card">
      <h2>Fetch From URL (Beta)</h2>
      <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>

    <section id="saveLoadSection" class="card hidden">
      <h2>Save / Load Tag Sets (per User)</h2>
      <div class="save-block">
        <h3>Save Current Extraction</h3>
        <input type="text" id="setName" placeholder="e.g. CFP Miami Article">
        <button id="saveSetBtn" class="btn btn-small">Save Tag Set</button>
        <div id="saveStatus" class="small-text"></div>
      </div>

      <div class="load-block">
        <h3>Load Existing Set</h3>
        <select id="savedSetsSelect">
          <option value="">-- Select a saved set --</option>
        </select>
        <button id="loadSetBtn" class="btn btn-small">Load Set</button>
        <div id="loadStatus" class="small-text"></div>
      </div>
    </section>

    <section id="snippetSection" class="card hidden">
      <h2>Generated Code Snippets</h2>
      <p>Choose a template and copy the output to drop under your article or in your CMS template.</p>
      <label>
        Template:
        <select id="templateSelect">
          <option value="simple_footer">Simple HTML Footer</option>
          <option value="studio_footer">Studio1Live Promo Footer</option>
          <option value="youtube_shoutout">YouTube Shoutout Block</option>
          <option value="full_article">Full Article + Footer (HTML Page)</option>
        </select>
      </label>

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

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

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

  <script src="api.js"></script>
  <script src="script.js"></script>
</body>
</html>
