make styled button to take picture

project.task.yaml

@@ -21,6 +21,9 @@ tasks :
     - Rates - images erased?
     - image not associated with JWT ULID since that's assigned later
 
+- ask to detect location & record it in settings
+- if personal location is set, show potential local affiliations
+
 - 24 compelling UI for credential presentations
   - discover who in my network has activity on a project
 

src/views/GiftedPhoto.vue

@@ -26,8 +26,21 @@
         Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
         :resolution="{ width: 375, height: 812 }"
       -->
-      <camera facingMode="user" autoplay ref="camera">
+      <camera
-        <button @click="storeImage">I'm on top of the video</button>
+        facingMode="environment"
+        autoplay
+        ref="camera"
+        class="relative h-full"
+      >
+        <div class="absolute bottom-0 w-full flex justify-center pb-4">
+          <!-- Button -->
+          <button
+            @click="storeImage"
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+          >
+            <fa icon="camera" class="fa-fw"></fa>
+          </button>
+        </div>
       </camera>
     </div>
   </section>