Merge pull request #44 from kairi003/release/v0.5.0

Release/v0.5.0
kairi003 · Aug 11, 2023 · 758bf68 · 758bf68
2 parents c42b082 + 4fa4f73
commit 758bf68
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 9 deletions.
diff --git a/src/donation.css b/src/donation.css
@@ -0,0 +1,52 @@
+/* summary styles */
+.donation details summary {
+  width: fit-content;
+  outline: none;
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.donation details summary:hover {
+  outline: none;
+  box-shadow: 0 0 5px rgba(0, 128, 255, 0.5);
+}
+
+/* donation description styles */
+.donation-description p {
+  margin-block-start: 0.5em;
+  margin-block-end: 0.5em;
+}
+
+/* payment button container styles */
+.donation .payment-buttons-container {
+  display: flex;
+  gap: 10px;
+  padding: 0;
+  list-style-type: none;
+  justify-content: center;
+  margin-top: 15px;
+  text-decoration: none;
+}
+
+/* payment button styles */
+.donation .payment-button {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  background-color: #aaedad;
+  color: #333;
+  text-decoration: none;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: filter 0.3s;
+}
+
+.donation .payment-button:hover {
+  filter: brightness(0.8);
+}
+
+.donation .payment-button img {
+  margin-right: 5px;
+  height: 20px;
+}
diff --git a/src/images/generic.svg b/src/images/generic.svg
diff --git a/src/images/paypal.svg b/src/images/paypal.svg
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Get cookies.txt LOCALLY",
   "description": "Get cookies.txt, NEVER send information outside with open-source",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "manifest_version": 3,
   "permissions": [
     "activeTab",

diff --git a/src/popup-options.css b/src/popup-options.css
@@ -0,0 +1,17 @@
+.option-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  gap: 1em;
+}
+
+.option {
+  display: flex;
+  align-items: stretch;
+  gap: 0.5em;
+}
+
+.netscape-table.nowrap {
+  white-space: nowrap;
+}
diff --git a/src/popup.css b/src/popup.css
@@ -1,7 +1,7 @@
 html {
   width: 500px;
   box-sizing: border-box;
-  font-family: sans-serif;
+  font-family: 'Arial', sans-serif;
 }
 
 body {

diff --git a/src/popup.html b/src/popup.html
@@ -2,9 +2,13 @@
 <html>
 
 <head>
+  <meta charset="utf-8">
   <link rel="stylesheet" href="popup.css">
+  <link rel="stylesheet" href="popup-options.css">
   <link rel="stylesheet" href="iconfont/material-icons.css">
+  <link rel="stylesheet" href="donation.css">
   <script src="popup.js" defer></script>
+  <script src="table-nowrap.js" defer></script>
 </head>
 
 <body>
@@ -34,16 +38,23 @@ <h1>
       </button>
     </div>
 
-    <div class="format">
-      <label for="format">Export Format:</label>
-      <select id="format" name="format">
-        <option value="netscape" selected>Netscape</option>
-        <option value="json">JSON</option>
-      </select>
+    <div id="optionsContainer" class="option-container">
+      <div class="format-option option">
+        <label for="format">Export Format:</label>
+        <select id="format" name="format">
+          <option value="netscape" selected>Netscape</option>
+          <option value="json">JSON</option>
+        </select>
+      </div>
+
+      <div class="nowrap-option option">
+        <label for="nowrapOption">Table Nowrap: </label>
+        <input type="checkbox" id="nowrapOption" name="nowrapOption" checked />
+      </div>
     </div>
 
     <div class="table-container">
-      <table class="netscape-table">
+      <table id="netscapeTable" class="netscape-table nowrap">
         <thead>
           <tr>
             <th>Domain</th>
@@ -58,6 +69,30 @@ <h1>
         <tbody></tbody>
       </table>
     </div>
+
+    <div class="donation">
+      <details>
+        <summary class>
+          Buy Developer a Coffee ☕
+        </summary>
+        <div class="donation-description">
+          <p>Got a $2,000 offer to buy this extension, but I'm never going to sell it to spammers!</p>
+          <p>By the way, your cup of coffee pleases me 😎</p>
+        </div>
+        <ul class="payment-buttons-container">
+          <li>
+            <a class="payment-button" href="https://www.buymeacoffee.com/kairi003" target="_blank">
+              <img src="images/generic.svg" alt="Credit Card"> Credit Card
+            </a>
+          </li>
+          <li>
+            <a class="payment-button" href="https://paypal.me/kairi003" target="_blank">
+              <img src="images/paypal.svg" alt="PayPal"> PayPal
+            </a>
+          </li>
+        </ul>
+      </details>
+    </div>
   </main>
 </body>
 

diff --git a/src/table-nowrap.js b/src/table-nowrap.js
@@ -0,0 +1,3 @@
+document.querySelector('#nowrapOption').addEventListener('change', e => {
+  document.querySelector('#netscapeTable').classList.toggle('nowrap');
+});