Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Homepage</title>
	<link rel="stylesheet" type="text/css" href="CSS/Pages/Home.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<p>
	<img class="Banner" src="IMAGES/Banner.png">
	</p>

</head>
<body>

<?php
$servername = "localhost";
$username = "root";
$password = "abc";
$dbname = "users";


$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if($_SERVER["REQUEST_METHOD"] === "POST") {
        $user = $_POST["User"];
        $pass = $_POST["Pass"];
        $sql = "INSERT INTO users (Username, Password) VALUES('".$user."', '".$pass."')";

        if(mysqli_query($sql)) {
            echo "Done";
        } else {
            echo "Error";
        }
    }

 ?>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Register</button>

<div id="id01" class="modal">

  <form class="modal-content animate">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="IMAGES/Players/Lillard.png" alt="Avatar" class="avatar">
    </div>

    <div class="container">
      <label><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="User" required>

      <label><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="Pass" required>

      <input type="submit" value="Register" name="Submit">
        </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

	<nav>
            <ul>
                <li><a class="active" href="">Homepage</a></li>
                <li><a href="History.html"><span>History of Blazers</span></a></li>
                <li><a href="MeetTeam.html"><span>Meet the Team</span></a></li>
                <li><a href="Standings.html"><span>Standings</span></a></li>
                <li><a href="Fixtures.html"><span>Fixtures</span></a></li>
                <li><a href="ContactUs.html"><span>Contact Us</span></a></li>
            </ul>
        </nav>

	<p>Welcome to the Unofficial Site of the Portland Trail Blazers. </p>

	<div class="Twitter">
		<a class="twitter-timeline" data-width="400" data-height="500" href="https://twitter.com/trailblazers?ref_src=twsrc%5Etfw">Tweets by trailblazers</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
	</div>
</body>
</html>