Symfony Profiler

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="static/style.css" type="text/css" />
<link rel="stylesheet" href="static/css/dark.css" type="text/css" />
<link rel="stylesheet" href="static/css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="static/css/animate.css" type="text/css" />
<link rel="stylesheet" href="static/css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="static/css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#demo_screenshot_image {
overflow: scroll;
}
#demo_screenshot_image.loading, #demo_screenshot_image.loaded {
position: relative;
display: block;
height: 500px;
text-align: center;
}
#demo_screenshot_image img {
max-width: 100%;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333333;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 4px;
}
</style>
<!-- Document Title
============================================= -->
<title>URL to screenshot - STAGING V2</title>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-60509693-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-60509693-3');
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js"></script>
<script type="text/javascript">
(function(){
emailjs.init("user_uwb2AkLgBoXMjJpHvg2kU");
})();
</script>

<script>
"use strict";
!function() {
var t = window.driftt = window.drift = window.driftt || [];
if (!t.init) {
if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
t.factory = function(e) {
return function() {
var n = Array.prototype.slice.call(arguments);
return n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
var i = document.getElementsByTagName("script")[0];
i.parentNode.insertBefore(o, i);
};
}
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('dik48att3r7c');
</script>

</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="sticky-header">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="static/custom/logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="static/custom/logo@2x.png" alt="Canvas Logo"></a>
</div>
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<ul class="one-page-menu">
<li class="current"><a href="#" data-href="#section-home"><div>Home</div></a></li>
<li><a href="#" data-href="#section-features"><div>Features</div></a></li>
<li><a href="#" data-href="#section-pricing"><div>Pricing</div></a></li>
<li><a href="#" data-href="#section-docs"><div>Documentation</div></a></li>
<li><a href="#" data-href="#section-faqs"><div>FAQs</div></a></li>
<li><a href="#" data-href="#section-contact"><div>Contact</div></a></li>
<li><a href="https://rapidapi.com/APILight/api/url-to-screenshot" target="_blank"><div>Subscribe</div></a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div id="section-home" class="heading-block title-center nobottomborder page-section">
<h1>Screenshot any website</h1>
<span>Simple, scallable and customizable!</span>
</div>
<form id="demo_screenshot" action="" method="get" class="landing-wide-form clearfix">
<div class="col_four_fifth nobottommargin">
<h3>Try it now! Enter a url to take a screenshot.</h3>
</div>
<div class="col_four_fifth nobottommargin">
<input id="demo_screenshot_url" type="text" class="form-control form-control-lg not-dark" value="http://www.cnbc.com" placeholder="http://www.website.com">
</div>
<div class="col_one_fifth col_last nobottommargin">
<button class="btn btn-lg btn-danger btn-block nomargin" value="submit" type="submit" style="">Capture</button>
</div>
</form>
<div class="clear"></div>
<div id="demo_screenshot_image" class="col_two_third topmargin nobottommargin">
<img src="static/cnbc.png"/>
</div>
<div class="col_one_third topmargin nobottommargin col_last">
<h3>Screenshots as a Service</h3>

<p>Capturing a screenshot is easy. Automatically capturing screenshots that really look like the target website is much more difficult.</p>
<p><b>Focus on your website and let us do the heavy lifting.</b></p>
<div class="divider divider-short"><i class="icon-circle"></i></div>
<ul class="iconlist iconlist-large iconlist-color">
<li><i class="icon-ok-sign"></i> Choose the screenshot resolution</li>
<li><i class="icon-ok-sign"></i> Emulate mobile devices</li>
<li><i class="icon-ok-sign"></i> Lazy Loading supported</li>
<li><i class="icon-ok-sign"></i> Cloud hosted backend</li>
<li><i class="icon-ok-sign"></i> Available on <a href="https://rapidapi.com/APILight/api/url-to-screenshot" target="_blank">RapidAPI</a></li>
<li><i class="icon-ok-sign"></i> Need help? Want more? <a href="#section-contact">We are here for you!</a></li>
<li><i class="icon-ok-sign"></i> Try us with 1000 <strong>FREE</strong> requests!</li>
</ul>
</div>
<div class="clear"></div>
<div class="divider divider-short divider-center"><i class="icon-circle"></i></div>
<div id="section-features" class="heading-block title-center page-section">
<h2>Features Overview</h2>
</div>
<div class="col_one_third">
<div class="feature-box fbox-plain">
<div class="fbox-icon" data-animate="bounceIn">
<a href="#"><img src="static/images/icons/features/tools.png" alt="Fully customizable"></a>
</div>
<h3>Customizable</h3>
<p>Our API allows you to set your own screen resolution and allocated time. You can also capture a complete webpage.</p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-plain">
<div class="fbox-icon" data-animate="bounceIn" data-delay="200">
<a href="#"><img src="static/images/icons/features/retina.png" alt="Pixel perfect screenshots"></a>
</div>
<h3>Pixel perfect</h3>
<p>Screenshots are not compressed (PNG format), allowing your users to get great quality previews.</p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-plain">
<div class="fbox-icon" data-animate="bounceIn" data-delay="400">
<a href="#"><img src="static/images/icons/features/performance.png" alt="Scalable"></a>
</div>
<h3>Fully scalable</h3>
<p>Our backend is optimized, hosted on the cloud and able to withstand a large number of requests.</p>
</div>
</div>
<div class="clear"></div>
<div class="col_one_third">
<div class="feature-box fbox-plain">
<div class="fbox-icon" data-animate="bounceIn" data-delay="600">
<a href="#"><img src="static/images/icons/features/tick.png" alt="Retina Graphics"></a>
</div>
<h3>Lazy loading supported</h3>
<p>Images and animations loaded when the user scroll over them will be correctly displayed.</p>
</div>
</div>
<div class="col_one_third">
<div class="feature-box fbox-plain">
<div class="fbox-icon" data-animate="bounceIn" data-delay="800">
<a href="#"><img src="static/images/icons/features/responsive.png" alt="Mobile device emulation"></a>
</div>
<h3>Mobile device emulation</h3>
<p>We are able to emulate mobile devices so you can easily get snapshots of mobile websites.</p>
</div>
</div>
<div class="col_one_third col_last">
<div class="feature-box fbox-plain">
<div class="fbox-icon" data-animate="bounceIn" data-delay="1000">
<a href="#"><img src="static/images/icons/features/support.png" alt="World-class support"></a>
</div>
<h3>World-class support</h3>
<p>Need help? Miss a feature? Contact us and we will do our best to meet your requirements!</p>
</div>
</div>
<div class="clear"></div>
<div class="divider divider-short divider-center"><i class="icon-circle"></i></div>
<div id="section-pricing" class="heading-block title-center page-section">
<h2>A clear pricing</h2>
</div>
<div class="row pricing bottommargin clearfix">
<div class="col-lg-3" data-animate="fadeInLeft">
<div class="pricing-box">
<div class="pricing-title">
<h3>Basic</h3>
</div>
<div class="pricing-price">
Free!
</div>
<div class="pricing-features">
<ul>
<li><strong>1000</strong> requests / month</li>
<li>then $0.004 each</li>
<li>Email Support</li>
</ul>
</div>
<div class="pricing-action">
<a href="https://rapidapi.com/APILight/api/url-to-screenshot/pricing" target="_blank" class="btn btn-danger btn-block btn-lg">Sign Up</a>
</div>
</div>
</div>
<div class="col-lg-3" data-animate="fadeInDown" data-delay="250">
<div class="pricing-box">
<div class="pricing-title">
<h3>Professional</h3>
</div>
<div class="pricing-price">
<span class="price-unit">$</span>9.99<span class="price-tenure">/mo</span>
</div>
<div class="pricing-features">
<ul>
<li><strong>5000</strong> requests / month</li>
<li>then $0.003 each</li>
<li>Email Support</li>
</ul>
</div>
<div class="pricing-action">
<a href="https://rapidapi.com/APILight/api/url-to-screenshot/pricing" target="_blank" class="btn btn-danger btn-block btn-lg bgcolor border-color">Sign Up</a>
</div>
</div>
</div>
<div class="col-lg-3" data-animate="fadeInUp" data-delay="500">
<div class="pricing-box best-price">
<div class="pricing-title">
<h3>ULTRA</h3>
<span>Most Popular</span>
</div>
<div class="pricing-price">
<span class="price-unit">$</span>49.99<span class="price-tenure">/mo</span>
</div>
<div class="pricing-features">
<ul>
<li><strong>30000</strong> requests / month</li>
<li>then $0.003 each</li>
<li>Email Support</li>
</ul>
</div>
<div class="pricing-action">
<a href="https://rapidapi.com/APILight/api/url-to-screenshot/pricing" target="_blank" class="btn btn-danger btn-block btn-lg">Sign Up</a>
</div>
</div>
</div>
<div class="col-lg-3" data-animate="fadeInRight" data-delay="250">
<div class="pricing-box">
<div class="pricing-title">
<h3>Mega</h3>
</div>
<div class="pricing-price">
<span class="price-unit">$</span>99.99<span class="price-tenure">/mo</span>
</div>
<div class="pricing-features">
<ul>
<li><strong>100000</strong> requests / month</li>
<li>then $0.002 each</li>
<li>Email Support</li>
</ul>
</div>
<div class="pricing-action">
<a href="https://rapidapi.com/APILight/api/url-to-screenshot/pricing" target="_blank" class="btn btn-danger btn-block btn-lg">Sign Up</a>
</div>
</div>
</div>
</div>
<div class="center">
<a href="https://rapidapi.com/apilight/api/url-to-screenshot" target="_blank">
<img src="static/connect-on-rapidapi-light.png" width="215" alt="Connect on RapidAPI">
</a>
</div>
<div class="clear"></div>
<div class="divider divider-short divider-center"><i class="icon-circle"></i></div>
<div id="section-docs" class="heading-block title-center page-section">
<h2>Documentation</h2>
</div>
<div class="col_one_fifth">
</div>
<div class="col_three_fifth" style="font-size: 16px;">
<p>Our REST API is simple and intuitive. We have at the moment one API endpoint, <b><i>get</i></b>, that returns a PNG screenshot and takes the following five parameters:</p>
<ul>
<li><b>url</b>: The url of the webpage.</li>
<li><b>width</b>: Width of the screen in px.</li>
<li><b>height</b>: Height of the screen in px. Set to -1 if you want to capture the whole webpage.</li>
<li><b>time_allocated</b>: Time in seconds allocated for loading the webpage.</li>
<li><b>base64</b>: If set true, returns the PNG image encoded in base64.</li>
</ul>
<p>
You can test those parameters, subscribe and get an SDK in a pletora of different languages directly in our <a href="https://rapidapi.com/apilight/api/url-to-screenshot" target="_blank">RapidAPI webpage</a>.
</p>
</div>
<div class="col_one_fifth">
</div>
<div class="divider divider-short divider-center"><i class="icon-circle"></i></div>
<div id="section-faqs" class="heading-block title-center page-section">
<h2>Frequently Asked Questions</h2>
<span>We have answered a wide range of Questions for your Convenience</span>
</div>
<div class="col_half nobottommargin">
<h4 id="faq-3"><strong>Q.</strong> How can I access the API?</h4>
<p>Our API is available on <a href="https://rapidapi.com/apilight/api/url-to-screenshot" target="_blank">RapidAPI</a>. Create an account there and you should be good to go!</p>
<div class="line"></div>
<h4 id="faq-2"><strong>Q.</strong> Is there a contract involved?</h4>
<p>No, UrlToScreenshot is a subscription-based service with no contracts. Once your free requests have been used, you either pay a very small fee for each additional request, or you can subscribe for getting a better deal.</p>
<div class="line"></div>
<h4 id="faq-5"><strong>Q.</strong> I have done a mistake and sent too many requests!</h4>
<p><a href="#section-contact" target="_blank">Contact us</a>, we will figure something out.</p>
<div class="line"></div>
<h4 id="faq-1"><strong>Q.</strong> Do you add watermarks on snapshots?</h4>
<p>No we don't, and that is the case for those in the free plan too.</p>
</div>
<div class="col_half nobottommargin col_last">
<h4 id="faq-6"><strong>Q.</strong> I miss some features. Can you help?</h4>
<p>Yes, don't hesitate to <a href="#section-contact" target="_blank">contact us</a>, we will do our best to inform you and meet your requirements.</p>
<div class="line"></div>
<h4 id="faq-7"><strong>Q.</strong> Do you follow redirects?</h4>
<p>Yes!</p>
<div class="line"></div>
<h4 id="faq-9"><strong>Q.</strong> I want to partner.</h4>
<p>We are open to partnerships, <a href="#section-contact" target="_blank">contact us</a>!</p>
<div class="line"></div>
<h4 id="faq-10"><strong>Q.</strong> Can I download and cache the screenshots you provide?</h4>
<p>Yes you can, you are even encouraged to do so!</p>
</div>
<div class="clear"></div>
<div class="divider divider-short divider-center"><i class="icon-circle"></i></div>
<div id="section-contact" class="heading-block title-center page-section">
<h2>Get in Touch with us</h2>
<span>Still have Questions? Miss a feature? Contact Us using the Form below</span>
</div>
<!-- Contact Form
============================================= -->
<div>
<div class="fancy-title title-dotted-border">
<h3>Send us an Email</h3>
</div>
<div class="form-widget">
<div class="form-result"></div>
<form class="nobottommargin" id="contactform" name="template-contactform" action="include/form.php" method="post">
<div class="form-process"></div>
<div class="col_one_third">
<label for="template-contactform-name">Name <small>*</small></label>
<input type="text" id="template-contactform-name" name="name" value="" class="sm-form-control required" />
</div>
<div class="col_one_third">
<label for="template-contactform-email">Email <small>*</small></label>
<input type="email" id="template-contactform-email" name="email" value="" class="required email sm-form-control" />
</div>
<div class="col_one_third col_last">
<label for="template-contactform-phone">Phone</label>
<input type="text" id="template-contactform-phone" name="phone" value="" class="sm-form-control" />
</div>
<div class="clear"></div>
<div>
<label for="template-contactform-subject">Subject <small>*</small></label>
<input type="text" id="template-contactform-subject" name="subject" value="" class="required sm-form-control" />
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-contactform-message">Message <small>*</small></label>
<textarea class="required sm-form-control" id="message" name="message" rows="6" cols="30"></textarea>
</div>
<div class="col_full hidden">
<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>
<div class="col_full">
<button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
</div>
<input type="hidden" name="prefix" value="template-contactform-">
</form>
</div>
</div>
</div>
<div id="section-buy" class="section page-section footer-stick">
<div class="container clearfix">
<div class="heading-block title-center nobottomborder">
<h2>Enough? Start Building!</h2>
</div>
<div class="center">
<a href="https://rapidapi.com/apilight/api/url-to-screenshot" target="_blank">
<img src="static/connect-on-rapidapi-light.png" width="215" alt="Connect on RapidAPI">
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<!-- Copyrights
============================================= -->
<div id="copyrights">
<div class="container clearfix">
<div class="col_half">
Copyrights © 2020 All Rights Reserved by URLtoScreenshot.com<br>
</div>
</div>
</div>
</footer>
</div>
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- External JavaScripts
============================================= -->
<script src="static/js/jquery.js"></script>
<script src="static/js/plugins.js"></script>
<!-- Footer Scripts
============================================= -->
<script src="static/js/functions.js"></script>
<script src="static/js/jquery.gmap.js"></script>
<script>
var $spinner = $('<div class="css3-spinner infinite-scroll-request" style="display: block;"><div class="css3-spinner-ball-pulse-sync"><div></div><div></div><div></div></div></div>');
jQuery('#demo_screenshot').submit(function() {
var $demo = $('#demo_screenshot_image');
$demo.empty();
$demo.append($spinner);
$demo.removeClass('loaded');
$demo.addClass('loading');
var url = $('#demo_screenshot_url').val();
jQuery.ajax({
url: "https://api.apilight.com/screenshot/get",
data: {'url': url, 'base64': 1, width: 1366, height: 1024},
type: "GET",
dataType: 'text',
beforeSend: function(xhr){xhr.setRequestHeader('x-api-key', 'j1gIaMwfU545P2ymFWA0gan7yHr7Yla05CJnMheL');},
success: function(data) {
$demo.removeClass('loading');
$demo.addClass('loaded');
var $img = $('<img></img>');
$img.attr('src', 'data:image/png;base64, ' + data);
$demo.empty();
$demo.append($img);
console.log($img);
}
});
return false;
});
var myform = $("form#contactform");
myform.submit(function(event){
event.preventDefault();
// Change to your service ID, or keep using the default service
var service_id = "default_service";
var template_id = "contact_urltoscreenshot";
myform.find("button").text("Sending...");
emailjs.sendForm(service_id,template_id,myform[0])
.then(function(){
alert("Sent!");
myform.find("button").text("Your message has been sent, thank you!");
}, function(err) {
alert("Failed!\r\n Response:\n " + JSON.stringify(err));
myform.find("button").text("Send");
});
return false;
});
</script>
</body>
</html>

templates/index.html.twig line 1