Hugging Face's logo

Spaces:
rojithonline
/
myproposal
Running

App Files Community
rojithonline commited on
Commit
eac9fa0
·
verified ·
1 Parent(s): cb9e9f9

no add seperate page - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +300 -2
index.html CHANGED
@@ -1,3 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -84,7 +239,7 @@
84
  </nav>
85
 
86
  <div class="flex items-center space-x-4">
87
- <button class="px-4 py-2 rounded-full bg-maroon-700 hover:bg-maroon-600 transition">Login</button>
88
  <button class="px-4 py-2 rounded-full bg-maroon-500 hover:bg-maroon-400 transition">Register</button>
89
  <button class="md:hidden text-2xl">
90
  <i class="fas fa-bars"></i>
@@ -448,6 +603,68 @@
448
  </div>
449
  </footer>
450
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
451
  <script>
452
  // Mobile menu toggle
453
  document.addEventListener('DOMContentLoaded', function() {
@@ -468,6 +685,87 @@
468
  mobileMenu.classList.toggle('space-x-8');
469
  });
470
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
471
  // Smooth scrolling for anchor links
472
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
473
  anchor.addEventListener('click', function (e) {
@@ -480,5 +778,5 @@
480
  });
481
  });
482
  </script>
483
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rojithonline/myproposal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
484
  </html>
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Login - Royal Matrimony</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .country-selector {
12
+ background-position: right 0.75rem center;
13
+ background-size: 1.5em 1.5em;
14
+ }
15
+ .otp-input {
16
+ letter-spacing: 2rem;
17
+ padding-left: 1rem;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="font-sans bg-gray-50 min-h-screen flex items-center">
22
+ <div class="container mx-auto px-4 max-w-md">
23
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
24
+ <!-- Header -->
25
+ <div class="bg-maroon-800 text-white py-6 px-8 text-center">
26
+ <div class="flex justify-center items-center space-x-2 mb-2">
27
+ <i class="fas fa-heart text-2xl text-maroon-300"></i>
28
+ <h1 class="text-2xl font-bold">Royal<span class="text-maroon-300">Matrimony</span></h1>
29
+ </div>
30
+ <h2 class="text-xl font-medium">Login to Your Account</h2>
31
+ </div>
32
+
33
+ <!-- Login Form -->
34
+ <div class="p-8">
35
+ <form id="loginForm">
36
+ <!-- Phone Number Input -->
37
+ <div class="mb-6">
38
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
39
+ <div class="flex">
40
+ <select id="countryCode" class="w-24 px-3 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-maroon-500 focus:border-maroon-500 appearance-none country-selector">
41
+ <option value="+91">India (+91)</option>
42
+ <option value="+1">USA (+1)</option>
43
+ <option value="+44">UK (+44)</option>
44
+ <option value="+971">UAE (+971)</option>
45
+ <option value="+65">Singapore (+65)</option>
46
+ </select>
47
+ <input type="tel" id="phone" name="phone" placeholder="9876543210"
48
+ class="flex-1 px-3 py-3 border-t border-r border-b border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-maroon-500 focus:border-maroon-500"
49
+ required pattern="[0-9]{10}">
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Submit Button -->
54
+ <button type="submit" class="w-full py-3 bg-maroon-600 hover:bg-maroon-700 text-white rounded-lg font-bold transition mb-4">
55
+ Send OTP
56
+ </button>
57
+
58
+ <!-- OTP Section (Initially Hidden) -->
59
+ <div id="otpSection" class="hidden">
60
+ <div class="mb-4 text-center text-gray-600">
61
+ We've sent a 6-digit OTP to <span id="displayPhone" class="font-medium"></span>
62
+ </div>
63
+ <div class="mb-6">
64
+ <label for="otp" class="block text-gray-700 font-medium mb-2">Enter OTP</label>
65
+ <input type="text" id="otp" name="otp" maxlength="6"
66
+ class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-maroon-500 focus:border-maroon-500 text-center otp-input"
67
+ required pattern="[0-9]{6}">
68
+ </div>
69
+ <button type="button" id="verifyOtp" class="w-full py-3 bg-maroon-600 hover:bg-maroon-700 text-white rounded-lg font-bold transition mb-4">
70
+ Verify & Login
71
+ </button>
72
+ <div class="text-center text-sm text-gray-500">
73
+ Didn't receive OTP? <button type="button" id="resendOtp" class="text-maroon-600 hover:text-maroon-700 font-medium">Resend</button>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="text-center text-sm text-gray-500 mt-4">
78
+ By continuing, you agree to our <a href="#" class="text-maroon-600 hover:text-maroon-700">Terms</a> and <a href="#" class="text-maroon-600 hover:text-maroon-700">Privacy Policy</a>
79
+ </div>
80
+ </form>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <script>
86
+ document.addEventListener('DOMContentLoaded', function() {
87
+ const loginForm = document.getElementById('loginForm');
88
+ const otpSection = document.getElementById('otpSection');
89
+ const displayPhone = document.getElementById('displayPhone');
90
+ const verifyOtp = document.getElementById('verifyOtp');
91
+ const resendOtp = document.getElementById('resendOtp');
92
+ const phoneInput = document.getElementById('phone');
93
+ const countryCode = document.getElementById('countryCode');
94
+
95
+ // Format phone number input
96
+ phoneInput.addEventListener('input', function(e) {
97
+ this.value = this.value.replace(/[^0-9]/g, '');
98
+ });
99
+
100
+ // Handle form submission
101
+ loginForm.addEventListener('submit', function(e) {
102
+ e.preventDefault();
103
+
104
+ // Validate phone number
105
+ if (phoneInput.value.length !== 10) {
106
+ alert('Please enter a valid 10-digit phone number');
107
+ return;
108
+ }
109
+
110
+ // In a real app, you would send this to your backend to generate and send OTP
111
+ const fullPhone = countryCode.value + phoneInput.value;
112
+ displayPhone.textContent = fullPhone;
113
+
114
+ // Show OTP section
115
+ otpSection.classList.remove('hidden');
116
+ loginForm.querySelector('button[type="submit"]').classList.add('hidden');
117
+
118
+ // Focus OTP input
119
+ setTimeout(() => {
120
+ document.getElementById('otp').focus();
121
+ }, 300);
122
+ });
123
+
124
+ // Verify OTP
125
+ verifyOtp.addEventListener('click', function() {
126
+ const otp = document.getElementById('otp').value;
127
+
128
+ if (otp.length !== 6) {
129
+ alert('Please enter the 6-digit OTP');
130
+ return;
131
+ }
132
+
133
+ // In a real app, you would verify the OTP with your backend
134
+ alert('OTP verified successfully! Redirecting to dashboard...');
135
+ // window.location.href = 'dashboard.html';
136
+ });
137
+
138
+ // Resend OTP
139
+ resendOtp.addEventListener('click', function() {
140
+ alert('OTP resent to ' + displayPhone.textContent);
141
+ document.getElementById('otp').value = '';
142
+ document.getElementById('otp').focus();
143
+ });
144
+
145
+ // Auto move to next OTP digit
146
+ document.getElementById('otp').addEventListener('input', function(e) {
147
+ if (this.value.length === 6) {
148
+ verifyOtp.click();
149
+ }
150
+ });
151
+ });
152
+ </script>
153
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rojithonline/myproposal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
154
+ </html>
155
+
156
  <!DOCTYPE html>
157
  <html lang="en">
158
  <head>
 
239
  </nav>
240
 
241
  <div class="flex items-center space-x-4">
242
+ <button id="loginButton" class="px-4 py-2 rounded-full bg-maroon-700 hover:bg-maroon-600 transition">Login</button>
243
  <button class="px-4 py-2 rounded-full bg-maroon-500 hover:bg-maroon-400 transition">Register</button>
244
  <button class="md:hidden text-2xl">
245
  <i class="fas fa-bars"></i>
 
603
  </div>
604
  </footer>
605
 
606
+ <!-- Login Modal -->
607
+ <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
608
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden w-full max-w-md mx-4">
609
+ <div class="bg-maroon-800 text-white py-6 px-8 text-center">
610
+ <div class="flex justify-center items-center space-x-2 mb-2">
611
+ <i class="fas fa-heart text-2xl text-maroon-300"></i>
612
+ <h1 class="text-2xl font-bold">Royal<span class="text-maroon-300">Matrimony</span></h1>
613
+ </div>
614
+ <h2 class="text-xl font-medium">Login to Your Account</h2>
615
+ </div>
616
+
617
+ <div class="p-8">
618
+ <form id="loginForm">
619
+ <!-- Phone Number Input -->
620
+ <div class="mb-6">
621
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
622
+ <div class="flex">
623
+ <select id="countryCode" class="w-24 px-3 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-maroon-500 focus:border-maroon-500 appearance-none">
624
+ <option value="+91">India (+91)</option>
625
+ <option value="+1">USA (+1)</option>
626
+ <option value="+44">UK (+44)</option>
627
+ <option value="+971">UAE (+971)</option>
628
+ <option value="+65">Singapore (+65)</option>
629
+ </select>
630
+ <input type="tel" id="phone" name="phone" placeholder="9876543210"
631
+ class="flex-1 px-3 py-3 border-t border-r border-b border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-maroon-500 focus:border-maroon-500"
632
+ required pattern="[0-9]{10}">
633
+ </div>
634
+ </div>
635
+
636
+ <!-- Submit Button -->
637
+ <button type="submit" class="w-full py-3 bg-maroon-600 hover:bg-maroon-700 text-white rounded-lg font-bold transition mb-4">
638
+ Send OTP
639
+ </button>
640
+
641
+ <!-- OTP Section (Initially Hidden) -->
642
+ <div id="otpSection" class="hidden">
643
+ <div class="mb-4 text-center text-gray-600">
644
+ We've sent a 6-digit OTP to <span id="displayPhone" class="font-medium"></span>
645
+ </div>
646
+ <div class="mb-6">
647
+ <label for="otp" class="block text-gray-700 font-medium mb-2">Enter OTP</label>
648
+ <input type="text" id="otp" name="otp" maxlength="6"
649
+ class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-maroon-500 focus:border-maroon-500 text-center tracking-[2rem]"
650
+ required pattern="[0-9]{6}">
651
+ </div>
652
+ <button type="button" id="verifyOtp" class="w-full py-3 bg-maroon-600 hover:bg-maroon-700 text-white rounded-lg font-bold transition mb-4">
653
+ Verify & Login
654
+ </button>
655
+ <div class="text-center text-sm text-gray-500">
656
+ Didn't receive OTP? <button type="button" id="resendOtp" class="text-maroon-600 hover:text-maroon-700 font-medium">Resend</button>
657
+ </div>
658
+ </div>
659
+
660
+ <div class="text-center text-sm text-gray-500 mt-4">
661
+ By continuing, you agree to our <a href="#" class="text-maroon-600 hover:text-maroon-700">Terms</a> and <a href="#" class="text-maroon-600 hover:text-maroon-700">Privacy Policy</a>
662
+ </div>
663
+ </form>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
  <script>
669
  // Mobile menu toggle
670
  document.addEventListener('DOMContentLoaded', function() {
 
685
  mobileMenu.classList.toggle('space-x-8');
686
  });
687
 
688
+ // Login Modal
689
+ const loginButton = document.getElementById('loginButton');
690
+ const loginModal = document.getElementById('loginModal');
691
+ const loginForm = document.getElementById('loginForm');
692
+ const otpSection = document.getElementById('otpSection');
693
+ const displayPhone = document.getElementById('displayPhone');
694
+ const verifyOtp = document.getElementById('verifyOtp');
695
+ const resendOtp = document.getElementById('resendOtp');
696
+ const phoneInput = document.getElementById('phone');
697
+ const countryCode = document.getElementById('countryCode');
698
+
699
+ // Toggle login modal
700
+ loginButton.addEventListener('click', function() {
701
+ loginModal.classList.toggle('hidden');
702
+ });
703
+
704
+ // Close modal when clicking outside
705
+ loginModal.addEventListener('click', function(e) {
706
+ if (e.target === loginModal) {
707
+ loginModal.classList.add('hidden');
708
+ }
709
+ });
710
+
711
+ // Format phone number input
712
+ phoneInput.addEventListener('input', function(e) {
713
+ this.value = this.value.replace(/[^0-9]/g, '');
714
+ });
715
+
716
+ // Handle form submission
717
+ loginForm.addEventListener('submit', function(e) {
718
+ e.preventDefault();
719
+
720
+ // Validate phone number
721
+ if (phoneInput.value.length !== 10) {
722
+ alert('Please enter a valid 10-digit phone number');
723
+ return;
724
+ }
725
+
726
+ // In a real app, you would send this to your backend to generate and send OTP
727
+ const fullPhone = countryCode.value + phoneInput.value;
728
+ displayPhone.textContent = fullPhone;
729
+
730
+ // Show OTP section
731
+ otpSection.classList.remove('hidden');
732
+ loginForm.querySelector('button[type="submit"]').classList.add('hidden');
733
+
734
+ // Focus OTP input
735
+ setTimeout(() => {
736
+ document.getElementById('otp').focus();
737
+ }, 300);
738
+ });
739
+
740
+ // Verify OTP
741
+ verifyOtp.addEventListener('click', function() {
742
+ const otp = document.getElementById('otp').value;
743
+
744
+ if (otp.length !== 6) {
745
+ alert('Please enter the 6-digit OTP');
746
+ return;
747
+ }
748
+
749
+ // In a real app, you would verify the OTP with your backend
750
+ alert('OTP verified successfully! Redirecting to dashboard...');
751
+ loginModal.classList.add('hidden');
752
+ // window.location.href = 'dashboard.html';
753
+ });
754
+
755
+ // Resend OTP
756
+ resendOtp.addEventListener('click', function() {
757
+ alert('OTP resent to ' + displayPhone.textContent);
758
+ document.getElementById('otp').value = '';
759
+ document.getElementById('otp').focus();
760
+ });
761
+
762
+ // Auto move to next OTP digit
763
+ document.getElementById('otp').addEventListener('input', function(e) {
764
+ if (this.value.length === 6) {
765
+ verifyOtp.click();
766
+ }
767
+ });
768
+
769
  // Smooth scrolling for anchor links
770
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
771
  anchor.addEventListener('click', function (e) {
 
778
  });
779
  });
780
  </script>
781
+ </body>
782
  </html>