<section class="margin-top-xs-55" style="position: relative;
">
	<div class="header-text mb-0">
		<div>
			<div class="row ">
				<div class="col-lg-12 col-md-12 col-sm-12 text-center">
					<svg style="width:100%;height: 450px;" viewBox="0 0 1280 679" preserveAspectRatio="none" width="100%" height="100%">
						<defs>
							<g id="shape">
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="#D9D9D9"></path>
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="url(#gradient)"></path>
							</g>
							<radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(640 -261.197) rotate(90) scale(815.683 664.92)">
								<stop stop-color="#4169E1"></stop>
								<stop offset="1" stop-color="#071A34"></stop>
							</radialGradient>
						</defs>
						<use href="#shape"></use>
					</svg>
					<div class="frame-image">
						<div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
					</div>
					<div class="text-body main-header-text">
						<h1 class="text-center text-white"><b>The #1 Google SERP Preview Tool</b></h1>
						<h4 class="text-center text-white">Increase your organic CTR by optimizing your Page Title & Meta Description Length</h4>
					</div>
				</div>

				<div class="floating-icons">
					<i class="icon-facebook"></i>
					<i class="icon-adwords"></i>
					<i class="icon-seo"></i>
					<i class="icon-instagram"></i>
					<i class="icon-activecampaign"></i>
					<i class="icon-wordpress"></i>
					<i class="icon-shopify"></i>
					<i class="icon-youtube"></i>
					<i class="icon-analytics"></i>
					<i class="icon-kk"></i>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="sptb">
	<div class="container">
		<div class="row">

			<style type="text/css">
				.change_width {
					position: absolute;
					z-index: 9999;
					right: 10px;
					font-size: 20px;
					text-align: center;
				}

				.change_width ul li {
					border: .5px solid #18113c33;
					padding: 5px;
				}

				.change_width .fa-television {
					font-size: 15px;
				}

				.change_width .fa-mobile {
					font-size: 25px;
				}
			</style>
			<script type="text/javascript">
				function chnage_size(e) {
					if (e == 2) {
						$('.size').css('width', "50%");
						$('.icon_google').hide();
						$('#google_icon').hide();
						$('#google_content').addClass('col-md-12');
						$('#google_content').removeClass('col-md-10');
						$('#tips').hide();
					} else {
						$('.size').css('width', "100%");
						$('.icon_google').show();
						$('#google_icon').show();
						$('#google_content').addClass('col-md-10');
						$(".icon_google").removeAttr("style");
						$('#google_content').removeClass('col-md-12');
						$('#tips').show();
					}
				}
			</script>
			<div class="col-md-12">
				<div class="card border-0 shadow-none bg-transparent">
					<div class="row justify-content-center">
						<div class="col-lg-8 col-xl-8 col-md-12 mx-auto">
							<div class="card mb-0 single-page size customerpage contact">
								<div class="change_width d-none d-lg-block">
									<ul>
										<li><a href="javascript:void(0)" onclick="chnage_size(1)"><i class="fa fa-television"></i></a></li>
										<li class="mt-3"><a href="javascript:void(0)" onclick="chnage_size(2)"><i class="fa fa-mobile"></i></a></li>
									</ul>
								</div>
								<div class="card-body wrapper wrapper2 box-shadow-0">
									<div id="google-snippet">
										<div class="row">
											<div class="col-md-2 d-none d-lg-block icon_google">
												<img loading="lazy" src="<?php echo base_url() ?>assets/google.png" alt="Google SERP preview tool" id="google_icon">
											</div>
											<div class="col-md-10" id="google_content">
												<div class="snippet-box">
													<span class="snippet-title">For Example: #1 Digital Marketing Company - Example.com</span><br>
													<span class="snippet-url">http://www.example.com</span><br>
													<span class="snippet-description">Write your meta description to tell the Google users that you are the best in your industry!<br><strong id="tips">Tip: Use natural language rather than keyword stuffing.</strong></span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-8 col-xl-8 col-md-12 mx-auto mt-5">
							<div class="card mb-0 single-page customerpage contact">
								<div class="card-body wrapper wrapper2 box-shadow-0">
									<div class="name">
										<label>Page title <span id="alert"></span></label>
										<input type="text" class="form-control info-textarea pagetitle" name="info-textarea" oninput="page_title(this), titlewithpx(this.value);" placeholder="Enter Page Title">
										<span>Characters : <b class="characters">0</b></span>
										<span class="px_class">Pixels : <b class="titlepx">0</b></span>
									</div>
									<div class="name mt-5">
										<label>Page URL</label>
										<input type="text" class="form-control snippetUrl" name="snippetUrl" oninput="urlwithpx(this);" placeholder="Enter Page URL">
									</div>
									<div class="name mt-5">
										<label>Page Meta Description <span id="alert-d"></span></label>
										<textarea rows="3" cols="8" class="form-control descriptionchar description" name="description" oninput="descriptionwithpx(this.value);" placeholder="Enter Meta Description"></textarea>
										<span>Characters : <b class="descriptionlen">0</b></span>
										<span class="px_class">Pixels : <b class="descriptionpx">0</b></span>
									</div>
									<canvas id="titleCanvas" class="d-none"></canvas>
									<canvas id="descriptioncanvas" class="d-none"></canvas>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!--Section-->
