added leave a review button

redbackspider77 · redbackspider77 · commit 830fd834f68c · 2025-07-11T21:20:27.000+10:00
diff --git a/source/extension.html b/source/extension.html
@@ -6,11 +6,18 @@
     </head>
     <body>
         <h1>Emoji Copy Extension</h1>
-        <p>Toggle below:</p>
+
+        <!-- <p>Toggle below:</p> -->
         <label class="switch">
             <input id="toggle" type="checkbox">
             <span class="slider round"></span>
         </label>
-        <p>Report any issues <a target="_blank" href="https://github.com/redbackspider77/EmojiCopyExtension/issues/new">on the Github.</a></p>
+
+        <div id="review-block">
+            <p id="like" class="pulse">Like the extension?</p>
+            <a target="_blank" href="https://chromewebstore.google.com/detail/emoji-copy-extension/nhkpcjdklcgchjejlnfdpgpcgmailpik#:~:text=Leave%20a%20review%20below%20if%20you%20like%20the%20extension%2C%20your%20feedback%20is%20really%20appreciated%21"><button id="review">Reviews are appreciated! 😊</button></a>
+        </div>
+
+        <p id="issues">Report any issues <a target="_blank" href="https://github.com/redbackspider77/EmojiCopyExtension/issues/new">on the Github</a>.</p>
     </body>
 </html>
diff --git a/source/style.css b/source/style.css
@@ -4,23 +4,85 @@ body {
     font-family: Calibri;
     white-space: nowrap;
     text-align: center;
+    background: #f8f9fa;    
+    color: black;  
 }
 
-@media (prefers-color-scheme: light) {  
-  body {  
-     background: #f8f9fa;    
-     color: black;  
-  }
+.review-block {
+    margin-top: 12px;
+    margin-bottom: 20px;
+}
+
+#like {
+    margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 16px;
+    color: inherit;
+}
+
+#review {
+    background-color: #2196F3;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 15px;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.1s ease;
+    font-family: Calibri, sans-serif;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#review:hover {
+    background-color: #1976D2;
+    transform: scale(1.03);
+}
+
+.pulse {
+    animation: pulse 2.5s infinite;
+    font-weight: 500;
+    font-size: 16px;
+    margin-top: 24px;
+    letter-spacing: 0.2em;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.7;
+        transform: scale(1.03);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+#issues {
+    margin-top: 20px;
 }
 
 @media (prefers-color-scheme: dark) {  
-  body {  
-     background: #303134;    
-     color: white;
-  }
-  a {
-    color: #4f8cff;
-  }
+    body {  
+        background: #303134;    
+        color: white;
+    }
+    
+    a {
+        color: #4f8cff;
+    }
+
+    #review {
+        background-color: #4f8cff;
+        color: white;
+    }
+
+    #review:hover {
+        background-color: #377de6;
+    }
 }
 
 /* The switch - the box around the slider */
