<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>TWITTER POST COUNTING TOOL</b></h1>
						<h4 class="text-center text-white">As a platform known for brevity and concision, Twitter’s 280 character limit is arguably as much a defining feature of its brand as the little blue bird for which is the website’s iconic logo.</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">


			<div class="col-md-12">
				<div class="card border-0 shadow-none bg-transparent">
					<div id="snackbar"></div>
					<div class="row">

						<div class="col-lg-7 col-xl-7 col-md-7 mt-5">
							<div class="card mb-0 single-page customerpage contact">
								<div class="card-body wrapper wrapper2 box-shadow-0" style="border :2px dotted #be1502;padding:0;">
									<div class="name">
										<textarea rows="10" cols="5" class="form-control info-textarea" name="info-textarea" oninput="getvalue();" placeholder="Write or Paste your content to count" id="usertext" spellcheck="true"></textarea>
									</div>
								</div>
							</div>
							<div class="card mb-0 single-page customerpage contact mt-3">
								<div class="card-body wrapper wrapper2 box-shadow-0 text-center">
									<div class="name">
										<button style="width:32.5%" class="btn transformBtn uppercase text-white" onclick="showMsg('Text Converted in Uppercase')">UPPERCASE</button>
										<button style="width:32.5%" class="btn btn-secondary transformBtn lowercase" onclick="showMsg('Text Converted in Lowercase')">lowercase</button>
										<button style="width:32.5%" class="btn transformBtn titlecase text-white" onclick="showMsg('Text Converted in Titlecase')">Titlecase</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-5 col-xl-5 col-md-5 mt-5">
							<div class="card mb-0 single-page customerpage contact">
								<div class="card-body wrapper wrapper2 box-shadow-0">
									<div class="name">
										<div class="status-bar">
											<ul>
												<li class="hidden-xs">
													<div class="badge remaning_c">280</div><span class="msg">Characters REMAINING</span>
												</li>
												<li class="hidden-xs">
													<div class="badge charwithspace">0</div><span class="msg">Characters with spaces</span>
												</li>
												<li class="hidden-xs">
													<div class="badge charwithoutspace">0</div><span class="msg">Characters without spaces</span>
												</li>
												<li class="hidden-xs">
													<div class="badge words">0</div><span class="msg">Total Words</span>
												</li>
												<li class="hidden-xs">
													<div class="badge whitespaces">0</div><span class="msg">Total Whitespaces</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<script type="text/javascript">
	$(".uppercase").click(function() {
		var fieldtocopy = $(".info-textarea").val();
		var fieldtocopy = fieldtocopy.toUpperCase();
		$(".info-textarea").val(fieldtocopy);
	});

	$(".lowercase").click(function() {
		var fieldtocopy = $(".info-textarea").val();
		var fieldtocopy = fieldtocopy.toLowerCase();
		$(".info-textarea").val(fieldtocopy);
	});

	$(".titlecase").click(function() {
		var fieldtocopy = $(".info-textarea").val();
		var fieldtocopy = fieldtocopy.toLowerCase().split(' ');
		for (var i = 0; i < fieldtocopy.length; i++) {
			fieldtocopy[i] = fieldtocopy[i].charAt(0).toUpperCase() + fieldtocopy[i].slice(1) + " ";
		}

		fieldtocopy = fieldtocopy.join('');
		$(".info-textarea").val(fieldtocopy);
	});

	function showMsg(msgtext) {
		var text = $(".info-textarea").val();
		if (text == '') {
			alert("Please Enter Text");
			return false;
		} else {
			var x = document.getElementById("snackbar");
			x.innerHTML = msgtext;
			x.className = "show";
			setTimeout(function() {
					x.className = x.className.replace("show", "");
				},
				3000
			);
		}
	};

	function getvalue() {
		var fieldlength = $(".info-textarea").val().length;
		$(".charwithspace").html(fieldlength);

		var fieldlength1 = $(".info-textarea").val().split(/[\s\.\?]+/).length;
		var whitespaces = fieldlength1 - 1;

		var fieldlength2 = fieldlength - fieldlength1 + 1;
		$(".charwithoutspace").html(fieldlength2);
		$(".whitespaces").html(whitespaces);

		if (fieldlength < 1) {
			$('.remaning_c').html("280");
		} else {
			var count = 280 - fieldlength;
			$('.remaning_c').html(count);
		}


		var fieldvalue = $.trim($(".info-textarea").val()).length;

		if (fieldvalue >= 1) {
			// var fieldvalue1 = $.trim($(".info-textarea").val()).split(/[\s\.\?]+/);
			var fieldvalue1 = $(".info-textarea").val().match(/\b[-?(\w+)?]+\b/gi);

			$(".words").html(fieldvalue1.length);
		};

		if (fieldlength < 1) {
			$(".words").html(0);
		};
	};
</script>
<style type="text/css">
	#main_data {
		display: none;
		text-align: center;
		margin-top: 10px;
		background: #aec9af;
		padding: 10px;
	}

	#main_data span {
		color: #000;
		font-size: 20px;
		font-weight: 700;
	}

	.status-bar .badge {
		width: 70px;
		height: 40px;
		background-color: transparent;
		border: 2px solid #008329;
		margin-bottom: 20px;
		color: #000000;
		font-weight: bold;
		font-size: 16px;
		padding-top: 10px;
		border-radius: 30px;
		vertical-align: unset;
	}

	.msg {
		color: #494949;
		text-transform: uppercase;
		font-size: 12px;
		box-shadow: none;
	}

	#snackbar {
		visibility: hidden;
		min-width: 250px;
		margin-left: -125px;
		background-color: #333;
		color: #fff;
		text-align: center;
		border-radius: 2px;
		padding: 16px;
		position: fixed;
		z-index: 1;
		left: 50%;
		bottom: 90px;
		font-size: 17px;
	}

	@-webkit-keyframes fadein {
		from {
			bottom: 0;
			opacity: 0;
		}

		to {
			bottom: 90px;
			opacity: 1;
		}
	}

	@keyframes fadein {
		from {
			bottom: 0;
			opacity: 0;
		}

		to {
			bottom: 90px;
			opacity: 1;
		}
	}

	@-webkit-keyframes fadeout {
		from {
			bottom: 90px;
			opacity: 1;
		}

		to {
			bottom: 0;
			opacity: 0;
		}
	}

	@keyframes fadeout {
		from {
			bottom: 90px;
			opacity: 1;
		}

		to {
			bottom: 0;
			opacity: 0;
		}
	}

	#snackbar.show {
		visibility: visible;
		-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
		animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}
</style>