PinMagic Pinterest Keyword Tool
Please redesign my tool <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Pinterest Keyword Tool</title> <script src="jquery 3.1.1.min.js"></script> <script src="keyword.js"></script> <style> body, html { margin: 0; padding: 0; font family: Arial, sans serif; height: 100%; display: flex; background color: #f0f2f5; } .sidebar { width: 300px; height: 100vh; background color: #3b3b3b; box shadow: 2px 0 5px rgba(0, 0, 0, 0.1); padding: 20px; box sizing: border box; display: flex; flex direction: column; position: fixed; left: 0; top: 0; overflow y: auto; } .main content { flex grow: 1; margin left: 300px; width: calc(100% 300px); height: 100vh; overflow y: auto; padding: 20px; box sizing: border box; } h1 { color: #e60023; margin bottom: 20px; } textarea { width: 100%; height: 150px; margin bottom: 15px; padding: 10px; border: 1px solid #ddd; border radius: 4px; resize: vertical; } button { background color: #e60023; color: white; border: none; padding: 10px 15px; border radius: 4px; cursor: pointer; font size: 16px; transition: background color 0.3s; margin bottom: 10px; } button:hover { background color: #ad081b; } #status, #stats { margin top: 15px; font size: 14px; color: #666; } table { width: 100%; border collapse: collapse; margin top: 20px; background color: white; box shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } th, td { text align: left; padding: 12px; border bottom: 1px solid #ddd; } th { background color: #f8f9fa; font weight: bold; color: #333; position: sticky; top: 0; z index: 10; } tr:hover { background color: #f5f5f5; } </style> </head> <body> <div class="sidebar"> <img src="/logo/logo.png" alt="Logo" style="width: 100%; margin bottom: 20px;"> <textarea id="seed" placeholder="Enter keywords, one per line"></textarea> <button id="control btn">Start</button> <button id="copy btn">Copy Keywords</button> <div id="status"></div> <div id="stats"></div> </div> <div class="main content"> <h1>PinMagic Pinterest Keyword Tool</h1> <table id="results"> <thead> <tr> <th>Keyword</th> <th>Source</th> </tr> </thead> <tbody></tbody> </table> </div> </body> </html>
