Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Test Admin Input Functionality</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| padding: 20px; | |
| } | |
| .test-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .form-control { | |
| background-color: #fff ; | |
| color: #497060 ; | |
| border: 1px solid #ced4da ; | |
| pointer-events: auto ; | |
| user-select: text ; | |
| } | |
| .form-control:focus { | |
| border-color: #7c3aed ; | |
| box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) ; | |
| } | |
| .test-result { | |
| margin-top: 20px; | |
| padding: 15px; | |
| border-radius: 5px; | |
| background-color: #f8f9fa; | |
| } | |
| .success { background-color: #d4edda; color: #155724; } | |
| .error { background-color: #f8d7da; color: #721c24; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="test-container"> | |
| <h2><i class="fas fa-test-tube"></i> Admin Input Functionality Test</h2> | |
| <p>This page tests if the input fields work exactly like in the admin dashboard.</p> | |
| <!-- Test Form --> | |
| <form id="testForm"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_username">Username *</label> | |
| <input type="text" class="form-control" id="test_username" name="username" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_password">Password *</label> | |
| <input type="password" class="form-control" id="test_password" name="password" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_first_name">First Name *</label> | |
| <input type="text" class="form-control" id="test_first_name" name="first_name" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_last_name">Last Name *</label> | |
| <input type="text" class="form-control" id="test_last_name" name="last_name" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_email">Email *</label> | |
| <input type="email" class="form-control" id="test_email" name="email" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_phone">Phone</label> | |
| <input type="tel" class="form-control" id="test_phone" name="phone"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_specialization">Specialization *</label> | |
| <select class="form-control" id="test_specialization" name="specialization" required> | |
| <option value="">Select Specialization</option> | |
| <option value="psychiatrist">Psychiatrist</option> | |
| <option value="psychologist">Psychologist</option> | |
| <option value="counselor">Counselor</option> | |
| <option value="social_worker">Social Worker</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="test_experience">Experience (Years)</label> | |
| <input type="number" class="form-control" id="test_experience" name="experience_years" min="0" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Expertise Areas *</label> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" name="expertise" value="depression" id="test_expertise_depression"> | |
| <label class="form-check-label" for="test_expertise_depression">Depression</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" name="expertise" value="anxiety" id="test_expertise_anxiety"> | |
| <label class="form-check-label" for="test_expertise_anxiety">Anxiety</label> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" name="expertise" value="ptsd" id="test_expertise_ptsd"> | |
| <label class="form-check-label" for="test_expertise_ptsd">PTSD</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" name="expertise" value="trauma" id="test_expertise_trauma"> | |
| <label class="form-check-label" for="test_expertise_trauma">Trauma</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="test_bio">Bio</label> | |
| <textarea class="form-control" id="test_bio" name="bio" rows="3" placeholder="Brief professional background..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <button type="submit" class="btn btn-primary">Test Submit</button> | |
| <button type="button" class="btn btn-secondary" onclick="clearForm()">Clear Form</button> | |
| <button type="button" class="btn btn-info" onclick="testInputs()">Test Input Functionality</button> | |
| </div> | |
| </form> | |
| <div id="testResults" class="test-result" style="display: none;"> | |
| <h5>Test Results:</h5> | |
| <div id="testContent"></div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Test form functionality | |
| $('#testForm').on('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Form submitted successfully! All inputs are working.'); | |
| }); | |
| function clearForm() { | |
| $('#testForm')[0].reset(); | |
| $('#testResults').hide(); | |
| } | |
| function testInputs() { | |
| const results = []; | |
| const inputs = $('#testForm input, #testForm select, #testForm textarea'); | |
| results.push('<h6>Input Functionality Test:</h6>'); | |
| results.push('<ul>'); | |
| inputs.each(function(index) { | |
| const input = $(this); | |
| const type = input.attr('type') || input.prop('tagName').toLowerCase(); | |
| const name = input.attr('name') || 'unnamed'; | |
| const id = input.attr('id') || 'no-id'; | |
| // Test if input is focusable | |
| let focusable = false; | |
| try { | |
| input.focus(); | |
| focusable = document.activeElement === input[0]; | |
| } catch (e) { | |
| focusable = false; | |
| } | |
| // Test if input accepts typing | |
| let typeable = false; | |
| if (type === 'text' || type === 'email' || type === 'tel' || type === 'password') { | |
| try { | |
| const originalValue = input.val(); | |
| input.val(originalValue + 'test'); | |
| typeable = input.val().includes('test'); | |
| input.val(originalValue); // Restore original value | |
| } catch (e) { | |
| typeable = false; | |
| } | |
| } else { | |
| typeable = true; // For selects and textareas | |
| } | |
| const status = focusable && typeable ? '✅' : '❌'; | |
| const statusText = focusable && typeable ? 'Working' : 'Not Working'; | |
| results.push(`<li>${status} <strong>${name}</strong> (${type}): ${statusText}</li>`); | |
| }); | |
| results.push('</ul>'); | |
| // Overall test result | |
| const allWorking = inputs.toArray().every(input => { | |
| const $input = $(input); | |
| try { | |
| $input.focus(); | |
| const focusable = document.activeElement === input; | |
| return focusable; | |
| } catch (e) { | |
| return false; | |
| } | |
| }); | |
| const overallStatus = allWorking ? 'success' : 'error'; | |
| const overallText = allWorking ? 'All inputs are working correctly!' : 'Some inputs are not working properly.'; | |
| results.push(`<div class="${overallStatus}"><strong>Overall Result: ${overallText}</strong></div>`); | |
| $('#testContent').html(results.join('')); | |
| $('#testResults').show(); | |
| } | |
| // Auto-test on page load | |
| $(document).ready(function() { | |
| console.log('🧪 Input functionality test page loaded'); | |
| console.log('📝 Testing', $('#testForm input, #testForm select, #testForm textarea').length, 'inputs'); | |
| // Test each input | |
| $('#testForm input, #testForm select, #testForm textarea').each(function(index) { | |
| const input = $(this); | |
| console.log(`Input ${index}:`, { | |
| type: input.attr('type') || input.prop('tagName').toLowerCase(), | |
| name: input.attr('name'), | |
| id: input.attr('id'), | |
| focusable: function() { | |
| try { | |
| input.focus(); | |
| return document.activeElement === input[0]; | |
| } catch (e) { | |
| return false; | |
| } | |
| }() | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |