bharath/webapp/src/views/pages/register.ejs
Vivek ed320e82c1 feat: add 35+ features - i18n, voice input, gamification, driver tools, marketplace
- Multi-language support (English, Hindi, Tamil, Telugu) with icon-based UI
- Voice input (Web Speech API) for low-literacy users
- Driver tools: Ledger, Trip Planner, Return Load, Safety, Maintenance, FASTag
- Marketplace: WhatsApp share, Rate Intelligence, Classifieds, Fleet
- Engagement: Gamification (XP/Levels), Challenges, Leaderboard, Referrals, Feed
- Business: Invoice (GST+UPI), Reports+CSV, Notifications, Documents, Bank
- Games: Rate Guesser, Route Quiz
- SEO: Sitemap, public load share pages with OG tags
- India utilities: vehicle validation, UPI links, toll/fuel calculator
- 29 routes, 54 templates, 4 languages, 3 migration files
2026-05-31 09:19:16 +00:00

92 lines
4.3 KiB
Text

<% var title = t('actions.register'); %>
<%- include('../partials/header') %>
<div class="tricolor-strip"><div class="tricolor-saffron"></div><div class="tricolor-white"></div><div class="tricolor-green"></div></div>
<section class="section">
<div class="container" style="max-width:440px">
<div class="card">
<h2 class="text-center" style="margin-bottom:4px"><%= t('auth.registerTitle') %></h2>
<p class="text-center" style="color:var(--gray-700);font-size:0.8rem;margin-bottom:var(--space-lg)"><%= t('auth.registerSubtitle') %></p>
<% if (error) { %>
<div class="alert-error"><%= error %></div>
<% } %>
<form method="POST" action="/register" id="registerForm">
<div class="form-group">
<label class="form-label"><%= t('auth.yourRole') %> *</label>
<div class="role-select-grid">
<label class="role-option">
<input type="radio" name="role" value="driver" <%= role === 'driver' ? 'checked' : '' %> required>
<div class="role-option-card"><span class="role-icon">🚛</span><span><%= t('auth.driver') %></span></div>
</label>
<label class="role-option">
<input type="radio" name="role" value="shipper" <%= role === 'shipper' ? 'checked' : '' %>>
<div class="role-option-card"><span class="role-icon">📦</span><span><%= t('auth.shipper') %></span></div>
</label>
<label class="role-option">
<input type="radio" name="role" value="broker" <%= role === 'broker' ? 'checked' : '' %>>
<div class="role-option-card"><span class="role-icon">🤝</span><span><%= t('auth.broker') %></span></div>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">👤 <%= t('auth.fullName') %> *</label>
<input type="text" name="name" class="form-input" placeholder="<%= t('auth.fullName') %>" required>
</div>
<div class="form-group">
<label class="form-label" id="usernameLabel">📝 <%= t('auth.username') %> *</label>
<input type="text" name="username" class="form-input" id="usernameInput" placeholder="<%= t('auth.username') %>" required>
<small id="usernameHint" style="color:var(--gray-700);font-size:0.7rem"></small>
</div>
<div class="form-group">
<label class="form-label">📱 <%= t('auth.phone') %></label>
<input type="tel" name="phone" class="form-input" placeholder="9876543210" maxlength="10">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)">
<div class="form-group">
<label class="form-label">🔒 <%= t('auth.password') %> *</label>
<input type="password" name="password" class="form-input" placeholder="••••" required minlength="4">
</div>
<div class="form-group">
<label class="form-label">🔒 <%= t('auth.confirmPassword') %> *</label>
<input type="password" name="password_confirm" class="form-input" placeholder="••••" required minlength="4">
</div>
</div>
<button type="submit" class="btn btn-cta btn-block btn-lg"><%= t('auth.registerBtn') %> →</button>
</form>
<p class="text-center" style="margin-top:var(--space-lg);font-size:0.8rem">
<%= t('auth.hasAccount') %> <a href="/login"><%= t('actions.login') %></a>
</p>
</div>
</div>
</section>
<script>
document.querySelectorAll('input[name="role"]').forEach(r => {
r.addEventListener('change', function() {
const label = document.getElementById('usernameLabel');
const input = document.getElementById('usernameInput');
const hint = document.getElementById('usernameHint');
if (this.value === 'driver') {
label.innerHTML = '🚛 <%= t("auth.vehicleNumber") %> *';
input.placeholder = 'MH31AB1234';
hint.textContent = '<%= t("auth.vehicleHint") %>';
} else {
label.innerHTML = '📝 <%= t("auth.username") %> *';
input.placeholder = '<%= t("auth.username") %>';
hint.textContent = '';
}
});
});
const checked = document.querySelector('input[name="role"]:checked');
if (checked) checked.dispatchEvent(new Event('change'));
</script>
<%- include('../partials/footer') %>