Pop-up and Options page

delete.js

@@ -1,3 +1,4 @@
+
 {
   const fullUrl = window.location.href;
   const url = fullUrl.split("?")[0];
@@ -11,4 +12,4 @@
       });
     }
   });
-}
+}

options.css

@@ -363,4 +363,4 @@ h1 {
     opacity: 1;
     transform: scale(1);
   }
-}
+}

options.html

@@ -18,4 +18,4 @@ <h1 id="saved-scroll-heading">
     </div>
     <script src="options.js"></script>
   </body>
-</html>
+</html>

options.js

@@ -147,4 +147,4 @@
       deleteAllBtn.addEventListener("click", deleteAllScrollElement, false);
     }
   });
-}
+}

popup.css

@@ -1,6 +1,36 @@
-@font-face {
-  font-family: "Roboto";
-  src: url("Roboto/Roboto-Bold.ttf") format("truetype");
+* {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'Roboto', Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    transition: 0.3s ease-out;
+}
+body {
+    margin: 0;
+    width: 15rem
+}
+#root {
+    padding: 0 5px
+}
+a, button {
+    text-decoration: none
+}
+a, a:visited {
+    font-size: .8rem;
+    color: #8bbdd6
+}
+.btn {
+    position: relative;
+    display: block;
+    padding: 0.5rem;
+    font-size: 1rem;
+    overflow: hidden;
+    outline: none;
+    border-radius: 2px;
+    border: 2px solid rgba(0,0,0,0.3);
+    background-color: #2ecc71;
+    color: #f1f1f1;
+    cursor: pointer;
+    letter-spacing: .6px;
+    width: 100%;
+    margin: 5px 0px;
 }
 
 body {
@@ -14,52 +44,64 @@ body {
   padding: 5px;
   height: 41px;
   border-radius: 6px;
-  font-size: 20px;
+  font-size: 1.1rem;
   overflow: hidden;
-  font-family: "Roboto", sans-serif;
   border-width: 0;
   outline: none;
   margin-bottom: 0.4em;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
   background-color: #2ecc71;
   color: #ecf0f1;
   cursor: pointer;
-
-  transition: background-color 0.3s;
+  transition: 0.3s ease-out;
+    filter: brightness(0.9)
 }
 
-.btn:hover,
+.btn:hover {
+    filter: grayscale(30%);
+}
 .btn:focus {
-  background-color: #27ae60;
+    box-shadow: 0px 0px 0px 3px rgba(46, 204, 113, 0.4)
 }
 
 .btn > * {
-  position: relative;
+    position: relative;
 }
 
 .btn span {
-  display: block;
-  padding: 12px 24px;
+    display: block;
+    padding: 12px 24px;
+}
+.btn:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0;
+    padding-top: 0;
+    border-radius: 100%;
+    background-color: rgba(236, 240, 241, 0.5);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
 }
-
 .btn:active:before {
-  width: 120%;
-  padding-top: 120%;
-
-  transition: width 0.2s ease-out, padding-top 0.2s ease-out;
+    width: 120%;
+    padding-top: 120%;
+    transition: width 0.2s ease-out, padding-top 0.2s ease-out;
 }
 
 #message {
-  margin: 3.2em 0em 1em 0.5em;
-  font-family: "Roboto", sans-serif;
+    margin: auto;
   font-style: normal;
   font-weight: bold;
-  padding-left: 0.3em;
-  padding-right: 0.3em;
-  font-size: 16px;
-  line-height: 21px;
+    padding: 1rem;
+  font-size: 1.2rem;
   align-items: center;
-  color: white;
+  color: rgba(255,255,255,0.7);
+    font-family: 'Quicksand'
 }
 
 .options {
@@ -82,33 +124,85 @@ body {
   align-items: center;
   color: #ffffff;
 }
+.options img {
+    width: 1.6rem;
+    height: auto;
+    filter: brightness(0.7)
+}
+.options img:hover {
+    filter: brightness(1)
+}
 /* Styles, not important */
 *,
 *:before,
 *:after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 h2 {
-  font-weight: normal;
+    font-weight: normal;
 }
 
 .btn.orange {
-  background-color: #e67e22;
+    background-color: #e67e22;
 }
 
-.btn.orange:hover,
 .btn.orange:focus {
-  background-color: #d35400;
+    box-shadow: 0px 0px 0px 3px rgba(230, 126, 34, 0.6)
 }
 
 .btn.red {
-  background-color: #e74c3c;
+    background-color: #e74c3c;
 }
 
-.btn.red:hover,
 .btn.red:focus {
-  background-color: #c0392b;
+    box-shadow: 0px 0px 0px 3px rgba(231, 76, 60, 0.6)
+}
+
+/* Recents */
+#contain {
+    overflow: auto;
+    width: 100%;
+    height: 200px;
+    transition: .5s ease-out;
+    -webkit-transition: .5s ease-out;
+    text-align: center
+}
+.hide {
+    height: 0 !important;
+    overflow: hidden
+}
+#saved-urls {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+    text-align: left
+}
+
+#saved-urls div a, #saved-urls + a {
+  padding: 10px;
+  margin-top: 10px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  display: flow-root;
+}
+#saved-urls + a {
+    border: 0;
+}
+.opt {
+    text-align: center;
+    background-color: #666
+}
+.opt:hover {
+    background-color: #555
+}
+.opt:focus {
+    box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.2)
+}
+.links:hover {
+    background-color: rgba(255,255,255,0.7);
+    border-color: rgba(0,0,0,0.5) !important;
+    color: #006699 !important
 }
 
 #tip {

