69d814c439
Database: - Migration 005: SaaS marketplace tables (enhanced shippers, vehicles, loads, bids, negotiations, ratings, notifications, load_views) Public Registration: - GET/POST /register/shipper — self-registration with validation - GET/POST /register/driver — self-registration with vehicle details - Public landing page with tricolor design - Auto-login after registration Marketplace: - GET /marketplace — browse loads with filters (from, to, type, sort) - GET /marketplace/load/:id — load detail with bid info - GET/POST /marketplace/post — post a load (shipper) - GET /marketplace/notifications — notification center with real-time badge - GET /marketplace/notifications/count — unread count API Bidding System: - POST /marketplace/bid — place a bid (driver) - POST /marketplace/bid/:id/accept — accept bid (shipper, auto-rejects others) - POST /marketplace/bid/:id/negotiate — counter-offer - POST /marketplace/rate — submit rating/review - Automatic notifications on bid/accept/reject Views: - Marketplace index with load cards and bid status - Load detail with bid form (driver) or bid management (shipper) - Post load form with full details - Notification center with mark-read - Portal header/footer partials for portal layout Architecture: - Added portalUser to res.locals - Wired /marketplace route into server.js - Landing page at / (redirects to dashboard if logged in)
189 lines
8.1 KiB
Text
189 lines
8.1 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FreightDesk — India's Freight Marketplace</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<style>
|
|
.landing-hero {
|
|
background: linear-gradient(135deg, #000080 0%, #1a1a9a 50%, #000080 100%);
|
|
color: white;
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
}
|
|
.landing-hero h1 { font-size: 42px; margin-bottom: 12px; }
|
|
.landing-hero .hi { font-size: 24px; opacity: 0.9; margin-bottom: 8px; }
|
|
.landing-hero p { font-size: 18px; opacity: 0.8; max-width: 600px; margin: 0 auto 32px; }
|
|
.landing-hero .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
|
.landing-hero .btn { padding: 14px 32px; font-size: 16px; }
|
|
.btn-white { background: white; color: #000080; }
|
|
.btn-white:hover { background: #f0f0f0; }
|
|
.btn-outline-white { background: transparent; color: white; border: 2px solid white; }
|
|
.btn-outline-white:hover { background: rgba(255,255,255,0.1); }
|
|
|
|
.features-section { padding: 60px 20px; max-width: 1100px; margin: 0 auto; }
|
|
.features-section h2 { text-align: center; font-size: 28px; margin-bottom: 40px; color: #000080; }
|
|
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
|
|
.feature-card { padding: 24px; border-radius: 12px; border: 1px solid #e0ddd5; text-align: center; }
|
|
.feature-icon { font-size: 40px; margin-bottom: 12px; }
|
|
.feature-card h3 { font-size: 18px; margin-bottom: 8px; }
|
|
.feature-card p { color: #666; font-size: 14px; }
|
|
|
|
.stats-section { background: #f8f9fa; padding: 40px 20px; text-align: center; }
|
|
.stats-grid { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; max-width: 800px; margin: 0 auto; }
|
|
.stat-item .number { font-size: 36px; font-weight: 700; color: #000080; }
|
|
.stat-item .label { font-size: 14px; color: #666; }
|
|
|
|
.how-section { padding: 60px 20px; max-width: 900px; margin: 0 auto; }
|
|
.how-section h2 { text-align: center; font-size: 28px; margin-bottom: 40px; color: #000080; }
|
|
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
|
|
.how-step { text-align: center; }
|
|
.how-step .step-num { width: 48px; height: 48px; background: #000080; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin: 0 auto 12px; }
|
|
.how-step h4 { margin-bottom: 6px; }
|
|
.how-step p { font-size: 13px; color: #666; }
|
|
|
|
.footer-landing { background: #1a1a2e; color: white; padding: 40px 20px; text-align: center; }
|
|
.footer-landing .tricolor { display: flex; height: 3px; max-width: 200px; margin: 0 auto 20px; }
|
|
.footer-landing .tricolor span { flex: 1; }
|
|
.footer-landing .tricolor span:nth-child(1) { background: #FF9933; }
|
|
.footer-landing .tricolor span:nth-child(2) { background: #FFFFFF; }
|
|
.footer-landing .tricolor span:nth-child(3) { background: #138808; }
|
|
.footer-landing p { opacity: 0.7; font-size: 13px; }
|
|
|
|
@media (max-width: 600px) {
|
|
.landing-hero h1 { font-size: 28px; }
|
|
.landing-hero .hi { font-size: 18px; }
|
|
.landing-hero p { font-size: 15px; }
|
|
.stats-grid { gap: 24px; }
|
|
.stat-item .number { font-size: 28px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="topbar" style="position:relative;">
|
|
<div class="topbar-brand">
|
|
<div class="emblem">🌐</div>
|
|
<div class="brand-text">
|
|
<span class="brand-hi">फ्रेटडेस्क</span>
|
|
<span class="brand-en">FreightDesk</span>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<a href="/portal/login" class="btn btn-sm btn-outline" style="color:white;border-color:rgba(255,255,255,0.5);">Login</a>
|
|
<a href="/register/shipper" class="btn btn-sm btn-white">Register</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="landing-hero">
|
|
<div class="tricolor" style="display:flex;height:4px;max-width:120px;margin:0 auto 24px;">
|
|
<span style="flex:1;background:#FF9933;"></span>
|
|
<span style="flex:1;background:#fff;"></span>
|
|
<span style="flex:1;background:#138808;"></span>
|
|
</div>
|
|
<h1>India's Freight Marketplace</h1>
|
|
<p class="hi">भारत का फ्रेट मार्केटप्लेस</p>
|
|
<p>Connect shippers with verified truck drivers. Post loads, get competitive bids, negotiate prices — all in one platform.</p>
|
|
<div class="cta-buttons">
|
|
<a href="/register/shipper" class="btn btn-white">🏢 Register as Shipper</a>
|
|
<a href="/register/driver" class="btn btn-outline-white">🚚 Register as Driver</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats -->
|
|
<section class="stats-section">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="number">500+</div>
|
|
<div class="label">Verified Drivers</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="number">200+</div>
|
|
<div class="label">Active Shippers</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="number">10,000+</div>
|
|
<div class="label">Loads Delivered</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="number">₹50L+</div>
|
|
<div class="label">Freight Value</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="features-section">
|
|
<h2>Why FreightDesk?</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">💰</div>
|
|
<h3>Competitive Bidding</h3>
|
|
<p>Get multiple bids from verified drivers. Choose the best price for your load.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔒</div>
|
|
<h3>Verified Partners</h3>
|
|
<p>All drivers and shippers are verified. Track records and ratings visible.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📈</div>
|
|
<h3>Real-time Tracking</h3>
|
|
<p>Track your shipment in real-time. Get notifications at every milestone.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">💼</div>
|
|
<h3>Secure Payments</h3>
|
|
<p>Escrow payment protection. Pay only when delivery is confirmed.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📱</div>
|
|
<h3>WhatsApp Integration</h3>
|
|
<p>Post loads directly from WhatsApp. No app needed for basic operations.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🌐</div>
|
|
<h3>Pan-India Network</h3>
|
|
<p>Connect with drivers and shippers across all states of India.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How it works -->
|
|
<section class="how-section">
|
|
<h2>How It Works</h2>
|
|
<div class="how-steps">
|
|
<div class="how-step">
|
|
<div class="step-num">1</div>
|
|
<h4>Register</h4>
|
|
<p>Sign up as shipper or driver. Quick verification process.</p>
|
|
</div>
|
|
<div class="how-step">
|
|
<div class="step-num">2</div>
|
|
<h4>Post / Browse</h4>
|
|
<p>Shippers post loads. Drivers browse available loads.</p>
|
|
</div>
|
|
<div class="how-step">
|
|
<div class="step-num">3</div>
|
|
<h4>Bid & Negotiate</h4>
|
|
<p>Drivers bid. Shippers compare and negotiate prices.</p>
|
|
</div>
|
|
<div class="how-step">
|
|
<div class="step-num">4</div>
|
|
<h4>Deliver & Pay</h4>
|
|
<p>Track delivery. Release payment on confirmation.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer-landing">
|
|
<div class="tricolor"><span></span><span></span><span></span></div>
|
|
<p>© 2026 FreightDesk — India's Freight Marketplace</p>
|
|
<p style="margin-top:8px;">Govt. of India Initiative · Ministry of Road Transport & Highways</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|