Mercurial > projects > booket

diff booket.html @ 0:c2248f662a2c version-1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial revision
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sat, 06 Sep 2014 18:18:29 +0200
parents
children 82c50265c8dc
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/booket.html	Sat Sep 06 18:18:29 2014 +0200
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<!--
+  Copyright (C) 2014 Guido Berhoerster <guido+booket@berhoerster.name>
+
+  Permission is hereby granted, free of charge, to any person obtaining
+  a copy of this software and associated documentation files (the
+  "Software"), to deal in the Software without restriction, including
+  without limitation the rights to use, copy, modify, merge, publish,
+  distribute, sublicense, and/or sell copies of the Software, and to
+  permit persons to whom the Software is furnished to do so, subject to
+  the following conditions:
+
+  The above copyright notice and this permission notice shall be included
+  in all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+  IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+  CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+  TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+  SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<html>
+  <head>
+    <meta charset="utf-8"></meta>
+    <title>Booket</title>
+    <link rel="stylesheet" type="text/css" href="booket.css"></link>
+    <script src="booket.js"></script>
+  </head>
+  <body>
+  <header>
+    <h1>Booket</h1>
+    <p>Version 1</p>
+  </header>
+
+  <template id="tag-input-template">
+    <li><label>Tag <input type="text" name="tag" pattern="[^,;]*"
+    size="20" placeholder="tag"></input>
+    </label></li>
+  </template>
+
+  <template id="bookmark-editor-template">
+    <form class="bookmark-editor-form">
+      <fieldset>
+        <legend></legend>
+        <input type="hidden" name="original-url"></input>
+        <label>URL <input type="url" required="required"
+        name="url" size="60" placeholder="http://example.com/"></input></label>
+        <label>Title <input type="text" name="title" size="60"
+        placeholder="A Title"></input></label>
+        <div>
+          <ul class="tag-input-list"></ul>
+          <button type="button" name="more-tags">Add more tags</button>
+        </div>
+        <button type="reset" name="cancel">Cancel</button><button type="submit"
+        name="save-bookmark">Save</button>
+      </fieldset>
+    </form>
+  </template>
+
+  <section id="actions">
+    <h2>Actions</h2>
+    <aside id="keyboard-shortcuts">
+      <h3>Keyboard Shortcuts</h3>
+      <dl>
+        <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
+        <dd>Select bookmark file to load</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
+        <dd>Load selected bookmark file</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
+        <dd>Save bookmark file</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
+        <dd>Focus bookmark editor</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
+        <dd>Focus search field</dd>
+      </dl>
+    </aside>
+    <form id="load-form">
+      <fieldset>
+        <legend>Load Bookmarks</legend>
+        <label accesskey="i">File <input type="file" accept="application/json"
+        required="required" name="file"></input></label>
+        <button type="submit" name="load-file" accesskey="l">Load</button>
+      </fieldset>
+    </form>
+
+    <form id="save-form">
+      <fieldset>
+        <legend>Save Bookmarks</legend>
+        <a href="#" id="save-link" hidden="hidden"
+        download="bookmarks.json"></a>
+        <button type="submit" name="save-file"
+        accesskey="s">Save&#8230;</button>
+      </fieldset>
+    </form>
+  </section>
+
+  <main>
+    <section id="bookmarks">
+      <h2>Bookmarks</h2>
+
+      <aside id="tags">
+        <h3>Tags</h3>
+
+        <ul class="tag-list">
+          <template id="tag-template">
+            <li><button type="button" name="set-tag"></button><span
+            class="tag-count"></span><button type="button"
+            name="toggle-tag"></button></li>
+          </template>
+        </ul>
+      </aside>
+
+      <aside id="search">
+        <h3>Search</h3>
+
+        <form id="search-form">
+          <input type="search" name="search-term" size="20" placeholder="Search"
+          accesskey="f"></input>
+          <button type="submit" name="search">Search</button><button
+          type="reset" name="clear">Clear</button>
+        </form>
+      </aside>
+
+      <p id="bookmark-message"></p>
+
+      <ul id="bookmark-list">
+        <template id="bookmark-tag-template">
+          <li><button type="button" name="set-tag"></button><button
+          type="button" name="toggle-tag"></button></li>
+        </template>
+        <template id="bookmark-template">
+          <li>
+            <a class="bookmark-link" target="_blank"></a><ul
+            class="tag-list"></ul>
+            <div class="bookmark-actions">
+              <button type="button" name="edit-bookmark">Edit</button><button
+              type="button" name="delete-bookmark">Delete</button>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </section>
+  </main>
+
+  <footer><address>Copyright 2014
+    <a href="mailto:guido+booket@berhoerster.name"
+    title="guido+booket@berhoerster.name">Guido
+    Berhörster</a></address>
+  </footer>
+  </body>
+</html>