-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
43 lines (43 loc) · 3.65 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Full-Page Screenshot</title>
<style>
@keyframes turn{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}100%{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;line-height:1.4;margin:0;padding:0}a{color:#2196F3;text-decoration:none}a:hover,a:active{color:#1565C0}.container{padding:1rem;position:relative}#wrap{width:100%;min-width:15rem}.wrap__icon{text-align:center;margin-bottom:1rem}.loader{animation:rotation 1.7s linear infinite;width:3rem;height:auto;stroke:#2196F3}.circle{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:turn 1.7s ease-in-out infinite}.text__heading{font-size:0.75rem;margin-top:0;margin-bottom:-0.5rem;text-align:center}.text__description{color:rgba(0,0,0,0.5);font-size:0.75rem;margin-top:0.75rem;margin-bottom:0}.error,.warning{box-shadow:inset 0 1px 0 rgba(0,0,0,0.15)}.warning{background-color:#FFECB3}.error{background-color:#FFCDD2}.error a{color:#F44336}#progressCounter{position:absolute;top:2rem;left:50%;transform:translateX(-50%);font-size:0.75rem;text-align:center;color:#2196F3}#wrap .warning,#wrap .error{display:none}#wrap>#loading{display:block}p{margin:0;word-wrap:break-word}
</style>
</head>
<body>
<div id="wrap">
<div id="loading" class="container">
<div class="wrap__icon">
<svg class="loader" height="65px" viewbox="0 0 66 66" width="65px" xmlns="http://www.w3.org/2000/svg"><circle class="circle" cx="33" cy="33" fill="none" r="30" stroke-linecap="round" stroke-width="6"></circle></svg>
<span id="progressCounter"></span>
</div>
<div class="wrap__text">
<h1 class="text__heading">Capturing page…</h1>
<p class="text__description">Your screenshot will be opened in a new tab once finished.</p>
</div>
</div>
<div class="warning | container" id="split-image">
<div class="wrap__text">
<h1 class="text__heading">Multiple images</h1>
<p class="text__description">Your page is too large to capture as one image. It will be split into <span id="screenshot-count">multiple</span> images.</p>
</div>
</div>
<div class="error | container" id="invalid">
<h1 class="text__heading">Invalid URL</h1>
<p class="text__description">This extension can’t be run on this URL because of Chrome Web Store policies. Please try another page on the web.</p>
</div>
<div class="error | container" id="uh-oh">
<h1 class="text__heading">Uh oh, something went wrong!</h1>
<p class="text__description">Try reloading the page, verifying javascript is enabled, and running this again.</p>
<p class="text__description">If the problem persists, please report the error in the <a href="https://chrome.google.com/webstore/support/fdpohaocaechififmbbbbbknoalclacl?hl=en&gl=US#bug">Chrome webstore</a>. Please include the URL you tried it on and the version of Chrome.</p>
</div>
</div><!-- JavaScript and HTML must be in separate files for security. -->
<script src="api.js">
</script>
<script src="popup.js">
</script>
</body>
</html>