Merge pull request #17 from dnorhoj/newpopup

Newpopup
dnorhoj · Nov 29, 2021 · b10adfd · b10adfd
2 parents 595f9c6 + 2814193
commit b10adfd
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 64 deletions.
diff --git a/AntiRickRoll/popup/assets/img/icon48.png b/AntiRickRoll/popup/assets/img/icon48.png
diff --git a/AntiRickRoll/popup/popup.css b/AntiRickRoll/popup/popup.css
diff --git a/AntiRickRoll/popup/popup.html b/AntiRickRoll/popup/popup.html
@@ -1,21 +1,43 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
 <head>
-	<meta charset="utf-8">
-	<link rel="stylesheet" href="popup.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>AntiRickRoll</title>
 </head>
-<body>
-	<div class="brand">
-		<img src="/icons/icon48.png" alt="Logo">&nbsp; AntiRickRoll
-	</div>
-
-	<div class="total">
-		<span>RickRolls blocked: <b id="total"></b></span>
-		<br><br>
-	</div>
 
-	<button id="toggler"></button>
-
-	<script src="popup.js"></script>
+<body>
+    <div class="container">
+        <div class="header">
+            <img draggable="false" src="assets/img/icon48.png">
+            <span>(BETA)</span>
+        </div>
+        <div class="content home">
+            <div class="block">
+                <div class="block-header">
+                    <span>TOGGLES</span>
+                </div>
+                <div class="block-content">
+                    <div class="setting">
+                        <span>Enabled</span>
+                        <input type="checkbox" id="enableToggle" class="toggle">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <nav class="nav">
+            <a href="popup.html" class="selected"><i class="bi bi-house-door-fill"></i><span>Home</span></a>
+            <!--
+            <a><i class="bi bi-graph-up"></i><span>Stats</span></a>
+            <a><i class="bi bi-list-ul"></i><span>Links</span></a>
+            <a><i class="bi bi-gear-fill"></i><span>Settings</span></a>
+            -->
+        </nav>
+    </div>
+    <script type="text/javascript" src="popup.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/AntiRickRoll/popup/popup.js b/AntiRickRoll/popup/popup.js
@@ -1,24 +1,17 @@
 (() => {
 	// Get elements
-	let toggler = document.querySelector('#toggler');
-	let total = document.querySelector('#total');
+	let toggler = document.querySelector('#enableToggle');
+    console.log(toggler);
+    console.log("toggler");
+    toggler.checked = true;
 
 	// Set toggler's initial value
 	chrome.storage.local.get('disabled', res => {
-		toggler.innerHTML = !res.disabled ? "Disable" : "Enable";
+		toggler.checked = !res.disabled;
 	});
 
 	// Give toggler functionality
 	toggler.addEventListener('click', () => {
-		chrome.storage.local.get('disabled', res => {
-			chrome.storage.local.set({"disabled": !res.disabled}, () => {
-				toggler.innerHTML = !!res.disabled ? "Disable" : "Enable";
-			});
-		});
+        chrome.storage.local.set({"disabled": !toggler.checked});
 	});
-
-	// Display rickrolls blocked
-	chrome.storage.local.get('total', res => {
-		total.innerHTML = res['total'] || 0;
-	});
-})();
+})();
diff --git a/AntiRickRoll/popup/style.css b/AntiRickRoll/popup/style.css
@@ -0,0 +1,134 @@
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
+html, body {
+    width: 375px !important;
+    height: 600px !important;
+    overflow: hidden;
+    color: #000;
+    background-color: #f0f0f0;
+    margin: 0px;
+}
+
+* {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.header {
+    border-bottom: #000 solid 1px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px;
+}
+
+.header img {
+    width: 36px;
+    height: 36px;
+    user-select: none;
+}
+
+.header span {
+    font-weight: bold;
+    font-size: 15px;
+    user-select: none;
+}
+
+.nav {
+    background-color: #fff;
+    width: 100%;
+    border-top: 1px solid #000;
+    bottom: 0;
+    left: 0;
+    border-top: rgb(0, 0, 0) solid 1px;
+    position: fixed;
+    display: flex;
+    justify-content: space-around;
+}
+
+.nav a {
+    font-size: 20px;
+    color: #000;
+    width: 100%;
+    text-align: center;
+    padding: 10px;
+    transition: hover 0.1s ease;
+    display: flex;
+    text-decoration: none;
+    flex-direction: column;
+    cursor: default;
+}
+
+.nav a span {
+    font-size: 14px;
+    display: block;
+}
+
+.nav a:hover {
+    background-color: #efefef;
+}
+
+.nav .selected {
+    background-color: #dfdfdf;
+}
+
+.block-header {
+    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
+    background-color: #f0f0f0;
+    font-size: 15px;
+    font-weight: 500;
+}
+
+.block-content {
+    font-size: 15px;
+    padding: 0.5rem;
+    background-color: #ffffff;
+    border-top: 10px black;
+}
+
+.block-content:hover {
+    background-color: #dfdfdf;
+}
+
+.setting {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer; }
+    input[type="checkbox"]:focus {
+      outline: 0; 
+    }
+
+.toggle {
+    height: 22px;
+    width: 37px;
+    border-radius: 16px;
+    display: inline-block;
+    position: relative;
+    margin: 0;
+    border: 2px solid #474755;
+    background: rgb(184, 0, 0);
+    transition: all .2s ease; }
+    .toggle:after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 14px;
+      height: 14px;
+      border-radius: 100%;
+      background: white;
+      box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
+      transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35); }
+    .toggle:checked {
+      background: rgb(0, 187, 0);
+    }
+    .toggle:checked:after {
+      transform: translatex(16px); }
+
diff --git a/AntiRickRoll/popup/testpopup.html b/AntiRickRoll/popup/testpopup.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body {
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .container iframe {
+            border-radius: 10px;
+            border: 3px solid black;
+            width: 375px;
+            height: 600px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <iframe src="/popup.html"></iframe>
+    </div>
+</body>
+
+</html>