major changes, moving around files, customizations added

2026-07-16 01:20:16 +08:00 · 2015-04-12 08:08:42 -04:00
parent 70230f4e9e
commit e971a56557
31 changed files with 577 additions and 118 deletions
@@ -38,3 +38,8 @@ v0.1.0.3 30/03/2015
 v0.1.0.5 02/04/2015
 - Fought around with AJAX functions. They're whack. Was too stubborn on trying to find a way to return a value from an async call. In the end, I should not fight with callback functions, just use em and reorganize my code so it's not like how you normally code in Java/C++,
 - Moving on to user customization now. Lots of things to consider. Should I use angular for 1-pagey-ness functionality? Tough questions. I think I'll try.
+
+v0.2.0.0 10/04/2015
+- Learnt AngularJS to implement some one-page functionality goodness. It's SO COOOOOOL. Enjoying the simplicity of the MVC framework and how seamless and speedy things run. 
+- Ran into more asynchronous problems, although this time I fixed them rather quickly now that I have more experience. Just gotta get used to that asynchronous thinkin ya feeeeel.
+- I keep on thinking of more and more things to do or add. I'm going to have to speed up the rate in which I complete things, or else I'm going to get squashed.
@@ -2,37 +2,92 @@
 <html ng-app="app" ng-csp>
  <head>
    <title>MAD</title>
-			<script src="js/jquery.min.js"></script>
-		 	<script src="js/fuzzyset.js"></script>
-		 	<script src="js/bootstrap.min.js"></script>
-		 	<script src="js/angular.min.js"></script>
-			<link rel="stylesheet" href="css/bootstrap.min.css">
-			<link rel="stylesheet" href="css/bootstrap-theme.min.css">
-			<link rel="stylesheet" href="css/main.css">
-			<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
-			<!-- Modules -->
-			<script src="js/verify.js"></script>
-			<script src="js/app.js"></script>
-			<!--Controllers -->
-			<script src="js/altController.js"></script>
+		<!-- Scripts -->
+		<script src="js/shared/jquery.min.js"></script>
+		<script src="js/fuzzyset.js"></script>
+		<script src="js/shared/bootstrap.min.js"></script>
+		<script src="js/shared/angular.min.js"></script>
+		<script src="js/shared/ui-bootstrap.min.js"></script>

+		<!-- Stylin Style Sheets-->
+		<link rel="stylesheet" href="css/bootstrap.min.css">
+		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
+		<link rel="stylesheet" href="css/main.css">
+		<link rel="stylesheet" href="css/angular-csp.css">
+		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
+		<!-- Modules -->
+		<script src="js/verify.js"></script>
+		<script src="js/app.js"></script>
+
+		<!--Controllers -->
+		<script src="js/controllers/altController.js"></script>
+		<script src="js/controllers/headerController.js"></script>
  </head>
+
 	<body >
-			<div class="text-center content">
+			<div class="text-center content" ng-controller="HeaderController">
 				<h1>MAD: <small>Mindful Anti Distraction</small></h1>
+				<button class='btn btn-danger' ng-click='openOptions("lg")'>BlockList</button>
 			</div>

 			<div class="row content">
 				<h1 class="text-center">Do something more rewarding instead!</h1>
 				<br>
 				<div id="alternate" class="row text-center" ng-controller="AltController">
-					<div ng-repeat="alt in alternatives" class="col-md-3 col-sm-3 col-xs-3">
-						<a ng-href="{{ alt.href }}">
+					<div ng-repeat="alt in alternatives track by $index" class="col-md-3 col-sm-3 col-xs-3">
+						<a ng-href="{{ alt.href || urlFilter }}" style="text-decoration: none">
 							<img ng-src="{{ alt.imgsrc }}" class="img-circle">
-						</a>
 						<h3>{{ alt.text }}</h3>
-						<p ng-click="delete($index)">X</p>
+						</a>
+						<button class='btn btn-xs btn-danger' ng-click='deleteAlt($index)'>X</button>
 					</div>
