mirror of
https://github.com/github/awesome-copilot.git
synced 2026-10-13 15:24:25 +00:00
60 lines
3.7 KiB
HTML
60 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Draw</title>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app booting" data-theme-mode="app">
|
|
<header class="bar">
|
|
<div class="bar-group bar-doc">
|
|
<button id="doc-button" class="doc-button" type="button" aria-haspopup="menu" aria-expanded="false" title="Drawings">
|
|
<span id="doc-name" class="doc-name">Drawing</span>
|
|
<span class="chev" aria-hidden="true"></span>
|
|
</button>
|
|
<input id="doc-rename" class="doc-rename" type="text" maxlength="80" aria-label="Drawing name" hidden>
|
|
<span id="save-status" class="status" aria-live="polite"></span>
|
|
</div>
|
|
<div class="bar-group bar-actions">
|
|
<button id="undo" class="icon-btn" type="button" title="Undo (Ctrl+Z)" aria-label="Undo" disabled></button>
|
|
<button id="redo" class="icon-btn" type="button" title="Redo (Ctrl+Shift+Z)" aria-label="Redo" disabled></button>
|
|
<span class="sep" aria-hidden="true"></span>
|
|
<button id="theme-button" class="icon-btn" type="button" aria-haspopup="menu" aria-expanded="false" title="Theme" aria-label="Theme"></button>
|
|
<button id="export-button" class="btn" type="button" aria-haspopup="menu" aria-expanded="false">Export</button>
|
|
<button id="ask-button" class="btn btn-primary" type="button" aria-expanded="false" title="Send this drawing to Copilot with a question">Ask Copilot</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="stage" class="stage">
|
|
<svg id="svg" class="svg" xmlns="http://www.w3.org/2000/svg" tabindex="0" role="application" aria-roledescription="drawing canvas" aria-label="Drawing" aria-describedby="canvas-help">
|
|
<g id="world"><g id="content"></g><g id="overlay"></g></g>
|
|
</svg>
|
|
<p id="canvas-help" hidden>N and Shift+N select the next or previous element. Enter edits its label, the arrow keys move it and Delete removes it. To add a shape, press R for a rectangle, O for an ellipse, D for a diamond or C for a database, then press Enter. T and then Enter adds text. To connect two shapes, select one, press A and then Enter, select the other with N, and press Enter. Tab moves on to the style bar and the tools. Press question mark for all shortcuts.</p>
|
|
<div id="layer" class="layer"></div>
|
|
<div id="stylebar" class="stylebar" role="toolbar" aria-label="Style" hidden></div>
|
|
<nav id="tools" class="tools" role="toolbar" aria-label="Tools" aria-orientation="vertical"></nav>
|
|
<div id="empty" class="empty" hidden>
|
|
<p class="empty-title">Start a diagram</p>
|
|
<p>Pick a shape on the left (or press <kbd>R</kbd>), then click the canvas or press <kbd>Enter</kbd>.</p>
|
|
<p>Hover a shape and drag a <b>+</b> handle to connect it, or click <b>+</b> to add the next step.</p>
|
|
<p>Or ask Copilot in the chat to draw one for you.</p>
|
|
</div>
|
|
<div class="zoom" role="group" aria-label="Zoom">
|
|
<button id="zoom-out" class="icon-btn" type="button" title="Zoom out (Ctrl+-)" aria-label="Zoom out"></button>
|
|
<button id="zoom-level" class="zoom-level" type="button" title="Reset to 100% (Ctrl+0)">100%</button>
|
|
<button id="zoom-in" class="icon-btn" type="button" title="Zoom in (Ctrl+=)" aria-label="Zoom in"></button>
|
|
<button id="zoom-fit" class="icon-btn" type="button" title="Fit drawing (Shift+1)" aria-label="Fit drawing"></button>
|
|
</div>
|
|
<button id="help-button" class="icon-btn help-button" type="button" title="Shortcuts (?)" aria-label="Keyboard shortcuts"></button>
|
|
</main>
|
|
|
|
<div id="popovers"></div>
|
|
<div id="toasts" class="toasts" aria-live="polite"></div>
|
|
<div id="announce" class="sr-only" role="status"></div>
|
|
</div>
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|