style: Fix formatting and add missing newlines in HTML and CSS
This commit is contained in:
parent
8e986727ec
commit
b570e8e9ab
4 changed files with 194 additions and 127 deletions
|
|
@ -3,4 +3,4 @@
|
|||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,127 +1,194 @@
|
|||
<app-navbar></app-navbar>
|
||||
|
||||
<div class="min-h-screen bg-deep-blue text-text-primary">
|
||||
<div class="container mx-auto px-4 py-8 sm:py-12">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12 sm:mb-16">
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 sm:mb-3 text-text-primary">
|
||||
Willkommensbonus
|
||||
</h1>
|
||||
<div class="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-emerald-light mb-3 sm:mb-4">
|
||||
200% bis zu 500€
|
||||
</div>
|
||||
<p class="text-text-secondary text-base sm:text-lg mb-6 sm:mb-8">
|
||||
+ 200 Freispiele
|
||||
</p>
|
||||
|
||||
<button class="w-full sm:w-auto bg-emerald hover:bg-emerald-dark text-text-primary font-bold px-6 sm:px-8 py-3 rounded transition-all duration-300 active:scale-95 shadow-lg">
|
||||
Bonus Sichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-16">
|
||||
<h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-text-primary">Beliebte Spiele</h2>
|
||||
<div class="relative group">
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<div class="flex transition-transform duration-500 ease-out" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
|
||||
<div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Slots</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Klassische Spielautomaten</p>
|
||||
<button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Plinko</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Spannendes Geschicklichkeitsspiel</p>
|
||||
<button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Blackjack</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Klassisches Kartenspiel</p>
|
||||
<button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Poker</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Texas Hold'em & mehr</p>
|
||||
<button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Liars Dice</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Würfelspiel mit Strategie</p>
|
||||
<button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Lootboxen</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Überraschungskisten</p>
|
||||
<button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="hidden lg:block absolute left-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110" (click)="prevSlide()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="hidden lg:block absolute right-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110" (click)="nextSlide()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
|
||||
<button *ngFor="let _ of [0, 1]; let i = index"
|
||||
[class]="'w-2 h-2 rounded-full transition-all duration-300 ' + (currentSlide === i ? 'bg-emerald w-4' : 'bg-text-tertiary')"
|
||||
(click)="goToSlide(i)">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
|
||||
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
|
||||
<div class="text-xl sm:text-2xl font-bold text-emerald">50 Mio.€+</div>
|
||||
<div class="text-text-secondary text-sm">Ausgezahlt</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
|
||||
<div class="text-xl sm:text-2xl font-bold text-emerald">10 Mio.+</div>
|
||||
<div class="text-text-secondary text-sm">Spiele</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
|
||||
<div class="text-xl sm:text-2xl font-bold text-emerald">24/7</div>
|
||||
<div class="text-text-secondary text-sm">Support <span class="text-emerald text-xs">*</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto px-4 py-8 sm:py-12">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12 sm:mb-16">
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 sm:mb-3 text-text-primary">
|
||||
Willkommensbonus
|
||||
</h1>
|
||||
<div
|
||||
class="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-emerald-light mb-3 sm:mb-4"
|
||||
>
|
||||
200% bis zu 500€
|
||||
</div>
|
||||
<p class="text-text-secondary text-base sm:text-lg mb-6 sm:mb-8">+ 200 Freispiele</p>
|
||||
|
||||
<button
|
||||
class="w-full sm:w-auto bg-emerald hover:bg-emerald-dark text-text-primary font-bold px-6 sm:px-8 py-3 rounded transition-all duration-300 active:scale-95 shadow-lg"
|
||||
>
|
||||
Bonus Sichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-16">
|
||||
<h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-text-primary">
|
||||
Beliebte Spiele
|
||||
</h2>
|
||||
<div class="relative group">
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<div
|
||||
class="flex transition-transform duration-500 ease-out"
|
||||
[style.transform]="'translateX(-' + currentSlide * 100 + '%)'"
|
||||
>
|
||||
<div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div
|
||||
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Slots</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Klassische Spielautomaten</p>
|
||||
<button
|
||||
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
|
||||
>
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Plinko</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">
|
||||
Spannendes Geschicklichkeitsspiel
|
||||
</p>
|
||||
<button
|
||||
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
|
||||
>
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Blackjack</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Klassisches Kartenspiel</p>
|
||||
<button
|
||||
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
|
||||
>
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div
|
||||
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Poker</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Texas Hold'em & mehr</p>
|
||||
<button
|
||||
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
|
||||
>
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Liars Dice</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Würfelspiel mit Strategie</p>
|
||||
<button
|
||||
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
|
||||
>
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold mb-2 text-text-primary">Lootboxen</h3>
|
||||
<p class="text-text-secondary text-sm mb-4">Überraschungskisten</p>
|
||||
<button
|
||||
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
|
||||
>
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="hidden lg:block absolute left-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110"
|
||||
(click)="prevSlide()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="hidden lg:block absolute right-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110"
|
||||
(click)="nextSlide()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
|
||||
<button
|
||||
*ngFor="let _ of [0, 1]; let i = index"
|
||||
[class]="
|
||||
'w-2 h-2 rounded-full transition-all duration-300 ' +
|
||||
(currentSlide === i ? 'bg-emerald w-4' : 'bg-text-tertiary')
|
||||
"
|
||||
(click)="goToSlide(i)"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
|
||||
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
|
||||
<div class="text-xl sm:text-2xl font-bold text-emerald">50 Mio.€+</div>
|
||||
<div class="text-text-secondary text-sm">Ausgezahlt</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
|
||||
<div class="text-xl sm:text-2xl font-bold text-emerald">10 Mio.+</div>
|
||||
<div class="text-text-secondary text-sm">Spiele</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
|
||||
<div class="text-xl sm:text-2xl font-bold text-emerald">24/7</div>
|
||||
<div class="text-text-secondary text-sm">
|
||||
Support <span class="text-emerald text-xs">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -106,10 +106,8 @@
|
|||
<div class="mt-12 pt-8 border-t border-deep-blue-light">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="text-gray-400 text-sm mb-4 md:mb-0">
|
||||
<span class="text-xs">
|
||||
<span class="text-emerald">*</span> nicht vorhanden.
|
||||
</span>
|
||||
<br>
|
||||
<span class="text-xs"> <span class="text-emerald">*</span> nicht vorhanden. </span>
|
||||
<br />
|
||||
© {{ currentYear }} Trustworthy Casino. Keine Rechte vorbehalten.
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,11 @@ body {
|
|||
@apply bg-deep-blue text-text-primary;
|
||||
}
|
||||
|
||||
button, a {
|
||||
button,
|
||||
a {
|
||||
@apply cursor-pointer active:scale-95 transition-all duration-200;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
|
|
|
|||
Reference in a new issue