<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jira Feedback Extension Settings</title> <style> body { padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input[type="text"], input[type="password"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } button { background-color: #0052CC; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; } button:hover { background-color: #0747A6; } .notification { padding: 10px; margin: 10px 0; border-radius: 4px; display: none; } .success { background-color: #E3FCEF; color: #006644; border: 1px solid #ABF5D1; } .error { background-color: #FFEBE6; color: #DE350B; border: 1px solid #FFBDAD; } </style> </head> <body> <h2>Jira Settings</h2> <div id="notification" class="notification"></div> <form id="settings-form"> <div class="form-group"> <label for="jira-domain">Jira Domain</label> <input type="text" id="jira-domain" placeholder="your-domain.atlassian.net" required> <small>Example: your-company.atlassian.net</small> </div> <div class="form-group"> <label for="jira-email">Jira Email</label> <input type="text" id="jira-email" placeholder="your.email@company.com" required> </div> <div class="form-group"> <label for="jira-token">API Token</label> <input type="password" id="jira-token" required> <small>Create an API token from your <a href="https://id.atlassian.com/manage/api-tokens" target="_blank">Atlassian Account Settings</a></small> </div> <button type="submit">Save Settings</button> </form> <script src="options.js"></script> </body> </html>