<|start_filename|>index.html<|end_filename|>
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Passwordless User Authentication System with PHP, MetaMask, Ethereum Sign-In</title>
		<meta name="description" content="Login system for web app, built using MetaMask, JavaScript, PHP, MySQL/PostgreSQL, JWT">
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
		
		<script type="text/javascript" src="https://unpkg.com/web3modal@1.9.0/dist/index.js"></script>
		<script type="text/javascript" src="https://unpkg.com/evm-chains@0.2.0/dist/umd/index.min.js"></script>
		<script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider@1.2.1/dist/umd/index.min.js"></script>
	</head>

	<body>

		<div style="margin: 0 auto;max-width: 600px;margin-top:100px;">

			<div style="text-align:center;word-wrap:break-word;">
				<span style="font-size:19px;">
					<b>Passwordless User Authentication System</b>
				</span>
				<div style="height:5px;"></div>
				<span style="font-size:16px;">
					Sign-in with Ethereum using PHP, MetaMask, and MySQL/PostgreSQL
				</span>

				<div style="height:20px;"></div>

				<a href="https://github.com/giekaton/php-metamask-user-login" target="_blank" style="font-size:15px;">GitHub</a>

				<div style="height:60px;"></div>

				<div id="loggedOut" class="user-login-msg">
					Click the button to (sign up and) login!
				</div>
				<div id="needMetamask" style="display:none;color: rgb(255, 115, 0);" class="user-login-msg">
					To login, first install a Web3 wallet like the <a href="https://metamask.io/" style="color:#ff7300" target="_blank">MetaMask</a> browser extension or mobile app
				</div>
				<div id="needLogInToMetaMask" style="display:none;color: rgb(255, 115, 0);" class="user-login-msg">
					Log in to your wallet account first!
				</div>
				<div id="signTheMessage" style="display:none;" class="user-login-msg">
					Sign the message with your wallet to authenticate
				</div>
				<div id="loggedIn" style="display:none;" class="user-login-msg">
					Successful authentication for address:<br><span id="ethAddress"></span>
					<br><br>
					You can set a public name for this account:<br>
					<input type="text" placeholder="Public name" id="updatePublicName" onfocusout="setPublicName()" style="width:190px;">
				</div>
				<br>
				<button onclick="userLoginOut()" id="buttonText" style="width:100px;height:26px;">Log in</button>
				
				<div style="height:40px;"></div>
			</div>

		</div>

		<script src="js/main.js?v=009"></script>
		<script src="js/web3-modal.js?v=001"></script>

	</body>

</html>