--------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Tools by BAQ GAMERS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet">
<!-- Boxicons and Bootstrap Icons -->
<link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css"
rel="stylesheet"/>
<style>
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body{
background: #f8f8ff;
display: flex;
flex-direction: column;
min-height: 100vh;
}
a{
text-decoration: none;
color: inherit;
}
li{
list-style: none;
}
/* Header Styles */
header {
width: 100%;
background: #036107;
color: #fff;
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 10px;
}
nav ul {
display: flex;
gap: 1.5rem;
}
nav ul li a {
color: #fff;
font-weight: 500;
transition: color 0.3s;
}
nav ul li a:hover {
color: #ffded9;
}
/* Main Content */
main {
flex: 1;
padding: 100px 20px 20px; /* Adjust padding to accommodate fixed header */
}
/* Intro Section */
.intro {
text-align: center;
margin-bottom: 40px;
}
.intro h2 {
font-size: 2rem;
margin-bottom: 10px;
}
.intro p {
font-size: 1.1rem;
color: #555;
}
/* Tools Section */
.wrapper{
background: #fff;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
border-radius: 10px;
box-shadow:0 5px 30px 0 rgba(0,0,0,.05);
}
.wrapper h1 {
text-align: center;
margin-bottom: 20px;
color: #036107;
}
.text {
width: 100%;
height: 150px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 15px;
resize: vertical;
outline-color: #1e1e1e;
margin-bottom: 20px;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 20px;
}
.buttons button {
flex: 1 1 150px;
padding: 10px;
border: none;
border-radius: 10px;
color: #fff;
background-image: linear-gradient(to right top, #036107, #036107, #036107, #036107, #036107);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
font-size: 0.9rem;
}
.buttons button:active {
transform: translateY(2px);
}
.buttons button:hover {
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
.buttons .replacewithtext {
flex: 1 1 100%;
background-image: linear-gradient(to right top, #00c3ff, #1ad2d2, #34e0e0, #44eeee, #54fcfc);
}
.buttons .clear, .buttons .copy {
flex: 0 0 auto;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #ffded9;
color: #fc3415;
}
.buttons .copy {
background: #ecf0ff;
color: #0e3aff;
}
.replace-section {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.replace-section input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 10px;
}
/* How to Use Section */
.how-to-use {
max-width: 800px;
margin: 40px auto;
padding: 2rem;
background: #fff;
border-radius: 10px;
box-shadow:0 5px 30px 0 rgba(0,0,0,.05);
}
.how-to-use h2 {
margin-bottom: 20px;
color: #036107;
}
.how-to-use p {
margin-bottom: 10px;
color: #555;
}
/* Footer Styles */
footer {
background: #036107;
color: #fff;
text-align: center;
padding: 1rem 2rem;
}
footer a {
color: #ffded9;
text-decoration: underline;
}
/* Responsive Styles */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
gap: 0.5rem;
}
.buttons button {
flex: 1 1 45%;
}
.replace-section {
flex-direction: column;
}
.replacewithtext {
flex: 1 1 100%;
}
}
@media (max-width: 480px) {
.buttons button {
flex: 1 1 100%;
}
.replace-section input {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="logo">
<h1> BAQ GAMERS </h1>
</div>
<nav>
<ul>
<li><a href="#intro">Home</a></li>
<li><a href="#tools">Tools</a></li>
<li><a href="#how-to-use">How to Use</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Intro Section -->
<section class="intro" id="intro">
<h2>Welcome to 100% Free Text Tools</h2>
<p>Enhance and manipulate your text with our suite of easy-to-use tools.</p>
</section>
<!-- Google AdSense Placeholder Ad -->
<div style="width: 100%; height: 250px; background-color: #f0f0f0; display: flex; align-items: center;
justify-content: center; color: #999;">
<p>Ad Banner - 728x90</p>
</div>
<!-- Tools Section -->
<section class="tools" id="tools">
<div class="wrapper">
<h1>Text Tools</h1>
<textarea class="text" id="text" placeholder="Enter your text here..." required
rows="12"></textarea>
<div class="buttons">
<button class="upper">Upper Case</button>
<button class="lower">Lower Case</button>
<button class="swap">Swap Case</button>
<button class="random">Random Case</button>
<button class="extraSpaces"><i class="bi bi-x"></i> Extra Spaces</button>
<button class="extraLines"><i class="bi bi-x"></i> Extra Lines</button>
<button class="duplicateLines"><i class="bi bi-x"></i> Duplicate Lines</button>
<div class="replace-section">
<input class="findthis" placeholder="Find...">
<input class="replacethis" placeholder="Replace with...">
</div>
<button class="replacewithtext">Replace</button>
<button class="clear"><i class="bi bi-trash3"></i></button>
<button class="copy"><i class="bi bi-clipboard-check"></i></button>
</div>
</div>
</section>
<!-- Google AdSense Placeholder Ad -->
<div style="width: 100%; height: 250px; background-color: #f0f0f0; display: flex; align-items: center;
justify-content: center; color: #999;">
<p>Ad Banner - 728x90</p>
</div>
<!-- How to Use Section -->
<section class="how-to-use" id="how-to-use">
<h2>How to Use Our Text Tools</h2>
<p>Our text tools are designed to help you manipulate and enhance your text effortlessly. Here's
how to use each tool:</p>
<ul>
<li><strong>Upper Case:</strong> Converts all text to uppercase letters.</li>
<li><strong>Lower Case:</strong> Converts all text to lowercase letters.</li>
<li><strong>Swap Case:</strong> Swaps the case of each letter in the text.</li>
<li><strong>Random Case:</strong> Randomly changes the case of each letter in the text.</li>
<li><strong>Extra Spaces:</strong> Removes any extra spaces between words.</li>
<li><strong>Extra Lines:</strong> Removes any extra blank lines from the text.</li>
<li><strong>Duplicate Lines:</strong> Removes any duplicate lines in the text.</li>
<li><strong>Replace:</strong> Allows you to find and replace specific words or phrases.</li>
<li><strong>Clear:</strong> Clears all the text from the input area.</li>
<li><strong>Copy:</strong> Copies the manipulated text to your clipboard for easy
pasting.</li>
</ul>
<p>Simply enter your text in the input area, select the desired tool, and watch the magic
happen!</p>
</section>
</main>
<!-- Google AdSense Placeholder Ad -->
<div style="width: 100%; height: 250px; background-color: #f0f0f0; display: flex; align-items: center;
justify-content: center; color: #999;">
<p>Ad Banner - 728x90</p>
</div>
<!-- Footer -->
<footer>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#Disclaimer">Disclaimer</a></li>
<li><a href="#Terms">Terms</a></li>
</ul>
© <span id="getYear"></span> <a href="#">Text Tools</a>. All rights reserved | Distributed by
<strong><a href="#">Text Tools</a></strong>
</footer>
<!-- Scripts -->
<script>
// Update Year in Footer
document.getElementById('getYear').textContent = new Date().getFullYear();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
// Text Tool Functionality
const textEntered = document.querySelector(".text");
const upperCaseBtn = document.querySelector(".upper");
const lowerCaseBtn = document.querySelector(".lower");
const swapCaseBtn = document.querySelector(".swap");
const randomCaseBtn = document.querySelector(".random");
const removeExtraSpacesBtn = document.querySelector(".extraSpaces");
const removeExtraLinesBtn = document.querySelector(".extraLines");
const removeDuplicateLinesBtn = document.querySelector(".duplicateLines");
const searchInput = document.querySelector(".findthis");
const replaceInput = document.querySelector(".replacethis");
const replaceBtn = document.querySelector(".replacewithtext");
const clearBtn = document.querySelector(".clear");
const copyBtn = document.querySelector(".copy");
// Upper Case
upperCaseBtn.addEventListener("click", () => {
textEntered.value = textEntered.value.toUpperCase();
});
// Lower Case
lowerCaseBtn.addEventListener("click", () => {
textEntered.value = textEntered.value.toLowerCase();
});
// Swap Case
swapCaseBtn.addEventListener("click", () => {
textEntered.value = textEntered.value.split('').map(char => {
return char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
}).join('');
});
// Random Case
randomCaseBtn.addEventListener("click", () => {
textEntered.value = textEntered.value.split('').map(char => {
return Math.random() > 0.5 ? char.toUpperCase() : char.toLowerCase();
}).join('');
});
// Remove Extra Spaces
removeExtraSpacesBtn.addEventListener("click", () => {
textEntered.value = textEntered.value.replace(/\s+/g, ' ').trim();
});
// Remove Extra Lines
removeExtraLinesBtn.addEventListener("click", () => {
textEntered.value = textEntered.value.replace(/(\r\n|\n|\r){2,}/g, '\n').trim();
});
// Remove Duplicate Lines
removeDuplicateLinesBtn.addEventListener("click", () => {
const lines = textEntered.value.split("\n");
const uniqueLines = [...new Set(lines)];
textEntered.value = uniqueLines.join("\n").trim();
});
// Replace Text
replaceBtn.addEventListener("click", () => {
const find = searchInput.value.trim();
const replaceWith = replaceInput.value.trim();
if(find === "") {
alert("Please enter a word or phrase to find.");
return;
}
const regex = new RegExp(find, 'g');
textEntered.value = textEntered.value.replace(regex, replaceWith);
});
// Clear Text
clearBtn.addEventListener("click", () => {
if(confirm("Are you sure you want to clear all text?")) {
textEntered.value = "";
}
});
// Copy Text
copyBtn.addEventListener("click", () => {
if(textEntered.value.trim() === "") {
alert("No text to copy!");
return;
}
navigator.clipboard.writeText(textEntered.value).then(() => {
alert("Text copied to clipboard!");
}).catch(err => {
alert("Failed to copy text: ", err);
});
});
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------
