Fire JS Bin - Done

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8" />
    <title>Done ✓</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="initial-scale=0.6, user-scalable=no" />
  </head>
  
  <body>
    <header>
      <h1 class="title">Done <span>✓</span></h1>
      <div class="bttn info">INFO</div>
    </header>
    <section class="about">
      <div>
        <p>
          is not a to-do list, it's a done list. You don't enter tasks you need
          to manage but the ones you have accomplished on a daily basis. The goal
          is to boost your motivation by showing you how many small and large tasks
          you handle each day.
        </p>
        <p>
          Start typing to enter a new completed task and press
          <code class="key">RETURN</code>
          to add it to the list. Once you entered tasks on at least two days, you
          can use <code class="key">,</code>
          and <code class="key">.</code>
          to switch between them. To remove an item from the list click it and select
          <em>Delete</em>.
        </p>
        <p>
          You may also use a very simple formatting syntax to write
          <strong>*strong*</strong>
          or <em>_emphasized_</em>
          text. URLs and email addresses are converted to links automatically.
        </p>
        <p class="author">
          Created by <a href="http://michaelhue.com">Michael Hüneburg</a>
        </p>
      </div>
    </section>
    <div class="stage"><section class="sheets"></section></div>
    <div class="templates">
      <article class="sheet template">
        <div>
          <header><time></time></header>
          <div class="body"><ul class="items"></ul></div>
          <footer>
            <form class="add">
              <input type="text" placeholder="Enter a Completed Task" autocomplete="off"/>
            </form>
          </footer>
        </div>
      </article>
      <div class="msg" rel="welcome">
        <p>
          <strong>
            <em>Done ✓</em>
            helps you to shift your focus to what you've accomplished each day and
            boost your motivation.
          </strong>
        </p>
        <p>
          Looking at long to-do lists can be very demotivating, letting you easily
          forget all the tasks you already managed. Especially smaller ones, like
          grocery shopping.
        </p>
        <p>
          Just start typing to enter a task you've completed today.
          <em>Done ✓</em> keeps track of them for 14 days.
        </p>
        <p class="hint">↓</p>
      </div>
      <div class="bttn del">DELETE</div>
    </div>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
    </script>
  </body>

</html>

body { margin:0; padding:0; font:18px/1.3 Arial, sans-serif; background:#1e1e1e; color:#505050; overflow:hidden; }
section, footer, header { display:block; }
.templates { display:none; }
.bttn { display:block; padding:3px 6px; background:rgba(0, 0, 0, .7); border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; cursor:pointer; color:#fefefe; }
.bttn:hover { background:rgba(0, 0, 0, .9); }
.bttn.info { position:absolute; top:50%; right:60px; margin-top:-10px; background:rgba(255, 255, 255, .8); color:#1e1e1e; font-size:12px; }
.bttn.info:hover { background:#fff; }
.del { display:none; position:absolute; top:50%; right:20px; margin-top:-14px; font-size:15px; }
body>header { position:relative; padding:20px 60px; }
body>header .title { position:relative; z-index:150; display:inline; margin:0; font:34px/1 Lucida, Arial, sans-serif; text-shadow:1px 1px 1px #000; word-spacing:-.1em; color:#e6e6e6; user-select:none; -webkit-user-select:none; -moz-user-select:none; cursor:default; }
body>header span { font-size:90%; }
.about { display:none; position:absolute; top:0; right:0; bottom:0; left:0; z-index:100; background:rgba(0, 0, 0, .9); cursor:default; }
.about>div { padding:75px 60px; max-width:500px; color:#fff; }
.about a { color:#fff; text-decoration:underline; }
.author { text-align:right; font-size:70%; }
.key { padding:1px 4px; background:#fff; color:#000; font-size:80%; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; }
.stage { position:absolute; top:80px; right:30px; bottom:40px; left:30px; overflow:visible; }
.sheets { position:absolute; top:0; left:0; }
.sheet { position:relative; float:left; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; cursor:pointer; }
.sheet.current, .sheet.current:hover { opacity:1; cursor:default; }
.sheet.template { display:none; }
.sheet>div, .sheet.current:hover>div { position:absolute; top:0; right:15px; bottom:0; left:15px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 2px 5px #000; -moz-box-shadow:2px 2px 5px #000; -webkit-box-shadow:2px 2px 5px #000; }
.sheet:hover>div { left:13px; right:13px; }
.sheet header { height:20px; padding:15px; font:20px/1 Lucida, Arial, sans-serif; text-align:center; text-transform:uppercase; text-shadow:1px 1px 0 #fff; background:#e6e6e6; background:-moz-linear-gradient(top, #fefefe, #e6e6e6); background:-webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e6e6e6)); border-bottom:1px solid #d2d2d2; border-radius:20px 20px 0 0; -webkit-border-radius:20px 20px 0 0; -moz-border-radius:20px 20px 0 0; -webkit-user-select:none; -moz-user-select:none; cursor:default; }
.sheet .body { position:absolute; top:51px; right:0; bottom:51px; left:0; width:100%; overflow:auto; background:#fefefe; border-top:1px solid #fff; }
.sheet .items { margin:0; padding:0; }
.sheet .items li { position:relative; overflow:hidden; list-style:none; padding:8px 20px; border-bottom:1px solid #f0f0f0; }
.sheet .items li.active { background:#f5f5f5; padding-right:95px; }
.sheet .items span { text-decoration:line-through; }
.sheet footer { position:absolute; right:0; bottom:0; left:0; height:20px; padding:14px 20px 16px; border-top:1px solid #d0ceb0; background:#fefad6; border-radius:0 0 20px 20px; -webkit-border-radius:0 0 20px 20px; -moz-border-radius:0 0 20px 20px; cursor:text; }
.sheet footer input { display:block; width:100%; margin:0; padding:0; font:18px/1 Arial; color:#787766; background:transparent; border:none; }
.sheet footer input:focus, .sheet footer input:active { outline:none; }
.sheet footer input::-webkit-input-placeholder { color:#9a9882; }
.msg { margin:0 auto; padding:25px; max-width:400px; font-size:18px; line-height:1.5; color:#969696; }
.msg p:first-child { margin-top:0; }
.msg p:last-child { margin-bottom:0; }
.msg strong { font-size:20px; }
.msg .hint { margin:0; text-align:center; font-size:40px; line-height: 1; }

Pop out