index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data: blob:">
<title>RefRef</title>
<link rel="stylesheet" href="style.css">
</head>
<body data-mode="free" class="empty">
<header id="bar">
  <div class="side">
    <div class="winctl" id="lights">
      <button data-cmd="close" title="Close"><svg viewBox="0 0 16 16"><path d="m5 5 6 6m0-6-6 6"/></svg></button>
      <button data-cmd="min" title="Minimize"><svg viewBox="0 0 16 16"><path d="M4.5 8h7"/></svg></button>
    </div>
    <span class="title">refref</span>
    <button class="ic" data-cmd="open" title="Open board · Ctrl/⌘+O"><svg viewBox="0 0 16 16"><path d="M2 12.5v-8a1 1 0 0 1 1-1h3l1.5 1.5H12a1 1 0 0 1 1 1v1"/><path d="M2 12.5 3.8 7.7a1 1 0 0 1 .9-.7h9a.7.7 0 0 1 .7.9L13 12.5z"/></svg></button>
    <button class="ic" data-cmd="save" title="Save board · Ctrl/⌘+S"><svg viewBox="0 0 16 16"><path d="M3 2.5h8l2.5 2.5v8a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5z"/><path d="M5 2.5v3h5v-3M5 13.5V9.5h6v4"/></svg></button>
  </div>
  <nav class="seg" id="modes">
    <span class="thumb"></span>
    <button data-cmd="mode:free" title="Freeform · 1"><svg viewBox="0 0 16 16"><rect x="2" y="2.5" width="6" height="5" rx="1"/><rect x="9.5" y="2" width="4.5" height="6.5" rx="1"/><rect x="3.5" y="9.5" width="8.5" height="4.5" rx="1"/></svg><span>Free</span></button>
    <button data-cmd="mode:pile" title="Pile · 2"><svg viewBox="0 0 16 16"><rect x="5.5" y="5.5" width="5" height="5" rx="1"/><rect x="1.5" y="5.5" width="2.5" height="5" rx=".8"/><rect x="12" y="5.5" width="2.5" height="5" rx=".8"/><rect x="5.5" y="1.5" width="5" height="2.5" rx=".8"/><rect x="5.5" y="12" width="5" height="2.5" rx=".8"/></svg><span>Pile</span></button>
    <button data-cmd="mode:slides" title="Slideshow · 3"><svg viewBox="0 0 16 16"><rect x="1.5" y="3" width="13" height="10" rx="1.5"/><path d="M6.8 6v4l3.4-2z" fill="currentColor" stroke="none"/></svg><span>Slides</span></button>
  </nav>
  <div class="side r">
    <a href="https://ko-fi.com/severin123" target="_blank" class="ic kofi" title="Support RefRef on Ko-fi"><svg viewBox="0 0 16 16"><path d="M2.5 5.5h9v4a3.5 3.5 0 0 1-3.5 3.5H6a3.5 3.5 0 0 1-3.5-3.5zm9 1h1a2 2 0 0 1 0 4h-1"/><path d="M7 11 5.3 9.3a1.1 1.1 0 0 1 1.7-1.4 1.1 1.1 0 0 1 1.7 1.4z" fill="currentColor" stroke="none"/></svg></a>
    <button class="ic" data-cmd="clear" title="Transparent backdrop · T"><svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="5.5"/><path d="M8 2.5a5.5 5.5 0 0 1 0 11z" fill="currentColor" stroke="none"/></svg></button>
    <button class="ic" data-cmd="top" title="Keep on top · P"><svg viewBox="0 0 16 16"><path d="M6 2.5h4M7 2.5 6.5 7 4 9.5h8L9.5 7 9 2.5M8 9.5V14"/></svg></button>
    <div class="winctl" id="wctl">
      <button class="ic" data-cmd="min" title="Minimize"><svg viewBox="0 0 16 16"><path d="M4 8.5h8"/></svg></button>
      <button class="ic" data-cmd="close" title="Close"><svg viewBox="0 0 16 16"><path d="m4.5 4.5 7 7m0-7-7 7"/></svg></button>
    </div>
  </div>
</header>

<main id="stage">
  <div id="world"><div id="handle"></div></div>
  <div id="box"></div>
  <div id="empty">
    <div class="frame">
      <i class="cm tl"></i><i class="cm tr"></i><i class="cm bl"></i><i class="cm br"></i>
      <svg viewBox="0 0 36 36"><rect x="10" y="6" width="21" height="17" rx="2"/><path d="M6 11v14a2 2 0 0 0 2 2h18"/><path d="m14 19 4-4 3 3 2.5-2.5L27 19"/></svg>
      <h1>Drop images to start a board</h1>
      <p>Drag files or images from a browser, or paste a screenshot.</p>
      <div class="acts">
        <button class="pri" data-cmd="add">Add images…</button>
        <button class="ghost" data-cmd="open">Open board…</button>
      </div>
    </div>
    <p class="hint">Right-click anywhere for every action</p>
  </div>
  <div id="zoom" class="chip"></div>
</main>

<section id="slide">
  <img alt="">
  <div class="zone l"><svg viewBox="0 0 16 16"><path d="M10 3.5 5.5 8l4.5 4.5"/></svg></div>
  <div class="zone r"><svg viewBox="0 0 16 16"><path d="M6 3.5 10.5 8 6 12.5"/></svg></div>
  <span id="time" class="chip"></span>
  <div id="hud">
    <button class="ic" data-cmd="prev" title="Previous · ←"><svg viewBox="0 0 16 16"><path d="M10 3.5 5.5 8l4.5 4.5"/></svg></button>
    <button class="ic" data-cmd="play" id="play" title="Start / pause timer · Space">
      <svg class="i-play" viewBox="0 0 16 16"><path d="M5.5 3.5v9l7-4.5z" fill="currentColor" stroke="none"/></svg>
      <svg class="i-pause" viewBox="0 0 16 16"><path d="M5.5 4v8M10.5 4v8" stroke-width="2"/></svg>
    </button>
    <button class="ic" data-cmd="next" title="Next · →"><svg viewBox="0 0 16 16"><path d="M6 3.5 10.5 8 6 12.5"/></svg></button>
    <span id="count"></span>
    <span class="sep"></span>
    <select id="secs" title="Time per image"></select>
    <button class="ic" data-cmd="shuffle" title="Shuffle"><svg viewBox="0 0 16 16"><path d="M2 4.5h2.2c3.3 0 4.3 7 7.6 7H14M2 11.5h2.2c1.3 0 2.1-1 2.8-2.3m2-2.4c.7-1.3 1.5-2.3 2.8-2.3H14M12 2.5l2 2-2 2M12 9.5l2 2-2 2"/></svg></button>
  </div>
  <div id="timer"><i></i></div>
</section>

<div id="drop">
  <i class="cm tl"></i><i class="cm tr"></i><i class="cm bl"></i><i class="cm br"></i>
  <div class="msg">
    <svg viewBox="0 0 28 28"><path d="M14 4v13m-5-5 5 5 5-5M5 19v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/></svg>
    <b>Drop to add <span id="dropn">images</span></b>
  </div>
</div>
<div id="toast" class="chip"></div>
<div id="grip" title="Resize window"></div>
<script src="web-api.js"></script>
<script src="layout.js"></script>
<script src="app.js"></script>
</body>
</html>