last ui changes before customization

This commit is contained in:
qt31415926
2015-03-31 00:38:53 -04:00
parent 34f0a05177
commit 011e211903
3 changed files with 94 additions and 58 deletions
+54 -47
View File
@@ -12,55 +12,40 @@
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="row">
<div class="page-header text-center">
<h1>MAD:<small> Mindfulness Anti Distraction</small></h1>
<div class="text-center content">
<h1>MAD: <small>Mindful Anti Distraction</small></h1>
</div>
<div class="col-md-8 col-md-offset-2 text-center">
<p class="lead">Read and <strong>type the text below</strong> if you REALLY HAVE to go to your site:</p>
<div class="jumbotron">
<blockquote>
<p class="lead" id="target"></p>
</blockquote>
<div class="row content">
<h1 class="text-center">Do something more rewarding instead!</h1>
<br>
<div id="alternate" class="row text-center">
<div class="col-md-2 col-md-offset-2 col-sm-6">
<a href="https://keep.google.com/">
<img src="img/gkeep.jpg" class="img-rounded">
</a>
<h3>To-Do List</h3>
</div>
<div class="col-md-2 col-sm-6">
<a href="https://www.khanacademy.org/">
<img src="img/khanacad.jpg" class="img-circle">
</a>
<h3>Learn</h3>
</div>
<div class="col-md-2 col-sm-6">
<a href="https://www.duolingo.com/">
<img src="img/duolingo.jpg" class="img-circle">
</a>
<h3>Language</h3>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://www.codecademy.com/">
<img src="img/codeacad.jpg" class="img-circle">
</a>
<h3>Code</h3>
</div>
</div>
</div>
</div>
<div class="row text-center">
<textarea id="input" class="form-control" rows="3"></textarea>
<input id="submit1" class="btn btn-primary" type="submit" value="Verify">
<a id="submit2" class="btn btn-success" href="#" disabled="enabled">Enter Site</a>
<br><strong></strong>
</div>
<div class="row">
<h1 class="text-center">Do something more rewarding instead!</h1>
<br>
<div id="alternate" class="row text-center">
<div class="col-md-4 col-md-offset-2">
<a href="https://keep.google.com/">
<img src="img/gkeep.jpg" class="img-rounded">
</a>
<h3>Make/Look at your to-do list</h3>
</div>
<div class="col-md-4">
<a href="https://www.khanacademy.org/">
<img src="img/khanacad.jpg" class="img-circle">
</a>
<h3>Learn new mathematics and sciences</h3>
</div>
</div>
<div id="alternate2" class="row text-center">
<div class="col-md-4 col-md-offset-2">
<a href="https://www.duolingo.com/">
<img src="img/duolingo.jpg" class="img-circle">
</a>
<h3>Speak a new language, forever</h3>
</div>
<div class="col-md-4">
<a href="http://www.codecademy.com/">
<img src="img/codeacad.jpg" class="img-circle">
</a>
<h3>Learn how to code in a new language, forever</h3>
</div>
<!--
<br>
<a href="https://www.youtube.com/watch?v=KfnUicHDNM8">
@@ -71,8 +56,30 @@
</a>
-->
<div class="row content">
<div class="col-md-8 col-md-offset-2 text-center">
<p>Read and <strong>type the text below</strong> if you <strong>REALLY HAVE</strong> to go to your site:</p>
<div class="jumbotron-cust">
<blockquote>
<p id="target"></p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="text-center">
<div class="content-a">
<div class="form-inline">
<div class="form-group">
<label for="input-a">Retype</label>
<input type="text" id="input-a" class="custwidth form-control"></input>
</div>
</div>
</div>
<input id="submit1" class="btn btn-primary" type="submit" value="Verify">
<a id="submit2" class="btn btn-success" href="#" disabled="enabled">Enter Site</a>
<br><strong id="message"></strong>
</div>
</div>
</body>
</html>
+18
View File
@@ -13,3 +13,21 @@ blockquote{
-ms-user-select: none;
user-select: none;
}
.jumbotron-cust{
padding: 25px 10px 10px 10px;
color: inherit;
background-color: #eee;
}
.content {
border-bottom: 2px solid #F50042;
line-height: 1.5em;
padding: 10px;
}
.content-a {
padding: 10px;
}
.form-control.custwidth{
width: 768px;
}
+22 -11
View File
@@ -9,20 +9,17 @@ var defSayings = [
"Sites are simply tools, they don't control me",
"Resisting this site is easy",
"I ain't gonna get tricky tricked by my mindless monotony",
"This site is boo boo",
"I am going here not out of habit, but for a solid purpose",
"Imma take a second and think"
"Taking a second and thinkin-a-linkin"
]
/* setupUpdater will be called once, on page load.
*/
var passed = false;
window.onload = function setupUpdater(){
var input=document.getElementsByTagName('textarea')[0]
, count=document.getElementById('percent')
, target=document.getElementById('target')
var input=document.getElementsByTagName('input')[0]
, count=document.getElementById('message')
, targetText = defSayings[Math.floor(Math.random()*defSayings.length)]
, a = FuzzySet([targetText])
, orig=document.getElementById('original')
, oldText=input
, timeout=null;
@@ -32,12 +29,12 @@ window.onload = function setupUpdater(){
function handleChange(){
var newText=input.value;
var score = a.get(newText)[0][0];
if (score>0.91) {
// set(count, "");
if (score>0.88) {
//debug set(count, "You are " + score*100 + "% accurate (need >91)");
passed = true;
return;
} else if (score> 0.1){
//debug set(count, "You are " + score*100 + "% accurate (need >91)");
//debug set(count, "You are " + score*100 + "% accurate (need >91)");
}
}
@@ -52,13 +49,27 @@ window.onload = function setupUpdater(){
$(function(){
$(".btn-primary").click(function(){
if (passed){
$("strong").text("You've Unlocked The Button...\nI hope you don't regret this");
$("#message").text("You've Unlocked The Button...\nI hope you don't regret this");
$(".btn-success").removeAttr("disabled");
console.log(chrome.extension.getBackgroundPage());
$(".btn-success").attr("href", chrome.extension.getBackgroundPage().prevSite);
}
else
$("strong").text("You failed! (typos are allowed)");
$("#message").text("You failed! (typos are allowed)");
});
});
//enter listener
$(function(){
$('#input-a').keydown(function(e) {
if (e.keyCode == 13){
if (passed){
$("#message").text("You've Unlocked The Button...\nI hope you don't regret this");
$(".btn-success").removeAttr("disabled");
$(".btn-success").attr("href", chrome.extension.getBackgroundPage().prevSite);
}
else
$("#message").text("You failed! (typos are allowed)");
}
});
});