add popup (#13)

* add popup

* remove

comment out icon

manifest.json

@@ -20,5 +20,8 @@
       "32": "assets/icon.png",
       "48": "assets/icon.png",
       "128": "assets/icon.png"
+    },
+    "action": {
+      "default_popup": "popup.html"
     }
 }

popup.css

@@ -0,0 +1,65 @@
+body {
+    margin: 0px;
+}
+
+.container {
+    width: 280px;
+    background: rgb(122,55,55);
+    background: linear-gradient(0deg, rgba(122,55,55,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
+    height: 300px;
+}
+
+.Sortby {
+    position: absolute;
+    border-radius: 8px;
+    background-color: #2b2b2b;
+    text-decoration: none;
+    font-size: 17px;
+    left: 30%;
+    top:7%;
+    padding: 5px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    color: white; 
+    text-align: center;
+}
+
+.returnsort{
+    position: absolute;
+    text-decoration: none;
+    font-size: 30px;
+    top: 20%;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 900;
+    color: white; 
+    text-align: center;
+}
+
+.github {
+    position: absolute;
+    border-radius: 4px;
+    background-color: #2b2b2b;
+    text-decoration: none;
+    font-size: 17px;
+    left: 33%;
+    top:50%;
+    padding: 5px 16px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    color: white; 
+    text-align: center;
+    transition: 0.5s ease-in-out;
+}
+
+.github:hover{
+    background-color: red;
+}
+
+.version {
+    position: absolute;
+    color: antiquewhite;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    left: 42%;
+    top: 63%;
+}

popup.html

@@ -0,0 +1,15 @@
+
+<link href="popup.css" rel="stylesheet" type="text/css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+<div class="container">
+    <!--<div class="Sortby">Sort by: Oldest</div>-->
+
+    <div class="returnsort">Return YouTube Sort by Oldest</div>
+    <a class="github" href="https://github.com/Elements6007/ReturnYoutubeSort/" target="_blank">GitHub</a>
+    <div class="version">v1.2.0</div>
+
+</div>
+</div>