$(function () {
const $root = $('#backbone-root');
// Render initial structure
const labels = [
'8+ characters',
'12+ characters',
'Lowercase letter',
'Uppercase letter',
'Number',
'Special character'
];
const initialHtml = `
<div class="w-80 p-6 bg-white rounded-xl shadow-lg space-y-4">
<input type="password" placeholder="Enter password"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2">
<div class="space-y-2">
${labels.map(label => `
<div class="flex items-center gap-2">
<div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold bg-gray-200 text-gray-400"></div>
<span class="text-sm text-gray-500">${label}</span>
</div>
`).join('')}
</div>
</div>
`;
$root.html(initialHtml);
// Handle input updates
$root.on('input', 'input[type=password]', function () {
const pwd = $(this).val();
const reqs = [
['8+ characters', pwd.length >= 8],
['12+ characters', pwd.length >= 12],
['Lowercase letter', /[a-z]/.test(pwd)],
['Uppercase letter', /[A-Z]/.test(pwd)],
['Number', /\d/.test(pwd)],
['Special character', /[^a-zA-Z0-9]/.test(pwd)]
];
const html = reqs.map(([label, met]) => `
<div class="flex items-center gap-2">
<div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold
${met ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-400'}">
${met ? '✓' : ''}
</div>
<span class="text-sm ${met ? 'text-green-600 font-medium' : 'text-gray-500'}">
${label}
</span>
</div>
`).join('');
$root.find('.space-y-2').html(html);
});
});