folder-map-generator-refactored.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Folder Map Generator | tools.eliana.lol</title>
  <link rel="stylesheet" href="global.css" />
  <link rel="icon" type="image/x-icon" href="favicon.svg" />
  <style>
    .container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .input-label {
      font-size: 0.85rem;
      font-weight: bold;
      text-transform: uppercase;
      color: var(--puny);
      letter-spacing: 0.05em;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    button {
      flex: 0 1 auto;
      min-width: 120px;
      padding: 10px;
      cursor: pointer;
      font-family: monospace;
      border: 1px solid var(--text);
      background: var(--bg);
      color: var(--text);
      border-radius: 4px;
      transition: all 150ms;
    }

    button:hover {
      background-color: var(--hover);
      border-color: var(--accent);
    }

    button.primary {
      border-color: var(--accent);
      font-weight: bold;
      color: var(--accent);
    }

    textarea {
      width: 100%;
      font-family: monospace;
      padding: 10px;
      border: 1px solid var(--puny);
      background: var(--bg);
      color: var(--text);
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 0.95rem;
      min-height: 250px;
      resize: vertical;
    }

    textarea:focus {
      outline: none;
      border-color: var(--accent);
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .info-box {
      padding: 1rem;
      background-color: var(--highlight);
      border-left: 3px solid var(--accent);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .status {
      padding: 0.75rem 1rem;
      border-radius: 4px;
      margin: 0.5rem 0;
      display: none;
      font-size: 0.9rem;
    }

    .status.show {
      display: block;
    }

    .status.success {
      background-color: rgba(16, 185, 129, 0.1);
      border-left: 3px solid var(--accent);
      color: var(--accent);
    }

    .status.error {
      background-color: rgba(239, 68, 68, 0.1);
      border-left: 3px solid #ef4444;
      color: #ef4444;
    }

    @media (max-width: 600px) {
      .button-group {
        flex-direction: column;
      }

      button {
        width: 100%;
      }

      .two-col {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <nav>
    <div class="left">
      <a href="index.html">home</a> | <a href="extra.html">extra</a> |
      <a href="credits.html">credits</a> |
      <a href="changelog.html">logs</a>
    </div>
    <div class="right">
      <button id="theme-toggle">[theme]</button> |
      <a href="https://eliana.lol">site</a>
    </div>
  </nav>

  <main>
    <h1>Folder Map Generator</h1>
    <p class="puny">Convert indented folder structures into ASCII tree format for sharing with LLMs or documentation.</p>

    <div class="container">

      <!-- INPUT/OUTPUT -->
      <div class="two-col">
        <div class="input-group">
          <span class="input-label">Indented Folder Structure</span>
          <textarea id="folderInput" placeholder="src
  components
    Header.jsx
    Footer.jsx
  utils
    helpers.js
  styles
    main.css
public
  index.html
package.json">src
  components
    Header.jsx
    Footer.jsx
  utils
    helpers.js
  styles
    main.css
public
  index.html
package.json</textarea>
        </div>
        <div class="input-group">
          <span class="input-label">ASCII Tree Output</span>
          <textarea id="treeOutput" readonly></textarea>
        </div>
      </div>

      <!-- BUTTONS -->
      <div class="button-group">
        <button class="primary" id="generateBtn">Generate Tree</button>
        <button id="copyBtn">Copy Tree</button>
        <button id="downloadBtn">Download</button>
      </div>

      <div class="info-box">
        <strong>How to use:</strong> Paste your folder structure with indentation (spaces show nesting). The tool converts it to ASCII tree format perfect for sharing with LLMs or documentation. Use consistent spacing (2-4 spaces per level).
      </div>

      <div class="status" id="status"></div>
    </div>
  </main>

  <footer style="margin-top: 4rem; text-align: center" class="puny">
    &copy; 2026 eliana.lol &bull; <a href="credits.html">credits</a>
  </footer>

  <!-- Theme Toggle Script -->
  <script>
    const html = document.documentElement;
    const toggle = document.getElementById('theme-toggle');
    const saved =
      localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

    html.setAttribute('data-theme', saved);
    if (toggle) toggle.innerText = saved === 'dark' ? '[light]' : '[dark]';

    if (toggle) {
      toggle.onclick = () => {
        const now = html.getAttribute('data-theme');
        const next = now === 'dark' ? 'light' : 'dark';
        html.setAttribute('data-theme', next);
        localStorage.setItem('theme', next);
        toggle.innerText = next === 'dark' ? '[light]' : '[dark]';
      };
    }
  </script>

  <!-- Folder Map Generator Logic -->
  <script>
    function showStatus(message, type) {
      const status = document.getElementById('status');
      status.textContent = message;
      status.className = 'status show ' + (type || 'success');
      setTimeout(() => status.classList.remove('show'), 3000);
    }

    function generateTree() {
      const input = document.getElementById('folderInput').value;
      if (!input.trim()) {
        showStatus('Enter a folder structure', 'error');
        return;
      }

      const lines = input.split('\n');
      let tree = '';

      for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        const leadingSpaces = line.search(/\S/);

        if (leadingSpaces === -1) {
          continue;
        }

        const depth = Math.floor(leadingSpaces / 2);
        const name = line.trim();

        // Determine if this is the last item at this level
        let isLast = true;
        for (let j = i + 1; j < lines.length; j++) {
          const nextLine = lines[j];
          const nextLeadingSpaces = nextLine.search(/\S/);
          if (nextLeadingSpaces === -1) continue;

          const nextDepth = Math.floor(nextLeadingSpaces / 2);
          if (nextDepth === depth) {
            isLast = false;
            break;
          } else if (nextDepth < depth) {
            break;
          }
        }

        // Build prefix
        let prefix = '';
        for (let j = 0; j < depth; j++) {
          prefix += '│   ';
        }

        if (depth > 0) {
          prefix = prefix.slice(0, -4);
          prefix += isLast ? '└── ' : '├── ';
        }

        tree += prefix + name + '\n';
      }

      document.getElementById('treeOutput').value = tree;
      showStatus('Tree generated', 'success');
    }

    function copyTree() {
      const output = document.getElementById('treeOutput').value;
      if (!output) {
        showStatus('Generate tree first', 'error');
        return;
      }
      navigator.clipboard.writeText(output);
      showStatus('Copied to clipboard', 'success');
    }

    function downloadTree() {
      const output = document.getElementById('treeOutput').value;
      if (!output) {
        showStatus('Generate tree first', 'error');
        return;
      }
      const blob = new Blob([output], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'folder-tree.txt';
      a.click();
      URL.revokeObjectURL(url);
      showStatus('Downloaded folder-tree.txt', 'success');
    }

    // Event listeners
    document.getElementById('generateBtn').addEventListener('click', generateTree);
    document.getElementById('copyBtn').addEventListener('click', copyTree);
    document.getElementById('downloadBtn').addEventListener('click', downloadTree);
  </script>
</body>
</html>