akif/arclet-boards

Arclet Boards — private Kanban workspaces with AppID, DataK3, shared web and MCP actions.

• dodil-challenge
• dodil-challenge-boards

A remix template · 1 remixes · Remix akif/arclet-boards

app/web/static/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="#f8f9fc">
  <meta name="description" content="Arclet Boards — a little clarity for everything ahead.">
  <title>Arclet Boards</title>
  <link rel="icon" href="/static/mark.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/static/app.css">
  <script src="/static/app.js" defer></script>
  <script src="/static/extras.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<div class="app-shell">
  <aside class="sidebar" id="sidebar" aria-label="Workspace navigation">
    <a class="brand" href="#dashboard"><span class="brand-mark" aria-hidden="true"></span>arclet<span class="brand-dot">.</span></a>
    <div class="workspace-block">
      <label class="eyebrow" for="workspace-select">YOUR WORKSPACE</label>
      <div class="workspace-select"><span class="workspace-icon" aria-hidden="true">A</span><select id="workspace-select" aria-label="Current workspace"><option>Loading…</option></select></div>
      <button class="text-button workspace-manage" data-action="workspace-manage">Workspace settings <span aria-hidden="true">↗</span></button>
    </div>
    <nav id="navigation">
      <a href="#dashboard" data-nav="dashboard"><span data-icon="grid"></span>Overview</a>
      <a href="#boards" data-nav="boards"><span data-icon="boards"></span>My boards <span class="nav-count" id="board-count">0</span></a>
      <a href="#tasks" data-nav="tasks"><span data-icon="check"></span>My tasks</a>
      <a href="#overdue" data-nav="overdue"><span data-icon="clock"></span>Overdue <span class="nav-count overdue-count" id="overdue-count">0</span></a>
    </nav>
    <div class="sidebar-section"><span class="eyebrow">BOARDS</span><button class="icon-button" data-action="new-board" aria-label="Create board">+</button></div>
    <div id="board-shortcuts" class="board-shortcuts"></div>
    <div class="sidebar-bottom">
      <div class="mcp-note"><span class="mcp-spark" aria-hidden="true">✳</span><div><strong>Bring your assistant</strong><p>Your boards, through MCP.</p><button class="text-button" data-action="mcp-info">Connection details <span aria-hidden="true">↗</span></button></div></div>
      <div class="profile"><span class="avatar" id="user-avatar">…</span><div><strong id="user-name">Signing in…</strong><span>AppID account</span></div><a class="icon-button" href="/.dodil/auth/logout" aria-label="Sign out" title="Sign out">↗</a></div>
    </div>
  </aside>
  <div class="main-shell">
    <header class="topbar">
      <div class="breadcrumb"><button class="icon-button mobile-menu" data-action="toggle-nav" aria-label="Toggle navigation" aria-expanded="false">☰</button><span id="crumb-workspace">Workspace</span><span class="crumb-divider">/</span><strong id="crumb-view">Overview</strong></div>
      <div class="topbar-right"><span class="private-note"><span data-icon="shield"></span> Your work, your space</span><span class="avatar small" id="top-avatar">…</span></div>
    </header>
    <main id="main" tabindex="-1" aria-busy="true"><div class="initial-loading"><span class="spinner"></span><h1>A little clarity is on its way.</h1><p>Loading your workspace…</p></div></main>
    <footer class="app-footer"><span>Made for the way your team works.</span><span id="connection-state">Connecting…</span></footer>
  </div>
</div>
<dialog id="modal" aria-labelledby="modal-title"><div id="modal-content"></div></dialog>
<div class="toast-region" id="toast-region" role="status" aria-live="polite" aria-atomic="true"></div>
</body>
</html>