Acc Generator

Here is a Generator i Made It Was made in Javascript, HTML & CSS
How To Use :
1. Create a Html file called "index.html" Paste The Html code into it
2. Make 2 Folders name Them "Styles" & "Scripts"
3. Create a Javascript file Called "index.js" in "Scripts" Folder
4. Create a CSS File called "index.css" in "Styles" Folder
5. Boom Your Done
------------ HTML CODE : ------------------
<!DOCTYPE html>
    <html>

<head>
        <meta charset="utf-8">
        <title>Account Generate</title>
        <link rel="stylesheet" href="Styles/index.css">
        <script type="text/javascript" src="Scripts/index.js"></script>
        <link rel="icon" href="https://www.flaticon.com/svg/static/icons/svg/3399/3399215.svg">
</head>
<ul class="topnav">
    <li><a class="active" href="Home.html">Home</a></li>
    <li><a href="Page1.html">More Accounts</a></li>
    <li><a href="Page2.html">Service</a></li>
    <li class="right"><a href="About.html">Admin Panel</a></li>
</ul>

<body>
    <div><H3 class="HelpHint">Click "Generate Account" Then Go through The Linkvertise To Recieve Your Account</H1></div>
    <div>
        <a class="GenButton" onclick="functions[ randomNumber( functions.length ) ](); ">Generate Account</a>
    </div>
            <p class="Accounttext">First Account: </p>
    <div>
        <textarea class="CredentialsBoxPass" id="CredentialsBoxPass" placeholder="Account Appears Here"></textarea>
            <p class="Accounttext2">Second Account: </p>
        <textarea class="CredentialsBoxUser" id="CredentialsBoxUser" placeholder="2nd Account Appears Here"></textarea>
    </div>
    <div>
                    <p class="Accounttext">Account Information: </p>
        <textarea class="CredentialsBoxPass" id="CredentialsBoxExpire" placeholder="Further Infrmation Appears Here"></textarea>
    </div>
</body>
</html>

<!--Made By JUB0T-->

--------------------- CSS CODE : ------------------------
body {

    background: #2d2d2d;

}


ul.topnav {
  margin: 10px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: arial;
  text-align: left;
  width: 100%;
  position: sticky;
  top: 0;
}
ul.topnav li {float: left;}
ul.topnav li a {
  margin: 10px;
  display: block;
  color: white;
  text-align: center;
  padding: 15px 30px;
  text-decoration: none;
  float: left;
  font-size: 17px;
  border-right: 1px solid #bbb;
}
ul.topnav li a:hover:not(.active) {
    border-radius: 10px;
    background-color: #ddd;
    color: black;
}
ul.topnav li a.active {
    margin: 10px;
    border-radius: 10px;
    background-color: #e9185e;
}
ul.topnav li.right {
    float: right;
}
@media screen and (max-width: 720px) {
  ul.topnav li{
      width: 100%;
  }
  ul.topnav a{
      width: 100%;
  }
}

.GenButton {

    margin: 10px;
    background-color:#e9185e;
    border-radius:28px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    margin-left: 550px;
    margin-top: 20px;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    box-shadow: 3px 3px 3px 3px rgba(255, 255, 255, 0.2);

}

.GenButton:hover {
    background: #ffffff;
    color: #e9185e;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif, ;
    border: 3px solid #e9185e;
}


.CredentialsBoxPass {

    margin-top: 1px;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #e9185e;
    width: 500px;
    font-size: 15px;
    margin-left: 90px;
    background-color: #eee;
    overflow: none;
    resize: none;
}

.CredentialsBoxUser {

    margin-top: 1px;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #e9185e;
    width: 500px;
    font-size: 15px;
    margin-left: 90px;
    background-color: #eee;
    overflow: none;
    resize: none;
}

.Accounttext {

    color: #ddd;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    margin-left: 100px;
    margin-top: 80px;
}

.Accounttext2 {

    color: #ddd;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    margin-left: 100px;
    margin-top: 80px;
}

.HelpHint {

    color: #ddd;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;

}

---------- Javascript Code : ---------------
var functions = [InfoAccount, InfoAccount2, InfoAccount3];


function InfoAccount() {

    document.getElementById("CredentialsBoxPass").innerHTML = "Guardian1";
    document.getElementById("CredentialsBoxUser").innerHTML = "https://direct-link.net/112212/FreeNordvpnAcc5";
}

function InfoAccount2() {

    document.getElementById("CredentialsBoxPass").innerHTML = "https://link-to.net/112212/FreeNordvpnAccount3";
    document.getElementById("CredentialsBoxUser").innerHTML = "https://direct-link.net/112212/FreeNordvpnAccount4";
    document.getElementById("CredentialsBoxExpire").innerHTML = "These Are The Latest Accounts";
}

function InfoAccount3() {

    document.getElementById("CredentialsBoxPass").innerHTML = "https://link-to.net/112212/FreeNordvpnaccount2";
    document.getElementById("CredentialsBoxUser").innerHTML = "https://link-to.net/112212/NordvpnAccountFree";
    document.getElementById("CredentialsBoxExpire").innerHTML = "Accounts Available For Next 1 Year";
}


function randomNumber(n) {
    return Math.floor(Math.random() * n);
}


|| Please Give Credits This Was Really Hard to Make ||