<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Neumorphic Form Validation | Learn With Arshyan</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #e0e0e0;
padding: 40px;
border-radius: 20px;
box-shadow: 9px 9px 16px #bebebe, -9px -9px 16px #ffffff;
width: 100%;
max-width: 380px;
text-align: center;
}
h2 {
margin-bottom: 30px;
color: #333;
font-weight: 600;
}
.input-group {
margin-bottom: 25px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
color: #333;
}
input {
width: 100%;
padding: 12px 16px;
font-size: 15px;
border: none;
border-radius: 10px;
background: #e0e0e0;
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
outline: none;
color: #333;
}
button {
width: 100%;
padding: 14px;
background: #e0e0e0;
color: #2196f3;
font-weight: bold;
border: none;
border-radius: 14px;
font-size: 16px;
cursor: pointer;
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
transition: 0.3s ease;
}
button:hover {
color: #fff;
background: #2196f3;
box-shadow: inset 5px 5px 10px #1976d2, inset -5px -5px 10px #42a5f5;
}
.forgot {
margin-top: 20px;
font-size: 14px;
color: #555;
}
.forgot a {
color: #d32f2f;
text-decoration: none;
}
.error {
color: #d32f2f;
font-size: 13px;
margin-top: 5px;
display: block;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form id="loginForm" novalidate>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" required />
<small class="error" id="emailError"></small>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" required />
<small class="error" id="passwordError"></small>
</div>
<button type="submit">Sign In</button>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p class="forgot">Forgot Password? <a href="#">click here</a></p>
</form>
</div>
<script>
const form = document.getElementById('loginForm');
form.addEventListener('submit', function (e) {
e.preventDefault();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value.trim();
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
let valid = true;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
document.getElementById('emailError').textContent = 'Please enter a valid email.';
valid = false;
}
if (password.length < 6) {
document.getElementById('passwordError').textContent = 'Password must be at least 6 characters.';
valid = false;
}
if (valid) {
alert('Login successful!');
form.reset();
}
});
</script>
</body>
</html>
]]>
