<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>@import url('https://fonts.googleapis.com/css2?family=Anek+Malayalam&family=Josefin+Sans&display=swap');
body {
background-color: #efefef;
}
hr {
animation-name: hr;
animation-duration: 3s;
}
@keyframes hr {
from { width: 0%; }
to { width: 100%; }
}
textarea {
color: #3c3c3c;
outline: none;
width: 335px;
border-radius: 5px;
font-size: 15px;
box-shadow: 0px 0px 2px grey;
font-family: 'Josefin Sans', sans-serif;
}
@keyframes text {
from { margin-top: 50%; opacity: 0%; }
to { margin-top: 0%; opacity: 100%; }
}
textarea:focus {
border-color: #96ADE1;
animation-name: textFocus;
animation-duration: 1s;
}
@keyframes textFocus {
from { border-color: #3c3c3c; }
to { border-color: #96ade1; }
}
h1 {
color: #3c3c3c;
text-shadow: 0px 0px 5px grey;
font-family: 'Josefin Sans', sans-serif;
}
input {
border-radius: 5px;
font-size: 20px;
color: #3c3c3c;
font-family: 'Josefin Sans', sans-serif;
animation-name: text;
animation-duration: 5s;
}
input#copy {
background-color: #96ADE1;
}
input#highlight {
background-color: #AADB86;
}
input#highlight:active {
background-color: #E4D486;
}
input#copy:active {
background-color: #6DAFD8;
}
</style>
</head>
<body>
<h1 align="center">Copy Text</h1>
<hr>
<textarea rows="9" placeholder="Enter text..." id="text"></textarea>
<input type="button" id="copy" value="copy" onclick="copy()" >
<input type="button" id="highlight" value="highlight" onclick="highlight()">
<script>
function highlight() {
document.getElementById("text").select();
}
function copy() {
document.getElementById("text").select();
document.execCommand("copy");
}
</script>
</body>
</html>