-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
10 lines (8 loc) · 5.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html><html><head>
<title>Composite Radial Progress Demo</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="index-stamp.js"></script>
</head>
<body id="container">
<section class="hero is-primary"><div class="hero-head"><nav class="navbar"><div class="container"><div class="navbar-brand"><a class="navbar-item" href="https://worldmaker.net/compradprog/">CompRadProg</a><a role="button" class="navbar-burger" title="menu" data-bf-bind="0"><span></span><span></span><span></span></a></div><div class="navbar-menu" data-bf-bind="1"><div class="navbar-end"><a class="navbar-item is-active" href="https://worldmaker.net/compradprog/">Demo</a><a class="navbar-item" href="https://blog.worldmaker.net/2015/03/17/compradprog/">Motivation</a><span class="navbar-item"><a class="button is-primary is-inverted" href="https://github.com/WorldMaker/compradprog/"><span class="icon"><slot name="bf-x0"><!--Icon component--></slot></span><span>Source</span></a></span></div></div></div></nav></div><div class="hero-body"><div class="container has-text-centered"><p class="title">Composite Radial Progress Demo</p><p class="subtitle">Visualize complex multi-item progress with a combined radial</p></div></div></section><section class="section"><div class="dashboard"><div class="dial"><input type="text" id="dial" class="dial" data-bf-bind="2"><label for="dial" class="is-hidden">Total Progress Dial</label></div><div class="total"><div class="level"><div class="level-item"><div><div class="heading is-capitalized">Total Progress</div><div class="title" data-bf-bind="3"></div></div></div><div class="level-item is-flex-grow-5"><progress class="progress is-info" data-bf-bind="4"></progress></div></div><div class="level"><div class="level-left"><button type="button" class="button" data-bf-bind="5"><span class="icon"><slot name="bf-x1"><!--Icon component--></slot></span><span>Add Item</span></button></div><div class="level-right"><div class="buttons has-addons"><button type="button" class="button" title="Pause All" data-bf-bind="6"><span class="icon"><slot name="bf-x2"><!--Icon component--></slot></span><span>All</span></button><button type="button" class="button" title="Resume All" data-bf-bind="7"><span class="icon"><slot name="bf-x3"><!--Icon component--></slot></span><span>All</span></button></div></div></div></div><div class="items" data-bf-bind="8"></div></div></section><template id="icon-github"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></template><template id="icon-pause"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="4" height="16" x="6" y="4"></rect><rect width="4" height="16" x="14" y="4"></rect></svg></template><template id="icon-play"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg></template><template id="icon-plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></template><template id="icon-fast-forward"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon></svg></template><template id="icon-rewind"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon></svg></template><template id="icon-skip-forward"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" x2="19" y1="5" y2="19"></line></svg></template><template id="progress"><div class="card"><div class="level"><div class="level-item"><div class="buttons has-addons"><button type="button" title="Pause" class="button" data-bf-bind="0"><span class="icon"><slot name="bf-x0"><!--Icon component--></slot></span></button><button type="button" title="Unpause" class="button" data-bf-bind="1"><span class="icon"><slot name="bf-x1"><!--Icon component--></slot></span></button><button type="button" title="Slow Down" class="button" data-bf-bind="2"><span class="icon"><slot name="bf-x2"><!--Icon component--></slot></span></button><button type="button" title="Speed Up" class="button" data-bf-bind="3"><span class="icon"><slot name="bf-x3"><!--Icon component--></slot></span></button><button type="button" title="Finish" class="button" data-bf-bind="4"><span class="icon"><slot name="bf-x4"><!--Icon component--></slot></span></button></div></div><div class="level-item"><div><div class="heading is-capitalized">Item Progress</div><div class="title" data-bf-bind="5"></div></div></div><div class="level-item is-flex-grow-5"><progress class="progress" data-bf-bind="6"></progress></div></div></div></template></body></html>