<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jira Feedback</title> <link rel="stylesheet" href="styles/popup.css"> <style> .notification { position: fixed; top: 10px; left: 10px; right: 10px; padding: 10px; border-radius: 4px; display: none; z-index: 1000; } .notification.error { background-color: #FFEBE6; color: #DE350B; border: 1px solid #FFBDAD; } .notification.success { background-color: #E3FCEF; color: #006644; border: 1px solid #ABF5D1; } .hidden { display: none !important; } #screenshot-editor { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 1000; display: none; } #screenshot-editor.active { display: flex; flex-direction: column; align-items: center; justify-content: center; } #editor-toolbar { background: #fff; padding: 10px; border-radius: 4px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; } #editor-canvas { background: #fff; max-width: 90%; max-height: 70vh; border: 2px solid #ccc; } .tool-button { padding: 5px 10px; border: none; background: #f4f5f7; border-radius: 3px; cursor: pointer; } .tool-button:hover { background: #ebecf0; } .editor-actions { margin-top: 10px; display: flex; gap: 10px; } </style> </head> <body> <div id="app"> <!-- Settings Panel --> <div id="settings-panel"> <h2>Jira Settings</h2> <div class="form-group"> <label for="jira-domain">Jira Domain</label> <input type="text" id="jira-domain" placeholder="your-domain.atlassian.net"> </div> <div class="form-group"> <label for="jira-email">Email</label> <input type="email" id="jira-email" placeholder="your.email@company.com"> </div> <div class="form-group"> <label for="jira-token">API Token</label> <input type="password" id="jira-token" placeholder="Your Jira API token"> <small>Get your API token from <a href="https://id.atlassian.com/manage/api-tokens" target="_blank">Atlassian Account Settings</a></small> </div> <div class="form-group"> <label for="jira-project">Project Key</label> <input type="text" id="jira-project" placeholder="e.g., PROJ"> <small>This is the prefix of your Jira issues, like "PROJ" in "PROJ-123"</small> </div> <button id="save-settings" class="primary-button">Save Settings</button> </div> <!-- Feedback Form --> <div id="feedback-form" class="panel hidden"> <div class="form-group"> <label for="feedback-type">Type</label> <select id="feedback-type"> <option value="Bug">Bug</option> <option value="Feature">Story</option> <option value="Improvement">Task</option> </select> </div> <div class="form-group"> <label for="feedback-title">Title</label> <input type="text" id="feedback-title" placeholder="Brief description"> </div> <div class="form-group"> <label for="feedback-description">Description</label> <textarea id="feedback-description" placeholder="Detailed description"></textarea> </div> <div class="form-group"> <label>Attachments</label> <div class="attachment-buttons"> <button id="screenshot-btn" class="secondary-button"> <img src="assets/icons/screenshot.svg" alt="Screenshot"> Screenshot </button> <button id="record-btn" class="secondary-button"> <img src="assets/icons/record.svg" alt="Record"> Record </button> </div> <div id="attachment-preview"></div> </div> <div class="form-actions"> <button id="submit-feedback" class="primary-button">Submit</button> <button id="settings-btn" class="text-button">Settings</button> </div> </div> <!-- Screenshot Editor --> <div id="screenshot-editor"> <div id="editor-toolbar"></div> <canvas id="editor-canvas"></canvas> <div class="editor-actions"> <button id="save-screenshot" class="primary-button">Save</button> <button id="cancel-screenshot" class="secondary-button">Cancel</button> </div> </div> <!-- Loading Overlay --> <div id="loading-overlay" class="hidden"> <div class="spinner"></div> <div class="message">Processing...</div> </div> <!-- Notification --> <div id="notification" class="notification hidden"> <span class="message"></span> <button class="close-btn">×</button> </div> </div> <script type="module" src="popup.js"></script> </body> </html>