|
|
|
@ -1,30 +1,34 @@ |
|
|
|
<template> |
|
|
|
<div v-if="visible" class="dialog-overlay"> |
|
|
|
<div class="dialog"> |
|
|
|
<div class="text-lg text-center font-light relative px-7"> |
|
|
|
<div v-if="visible" class="dialog-overlay z-[60]"> |
|
|
|
<div class="dialog relative"> |
|
|
|
<div class="text-lg text-center font-light relative z-50"> |
|
|
|
<div |
|
|
|
class="text-lg text-center px-2 py-1 absolute -right-2 top-6 z-10" |
|
|
|
id="ViewHeading" |
|
|
|
class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none" |
|
|
|
> |
|
|
|
<span v-if="uploading"> Uploading... </span> |
|
|
|
<span v-else-if="blob"> Look Good? </span> |
|
|
|
<span v-else> Say "Cheese"! </span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white" |
|
|
|
@click="close()" |
|
|
|
> |
|
|
|
<fa icon="xmark" class="fa-fw"></fa> |
|
|
|
<fa icon="xmark" class="w-[1em]"></fa> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Heading --> |
|
|
|
<h1 id="ViewHeading" class="text-center font-bold"> |
|
|
|
<span v-if="uploading"> Uploading... </span> |
|
|
|
<span v-else-if="blob"> Look Good? </span> |
|
|
|
<span v-else> Say "Cheese"! </span> |
|
|
|
</h1> |
|
|
|
|
|
|
|
<div v-if="uploading" class="flex justify-center"> |
|
|
|
<fa icon="spinner" class="fa-spin fa-3x text-center block" /> |
|
|
|
</div> |
|
|
|
<div v-else-if="blob"> |
|
|
|
<div class="flex justify-around"> |
|
|
|
<div |
|
|
|
class="flex justify-center gap-2 absolute bottom-[1rem] left-[1rem] right-[1rem] bg-black/50 px-4 py-2" |
|
|
|
> |
|
|
|
<button |
|
|
|
@click="uploadImage" |
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full" |
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" |
|
|
|
> |
|
|
|
<span>Upload</span> |
|
|
|
</button> |
|
|
|
@ -32,7 +36,7 @@ |
|
|
|
<!--{{ imageHeight }} {{ imageWidth }} {{ imageWarning }}--> |
|
|
|
<button |
|
|
|
@click="retryImage" |
|
|
|
class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-2 rounded-full" |
|
|
|
class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded-full" |
|
|
|
> |
|
|
|
<span>Retry</span> |
|
|
|
</button> |
|
|
|
@ -47,12 +51,14 @@ |
|
|
|
:resolution="{ width: 375, height: 812 }" |
|
|
|
--> |
|
|
|
<camera facingMode="environment" autoplay ref="camera"> |
|
|
|
<div class="absolute bottom-0 w-full flex justify-center pb-8"> |
|
|
|
<div |
|
|
|
class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4" |
|
|
|
> |
|
|
|
<button |
|
|
|
@click="takeImage" |
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full" |
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none" |
|
|
|
> |
|
|
|
<fa icon="camera" class="fa-fw"></fa> |
|
|
|
<fa icon="camera" class="w-[1em]"></fa> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</camera> |
|
|
|
|
