From 881ea4053c635b44a9b0459e9d502adbd4435eea Mon Sep 17 00:00:00 2001
From: Tyler Clarke <plupy44@gmail.com>
Date: Mon, 28 Jul 2025 20:43:13 -0400
Subject: [PATCH] fixes

---
 site/camera-info/index.html | 14 +++----
 site/camera-info/main.css   | 74 ++++++++++++++++++++++++++++++++-----
 site/camera-info/main.js    |  6 ++-
 3 files changed, 75 insertions(+), 19 deletions(-)
diff --git a/site/camera-info/index.html b/site/camera-info/index.html
index 6a78a1e..792b7f2 100644
--- a/site/camera-info/index.html
+++ b/site/camera-info/index.html
@@ -10,14 +10,12 @@
 <body>
     <video id="magic_video" class="offscreen">video stream unavailable</video>
     <div id="home" style="display: none;">
-        <button onclick="setdetails()" style="display: none; align-self: end;" id="endcamera">Next</button>
-        <button onclick="takepicture()" style="align-self: end;">Take Picture!</button>
-        <canvas id="precanvas" class="offscreen"></canvas>
-        <div id="camview">
-            <div id="video-container">
-                <video id="preview">video stream unavailable</video>
-            </div>
+        <div id="picbar">
+            <button id="takepicture" onclick="takepicture()">Take Picture!</button>
+            <button onclick="setdetails()" style="display: none; align-self: end;" id="endcamera">Next</button>
         </div>
+        <canvas id="precanvas" class="offscreen"></canvas>
+        <video id="preview">video stream unavailable</video>
     </div>
     <div id="details" style="display: none;">
         <span>Longitude: <input type="number" id="long"/></span>
@@ -28,7 +26,7 @@
         <button onclick="render()">Finish</button>
     </div>
     <div id="finalresult" style="display: none;">
-        <iframe id="final" width="1440" height="960"></iframe>
+        <iframe id="final"></iframe>
         <button onclick="download()">Download!</button>
         <button onclick="window.location.reload()">Take Another Picture</button>
     </div>
diff --git a/site/camera-info/main.css b/site/camera-info/main.css
index 08c05c6..240aa88 100644
--- a/site/camera-info/main.css
+++ b/site/camera-info/main.css
@@ -1,6 +1,9 @@
-body {
+body, html {
 	margin: 0px;
 	padding: 0px;
+	overflow: clip;
+	width: 100vw;
+	height: 100vh;
 }
 
 body > div {
@@ -8,25 +11,19 @@ body > div {
 	top: 0px;
 	left: 0px;
 	width: 100vw;
+	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }
 
-body > div > * {
-	margin: 20px;
-}
-
 #camview {
 	max-width: 100vw;
-	box-shadow: 0px 0px 50px 0px black;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: 30px;
-	box-sizing: border-box;
 }
 
 @media (orientation:portrait) {
@@ -68,9 +65,23 @@ body > div > * {
 	flex-shrink: 0;
 }
 
+#precanvas.took {
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	max-height: 25vh;
+	z-index: 7700;
+	margin: 0px;
+}
+
 #preview {
-  width: 100%;
+  width: 100vw;
   display: inline-block;
+  position: absolute;
+  top: 50vh;
+  left: 50vw;
+  transform: translate(-50%, -50%);
+  margin: 0px;
 }
 
 
@@ -89,3 +100,48 @@ video.unbounded {
 #final {
 	border: 1px solid black;
 }
+
+
+#picbar {
+	position: absolute;
+	bottom: 50px;
+	left: 50vw;
+	transform: translateX(-50%);
+	z-index: 2;
+	display: flex;
+	flex-direction: row;
+	width: max-content;
+}
+
+button {
+	border-radius: calc(infinity * 1px);
+	padding: 10px;
+	font-size: 1.5em;
+	border: none;
+	margin: 10px;
+	background-color: lightgrey;
+}
+
+button:hover {
+	background-color: grey;
+}
+
+input {
+	font-size: 1.5em;
+}
+
+#details > span {
+	font-size: 1.5em;
+}
+
+* {
+	font-family: sans-serif;
+}
+
+#finalresult {
+	align-items: stretch;
+}
+
+iframe {
+	flex-grow: 3;
+}
\ No newline at end of file
diff --git a/site/camera-info/main.js b/site/camera-info/main.js
index ad70216..c08e705 100644
--- a/site/camera-info/main.js
+++ b/site/camera-info/main.js
@@ -1,3 +1,5 @@
+
+
 function frame(e) {
   for (let el of document.querySelectorAll("body > div")) {
     if (el.style.display != "none") {
@@ -18,7 +20,7 @@ function takepicture() {
   video.classList.add("unbounded");
   document.getElementById("endcamera").style.display = "";
   ctx.canvas.classList.remove("offscreen");
-  document.getElementById("camview").classList.add("took")
+  document.getElementById("precanvas").classList.add("took")
     // si c'est portrait, nous doivons le tourner à landscape (parce que le canvas ont besoin d'un photo landscape pour marcher bien)
     // [un peu plus tard] pourquoi a-moi apprendré le français? c'est horrible
   if (box.height > box.width) {
@@ -125,7 +127,7 @@ window.app = {
         });
         //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
         const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
-        iframe.src = dataURI;
+        iframe.src = dataURI + "#toolbar=0&navpanes=0";
       })()
     },
     exit() {
