save-as-ebook/web-extension/menu.html

163 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-holder {
padding: 2px;
margin: 0;
width: 250px;
background-color: white;
}
#menuTitle {
font-size: 15px;
font-weight: bold;
padding: 5px 0;
font-family: sans-serif;
}
button {
font-family: sans-serif;
font-size: 14px;
width: 100%;
padding: 8px 0;
padding-left: 8px;
border: none;
background-color: white;
text-align: left;
outline: none;
}
button:hover {
background-color: #007fff;
color: white;
cursor: pointer;
}
#busy {
background-color: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
display: none;
position: fixed;
top: 0;
margin: 0;
padding: 0;
}
.spinner {
height: 28px;
width: 28px;
animation: rotate 0.8s infinite linear;
border: 8px solid #fff;
border-right-color: transparent;
border-radius: 50%;
left: 40%;
top: 40%;
position: absolute;
}
.wait-message {
font-size: 20px;
color: white;
padding: 5px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#styleLabel {
padding: 5px 0;
font-family: sans-serif;
font-size: 15px;
padding: 7px 0;
background-color: white;
}
#styleLabel:disabled {
color: gray;
}
#allStylesList {
display: inline-block;
width: 100%;
padding: 3px;
}
#includeStyle {
font-family: sans-serif;
font-size: 14px;
padding: 0;
padding-bottom: 8px;
border-bottom: dashed 1px #ccc;
background-color: white;
text-align: left;
}
select {
font-family: sans-serif;
font-size: 14px;
padding: 2px;
outline: none;
}
#includeStyleCheck {
outline: none;
}
</style>
</head>
<body>
<div class="menu-holder">
<div id="menuTitle">Save as eBook:</div>
<hr/>
<div id="includeStyle"><input type="checkbox" name="button" id="includeStyleCheck"></input>Include Style</div>
<div id="customStyles">
<div id="styleLabel">Custom Style:</div>
<div>
<select id="allStylesList"></select>
</div>
<div class="">
<button id="applyStyle" type="button" name="button" style="display:inline-block;width:47%;border-right:solid 1px black;">Apply</button>
<button id="editStyles" type="button" name="button" style="display:inline-block;width:47%;">Edit Styles ...</button>
</div>
</div>
<hr/>
<button id="savePage" type="button" name="button">Save Page</button>
<button id="saveSelection" type="button" name="button">Save Selection</button>
<hr/>
<button id="pageChapter" type="button" name="button">Add Page as Chapter</button>
<button id="selectionChapter" type="button" name="button">Add Selection as Chapter</button>
<hr/>
<button id="editChapters" type="button" name="button">Edit Chapters ...</button>
</div>
<div id="busy">
<div class="spinner"></div>
<div class="wait-message">Please Wait...</div>
</div>
<script src="jquery.js" charset="utf-8"></script>
<script src="filesaver.js" charset="utf-8"></script>
<script src="jszip.js" charset="utf-8"></script>
<script src="jszip-utils.js" charset="utf-8"></script>
<script src="utils.js" charset="utf-8"></script>
<script src="saveEbook.js" charset="utf-8"></script>
<script src="menu.js" charset="utf-8"></script>
</body>
</html>