Final_Assignment_VOC/task2.html at main · PranabeshBasu/Final_Assignment_VOC · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>User Registration Form</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-blue-100 to-blue-300 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-white shadow-xl rounded-xl p-8 max-w-md w-full animate-fade-in-down">
    <h2 class="text-3xl font-bold text-center text-blue-700 mb-6">User Registration</h2>

    <form>
      <!-- Full Name -->
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">First Name</label>
        <input type="text" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200" />
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Last Name</label>
        <input type="text" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200" />
      </div>

      <!-- Email -->
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Email</label>
        <input type="email" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200" />
      </div>

      <!-- Password -->
      <div class="mb-2">
        <label class="block text-gray-700 font-medium mb-1">Password</label>
        <input type="password" id="password" required oninput="checkStrength(this.value)"
               class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200" />
      </div>

      <!-- Password Strength Indicator -->
      <div id="strengthIndicator" class="text-sm font-semibold mt-1 mb-4"></div>

      <!-- Confirm Password -->
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Confirm Password</label>
        <input type="password" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200" />
      </div>

      <!-- Date of Birth -->
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Date of Birth</label>
        <input type="date" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200" />
      </div>

      <!-- Gender -->
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Gender</label>
        <div class="flex gap-4 mt-1">
          <label class="flex items-center gap-2">
            <input type="radio" name="gender" value="Male" required />
            <span>Male</span>
          </label>
          <label class="flex items-center gap-2">
            <input type="radio" name="gender" value="Female" />
            <span>Female</span>
          </label>
          <label class="flex items-center gap-2">
            <input type="radio" name="gender" value="Other" />
            <span>Other</span>
          </label>
        </div>
      </div>

      <!-- Profile Picture -->
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Profile Picture</label>
        <input type="file" accept="image/*" class="w-full border p-2 rounded-lg bg-gray-50" />
      </div>

      <!-- Terms -->
      <div class="mb-6">
        <label class="flex items-start gap-2 text-gray-700 text-sm">
          <input type="checkbox" required />
          <span>I agree to the <a href="#" class="text-blue-600 underline">Terms and Conditions</a>.</span>
        </label>
      </div>

      <!-- Submit Button -->
      <button type="submit"
              class="w-full bg-blue-600 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 transition-all duration-300 ease-in-out transform hover:scale-105">
        Register
      </button>
    </form>
  </div>

  <!-- Animations -->
  <style>
    @keyframes fade-in-down {
      0% {
        opacity: 0;
        transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-fade-in-down {
      animation: fade-in-down 0.6s ease-out both;
    }
  </style>

  <!-- JavaScript for Password Strength -->
  <script>
    function checkStrength(password) {
      const strengthIndicator = document.getElementById("strengthIndicator");
      const weakRegex = /^.{0,5}$/;
      const mediumRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,}$/;
      const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

      if (strongRegex.test(password)) {
        strengthIndicator.textContent = "Strength: Strong";
        strengthIndicator.className = "text-green-600 font-semibold";
      } else if (mediumRegex.test(password)) {
        strengthIndicator.textContent = "Strength: Medium";
        strengthIndicator.className = "text-yellow-500 font-semibold";
      } else if (weakRegex.test(password)) {
        strengthIndicator.textContent = "Strength: Weak";
        strengthIndicator.className = "text-red-500 font-semibold";
      } else {
        strengthIndicator.textContent = "";
      }
    }
  </script>

</body>
</html>