| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>RepEx - Report Express</title> |
|
|
| |
| <link rel="stylesheet" href="style.css" /> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
|
|
| |
| <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
| <style> |
| img { -webkit-print-color-adjust: exact; print-color-adjust: exact; } |
| </style> |
| </head> |
|
|
| <body class="bg-gray-50 min-h-screen"> |
| |
| <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8"> |
| |
| <header class="mb-10 border-b border-gray-200 pb-4"> |
| <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4"> |
| |
| <div class="flex items-center"> |
| <img |
| src="YOUR_LOGO_URL_HERE" |
| alt="Company logo" |
| class="h-12 w-auto object-contain" |
| loading="eager" |
| /> |
| </div> |
|
|
| |
| <div class="text-center"> |
| <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap"> |
| Prosento RepEx |
| </h1> |
| <p class="text-gray-600 whitespace-nowrap"> |
| Upload photos and documents to generate professional job reports instantly |
| </p> |
| </div> |
|
|
| |
| <div class="flex justify-end"> |
| <a |
| href="#upload" |
| class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition" |
| > |
| <i data-feather="arrow-down-circle" class="h-4 w-4"></i> |
| Upload |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3"> |
| Generate inspection-ready reports in minutes |
| </h2> |
| <p class="text-base md:text-lg text-gray-600 mb-8"> |
| Drag-and-drop files, add quick context, and produce a clean, consistent report format every time. |
| </p> |
|
|
| <div class="flex flex-col sm:flex-row justify-center gap-3"> |
| <a |
| href="#upload" |
| class="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-white font-semibold hover:bg-blue-700 transition" |
| > |
| <i data-feather="upload" class="h-5 w-5"></i> |
| Start Uploading |
| </a> |
|
|
| <a |
| href="#how-it-works" |
| class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-6 py-3 text-gray-800 font-semibold hover:bg-gray-50 transition" |
| > |
| <i data-feather="info" class="h-5 w-5"></i> |
| Learn More |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="how-it-works" class="mb-12"> |
| <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6"> |
| How It Works |
| </h2> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <article class="rounded-lg border border-gray-200 bg-gray-50 p-5"> |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100"> |
| <i data-feather="camera" class="h-5 w-5 text-blue-700"></i> |
| </div> |
| <h3 class="text-base font-semibold text-gray-900 mb-1">Capture site photos</h3> |
| <p class="text-sm text-gray-600"> |
| Take clear photos of structural elements and issues during your inspection. |
| </p> |
| </article> |
|
|
| <article class="rounded-lg border border-gray-200 bg-gray-50 p-5"> |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 border border-emerald-100"> |
| <i data-feather="upload-cloud" class="h-5 w-5 text-emerald-700"></i> |
| </div> |
| <h3 class="text-base font-semibold text-gray-900 mb-1">Upload documents</h3> |
| <p class="text-sm text-gray-600"> |
| Add notes, measurements, and supporting PDFs/DOCX to complete the context. |
| </p> |
| </article> |
|
|
| <article class="rounded-lg border border-gray-200 bg-gray-50 p-5"> |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100"> |
| <i data-feather="file-text" class="h-5 w-5 text-blue-700"></i> |
| </div> |
| <h3 class="text-base font-semibold text-gray-900 mb-1">Generate report</h3> |
| <p class="text-sm text-gray-600"> |
| Produce a consistent, professional report that’s ready for submission. |
| </p> |
| </article> |
| </div> |
| </section> |
|
|
| |
| <section id="upload" class="mb-12"> |
| <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6"> |
| Upload Your Files |
| </h2> |
|
|
| <div class="rounded-lg border border-gray-200 bg-white p-6"> |
| |
| <div |
| class="rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center hover:border-blue-400 transition mb-6" |
| role="button" |
| tabindex="0" |
| aria-label="Drag and drop files here" |
| > |
| <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 border border-blue-100"> |
| <i data-feather="upload" class="h-5 w-5 text-blue-700"></i> |
| </div> |
|
|
| <h3 class="text-base font-semibold text-gray-900">Drag & drop files here</h3> |
| <p class="text-sm text-gray-600 mt-1 mb-4">or browse to upload</p> |
|
|
| <button |
| type="button" |
| class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-white font-semibold hover:bg-blue-700 transition" |
| > |
| Browse Files |
| </button> |
|
|
| <p class="text-xs text-gray-500 mt-4"> |
| Supports JPG, PNG, PDF, DOCX (Max 50MB each) |
| </p> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| <div class="space-y-1"> |
| <label for="projectName" class="block text-sm font-medium text-gray-700">Project Name</label> |
| <input |
| id="projectName" |
| name="projectName" |
| type="text" |
| placeholder="e.g., North Pit Conveyor Support" |
| class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500" |
| /> |
| </div> |
|
|
| <div class="space-y-1"> |
| <label for="inspectionDate" class="block text-sm font-medium text-gray-700">Inspection Date</label> |
| <input |
| id="inspectionDate" |
| name="inspectionDate" |
| type="date" |
| class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500" |
| /> |
| </div> |
| </div> |
|
|
| <div class="space-y-1 mb-6"> |
| <label for="notes" class="block text-sm font-medium text-gray-700">Additional Notes</label> |
| <textarea |
| id="notes" |
| name="notes" |
| rows="4" |
| placeholder="Add any context you'd like included in the report..." |
| class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500" |
| ></textarea> |
| </div> |
|
|
| <button |
| type="button" |
| class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 text-white font-semibold hover:bg-emerald-700 transition" |
| > |
| <i data-feather="file-plus" class="h-5 w-5"></i> |
| Generate Report |
| </button> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-6"> |
| <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6"> |
| Recent Reports |
| </h2> |
|
|
| <div class="rounded-lg border border-gray-200 bg-white overflow-hidden"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"> |
| Report ID |
| </th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"> |
| Project |
| </th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"> |
| Date |
| </th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"> |
| Status |
| </th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"> |
| Actions |
| </th> |
| </tr> |
| </thead> |
|
|
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#RPT-2023-001</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Bridge Inspection - Main Span</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">2023-10-15</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold bg-emerald-50 text-emerald-700 border-emerald-200"> |
| Completed |
| </span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm"> |
| <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800 mr-3" aria-label="Download report"> |
| <i data-feather="download" class="h-4 w-4"></i> |
| </a> |
| <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="Edit report"> |
| <i data-feather="edit" class="h-4 w-4"></i> |
| </a> |
| </td> |
| </tr> |
|
|
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#RPT-2023-002</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Building Facade Assessment</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">2023-10-18</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold bg-amber-50 text-amber-700 border-amber-200"> |
| Processing |
| </span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm"> |
| <a href="#" class="inline-flex items-center text-gray-400 cursor-not-allowed mr-3" aria-label="Download report (disabled)"> |
| <i data-feather="download" class="h-4 w-4"></i> |
| </a> |
| <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="Edit report"> |
| <i data-feather="edit" class="h-4 w-4"></i> |
| </a> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="mt-12 text-center text-xs text-gray-500"> |
| <p>Prosento - © 2026 All Rights Reserved</p> |
| <p class="mt-1">RepEx is a report automation interface. All uploads should comply with site data policies.</p> |
| </footer> |
| </main> |
|
|
| |
| <script src="script.js"></script> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| if (window.feather && typeof window.feather.replace === 'function') { |
| window.feather.replace(); |
| } |
| }); |
| </script> |
|
|
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
|
|
