169 lines
4.9 KiB
HTML
169 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Jira Feedback</title>
|
|
<link rel="stylesheet" href="styles/popup.css">
|
|
<link rel="stylesheet" href="styles/recording-dialog.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="Review">Review</option>
|
|
<option value="Task">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>
|