|
@ -1,24 +1,27 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div v-if="visible" class="dialog-overlay"> |
|
|
<div v-if="visible" class="dialog-overlay z-[60]"> |
|
|
<!-- Breadcrumb --> |
|
|
<!-- Breadcrumb --> |
|
|
<div class="dialog"> |
|
|
<div class="dialog"> |
|
|
<!-- Back --> |
|
|
<!-- Back --> |
|
|
<div class="text-lg text-center font-light relative px-7"> |
|
|
<div class="text-lg text-center font-light relative z-50"> |
|
|
|
|
|
<!-- Heading --> |
|
|
<h1 |
|
|
<h1 |
|
|
class="text-lg text-center px-2 py-1 absolute -right-2 -top-1" |
|
|
id="ViewHeading" |
|
|
@click="close()" |
|
|
class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none" |
|
|
> |
|
|
> |
|
|
<fa icon="xmark" class="fa-fw"></fa> |
|
|
|
|
|
</h1> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Heading --> |
|
|
|
|
|
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4"> |
|
|
|
|
|
<span v-if="uploading"> Uploading... </span> |
|
|
<span v-if="uploading"> Uploading... </span> |
|
|
<span v-else-if="blob"> Look Good? </span> |
|
|
<span v-else-if="blob"> Look Good? </span> |
|
|
<span v-else> Say "Cheese"! </span> |
|
|
<span v-else> Say "Cheese"! </span> |
|
|
</h1> |
|
|
</h1> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white" |
|
|
|
|
|
@click="close()" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="xmark" class="w-[1em]"></fa> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-if="uploading" class="flex justify-center"> |
|
|
<div v-if="uploading" class="flex justify-center"> |
|
|
<fa icon="spinner" class="fa-spin fa-3x text-center block" /> |
|
|
<fa icon="spinner" class="fa-spin fa-3x text-center block" /> |
|
|
</div> |
|
|
</div> |
|
@ -45,13 +48,15 @@ |
|
|
:resolution="{ width: 375, height: 812 }" |
|
|
:resolution="{ width: 375, height: 812 }" |
|
|
--> |
|
|
--> |
|
|
<camera facingMode="environment" autoplay ref="camera"> |
|
|
<camera facingMode="environment" autoplay ref="camera"> |
|
|
<div class="absolute bottom-0 w-full flex justify-center pb-4"> |
|
|
<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 --> |
|
|
<!-- Button --> |
|
|
<button |
|
|
<button |
|
|
@click="takeImage" |
|
|
@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> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</camera> |
|
|
</camera> |
|
|