aknuth
/
bizmatch-project
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 5 Releases Wiki Activity

Design Anpassungen

This commit is contained in:
Andreas Knuth 2025-03-27 19:37:53 +01:00
parent 715fbdf2f5
commit 6b97008643
22 changed files with 64 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bizmatch/src/app/app.component.html
View File

@ -3,7 +3,7 @@
@if (actualRoute !=='home' && actualRoute !=='login' && actualRoute!=='emailVerification' && actualRoute!=='email-authorized'){ @if (actualRoute !=='home' && actualRoute !=='login' && actualRoute!=='emailVerification' && actualRoute!=='email-authorized'){
<header></header> <header></header>
} }
<main class="flex-1" [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }"> <main class="flex-1">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>

4
bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
View File

@ -13,8 +13,8 @@
</div> --> </div> -->
<div *ngFor="let item of items" cdkDrag (cdkDragEnded)="dragEnded($event)" (cdkDragStarted)="dragStarted()" (cdkDragMoved)="dragMoved($event)" [class.animation]="isAnimationActive" class="grid-item item"> <div *ngFor="let item of items" cdkDrag (cdkDragEnded)="dragEnded($event)" (cdkDragStarted)="dragStarted()" (cdkDragMoved)="dragMoved($event)" [class.animation]="isAnimationActive" class="grid-item item">
<div class="image-box hover:cursor-pointer"> <div class="image-box hover:cursor-pointer">
<img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg shadow-md" /> <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg drop-shadow-custom-bg" />
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md" (click)="imageToDelete.emit(item)"> <div class="absolute top-2 right-2 bg-white rounded-full p-1 drop-shadow-custom-bg" (click)="imageToDelete.emit(item)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>

2
bizmatch/src/app/components/email-authorized/email-authorized.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto py-8 px-4 max-w-md"> <div class="container mx-auto py-8 px-4 max-w-md">
<div class="bg-white p-6 rounded-lg shadow-md text-center"> <div class="bg-white p-6 rounded-lg drop-shadow-custom-bg text-center">
<!-- Loading state --> <!-- Loading state -->
<ng-container *ngIf="verificationStatus === 'pending'"> <ng-container *ngIf="verificationStatus === 'pending'">
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">

2
bizmatch/src/app/components/email-verification/email-verification.component.html
View File

@ -1,5 +1,5 @@
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100"> <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center"> <div class="bg-white p-8 rounded drop-shadow-custom-bg w-full max-w-md text-center">
<h2 class="text-2xl font-bold mb-4">Email Verification</h2> <h2 class="text-2xl font-bold mb-4">Email Verification</h2>
<p class="mb-4">A verification email has been sent to your email address. Please check your inbox and click the link to verify your account.</p> <p class="mb-4">A verification email has been sent to your email address. Please check your inbox and click the link to verify your account.</p>
<p>Once verified, please return to the application.</p> <p>Once verified, please return to the application.</p>

2
bizmatch/src/app/components/header/header.component.html
View File