popup.html

@@ -1,10 +1,31 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <link href="popup.css" rel="stylesheet" />
-  </head>
+    <head>
+        <meta charset="UTF-8" />
+        <link href="popup.css" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+    </head>
+    <body>
+        <div class="controls">
+            <div id="activeContol"></div>
+            <div class="options">
+                <a target="_blank" href="options.html"><img src="./images/settings.svg" /></a>
+            </div>
+        </div>
 
+<<<<<<< HEAD
+        <div class="main">
+            <p id="message"></p>
+            <div id="root"></div>
+        </div>
+        <button class="btn opt" id="optbtn">Recent Scrrolls</button>
+        <div class="hide" id="contain">
+            <div id="saved-urls"></div>
+            <a class="links" href="options.html" target="_blank">More</a>
+        </div>
+        <script src="popup.js"></script>
+    </body>
+=======
   <body>
     <div class="controls">
       <div id="activeContol"></div>
@@ -22,4 +43,5 @@
     <script src="popup.js" type="module"></script>
     <div id="tip"></div>
   </body>
+>>>>>>> devfolioco/master
 </html>

popup.js

@@ -37,15 +37,9 @@ chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
         "activeContol"
       ).innerHTML = `<img src="./images/icon-32.png" />`;
       root.innerHTML = `
-      <div style="margin-top:25px">
-      <div style="margin-bottom:10px;display:flex;justify-content:center;width:100%;">
-      <button id="getScroll" style="width:100%;" class="btn">Fetch Scroll</button>
-      </div>
-      <div style="display:flex; width:285 px; margin-top:-5px">
-      <button class="btn orange" style="width:100%;margin-right:10px" id="saveScroll">Update</button>
-      <button class="btn red" style="width:100%;" id="deleteScroll">Delete</button>
-      </div>
-      <div>
+      <button class="btn" id="getScroll">Scrroll to </button>
+      <button class="btn orange" id="saveScroll">Update</button>
+      <button class="btn red" id="deleteScroll">Delete</button>
       `;
       let deleteScroll = document.getElementById("deleteScroll");
 
@@ -61,11 +55,10 @@ chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
         window.close();
       };
     } else {
+      root.innerHTML = `<button class="btn" id="saveScroll">Save</button>`;
       document.getElementById("message").innerHTML =
         "In a hurry! Save the scrroll and read this page at your own pace by clicking the button below👇";
-      document.getElementById(
-        "activeContol"
-      ).innerHTML = `<img src="./images/icon-32-inactive.png" />`;
+      document.getElementById("activeContol").innerHTML = `<img src="./images/icon-32-inactive.png" />`;
       root.innerHTML = ` <button style="width:100px; " class="btn" id="saveScroll">Save</button>`;
     }
     let saveScroll = document.getElementById("saveScroll");
@@ -76,3 +69,35 @@ chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
     };
   });
 });
+
+// Recents
+
+{
+    let list = document.getElementById("saved-urls");
+    var urls = "";
+    let i = 0;
+    var sorted = new Array;
+    console.log();
+    chrome.storage.local.get("scroll-mark", function(result) {
+        urls = result["scroll-mark"];
+        for (var url in urls) {
+            i++;
+            let title = urls[url].title || url;
+            var div = document.createElement("div");
+            div.innerHTML = "<a href=" + url + " target='_blank' class='links' title="+url+">" + title.substring(0,20) + "..." + "</a>";
+            sorted.push(div);
+        }
+        sorted.reverse();
+        for (i=0;i<5;i++) {
+            list.appendChild(sorted[i]);
+        }
+    });
+
+    // Slider
+
+    var optbtn = document.getElementById("optbtn");
+    var container = document.getElementById("contain");
+    optbtn.onclick = function() {
+        container.classList.toggle("hide");
+    };
+}

save.js

@@ -15,4 +15,4 @@
       chrome.runtime.sendMessage("setActive");
     });
   });
-}
+}