UI extension, standalone scrum report

README.md

@@ -34,6 +34,18 @@
 - Ensure the Scrum Helper settings are applied (follow step 6 above)
 - The extension will prefill scrum content for you to edit
 
+### New Features
+1. **Standalone Popup Interface**
+   - Generate reports directly from the extension popup
+   - Live preview of the report before sending
+   - Rich text formatting with clickable links
+   - Copy report to clipboard with proper formatting
+
+### Usage Standalone
+- Click on `GENERATE` button to generate the scrum preview.
+- Edit it in the window.
+- Copy the rich HTML using the `COPY` button.
+
 ## Setting up the code locally
 
 ```
@@ -48,6 +60,8 @@ $ npm install
 
 ![POPUP](/docs/images/popup.png)
 
+![STANDALONE](docs/images/standalone.png)
+
 ## Using Scrum Helper with Your Own GitHub Organization
 
 Scrum Helper is not limited to the [FOSSASIA](https://github.com/fossasia) organization. You can easily configure it to fetch and generate SCRUM reports for your own GitHub organization or repositories.
@@ -82,7 +96,6 @@ Scrum Helper is not limited to the [FOSSASIA](https://github.com/fossasia) organ
 4. **Get Customized SCRUM Reports**
    - The reports will now be generated using contributions from your organization.
 
----
 
 ## About contributing
 

src/index.css

@@ -64,3 +64,25 @@ li {
 	transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
 }
 
+#scrumReport {
+    border: 1px solid #ccc;
+    padding: 10px;
+    min-height: 200px;
+    max-height: 400px;
+    overflow-y: auto;
+    background-color: white;
+}
+
+#scrumReport:focus {
+    outline: none;
+    border-color: #26a69a;
+}
+
+#scrumReport a {
+    color: #26a69a;
+    text-decoration: none;
+}
+
+#scrumReport a:hover {
+    text-decoration: underline;
+}

src/popup.html

@@ -73,6 +73,22 @@ <h6 class="center">
 				<input placeholder="Reason" id="userReason" type="text">
 				<label for="userReason">What is stopping you from doing your work?</label>
 			</div>
+			<div>
+				<h6>Scrum Report</h3>
+					<div id="scrumReport" contenteditable="true" 
+					class="materialize-textarea border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" 
+					style="min-height: 200px; overflow-y: auto; white-space: pre-wrap;">
+			   </div>
+			</div>
+			<div style="display: flex; justify-content: space-between; gap: 10px;">
+				<button id="generateReport" class="btn waves-effect waves-light">
+					<i class="fa fa-refresh"></i> Generate Report
+				</button>
+				<button id="copyReport" class="btn waves-effect waves-light">
+					<i class="fa fa-copy"></i> Copy Report
+				</button>
+
+			</div>
 			<div class="col s12">
 
 				<h5>Note:</h5>
@@ -96,6 +112,8 @@ <h6>
 	</div>
 	<script src="scripts/jquery-3.2.1.min.js"></script>
 	<script type="text/javascript" type="text/javascript" src="materialize/js/materialize.min.js"></script>
+	<script src="scripts/scrumHelper.js"></script>
 	<script src="scripts/main.js"></script>
+	<script src="scripts/popup.js"></script>
 </body>
 </html>

src/scripts/popup.js

@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const generateBtn = document.getElementById('generateReport');
+    const copyBtn = document.getElementById('copyReport');
+
+    generateBtn.addEventListener('click', function() {
+        this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Generating...';
+        this.disabled = true;
+
+        window.generateScrumReport();
+    });
+
+    copyBtn.addEventListener('click', function() {
+        const scrumReport = document.getElementById('scrumReport');
+
+        // Create container for HTML content
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = scrumReport.innerHTML;
+        document.body.appendChild(tempDiv);
+        tempDiv.style.position = 'absolute';
+        tempDiv.style.left = '-9999px';
+
+        // Select the content
+        const range = document.createRange();
+        range.selectNode(tempDiv);
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        try {
+            // Copy HTML content
+            const success = document.execCommand('copy');
+            if (!success) {
+                throw new Error('Copy command failed');
+            }
+            Materialize.toast('Report copied with formatting!', 3000, 'green');
+        } catch (err) {
+            console.error('Failed to copy:', err);
+            Materialize.toast('Failed to copy report', 3000, 'red');
+        } finally {
+            // Cleanup
+            selection.removeAllRanges();
+            document.body.removeChild(tempDiv);
+        }
+    });
+});