@ -28,7 +28,7 @@
</button> </button>
<!-- Sort options dropdown --> <!-- Sort options dropdown -->
<div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-600"> <div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg drop-shadow-custom-bg dark:bg-gray-800 dark:border-gray-600">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200"> <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
@for(item of sortByOptions; track item){ @for(item of sortByOptions; track item){
<li (click)="sortBy(item.value)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li> <li (click)="sortBy(item.value)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li>

22
bizmatch/src/app/components/login-register/login-register.component.html
View File

@ -1,5 +1,5 @@
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100"> <div class="flex flex-col items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md"> <div class="bg-white p-8 rounded-lg drop-shadow-custom-bg w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-center text-gray-800"> <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">
{{ isLoginMode ? 'Login' : 'Sign Up' }} {{ isLoginMode ? 'Login' : 'Sign Up' }}
</h2> </h2>
@ -83,12 +83,6 @@
<!-- Google Button --> <!-- Google Button -->
<button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200"> <button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200">
<!-- <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.24 10.32V13.8H15.48C15.336 14.688 14.568 16.368 12.24 16.368C10.224 16.368 8.568 14.688 8.568 12.672C8.568 10.656 10.224 8.976 12.24 8.976C13.32 8.976 14.16 9.432 14.688 10.08L16.704 8.208C15.528 7.032 14.04 6.384 12.24 6.384C8.832 6.384 6 9.216 6 12.672C6 16.128 8.832 18.96 12.24 18.96C15.696 18.96 18.12 16.656 18.12 12.672C18.12 11.952 18.024 11.28 17.88 10.656L12.24 10.32Z"
fill="currentColor"
/>
</svg> -->
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path <path
fill="#FFC107" fill="#FFC107"
@ -100,17 +94,5 @@
</svg> </svg>
Continue with Google Continue with Google
</button> </button>
<!-- <button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="#FFC107"
d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
/>
<path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
<path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
<path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
</svg>
Continue with Google
</button> -->
</div> </div>
</div> </div>

4
bizmatch/src/app/pages/admin/user-list/user-list.component.html
View File

@ -32,7 +32,7 @@
</div> </div>
<!-- Benutzertabelle --> <!-- Benutzertabelle -->
<div class="overflow-x-auto shadow-md rounded-lg bg-white"> <div class="overflow-x-auto drop-shadow-custom-bg rounded-lg bg-white">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
@ -107,7 +107,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg> </svg>
</button> </button>
<div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"> <div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md drop-shadow-custom-bg bg-white ring-1 ring-black ring-opacity-5 z-10">
<div class="py-1" role="menu" aria-orientation="vertical"> <div class="py-1" role="menu" aria-orientation="vertical">
<a (click)="changeUserRole(user, 'admin'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Admin</a> <a (click)="changeUserRole(user, 'admin'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Admin</a>
<a (click)="changeUserRole(user, 'pro'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Pro</a> <a (click)="changeUserRole(user, 'pro'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Pro</a>

2
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-lg overflow-hidden relative"> <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden relative">
<button <button
(click)="historyService.goBack()" (click)="historyService.goBack()"
class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden" class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden"

2
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="bg-white shadow-md rounded-lg overflow-hidden"> <div class="bg-white drop-shadow-custom-bg rounded-lg overflow-hidden">
@if(listing){ @if(listing){
<div class="p-6 relative"> <div class="p-6 relative">
<h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1> <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>

2
bizmatch/src/app/pages/details/details-user/details-user.component.html
View File

@ -1,6 +1,6 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
@if(user){ @if(user){
<div class="bg-white shadow-md rounded-lg overflow-hidden"> <div class="bg-white drop-shadow-custom-bg rounded-lg overflow-hidden">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between p-4 border-b relative"> <div class="flex items-center justify-between p-4 border-b relative">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">

81
bizmatch/src/app/pages/home/home.component.html
View File

@ -34,17 +34,23 @@
</div> </div>
</div> </div>
<main class="flex flex-col items-center justify-center lg:px-4 w-full flex-grow"> <!-- ==== ANPASSUNGEN START ==== -->
<div class="bg-cover-custom py-20 md:py-40 flex flex-col w-full"> <!-- 1. px-4 für <main> (vorher px-2 sm:px-4) -->
<main class="flex flex-col items-center justify-center px-4 w-full flex-grow">
<div class="bg-cover-custom py-12 md:py-20 lg:py-32 flex flex-col w-full rounded-xl lg:rounded-2xl md:drop-shadow-custom-md lg:drop-shadow-custom-lg min-h-[calc(100vh_-_20rem)] lg:min-h-[calc(100vh_-_10rem)]">
<div class="flex justify-center w-full"> <div class="flex justify-center w-full">
<div class="w-11/12 md:w-2/3 lg:w-1/2"> <!-- 3. Für Mobile: m-2 statt max-w-xs; ab sm: wieder max-width und kein Margin -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-blue-900 mb-4 text-center">Find businesses for sale.</h1> <div class="w-full m-2 sm:m-0 sm:max-w-md md:max-w-xl lg:max-w-2xl xl:max-w-3xl">
<p class="text-base md:text-lg lg:text-xl text-blue-600 mb-8 text-center">Unlocking Exclusive Opportunities - Empowering Entrepreneurial Dreams</p> <!-- Schriftgrößen angepasst (wie vorher) -->
<div class="bg-white bg-opacity-80 pb-6 pt-2 px-2 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }"> <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-blue-900 mb-3 sm:mb-4 text-center">Find businesses for sale.</h1>
<!-- Abstand unten angepasst (wie vorher) -->
<p class="text-base md:text-lg lg:text-xl text-blue-600 mb-6 md:mb-8 text-center">Unlocking Exclusive Opportunities - Empowering Entrepreneurial Dreams</p>
<!-- Restliche Anpassungen (Innenabstände, Button-Paddings etc.) bleiben wie im vorherigen Schritt -->
<div class="bg-white bg-opacity-80 pb-4 md:pb-6 pt-2 px-3 sm:px-4 md:px-6 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }">
@if(!aiSearch){ @if(!aiSearch){
<div class="text-sm lg:text-base mb-1 text-center text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-center"> <div class="text-sm lg:text-base mb-1 text-center text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-between">
<ul class="flex flex-wrap -mb-px"> <ul class="flex flex-wrap -mb-px w-full">
<li class="me-2"> <li class="w-[33%]">
<a <a
(click)="changeTab('business')" (click)="changeTab('business')"
[ngClass]=" [ngClass]="
@ -52,12 +58,12 @@
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500'] ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300'] : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
" "
class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg" class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>Businesses</a >Businesses</a
> >
</li> </li>
@if ((numberOfCommercial$ | async) > 0) { @if ((numberOfCommercial$ | async) > 0) {
<li class="me-2"> <li class="w-[33%]">
<a <a
(click)="changeTab('commercialProperty')" (click)="changeTab('commercialProperty')"
[ngClass]=" [ngClass]="
@ -65,13 +71,12 @@
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500'] ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300'] : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
" "
class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg" class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>Properties</a >Properties</a
> >
</li> </li>
} } @if ((numberOfBroker$ | async) > 0) {
@if ((numberOfBroker$ | async) > 0) { <li class="w-[33%]">
<li class="me-2">
<a <a
(click)="changeTab('broker')" (click)="changeTab('broker')"
[ngClass]=" [ngClass]="
@ -79,49 +84,14 @@
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500'] ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300'] : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
" "
class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg" class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>Professionals</a >Professionals</a
> >
</li> </li>
} }
</ul> </ul>
</div> </div>
} @if(aiSearch){ } @if(criteria && !aiSearch){
<div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
<div class="md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md">
<input #aiSearchInput type="text" [(ngModel)]="aiSearchText" name="aiSearchText" class="w-full p-2 border border-gray-300 rounded-md" (focus)="stopTypingEffect()" (blur)="startTypingEffect()" />
</div>
</div>
<div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
<button
type="button"
class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none flex items-center justify-center min-w-[180px] min-h-[48px]"
(click)="generateAiResponse()"
>
<span class="flex items-center">
@if(loadingAi){
<svg aria-hidden="true" role="status" class="w-4 h-4 mr-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="#E5E7EB"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentColor"
/>
</svg>
<span>Loading ...</span>
} @else {
<span>Search</span>
}
</span>
</button>
</div>
</div>
@if(aiSearchFailed){
<div id="error-message" class="w-full max-w-3xl mx-auto mt-2 text-red-600 text-center">Search timed out. Please try again or use classic Search</div>
} } @if(criteria && !aiSearch){
<div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300"> <div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
<div class="md:flex-none md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0"> <div class="md:flex-none md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md"> <div class="relative max-sm:border border-gray-300 rounded-md">
@ -186,9 +156,11 @@
} }
<div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md"> <div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
@if(getNumberOfFiltersSet()>0 && numberOfResults$){ @if(getNumberOfFiltersSet()>0 && numberOfResults$){
<button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search ({{ numberOfResults$ | async }})</button> <button class="w-full h-full text-white font-semibold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[48px]" (click)="search()">
Search ({{ numberOfResults$ | async }})
</button>
}@else { }@else {
<button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search</button> <button class="w-full h-full text-white font-semibold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[48px]" (click)="search()">Search</button>
} }
</div> </div>
</div> </div>
@ -208,3 +180,4 @@
</div> </div>
</div> </div>
</main> </main>
<!-- ==== ANPASSUNGEN ENDE ==== -->

2
bizmatch/src/app/pages/home/home.component.scss
View File

@ -3,8 +3,6 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
min-height: calc(100vh - 4rem);
} }
select:not([size]) { select:not([size]) {
background-image: unset; background-image: unset;

2
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
View File

@ -3,7 +3,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Amanda Taylor --> <!-- Amanda Taylor -->
@for (user of users; track user) { @for (user of users; track user) {
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col justify-between"> <div class="bg-white rounded-lg drop-shadow-custom-bg p-6 flex flex-col justify-between">
<div class="flex items-start space-x-4"> <div class="flex items-start space-x-4">
@if(user.hasProfile){ @if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" /> <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />

2
bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
View File

@ -3,7 +3,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Anzahl der Spalten auf 3 reduziert und den Abstand erhöht --> <!-- Anzahl der Spalten auf 3 reduziert und den Abstand erhöht -->
@for (listing of listings; track listing.id) { @for (listing of listings; track listing.id) {
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl"> <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
<!-- Hover-Effekt hinzugefügt --> <!-- Hover-Effekt hinzugefügt -->
<div class="p-6 flex flex-col h-full relative z-[0]"> <div class="p-6 flex flex-col h-full relative z-[0]">
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">

2
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
View File

@ -2,7 +2,7 @@
@if(listings?.length>0){ @if(listings?.length>0){
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@for (listing of listings; track listing.id) { @for (listing of listings; track listing.id) {
<div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col h-full"> <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden flex flex-col h-full">
@if (listing.imageOrder?.length>0){ @if (listing.imageOrder?.length>0){
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" /> <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" />
} @else { } @else {

6
bizmatch/src/app/pages/subscription/account/account.component.html
View File

@ -1,6 +1,6 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
@if (user){ @if (user){
<div class="bg-white rounded-lg shadow-md p-6"> <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<form #accountForm="ngForm" class="space-y-4"> <form #accountForm="ngForm" class="space-y-4">
<h2 class="text-2xl font-bold mb-4">Account Details</h2> <h2 class="text-2xl font-bold mb-4">Account Details</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@ -16,7 +16,7 @@
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative"> <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
@if(user?.hasCompanyLogo){ @if(user?.hasCompanyLogo){
<img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" /> <img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 shadow-md hover:cursor-pointer" (click)="deleteConfirm('logo')"> <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('logo')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
@ -38,7 +38,7 @@
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative"> <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
@if(user?.hasProfile){ @if(user?.hasProfile){
<img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" /> <img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 shadow-md hover:cursor-pointer" (click)="deleteConfirm('profile')"> <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('profile')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>

2
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6"> <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<h1 class="text-2xl font-semibold mb-6">Edit Listing</h1> <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
@if(listing){ @if(listing){
<form #listingForm="ngForm" class="space-y-4"> <form #listingForm="ngForm" class="space-y-4">

92
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6"> <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<h1 class="text-2xl font-semibold mb-6">Edit Listing</h1> <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
@if (listing){ @if (listing){
<form #listingForm="ngForm" class="space-y-4"> <form #listingForm="ngForm" class="space-y-4">
@ -18,80 +18,19 @@
</ng-select> </ng-select>
</div> </div>
<!-- <div class="mb-4">
<label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
<input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
</div> -->
<div> <div>
<app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input> <app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
</div> </div>
<div> <div>
<!-- <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
<quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor> -->
<app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill> <app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
</div> </div>
<!-- <div>
<label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
<ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select> <app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
<!-- <app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city> -->
<app-validated-location label="Location" name="location" [(ngModel)]="listing.location"></app-validated-location> <app-validated-location label="Location" name="location" [(ngModel)]="listing.location"></app-validated-location>
</div> </div>
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
</div>
<div class="w-1/2">
<label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
<input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> -->
<!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
<app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
<!-- </div> -->
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
<input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
<div class="w-1/2">
<label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
<input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Zip Code" name="zipCode" [(ngModel)]="listing.zipCode"></app-validated-input>
<app-validated-input label="County" name="county" [(ngModel)]="listing.county"></app-validated-input>
</div> -->
<!-- <div class="mb-4">
<label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
<textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
</div> -->
<!-- <div class="flex items-center mb-4"> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- <div class="w-1/2">
<label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
<input
type="text"
id="price"
[(ngModel)]="listing.price"
name="price"
class="w-full p-2 border border-gray-300 rounded-md"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div> -->
<app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price> <app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
<div class="flex justify-center"> <div class="flex justify-center">
<label class="flex items-center cursor-pointer"> <label class="flex items-center cursor-pointer">
@ -103,34 +42,8 @@
</label> </label>
</div> </div>
</div> </div>
<!-- <div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
@for (image of listing.imageOrder; track listing.imageOrder) {
<div class="relative aspect-video cursor-move">
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
}
</div>
</div> -->
<div class="container mx-auto pt-2"> <div class="container mx-auto pt-2">
<!-- <div class="grid-container"> -->
<!-- @for (image of listing.imageOrder; track image) {
<div cdkDrag class="grid-item">
<div class="image-box">
<img [src]="getImageUrl(image)" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
</div>
} -->
<app-drag-drop-mixed [listing]="listing" [ts]="ts" (imageOrderChanged)="imageOrderChanged($event)" (imageToDelete)="deleteConfirm($event)"></app-drag-drop-mixed> <app-drag-drop-mixed [listing]="listing" [ts]="ts" (imageOrderChanged)="imageOrderChanged($event)" (imageToDelete)="deleteConfirm($event)"></app-drag-drop-mixed>
<!-- </div> --> <!-- </div> -->
</div> </div>
@ -150,7 +63,6 @@
Upload Upload
</button> </button>
} }
<!-- <input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" /> -->
</div> </div>
@if (mode==='create'){ @if (mode==='create'){
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Post Listing</button> <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Post Listing</button>

2
bizmatch/src/app/pages/subscription/email-us/email-us.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6"> <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<h2 class="text-2xl font-semibold mb-6">Contact Us</h2> <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
<form #contactForm="ngForm" class="space-y-4"> <form #contactForm="ngForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

6
bizmatch/src/app/pages/subscription/favorites/favorites.component.html
View File

@ -1,10 +1,10 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6"> <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<h1 class="text-2xl font-bold md:mb-4">My Favorites</h1> <h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
<!-- Desktop view --> <!-- Desktop view -->
<div class="hidden md:block"> <div class="hidden md:block">
<table class="w-full bg-white shadow-md rounded-lg overflow-hidden"> <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
<th class="py-2 px-4 text-left">Title</th> <th class="py-2 px-4 text-left">Title</th>
@ -44,7 +44,7 @@
<!-- Mobile view --> <!-- Mobile view -->
<div class="md:hidden"> <div class="md:hidden">
<div *ngFor="let listing of favorites" class="bg-white shadow-md rounded-lg p-4 mb-4"> <div *ngFor="let listing of favorites" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
<h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2> <h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
<p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p> <p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
<p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }}, {{ listing.location.state }}</p> <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }}, {{ listing.location.state }}</p>

6
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
View File

@ -1,10 +1,10 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6"> <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<h1 class="text-2xl font-bold md:mb-4">My Listings</h1> <h1 class="text-2xl font-bold md:mb-4">My Listings</h1>
<!-- Desktop view --> <!-- Desktop view -->
<div class="hidden md:block"> <div class="hidden md:block">
<table class="w-full bg-white shadow-md rounded-lg overflow-hidden"> <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
<th class="py-2 px-4 text-left">Title</th> <th class="py-2 px-4 text-left">Title</th>
@ -57,7 +57,7 @@
<!-- Mobile view --> <!-- Mobile view -->
<div class="md:hidden"> <div class="md:hidden">
<div *ngFor="let listing of myListings" class="bg-white shadow-md rounded-lg p-4 mb-4"> <div *ngFor="let listing of myListings" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
<h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2> <h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
<p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p> <p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
<p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }} - {{ listing.location.state }}</p> <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }} - {{ listing.location.state }}</p>

7
bizmatch/tailwind.config.js
View File

@ -34,6 +34,13 @@ module.exports = {
'4xl': '2.25rem', '4xl': '2.25rem',
'5xl': '3rem', '5xl': '3rem',
}, },
dropShadow: {
'custom-bg': '0 15px 20px rgba(0, 0, 0, 0.3)', // Wähle einen aussagekräftigen Namen
'inner-faint': '0 3px 6px rgba(0, 0, 0, 0.1)',
'custom-md': '0 10px 15px rgba(0, 0, 0, 0.25)', // Dein mittlerer Schatten
'custom-lg': '0 15px 20px rgba(0, 0, 0, 0.3)' // Dein großer Schatten
// ... andere benutzerdefinierte Schatten, falls vorhanden
}
}, },
}, },
plugins: [ plugins: [