forked from cheeaun/puppetron
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (124 loc) · 3.47 KB
/
index.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Puppetron</title>
<link href="https://fonts.googleapis.com/css?family=Signika:400,700" rel="stylesheet">
<style>
html {
display: flex;
height: 100%;
}
body {
margin: auto;
width: 100%;
padding: 0 .5em;
}
body, * {
font-family: Signika, sans-serif;
font-weight: 400;
color: #00667A;
text-align: center;
}
body, button, input {
font-size: 30px;
}
h1 {
font-weight: 700;
font-size: 60px;
text-shadow: 0 1px 20px #60E8EE;
margin: 0 0 .25em;
}
* {
box-sizing: border-box;
}
input[type=url]{
display: inline-block;
width: 90%;
max-width: 600px;
padding: .45em;
margin: .5em;
border: 0;
border-radius: 0;
background-color: #D7FCFD;
}
input[type=url]:focus{
outline: 3px solid #00667A;
}
button {
border-radius: 0;
border: 0;
padding: .45em 1em;
margin: .5em;
width: 90%;
max-width: 15ex;
color: rgba(255,255,255,.75);
background-color: #00667A;
box-shadow: 0 1px 10px #60E8EE;
}
button:hover {
color: rgba(255,255,255,1);
box-shadow: 0 1px 30px #60E8EE;
text-shadow: 0 0 5px #60E8EE;
}
button:active {
color: rgba(255,255,255,.55);
transform: scale(.95);
}
footer {
font-size: 16px;
}
</style>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAqFBMVEUAZnr///8ETk5gkJ0BYXFcfn4DWGD2+PgBY3X5+vq5xcVEgJABYnQCXWk8aGgCW2YDUlf8/f3w9PXq7/Dh6eva4+bf5OS6zNK6ys2iu8Odr6+LoaF9lpZKg5NkhIRQdXUCXmwKT0/n7e/X3+HR3eHX3t7K2Ny/0NXAy8uwxcu/ysqywMCbt7+Ztb2hsrKTp6h5k5MxdocabH8OZnlDbW0CX20qXV0SUlLsNjc3AAAAwElEQVQ4y83Rxw6CQBSF4fGI9GYX6fbey/u/mTAhYXMvKxP9VyfhS5jMiD/KWi2Gg1lP6w3XgUWBdquuu73SoE6LaVA3v9Ngegn3mlxnmwQdAKlRrpHPAO/pTORB3w4NFCGOcqY+Cw5yJmBBIOcLNgNu/XL1AYUG8ViuDchfjJaD6ipd+I03GQJqAzBOOaCzwNi5ABz6LaIocXMUeYJ7C5mqCw54WaZUX7mbLPoRsMYT0zQfBWBTUNQEbLVMF1/vA1j8CpImG+ecAAAAAElFTkSuQmCC">
<h1>Puppetron</h1>
<form id="formtron">
<input type="url" name="url" required placeholder="Enter a URL">
<br/>
<button name="screenshot">Screenshot</button>
<button name="render">Render</button>
<button name="pdf">PDF</button>
</form>
<footer><p>Very inspired by <a href="https://github.com/GoogleChrome/rendertron" target="_blank">Rendertron</a>. Documentation and project on <a href="https://github.com/cheeaun/puppetron" target="_blank">GitHub</a>.</p></footer>
<script>
function encode(url){
return url.replace(/\?.*/i, function(m){
return encodeURIComponent(m);
});
}
var action;
formtron.onsubmit = function(e){
e.preventDefault();
var url = '/' + action + '/' + encode(formtron.url.value);
if (action == 'screenshot'){
location.href = url + '?width=' + window.innerWidth + '&height=' + window.innerHeight;
} else {
location.href = url;
}
}
formtron.screenshot.onclick = function(){
action = 'screenshot';
}
formtron.render.onclick = function(){
action = 'render';
}
formtron.pdf.onclick = function(){
action = 'pdf';
}
var protocol = 'http://';
formtron.url.onpaste = function(e){
const text = e.clipboardData.getData('text');
if (/https?:\/\//.test(text)) {
e.preventDefault();
formtron.url.value = text;
}
}
formtron.url.onfocus = function(){
if (formtron.url.value.trim() == '') {
formtron.url.value = protocol;
}
}
formtron.url.onblur = function(){
if (formtron.url.value.trim() == protocol) {
formtron.url.value = '';
}
}
</script>