<!doctype html>
<!--
// WorkFlowy clipper: popup.html
// by Mike Rosulek <rosulekm@eecs.oregonstate.edu>
// available under MIT license
-->
<html>
<head>
<title>Save Album to WorkFlowy</title>
<style>
body {
background-color: rgb(42, 49, 53);
color: white;
}
* {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
box-sizing: border-box;
}
#config, #clip, #info {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px;
width: 200px;
margin: 0 auto;
}
#content-type-buttons {
display: flex;
flex-direction: column;
gap: 4px;
}
.config > #clip {
display: none;
}
.clip > #config {
display: none;
}
.info > #clip, .info > #config {
display: none;
}
.form input, .form textarea, button {
width: 100%;
}
button {
background-color: rgb(56, 189, 248);
color: rgb(42, 49, 53);
border: none;
border-radius: 3px;
cursor: pointer;
padding: 4px;
text-align: left;
font-weight: bold;
}
button:hover {
background-color: white;
}
a, a:visited {
color: rgb(56, 189, 248);
}
</style>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body class="clip">
<div id="clip">
<div class="form"><input id="name" placeholder="Name" tabindex=1></div>
<div class="form"><textarea id="description" placeholder="Note" tabindex=2></textarea></div>
<small><a id="inboxlink" href="" tabindex=4>Go to Inbox</a></small>
<button id="clipbutton" tabindex=3>Save</button>
</div>
<div id="info">
</div>
<div id="config">
<div id="status"></div>
<div id="content-type-buttons"></div>
<button id="resetbutton">Resync</button>
</div>
</body>
</html>