updated version 1.1

JaswanthRemiel · Oct 3, 2024 · 5675060 · 5675060
1 parent f024cb5
commit 5675060
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 122 deletions.
diff --git a/popup.html b/popup.html
@@ -7,135 +7,28 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <link href="https://fonts.googleapis.com/css?family=Lobster:400|Raleway:300,400,500&display=swap" rel="stylesheet">
-
+    <link rel="stylesheet" href="style.css">
 </head>
-<style>
-    .popup {
-        min-width: 344px;
-        min-height: 188px;
-        background: #FFFFFF;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        border-radius: 10px;
-        padding: 1rem;
-    }
-
-    h1 {
-        font-size: 1.5rem;
-        font-family: "Lobster";
-        text-align: center;
-
-    }
-
-    .red {
-        color: #fd0000;
-    }
-
-    .black {
-        color: #000000;
-    }
-
-    p {
-        font-family: "Raleway", sans-serif;
-        font-size: 0.75rem;
-    }
-
-    .button {
-        background-color: #01ff16;
-        position: relative;
-        height: 2rem;
-        width: 4rem;
-        border-radius: 25px;
-        transition: 1s;
-        font-family: "Raleway", sans-serif;
-    }
-
-    .half {
-        position: absolute;
-        width: 50%;
-        top: 50%;
-        transform: translateY(-50%);
-        pointer-events: none;
-    }
-
-    .circle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 32px;
-        width: 32px;
-        border-radius: 50%;
-        background-color: rgb(255, 213, 0);
-        pointer-events: none;
-        transition: 1s;
-
-    }
-
-    @keyframes transformToBlue {
-        0% {
-            background-color: #FDFCA3;
-        }
-
-        100% {
-            background-color: #8ABFF0;
-        }
-    }
-
-    @keyframes transformToYellow {
-        0% {
-            background-color: #8ABFF0;
-        }
-
-        100% {
-            background-color: #FDFCA3;
-        }
-    }
-
-    @keyframes moveCircleRight {
-        0% {
-            left: 0;
-            transform: translateX(0);
-            background-color: rgb(255, 213, 0);
-        }
-
-        100% {
-            left: 100%;
-            transform: translateX(-100%);
-            background-color: #588BE4;
-        }
-    }
-
-    @keyframes moveCircleLeft {
-        0% {
-            left: 100%;
-            transform: translateX(-100%);
-            background-color: #588BE4;
-        }
-
-        100% {
-            left: 0;
-            transform: translateX(0);
-            background-color: rgb(255, 213, 0);
-        }
-    }
-</style>
-
 <body>
     <div class="popup">
         <h1> <span class="black">Bat</span><span class="red">mode</span></h1>
-        <p>
-            "Batmode" is a browser extension that enables a dark mode theme on all websites.
-        </p>
-
+        <p align="center">Toggle the button to go into Batmode</p>
+        <center>
         <div class="button">
-            <div class="half" style="left: 5px;">On</div>
-            <div class="half" style="right: 5px; text-align: right;">Off</div>
+            <div class="half" style="left: 6px;">On</div>
+            <div class="half" style="right: 6px; text-align: right;">Off</div>
             <div class="circle"></div>
         </div>
+        </center>
+        <br>
+        <center>
+            <a href="https://github.com/jaswanthremiel/batmode" target="_blank">
+                <button class="button1" role="button">Star this</button>
+            </a>
+        </center>
     </div>
-
-    <script src="./popup.js">
-    </script>
-
+    <script src="./popup.js"></script>
 </body>
 
+
 </html>
diff --git a/popup.js b/popup.js
@@ -30,4 +30,7 @@ if (document.querySelector(".popup")) {
         }
     })
 
-} 
+} 
+function openLink() {
+    window.open("https://github.com/jaswanthremiel/batmode", "_blank"); // Opens in a new tab
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,131 @@
+/* Apply Apple-like fonts globally */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.popup {
+    min-width: 344px;
+    min-height: 188px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    padding: 1rem;
+}
+
+h1 {
+    font-size: 1.5rem;
+    text-align: center;
+}
+
+.button1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px 14px;
+  font-family: inherit;
+  border-radius: 6px;
+  border: none;
+  color: #fff;
+  background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
+  background-origin: border-box;
+  box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: manipulation;
+}
+
+.button1:focus {
+  box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
+  outline: 0;
+}
+
+.red {
+    color: #fd0000;
+}
+
+.black {
+    color: #000000;
+}
+
+p {
+    font-size: 0.75rem;
+    font-family: inherit;
+}
+
+.button {
+    background-color: #01ff16;
+    position: relative;
+    height: 2rem;
+    width: 4rem;
+    border-radius: 25px;
+    transition: 1s;
+}
+
+.half {
+    position: absolute;
+    width: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.circle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    background-color: rgb(255, 213, 0);
+    pointer-events: none;
+    transition: 1s;
+}
+
+a {
+    text-decoration: none;
+}
+
+/* Keyframe Animations */
+@keyframes transformToBlue {
+    0% {
+        background-color: #FDFCA3;
+    }
+    100% {
+        background-color: #8ABFF0;
+    }
+}
+
+@keyframes transformToYellow {
+    0% {
+        background-color: #8ABFF0;
+    }
+    100% {
+        background-color: #FDFCA3;
+    }
+}
+
+@keyframes moveCircleRight {
+    0% {
+        left: 0;
+        transform: translateX(0);
+        background-color: rgb(255, 213, 0);
+    }
+    100% {
+        left: 100%;
+        transform: translateX(-100%);
+        background-color: #588BE4;
+    }
+}
+
+@keyframes moveCircleLeft {
+    0% {
+        left: 100%;
+        transform: translateX(-100%);
+        background-color: #588BE4;
+    }
+    100% {
+        left: 0;
+        transform: translateX(0);
+        background-color: rgb(255, 213, 0);
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,4 +30,7 @@ if (document.querySelector(".popup")) { @@
             }
         })
-    }
+    }
+    function openLink() {
+        window.open("https://github.com/jaswanthremiel/batmode", "_blank"); // Opens in a new tab
+    }