61 lines
4.6 KiB
HTML
61 lines
4.6 KiB
HTML
<div>
|
|
<div class="flex flex-col md:flex-row gap-0 m-5 h-full">
|
|
<div class="card w-full h-full min-h-16 bg-base-100 shadow-2xl">
|
|
<figure><img [src]="waypointInfo.img" [alt]="waypointInfo?.locationName"/></figure>
|
|
<div class="card-body">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="card-title font-extrabold">{{ waypointInfo?.locationName }}</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 === undefined ? '' : distance}} Km
|
|
</div>
|
|
</div>
|
|
<p>{{ waypointInfo.description }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="md:relative w-full flex items-center justify-center md:justify-start">
|
|
<iframe *ngIf="distance" class="md:absolute sm:w-full md:h-3/4 md:w-full md:rounded-r-2xl shadow-2xl border-2 items-center" height="300" frameborder=""
|
|
style=""
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
[src]='embed | safe' allowfullscreen></iframe>
|
|
</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">{{ detailTranslations.congratulations }}: {{ waypointInfo.name }}!</h3>
|
|
<img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
|
|
<div class="modal-action">
|
|
<label 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 22.041L14.2676 22.041C16.3086 22.041 17.334 21.0254 17.334 19.0137L17.334 9.26758C17.334 7.25586 16.3086 6.24023 14.2676 6.24023L11.543 6.24023L11.543 7.8125L14.2383 7.8125C15.2051 7.8125 15.7617 8.33984 15.7617 9.35547L15.7617 18.9258C15.7617 19.9414 15.2051 20.4688 14.2383 20.4688L3.08594 20.4688C2.10938 20.4688 1.57227 19.9414 1.57227 18.9258L1.57227 9.35547C1.57227 8.33984 2.10938 7.8125 3.08594 7.8125L5.79102 7.8125L5.79102 6.24023L3.06641 6.24023C1.02539 6.24023 0 7.25586 0 9.26758L0 19.0137C0 21.0254 1.02539 22.041 3.06641 22.041ZM8.66211 14.3945C9.08203 14.3945 9.44336 14.043 9.44336 13.6328L9.44336 3.60352L9.38477 2.13867L10.0391 2.83203L11.5234 4.41406C11.6602 4.57031 11.8555 4.64844 12.0508 4.64844C12.4512 4.64844 12.7637 4.35547 12.7637 3.95508C12.7637 3.75 12.6758 3.59375 12.5293 3.44727L9.22852 0.263672C9.0332 0.0683594 8.86719 0 8.66211 0C8.4668 0 8.30078 0.0683594 8.0957 0.263672L4.79492 3.44727C4.64844 3.59375 4.57031 3.75 4.57031 3.95508C4.57031 4.35547 4.86328 4.64844 5.27344 4.64844C5.45898 4.64844 5.67383 4.57031 5.81055 4.41406L7.28516 2.83203L7.94922 2.13867L7.89062 3.60352L7.89062 13.6328C7.89062 14.043 8.24219 14.3945 8.66211 14.3945Z"
|
|
fill="#000000"/>
|
|
</g>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|