76 lines
5.3 KiB
HTML
76 lines
5.3 KiB
HTML
<div class="absolute top-0 h-screen w-screen">
|
|
<div id="map" class="absolute h-screen w-screen">
|
|
<iframe *ngIf="embed"
|
|
class=" w-full h-full shadow-2xl pointer-events-auto"
|
|
height="300" frameborder=""
|
|
style=""
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
[src]='embed | safe' allowfullscreen></iframe>
|
|
<img *ngIf="!embed" [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'" alt="" class="my-auto w-screen opacity-5">
|
|
</div>
|
|
<div *ngIf="embed && !this.myModal.checked" class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4 m-4 p-2 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
|
|
<figure><img [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'"
|
|
[alt]="waypointInfo?.locationName ? waypointInfo.locationName : ''"/></figure>
|
|
<div class="card-body">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="card-title font-extrabold">{{ waypointInfo?.name ? waypointInfo.name : 'Error 404' }}</h1>
|
|
<div class="font-extrabold text-end text-blue-500 flex items-center">
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="19.9219" height="19.9316" *ngIf="!distance" class="mx-1">
|
|
<g>
|
|
<rect height="19.9316" opacity="0" width="19.9219" x="0" y="0"/>
|
|
<path
|
|
d="M4.85352 11.0156L9.95117 11.0156C10.332 11.0156 10.6348 10.7227 10.6348 10.332L10.6348 3.75C10.6348 3.36914 10.332 3.07617 9.95117 3.07617C9.57031 3.07617 9.27734 3.36914 9.27734 3.75L9.27734 9.6582L4.85352 9.6582C4.46289 9.6582 4.16992 9.95117 4.16992 10.332C4.16992 10.7227 4.46289 11.0156 4.85352 11.0156ZM9.96094 19.9219C15.4102 19.9219 19.9219 15.4004 19.9219 9.96094C19.9219 4.51172 15.4004 0 9.95117 0C4.51172 0 0 4.51172 0 9.96094C0 15.4004 4.52148 19.9219 9.96094 19.9219ZM9.96094 18.2617C5.35156 18.2617 1.66992 14.5703 1.66992 9.96094C1.66992 5.35156 5.3418 1.66016 9.95117 1.66016C14.5605 1.66016 18.2617 5.35156 18.2617 9.96094C18.2617 14.5703 14.5703 18.2617 9.96094 18.2617Z"
|
|
fill="currentcolor" fill-opacity="0.85"/>
|
|
</g>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.44 18.4" width="18" height="18" fill="currentColor"
|
|
class="mx-2" *ngIf="distance">
|
|
<path
|
|
d="M1.29,9.83l7.12,0c0.15,0,0.27,0.12,0.27,0.27v6.06c0,1.46,1.76,2.15,2.42,0.81l7.22-15.54c0.66-1.34-0.49-2.52-1.85-2.08L1.08,7.49C-0.14,8.06,0.1,9.82,1.29,9.83z"/>
|
|
</svg>
|
|
{{ distance ? distance : '' }} Km
|
|
</div>
|
|
</div>
|
|
<p class="overflow-auto min-h-1/4">{{ waypointInfo?.description ? waypointInfo.description : 'pippo says that you are serching in a unknown location' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="404" *ngIf="!waypointInfo">
|
|
<h1>
|
|
Oops!
|
|
</h1>
|
|
<h2>
|
|
404 Not Found
|
|
</h2>
|
|
<div class="error-details">
|
|
Sorry, an error has occured, Requested page not found!
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Put this part before </body> tag -->
|
|
<input type="checkbox" id="my-modal-6" class="modal-toggle" #myModal/>
|
|
|
|
<div class="modal modal-bottom sm:modal-middle" *ngIf="img">
|
|
<div class="modal-box">
|
|
<h3 class="font-bold text-lg">Congratulations you have
|
|
discovred {{ waypointInfo?.name ? waypointInfo.name : '' }}!</h3>
|
|
<img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
|
|
<div class="modal-action">
|
|
<button for="my-modal-6" class="btn bg-white hover:bg-blue-400" (click)="downloadImage()">
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="17.334" height="23.4863">
|
|
<g>
|
|
<rect height="23.4863" opacity="0" width="17.334" x="0" y="0"/>
|
|
<path d="M3.06641 21.084L14.2676 21.084C16.3086 21.084 17.334 20.0684 17.334 18.0566L17.334 8.31055C17.334 6.29883 16.3086 5.2832 14.2676 5.2832L11.543 5.2832L11.543 6.85547L14.2383 6.85547C15.2051 6.85547 15.7617 7.38281 15.7617 8.39844L15.7617 17.9688C15.7617 18.9844 15.2051 19.5117 14.2383 19.5117L3.08594 19.5117C2.10938 19.5117 1.57227 18.9844 1.57227 17.9688L1.57227 8.39844C1.57227 7.38281 2.10938 6.85547 3.08594 6.85547L5.79102 6.85547L5.79102 5.2832L3.06641 5.2832C1.02539 5.2832 0 6.29883 0 8.31055L0 18.0566C0 20.0684 1.02539 21.084 3.06641 21.084ZM8.66211 14.6582C8.86719 14.6582 9.0332 14.5996 9.22852 14.4043L12.5293 11.2109C12.6758 11.0645 12.7637 10.9082 12.7637 10.7031C12.7637 10.3027 12.4512 10.0195 12.0508 10.0195C11.8555 10.0195 11.6602 10.0977 11.5234 10.2539L10.0391 11.8262L9.38477 12.5195L9.44336 11.0547L9.44336 0.761719C9.44336 0.351562 9.08203 0 8.66211 0C8.24219 0 7.89062 0.351562 7.89062 0.761719L7.89062 11.0547L7.94922 12.5195L7.28516 11.8262L5.81055 10.2539C5.67383 10.0977 5.45898 10.0195 5.27344 10.0195C4.86328 10.0195 4.57031 10.3027 4.57031 10.7031C4.57031 10.9082 4.64844 11.0645 4.79492 11.2109L8.0957 14.4043C8.30078 14.5996 8.4668 14.6582 8.66211 14.6582Z" fill="#000000"/>
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-primary" (click)="closeModal()">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|