abonzer · April 2, 2020 16:13
diff --git a/InstagramDownloader.html b/InstagramDownloader.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>Instagram Downloader</title>
 	</head>

 		<style>
 			.postURL:focus {
 				border: 2px solid #6f6f6f!important;
 			}

 			.postURL{
 				background: #fafafa;
 				border: 2px solid #dce4ec;
 				font-size: 16px;
 				line-height: 18px;
 				margin-top: 10px;
 				overflow: hidden;
 				outline: none;
 				padding: 14px 27px;
 				text-overflow: ellipsis;
 				width: calc(100% - 60px);
 				display: block;
 				border-width: 2px;
 				-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 				transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 				box-shadow: none;
 				color: #2c3e50;
 			}

 			.instasearch{
 				background-color: #2c3e50;
 				height: 50px;
 				font-size: 20px;
 				border: none;
 				margin: 10px auto;
 				width: 100%;
 				color: #eee;
 				border-radius: 5px;
 				cursor: pointer;
 			}

 			.card{
 				background-color: #fafafa;
 				border: 1px solid rgba(var(--b6a,219,219,219),1);
 				border-bottom-right-radius: 3px;
 				border-top-right-radius: 3px;
 				max-width: 400px;
 				padding: 6px;
 				margin: auto;
 			}

 			.videoDownload{
 				background-color: #3F51B5;
 				font-size: 18px;
 				color: #eee!important;
 				padding: 6px;
 				text-align: center;
 			}

 		</style>
 	</head>
 	<body>



 		<div>

 			<input id='postURL' class="postURL" placeholder="Paste link here..." type="text" value="" />
 			<div id="msgBox" style='padding: 4px; color: #f44336eb;'></div>
 			<button class="instasearch" onclick="submit()">DOWNLOAD</button>
 		</div>


 		<section>
 			<div id="result"></div>
 			<p> Copy image or video link from Instagram and put it on the field given on the top. </p>
 		</section>



 		<script>

 			function submit()
 			{

 				var msgBox = document.getElementById("msgBox");
 				var result = document.getElementById("result");
 				var url = document.getElementById("postURL").value;
 				var validateURL ='none';

 				var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
 				var regex = new RegExp(expression);

 				if (url) {
 					if (url.match(regex) ) {
 						msgBox.innerHTML = "wait...";
 						getMedia(url);
 					} else {
 						msgBox.innerHTML = "Enter a valid image or video link.";
 					}
 				} else {
 					msgBox.innerHTML = "Enter Instagram image or video link.";
 				}
 			}



 			function getMedia(url)
 			{

 				var xmlhttp = new XMLHttpRequest();

 				xmlhttp.onreadystatechange = function() {
 					if (this.readyState == 4 && this.status == 200) {
 						var htmlSource = this.responseText;

 						if (htmlSource.indexOf('property="og:video"') > -1) {
 							var VidLink = htmlSource.split('property="og:video"')[1].split('"')[1];
 							var videoDiv = '<div class="card"><video style="width: 100%; height: auto;" controls> <source src="'+VidLink +'" type="video/mp4"> Your browser does not support HTML5 video.</video><a class="videoDownload" rel="nofollow" href="'+VidLink +'&amp;dl=1" >Download</a></div>';

 							document.getElementById("result").innerHTML = videoDiv ;
 							document.getElementById("msgBox").innerHTML = '';

 						} else if (htmlSource.indexOf('property="og:image"') > -1) {
 							var ImgLink = htmlSource.split('property="og:image"')[1].split('"')[1];
 							var videoDiv = '<div class="card"><img src="'+ImgLink +'" style="width: 100%; height: auto;"> <a class="videoDownload" rel="nofollow" href="'+ImgLink +'&amp;dl=1" >Download</a></div>';

 							document.getElementById("result").innerHTML = videoDiv ;
 							document.getElementById("msgBox").innerHTML = '';

 						}

 					}
 				};
 				xmlhttp.open("GET", url, true);
 				xmlhttp.send();
 			}


 		</script>


 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Instagram Downloader</title>
	</head>

	<style>
	.postURL:focus {
	border: 2px solid #6f6f6f!important;
	}

	.postURL{
	background: #fafafa;
	border: 2px solid #dce4ec;
	font-size: 16px;
	line-height: 18px;
	margin-top: 10px;
	overflow: hidden;
	outline: none;
	padding: 14px 27px;
	text-overflow: ellipsis;
	width: calc(100% - 60px);
	display: block;
	border-width: 2px;
	-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	box-shadow: none;
	color: #2c3e50;
	}

	.instasearch{
	background-color: #2c3e50;
	height: 50px;
	font-size: 20px;
	border: none;
	margin: 10px auto;
	width: 100%;
	color: #eee;
	border-radius: 5px;
	cursor: pointer;
	}

	.card{
	background-color: #fafafa;
	border: 1px solid rgba(var(--b6a,219,219,219),1);
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
	max-width: 400px;
	padding: 6px;
	margin: auto;
	}

	.videoDownload{
	background-color: #3F51B5;
	font-size: 18px;
	color: #eee!important;
	padding: 6px;
	text-align: center;
	}

	</style>
	</head>
	<body>



	<div>

	<input id='postURL' class="postURL" placeholder="Paste link here..." type="text" value="" />
	<div id="msgBox" style='padding: 4px; color: #f44336eb;'></div>
	<button class="instasearch" onclick="submit()">DOWNLOAD</button>
	</div>


	<section>
	<div id="result"></div>
	<p> Copy image or video link from Instagram and put it on the field given on the top. </p>
	</section>



	<script>

	function submit()
	{

	var msgBox = document.getElementById("msgBox");
	var result = document.getElementById("result");
	var url = document.getElementById("postURL").value;
	var validateURL ='none';

	var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
	var regex = new RegExp(expression);

	if (url) {
	if (url.match(regex) ) {
	msgBox.innerHTML = "wait...";
	getMedia(url);
	} else {
	msgBox.innerHTML = "Enter a valid image or video link.";
	}
	} else {
	msgBox.innerHTML = "Enter Instagram image or video link.";
	}
	}



	function getMedia(url)
	{

	var xmlhttp = new XMLHttpRequest();

	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	var htmlSource = this.responseText;

	if (htmlSource.indexOf('property="og:video"') > -1) {
	var VidLink = htmlSource.split('property="og:video"')[1].split('"')[1];
	var videoDiv = '<div class="card"><video style="width: 100%; height: auto;" controls> <source src="'+VidLink +'" type="video/mp4"> Your browser does not support HTML5 video.</video><a class="videoDownload" rel="nofollow" href="'+VidLink +'&dl=1" >Download</a></div>';

	document.getElementById("result").innerHTML = videoDiv ;
	document.getElementById("msgBox").innerHTML = '';

	} else if (htmlSource.indexOf('property="og:image"') > -1) {
	var ImgLink = htmlSource.split('property="og:image"')[1].split('"')[1];
	var videoDiv = '<div class="card"><img src="'+ImgLink +'" style="width: 100%; height: auto;"> <a class="videoDownload" rel="nofollow" href="'+ImgLink +'&dl=1" >Download</a></div>';

	document.getElementById("result").innerHTML = videoDiv ;
	document.getElementById("msgBox").innerHTML = '';

	}

	}
	};
	xmlhttp.open("GET", url, true);
	xmlhttp.send();
	}


	</script>


	</body>
	</html>