You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
4.6 KiB
140 lines
4.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<title>MonoDisplay Editor</title>
|
|
<script>!function () { var t = localStorage.getItem('theme'); t && document.documentElement.setAttribute('data-theme', t) }();</script>
|
|
<link href="style.css" rel="stylesheet" />
|
|
<link href="mobile.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="topbar">
|
|
<span class="app-name">MonoDisplay</span>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" onclick="document.getElementById('file-input').click()">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="17 8 12 3 7 8" />
|
|
<line x1="12" y1="3" x2="12" y2="15" />
|
|
</svg>
|
|
Load .bin
|
|
</button>
|
|
<input type="file" id="file-input" accept=".bin" onchange="loadBin(this)" />
|
|
<button class="tb-btn" onclick="exportBin()">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="7 10 12 15 17 10" />
|
|
<line x1="12" y1="15" x2="12" y2="3" />
|
|
</svg>
|
|
Export .bin
|
|
</button>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" onclick="clearAll()">
|
|
<svg viewBox="0 0 24 24">
|
|
<polyline points="3 6 5 6 21 6" />
|
|
<path d="M19 6l-1 14H6L5 6" />
|
|
<path d="M10 11v6M14 11v6" />
|
|
</svg>
|
|
Clear all
|
|
</button>
|
|
<button class="tb-btn" onclick="addSection()">
|
|
<svg viewBox="0 0 24 24">
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>
|
|
Add section
|
|
</button>
|
|
<span id="filename">untitled</span>
|
|
<div style="flex:1"></div>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" id="theme-toggle" onclick="cycleTheme()">⊙ auto</button>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<div id="left">
|
|
<span class="pv-label">preview · 120 × 60</span>
|
|
<div id="display-box">
|
|
<canvas id="canvas_root" width="120" height="60"></canvas>
|
|
</div>
|
|
<span class="pv-label">demos</span>
|
|
<div id="demo-btns"></div>
|
|
<div id="sec-meta">
|
|
<div class="meta-row">
|
|
<label>Selected section</label>
|
|
<span class="meta-val green" id="meta-name">-</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<label>Elements</label>
|
|
<span class="meta-val" id="meta-count">-</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<label>Section flags</label>
|
|
<label class="flag-check">
|
|
<input type="checkbox" id="flag-drawFront" onchange="setSectionFlag('drawFront',this.checked)" />
|
|
drawFront
|
|
</label>
|
|
<label class="flag-check" style="margin-left:-8px">
|
|
<input type="checkbox" id="flag-drawBack" onchange="setSectionFlag('drawBack',this.checked)" />
|
|
drawBack
|
|
</label>
|
|
<label class="flag-check" style="margin-left:-8px">
|
|
<input type="checkbox" id="flag-clearBuffer" onchange="setSectionFlag('clearBuffer',this.checked)" />
|
|
clearBuffer
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="right">
|
|
<div id="right-hdr">
|
|
<span class="rh-title">sections</span>
|
|
<button class="tb-btn" id="mob-add-section" onclick="addSection()">
|
|
<svg viewBox="0 0 24 24">
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="sections-wrap">
|
|
<div class="empty-state">No sections yet.<br />Use <b>Add section</b> to get started.</div>
|
|
</div>
|
|
</div>
|
|
<nav id="mob-tabs">
|
|
<a class="mob-tab" href="#left">
|
|
<svg viewBox="0 0 24 24">
|
|
<rect x="3" y="3" width="18" height="12" rx="1" />
|
|
<line x1="3" y1="19" x2="8" y2="19" />
|
|
<line x1="12" y1="19" x2="21" y2="19" />
|
|
</svg>
|
|
Preview
|
|
</a>
|
|
<a class="mob-tab" href="#right">
|
|
<svg viewBox="0 0 24 24">
|
|
<line x1="8" y1="6" x2="21" y2="6" />
|
|
<line x1="8" y1="12" x2="21" y2="12" />
|
|
<line x1="8" y1="18" x2="21" y2="18" />
|
|
<line x1="3" y1="6" x2="3.01" y2="6" />
|
|
<line x1="3" y1="12" x2="3.01" y2="12" />
|
|
<line x1="3" y1="18" x2="3.01" y2="18" />
|
|
</svg>
|
|
Sections
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- confirm dialog -->
|
|
<div id="confirm-overlay">
|
|
<div id="confirm-box">
|
|
<div id="confirm-msg"></div>
|
|
<div id="confirm-btns"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./public/mono-display.js"></script>
|
|
</body>
|
|
|
|
</html>
|
|
|