Spaces:

ChristopherJKoen
/

repex-report-express-export

Running

App Files Files Community

ChristopherJKoen commited on Feb 2

Commit

248ca68

verified ·

1 Parent(s): 2c3ba61

Dont do anything.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +263 -17

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Repex Report Express Export
-emoji: 👁
-colorFrom: green
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: RepEx - Report Express | Export 🚀
+colorFrom: blue
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,265 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>RepEx - Report Express | Export</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; }
+    @media print {
+      body { background: #fff !important; }
+      .no-print { display: none !important; }
+      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
+    }
+  </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 -->
+    <header class="mb-8 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="https://huggingface.co/spaces/ChristopherJKoen/docusnap-report-wizard/resolve/main/images/Picture3.png"
+            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">
+            RepEx - Report Express
+          </h1>
+          <p class="text-gray-600 whitespace-nowrap">Export</p>
+        </div>
+        <div class="flex justify-end gap-2 no-print">
+          <a
+            href="report-viewer.html"
+            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-left" class="h-4 w-4"></i>
+            Back
+          </a>
+        </div>
+      </div>
+    </header>
+    <!-- Workflow navigation -->
+    <nav class="mb-6 no-print" aria-label="Report workflow navigation">
+      <div class="flex flex-wrap gap-2">
+        <a
+          href="report-viewer.html"
+          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="layout" class="h-4 w-4"></i>
+          Report Viewer
+        </a>
+        <a
+          href="edit-layouts.html"
+          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="grid" class="h-4 w-4"></i>
+          Edit Page Layouts
+        </a>
+        <a
+          href="export.html"
+          class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
+        >
+          <i data-feather="download" class="h-4 w-4"></i>
+          Export
+        </a>
+      </div>
+    </nav>
+    <section class="grid grid-cols-1 lg:grid-cols-[1fr,360px] gap-6">
+      <!-- Export options -->
+      <div class="rounded-lg border border-gray-200 bg-white p-4">
+        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Options</h2>
+        <p class="text-sm text-gray-600 mb-4">
+          PDF export comes next. For now, you can export a report “package” as JSON (pages + layout settings + payload).
+        </p>
+        <div class="space-y-4">
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <div class="text-sm font-semibold text-gray-900">Report package (.json)</div>
+                <div class="text-xs text-gray-500">Includes edited pages, layout settings and upload metadata</div>
+              </div>
+              <span class="text-xs font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md px-2 py-1">
+                Available
+              </span>
+            </div>
+            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+                <input id="incPages" type="checkbox" class="rounded border-gray-300" checked />
+                Include pages
+              </label>
+              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+                <input id="incLayout" type="checkbox" class="rounded border-gray-300" checked />
+                Include layout settings
+              </label>
+              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+                <input id="incPayload" type="checkbox" class="rounded border-gray-300" checked />
+                Include upload payload
+              </label>
+              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+                <input id="incTimestamp" type="checkbox" class="rounded border-gray-300" checked />
+                Include timestamp
+              </label>
+            </div>
+            <button id="downloadJson" type="button"
+              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-2.5 text-white font-semibold hover:bg-emerald-700 transition">
+              <i data-feather="download" class="h-4 w-4"></i>
+              Download JSON package
+            </button>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <div class="text-sm font-semibold text-gray-900">PDF export</div>
+                <div class="text-xs text-gray-500">Will export as print-ready A4 PDF</div>
+              </div>
+              <span class="text-xs font-semibold text-gray-600 bg-white border border-gray-200 rounded-md px-2 py-1">
+                Coming soon
+              </span>
+            </div>
+            <button type="button" disabled
+              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2.5 text-gray-500 font-semibold cursor-not-allowed">
+              <i data-feather="file-text" class="h-4 w-4"></i>
+              Export PDF (disabled)
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- Summary -->
+      <aside class="rounded-lg border border-gray-200 bg-white p-4">
+        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Summary</h2>
+        <p class="text-sm text-gray-600 mb-4">This is what will be included based on your current session.</p>
+        <div class="space-y-3">
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <div class="text-xs font-semibold text-gray-600">Pages</div>
+            <div id="sumPages" class="text-sm font-semibold text-gray-900">—</div>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <div class="text-xs font-semibold text-gray-600">Selected example photos</div>
+            <div id="sumPhotos" class="text-sm font-semibold text-gray-900">—</div>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <div class="text-xs font-semibold text-gray-600">Documents</div>
+            <div id="sumDocs" class="text-sm font-semibold text-gray-900">—</div>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <div class="text-xs font-semibold text-gray-600">Data files</div>
+            <div id="sumData" class="text-sm font-semibold text-gray-900">—</div>
+          </div>
+          <div class="text-xs text-gray-500">
+            Uses storage keys:
+            <div class="mt-1 font-mono text-[11px] text-gray-700">
+              repex_report_pages_v1<br>
+              repex_layout_settings_v1<br>
+              repex_report_payload
+            </div>
+          </div>
+        </div>
+      </aside>
+    </section>
+    <footer class="mt-12 text-center text-xs text-gray-500 no-print">
+      <p>Prosento - © 2026 All Rights Reserved</p>
+      <p class="mt-1">Export: JSON package now; PDF export will be added next.</p>
+    </footer>
+  </main>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      if (window.feather && typeof window.feather.replace === 'function') feather.replace();
+      const PAGES_KEY = 'repex_report_pages_v1';
+      const LAYOUT_KEY = 'repex_layout_settings_v1';
+      const PAYLOAD_KEY = 'repex_report_payload';
+      const sumPages = document.getElementById('sumPages');
+      const sumPhotos = document.getElementById('sumPhotos');
+      const sumDocs = document.getElementById('sumDocs');
+      const sumData = document.getElementById('sumData');
+      const incPages = document.getElementById('incPages');
+      const incLayout = document.getElementById('incLayout');
+      const incPayload = document.getElementById('incPayload');
+      const incTimestamp = document.getElementById('incTimestamp');
+      const downloadJson = document.getElementById('downloadJson');
+      function loadJson(key) {
+        try {
+          const raw = localStorage.getItem(key);
+          return raw ? JSON.parse(raw) : null;
+        } catch {
+          return null;
+        }
+      }
+      const pagesObj = loadJson(PAGES_KEY);
+      const pages = pagesObj?.pages ?? [];
+      const layout = loadJson(LAYOUT_KEY);
+      const payload = loadJson(PAYLOAD_KEY);
+      const selectedPhotos = payload?.selectedPhotoIndices?.length ?? 0;
+      const docs = payload?.uploads?.documents?.length ?? 0;
+      const dataFiles = payload?.uploads?.dataFiles?.length ?? 0;
+      // Count total items
+      const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
+      sumPages.textContent = pages.length ? `${pages.length} pages • ${totalItems} total items` : 'No saved pages yet';
+      sumPhotos.textContent = `${selectedPhotos}`;
+      sumDocs.textContent = `${docs}`;
+      sumData.textContent = `${dataFiles}`;
+      function downloadBlob(filename, text) {
+        const blob = new Blob([text], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+      }
+      downloadJson.addEventListener('click', () => {
+        const pack = {};
+        if (incPages.checked) pack.pages = pagesObj ?? null;
+        if (incLayout.checked) pack.layout = layout ?? null;
+        if (incPayload.checked) pack.payload = payload ?? null;
+        if (incTimestamp.checked) pack.exportedAt = new Date().toISOString();
+        const filename = `repex_report_package_${new Date().toISOString().replace(/[:.]/g,'-')}.json`;
+        downloadBlob(filename, JSON.stringify(pack, null, 2));
+      });
+    });
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
 </html>