<script type="text/javascript">
	function titlewithpx(text) {
		var titlecanvas = document.getElementById('titleCanvas');
		var context = titlecanvas.getContext('2d');
		var x = titlecanvas.width / 2;
		var y = titlecanvas.height / 2 - 10;
		var text = text;

		context.font = '19.95px Arial';
		context.fillText(text, x, y);

		// get text metrics
		var metrics = context.measureText(text);
		var width = Math.round(metrics.width);
		var titlepx = $(".titlepx");
		titlepx.html(width);

		var pagetitle = $(".pagetitle").val();
		if (width <= 534) {
			var seoTitle = pagetitle.slice(0, pagetitle.length);
			$(".snippet-title").html(seoTitle);
		} else if (pagetitle.length > 65 && width < 534) {
			var seoTitle = pagetitle.slice(0, 70);
			$(".snippet-title").html(seoTitle + '....');
		} else {
			var seoTitle = pagetitle.slice(0, 65);
			$(".snippet-title").html(seoTitle + '....');
		}

		if (width < 1) {
			$(".snippet-title").html("For Example: #1 Digital Marketing Company - Example.com");
		}

		if (width < 1) {
			$("#signal").removeClass("toosmall good average");
			$("#alert").html("");
		} else if (width > 1 && width < 245) {
			$("#alert").html("<i class='fa fa-warning' style='color:red'></i> Page title is " + width + " pixel(s) long <b style='color:red'>— Your page title is too short.</b>");
		} else if (width > 245 && width < 570) {
			$("#alert").html("<i class='fa fa-check-circle' style='color:green'></i> Page title is " + width + " pixel(s) long <b style='color:green'> — Your page title is an acceptable length</b>");
		} else if (width > 570) {
			$("#alert").html("<i class='fa fa-warning' style='color:red'></i> Page title is " + width + " pixel(s) long <b style='color:red'>— Page titles should be around 580 pixels in length.</b>");
		}
	}

	function page_title(e) {
		var pagetitlelength = $(".pagetitle").val().length;
		if (pagetitlelength < 1) {
			$(".snippet-title").html("For Example: #1 Digital Marketing Company - Example.com");
			$('.characters').html(0);
			$('.snippet-title').css("color", "#1a0dab");
		} else if (pagetitlelength > 87) {
			$('.snippet-title').css("color", "red");
			$('.characters').html(pagetitlelength)
		} else {
			$(".snippet-title").html(e.value);
			$('.characters').html(pagetitlelength);
			$('.snippet-title').css("color", "#1a0dab");
		}

	}

	function urlwithpx(e) {
		var descriptionchar = $(".snippetUrl").val().length;
		if (descriptionchar < 1) {
			$(".snippet-url").html("http://www.example.com");
		} else {
			$(".snippet-url").html(e.value);
		}
	}

	function descriptionwithpx(text) {
		var descriptioncanvas = document.getElementById('descriptioncanvas');
		var descriptioncontext = descriptioncanvas.getContext('2d');
		var descriptionx = descriptioncanvas.width / 2;
		var descriptiony = descriptioncanvas.height / 2 - 10;
		var descriptiontext = text;
		descriptioncontext.font = '13px Arial';
		descriptioncontext.fillText(descriptiontext, descriptionx, descriptiony);
		var descriptionmetrics = descriptioncontext.measureText(descriptiontext);
		var descriptionwidth = Math.round(descriptionmetrics.width);
		var descriptionpx = $(".descriptionpx");
		descriptionpx.html(descriptionwidth);
		if (descriptionwidth < 1) {
			$("#alert-d").html("");
		} else if (descriptionwidth > 1 && descriptionwidth < 400) {
			$("#alert-d").html("<i class='fa fa-warning' style='color:red'></i> Meta description is " + descriptionwidth + " pixel(s) long <b style='color:red'>— Your meta description is too short.</b>");
		} else if (descriptionwidth > 400 && descriptionwidth < 920) {
			$("#alert-d").html("<i class='fa fa-check-circle' style='color:green'></i> Meta description is " + descriptionwidth + " pixel(s) long <b style='color:green'>— Your meta description is an acceptable length.</b>");
		} else if (descriptionwidth > 1000) {
			$("#alert-d").html("<i class='fa fa-warning' style='color:red'></i> Meta description is " + descriptionwidth + " pixel(s) long <b style='color:red'>— Meta descriptions should be around 920 pixels in length.</b>");
		}
		var descriptionchar = $(".descriptionchar").val();
		var descriptionlength = $(".descriptionchar").val().length;
		$(".descriptionlen").html(descriptionlength);


		if (descriptionwidth <= 923) {
			var seodesc = descriptionchar.slice(0, descriptionlength)
			$(".snippet-description").html(seodesc);
		} else if (descriptionlength > 155 && descriptionwidth < 923) {
			var seodesc = descriptionchar.slice(0, 165)
			$(".snippet-description").html(seodesc + "...");
		} else {
			var seodesc = descriptionchar.slice(0, 155)
			$(".snippet-description").html(seodesc + "...");
		}


		if (descriptionwidth < 1) {
			$(".snippet-description").html("Write your meta description to tell the Google users that you are the best in your industry!<br><strong>Tip: Use natural language rather than keyword stuffing.</strong>");
		}
	}
