From 3c050d006d310a30217e9eed8fcd20579f16c2a2 Mon Sep 17 00:00:00 2001
From: abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com>
Date: Tue, 31 Mar 2020 00:33:32 +0530
Subject: [PATCH] chore: add sample options page

---
 src/options.html      | 31 +++++++++++++++++++++++--------
 src/popup.html        |  1 +
 src/scripts/popup.js  |  4 ++++
 src/styles/popup.scss | 18 ++++++++++++++++--
 4 files changed, 44 insertions(+), 10 deletions(-)
diff --git a/src/options.html b/src/options.html
index a814d56..c4fc447 100644
--- a/src/options.html
+++ b/src/options.html
@@ -1,11 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Options</title>
-    <link rel="stylesheet" href="css/options.css" />
-  </head>
 
-  <body></body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Options</title>
+  <link rel="stylesheet" href="css/options.css" />
+</head>
+
+<body>
+  <form>
+    <p>
+      <label for="name">Name</label><br>
+      <input type="text" id="name" name="name" spellcheck="false" autocomplete="off" required />
+    </p>
+    <p>
+      <label>
+        <input type="checkbox" name="logging">
+        Show the features enabled on each page in the console
+      </label>
+    </p>
+  </form>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/popup.html b/src/popup.html
index 49de373..6075f1b 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -12,6 +12,7 @@
 
   <section id="popup">
     <h2>WEB-EXTENSION-STARTER</h2>
+    <button id="options__button">Options Page</button>
     <div class="links__holder">
       <ul>
         <li>
diff --git a/src/scripts/popup.js b/src/scripts/popup.js
index a37e97e..76067f5 100644
--- a/src/scripts/popup.js
+++ b/src/scripts/popup.js
@@ -27,4 +27,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     document.getElementById('donate__button').addEventListener('click', () => {
         return openWebPage('https://www.buymeacoffee.com/abhijithvijayan');
     });
+
+    document.getElementById('options__button').addEventListener('click', () => {
+        return openWebPage('options.html');
+    });
 });
diff --git a/src/styles/popup.scss b/src/styles/popup.scss
index 46c3d21..3538a3e 100644
--- a/src/styles/popup.scss
+++ b/src/styles/popup.scss
@@ -16,6 +16,20 @@ body {
     text-align: center;
   }
 
+  #options__button {
+    width: 50%;
+    background: green;
+    color: white;
+    font-weight: 500;
+    border-radius: 15px;
+    padding: 5px 10px;
+    justify-content: center;
+    margin: 20px auto;
+    cursor: pointer;
+    opacity: 0.8;
+    display: flex;
+  }
+
   .links__holder {
     ul {
       display: flex;
@@ -24,13 +38,13 @@ body {
 
       li {
         button {
-          border-radius: 8%;
+          border-radius: 25px;
           font-size: 20px;
           font-weight: 600;
+          padding: 10px 17px;
           background-color: rgba(0, 0, 255, 0.7);
           color: white;
           cursor: pointer;
-          padding: 8px 12px;
         }
       }
     }
