Skip to content

Commit c03fdb6

Browse files
25f3001314-dev25f3001314-dev
committed
Add MSME signup modal with Google reCAPTCHA and professional form
1 parent 2e037e2 commit c03fdb6

File tree

1 file changed

+330
-1
lines changed

1 file changed

+330
-1
lines changed

‎index.html‎

Lines changed: 330 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>InvoiceChain Portal</title>
7+
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
78
<style>
89
* {
910
margin: 0;
@@ -262,6 +263,210 @@
262263
font-size: 14px;
263264
}
264265
}
266+
267+
/* Modal Styles */
268+
.modal {
269+
display: none;
270+
position: fixed;
271+
top: 0;
272+
left: 0;
273+
width: 100%;
274+
height: 100%;
275+
background: rgba(0, 0, 0, 0.8);
276+
backdrop-filter: blur(10px);
277+
z-index: 1000;
278+
align-items: center;
279+
justify-content: center;
280+
padding: 20px;
281+
animation: fadeIn 0.3s ease;
282+
}
283+
284+
.modal.active {
285+
display: flex;
286+
}
287+
288+
@keyframes fadeIn {
289+
from { opacity: 0; }
290+
to { opacity: 1; }
291+
}
292+
293+
.modal-content {
294+
background: #ffffff;
295+
border-radius: 32px;
296+
padding: 50px 40px;
297+
width: 100%;
298+
max-width: 550px;
299+
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
300+
position: relative;
301+
animation: slideUp 0.4s ease;
302+
max-height: 90vh;
303+
overflow-y: auto;
304+
}
305+
306+
@keyframes slideUp {
307+
from { transform: translateY(50px); opacity: 0; }
308+
to { transform: translateY(0); opacity: 1; }
309+
}
310+
311+
.close-btn {
312+
position: absolute;
313+
top: 20px;
314+
right: 20px;
315+
font-size: 32px;
316+
color: #666;
317+
cursor: pointer;
318+
background: none;
319+
border: none;
320+
width: 40px;
321+
height: 40px;
322+
display: flex;
323+
align-items: center;
324+
justify-content: center;
325+
border-radius: 50%;
326+
transition: all 0.3s;
327+
}
328+
329+
.close-btn:hover {
330+
background: #f0f0f0;
331+
color: #333;
332+
transform: rotate(90deg);
333+
}
334+
335+
.modal-header {
336+
text-align: center;
337+
margin-bottom: 35px;
338+
}
339+
340+
.modal-icon {
341+
font-size: 70px;
342+
margin-bottom: 15px;
343+
}
344+
345+
.modal-title {
346+
font-size: 32px;
347+
font-weight: 900;
348+
color: #1a1a2e;
349+
text-transform: uppercase;
350+
letter-spacing: 2px;
351+
margin-bottom: 8px;
352+
}
353+
354+
.modal-subtitle {
355+
font-size: 16px;
356+
color: #666;
357+
font-weight: 500;
358+
}
359+
360+
.signup-form {
361+
display: flex;
362+
flex-direction: column;
363+
gap: 20px;
364+
}
365+
366+
.form-group {
367+
display: flex;
368+
flex-direction: column;
369+
}
370+
371+
.form-label {
372+
font-size: 14px;
373+
font-weight: 700;
374+
color: #333;
375+
margin-bottom: 8px;
376+
text-transform: uppercase;
377+
letter-spacing: 1px;
378+
}
379+
380+
.form-input {
381+
padding: 16px 20px;
382+
border: 2px solid #e0e0e0;
383+
border-radius: 12px;
384+
font-size: 16px;
385+
font-family: inherit;
386+
transition: all 0.3s;
387+
background: #f8f9fa;
388+
}
389+
390+
.form-input:focus {
391+
outline: none;
392+
border-color: #667eea;
393+
background: #ffffff;
394+
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
395+
}
396+
397+
.form-row {
398+
display: grid;
399+
grid-template-columns: 1fr 1fr;
400+
gap: 20px;
401+
}
402+
403+
.captcha-wrapper {
404+
display: flex;
405+
justify-content: center;
406+
margin: 10px 0;
407+
transform: scale(0.95);
408+
transform-origin: center;
409+
}
410+
411+
.submit-btn {
412+
padding: 18px 40px;
413+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
414+
color: #ffffff;
415+
border: none;
416+
border-radius: 12px;
417+
font-size: 18px;
418+
font-weight: 800;
419+
text-transform: uppercase;
420+
letter-spacing: 2px;
421+
cursor: pointer;
422+
transition: all 0.4s;
423+
margin-top: 10px;
424+
}
425+
426+
.submit-btn:hover {
427+
transform: translateY(-3px);
428+
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
429+
}
430+
431+
.submit-btn:active {
432+
transform: translateY(-1px);
433+
}
434+
435+
.login-link {
436+
text-align: center;
437+
margin-top: 20px;
438+
font-size: 15px;
439+
color: #666;
440+
}
441+
442+
.login-link a {
443+
color: #667eea;
444+
text-decoration: none;
445+
font-weight: 700;
446+
}
447+
448+
.login-link a:hover {
449+
text-decoration: underline;
450+
}
451+
452+
@media (max-width: 768px) {
453+
.modal-content {
454+
padding: 40px 30px;
455+
max-width: 95%;
456+
}
457+
458+
.form-row {
459+
grid-template-columns: 1fr;
460+
}
461+
462+
.modal-title {
463+
font-size: 26px;
464+
}
465+
466+
.captcha-wrapper {
467+
transform: scale(0.85);
468+
}
469+
}
265470
</style>
266471
</head>
267472
<body>
@@ -276,7 +481,7 @@ <h1 class="title">InvoiceChain Portal</h1>
276481

