зеркало из https://github.com/MicrosoftEdge/Demos.git
163 строки
11 KiB
HTML
163 строки
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>wami</title>
|
|
<link rel="stylesheet" href="styles/index.css" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-96.png" />
|
|
<link rel="manifest" href="manifest.json" />
|
|
</head>
|
|
<body>
|
|
<div
|
|
style="
|
|
position: fixed;
|
|
top: env(titlebar-area-y, 0);
|
|
left: env(titlebar-area-x, 0);
|
|
height: env(titlebar-area-height, 0);
|
|
width: env(titlebar-area-width, 0);
|
|
-webkit-app-region: drag;
|
|
"
|
|
></div>
|
|
<h1>
|
|
<a href="#">
|
|
<svg
|
|
version="1.0"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="80 50 1540 340"
|
|
fill="white"
|
|
>
|
|
<path
|
|
d="M1093 49.5c-17.3 2.4-37.7 8.8-52.8 16.4-33.1 16.7-56.1 44.2-66.3 79.1-4.8 16.5-4.9 18.3-4.9 130v105h14.9l.4-106.8c.3-103.3.4-107 2.4-115.7 5.3-23.3 14.1-39.2 30.8-56 19.9-19.8 41.6-30.4 74-36 10.7-1.9 37.8-2.1 48-.5 30.4 4.9 56.8 17.6 76.9 37 18.1 17.5 28.8 36.4 34.3 60.5 1.4 6.1 1.7 20.3 2 112.2l.4 105.3h14.9v-98.9c0-63 .4-100.8 1-104.2 2.2-11.7 10.1-16.8 27.5-17.8 17.3-1 32.2.1 38 3 6.8 3.4 10.3 8.2 11.5 15.5.6 3.5 1 45.3 1 104.1V380h15l-.2-104.8-.3-104.7-2.8-5.7c-5.1-10.3-14.3-16.5-30-20-7.9-1.7-11.4-1.9-24.7-1.5-17 .6-24.3 2.1-32.9 6.8-3 1.6-5.5 2.8-5.6 2.6-.1-.1-.9-2.9-1.8-6.2-.8-3.3-1.8-6.7-2.2-7.6-.8-2 7.9-6 19.6-9.1 12.4-3.2 39.6-3.2 52.4 0 24.2 6.1 39.4 19.7 43.4 39 .8 3.7 1.1 37 1.1 108.2v103h16.1l-.3-105.3c-.4-117.5.1-109-7.5-124.6-4.5-9.1-15.8-20.9-25.3-26.4-7-4-20.4-8.7-31-10.8-3.8-.8-13.4-1.3-23-1.3-19.3.1-31 2.1-43.9 7.7-5.8 2.5-8.3 3.1-8.9 2.3-.5-.6-2.3-3.6-4-6.7l-3.2-5.6 7.9-3.6c37.9-17.4 91-12.7 123 10.7 17 12.3 28.4 32 31 53.6.7 5.4 1.1 44.9 1.1 109.2V380h16v-98.8c0-55.4-.5-103-1-108.6-4.6-47.3-35.2-78.7-88-90.2-12.3-2.7-47.8-2.7-59.9 0-11.5 2.5-22 6-31.7 10.6l-8.2 3.8-5.6-5.7-5.7-5.7 9.9-5.2c18.2-9.5 38-14.9 59.2-16.1 47.5-2.6 86.3 10.2 113.5 37.4 19.9 19.9 30.2 42.8 32.5 72 .5 6.6 1 55.8 1 109.2V380h15V275.1c0-99.6-.1-105.5-2-116.3-2.4-13.9-4.7-21.3-11-34.6-16.6-34.8-48.4-59.4-91.7-70.7-32.2-8.5-72.7-7-103.2 3.7-9.3 3.2-23.7 10.1-31.3 15l-4.7 3-5.8-3.5c-27.5-16.6-55.5-23.9-91-23.6-7.6.1-18.1.7-23.3 1.4zm-346 5.6c-90.1 5-158.1 76.6-158 166.4.1 43 13.6 80 40.1 109.6 24.8 27.6 57.4 46.1 95.5 54.1 9.5 2 13.8 2.3 33.4 2.3 23.1 0 30-.9 46-5.8l4.5-1.4.3-8.2c.2-4.4.2-8.1 0-8.1s-2.6.9-5.4 1.9c-16 6.1-36.7 8.8-55.6 7.1-41.3-3.6-76.3-20.4-104.4-50.4-41.2-43.7-50.8-111.6-23.8-167.2 14.1-29 39.7-54.7 68.9-69.2 25-12.4 54.4-17.9 83.4-15.5 52.8 4.4 94.1 27.9 120.5 68.6 9.6 14.6 16.3 31.1 20.9 50.9 2 9.1 2.1 11.7 2.4 99.5l.4 90.3H932v-83.5c0-88-.3-94.7-4.6-114.4-3.1-13.7-6.5-23.2-13.2-36.8-15.7-31.8-38.3-54.4-70.9-70.9-29.5-14.9-61.1-21.2-96.3-19.3zM86.3 168.7c.3 104.1.3 104.9 2.5 114.6 13.4 59.1 58.7 97.3 124.1 104.8 13 1.4 38.3.7 50.6-1.6 17.3-3.1 35.6-10.3 55.1-21.5l4-2.3 4.6 3.1c7 4.8 21.7 11.9 31.5 15.1 27.1 9.1 60.7 10.6 90.3 4.1 59.8-13.1 100-55.8 106.9-113.5.7-5.8 1.1-43.9 1.1-108.3V64h-15.9l-.4 105.2c-.3 117.2.1 110.1-7.3 129.2-17.8 46.2-63.8 74.6-120.9 74.7-26.8 0-46.4-4.6-67.7-15.8-4.8-2.6-8.8-4.9-8.8-5.3 0-.3 2.4-2.9 5.3-5.8l5.3-5.3 8 4c18.8 9.3 35.4 12.5 61.4 11.8 23.8-.7 35.6-3.2 53.8-11.8 25.4-11.8 44.3-34.4 52.3-62.4l2.3-8 .3-105.3.4-105.2h-15l-.4 102.2c-.3 101.3-.3 102.4-2.5 110.5-10.1 38.2-39.9 60.4-86.5 64.5-21 1.8-39.1-1.2-56.4-9.2l-8.3-3.9 3.7-6.3c2-3.5 3.8-6.5 4-6.7.1-.2 3.5 1 7.4 2.8 24.9 11.2 61.5 10.5 85.4-1.6 18.3-9.3 29-21.7 34.6-40.3l2.3-7.5.4-102.3.3-102.2H478v99.3c0 95.1-.1 99.7-1.9 107-2.7 10.4-5.4 15.2-12.5 22.2-7.4 7.4-15.8 11.7-29 15-18.4 4.7-42.8 2.8-58.3-4.4-3.5-1.7-6.3-3.4-6.3-3.8.1-2.3 3.8-13.8 4.4-13.6.3.2 2.8 1.4 5.4 2.7 7.2 3.6 18.5 5.6 31.9 5.6 25.4-.1 40.1-6.9 47.2-21.9l2.6-5.6.3-101.3L462 64h-16v98.2c0 68.8-.3 99.5-1.1 102.3-1.5 5.2-6.7 10.1-12.8 11.9-11.9 3.5-35.9 2.8-43.9-1.3-4.9-2.5-8.8-7.1-10.2-11.9-.6-2.4-1-37.3-1-101.5V64h-16v99.7c0 83.9-.2 101.3-1.5 109-7.6 46.6-46.7 85.8-97 97.3-12.1 2.7-16.4 3.2-31.8 3.1-59-.1-106-30.3-122.5-78.6-5.8-17.2-5.6-11.8-5.9-125.8L101.9 64h-16l.4 104.7z"
|
|
/>
|
|
<path
|
|
d="M118 164.9c0 110.1 0 109.4 5.8 125.8 4.4 12.5 10.7 22.6 20.4 32.8 15.4 16.2 32.5 25.5 57.3 31.1 9.7 2.2 39.1 3 50.8 1.4 26.7-3.6 49.7-14.7 65.7-31.6 12.4-13 19.2-25.1 24.2-43l2.3-7.9.3-104.8.3-104.7H330v93.2c0 56-.4 98-1.1 105.1-2.8 32.3-18.6 55.3-47.4 68.8-17.2 8.1-40.6 11.9-61.2 9.9-45.5-4.3-75.9-27.9-84.9-66-1.6-6.8-1.8-16.4-2.1-109.3L132.9 64H118v100.9z"
|
|
/>
|
|
<path
|
|
d="M149.3 165.7c.4 113.1 0 106.9 7.2 121.8 11.3 23.4 40.7 38.5 75 38.5 34.4 0 63.7-15.1 75.1-38.7 7-14.5 6.7-9.7 7.1-122.1l.4-101.2h-16l-.3 101.7-.3 101.8-2.3 6.4c-4.3 11.8-9.9 18.9-20.2 25.3-12 7.5-25.2 10.8-43.6 10.8-15.3 0-27.7-2.6-39-8.2-8.5-4.1-18.1-13.3-21.7-20.8-5.7-11.7-5.7-10.8-5.7-118.3V64h-16.1l.4 101.7z"
|
|
/>
|
|
<path
|
|
d="M181.2 164.7c.3 100.5.3 100.8 2.4 106 4.1 9.8 11 16 22.7 20 5.9 2.1 9.7 2.6 21.3 3.1 24.9.8 39.8-4.3 48.1-16.5 6.5-9.6 6.3-6.5 6.3-115V64h-16v197.6l-2.7 5.4c-2.2 4.3-3.8 6-7.4 7.8-10.2 5.1-38.6 5.1-48.8 0-3.6-1.8-5.2-3.5-7.3-7.8l-2.8-5.4V64h-16l.2 100.7zm1316 57 .3 157.8h15l.3-157.8.2-157.7h-16l.2 157.7zm31.8.3v158h15V64h-15v158zm31.2-.3.3 157.8 7.8.3 7.7.3V64h-16l.2 157.7zm31.8.3v158.1l7.5-.3 7.5-.3.3-157.8.2-157.7H1592v158zM1099.5 80.6c-39.8 6-69.9 23.7-85.4 50.2-7.7 13.2-11.5 25.3-13.1 41.8-.5 5.6-1 53.2-1 108.6V380h16V278.6c0-66.1.4-104.2 1.1-109.3 4.9-36.5 31.8-62.4 73.9-71.4 8.5-1.8 13.7-2.3 27.5-2.3s19 .5 27.5 2.3c10.9 2.3 25.2 7.5 33 11.9 23.1 13.2 37.5 34.2 40.9 59.5.7 5.1 1.1 43.2 1.1 109.3V380h16v-99.3c0-59-.4-103.1-1-108.7-4.9-46.5-34.4-77.2-85.9-89.2-6.6-1.5-13.1-2-28.1-2.3-10.7-.2-20.8-.1-22.5.1zM742.6 87c-48 5.5-87.7 33.1-108.3 75.1-9.9 20.3-13.6 37-13.6 60.9.1 23.3 3.9 40.3 13.5 59.5 11.2 22.2 26 38.8 46.6 52.2 35.3 23.1 80.4 29.1 121.5 16.1l6.7-2.2v-7.8c0-4.3-.3-7.8-.7-7.8-.5 0-3.1.9-5.9 1.9-46.5 17.7-106.6 2.9-138.3-34-26.9-31.1-35.3-77.6-21.6-118.5 13.8-41 50.8-71.7 95.3-79 14.1-2.3 39-1.4 53.2 1.9 51.8 12.2 85.5 48.9 92.5 100.7 1.2 8.3 1.5 27.4 1.5 92.2V380h15v-85.3c0-92.2-.1-94.6-5.5-113.2-1.4-5-5-14-7.9-20-18.8-39-54.5-65.1-99.6-72.9-11.6-2-33.6-2.8-44.4-1.6z"
|
|
/>
|
|
<path
|
|
d="M1101.5 112.1c-30.1 4.1-51.8 17.8-62.5 39.4-7.1 14.4-7 12.7-7 127.1V380h16V277c0-71.2.3-104.5 1.1-108.2 4.1-19.4 19.1-32.9 43.4-39 7.6-1.9 11.7-2.2 26-2.2s18.4.3 26 2.2c24.2 6 39.4 19.6 43.4 39 .8 3.7 1.1 37 1.1 108.2v103h16.1l-.4-105.8c-.3-117.8.2-109.1-7.4-124.1-4.5-8.9-15.8-20.8-24.6-26-7.1-4.2-18.8-8.4-29.3-10.6-9.5-2-32.2-2.8-41.9-1.4zm-361 6.9c-40.4 6-75.1 36.9-85.2 76-3.1 11.8-4.1 30.9-2.4 43.1 5.1 35.7 22.7 61.2 53.2 76.4 18.3 9.3 30.9 12 54.9 12 19.5 0 27.5-1.3 42.3-6.7l5.7-2.1v-16.4l-8.3 3.3c-11 4.4-18.4 6.2-30 7.3-20.5 2-40.5-1.9-58.3-11.4-21.3-11.2-33.8-26.5-41-50-2.5-8.3-2.8-10.4-2.8-27-.1-15.8.2-18.9 2.1-25.7 3.3-11.2 8.7-21.6 15.8-30.5 20-24.8 48.3-36.3 82.4-33.3 14.2 1.3 24.6 4.1 36.6 10 22.3 10.8 36.5 27.7 44.2 52.5l2.8 9 .3 87.2.3 87.3H869v-80.8c0-83-.3-91.3-4.1-106.2-2.3-9.2-9.5-24.3-15.4-32.4-16.1-22.5-41.7-37.3-72-41.6-8-1.1-29.5-1.1-37 0z"
|
|
/>
|
|
<path
|
|
d="M1096.4 145c-14.8 3.3-24.2 9.7-29.1 19.8l-2.8 5.7-.3 104.7-.2 104.8h15v-98.3c0-58.8.4-100.6 1-104.1 2-12.3 9.7-17.5 27.5-18.5 17.1-1 32.1.2 38 3 6.7 3.3 10.3 8.1 11.5 15.5.6 3.5 1 45.3 1 104.1V380h15l-.2-104.8-.3-104.7-2.8-5.7c-7.3-14.8-24-21.8-51.7-21.7-9.3 0-16 .6-21.6 1.9zM749 150c-24.8 2.3-47.1 17.6-58 39.5-5.8 11.8-7.3 20-6.7 37 .6 15.6 2.4 23.1 8.3 34.5 6.9 13.2 19.4 23.8 35.6 30 22.1 8.5 51.8 7.9 74.2-1.7l6.6-2.8v-7.8c0-4.2-.2-7.7-.4-7.7s-3.7 1.6-7.7 3.5c-30.4 14.3-70.3 9-88.4-11.7-10.4-11.9-15.7-34.8-12.1-51.8 2.4-11.4 6.8-19.3 15.6-28.1 13-13 28.1-18.7 47-17.5 29.6 1.7 49.1 15.9 56.6 41.3 1.6 5.2 1.8 13.8 2.1 89.5l.4 83.8h15l-.3-86.3c-.4-96.7.1-90.4-8-106.5-13-26.2-43.9-40.5-79.8-37.2z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</h1>
|
|
<section class="flows">
|
|
<h2>flows</h2>
|
|
<button class="add-flow add-icon" title="Add a new flow">
|
|
Create a flow
|
|
</button>
|
|
<ul></ul>
|
|
</section>
|
|
<section class="welcome">
|
|
<h2>Welcome to wami</h2>
|
|
<p>Select a flow in the sidebar to get started.</p>
|
|
<p>Or create a new flow by clicking the + button.</p>
|
|
</section>
|
|
<section class="editor hidden">
|
|
<div class="flow-actions">
|
|
<input class="flow-name" type="text" />
|
|
<button
|
|
class="delete-flow delete-icon no-text"
|
|
title="Delete this flow"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<ul class="steps"></ul>
|
|
<button class="add-icon add-step" title="Add a new step to this flow">
|
|
Add a step
|
|
</button>
|
|
</section>
|
|
<section class="images hidden">
|
|
<div class="input image-container empty">
|
|
<div class="instructions">
|
|
<p>
|
|
Drop your image(s) here, or
|
|
<button
|
|
class="browse-images"
|
|
title="Select images from your computer"
|
|
>
|
|
browse</button
|
|
>, or
|
|
<button
|
|
class="use-random-images"
|
|
title="Use random images from the internet"
|
|
>
|
|
use random images</button
|
|
>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flow-actions">
|
|
<button
|
|
class="remove-input delete-icon"
|
|
title="Remove the input images"
|
|
>
|
|
Remove input
|
|
</button>
|
|
<button class="run-flow run-icon" disabled title="Run this flow">
|
|
Run flow
|
|
</button>
|
|
</div>
|
|
<div class="output image-container empty"></div>
|
|
<div class="save-actions">
|
|
<button
|
|
class="download-images download-icon"
|
|
title="Download the output images"
|
|
disabled
|
|
>
|
|
Download
|
|
</button>
|
|
<button
|
|
class="save-images save-icon"
|
|
title="Save the output images"
|
|
disabled
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
class="use-output-as-input up-icon"
|
|
title="Use output images as input"
|
|
disabled
|
|
>
|
|
Use as input
|
|
</button>
|
|
<button
|
|
class="view-images eye-icon"
|
|
title="View and compare input and output images"
|
|
disabled
|
|
>
|
|
View images
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<dialog class="step-chooser" autofocus>
|
|
<form class="steps" method="dialog">
|
|
<button class="close-icon no-text close-dialog" title="Close this dialog">Close</button>
|
|
</form>
|
|
</dialog>
|
|
<dialog class="image-viewer" autofocus>
|
|
<form method="dialog">
|
|
<button class="close-icon no-text close-dialog" title="Close this dialog">Close</button>
|
|
</form>
|
|
<div class="current-image">
|
|
<div class="before"><img src="" alt="The input image" /></div>
|
|
<div class="after"><img src="" alt="The output image, after the flow ran" /></div>
|
|
</div>
|
|
<ul class="list-of-images"></ul>
|
|
</dialog>
|
|
<script type="module" src="app.js"></script>
|
|
<script>
|
|
if ("serviceWorker" in navigator) {
|
|
navigator.serviceWorker.register("./sw.js");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|