HTMLify

hopper.html
Views: 78 | Author: amar
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lua Data Viewer</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: url('https://gifdb.com/images/high/8-bit-game-duck-hunt-lkkiouqryoybfc7w.gif') no-repeat center center fixed;
      background-size: cover;
      color: #e0e0e0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 800px;
      width: 100%;
    }
    .card {
      background: rgba(31, 31, 31, 0.85);
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }
    .card h2 {
      margin-top: 0;
      font-size: 1.2rem;
      color: #ffd700;
    }
    .field {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
    }
    .field span {
      flex-grow: 1;
      margin-left: 10px;
      word-break: break-all;
    }
    textarea {
      width: 100%;
      height: 120px;
      background: #2b2b2b;
      color: #e0e0e0;
      border: none;
      border-radius: 6px;
      padding: 10px;
      resize: vertical;
      font-family: monospace;
    }
    .buttons {
      text-align: right;
      margin-top: 10px;
    }
    button {
      margin-left: 10px;
      padding: 8px 14px;
      background: #3a3a3a;
      color: #f0f0f0;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }
    button:hover {
      background: #505050;
    }
  </style>
</head>
<body>
  <div class="container">

    <div class="card">
      <h2>Paste New Lua Data</h2>
      <textarea id="pasteArea" placeholder="Paste your Lua code here..."></textarea>
      <div class="buttons">
        <button onclick="pasteCode()">Enter</button>
        <button onclick="copyTextArea()">Copy</button>
      </div>
    </div>

    <div class="card">
      <h2>Extracted Fields</h2>
      <div class="field">
        <strong>Title:</strong>
        <span id="titleText">—</span>
        <button onclick="copyText('titleText')">Copy</button>
      </div>
      <div class="field">
        <strong>Name:</strong>
        <span id="nameText">—</span>
        <button onclick="copyText('nameText')">Copy</button>
      </div>
    </div>

  </div>

  <script>
    // Remove alert popups; silent copy
    function copyText(id) {
      const text = document.getElementById(id).innerText;
      if (!text || text.startsWith('—')) return;
      navigator.clipboard.writeText(text);
    }

    function copyTextArea() {
      const code = document.getElementById('pasteArea').value.trim();
      if (!code) return;
      navigator.clipboard.writeText(code);
    }

    function pasteCode() {
      const code = document.getElementById('pasteArea').value.trim();
      if (!code) return;
      const tMatch = code.match(/title\s*=\s*"([^"]+)"/);
      const nMatch = code.match(/name\s*=\s*"([^"]+)"/);
      document.getElementById('titleText').innerText = tMatch ? tMatch[1] : 'Not found';
      document.getElementById('nameText').innerText = nMatch ? nMatch[1] : 'Not found';
    }

    // Auto-extract on paste or input
    document.getElementById('pasteArea').addEventListener('input', pasteCode);
  </script>
</body>
</html>
HTMLify

Share this file:

Comments