+
+
+					<div id="previewAlt" class="col-md-3 col-sm-3 col-xs-3" ng-hide="!bools.addingItem">
+						<img ng-src="img/default/happygrey.png"class="img-circle" height="140" width="140">
+						<h3> {{ newAltText }} </h3>
+						<p> PREVIEW </p>
+					</div>
+
+
+					<div class ='row animate-show' id='newItem' ng-hide="!bools.addingItem">
+						<div class='col-md-12'>
+						<form class="form-horizontal" id="newItemForm" name="NIform" ng-submit="submitNew()" novalidate>
+							<br>
+							<div class='form-group'>
+								<label for='inputText' class='col-sm-offset-2 col-sm-2 control-label'>Text </label>
+								<div class='col-sm-4'>
+									<input id='inputText'type='text' name='text' class='form-control' ng-model='newAltText' ng-minlength='1' required="">
+								</div>
+								<div class='col-sm-4 text-left'>
+									<p ng-show="NIform.text.$error.required">Required</p>
+								</div>
+							</div>
+							<div class='form-group'>
+								<label for='inputUrl' class='col-sm-offset-2 col-sm-2 control-label'>Link/Href</label>
+								<div class='col-sm-4'>
+									<input id='inputUrl' type='url' name='url' class='form-control' ng-model='newAltUrl' ng-minlength='1' required="">
+								</div>
+								<div class='col-sm-4 text-left'>
+									<p ng-show="NIform.url.$invalid">Required: Proper URL (http/https)</p>
+								</div>
+							</div>
+							<div class='form-group'>
+								<label for='inputImg' class='col-sm-offset-2 col-sm-2 control-label'>Upload Image (COMING SOON!)</label>
+								<input type="file" disabled='disabled' class="col-sm-4 btn btn-primary" id='submitPhoto' nv-file-select uploader='upload' value="Upload"/>
+							</div>
+							<input type="submit" ng-disabled='NIform.$invalid' class='btn btn-primary' id='submit' value='Submit'/>
+							<button type="button" class="btn btn-danger" ng-click="switchAdd()"> Cancel </button>
+						</form>
+						</div>
+					</div>
+					<div class="col-md-3 col-sm-3 col-xs-3" ng-hide="bools.addingItem">
+						<br>
+						<a href=""> <img ng-click="switchAdd()" src="img/add.png"></img>
+							<h3 ng-click="switchAdd()"> Add your Link</h3></a>
+					</div>
+
 				</div>
 			</div>
 			<!--	
