<!DOCTYPE html>
<html>
<head>
<title>Shutterstock Downloader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Styling for the page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
form {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-top: 30px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
button[type="submit"] {
background-color: #333;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #555;
}
.output {
margin-top: 30px;
display: none;
}
.output img {
max-width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Shutterstock Downloader</h1>
<form>
<label for="url">Enter the URL of the Shutterstock photo:</label>
<input type="text" id="url" name="url" placeholder="https://www.shutterstock.com/image-123456789">
<button type="submit">Download</button>
</form>
<div class="output">
<img id="image" src="">
<p>Right-click on the image and choose "Save Image As" to download.</p>
</div>
</div>
<script>
// Function to handle form submission
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form from submitting normally
var url = document.getElementById("url").value; // Get the URL from the input field
if (url) {
// If a URL was entered, make an AJAX request to get the image
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.shutterstock.com/v2/images/" + url.split("-")[1] + "?view=full", true);
xhr.setRequestHeader("Authorization", "Bearer YOUR_API_KEY"); // Replace YOUR_API_KEY with your Shutterstock API key
xhr.onload = function() {
if (xhr.status === 200) {
// If the request was successful, display the image
var response = JSON.parse(xhr.responseText);
document.getElementById("image").src = response.assets.preview.url;
document.querySelector(".output").style.display = "block";
} else {
// If the request was unsuccessful, display an error message
alert("Unable to download image. Please
Shutterstock Downloader
Right-click on the image and choose “Save Image As” to download.
