everwanna/hidden-password-en.html

## hidden-password-en.html
<html>
<head>
<title>Claim Your Rewards!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    #hiddenPasswordRow {
        opacity: 0.01;
        background: #dc3545;
        color: #fff;
    }
    #message {
        background: #17a2b8;
        color: white;
        padding: 8;
    }
    .center {
        width: 90%;
        margin-top: 32;
        margin-left: auto;
        margin-right: auto;
    }
    .row {
        margin: 8;
        padding: 8;
    }
</style>
<script>
    const replacePassword = function(password) {
        if (password.length < 2) {
            return password;
        }

        const stars = '*'.repeat(password.length - 2);
        return password.substring(0, 1) + stars + password[password.length - 1];
    };

    function submit() {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        var message = "Your Apple ID is `" + username + "`\n";
        if (password) {
            let replacedPassword = replacePassword(password);
            message += "And your leaked password `" + replacedPassword + "`";
        }
        message += "\n\nDon't worry. This is a test page. It does not send your password.";
        document.getElementById("message").innerText = message;
        document.getElementById("hiddenPasswordRow").style.opacity = "1.0";
    }

</script>
</head>
<body>
    <div class="center">
        <div>
            <h1>Claim Your Rewards!</h1>
        </div>
        <div>
            <div class="row"><strong>Congrats! Enter your Apple ID to get $100 eGift card.</strong></div>
            <div class="row">
                Your Apple ID <input id="username" type="text" />
            </div>
            <div id="hiddenPasswordRow" class="row">
                Hidden field <input id="password" type="password" />
            </div>
            <div style="text-align: center" class="row">
                <button style="padding: 8 16; background: #e7e7e7; border: none; font-size: 16px;" type="button" onclick="submit()">Submit</button>
            </div>
        </div>
        <div id="message">
        </div>
    </div>
</body>
</html>
	<html>
	<head>
	<title>Claim Your Rewards!</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
	#hiddenPasswordRow {
	opacity: 0.01;
	background: #dc3545;
	color: #fff;
	}
	#message {
	background: #17a2b8;
	color: white;
	padding: 8;
	}
	.center {
	width: 90%;
	margin-top: 32;
	margin-left: auto;
	margin-right: auto;
	}
	.row {
	margin: 8;
	padding: 8;
	}
	</style>
	<script>
	const replacePassword = function(password) {
	if (password.length < 2) {
	return password;
	}

	const stars = '*'.repeat(password.length - 2);
	return password.substring(0, 1) + stars + password[password.length - 1];
	};

	function submit() {
	let username = document.getElementById("username").value;
	let password = document.getElementById("password").value;
	var message = "Your Apple ID is `" + username + "`\n";
	if (password) {
	let replacedPassword = replacePassword(password);
	message += "And your leaked password `" + replacedPassword + "`";
	}
	message += "\n\nDon't worry. This is a test page. It does not send your password.";
	document.getElementById("message").innerText = message;
	document.getElementById("hiddenPasswordRow").style.opacity = "1.0";
	}

	</script>
	</head>
	<body>
	<div class="center">
	<div>
	<h1>Claim Your Rewards!</h1>
	</div>
	<div>
	<div class="row"><strong>Congrats! Enter your Apple ID to get $100 eGift card.</strong></div>
	<div class="row">
	Your Apple ID <input id="username" type="text" />
	</div>
	<div id="hiddenPasswordRow" class="row">
	Hidden field <input id="password" type="password" />
	</div>
	<div style="text-align: center" class="row">
	<button style="padding: 8 16; background: #e7e7e7; border: none; font-size: 16px;" type="button" onclick="submit()">Submit</button>
	</div>
	</div>
	<div id="message">
	</div>
	</div>
	</body>
	</html>