277482
<div class="cards-grid">
278483
<!-- MSME Portal Card -->
279-
<div class="card">
484+
<div class="card" id="msmeCard">
280485
<span class="card-icon">🏢</span>
281486
<h2 class="card-title">MSME Portal</h2>
282487
<p class="card-description">For small and medium enterprises</p>
@@ -297,5 +502,129 @@ <h2 class="card-title">Buyer Portal</h2>
297502
</div>
298503
</div>
299504
</div>
505+
506+
<!-- MSME Signup Modal -->
507+
<div class="modal" id="msmeModal">
508+
<div class="modal-content">
509+
<button class="close-btn" id="closeModal">&times;</button>
510+
511+
<div class="modal-header">
512+
<div class="modal-icon">🏢</div>
513+
<h2 class="modal-title">MSME Sign Up</h2>
514+
<p class="modal-subtitle">Create your enterprise account</p>
515+
</div>
516+
517+
<form class="signup-form" id="signupForm">
518+
<div class="form-row">
519+
<div class="form-group">
520+
<label class="form-label">First Name</label>
521+
<input type="text" class="form-input" placeholder="John" required>
522+
</div>
523+
<div class="form-group">
524+
<label class="form-label">Last Name</label>
525+
<input type="text" class="form-input" placeholder="Doe" required>
526+
</div>
527+
</div>
528+
529+
<div class="form-group">
530+
<label class="form-label">Company Name</label>
531+
<input type="text" class="form-input" placeholder="Your Company Pvt Ltd" required>
532+
</div>
533+
534+
<div class="form-group">
535+
<label class="form-label">Email Address</label>
536+
<input type="email" class="form-input" placeholder="john@company.com" required>
537+
</div>
538+
539+
<div class="form-group">
540+
<label class="form-label">Phone Number</label>
541+
<input type="tel" class="form-input" placeholder="+91 98765 43210" required>
542+
</div>
543+
544+
<div class="form-group">
545+
<label class="form-label">Password</label>
546+
<input type="password" class="form-input" placeholder="Minimum 8 characters" minlength="8" required>
547+
</div>
548+
549+
<div class="form-group">
550+
<label class="form-label">Confirm Password</label>
551+
<input type="password" class="form-input" placeholder="Re-enter password" minlength="8" required>
552+
</div>
553+
554+
<div class="form-group">
555+
<label class="form-label">Business Registration Number</label>
556+
<input type="text" class="form-input" placeholder="GST/CIN/MSME Number" required>
557+
</div>
558+
559+
<!-- reCAPTCHA -->
560+
<div class="captcha-wrapper">
561+
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
562+
</div>
563+
564+
<button type="submit" class="submit-btn">Create Account</button>
565+
566+
<div class="login-link">
567+
Already have an account? <a href="#">Sign In</a>
568+
</div>
569+
</form>
570+
</div>
571+
</div>
572+
573+
<script>
574+
// Modal functionality
575+
const msmeCard = document.getElementById('msmeCard');
576+
const msmeModal = document.getElementById('msmeModal');
577+
const closeModal = document.getElementById('closeModal');
578+
const signupForm = document.getElementById('signupForm');
579+
580+
// Open modal when MSME card is clicked
581+
msmeCard.addEventListener('click', () => {
582+
msmeModal.classList.add('active');
583+
});
584+
585+
// Close modal when close button is clicked
586+
closeModal.addEventListener('click', () => {
587+
msmeModal.classList.remove('active');
588+
});
589+
590+
// Close modal when clicking outside
591+
msmeModal.addEventListener('click', (e) => {
592+
if (e.target === msmeModal) {
593+
msmeModal.classList.remove('active');
594+
}
595+
});
596+
597+
// Close modal on Escape key
598+
document.addEventListener('keydown', (e) => {
599+
if (e.key === 'Escape' && msmeModal.classList.contains('active')) {
600+
msmeModal.classList.remove('active');
601+
}
602+
});
603+
604+
// Form submission
605+
signupForm.addEventListener('submit', (e) => {
606+
e.preventDefault();
607+
608+
// Check if reCAPTCHA is completed
609+
const recaptchaResponse = grecaptcha.getResponse();
610+
if (recaptchaResponse.length === 0) {
611+
alert('Please complete the reCAPTCHA verification');
612+
return;
613+
}
614+
615+
// Password validation
616+
const passwords = signupForm.querySelectorAll('input[type="password"]');
617+
if (passwords[0].value !== passwords[1].value) {
618+
alert('Passwords do not match!');
619+
return;
620+
}
621+
622+
// Form is valid
623+
alert('Sign up successful! Welcome to InvoiceChain MSME Portal.');
624+
msmeModal.classList.remove('active');
625+
signupForm.reset();
626+
grecaptcha.reset();
627+
});
628+
</script>
300629
</body>
301630
</html>

0 commit comments

Comments
 (0)