<!--Main Content-->
<div id="primary">
<div class="container px-0">
<div class="d-lg-flex" id="main-content">
<div class="col-lg-8 px-3" id="main">
<div class="pt-4 pb-5 section" id="blog-post"><div class="widget Blog" data-version="2" id="Blog1">
<article class="mb-5" id="page-content">
<header class="entry-header">
</header>
<div class="entry-text text-break mb-5">
<div class="at_robottxt_container"><h1>Generate robots.txt</h1>
<label class="at_level">Website URL:</label>
<input class="at_input" id="website-url" placeholder="Enter Your Website URL like ‘https://www.webalarab.win’" type="text" /><br />
<label>Platform:</label>
<select id="platform-select">
    <option value="blogger">Blogger</option>
    <option value="wordpress">WordPress</option>
</select><br />
<button id="generate-btn">Generate</button><br /><br />
<div id="output-container" style="display: none;">
    <p id="output-text"></p>
    <button id="copy-btn" style="display: none;">Copy to clipboard</button>
  </div></div>
<style>
 

.at_robottxt_container h1 {
	text-align: center;
	margin: 50px 0;
	font-size: 36px;
	color: #333;
}

.at_robottxt_container {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin: 0 auto;text-align: center;
	max-width:100%;
}

.at_robottxt_container label {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	color: #333;
}

.at_robottxt_container input[type="text"] {
	display: block;
	width: 100%;
	padding: 10px;max-width: 80%;
    margin: auto;
	margin-bottom: 20px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	background-color: #f1f1f1;
	color: #333;
}

.at_robottxt_container select {
	display: block;
	width: 100%;max-width: 80%;
    margin: auto;
	padding: 10px;
	margin-bottom: 20px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	background-color: #f1f1f1;
	color: #333;
}

.at_robottxt_container button {
	display: block;
	margin: 0 auto;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	background-color: #428bca;
	color: #fff;
	cursor: pointer;
}

.at_robottxt_container textarea {
	display: none;
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	font-size: 16px;
	border: none;text-align: left;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	background-color: #f1f1f1;
	color: #333;
	resize: none;
}
p#output-text {
    text-align: left;
    background: beige;
    padding: 20px;
}
.at_robottxt_container button#copy-btn {
	display: none;
	margin: 0 auto;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	background-color: #5cb85c;
	color: #fff;
	cursor: pointer;
}

.at_robottxt_container button#copy-btn:hover {
	background-color: #449d44;
}

.at_robottxt_container button:focus,
.at_robottxt_container button:hover,
.at_robottxt_container button:active {
	background-color: #3071a9;
}

@media screen and (max-width: 500px) {
	.at_robottxt_container {
		margin: 0 10px;
	}
}


</style>

 <script>
		 const generateBtn = document.getElementById("generate-btn");
  const outputContainer = document.getElementById("output-container");
  const outputText = document.getElementById("output-text");
  const copyBtn = document.getElementById("copy-btn");

  generateBtn.addEventListener("click", () => {
    const websiteUrl = document.getElementById("website-url").value;
    const platform = document.getElementById("platform-select").value;

    // Generate the robots.txt content based on the selected platform
    let robotsTxtContent = "";
    if (platform === "blogger") {
      robotsTxtContent = `User-agent: *
Disallow: /search
Disallow: /p/
Disallow: /?m=1
Sitemap: ${websiteUrl}/atom.xml?redirect=false&start-index=1&max-results=500`;
    } else if (platform === "wordpress") {
      robotsTxtContent = `User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Sitemap: ${websiteUrl}/sitemap.xml`;
    }

    // Display the robots.txt content and copy button
    outputText.innerText = robotsTxtContent;
    outputContainer.style.display = "block";
    copyBtn.style.display = "block";
    
    // Add typing effect to the output text
    const textLength = robotsTxtContent.length;
    let i = 0;
    const typeEffectInterval = setInterval(() => {
      outputText.innerText = robotsTxtContent.slice(0, i);
      i++;
      if (i > textLength) {
        clearInterval(typeEffectInterval);
      }
    }, 50);
  });

  copyBtn.addEventListener("click", () => {
    const copyText = document.createElement("textarea");
    copyText.value = outputText.innerText;
    document.body.appendChild(copyText);
    copyText.select();
    document.execCommand("copy");
    document.body.removeChild(copyText);
    alert("Copied to clipboard!");
  });
	</script></div>