initial UI without functions

Elabar · Sep 12, 2019 · 749631f · 749631f
1 parent 729218a
commit 749631f
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 0 deletions.
diff --git a/manifest.json b/manifest.json
@@ -8,6 +8,11 @@
     },
     "icons": { 
        "128": "noti.png" },
+    "browser_action": {
+        "default_icon": "noti.png",
+        "default_title": "Moli Chat Listener",
+        "default_popup": "popup.html"
+    },
     "permissions" : [
         "notifications",
         "tabs"

diff --git a/popup.html b/popup.html
@@ -0,0 +1,79 @@
+<html>
+    <head>
+        <style>
+            .switch {
+                position: relative;
+                display: inline-block;
+                width: 30px;
+                height: 17px;
+            }
+
+            .switch input { 
+                opacity: 0;
+                width: 0;
+                height: 0;
+            }
+
+            .slider {
+                position: absolute;
+                cursor: pointer;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: #ccc;
+                -webkit-transition: .4s;
+                transition: .4s;
+            }
+
+            .slider:before {
+                position: absolute;
+                content: "";
+                height: 13px;
+                width: 13px;
+                left: 2px;
+                bottom: 2px;
+                background-color: white;
+                -webkit-transition: .4s;
+                transition: .4s;
+            }
+
+            input:checked + .slider {
+                background-color: #2196F3;
+            }
+
+            input:focus + .slider {
+                box-shadow: 0 0 1px #2196F3;
+            }
+
+            input:checked + .slider:before {
+                -webkit-transform: translateX(13px);
+                -ms-transform: translateX(13px);
+                transform: translateX(13px);
+            }
+
+            /* Rounded sliders */
+            .slider.round {
+                border-radius: 34px;
+            }
+
+            .slider.round:before {
+                border-radius: 50%;
+            }
+
+            body {
+                min-width:210px;
+            }
+        </style>
+    </head>
+<body>
+    <h1>Moli Chat Listener</h1>
+    <div>
+        <p stlye="margin:0" style="float: left;">Notification </p>
+        <label class="switch">
+            <input type="checkbox">
+            <span class="slider round"></span>
+        </label>
+    </div>
+</body>
+</html>