362 lines
15 KiB
Plaintext
362 lines
15 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Virtual Assistant Registration</title>
|
|
|
|
<link href="/public/css/va-register.css" rel="stylesheet">
|
|
|
|
<style>
|
|
/* body {
|
|
background-color: #f8f9fa;
|
|
font-family: 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.card-registration {
|
|
border: none;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-registration img {
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 3rem !important;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 600;
|
|
color: #343a40;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.form-outline {
|
|
position: relative;
|
|
}
|
|
|
|
.form-control-lg {
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 500;
|
|
color: #495057;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.btn-lg {
|
|
border-radius: 8px;
|
|
padding: 0.7rem 2rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-warning {
|
|
background-color: #ffc107;
|
|
border: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
background-color: #e0a800;
|
|
}
|
|
|
|
.btn-light {
|
|
border: 1px solid #ccc;
|
|
font-weight: 500;
|
|
}
|
|
|
|
h5 {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
border-bottom: 2px solid #ffc107;
|
|
display: inline-block;
|
|
padding-bottom: 0.25rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.card-body {
|
|
padding: 2rem !important;
|
|
}
|
|
|
|
.card-registration img {
|
|
display: none;
|
|
}
|
|
} */
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<!-- Sidebar for desktop -->
|
|
<div class="sidebar">
|
|
<div class="logo">
|
|
<div class="logo-placeholder">
|
|
<h2>DocTracker</h2>
|
|
</div>
|
|
</div>
|
|
<nav class="progress-steps">
|
|
<div class="step active" data-step="1" onclick="goToStep(1)">
|
|
<div class="step-number">1</div>
|
|
<div class="step-text">Account Setup</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="2" onclick="goToStep(2)">
|
|
<div class="step-number">2</div>
|
|
<div class="step-text">Personal Information</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="3" onclick="goToStep(3)">
|
|
<div class="step-number">3</div>
|
|
<div class="step-text">Contact Information</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="4" onclick="goToStep(4)">
|
|
<div class="step-number">4</div>
|
|
<div class="step-text">Payment Details</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="5" onclick="goToStep(5)">
|
|
<div class="step-number">5</div>
|
|
<div class="step-text">Done</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div class="main-content">
|
|
<!-- Mobile progress indicator -->
|
|
<div class="mobile-progress">
|
|
<ol>
|
|
<li class="step active" data-step="1" onclick="goToStep(1)">
|
|
<div class="step-number">1</div>
|
|
<div class="step-text">Account</div>
|
|
</li>
|
|
<li class="step" data-step="2" onclick="goToStep(2)">
|
|
<div class="step-number">2</div>
|
|
<div class="step-text">Personal</div>
|
|
</li>
|
|
<li class="step" data-step="3" onclick="goToStep(3)">
|
|
<div class="step-number">3</div>
|
|
<div class="step-text">Contact</div>
|
|
</li>
|
|
<li class="step" data-step="4" onclick="goToStep(4)">
|
|
<div class="step-number">4</div>
|
|
<div class="step-text">Payment</div>
|
|
</li>
|
|
<li class="step" data-step="5" onclick="goToStep(5)">
|
|
<div class="step-number">5</div>
|
|
<div class="step-text">Done</div>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Form container -->
|
|
<div class="form-container">
|
|
<h2 class="form-title-sec">Virtual Assistant Registration</h2>
|
|
<div class="form-card">
|
|
<!-- Step 1: Account Setup -->
|
|
<div class="form-step active" id="step-1">
|
|
<h2 class="form-title">Account Setup</h2>
|
|
<form id="account-form">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="email" id="email" class="input-field" placeholder=" " required>
|
|
<label for="email" class="input-label">Email Address *</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="password" id="password" class="input-field" placeholder=" " required>
|
|
<label for="password" class="input-label">Create Password *</label>
|
|
</div>
|
|
<div class="password-actions">
|
|
<button type="button" class="password-toggle" onclick="togglePasswordVisibility()">Show Password</button>
|
|
<button type="button" class="password-generate" onclick="generatePassword()">Generate Strong Password</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="password" id="confirmPassword" class="input-field" placeholder=" " required>
|
|
<label for="confirmPassword" class="input-label">Confirm Password *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="password-match-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">Passwords do not match</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<div></div>
|
|
<button type="button" class="btn btn-primary" onclick="nextStep(2)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 2: Personal Information -->
|
|
<div class="form-step" id="step-2">
|
|
<h2 class="form-title">Personal Information</h2>
|
|
|
|
<div class="profile-incomplete" id="profile-incomplete" style="display: none;">
|
|
Profile is not yet complete, first name is missing
|
|
</div>
|
|
|
|
<form id="personal-form">
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="firstName" class="input-field" placeholder=" " required>
|
|
<label for="firstName" class="input-label">First Name *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="lastName" class="input-field" placeholder=" " required>
|
|
<label for="lastName" class="input-label">Last Name *</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="number" id="age" class="input-field" placeholder=" " min="18" max="100">
|
|
<label for="age" class="input-label">Age</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="date" id="dob" class="input-field" placeholder=" ">
|
|
<label for="dob" class="input-label">Date of Birth</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="address" class="input-field" placeholder=" " required>
|
|
<label for="address" class="input-label">Address *</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="city" class="input-field" placeholder=" " required>
|
|
<label for="city" class="input-label">City / Town *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<select id="country" class="select-field" required>
|
|
<option value=""></option>
|
|
</select>
|
|
<label for="country" class="input-label">Country *</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<select id="state" class="select-field" required>
|
|
<option value=""></option>
|
|
</select>
|
|
<label for="state" class="input-label">State / Region *</label>
|
|
<div class="location-loading" id="state-loading">Loading states...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="prevStep(1)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="nextStep(3)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 3: Contact Information -->
|
|
<div class="form-step" id="step-3">
|
|
<h2 class="form-title">Contact Information</h2>
|
|
<form id="contact-form">
|
|
<div class="form-group">
|
|
<label for="phone" class="input-label">Phone Number *</label>
|
|
<div class="input-container">
|
|
<input type="tel" id="phone" class="input-field" placeholder=" " required>
|
|
<label for="phone" class="input-label">+ Phone Number</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="skype" class="input-field" placeholder=" ">
|
|
<label for="skype" class="input-label">Skype ID</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="prevStep(2)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="nextStep(4)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 4: Payment Details -->
|
|
<div class="form-step" id="step-4">
|
|
<h2 class="form-title">Payment Details</h2>
|
|
<form id="payment-form">
|
|
<div class="form-group">
|
|
<div class="payment-option" onclick="selectPaymentMethod('payoneer')">
|
|
<h4>Payoneer</h4>
|
|
<p>Receive payments via Payoneer</p>
|
|
</div>
|
|
<div id="payoneer-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="payoneerAccount" class="input-field" placeholder=" " required>
|
|
<label for="payoneerAccount" class="input-label">Payoneer Account Number *</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-option" onclick="selectPaymentMethod('veem')">
|
|
<h4>Veem</h4>
|
|
<p>Receive payments via Veem</p>
|
|
</div>
|
|
<div id="veem-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="veemAccount" class="input-field" placeholder=" " required>
|
|
<label for="veemAccount" class="input-label">Veem Account Number *</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="prevStep(3)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="submitForm()">Complete Registration</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 5: Success -->
|
|
<div class="form-step" id="step-5">
|
|
<div class="success-message">
|
|
<div class="success-icon">✓</div>
|
|
<h3>Registration Complete!</h3>
|
|
<p>Your Virtual Assistant account has been successfully created..</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/public/js/va-register.js"></script>
|
|
</body>
|
|
</html>
|