Html Copy

<!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>

Html Copy

نموذج الاتصال