</script>
<style type="text/css">
	.px_class {
		float: right;
	}

	.single-page .wrapper.wrapper2 {
		color: #000;
	}

	.pagetitle,
	.snippetUrl,
	.description {
		font-size: 16px;
		margin-top: 5px;
		border-radius: 0px;
		border-bottom: 3px solid #008329;
		width: 650px;
	}

	.snippet-box {
		line-height: 1.5em;
	}

	.snippet-url {
		color: #006621;
		font-style: normal;
		white-space: nowrap;
		font-family: arial, sans-serif;
		font-weight: normal;
		font-size: 14px;
	}

	.snippet-description {
		padding-right: 5px;
		word-wrap: break-word;
		color: #545454;
		font-family: arial, sans-serif;
		font-weight: normal;
		font-size: 13px;
	}

	.snippet-title {
		color: #1a0dab;
		font-weight: normal;
		font-size: 18px;
		font-family: arial, sans-serif;
	}

	#google-snippet {
		background-color: #ffffff;
		/*  margin-bottom: 15px; */
		text-align: left;
		padding-right: 10px;
	}

	@media (min-width: 1199px) {
		#google-snippet {
			height: 95px;
		}
	}

	#google_icon {
		width: 77px;
		height: 75px;
		margin-top: 10px;
		margin-left: 27px;
	}
</style>