119 lines
5.9 KiB
PHP
119 lines
5.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'B2C Productivity Platform'); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'Automate administrative tasks with AI.'); ?>">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="/"><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'FormAutomator'); ?></a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main-content container py-5">
|
|
|
|
<!-- 1. Upload Section -->
|
|
<section id="uploadSection" class="upload-section">
|
|
<div class="text-center mb-5">
|
|
<h1 class="h2 fw-bold">Secure Document Upload</h1>
|
|
<p class="text-muted">Upload your form (PDF, PNG, JPG) to begin the automated process.</p>
|
|
</div>
|
|
<div id="dropZone" class="drop-zone">
|
|
<input type="file" id="fileInput" class="d-none" accept=".pdf,.png,.jpg,.jpeg">
|
|
<div class="drop-zone-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l-3 3m3-3l3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
|
|
</svg>
|
|
</div>
|
|
<p class="mb-1 fw-bold">Drag & drop your file here</p>
|
|
<p class="text-muted mb-2">or click to browse</p>
|
|
<p class="small text-muted">PDF, PNG, or JPG (max 5MB)</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. Processing Section -->
|
|
<section id="processingSection" class="d-none text-center py-5">
|
|
<div class="spinner-border mb-4" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<h2 class="h4 fw-bold">Extracting Data...</h2>
|
|
<p class="text-muted">Our AI is analyzing your document. This may take a moment.</p>
|
|
</section>
|
|
|
|
|
|
<!-- 3. Review Section -->
|
|
<section id="reviewSection" class="review-section d-none">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 fw-bold">Review Extracted Data</h1>
|
|
<p class="text-muted">Please verify the information below before starting the automation.</p>
|
|
</div>
|
|
<button class="btn btn-light" id="uploadNewBtn">Upload New</button>
|
|
</div>
|
|
|
|
<div class="review-card">
|
|
<div class="row g-0">
|
|
<div class="col-md-5 d-none d-md-flex align-items-center justify-content-center p-4">
|
|
<div class="document-preview w-100 h-100">
|
|
<p>Document Preview</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7 p-4 p-lg-5">
|
|
<form>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label for="firstName" class="form-label">First Name</label>
|
|
<input type="text" class="form-control" id="firstName">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="lastName" class="form-label">Last Name</label>
|
|
<input type="text" class="form-control" id="lastName">
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="street" class="form-label">Street Address</label>
|
|
<input type="text" class="form-control" id="street">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="zip" class="form-label">ZIP Code</label>
|
|
<input type="text" class="form-control" id="zip">
|
|
</div>
|
|
<div class="col-md-8">
|
|
<label for="city" class="form-label">City</label>
|
|
<input type="text" class="form-control" id="city">
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="dob" class="form-label">Date of Birth</label>
|
|
<input type="date" class="form-control" id="dob">
|
|
</div>
|
|
</div>
|
|
<hr class="my-4">
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" id="discardBtn" class="btn btn-light">Discard</button>
|
|
<button type="button" id="startAutomationBtn" class="btn btn-primary">Approve & Start Automation</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Bootstrap 5 JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|