The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

html
{
	min-height: 100%;
	font-family:'Source Sans Pro';font-style:normal;font-weight:400;
	line-height: 1.5em
}

.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

ul li
{
	list-style: none;
}

label:focus
{
	outline: none;
}

ins, del { display: block; }

ins
{
    background-color: #fea;
    text-decoration: none;
}
input:checked + label
{
    color: gray;
    text-decoration: line-through;
}
del
{
   text-decoration: none;
   background-color: #faa; 
}

dabblet.html

<h1>StanderUpper</h1>

<ol>
  <li>Lay out plan for today (basing on yestarday's unfinished items)
  <li>Freeze it
  <li>Work marking items as done, modyfing and adding new if that's <em>really</em> necessary
  <li>Go to sleep
  <li>Wake up
  <li>Archive yesterday's plan
  <li>Go to step 1.
</ol>

<h3>Today</h3>

List of items to be done during that day. Should be populated on mornings and then marked as "frozen". After that adding new items is discouraged (by marking with a background colour).

<ul>
  <li><input type=checkbox> <label contentEditable>do stuff
  <li><ins><input type=checkbox> <label contentEditable>not planned
  <li><input type=checkbox checked> <label contentEditable>done stuff
  <li><ins><input type=checkbox checked> <label contentEditable>not planned done stuff
</ul>

<h3>Nextly</h3>

A queue of future items, can be edited during the day. If (and ideally only then) one runs out of things to do planned for a day she can take items from here.

Fetching items from issue tracker here would be a nice addition.

<ul>
  <li><button><span aria-hidden=true>➕</span> <span class=sr-only>Add to today's TODO</span></button> <label contentEditable>do stuff
  <li><button><span aria-hidden=true>➕</span> <span class=sr-only>Add to today's TODO</span></button> <label contentEditable>do other stuff
  <li><button><span aria-hidden=true>➕</span> <span class=sr-only>Add to today's TODO</span></button> <label contentEditable>more stuff
</ul>

<hr>


<h3>Yesterday</h3>

Archive view. Also read only view of other people's TODOs. If you see lots of colour backgrounds on one's list, it means that his planned work is being heavily interrupted. Note that added, then removed (during single day) itemd do not show here. Only items that were removed after list has been frozen.

<ul>
  <li><input disabled type=checkbox> <label>do stuff
  <li><ins><input disabled type=checkbox> <label>not planned stuff
  <li><input disabled type=checkbox checked> <label>done stuff
  <li><ins><input disabled type=checkbox checked> <label>not planned done stuff
  <li><del><input disabled type=checkbox>removed stuff
  <li><del><input disabled type=checkbox checked>removed stuff done
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}