manet
Version:
Website screenshot service powered by Node.js, SlimerJS and PhantomJS
180 lines (146 loc) • 7.92 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><![endif]-->
<meta name="author" content="Vladislav Bauer"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Manet</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="css/pure-min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="header">
<h1><a href="https://github.com/vbauer/manet" title="Github">Manet</a></h1>
<h2>Website screenshot service</h2>
</div>
<div class="main">
<form class="pure-form pure-form-aligned" method="get" action="">
<fieldset>
<div class="pure-control-group">
<label for="open">
<button id="open" name="open" class="pure-button pure-button-primary" title="Capture screenshot">Open</button>
</label>
<input id="address" name="address" type="text" readonly>
</div>
<div class="pure-control-group">
<label for="url">Site address</label>
<input id="url" name="url" type="text" placeholder="URL" maxlength="1024" value="google.com" autofocus>
</div>
<div class="pure-control-group">
<label for="width">Width</label>
<input id="width" name="width" type="number" min="0" placeholder="Width">
</div>
<div class="pure-control-group">
<label for="height">Height</label>
<input id="height" name="height" type="number" min="0" placeholder="Height">
</div>
<div class="pure-control-group">
<label for="paperFormat">Paper format</label>
<select id="paperFormat" name="paperFormat">
<option label="Default" selected></option>
<option value="letter">Letter</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
<option value="A4">A4</option>
<option value="A5">A5</option>
</select>
</div>
<div class="pure-control-group">
<label for="paperOrientation">Paper orientation</label>
<select id="paperOrientation" name="paperOrientation">
<option label="Default" selected></option>
<option value="portrait">Portrait</option>
<option value="landscape">Landscape</option>
</select>
</div>
<div class="pure-control-group">
<label for="zoom">Zoom</label>
<input id="zoom" name="zoom" type="number" step="0.01" min="0" placeholder="Zoom">
</div>
<!-- See: https://github.com/laurentj/slimerjs/issues/259 -->
<div class="pure-control-group">
<label for="quality">Quality (0-1)</label>
<input id="quality" name="quality" type="number" step="0.01" min="0" max="1" placeholder="Quality">
</div>
<div class="pure-control-group">
<label for="delay">Delay (ms)</label>
<input id="delay" name="delay" type="number" min="0" placeholder="Delay">
</div>
<div class="pure-control-group">
<label for="format">Output format</label>
<select id="format" name="format">
<option label="Default" selected></option>
<option value="png">PNG</option>
<option value="jpg">JPG</option>
<option value="pdf">PDF</option>
<option value="html">HTML</option>
<option value="bmp">BMP</option>
<option value="ppm">PPM</option>
<option value="ico">ICO</option>
</select>
</div>
<div class="pure-control-group">
<label for="js" class="pure-checkbox">Enable JavaScript</label>
<input id="js" name="js" type="checkbox" checked>
</div>
<div class="pure-control-group">
<label for="images" class="pure-checkbox">Enable images</label>
<input id="images" name="images" type="checkbox" checked>
</div>
<div class="pure-control-group">
<label for="force" class="pure-checkbox">Force reload</label>
<input id="force" name="force" type="checkbox">
</div>
<div class="pure-control-group">
<label for="selector">Wait for DOM element</label>
<input id="selector" name="selector" type="text" maxlength="1024" placeholder="CSS selector">
</div>
<div class="pure-control-group">
<label for="selectorCrop" class="pure-checkbox">Crop page by DOM element</label>
<input id="selectorCrop" name="selectorCrop" type="checkbox">
</div>
<div class="pure-control-group">
<label for="selectorCropPadding">Crop padding</label>
<input id="selectorCropPadding" name="selectorCropPadding" type="number" placeholder="0">
</div>
<div class="pure-control-group">
<label for="callback">Callback URL</label>
<input id="callback" name="callback" type="text" maxlength="1024" placeholder="URL">
</div>
<div class="pure-control-group">
<label for="agent">User agent</label>
<input id="agent" name="agent" type="text" maxlength="1024" placeholder="User-Agent">
</div>
<div class="pure-control-group">
<label for="user">User name</label>
<input id="user" name="user" type="text" maxlength="256" placeholder="User">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" name="password" type="text" maxlength="256" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="headers">Headers</label>
<input id="headers" name="headers" type="text" maxlength="1024" placeholder="Format: key1=value1;key2=value2;...">
</div>
<div class="pure-control-group">
<label for="clipRect">Clip rectangle</label>
<input id="clipRect" name="clipRect" type="text" maxlength="1024" placeholder="Format: top,left,width,height">
</div>
<div class="pure-control-group">
<label for="engine">Engine</label>
<select id="engine" name="engine">
<option label="Default" selected></option>
<option value="phantomjs">PhantomJS</option>
<option value="slimerjs">SlimerJS</option>
</select>
</div>
</fieldset>
</form>
</div>
</body>
</html>