mirror of
https://github.com/skishore/makemeahanzi.git
synced 2025-10-28 13:08:10 +08:00
124 lines
3.6 KiB
HTML
124 lines
3.6 KiB
HTML
<head>
|
|
<title>Hanzi decomposition</title>
|
|
</head>
|
|
<body>
|
|
{{> navbar}}
|
|
{{> modal}}
|
|
{{> editor}}
|
|
</body>
|
|
|
|
<template name="navbar">
|
|
<div id="navbar" class="navbar navbar-default navbar-static-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<div class="navbar-brand">Hanzi decomposition</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-warning active"
|
|
role="progressbar" style="width: {{percent}}%"
|
|
aria-valuenow="{{percent}}"
|
|
aria-valuemin="0" aria-valuemax="100">
|
|
<span>{{complete}}/{{total}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-right">
|
|
<div class="backup navbar-brand {{backup}}">✎</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="modal">
|
|
<div id="modal" class="modal fade" tabIndex="2"
|
|
data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-body">{{text}}</div>
|
|
<div class="modal-footer">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active"
|
|
role="progressbar" style="width: {{percent}}%"
|
|
aria-valuenow="{{percent}}"
|
|
aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="editor">
|
|
<div id="editor">
|
|
<div class="left-pane">
|
|
{{> metadata}}
|
|
{{> status}}
|
|
</div>
|
|
<svg viewbox="0 0 1024 1024">
|
|
<g transform="scale(1, -1) translate(0, -900)">
|
|
{{#each paths}}
|
|
<path class="{{cls}}" fill="{{fill}}"
|
|
stroke="{{stroke}}" d="{{d}}"></path>
|
|
{{/each}}
|
|
{{#each lines}}
|
|
<line class="{{cls}}" stroke="{{stroke}}" stroke-width="8"
|
|
x1={{x1}} y1={{y1}} x2={{x2}} y2={{y2}}></line>
|
|
{{/each}}
|
|
{{#each points}}
|
|
<circle class="{{cls}}" fill="{{fill}}" stroke="{{stroke}}"
|
|
cx={{cx}} cy={{cy}} r="8"></circle>
|
|
{{/each}}
|
|
{{#each animations}}
|
|
<clipPath id="{{clip}}">
|
|
<path d={{stroke}}></path>
|
|
</clipPath>
|
|
<path class="animation" clip-path="url(#{{clip}})" d="{{median}}"
|
|
stroke-dasharray="{{length}} {{spacing}}"
|
|
stroke-dashoffset="{{advance}}"/>
|
|
{{/each}}
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="metadata">
|
|
<div class="panel panel-primary metadata" style="display: {{display}};">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">
|
|
Metadata for {{rank}} - {{character}}
|
|
{{#if simplified}}
|
|
- <a href="#{{simplified}}">(simplified: {{simplified}})</a>
|
|
{{/if}}
|
|
</h3>
|
|
</div>
|
|
{{#each items}}
|
|
<div class="field">
|
|
<label class="control-label">{{label}}</label>
|
|
{{{editable field value}}}{{separator}}{{{extra}}}
|
|
</div>
|
|
{{/each}}
|
|
<div class="field">
|
|
<label class="control-label">References:</label>
|
|
{{#each references}}
|
|
<a class="reference" href="{{href}}" target="_blank">{{label}}</a>
|
|
<div class="separator">•</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="status">
|
|
<div class="panel panel-primary status">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Edit {{stage}}</h3>
|
|
</div>
|
|
<div class="template {{template}}">
|
|
{{> UI.dynamic template=template}}
|
|
</div>
|
|
<ul class="log">
|
|
{{#each lines}}
|
|
<li class="line {{cls}}">{{message}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</template>
|