Project Description
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AI Content Generator</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}
body{
background:#0f172a;
color:white;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.container{
width:90%;
max-width:700px;
background:#1e293b;
padding:30px;
border-radius:15px;
box-shadow:0 0 20px rgba(0,0,0,0.3);
}
h1{
text-align:center;
margin-bottom:20px;
color:#38bdf8;
}
textarea{
width:100%;
height:150px;
padding:15px;
border:none;
border-radius:10px;
resize:none;
font-size:16px;
margin-bottom:20px;
outline:none;
}
button{
width:100%;
padding:15px;
background:#38bdf8;
color:white;
border:none;
border-radius:10px;
font-size:18px;
cursor:pointer;
transition:0.3s;
}
button:hover{
background:#0ea5e9;
}
.output{
margin-top:20px;
background:#334155;
padding:20px;
border-radius:10px;
min-height:120px;
line-height:1.6;
}
.copy-btn{
margin-top:15px;
background:#22c55e;
}
.copy-btn:hover{
background:#16a34a;
}
</style>
</head>
<body>
<div class="container">
<h1>AI Content Generator</h1>
<textarea id="prompt" placeholder="Enter your topic..."></textarea>
<button onclick="generateContent()">Generate Content</button>
<div class="output" id="output">
Your AI-generated content will appear here...
</div>
<button class="copy-btn" onclick="copyContent()">Copy Content</button>
</div>
<script>
function generateContent() {
const prompt = document.getElementById("prompt").value;
const output = document.getElementById("output");
if(prompt === ""){
output.innerHTML = "Please enter a topic.";
return;
}
output.innerHTML = `
<h3>${prompt}</h3>
<p>
Artificial Intelligence is transforming the modern world.
Businesses and individuals are using AI tools to improve productivity,
automate tasks, and create high-quality content quickly.
AI-powered systems help generate blogs, social media captions,
emails, marketing content, and much more.
As technology continues to grow, AI content generation will become
one of the most important tools for freelancers and businesses.
</p>
`;
}
function copyContent() {
const text = document.getElementById("output").innerText;
navigator.clipboard.writeText(text);
alert("Content copied!");
}
</script>
</body>
</html>