Scribd
Upload
37 views80 pages

Doctype HTML

Uploaded by

Kaleb Mulatu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views80 pages

Doctype HTML

Uploaded by

Kaleb Mulatu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Prime Properties Ethiopia - Homes & Land for Sale</title>

<script src="https://cdn.tailwindcss.com"></script>

<style>

@import
url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body { font-family: 'Inter', sans-serif; }

.hero-gradient { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d1b0e 100%); }

.luxury-gradient { background: linear-gradient(135deg, #8b4513 0%, #a0522d 50%, #654321 100%);


}

.property-card {

transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

border: 1px solid rgba(139, 69, 19, 0.2);

.property-card:hover {

transform: translateY(-10px) scale(1.02);

box-shadow: 0 25px 50px rgba(139, 69, 19, 0.3), 0 0 30px rgba(160, 82, 45, 0.2);

border-color: #8b4513;

/* Smooth scroll animations */

.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }


.fade-in.visible { opacity: 1; transform: translateY(0); }

.slide-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease; }

.slide-in-left.visible { opacity: 1; transform: translateX(0); }

.slide-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease; }

.slide-in-right.visible { opacity: 1; transform: translateX(0); }

.scale-in { opacity: 0; transform: scale(0.8); transition: all 0.6s ease; }

.scale-in.visible { opacity: 1; transform: scale(1); }

/* Interactive buttons */

.interactive-btn {

position: relative;

overflow: hidden;

transition: all 0.3s ease;

.interactive-btn:before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);


transition: left 0.5s;

.interactive-btn:hover:before {

left: 100%;

/* Floating elements */

.float { animation: float 6s ease-in-out infinite; }

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-20px); }

100% { transform: translateY(0px); }

/* Pulse animation */

.pulse { animation: pulse 2s infinite; }

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.05); }

100% { transform: scale(1); }

/* Scroll indicator */