@@ -1,20 +1,10 @@
-var globalOptions,
-		blockChecker,
-		blockList,
-		blockService;
-
-blockService = BlockListFactory.getBlockList();
-blockService.set(DefaultList);
-blockList = blockService.get();
-blockChecker = new BlockCheck(DefaultList);

 var currTabs = []; //TODO add additional information to these objects, e.g. time 
 var prevSite = "";

 chrome.webRequest.onBeforeRequest.addListener(
 		function(details) {
-		//	console.log("Is this evenf ucking working details.url: " + details.url);
-		//	console.log(details);
+//		console.log("Is this evenf ucking working details.url: " + details.url);
 			prevSite = blockChecker.getUrl();
 			return blockChecker.redirectOnMatch(details);
 		},
@@ -0,0 +1,5 @@
+exports.config = {
+	  seleniumAddress: 'http://localhost:4444/wd/hub',
+	  specs: ['test/mad-spec.js']
+}
+
@@ -0,0 +1,13 @@
+/* Include this file in your html if you are using the CSP mode. */
+
+@charset "UTF-8";
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
+.ng-cloak, .x-ng-cloak,
+.ng-hide:not(.ng-hide-animate) {
+  display: none !important;
+}
+
+ng\:form {
+  display: block;
+}
@@ -1,3 +1,7 @@
+.nounderline{
+	text-decoration: none
+}
+
 body{
 	color: #0A7ED7;
 	font-family:
@@ -31,3 +35,20 @@ blockquote{
 .form-control.custwidth{
 	width: 768px; 
 }
+
+.modal-left{
+	padding-right: 20px;
+  border-right: 1px solid #ccc;
+}
+
+.modal-left-item{
+	padding-bottom:5px;
+}
+
+.modal-left-buttons{
+	padding: 0px;
+}
+
+.modal-right-button{
+	padding-left: 0px;
+}
@@ -1,23 +0,0 @@
-app.controller('AltController', ['$scope',
-	function($scope){
-		$scope.alternatives = [
-		{
-			text: 'To-Do List',
-			href: 	"https://keep.google.com/",
-			imgsrc: 'img/gkeep.jpg'
-		},
-		{
-			text: 'Learn',
-			href: 'https://www.khanacademy.org',
-			imgsrc: 'img/khanacad.jpg'
-		},
-		{
-			text: 'Code',
-			href: 	"http://www.codecademy.com",
-			imgsrc: 'img/codeacad.jpg'
-		}
-	];
-		$scope.delete = function(index){
-			$scope.alternatives.splice(index, 1);
-		};
-}]);
@@ -1,10 +1,47 @@
-var app = angular.module("app",[]);
+var app = angular.module("app",['ui.bootstrap']);
+
+var bkg = chrome.extension.getBackgroundPage();
+
+var defaultAlternatives = 	[
+		{
+			text: 'To-Do List',
+			href: 	"https://keep.google.com/",
+			imgsrc: 'img/gkeep.jpg'
+		},
+		{
+			text: 'Learn',
+			href: 'https://www.khanacademy.org',
+			imgsrc: 'img/khanacad.jpg'
+		},
+		{
+			text: 'Code',
+			href: 	"http://www.codecademy.com",
+			imgsrc: 'img/codeacad.jpg'
+		}
+	];
+
+

 app.config([
  '$compileProvider',
  function ($compileProvider) {
      //  Default imgSrcSanitizationWhitelist: /^\s*(https?|ftp|file):|data:image\//
      //  chrome-extension: will be added to the end of the expression
-      $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension):|data:image\//);
+      $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|local|data):|data:image\//);
+      $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
 }
 ]);
+
+//TODO: Manual links don't work so well, neither does this filter at all
+app.filter('urlFilter', function(){
+		return function(link){
+			var result;
+			var startingUrl = "http://";
+			if (link.startWith("www")){
+				result = startingUrl + link;
+			} else{
+				result = link;
+			}
+			return result;
+		};
+});
@@ -1,35 +1,45 @@
-
-var DefaultList =  [
+var globalOptions,
+		blockChecker,
+		blockList,
+		blockService;
+var DefaultBlockList =  [
      "facebook",
      "youtube",
      "twitter",
      "tumblr",
      "pinterest",
-      "myspace",
-      "livejournal",
-      "digg",
-      "stumbleupon",
      "reddit",
-      "kongregate",
-      "newgrounds",
-      "addictinggames",
-      "hulu",
-			"pornhub"
+			"instagram",
+			"netflix",
+			"twitch"
    ];
+
+var saveblockList= function(){
+		chrome.storage.sync.set({'blocklist': blockList}, function(){
+			console.log('blocklist updated');
+		});
+};
+
+
 var regexMatching = function(list, target){
-	var start = '^(http|https)://(www\\.)?(';
+	var start = '^(http|https)://(www\\.)?';
 	var end = '\\.(be|com|org|net)/[\\W\\w]*$';
+	var simpleSiteRegex = new RegExp(start+'.*$');
 	var middle = "";
+	var toBlockOrNotToBlock = false;
 	for (var i = 0; i < list.length-1; i++){
-		middle = middle+list[i]+'|';
+		if (!simpleSiteRegex.test(list[i])){
+			middle = middle+list[i]+'|';
+		}
 	}
-	middle = middle+list[list.length-1]+')';
-	var x = new RegExp(start+middle+end);
-	//console.log("what is target: " + target);
-	//console.log("what is xtesttarget: " + x.test(target));
-	return x.test(target);
+	middle = '('+middle+list[list.length-1]+')';
+	var generalRegex = new RegExp(start+middle+end);
+	if (list.indexOf(target)!==-1) toBlockOrNotToBlock = true;
+	toBlockOrNotToBlock = generalRegex.test(target) || toBlockOrNotToBlock;
+	return toBlockOrNotToBlock;
 }

+
 function TabObject (tabId, origUrl, blockedStatus){
 	this.tabId = tabId;
 	this.currStatus = blockedStatus;
@@ -41,16 +51,21 @@ function TabObject (tabId, origUrl, blockedStatus){
 }


-var BlockCheck = function(blocklist){
+var BlockCheck = function(){
 	var storedUrl="";
 	var prevTabId;
 	// TODO include timestamps check var prevTimeStamp=0;
-	this.blocklist = blocklist;
+
+	//RedirectonMatch Method
 	this.redirectOnMatch = function(req){

 		var tabBlock;
-		var blocked = regexMatching(blocklist, req.url) 
+	/*	console.log('in ROM');
+		console.log(blockList);*/
+		var blocked = regexMatching(blockList, req.url) 
 		var result = $.grep(currTabs, function(e){
+				//console.log('e:');
+				//console.log(e);
 				return e.tabId == req.tabId;
 		});
 		if (result.length==0)
@@ -80,15 +95,83 @@ var BlockCheck = function(blocklist){

 var BlockList = function (){
 	this.get = function(){
-		return JSON.parse(localStorage['blocklist']);
+		chrome.storage.sync.get('blocklist', function(items){
+			if (items.blocklist == undefined){
+				blockList = DefaultBlockList;
+				blockChecker = new BlockCheck(blockList);
+			} else{
+			/*	console.log('in BL get');
+				console.log(items.blocklist);*/
+				blockList = items.blocklist;
+			}
+		});
 	};
-	this.set = function(data){
-		localStorage['blocklist'] = JSON.stringify(data);
+	this.add = function(website){
+		console.log(blockList);
+		blockList.push(website);
+		saveblockList();
+	};
+
+	this.addAtIndex = function(index, website){
+	//	console.log("AAI: " + blockList);
+		blockList.splice(index,0,website);
+	};
+	
+	this.delete = function(index){
+		console.log('deleting: ' + blockList[index]);
+		blockList.splice(index, 1);
+		saveblockList();
+	};
+	this.deleteLast = function(){
+		console.log('deleting: ' + blockList[blockList.length-1]);
+		blockList.splice(blockList.length-1, 1);
+		saveblockList();
+	};
+
+	this.replace = function(index, replacement){
+		console.log('replacing: ' + blockList[index]);
+		blockList[index]=replacement;
+		saveblockList();
+		
+	}
+};
+
+var WhiteList = function(){
+	this.get = function(){
+		chrome.storage.sync.get('whitelist', function(items){
+			if (items.whitelist == undefined){
+				whiteList = [];
+			} else{
+				whiteList = items.whitelist;
+			}
+		});
+	};
+	this.set = function(){
+		chrome.storage.sync.set({'whitelist': whiteList}, function(){
+			console.log('whitelist saved');
+		});
+	};
+
+	this.add = function(data){
+		whiteList.push(data);
+		chrome.storage.sync.set({'whitelist': whiteList}, function(){
+			console.log('whitelist saved');
+		});
 	};
 };

 var BlockListFactory = {
 	getBlockList: function(){
 		return new BlockList();
+	},
+	getWhiteList: function(){
+		return new WhiteList();
 	}
 };
+
+blockService = BlockListFactory.getBlockList();
+whiteService = BlockListFactory.getWhiteList();
+blockList = blockService.get();
+blockChecker = new BlockCheck(blockList);
+
+
@@ -0,0 +1,64 @@
+
+app.controller('AltController', ['$scope', '$modal',
+	function($scope){
+		$scope.bools = {};
+		$scope.bools.addingItem = false;
+		
+		chrome.storage.sync.get('alternatives', function(items){
+			if (items.alternatives == undefined ){
+				$scope.alternatives = defaultAlternatives;
+			} else{
+			$scope.alternatives = items.alternatives;
+			}
+			/*console.log(items);
+			console.log(items.length);
+			console.log($scope.alternatives);*/
+			$scope.$apply();
+		});
+
+		$scope.deleteAlt = function(index){
+			if (confirm('Are you sure you want to delete?')== true){
+				$scope.alternatives.splice(index,1);
+				chrome.storage.sync.set({'alternatives': $scope.alternatives}, function(){
+					console.log('alternatives saved');
+				});
+
+			}
+		};
+
+		$scope.switchAdd = function(){
+			//console.log("tis workings? " + $scope.bools.addingItem);
+			$scope.bools.addingItem = !$scope.bools.addingItem;
+		};
+
+		function newAltObject(text, href, imgsrc)
+		{
+			this.text = text;
+			this.href = href;
+			this.imgsrc = imgsrc;
+		};
+
+
+		$scope.submitNew = function(){
+		/*	console.log("does this function activate");
+			console.log("new alt text: " + $scope.newAltText +" new altUrl: " + $scope.newAltUrl);*/
+			randInt = Math.floor((Math.random()*5));
+			$scope.newAltImgSrc = 'img/default/happy' + randInt + '.png';
+			var altLink = {
+				text: $scope.newAltText, 
+				href: $scope.newAltUrl, 
+				imgsrc: $scope.newAltImgSrc
+			};
+			$scope.alternatives.push(altLink);
+			$scope.newAltUrl= "";
+			$scope.newAltText = "";
+			$scope.switchAdd();
+			chrome.storage.sync.set({'alternatives': $scope.alternatives}, function(){
+				console.log('alternatives saved');
+			});
+			/*console.log('loggin in submit');
+			console.log($scope.alternatives);*/
+		};
+
+	
+}]);
@@ -0,0 +1,103 @@
+var ModalInstanceCtrl = function($scope, $modalInstance) {
+
+	$scope.blocklist = bkg.blockList;
+	//$scope.enabledEdits = [];
+	//keep track of every action
+	//for each action keep type and what was done
+	//redo in queue like fashion?
+	$scope.undoBool = true;
+	$scope.undoHistoryQueue = [];
+
+	$scope.undo = function(){
+		if ($scope.undoHistoryQueue.length>0){
+			var action = $scope.undoHistoryQueue.shift();
+			if (action.type == 'deletion'){
+				bkg.blockService.addAtIndex(action.index, action.data);
+			} else if (action.type =='replace'){
+				bkg.blockService.replace(action.index, action.data);
+			} else if (action.type =='add'){
+				bkg.blockService.deleteLast()
+			}
+			if ($scope.undoHistoryQueue.length<=0){
+				$scope.undoBool = true;
+			}
+		} 
+		
+	}
+	$scope.deleteSpree = false;
+	$scope.deleteBlock = function(index) {
+		if (!$scope.deleteSpree){
+			if (confirm('Hey! You can still go to this site. You just gotta type a tiny message. (psst press cancel)')){
+				if (confirm("You're probably a cool person. Cool people don't care about a lil typing every now and then")){
+					if (confirm("Let's just assume you're doing this for good reasons (you can still press cancel if you realize you aren't)")){
+					$scope.deleteSpree = true;
+					$scope.deleteBlock(index);
+					}
+				}
+			}
+		} else{
+			$scope.undoHistoryQueue.push({
+				type: 'deletion',
+				index: index,
+				data: bkg.blockList[index]
+			});
+			$scope.undoBool = false;
+			bkg.blockService.delete(index);
+		}
+	
+	}
+
+	$scope.saveBlock = function(index, replacement){
+		if (replacement == bkg.blockList[index]) return;
+		$scope.undoHistoryQueue.push({
+			type: 'replace',
+			index: index,
+			data: bkg.blockList[index]
+		});
+		$scope.undoBool = false;
+		bkg.blockService.replace(index, replacement);
+	}
+	
+	$scope.ok = function(){
+		console.log(bkg);
+	};
+
+	$scope.addSimple = function(){
+		$scope.undoHistoryQueue.push({
+			type: 'add',
+			index: bkg.blockList.length-1,
+			data: $scope.simple
+		});
+		$scope.undoBool=false;
+		bkg.blockService.add($scope.simple);
+	}
+	$scope.addExact= function(){
+		$scope.undoHistoryQueue.push({
+			type: 'add',
+			index: bkg.blockList.length-1,
+			data: $scope.exact
+		});
+		$scope.undoBool=false;
+		bkg.blockService.add($scope.exact);
+	}
+
+	$scope.cancel = function() {
+		$modalInstance.dismiss('cancel');
+	};
+};
+
+
+app.controller('HeaderController', ['$scope', '$modal',
+	function($scope, $modal){
+		console.log('header controller');
+		$scope.openOptions = function(size) {
+			var modalInstance = $modal.open({
+				templateUrl:'../../options.html',
+				controller: ModalInstanceCtrl,
+				size: size
+			});
+		};
+	
+}]);
+
+
@@ -0,0 +1,23 @@
+popup.controller('PopupController', ['$scope',
+	function($scope){
+
+		$scope.isBlocked = false;
+
+		$scope.addToBlock = function(){
+			chrome.tabs.query({
+				active: true,
+				currentWindow: true
+			}, function callback(tabs){
+				var currentTab = tabs[0];
+				console.log(currentTab);
+				console.log(bkg);
+				bkg.blockService.add(currentTab.url);
+				$scope.isBlocked = true;
+				$scope.$apply();
+			});
+		};
+		$scope.testfunc = function(){
+			alert("DOES WORK>?");
+		}
+}]);
+
@@ -1,7 +1,13 @@
-//Listener for Disable
+var popup= angular.module('popup', []);

-$(function(){
-	$("#enable_button").click(function(){
-		console.log("button is pressed");
-	});
-});
+popup.config([
+  '$compileProvider',
+  function ($compileProvider) {
+      //  Default imgSrcSanitizationWhitelist: /^\s*(https?|ftp|file):|data:image\//
+      //  chrome-extension: will be added to the end of the expression
+      $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|local|data):|data:image\//);
+      $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
+}
+]);
+
+var bkg = chrome.extension.getBackgroundPage();
@@ -16,7 +16,7 @@ var defSayings = [
 */
 var passed = false; 
 window.onload = function setupUpdater(){
- var input=document.getElementsByTagName('input')[0]
+ var input=document.getElementById('input-a')
   , count=document.getElementById('message')
 	 , targetText = defSayings[Math.floor(Math.random()*defSayings.length)]
 	 , a = FuzzySet([targetText])
@@ -28,6 +28,7 @@ window.onload = function setupUpdater(){
 function handleChange(){
  var newText=input.value;
 	var score = a.get(newText)[0][0];
+	//	console.log("handling change: score: " + score);
  if (score>0.88) {
 		passed = true;
 		return;
@@ -43,6 +44,7 @@ window.onload = function setupUpdater(){
 };

 var activate = function(){
+//	console.log("does activate function trigger");
 	var currTabs = chrome.extension.getBackgroundPage().currTabs;
 	chrome.tabs.query({
 		active: true,
@@ -61,7 +63,7 @@ var activate = function(){
 			$(".btn-success").attr("href", req[0].origUrl);
 		}
 	});
-
+	return 'poop';
 }

 //Button Listener function yeah yeah its jquery and the rest of this wasnt, I am learning!
@@ -1,10 +1,11 @@
 {
  "manifest_version": 2,
  "name": "MAD - Mindful Anti Distraction",
-  "description": "This extension will hopefully help you be less distracted (untested)",
-  "version": "0.1.0.6",
+	"short_name": "MAD BETA",
+  "description": "This extension will hopefully help you be less distracted",
+  "version": "0.2.0.0",
  "background": {
-		"scripts": ["js/jquery.min.js","js/checkerino.js","background.js"],
+		"scripts": ["js/shared/jquery.min.js","js/checkerino.js","background.js"],
 		"pages": ["background.html"]
 	},

@@ -19,6 +20,7 @@
 		"css/*",
 		"js/*"
 	],
+	"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "permissions": [
    "activeTab",
@@ -1,34 +1,75 @@
 <!doctype html>
-<html>
+<html ng-app="app" ng-csp>
  <head>
    <title>MAD Options</title>
-		 	<script src="js/bootstrap.min.js"></script>
+		 	<script src="js/shared/bootstrap.min.js"></script>
+		<!--	<script src="js/shared/angular.min.js"></script>
+		<script src="js/shared/ui-bootstrap-ng.min.js"></script>-->
+
 			<link rel="stylesheet" href="css/bootstrap.min.css">
 			<link rel="stylesheet" href="css/bootstrap-theme.min.css">
 			<link rel="stylesheet" href="css/main.css">
 			<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  </head>
  <body>
-		<div class="text-center">
-			<h1>Options</h1>
+		<div class='modal-header text-center'>
+			<h1> BlockList </h1>
 		</div>

-Favorite color:
-<select id="color">
- <option value="red">red</option>
- <option value="green">green</option>
- <option value="blue">blue</option>
- <option value="yellow">yellow</option>
-</select>
+		<div class="modal-body text-center">
+			<div class='row'>
+				<div class="col-md-7 modal-left">
+					<div ng-repeat="block in blocklist track by $index">
+						<div class='row modal-left-item'>
+						<div class='col-md-9'>
+							<input id="form{{$index}}" ng-model="block" type='text' class='form-control' value='{{ block }}'/> 
+						</div>
+						<div class='col-md-3 modal-left-buttons btn-group' role='group' aria-label="...">
+							<button class='btn btn-success btn-sm' ng-click='saveBlock($index, block)'>Save</button>
+							<button class='btn btn-danger btn-sm' ng-click='deleteBlock($index)'>Delete</button>
+						</div>
+					</div>
+					</div>
+				</div>
+				<div class='col-md-5'>
+					<h3>ASSIST FUTURE SELF</h3>
+					<div class='row'>
+						<h4>Simple Domain Block</h4>
+						<div class='col-md-10'>
+							<input id="simpleDomain" ng-model="simple" type='text' class='form-control' placeholder='e.g. reddit or twitter'/> 
+						</div>
+						<div class='col-md-2 modal-right-button'>
+							<button class='btn btn-success btn-sm' ng-click='addSimple()'>Add</button>
+						</div>
+					</div>
+					<div class='row'>
+						<h4>Exactsies Block</h4>
+							<div class='col-md-10'>
+								<input id="exactUrl" ng-model="exact" type='text' class='form-control' placeholder='e.g. http://www.reddit.com/r/all'/> 
+							</div>
+							<div class='col-md-2 modal-right-button'>
+								<button class='btn btn-success btn-sm' ng-click='addExact()'>Add</button>
+							</div>
+					</div>
+				<!--	<div class='row'>
+						<h4>Custom Regex</h4>
+							<div class='col-md-10'>
+								<input id="regex" ng-model="regex" type='text' class='form-control' placeholder='JS string regex, start with /^ and end with $/'/> 
+							</div>
+							<div class='col-md-2 modal-right-button'>
+								<button class='btn btn-success btn-sm' ng-click='saveRegex()'>Add</button>
+							</div>
+						</div>-->
+				</div>
+			</div>
+		</div>
+		<div class='modal-footer text-center'>
+			<div class='row col-md-12 text-center'>
+			<button class='btn btn-primary' ng-disabled='undoBool' ng-click='undo()'>Undo</button>
+			<button class='btn btn-danger' ng-click='cancel()'>Cancel</button>
+			</div>
+		</div>

-<label>
-  <input type="checkbox" id="like">
-  I like colors.
-</label>
-
-<div id="status"></div>
-<button id="save">Save</button>
-
-  </body>
+	</body>
 </html>

@@ -1,21 +1,26 @@
-<html>
+<html ng-app='popup' ng-csp>
 	<head>
-		<script src="js/jquery.min.js"></script>
+		<!-- Scripts -->
+		<script src="js/shared/jquery.min.js"></script>
+		<script src="js/shared/angular.min.js"></script>
 		<script src="js/popup.js"></script>
+		<script src="js/shared/bootstrap.min.js"></script>
+
+		<!-- Stylin Style Sheets-->
 		<link rel="stylesheet" href="css/bootstrap.min.css">
 		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
 		<link rel="stylesheet" href="css/main.css">
 		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

+		<!--Controllers -->
+		<script src="js/controllers/popupController.js"></script>
 	</head>

-	<body style="width:150px">
-		<div> Yo Swag Son: </div>
-		<div id="enabler">
-			<input id="enable_button" class="btn btn-primary" type="submit" value="Don't Kill My Vibe"> </input>	</div>
+	<body style="width:135px" ng-controller="PopupController">
 		<div id="blacklist">
-			<input id="blacklist_button" class="btn btn-primary" type="submit" value="This shit aint cool."> </input></div>
-		<div id="whitelist">
-			<input id="whitelist_button" class="btn btn-primary" type="submit" value="This shit ballin"> </input></div>
+			<button ng-click="addToBlock()" ng-disabled="isBlocked" id="blacklist_button" class="btn btn-primary" type="submit">BLOCK THIS SITE</button> </div>
+		<!--<div id="whitelist">
+			<input ng-click="testfunc()" id="whitelist_button" class="btn btn-primary" type="submit" value="This shit ballin"> </input></div> -->
 	</body>
 </html>
+
@@ -0,0 +1,7 @@
+describe('angularjs chrome', function() {
+  it('should block site', function() {
+    browser.get('http://www.reddit.com');
+		expect(browser.getLocationAbsUrl()).not.toBe('http://www.reddit.com');
+
+  });
+});