121 lines
4.4 KiB
HTML
121 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Image Preview</title>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
#image {
|
|
position: relative;
|
|
/* top: 50%;
|
|
transform: translateY(-50%); */
|
|
vertical-align: middle;
|
|
}
|
|
.container {
|
|
height: calc(100% - 50px);
|
|
overflow: auto;
|
|
text-align: center;
|
|
}
|
|
.toolbar {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
height: 50px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="chrome://__addonRef__/skin/workspace.css" />
|
|
<script>
|
|
window.addEventListener("DOMContentLoaded", (e) => {
|
|
document.querySelector(".container").style["line-height"] = `${
|
|
window.innerHeight - 50
|
|
}px`;
|
|
window.addEventListener("resize", (_e) => {
|
|
document.querySelector(".container").style["line-height"] = `${
|
|
window.innerHeight - 50
|
|
}px`;
|
|
});
|
|
});
|
|
</script>
|
|
<div class="container">
|
|
<img id="image" src="" alt="" />
|
|
</div>
|
|
<div class="toolbar">
|
|
<div class="tooltip" id="left-container">
|
|
<button id="left" class="tool-button">
|
|
<svg
|
|
t="1668665847719"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="6765"
|
|
width="18"
|
|
height="18"
|
|
>
|
|
<path
|
|
d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z"
|
|
p-id="6766"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<span class="tooltiptext">Previous</span>
|
|
</div>
|
|
<div class="tooltip" id="right-container">
|
|
<button id="right" class="tool-button">
|
|
<svg
|
|
t="1668665870223"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="6907"
|
|
width="18"
|
|
height="18"
|
|
>
|
|
<path
|
|
d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z"
|
|
p-id="6908"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<span class="tooltiptext">Next</span>
|
|
</div>
|
|
<div class="tooltip">
|
|
<button id="copy" class="tool-button">
|
|
<svg
|
|
t="1668688365150"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="5240"
|
|
width="18"
|
|
height="18"
|
|
>
|
|
<path
|
|
d="M851.025513 737.324862 400.356301 737.324862c-62.219566 0-112.666535-50.444902-112.666535-112.662943L287.689766 174.012196c0-62.217017 50.446969-112.662943 112.666535-112.662943l450.670235 0c62.219566 0 112.666535 50.444902 112.666535 112.662943l0 450.650747C963.692048 686.879959 913.245079 737.324862 851.025513 737.324862zM907.35878 174.012196c0-31.108508-25.223485-56.33096-56.333268-56.33096L400.356301 117.681236c-31.109783 0-56.334291 25.222451-56.334291 56.33096l0 450.650747c0 31.108508 25.223485 56.331983 56.334291 56.331983l450.670235 0c31.10876 0 56.333268-25.222451 56.333268-56.331983L907.359804 174.012196zM118.687916 399.337057 118.687916 849.988828c0 31.107485 25.223485 56.33096 56.333268 56.33096l450.669212 0c31.109783 0 56.334291-25.222451 56.334291-56.33096l0-56.331983 56.333268 0 0 56.331983c0 62.217017-50.446969 112.660896-112.667559 112.660896L175.021184 962.649723c-62.219566 0-112.667559-50.443879-112.667559-112.660896L62.353625 399.337057c0-62.217017 50.446969-112.662943 112.667559-112.662943l56.334291 0 0 56.33096-56.334291 0C143.9114 343.005075 118.687916 368.228549 118.687916 399.337057z"
|
|
p-id="5241"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<span class="tooltiptext">Copy</span>
|
|
</div>
|
|
<div class="tooltip">
|
|
<button id="pin" class="tool-button"></button>
|
|
<span id="pin-tooltip" class="tooltiptext"></span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|