Update popup.html

AMoldskred · web-flow · commit f7beb8179180 · 2018-02-27T21:52:16.000-08:00
diff --git a/popup.html b/popup.html
@@ -1,20 +1,109 @@
 <!DOCTYPE html>
 <html>
+<head>
+	<meta charset="UTF-8">
+</head>
 <body>
 
 <div class="container">
-	<h3>Statistics</h3>
+	<div class="tools">
+		<div style="width:50%;float:left;height:60%">
+			<label class="cont">Notifications
+			  <input id="notification" type="checkbox">
+			  <span class="checkmark"></span>
+			</label>
+		</div>
+		<div style="width:50%;float:right;height:60%">
+			<a style="margin-top:20%;font-size: 15px;display: block;cursor: pointer;" id="donate">More...</a>
+		</div>
+		<a href="#stats" class="link">Statistics</a>
+	</div>
 <table id="stats">
  <tr>
     <th>Site</th>
     <th>Times blocked</th>
   </tr>
 
 </table>
-<a id="donate">Donate?</a>
 </div>
 
 <style>
+.cont {
+    display: block;
+    position: relative;
+    padding-left: 15px;
+    cursor: pointer;
+    left:10px;
+    font-size: 15px;
+    margin-top:20%;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #eee;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+    background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+.container input:checked ~ .checkmark {
+    background-color: #2196F3;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+    display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+.link{
+	bottom:0;
+
+	color:black;
+	font-size: 1.2rem;
+
+}
+.tools{
+	height:40%;
+	width:100%;
+}
 a{
     text-decoration: none;
 }
@@ -68,4 +157,4 @@ <h3>Statistics</h3>
 </style>
 <script src="popup.js"></script>
 </body>
-</html>
+</html>
