Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | @if (city) {
<div class="city-outer card p-2" [id]="'cityElement-' + city.id">
<div class="city-box" [id]="'cityCardElement-' + countryName">
<div class="city-image" style="position: relative" (mouseenter)="setHover(true)" (mouseleave)="setHover(false)">
<div class="box">
@if (index() === 0) {
<img style="height: 247px" priority width="400" height="250"
ngSrc="{{ replaceUrl(city.getMainImage()) }}" alt="City Image" />
} @else {
<img style="height: 247px" width="400" height="250" ngSrc="{{ replaceUrl(city.getMainImage()) }}"
alt="City Image" />
}
</div>
@if (hover || mainPage()) {
<div class="preview-btn" style="position: absolute; top: 10px; right: 10px">
<img loading="lazy" src="/assets/images/preview-button.svg" width="50px" height="50px" alt="icon" (click)="openModal(city)" [ngStyle]="{ width: mainPage() ? '56px' : '50px', height: mainPage() ? '56px' : '50px' }" />
</div>
}
</div>
<div class="title d-flex justify-content-between" [ngStyle]="{ bottom: mainPage() ? '54px' : '47px' }"
(mouseenter)="setHover(true)" (mouseleave)="setHover(false)">
{{ city.name }}
<p class="fs-16 p-0 m-0">
{{ flagService.getFlags(city.countryCode) }} {{ city.countryName.replace('-', ' ') }}
</p>
</div>
@if (!city.added && !mainPage() && city.continentName !== 'Asia') {
<div class="add-button">
<button (click)="add()">Add to Trip</button>
</div>
}
@if (city.added && !mainPage() && city.continentName !== 'Asia') {
<div class="added-button">
<button (click)="remove()">✔ Added</button>
</div>
}
@if (!city.added && !mainPage() && city.continentName === 'Asia') {
<div class="add-button-asian">
<button (click)="add()">Add to Trip</button>
</div>
}
@if (city.added && !mainPage() && city.continentName === 'Asia') {
<div class="added-button-asian">
<button (click)="remove()">✔ Added</button>
</div>
}
@if (!city.added && mainPage()) {
<div class="">
<button class="btn btn-yellow w-100 mt-2" style="height: auto" (click)="add()">Add to Trip</button>
</div>
}
@if (city.added && mainPage()) {
<div class="added-button">
<button style="height: auto" (click)="remove()">✔ Added</button>
</div>
}
</div>
</div>
} |