.scroll-indicator {

position: fixed;
top: 0;

left: 0;

width: 0%;

height: 6px;

background: linear-gradient(90deg, #8b4513, #a0522d, #654321);

z-index: 1000;

transition: width 0.3s ease;

box-shadow: 0 2px 10px rgba(139, 69, 19, 0.5);

/* Quick action buttons */

.quick-actions {

position: fixed;

right: 20px;

top: 50%;

transform: translateY(-50%);

z-index: 100;

display: flex;

flex-direction: column;

gap: 15px;

.quick-btn {

width: 60px;

height: 60px;
border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

color: white;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(0,0,0,0.2);

.quick-btn:hover {

transform: scale(1.1);

box-shadow: 0 6px 20px rgba(0,0,0,0.3);

/* Parallax effect */

.parallax {

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

/* Counter animation */
.counter { font-weight: bold; }

/* Smooth section transitions */

section {

transition: all 0.5s ease;

/* Payment method selection styles */

.payment-option.selected {

border-color: #10b981 !important;

background: linear-gradient(135deg, #ecfdf5, #d1fae5);

transform: scale(1.02);

box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);

.payment-radio {

transition: all 0.3s ease;

.payment-option.selected .payment-radio {

background-color: #10b981;

border-color: #10b981;

position: relative;

}
.payment-option.selected .payment-radio::after {

content: '';

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 6px;

height: 6px;

background-color: white;

border-radius: 50%;

/* Mobile responsive quick actions */

@media (max-width: 768px) {

.quick-actions {

right: 10px;

gap: 10px;

.quick-btn {

width: 50px;

height: 50px;

font-size: 20px;

</style>
</head>

<body class="bg-gray-50">

<!-- Login/Register Page (Shown by default) -->

<div id="authPage" class="fixed inset-0 bg-gradient-to-br from-blue-600 to-blue-800 flex items-center


justify-center z-50">

<div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl">

<div class="text-center mb-8">

<div class="text-4xl font-bold text-blue-600 mb-4">Prime Properties</div>

<h1 class="text-3xl font-bold text-gray-900 mb-2">Welcome to Ethiopia's Premier Real Estate


Platform</h1>

<p class="text-gray-600">Please login or create an account to access our premium property


listings and services</p>

</div>

<div class="mb-6">

<div class="flex border-b border-gray-200">

<button onclick="showLoginTab()" id="loginTab" class="flex-1 py-3 px-4 text-center font-


medium text-blue-600 border-b-2 border-blue-600">

Login

</button>

<button onclick="showRegisterTab()" id="registerTab" class="flex-1 py-3 px-4 text-center


font-medium text-gray-500 hover:text-gray-700">

Register

</button>

</div>

</div>
<!-- Login Form -->

<form id="loginForm" class="space-y-4">

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>

<input type="email" name="loginEmail" required class="w-full px-4 py-3 border border-gray-


300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Password</label>

<input type="password" name="loginPassword" required class="w-full px-4 py-3 border


border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold


hover:bg-blue-700 transition-colors">

Login to Prime Properties

</button>

</form>

<!-- Register Form -->

<form id="registerForm" class="space-y-4 hidden">

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>

<input type="text" name="registerName" required class="w-full px-4 py-3 border border-


gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>


<input type="email" name="registerEmail" required class="w-full px-4 py-3 border border-
gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">

<p class="text-xs text-gray-500 mt-1">We verify Gmail addresses to ensure they exist</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>

<input type="tel" name="registerPhone" required class="w-full px-4 py-3 border border-gray-


300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Password</label>

<input type="password" name="registerPassword" required minlength="6" class="w-full px-4


py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

<div class="flex items-center">

<input type="checkbox" id="agreeTerms" required class="h-4 w-4 text-blue-600 focus:ring-


blue-500 border-gray-300 rounded">

<label for="agreeTerms" class="ml-2 block text-sm text-gray-700">

I agree to the Terms of Service and Privacy Policy

</label>

</div>

<button type="submit" class="w-full bg-green-600 text-white py-3 rounded-lg font-semibold


hover:bg-green-700 transition-colors">

Create Account & Access Properties

</button>

</form>
<div class="mt-6 text-center">

<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">

<h4 class="font-semibold text-blue-900 mb-2">Why Join Prime Properties?</h4>

<ul class="text-sm text-blue-800 space-y-1">

<li>✓ Access to premium property listings</li>

<li>✓ Only 1.6% commission on sales</li>

<li>✓ 5,000 ETB service fee (lowest in market)</li>

<li>✓ Personal dashboard to track requests</li>

<li>✓ Professional legal support included</li>

</ul>

</div>

</div>

</div>

</div>

<!-- Scroll Progress Indicator -->

<div class="scroll-indicator" id="scrollIndicator"></div>

<!-- Quick Action Buttons -->

<div class="quick-actions" id="quickActions" style="display: none;">

<div class="quick-btn bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600


hover:to-yellow-700 pulse border-2 border-yellow-400" onclick="showSellModal()" title="List Premium
Property">

</div>
<div class="quick-btn bg-gradient-to-r from-gray-800 to-black hover:from-black hover:to-gray-900
border-2 border-yellow-400" onclick="scrollToProperties()" title="Browse Luxury Collection">

</div>

<div class="quick-btn bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700


hover:to-purple-800 border-2 border-yellow-400" onclick="showContactForm()" title="VIP
Consultation">

</div>

<div class="quick-btn bg-gradient-to-r from-gray-700 to-gray-800 hover:from-gray-800 hover:to-


gray-900 border-2 border-yellow-400" onclick="scrollToTop()" title="Back to Top">

</div>

</div>

<!-- Main Website Content (Hidden by default) -->

<div id="mainWebsite" class="hidden">

<!-- Navigation -->

<nav class="bg-gradient-to-r from-gray-900 via-black to-gray-900 shadow-2xl sticky top-0 z-50


border-b-2 border-gold-400">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="flex justify-between items-center h-18">

<div class="flex items-center">

<div class="text-3xl font-bold bg-gradient-to-r from-amber-700 via-amber-800 to-amber-


900 bg-clip-text text-transparent">Prime Properties</div>

<span class="ml-3 text-xs bg-gradient-to-r from-amber-700 to-amber-800 text-white px-2


py-1 rounded-full font-bold">LUXURY</span>

</div>
<div class="hidden md:flex space-x-8">

<a href="#home" class="text-gray-300 hover:text-amber-600 font-medium transition-all


duration-300 hover:scale-105">Home</a>

<a href="#properties" class="text-gray-300 hover:text-amber-600 font-medium transition-


all duration-300 hover:scale-105">Properties</a>

<a href="#services" class="text-gray-300 hover:text-amber-600 font-medium transition-all


duration-300 hover:scale-105">Services</a>

<a href="#contact" class="text-gray-300 hover:text-amber-600 font-medium transition-all


duration-300 hover:scale-105">Contact</a>

</div>

<div class="flex items-center space-x-4">

<span id="navWelcomeUser" class="text-amber-600 font-semibold"></span>

<button onclick="showDashboard()" class="bg-gradient-to-r from-amber-700 to-amber-


800 text-white px-6 py-2 rounded-lg hover:from-amber-800 hover:to-amber-900 transition-all duration-
300 font-bold shadow-lg transform hover:scale-105">

Dashboard

</button>

<button onclick="logout()" class="bg-gradient-to-r from-red-600 to-red-700 text-white px-


4 py-2 rounded-lg hover:from-red-700 hover:to-red-800 transition-all duration-300 font-medium
shadow-lg">

Logout

</button>

</div>

</div>

</div>

</nav>

<!-- Hero Section -->

<section id="home" class="relative text-white py-24 overflow-hidden parallax hero-gradient">


<div class="absolute inset-0 bg-gradient-to-br from-black via-transparent to-black opacity-
70"></div>

<!-- Luxury Floating Elements -->

<div class="absolute top-20 left-10 w-16 h-16 bg-amber-700 opacity-20 rounded-full


float"></div>

<div class="absolute top-40 right-20 w-12 h-12 bg-amber-800 opacity-20 rounded-full float"
style="animation-delay: -2s;"></div>

<div class="absolute bottom-20 left-20 w-14 h-14 bg-amber-700 opacity-20 rounded-full float"
style="animation-delay: -4s;"></div>

<div class="absolute top-60 right-40 w-10 h-10 bg-amber-900 opacity-15 rounded-full float"
style="animation-delay: -1s;"></div>

<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

<div class="mb-6 fade-in">

<span class="inline-block bg-gradient-to-r from-amber-700 to-amber-800 text-white px-6 py-


2 rounded-full text-sm font-bold mb-4">PREMIUM LUXURY REAL ESTATE</span>

</div>

<h1 class="text-6xl font-bold mb-6 fade-in bg-gradient-to-r from-white via-amber-100 to-white


bg-clip-text text-transparent">Discover Luxury Living in Ethiopia</h1>

<p class="text-2xl mb-8 max-w-4xl mx-auto fade-in text-gray-200" style="animation-delay:


0.2s;">Exclusive premium properties, luxury vehicles, and elite real estate services. Where sophistication
meets excellence.</p>

<div class="flex flex-col sm:flex-row gap-6 justify-center fade-in" style="animation-delay:


0.4s;">

<button onclick="scrollToProperties()" class="interactive-btn bg-gradient-to-r from-amber-


700 to-amber-800 text-white px-10 py-4 rounded-xl font-bold hover:from-amber-800 hover:to-amber-
900 transition-all duration-300 transform hover:scale-105 shadow-2xl">

Browse Luxury Properties

</button>
<button onclick="showSellModal()" class="interactive-btn bg-gradient-to-r from-green-600
to-green-700 text-white px-10 py-4 rounded-xl font-bold hover:from-green-700 hover:to-green-800
transition-all duration-300 transform hover:scale-105 pulse shadow-2xl">

List Your Premium Property

</button>

<button onclick="showContactForm()" class="interactive-btn border-3 border-amber-600 bg-


transparent text-amber-600 px-10 py-4 rounded-xl font-bold hover:bg-amber-600 hover:text-white
transition-all duration-300 transform hover:scale-105 shadow-2xl">

VIP Consultation

</button>

</div>

</div>

</section>

<!-- Properties Section -->

<section id="properties" class="relative py-16 overflow-hidden">

<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image:


url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=2000&q=80');"></div>

<div class="absolute inset-0 bg-white bg-opacity-90"></div>

<div class="relative">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="text-center mb-12">

<div class="mb-6 fade-in">

<span class="inline-block bg-gradient-to-r from-amber-700 to-amber-800 text-white px-6


py-2 rounded-full text-sm font-bold mb-4">EXCLUSIVE COLLECTION</span>
</div>

<h2 class="text-5xl font-bold bg-gradient-to-r from-gray-900 via-amber-700 to-gray-900 bg-


clip-text text-transparent mb-6 fade-in">Premium Properties & Luxury Assets</h2>

<p class="text-gray-700 text-xl fade-in max-w-3xl mx-auto" style="animation-delay:


0.2s;">Curated selection of Ethiopia's finest properties, luxury vehicles, and exclusive real estate
opportunities</p>

<!-- Interactive Filter Buttons -->

<div class="flex flex-wrap justify-center gap-4 mt-10 fade-in" style="animation-delay: 0.4s;">

<button onclick="filterProperties('all')" class="filter-btn active bg-gradient-to-r from-


amber-700 to-amber-800 text-white px-8 py-3 rounded-full hover:from-amber-800 hover:to-amber-900
transition-all duration-300 font-bold shadow-lg transform hover:scale-105">

All Premium

</button>

<button onclick="filterProperties('residential')" class="filter-btn bg-gradient-to-r from-gray-


200 to-gray-300 text-gray-800 px-6 py-3 rounded-full hover:from-amber-100 hover:to-amber-200
transition-all duration-300 font-medium shadow-md">

Luxury Homes

</button>

<button onclick="filterProperties('commercial')" class="filter-btn bg-gradient-to-r from-


gray-200 to-gray-300 text-gray-800 px-6 py-3 rounded-full hover:from-amber-100 hover:to-amber-200
transition-all duration-300 font-medium shadow-md">

Elite Commercial

</button>

<button onclick="filterProperties('land')" class="filter-btn bg-gradient-to-r from-gray-200


to-gray-300 text-gray-800 px-6 py-3 rounded-full hover:from-amber-100 hover:to-amber-200 transition-
all duration-300 font-medium shadow-md">

Prime Land

</button>
<button onclick="filterProperties('luxury')" class="filter-btn bg-gradient-to-r from-gray-200
to-gray-300 text-gray-800 px-6 py-3 rounded-full hover:from-amber-100 hover:to-amber-200 transition-
all duration-300 font-medium shadow-md">

Ultra Luxury

</button>

</div>

</div>

<div class="grid md:grid-cols-3 gap-8" id="propertyGrid">

<!-- Property 1 -->

<div class="bg-white rounded-xl shadow-lg overflow-hidden property-card relative group


scale-in residential" data-category="residential" style="animation-delay: 0.1s;">

<div class="h-48 overflow-hidden relative">

<img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Luxury Villa" class="w-full h-full object-cover">

<!-- Hover Description -->

<div class="absolute inset-0 bg-black bg-opacity-80 text-white p-4 opacity-0 group-


hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-2">Luxury Villa Details</h4>

<ul class="text-sm space-y-1">

<li>• 5 bedrooms, 4 bathrooms</li>

<li>• Swimming pool & garden</li>

<li>• Prime location in Bole</li>

<li>• Modern amenities included</li>

<li>• 24/7 security & parking</li>

</ul>

</div>
</div>

<div class="p-6">

<h3 class="text-xl font-semibold mb-3">Luxury Villa</h3>

<div class="mb-4">

<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-


sm">Available</span>

</div>

<div class="space-y-3">

<button onclick="requestProperty('Luxury Villa', 'Contact for pricing')" class="w-full


bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold">

Request Property

</button>

<button onclick="sellSimilarProperty('Luxury Villa')" class="w-full bg-green-600 text-


white py-2 rounded-lg hover:bg-green-700 transition-colors font-medium text-sm">

Sell Your Villa

</button>

</div>

</div>

</div>

<!-- Property 2 -->

<div class="bg-white rounded-xl shadow-lg overflow-hidden property-card relative group


scale-in residential" data-category="residential" style="animation-delay: 0.2s;">

<div class="h-48 overflow-hidden relative">

<img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Modern Apartment" class="w-full h-full object-cover">

<!-- Hover Description -->


<div class="absolute inset-0 bg-black bg-opacity-80 text-white p-4 opacity-0 group-
hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-2">Modern Apartment Details</h4>

<ul class="text-sm space-y-1">

<li>• 3 bedrooms, 2 bathrooms</li>

<li>• City center location</li>

<li>• Elevator & balcony</li>

<li>• Fully furnished option</li>

<li>• Gym & rooftop access</li>

</ul>

</div>

</div>

<div class="p-6">

<h3 class="text-xl font-semibold mb-3">Modern Apartment</h3>

<div class="mb-4">

<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-


sm">Available</span>

</div>

<div class="space-y-3">

<button onclick="requestProperty('Modern Apartment', 'Contact for pricing')"


class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold
interactive-btn">

Request Property

</button>

<button onclick="sellSimilarProperty('Modern Apartment')" class="w-full bg-green-600


text-white py-2 rounded-lg hover:bg-green-700 transition-colors font-medium text-sm interactive-btn">

Sell Your Apartment


</button>

</div>

</div>

</div>

<!-- Property 3 -->

<div class="bg-white rounded-xl shadow-lg overflow-hidden property-card relative group


scale-in commercial" data-category="commercial" style="animation-delay: 0.3s;">

<div class="h-48 overflow-hidden relative">

<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Commercial Building" class="w-full h-full object-cover">

<!-- Hover Description -->

<div class="absolute inset-0 bg-black bg-opacity-80 text-white p-4 opacity-0 group-


hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-2">Commercial Building Details</h4>

<ul class="text-sm space-y-1">

<li>• 8 floors, 2000 sqm total</li>

<li>• Business district location</li>

<li>• Elevator & conference rooms</li>

<li>• High-speed internet ready</li>

<li>• Parking for 50+ vehicles</li>

</ul>

</div>

</div>

<div class="p-6">

<h3 class="text-xl font-semibold mb-3">Commercial Building</h3>


<div class="mb-4">

<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-


sm">Available</span>

</div>

<div class="space-y-3">

<button onclick="requestProperty('Commercial Building', 'Contact for pricing')"


class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold
interactive-btn">

Request Property

</button>

<button onclick="sellSimilarProperty('Commercial Building')" class="w-full bg-green-


600 text-white py-2 rounded-lg hover:bg-green-700 transition-colors font-medium text-sm interactive-
btn">

Sell Your Building

</button>

</div>

</div>

</div>

<!-- Property 4 -->

<div class="bg-white rounded-xl shadow-lg overflow-hidden property-card relative group


scale-in land" data-category="land" style="animation-delay: 0.4s;">

<div class="h-48 overflow-hidden relative">

<img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Commercial Land" class="w-full h-full object-cover">

<!-- Hover Description -->

<div class="absolute inset-0 bg-black bg-opacity-80 text-white p-4 opacity-0 group-


hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center">
<h4 class="font-bold text-lg mb-2">Commercial Land Details</h4>

<ul class="text-sm space-y-1">

<li>• 5000 sqm prime location</li>

<li>• Main road frontage</li>

<li>• All utilities available</li>

<li>• Perfect for shopping mall</li>

<li>• Clear title & documents</li>

</ul>

</div>

</div>

<div class="p-6">

<h3 class="text-xl font-semibold mb-3">Commercial Land</h3>

<div class="mb-4">

<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-


sm">Available</span>

</div>

<div class="space-y-3">

<button onclick="requestProperty('Commercial Land', 'Contact for pricing')" class="w-


full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold
interactive-btn">

Request Property

</button>

<button onclick="sellSimilarProperty('Commercial Land')" class="w-full bg-green-600


text-white py-2 rounded-lg hover:bg-green-700 transition-colors font-medium text-sm interactive-btn">

Sell Your Land

</button>

</div>
</div>

</div>

<!-- Property 5 -->

<div class="bg-white rounded-xl shadow-lg overflow-hidden property-card relative group


scale-in residential" data-category="residential" style="animation-delay: 0.5s;">

<div class="h-48 overflow-hidden relative">

<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Family House" class="w-full h-full object-cover">

<!-- Hover Description -->

<div class="absolute inset-0 bg-black bg-opacity-80 text-white p-4 opacity-0 group-


hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-2">Family House Details</h4>

<ul class="text-sm space-y-1">

<li>• 4 bedrooms, 3 bathrooms</li>

<li>• Large backyard & garage</li>

<li>• Quiet residential area</li>

<li>• Near schools & hospitals</li>

<li>• Move-in ready condition</li>

</ul>

</div>

</div>

<div class="p-6">

<h3 class="text-xl font-semibold mb-3">Family House</h3>

<div class="mb-4">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-
sm">Available</span>

</div>

<div class="space-y-3">

<button onclick="requestProperty('Family House', 'Contact for pricing')" class="w-full


bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold interactive-
btn">

Request Property

</button>

<button onclick="sellSimilarProperty('Family House')" class="w-full bg-green-600 text-


white py-2 rounded-lg hover:bg-green-700 transition-colors font-medium text-sm interactive-btn">

Sell Your House

</button>

</div>

</div>

</div>

<!-- Property 6 -->

<div class="bg-gradient-to-br from-gray-900 to-black rounded-xl shadow-2xl overflow-hidden


property-card border-2 border-amber-700 relative group scale-in luxury" data-category="luxury"
style="animation-delay: 0.6s;">

<div class="h-48 overflow-hidden relative">

<img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Premium Luxury Car" class="w-full h-full object-cover">

<div class="absolute top-4 right-4">

<span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-


bold">PREMIUM</span>

</div>
<!-- Hover Description -->

<div class="absolute inset-0 bg-black bg-opacity-90 text-white p-4 opacity-0 group-


hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-2 text-amber-600">Luxury Vehicle Details</h4>

<ul class="text-sm space-y-1">

<li>• Latest model luxury sedan</li>

<li>• Leather interior & sunroof</li>

<li>• Advanced safety features</li>

<li>• Premium sound system</li>

<li>• Full service history</li>

</ul>

</div>

</div>

<div class="p-6 text-white">

<h3 class="text-xl font-bold mb-2 text-amber-600">Premium Luxury Vehicle</h3>

<p class="text-gray-300 text-sm mb-3">High-end luxury automobile with premium


features</p>

<div class="mb-4 flex gap-2">

<span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-


semibold">LUXURY</span>

<span class="bg-gray-700 text-white px-3 py-1 rounded-full text-xs">Vehicle</span>

</div>

<div class="space-y-3">

<button onclick="requestProperty('Premium Luxury Vehicle', 'Contact for exclusive


pricing')" class="w-full bg-gradient-to-r from-amber-700 to-amber-800 text-white py-3 rounded-lg
hover:from-amber-800 hover:to-amber-900 transition-all font-bold shadow-lg">

Request Premium Vehicle


</button>

<button onclick="sellSimilarProperty('Premium Luxury Vehicle')" class="w-full bg-


gradient-to-r from-green-500 to-green-600 text-white py-2 rounded-lg hover:from-green-600 hover:to-
green-700 transition-all font-medium text-sm shadow-lg">

Sell Your Luxury Car

</button>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Statistics Section -->

<section class="relative py-20 text-white overflow-hidden">

<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image:


url('https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=2000&q=80');"></div>

<div class="absolute inset-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 opacity-


90"></div>

<div class="relative">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="text-center mb-12">

<span class="inline-block bg-gradient-to-r from-amber-700 to-amber-800 text-white px-6 py-


2 rounded-full text-sm font-bold mb-4">PROVEN EXCELLENCE</span>

<h2 class="text-4xl font-bold bg-gradient-to-r from-white via-amber-100 to-white bg-clip-text


text-transparent">Our Premium Track Record</h2>
</div>

<div class="grid md:grid-cols-3 gap-8 text-center">

<div class="bg-gradient-to-br from-amber-700/20 to-amber-800/20 backdrop-blur-sm border


border-amber-600/30 rounded-xl p-8 transform hover:scale-105 transition-all duration-300">

<div class="text-5xl font-bold mb-3 bg-gradient-to-r from-amber-600 to-amber-800 bg-clip-


text text-transparent" id="customerCount">1,247</div>

<p class="text-amber-100 text-lg font-medium">Elite Clients Served</p>

</div>

<div class="bg-gradient-to-br from-amber-700/20 to-amber-800/20 backdrop-blur-sm border


border-amber-600/30 rounded-xl p-8 transform hover:scale-105 transition-all duration-300">

<div class="text-5xl font-bold mb-3 bg-gradient-to-r from-amber-600 to-amber-800 bg-clip-


text text-transparent" id="requestCount">3,892</div>

<p class="text-amber-100 text-lg font-medium">Luxury Inquiries</p>

</div>

<div class="bg-gradient-to-br from-amber-700/20 to-amber-800/20 backdrop-blur-sm border


border-amber-600/30 rounded-xl p-8 transform hover:scale-105 transition-all duration-300">

<div class="text-5xl font-bold mb-3 bg-gradient-to-r from-amber-600 to-amber-800 bg-clip-


text text-transparent">156</div>

<p class="text-amber-100 text-lg font-medium">Premium Sales Closed</p>

</div>

</div>

</div>

</div>

</section>

<!-- Services Section -->

<section id="services" class="relative py-16 overflow-hidden">


<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image:
url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=2000&q=80');"></div>

<div class="absolute inset-0 bg-gray-50 bg-opacity-95"></div>

<div class="relative">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="text-center mb-12">

<h2 class="text-4xl font-bold text-gray-900 mb-4">Our Services</h2>

<p class="text-gray-600 text-lg">Complete real estate solutions for your needs</p>

</div>

<div class="grid md:grid-cols-3 gap-8">

<div class="bg-white p-8 rounded-xl shadow-lg text-center relative group hover:shadow-2xl


transition-all duration-300">

<div class="w-16 h-16 mx-auto mb-4 rounded-full overflow-hidden">

<img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Home Sales" class="w-full h-full object-cover">

</div>

<h3 class="text-xl font-semibold mb-4">Home Sales</h3>

<p class="text-gray-600">Premium residential properties across Addis Ababa and


surrounding areas</p>

<!-- Hover Description -->

<div class="absolute inset-0 bg-blue-600 text-white p-6 rounded-xl opacity-0 group-


hover:opacity-95 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-3">Home Sales Services</h4>


<ul class="text-sm space-y-2 text-left">

<li>• Property valuation & market analysis</li>

<li>• Professional photography & listing</li>

<li>• Buyer screening & negotiations</li>

<li>• Home staging consultation</li>

<li>• Only 1.6% commission on successful sales</li>

<li>• Average sale time: 30-45 days</li>

</ul>

</div>

</div>

<div class="bg-white p-8 rounded-xl shadow-lg text-center relative group hover:shadow-2xl


transition-all duration-300">

<div class="w-16 h-16 mx-auto mb-4 rounded-full overflow-hidden">

<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Land Sales" class="w-full h-full object-cover">

</div>

<h3 class="text-xl font-semibold mb-4">Land Sales</h3>

<p class="text-gray-600">Commercial and residential land with proper documentation and


legal support</p>

<!-- Hover Description -->

<div class="absolute inset-0 bg-green-600 text-white p-6 rounded-xl opacity-0 group-


hover:opacity-95 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-3">Land Sales Services</h4>

<ul class="text-sm space-y-2 text-left">


<li>• Land surveying & boundary marking</li>

<li>• Soil testing & feasibility studies</li>

<li>• Zoning & permit assistance</li>

<li>• Title verification & transfer</li>

<li>• Investment opportunity analysis</li>

<li>• 2% commission on land sales</li>

</ul>

</div>

</div>

<div class="bg-white p-8 rounded-xl shadow-lg text-center relative group hover:shadow-2xl


transition-all duration-300">

<div class="w-16 h-16 mx-auto mb-4 rounded-full overflow-hidden">

<img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=1000&q=80" alt="Legal Support" class="w-full h-full object-cover">

</div>

<h3 class="text-xl font-semibold mb-4">Legal Support Services</h3>

<p class="text-gray-600">Complete documentation and legal assistance for all


transactions</p>

<!-- Hover Description -->

<div class="absolute inset-0 bg-purple-600 text-white p-6 rounded-xl opacity-0 group-


hover:opacity-95 transition-opacity duration-300 flex flex-col justify-center">

<h4 class="font-bold text-lg mb-3">Legal Support Services</h4>

<ul class="text-sm space-y-2 text-left">

<li>• Contract drafting & review</li>


<li>• Property title searches</li>

<li>• Mortgage & financing assistance</li>

<li>• Tax calculation & planning</li>

<li>• Dispute resolution support</li>

<li>• Free consultation included</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Contact Section -->

<section id="contact" class="relative py-16 overflow-hidden">

<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image:


url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=2000&q=80');"></div>

<div class="absolute inset-0 bg-white bg-opacity-92"></div>

<div class="relative">

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="text-center mb-12">

<h2 class="text-4xl font-bold text-gray-900 mb-4">Contact Us</h2>

<p class="text-gray-600 text-lg">Ready to find your perfect property? Get in touch


today!</p>

</div>
<div class="bg-gray-50 rounded-xl p-8">

<form id="contactForm" class="space-y-6">

<div class="grid md:grid-cols-2 gap-6">

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>

<input type="text" required class="w-full px-4 py-3 border border-gray-300 rounded-lg


focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>

<input type="tel" required class="w-full px-4 py-3 border border-gray-300 rounded-lg


focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>

<input type="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg


focus:ring-2 focus:ring-blue-500 focus:border-transparent">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Property Interest</label>

<select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2


focus:ring-blue-500 focus:border-transparent">

<option>Residential Home</option>
<option>Commercial Land</option>

<option>Residential Land</option>

<option>Investment Property</option>

</select>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Message</label>

<textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg


focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Tell us about your property
needs..."></textarea>

</div>

<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold


hover:bg-blue-700 transition-colors">

Send Message

</button>

</form>

</div>

</div>

</div>

</section>

<!-- Footer -->

<footer class="relative text-white py-16 overflow-hidden">

<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image:


url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop
&w=2000&q=80');"></div>

<div class="absolute inset-0 bg-gradient-to-t from-black via-gray-900 to-black opacity-95"></div>

<div class="relative">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="grid md:grid-cols-3 gap-12">

<div>

<div class="text-3xl font-bold mb-4 bg-gradient-to-r from-yellow-400 via-yellow-500 to-


yellow-600 bg-clip-text text-transparent">Prime Properties</div>

<span class="inline-block bg-gradient-to-r from-yellow-400 to-yellow-600 text-black px-3


py-1 rounded-full text-xs font-bold mb-4">LUXURY REAL ESTATE</span>

<p class="text-gray-300 leading-relaxed">Ethiopia's premier destination for luxury real


estate, exclusive properties, and elite lifestyle assets. Where sophistication meets excellence.</p>

<div class="flex space-x-4 mt-6">

<div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full flex


items-center justify-center text-black font-bold">◆</div>

<div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full flex


items-center justify-center text-black font-bold">★</div>

<div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full flex


items-center justify-center text-black font-bold">▲</div>

</div>

</div>

<div>

<h3 class="text-xl font-bold mb-6 text-yellow-400">Elite Contact</h3>

<div class="space-y-4 text-gray-300">

<div class="flex items-center space-x-3">

<div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-


black text-sm font-bold">P</div>
<p>+251-911-123456</p>

</div>

<div class="flex items-center space-x-3">

<div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-


black text-sm font-bold">@</div>

<p>[email protected]</p>

</div>

<div class="flex items-center space-x-3">

<div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-


black text-sm font-bold">L</div>

<p>Bole Premium District, Addis Ababa</p>

</div>

</div>

</div>

<div>

<h3 class="text-xl font-bold mb-6 text-yellow-400">VIP Hours</h3>

<div class="space-y-3 text-gray-300">

<div class="flex justify-between">

<span>Monday - Friday:</span>

<span class="text-yellow-400 font-medium">8:00 AM - 8:00 PM</span>

</div>

<div class="flex justify-between">

<span>Saturday:</span>

<span class="text-yellow-400 font-medium">9:00 AM - 6:00 PM</span>

</div>
<div class="flex justify-between">

<span>Sunday:</span>

<span class="text-yellow-400 font-medium">By Appointment</span>

</div>

<div class="mt-4 p-3 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border


border-yellow-400/30 rounded-lg">

<p class="text-yellow-300 text-sm font-medium">24/7 VIP Concierge Available</p>

</div>

</div>

</div>

</div>

<div class="border-t border-yellow-400/30 mt-12 pt-8 text-center">

<div class="flex flex-col md:flex-row justify-between items-center">

<p class="text-gray-400">&copy; 2024 Prime Properties Ethiopia. All rights reserved.</p>

<div class="flex space-x-6 mt-4 md:mt-0">

<span class="text-yellow-400 font-medium">Premium</span>

<span class="text-yellow-400 font-medium">Exclusive</span>

<span class="text-yellow-400 font-medium">Elite</span>

</div>

</div>

</div>

</div>

</div>

</footer>

</div>
<!-- Client Dashboard (Hidden by default) -->

<div id="clientDashboard" class="fixed inset-0 bg-gray-100 hidden z-50 overflow-y-auto">

<div class="min-h-screen">

<!-- Dashboard Header -->

<div class="bg-white shadow-sm border-b">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="flex justify-between items-center h-16">

<div class="flex items-center">

<div class="text-2xl font-bold text-blue-600">Prime Properties</div>

<span class="ml-4 text-gray-600">Client Dashboard</span>

</div>

<div class="flex items-center space-x-4">

<span id="welcomeUser" class="text-gray-700 font-medium"></span>

<button onclick="backToWebsite()" class="bg-blue-600 text-white px-4 py-2 rounded-lg


hover:bg-blue-700 transition-colors">

Back to Website

</button>

<button onclick="logout()" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-


red-700 transition-colors">

Logout

</button>

</div>

</div>

</div>

</div>
<!-- Dashboard Content -->

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

<div class="grid md:grid-cols-2 gap-8">

<!-- Property Listings -->

<div class="bg-white rounded-xl shadow-lg p-6">

<h3 class="text-xl font-bold text-gray-900 mb-4">Your Property Listings</h3>

<div id="userListings" class="space-y-4">

<p class="text-gray-500">No properties listed yet.</p>

</div>

</div>

<!-- Property Requests -->

<div class="bg-white rounded-xl shadow-lg p-6">

<h3 class="text-xl font-bold text-gray-900 mb-4">Your Property Requests</h3>

<div id="userRequests" class="space-y-4">

<p class="text-gray-500">No property requests yet.</p>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- Modal for Sell Home -->


<div id="sellModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-
50">

<div class="bg-white rounded-xl p-8 max-w-md w-full mx-4">

<div class="text-center mb-6">

<h3 class="text-2xl font-bold text-gray-900 mb-2">Sell Your Home</h3>

<div class="bg-green-100 border border-green-400 text-green-800 px-4 py-3 rounded-lg text-


sm">

<strong>Commission:</strong> We charge only 1.6% commission on successful sales. Free


property evaluation included!

</div>

</div>

<form id="sellForm" class="space-y-4">

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Property Owner


Name</label>

<input type="text" name="ownerName" required class="w-full px-4 py-3 border border-gray-


300 rounded-lg focus:ring-2 focus:ring-green-500">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>

<input type="tel" name="phone" required class="w-full px-4 py-3 border border-gray-300


rounded-lg focus:ring-2 focus:ring-green-500">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>

<input type="email" name="email" required class="w-full px-4 py-3 border border-gray-300


rounded-lg focus:ring-2 focus:ring-green-500">
</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Property Type</label>

<select name="propertyType" class="w-full px-4 py-3 border border-gray-300 rounded-lg


focus:ring-2 focus:ring-green-500">

<option>Residential House</option>

<option>Apartment/Condo</option>

<option>Commercial Building</option>

<option>Land/Plot</option>

<option>Villa</option>

</select>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Property Location</label>

<input type="text" name="location" required placeholder="e.g., Bole, Addis Ababa"


class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Expected Price (ETB)</label>

<input type="number" name="price" required placeholder="e.g., 5000000" class="w-full px-4


py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Property Video


(Required)</label>

<input type="file" name="video" accept="video/*" required class="w-full px-4 py-3 border


border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg
file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-
100">

<p class="text-xs text-gray-500 mt-1">Please upload a video tour of your property (max
100MB)</p>

</div>

<div class="flex gap-4">

<button type="submit" class="flex-1 bg-green-600 text-white py-3 rounded-lg font-semibold


hover:bg-green-700 transition-colors transform hover:scale-105">

Submit Property Listing

</button>

</div>

</form>

<button onclick="closeModal('sellModal')" class="mt-4 w-full bg-gray-200 text-gray-700 py-2


rounded-lg hover:bg-gray-300 transition-colors">

Cancel

</button>

</div>

</div>

<!-- Modal for Property Request -->

<div id="propertyModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-


center z-50">

<div class="bg-white rounded-xl p-8 max-w-md w-full mx-4">

<div class="text-center mb-6">

<h3 class="text-2xl font-bold text-gray-900 mb-2">Property Request</h3>

<div id="propertyDetails" class="text-gray-600 mb-4"></div>


<div class="bg-blue-100 border border-blue-400 text-blue-800 px-4 py-3 rounded-lg text-sm">

<strong>Service Fee:</strong> 5,000 ETB processing fee applies for property requests

</div>

</div>

<form id="propertyRequestForm" class="space-y-4">

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Your Name</label>

<input type="text" name="customerName" required class="w-full px-4 py-3 border border-


gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>

<input type="tel" name="customerPhone" required class="w-full px-4 py-3 border border-


gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>

<input type="email" name="customerEmail" required class="w-full px-4 py-3 border border-


gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">

</div>

<!-- Payment Section (Initially Hidden) -->

<div id="paymentSection" class="hidden bg-gray-50 p-6 rounded-xl border-2 border-dashed


border-gray-300 max-h-96 overflow-y-auto">

<label class="block text-lg font-bold text-gray-900 mb-4 text-center">📸 Payment Proof


Upload (Required)</label>
<!-- Payment Instructions Box -->

<div class="mb-6 p-6 bg-gradient-to-r from-yellow-50 to-orange-50 border-3 border-yellow-


400 rounded-xl shadow-lg">

<h4 class="text-xl font-bold text-yellow-900 mb-6 flex items-center justify-center">

<span class="text-3xl mr-3">📸</span>

Step 2: Choose Your Payment Method

</h4>

<!-- Payment Method Selection -->

<div class="space-y-4 mb-6">

<!-- Bank Transfer Option -->

<div class="payment-option bg-white p-4 rounded-xl border-2 border-blue-300 cursor-


pointer hover:border-blue-500 hover:shadow-lg transition-all duration-300 flex items-center justify-
between" onclick="selectPaymentMethod('bank')" data-method="bank">

<div class="flex items-center space-x-4">

<div class="text-3xl">📸</div>

<div>

<h5 class="font-bold text-blue-900">Bank Transfer</h5>

</div>

</div>

<div>

<span class="inline-block w-4 h-4 border-2 border-blue-500 rounded-full payment-


radio"></span>

</div>

</div>

<!-- Telebirr Option -->


<div class="payment-option bg-white p-4 rounded-xl border-2 border-orange-300
cursor-pointer hover:border-orange-500 hover:shadow-lg transition-all duration-300 flex items-center
justify-between" onclick="selectPaymentMethod('telebirr')" data-method="telebirr">

<div class="flex items-center space-x-4">

<div class="text-3xl">📸</div>

<div>

<h5 class="font-bold text-orange-900">Telebirr</h5>

</div>

</div>

<div>

<span class="inline-block w-4 h-4 border-2 border-orange-500 rounded-full


payment-radio"></span>

</div>

</div>

<!-- CBE Birr Option -->

<div class="payment-option bg-white p-4 rounded-xl border-2 border-blue-300 cursor-


pointer hover:border-blue-500 hover:shadow-lg transition-all duration-300 flex items-center justify-
between" onclick="selectPaymentMethod('cbebirr')" data-method="cbebirr">

<div class="flex items-center space-x-4">

<div class="text-3xl">📸</div>

<div>

<h5 class="font-bold text-blue-900">CBE Birr</h5>

</div>

</div>

<div>

<span class="inline-block w-4 h-4 border-2 border-blue-500 rounded-full payment-


radio"></span>
</div>

</div>

<!-- M-Birr Option -->

<div class="payment-option bg-white p-4 rounded-xl border-2 border-green-300 cursor-


pointer hover:border-green-500 hover:shadow-lg transition-all duration-300 flex items-center justify-
between" onclick="selectPaymentMethod('mbirr')" data-method="mbirr">

<div class="flex items-center space-x-4">

<div class="text-3xl">📸</div>

<div>

<h5 class="font-bold text-green-900">M-Birr</h5>

</div>

</div>

<div>

<span class="inline-block w-4 h-4 border-2 border-green-500 rounded-full payment-


radio"></span>

</div>

</div>

</div>

<!-- Selected Payment Details -->

<div id="selectedPaymentDetails" class="hidden bg-gradient-to-r from-green-50 to-blue-50


p-6 rounded-xl border-2 border-green-400">

<h5 class="text-lg font-bold text-green-900 mb-4 text-center">✅Selected Payment


Method</h5>

<div id="paymentDetailsContent" class="text-center">

<!-- Payment details will be inserted here -->


</div>

<div class="mt-4 p-3 bg-yellow-100 border border-yellow-400 rounded-lg">

<p class="text-sm text-yellow-800 text-center font-semibold">

📸 Please pay exactly 5,000 ETB to the selected account above

</p>

</div>

</div>

<!-- Instructions -->

<div class="mt-4 text-center">

<p class="text-sm text-gray-600">📸 Click on any payment method above to select it</p>

</div>

</div>

<!-- Upload Section -->

<div class="mb-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-300


rounded-xl">

<h4 class="text-base font-bold text-blue-900 mb-3 flex items-center">

<span class="text-2xl mr-2">📸</span>

Step 3: Upload Screenshot

</h4>

<div class="space-y-3">

<input type="file" name="paymentProof" accept="image/*" required class="w-full px-4


py-4 border-2 border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500
file:mr-4 file:py-3 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-bold file:bg-blue-100
file:text-blue-800 hover:file:bg-blue-200 transition-all">
<!-- Preview Area -->

<div id="imagePreview" class="hidden mt-4 p-4 bg-white border-2 border-green-300


rounded-lg">

<p class="text-green-800 font-semibold mb-2">✅Screenshot Preview:</p>

<img id="previewImg" src="" alt="Payment Screenshot" class="max-w-full h-48 object-


contain border rounded-lg">

<p class="text-xs text-green-600 mt-2">Screenshot uploaded successfully!</p>

</div>

</div>

</div>

<!-- Requirements Checklist -->

<div class="p-4 bg-gray-100 rounded-lg">

<h5 class="font-semibold text-gray-800 mb-2">✅Screenshot Requirements:</h5>

<ul class="text-sm text-gray-700 space-y-1">

<li>• Must show successful payment of exactly 5,000 ETB</li>

<li>• Must show recipient account number (1234567890)</li>

<li>• Must show transaction date and time</li>

<li>• Image must be clear and readable</li>

<li>• Accepted formats: JPG, PNG (max 5MB)</li>

</ul>

</div>

</div>

<!-- Submit Buttons -->

<div id="initialSubmit">
<button type="button" onclick="showPaymentSection()" class="w-full bg-blue-600 text-white
py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">

Continue to Payment Details

</button>

</div>

<div id="finalSubmit" class="hidden">

<button type="submit" class="w-full bg-green-600 text-white py-3 rounded-lg font-semibold


hover:bg-green-700 transition-colors">

Submit Request with Payment Proof

</button>

</div>

</form>

<button onclick="closeModal('propertyModal')" class="mt-4 w-full text-gray-600 hover:text-gray-


800">

Cancel

</button>

</div>

</div>

<script>

let currentUser = null;

// Email validation functions

function isValidEmail(email) {

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;


return emailRegex.test(email);

async function checkGmailExists(email) {

// This is a simplified check - in a real application, you would use a proper email validation service

// For demonstration purposes, we'll simulate an API call with enhanced fake detection

try {

// Simulate API delay

await new Promise(resolve => setTimeout(resolve, 1500));

// Basic Gmail format validation

if (!email.toLowerCase().endsWith('@gmail.com')) {

return { exists: false, reason: 'Not a Gmail address' };

const localPart = email.split('@')[0].toLowerCase();

// Enhanced fake Gmail detection patterns

const fakePatterns = [

{ pattern: /^[0-9]+$/, reason: 'Gmail addresses cannot contain only numbers' },

{ pattern: /^.{1,2}$/, reason: 'Gmail address is too short (minimum 3 characters)' },

{ pattern: /^.{31,}$/, reason: 'Gmail address is too long (maximum 30 characters)' },

{ pattern: /[.]{2,}/, reason: 'Gmail addresses cannot have consecutive dots' },

{ pattern: /^[.]|[.]$/, reason: 'Gmail addresses cannot start or end with a dot' },

{ pattern: /[^a-z0-9._]/, reason: 'Gmail addresses can only contain letters, numbers, dots, and
underscores' },
{ pattern: /^(test|fake|dummy|example|sample|temp|temporary)/, reason: 'This appears
to be a test or fake email address' },

{ pattern: /^(admin|root|support|info|contact|noreply|no-reply)$/, reason: 'This appears to


be a system or generic email address' },

{ pattern: /^[a-z]\1{2,}/, reason: 'Gmail addresses cannot have more than 2 consecutive
identical characters' },

{ pattern: /^(qwerty|asdf|zxcv|1234|abcd|password|login)/, reason: 'This appears to be a


fake or test email pattern' }

];

// Check against fake patterns

for (let check of fakePatterns) {

if (check.pattern.test(localPart)) {

return { exists: false, reason: check.reason };

// Simulate checking against a database of known fake/disposable emails

const knownFakeEmails = [

'[email protected]',

'[email protected]',

'[email protected]',

'[email protected]',

'[email protected]',

'[email protected]',

'[email protected]',

'[email protected]'
];

if (knownFakeEmails.includes(email.toLowerCase())) {

return { exists: false, reason: 'This email address is known to be fake or temporary' };

// Simulate random validation failures for demonstration (10% chance)

// In production, this would be actual email verification

if (Math.random() < 0.1) {

return { exists: false, reason: 'This Gmail address does not exist or is inactive' };

// If all checks pass, consider it valid

return { exists: true, reason: 'Email appears to be valid' };

} catch (error) {

console.error('Email validation error:', error);

// If validation service fails, allow the email (don't block user)

return { exists: true, reason: 'Validation service unavailable, proceeding' };

// Check if user is logged in on page load

window.addEventListener('load', function() {

const savedUser = localStorage.getItem('currentUser');


if (savedUser) {

currentUser = JSON.parse(savedUser);

showMainWebsite();

// Initialize scroll animations

initScrollAnimations();

initScrollProgress();

animateCounters();

});

// Scroll animations

function initScrollAnimations() {

const observerOptions = {

threshold: 0.1,

rootMargin: '0px 0px -50px 0px'

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

});

}, observerOptions);
// Observe all animated elements

document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in').forEach(el => {

observer.observe(el);

});

// Scroll progress indicator

function initScrollProgress() {

window.addEventListener('scroll', () => {

const scrolled = (window.scrollY / (document.documentElement.scrollHeight -


window.innerHeight)) * 100;

document.getElementById('scrollIndicator').style.width = scrolled + '%';

// Show/hide quick actions based on scroll

const quickActions = document.getElementById('quickActions');

if (window.scrollY > 300) {

quickActions.style.display = 'flex';

} else {

quickActions.style.display = 'none';

});

// Animate counters

function animateCounters() {
const counters = document.querySelectorAll('.counter');

const speed = 200;

counters.forEach(counter => {

const updateCount = () => {

const target = +counter.getAttribute('data-target') || +counter.innerText.replace(/,/g, '');

const count = +counter.innerText.replace(/,/g, '');

const inc = target / speed;

if (count < target) {

counter.innerText = Math.ceil(count + inc).toLocaleString();

setTimeout(updateCount, 1);

} else {

counter.innerText = target.toLocaleString();

};

updateCount();

});

// Property filtering

function filterProperties(category) {

const properties = document.querySelectorAll('[data-category]');

const filterBtns = document.querySelectorAll('.filter-btn');


// Update button states

filterBtns.forEach(btn => {

btn.classList.remove('active', 'bg-blue-600', 'text-white');

btn.classList.add('bg-gray-200', 'text-gray-700');

});

event.target.classList.add('active', 'bg-blue-600', 'text-white');

event.target.classList.remove('bg-gray-200', 'text-gray-700');

// Filter properties with animation

properties.forEach((property, index) => {

property.style.display = 'none';

property.classList.remove('visible');

setTimeout(() => {

if (category === 'all' || property.dataset.category === category) {

property.style.display = 'block';

setTimeout(() => {

property.classList.add('visible');

}, index * 100);

}, 100);

});

}
// Scroll to top

function scrollToTop() {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Authentication functions

function showLoginTab() {

document.getElementById('loginForm').classList.remove('hidden');

document.getElementById('registerForm').classList.add('hidden');

document.getElementById('loginTab').classList.add('text-blue-600', 'border-b-2', 'border-blue-


600');

document.getElementById('loginTab').classList.remove('text-gray-500');

document.getElementById('registerTab').classList.add('text-gray-500');

document.getElementById('registerTab').classList.remove('text-blue-600', 'border-b-2', 'border-


blue-600');

function showRegisterTab() {

document.getElementById('registerForm').classList.remove('hidden');

document.getElementById('loginForm').classList.add('hidden');

document.getElementById('registerTab').classList.add('text-blue-600', 'border-b-2', 'border-blue-


600');

document.getElementById('registerTab').classList.remove('text-gray-500');

document.getElementById('loginTab').classList.add('text-gray-500');
document.getElementById('loginTab').classList.remove('text-blue-600', 'border-b-2', 'border-blue-
600');

function showMainWebsite() {

document.getElementById('authPage').classList.add('hidden');

document.getElementById('mainWebsite').classList.remove('hidden');

document.getElementById('navWelcomeUser').textContent = `Welcome, ${currentUser.name}`;

function showDashboard() {

document.getElementById('mainWebsite').classList.add('hidden');

document.getElementById('clientDashboard').classList.remove('hidden');

document.getElementById('welcomeUser').textContent = `Welcome, ${currentUser.name}`;

loadUserListings(currentUser.email);

loadUserRequests(currentUser.email);

function backToWebsite() {

document.getElementById('clientDashboard').classList.add('hidden');

document.getElementById('mainWebsite').classList.remove('hidden');

function logout() {

localStorage.removeItem('currentUser');

currentUser = null;
document.getElementById('mainWebsite').classList.add('hidden');

document.getElementById('clientDashboard').classList.add('hidden');

document.getElementById('authPage').classList.remove('hidden');

// Reset forms

document.getElementById('loginForm').reset();

document.getElementById('registerForm').reset();

showLoginTab();

function loadUserListings(userEmail) {

const listings = JSON.parse(localStorage.getItem('propertyListings') || '[]');

const userListings = listings.filter(listing => listing.email === userEmail);

const container = document.getElementById('userListings');

if (userListings.length === 0) {

container.innerHTML = '<p class="text-gray-500">No properties listed yet.</p>';

} else {

container.innerHTML = userListings.map(listing => `

<div class="border border-gray-200 rounded-lg p-4">

<h4 class="font-semibold text-gray-900">${listing.propertyType}</h4>

<p class="text-sm text-gray-600">Location: ${listing.location}</p>

<p class="text-sm text-gray-600">Price: ${parseInt(listing.price).toLocaleString()} ETB</p>

<p class="text-xs text-gray-500">Listed: ${new Date(listing.date).toLocaleDateString()}</p>

<span class="inline-block mt-2 px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-


full">${listing.status}</span>
</div>

`).join('');

function loadUserRequests(userEmail) {

const requests = JSON.parse(localStorage.getItem('propertyRequests') || '[]');

const userRequests = requests.filter(request => request.customerEmail === userEmail);

const container = document.getElementById('userRequests');

if (userRequests.length === 0) {

container.innerHTML = '<p class="text-gray-500">No property requests yet.</p>';

} else {

container.innerHTML = userRequests.map(request => `

<div class="border border-gray-200 rounded-lg p-4">

<h4 class="font-semibold text-gray-900">${request.propertyName}</h4>

<p class="text-sm text-gray-600">Status: ${request.status}</p>

${request.paymentProofFile ? `<p class="text-xs text-green-600">✓ Payment proof


uploaded: ${request.paymentProofFile}</p>` : ''}

<p class="text-xs text-gray-500">Requested: ${new


Date(request.date).toLocaleDateString()}</p>

<span class="inline-block mt-2 px-2 py-1 ${request.status === 'Payment Verification


Pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'} text-xs rounded-
full">${request.status}</span>

</div>

`).join('');

}
}

// Navigation functions with smooth scrolling

function scrollToProperties() {

document.getElementById('properties').scrollIntoView({

behavior: 'smooth',

block: 'start'

});

function showContactForm() {

document.getElementById('contact').scrollIntoView({

behavior: 'smooth',

block: 'start'

});

// Add smooth scrolling for all navigation links

document.addEventListener('DOMContentLoaded', function() {

// Handle navigation menu clicks

document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

const targetId = this.getAttribute('href').substring(1);

const targetElement = document.getElementById(targetId);


if (targetElement) {

targetElement.scrollIntoView({

behavior: 'smooth',

block: 'start'

});

});

});

// Enable smooth scrolling for the entire page

document.documentElement.style.scrollBehavior = 'smooth';

});

// Modal functions

function showSellModal() {

document.getElementById('sellModal').classList.remove('hidden');

document.getElementById('sellModal').classList.add('flex');

function requestProperty(propertyName, price) {

document.getElementById('propertyDetails').innerHTML = `

<strong>${propertyName}</strong><br>

Price: ${price}

`;

document.getElementById('propertyModal').classList.remove('hidden');
document.getElementById('propertyModal').classList.add('flex');

function sellSimilarProperty(propertyType) {

const sellModal = document.getElementById('sellModal');

const propertyTypeSelect = sellModal.querySelector('select');

const typeMapping = {

'Luxury Villa': 'Villa',

'Modern Apartment': 'Apartment/Condo',

'Commercial Building': 'Commercial Building',

'Commercial Land': 'Land/Plot',

'Family House': 'Residential House',

'Premium Luxury Vehicle': 'Luxury Vehicle'

};

if (propertyType === 'Premium Luxury Vehicle') {

const existingOption = Array.from(propertyTypeSelect.options).find(option => option.value ===


'Luxury Vehicle');

if (!existingOption) {

const newOption = document.createElement('option');

newOption.value = 'Luxury Vehicle';

newOption.textContent = 'Luxury Vehicle';

propertyTypeSelect.appendChild(newOption);

}
propertyTypeSelect.value = typeMapping[propertyType] || propertyType;

sellModal.classList.remove('hidden');

sellModal.classList.add('flex');

function closeModal(modalId) {

document.getElementById(modalId).classList.add('hidden');

document.getElementById(modalId).classList.remove('flex');

// Form submission handlers

document.getElementById('loginForm').addEventListener('submit', async function(e) {

e.preventDefault();

const formData = new FormData(this);

const email = formData.get('loginEmail');

const password = formData.get('loginPassword');

// Show loading state

const submitBtn = this.querySelector('button[type="submit"]');

const originalText = submitBtn.textContent;

submitBtn.textContent = 'Verifying Email...';

submitBtn.disabled = true;

try {
// Validate email format first

if (!isValidEmail(email)) {

throw new Error('Please enter a valid email address.');

// Check if Gmail exists (for Gmail addresses only)

if (email.toLowerCase().includes('@gmail.com')) {

const validation = await checkGmailExists(email);

if (!validation.exists) {

throw new Error(`Email validation failed: ${validation.reason}`);

// Check user credentials

const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]');

const user = users.find(u => u.email === email && u.password === password);

if (user) {

currentUser = user;

localStorage.setItem('currentUser', JSON.stringify(user));

showMainWebsite();

} else {

throw new Error('Invalid email or password. Please try again or register a new account.');

}
} catch (error) {

alert(error.message);

} finally {

// Reset button state

submitBtn.textContent = originalText;

submitBtn.disabled = false;

});

document.getElementById('registerForm').addEventListener('submit', async function(e) {

e.preventDefault();

const formData = new FormData(this);

const userData = {

name: formData.get('registerName'),

email: formData.get('registerEmail'),

phone: formData.get('registerPhone'),

password: formData.get('registerPassword'),

registeredDate: new Date().toISOString()

};

// Show loading state

const submitBtn = this.querySelector('button[type="submit"]');

const originalText = submitBtn.textContent;

submitBtn.textContent = 'Verifying Email...';

submitBtn.disabled = true;
try {

// Validate email format first

if (!isValidEmail(userData.email)) {

throw new Error('Please enter a valid email address.');

// Check if Gmail exists (for Gmail addresses only)

if (userData.email.toLowerCase().includes('@gmail.com')) {

const validation = await checkGmailExists(userData.email);

if (!validation.exists) {

throw new Error(`Gmail validation failed: ${validation.reason}`);

// Check if account already exists

const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]');

if (users.find(u => u.email === userData.email)) {

throw new Error('An account with this email already exists. Please login instead.');

// Create account

users.push(userData);

localStorage.setItem('registeredUsers', JSON.stringify(users));

currentUser = userData;
localStorage.setItem('currentUser', JSON.stringify(userData));

alert('Account created successfully! Welcome to Prime Properties.');

showMainWebsite();

} catch (error) {

alert(error.message);

} finally {

// Reset button state

submitBtn.textContent = originalText;

submitBtn.disabled = false;

});

document.getElementById('sellForm').addEventListener('submit', function(e) {

e.preventDefault();

const formData = new FormData(this);

const listingData = {

ownerName: formData.get('ownerName'),

phone: formData.get('phone'),

email: formData.get('email'),

propertyType: formData.get('propertyType'),

location: formData.get('location'),

price: formData.get('price'),

videoFile: formData.get('video').name,
date: new Date().toISOString(),

status: 'Pending Review'

};

const listings = JSON.parse(localStorage.getItem('propertyListings') || '[]');

listings.push(listingData);

localStorage.setItem('propertyListings', JSON.stringify(listings));

alert('Property listing submitted successfully! Our team will contact you within 24 hours for a free
property evaluation and to discuss our competitive 1.6% commission structure.');

closeModal('sellModal');

this.reset();

});

// Show payment section after client details

function showPaymentSection() {

const form = document.getElementById('propertyRequestForm');

const formData = new FormData(form);

// Validate required fields first

const customerName = formData.get('customerName');

const customerPhone = formData.get('customerPhone');

const customerEmail = formData.get('customerEmail');

if (!customerName || !customerPhone || !customerEmail) {

alert('Please fill in all your details before proceeding to payment.');


return;

// Validate email format

if (!isValidEmail(customerEmail)) {

alert('Please enter a valid email address.');

return;

// Show payment section and hide initial submit button

document.getElementById('paymentSection').classList.remove('hidden');

document.getElementById('initialSubmit').classList.add('hidden');

document.getElementById('finalSubmit').classList.remove('hidden');

// Scroll to payment section

document.getElementById('paymentSection').scrollIntoView({

behavior: 'smooth',

block: 'start'

});

// Payment method selection function

function selectPaymentMethod(method) {

// Remove selected class from all options

document.querySelectorAll('.payment-option').forEach(option => {
option.classList.remove('selected');

});

// Add selected class to clicked option

document.querySelector(`[data-method="${method}"]`).classList.add('selected');

// Show selected payment details

const detailsSection = document.getElementById('selectedPaymentDetails');

const detailsContent = document.getElementById('paymentDetailsContent');

let paymentDetails = '';

switch(method) {

case 'bank':

paymentDetails = `

<div class="space-y-3">

<div class="text-2xl">📸</div>

<h6 class="text-xl font-bold text-blue-900">Bank Transfer Details</h6>

<div class="bg-white p-4 rounded-lg border-2 border-blue-300">

<div class="space-y-4 text-sm">

<div>

<p class="font-semibold text-gray-700">Bank Name:</p>

<p class="text-lg font-bold text-blue-800">Commercial Bank of Ethiopia</p>

</div>

<div>
<p class="font-semibold text-gray-700">Account Number:</p>

<p class="text-xl font-mono font-bold text-blue-800">1234567890</p>

</div>

<div>

<p class="font-semibold text-gray-700">Account Name:</p>

<p class="text-lg font-bold text-blue-800">Prime Properties Ethiopia</p>

</div>

<div>

<p class="font-semibold text-gray-700">Amount:</p>

<p class="text-xl font-bold text-red-600">5,000 ETB</p>

</div>

</div>

</div>

</div>

`;

break;

case 'telebirr':

paymentDetails = `

<div class="space-y-3">

<div class="text-2xl">📸</div>

<h6 class="text-xl font-bold text-orange-900">Telebirr Payment Details</h6>

<div class="bg-white p-4 rounded-lg border-2 border-orange-300">

<div class="space-y-4 text-sm">

<div>

<p class="font-semibold text-gray-700">Service:</p>


<p class="text-lg font-bold text-orange-800">Telebirr Mobile Payment</p>

</div>

<div>

<p class="font-semibold text-gray-700">Phone Number:</p>

<p class="text-xl font-mono font-bold text-orange-800">+251-911-123456</p>

</div>

<div>

<p class="font-semibold text-gray-700">Recipient Name:</p>

<p class="text-lg font-bold text-orange-800">Prime Properties</p>

</div>

<div>

<p class="font-semibold text-gray-700">Amount:</p>

<p class="text-xl font-bold text-red-600">5,000 ETB</p>

</div>

</div>

</div>

</div>

`;

break;

case 'cbebirr':

paymentDetails = `

<div class="space-y-3">

<div class="text-2xl">📸</div>

<h6 class="text-xl font-bold text-blue-900">CBE Birr Payment Details</h6>

<div class="bg-white p-4 rounded-lg border-2 border-blue-300">


<div class="space-y-4 text-sm">

<div>

<p class="font-semibold text-gray-700">Service:</p>

<p class="text-lg font-bold text-blue-800">CBE Birr Digital Wallet</p>

</div>

<div>

<p class="font-semibold text-gray-700">Phone Number:</p>

<p class="text-xl font-mono font-bold text-blue-800">+251-911-123456</p>

</div>

<div>

<p class="font-semibold text-gray-700">Recipient Name:</p>

<p class="text-lg font-bold text-blue-800">Prime Properties</p>

</div>

<div>

<p class="font-semibold text-gray-700">Amount:</p>

<p class="text-xl font-bold text-red-600">5,000 ETB</p>

</div>

</div>

</div>

</div>

`;

break;

case 'mbirr':

paymentDetails = `

<div class="space-y-3">
<div class="text-2xl">📸</div>

<h6 class="text-xl font-bold text-green-900">M-Birr Payment Details</h6>

<div class="bg-white p-4 rounded-lg border-2 border-green-300">

<div class="space-y-4 text-sm">

<div>

<p class="font-semibold text-gray-700">Service:</p>

<p class="text-lg font-bold text-green-800">M-Birr Mobile Money</p>

</div>

<div>

<p class="font-semibold text-gray-700">Phone Number:</p>

<p class="text-xl font-mono font-bold text-green-800">+251-911-123456</p>

</div>

<div>

<p class="font-semibold text-gray-700">Recipient Name:</p>

<p class="text-lg font-bold text-green-800">Prime Properties</p>

</div>

<div>

<p class="font-semibold text-gray-700">Amount:</p>

<p class="text-xl font-bold text-red-600">5,000 ETB</p>

</div>

</div>

</div>

</div>

`;

break;
}

detailsContent.innerHTML = paymentDetails;

detailsSection.classList.remove('hidden');

// Scroll to selected details

setTimeout(() => {

detailsSection.scrollIntoView({

behavior: 'smooth',

block: 'center'

});

}, 300);

// Image preview functionality

document.addEventListener('change', function(e) {

if (e.target.name === 'paymentProof') {

const file = e.target.files[0];

const preview = document.getElementById('imagePreview');

const previewImg = document.getElementById('previewImg');

if (file) {

// Validate file type

if (!file.type.startsWith('image/')) {

alert('Please upload an image file (JPG, PNG, etc.)');


e.target.value = '';

preview.classList.add('hidden');

return;

// Validate file size (max 5MB)

if (file.size > 5 * 1024 * 1024) {

alert('File is too large. Please upload an image smaller than 5MB.');

e.target.value = '';

preview.classList.add('hidden');

return;

// Show preview

const reader = new FileReader();

reader.onload = function(e) {

previewImg.src = e.target.result;

preview.classList.remove('hidden');

};

reader.readAsDataURL(file);

} else {

preview.classList.add('hidden');

});
document.getElementById('propertyRequestForm').addEventListener('submit', function(e) {

e.preventDefault();

const formData = new FormData(this);

const propertyName =
document.getElementById('propertyDetails').querySelector('strong').textContent;

const paymentProof = formData.get('paymentProof');

// Validate payment proof file

if (!paymentProof || paymentProof.size === 0) {

alert('Please upload a screenshot of your payment proof before submitting.');

return;

// Check file size (max 5MB)

if (paymentProof.size > 5 * 1024 * 1024) {

alert('Payment proof file is too large. Please upload an image smaller than 5MB.');

return;

// Check file type

if (!paymentProof.type.startsWith('image/')) {

alert('Please upload an image file (JPG, PNG, etc.) for payment proof.');

return;

}
const requestData = {

customerName: formData.get('customerName'),

customerPhone: formData.get('customerPhone'),

customerEmail: formData.get('customerEmail'),

propertyName: propertyName,

paymentProofFile: paymentProof.name,

paymentProofSize: paymentProof.size,

date: new Date().toISOString(),

status: 'Payment Verification Pending'

};

const requests = JSON.parse(localStorage.getItem('propertyRequests') || '[]');

requests.push(requestData);

localStorage.setItem('propertyRequests', JSON.stringify(requests));

let requestCount = document.getElementById('requestCount');

let currentCount = parseInt(requestCount.textContent.replace(',', ''));

requestCount.textContent = (currentCount + 1).toLocaleString();

alert('Property request submitted successfully with payment proof! Our team will verify your
payment within 24 hours and then contact you to arrange property viewing. You will receive a
confirmation call once payment is verified.');

closeModal('propertyModal');

this.reset();

// Reset form state - hide payment section and preview

document.getElementById('paymentSection').classList.add('hidden');
document.getElementById('initialSubmit').classList.remove('hidden');

document.getElementById('finalSubmit').classList.add('hidden');

document.getElementById('imagePreview').classList.add('hidden');

});

document.getElementById('contactForm').addEventListener('submit', function(e) {

e.preventDefault();

let customerCount = document.getElementById('customerCount');

let currentCount = parseInt(customerCount.textContent.replace(',', ''));

customerCount.textContent = (currentCount + 1).toLocaleString();

alert('Thank you for your message! We will contact you within 24 hours to discuss your property
needs.');

this.reset();

});

// Close modals when clicking outside

window.addEventListener('click', function(e) {

if (e.target.classList.contains('bg-black')) {

closeModal('propertyModal');

closeModal('sellModal');

});

</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var
d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'973cd8b6d04ed981',t:'MTc1NT
k3NTU2MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-
cgi/challenge-
platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getEleme
ntsByTagName('head')[0].appendChild(d)}}if(document.body){var
a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.st
yle.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==d
ocument.readyState)c();else
if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var
e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loadin
g'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>

</html>

You might also like