|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<title>ARAZIM</title> |
|
<link |
|
rel="shortcut icon" |
|
type="image/png" |
|
href="../static/images/logos/Logo.png" |
|
/> |
|
<link rel="stylesheet" href="../static/styles/styles.min.css" /> |
|
<link |
|
rel="stylesheet" |
|
href="../static/styles/icons/tabler-icons/tabler-icons.css" |
|
/> |
|
<link |
|
rel="stylesheet" |
|
href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" |
|
/> |
|
</head> |
|
<style> |
|
#calendar { |
|
width: 300px; |
|
} |
|
#calendar_weekdays div { |
|
display: inline-block; |
|
vertical-align: top; |
|
} |
|
#calendar_content, |
|
#calendar_weekdays, |
|
#calendar_header { |
|
position: relative; |
|
width: 300px; |
|
overflow: hidden; |
|
float: left; |
|
z-index: 10; |
|
} |
|
#calendar_weekdays div, |
|
#calendar_content div { |
|
width: 40px; |
|
height: 40px; |
|
overflow: hidden; |
|
text-align: center; |
|
background-color: #ffffff; |
|
color: #545454; |
|
font-weight: 700; |
|
} |
|
#calendar_content { |
|
-webkit-border-radius: 0px 0px 12px 12px; |
|
-moz-border-radius: 0px 0px 12px 12px; |
|
border-radius: 0px 0px 12px 12px; |
|
} |
|
#calendar_content div { |
|
float: left; |
|
} |
|
#calendar_content div:hover { |
|
background-color: #f8f8f8; |
|
} |
|
#calendar_content div.blank { |
|
background-color: #e8e8e8; |
|
} |
|
#calendar_header, |
|
#calendar_content div.today { |
|
zoom: 1; |
|
filter: alpha(opacity=70); |
|
opacity: 0.7; |
|
} |
|
#calendar_content div.today { |
|
color: #ffffff; |
|
} |
|
#calendar_header { |
|
width: 100%; |
|
height: 37px; |
|
text-align: center; |
|
background-color: #7bcfff; |
|
padding: 18px 0; |
|
-webkit-border-radius: 12px 12px 0px 0px; |
|
-moz-border-radius: 12px 12px 0px 0px; |
|
border-radius: 12px 12px 0px 0px; |
|
} |
|
#calendar_header h1 { |
|
font-size: 1.5em; |
|
color: #ffffff; |
|
float: left; |
|
width: 70%; |
|
} |
|
i[class^="icon-chevron"] { |
|
color: #ffffff; |
|
float: left; |
|
width: 15%; |
|
margin-top: -20px; |
|
border-radius: 50%; |
|
} |
|
|
|
.scrollable-container { |
|
height: 500px; |
|
overflow: auto; |
|
border: 1px solid rgb(199, 199, 199); |
|
border-radius: 3%; |
|
padding: 18px; |
|
} |
|
</style> |
|
<body> |
|
|
|
<div |
|
class="page-wrapper" |
|
id="main-wrapper" |
|
data-layout="vertical" |
|
data-navbarbg="skin6" |
|
data-sidebartype="full" |
|
data-sidebar-position="fixed" |
|
data-header-position="fixed" |
|
> |
|
|
|
<aside |
|
class="left-sidebar" |
|
style="border-right: 1px solid rgb(199, 199, 199)" |
|
> |
|
|
|
<div> |
|
<div |
|
class="brand-logo d-flex align-items-center justify-content-between" |
|
> |
|
<a |
|
href="{{ url_for('regular_user') }}" |
|
class="text-nowrap logo-img" |
|
> |
|
<img src="../static/images/logos/Logo.png" width="180" alt="" /> |
|
</a> |
|
<div |
|
class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" |
|
id="sidebarCollapse" |
|
> |
|
<i class="ti ti-x fs-8"></i> |
|
</div> |
|
</div> |
|
|
|
<nav class="sidebar-nav scroll-sidebar" data-simplebar=""> |
|
<ul id="sidebarnav"> |
|
<li class="nav-small-cap"> |
|
<i class="ti ti-dots nav-small-cap-icon fs-4"></i> |
|
<span class="hide-menu">Home</span> |
|
</li> |
|
<li class="sidebar-item"> |
|
<a |
|
class="sidebar-link" |
|
href="{{ url_for('regular_user') }}" |
|
aria-expanded="false" |
|
> |
|
<span> |
|
<i class="ti ti-layout-dashboard"></i> |
|
</span> |
|
<span class="hide-menu">Dashboard</span> |
|
</a> |
|
</li> |
|
<li class="nav-small-cap"> |
|
<i class="ti ti-dots nav-small-cap-icon fs-4"></i> |
|
<span class="hide-menu">Quick Links</span> |
|
</li> |
|
<li class="sidebar-item"> |
|
<a |
|
class="sidebar-link" |
|
href="{{ url_for('buyer') }}" |
|
aria-expanded="false" |
|
> |
|
<span> |
|
<i class="ti ti-article"></i> |
|
</span> |
|
<span class="hide-menu">Buyer</span> |
|
</a> |
|
</li> |
|
<li class="sidebar-item"> |
|
<a |
|
class="sidebar-link" |
|
href="{{ url_for('seller') }}" |
|
aria-expanded="false" |
|
> |
|
<span> |
|
<i class="ti ti-alert-circle"></i> |
|
</span> |
|
<span class="hide-menu">Seller</span> |
|
</a> |
|
</li> |
|
<li class="sidebar-item"> |
|
<a class="sidebar-link" href="#" aria-expanded="false"> |
|
<span> |
|
<i class="ti ti-file-description"></i> |
|
</span> |
|
<span class="hide-menu">Exclusivity</span> |
|
</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
|
|
</div> |
|
|
|
</aside> |
|
|
|
|
|
<div class="body-wrapper"> |
|
|
|
<header |
|
class="app-header" |
|
style="border-bottom: 1px solid rgb(199, 199, 199); z-index: 999" |
|
> |
|
<nav class="navbar navbar-expand-lg navbar-light"> |
|
<ul class="navbar-nav"> |
|
<li class="nav-item d-block d-xl-none"> |
|
<a |
|
class="nav-link sidebartoggler nav-icon-hover" |
|
id="headerCollapse" |
|
href="javascript:void(0)" |
|
> |
|
<i class="ti ti-menu-2"></i> |
|
</a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link nav-icon-hover" href="javascript:void(0)"> |
|
<i class="ti ti-bell-ringing"></i> |
|
<div class="notification bg-primary rounded-circle"></div> |
|
</a> |
|
</li> |
|
</ul> |
|
<div |
|
class="navbar-collapse justify-content-end px-0" |
|
id="navbarNav" |
|
> |
|
<ul |
|
class="navbar-nav flex-row ms-auto align-items-center justify-content-end" |
|
> |
|
<a href="#" target="_blank" class="btn btn-primary" |
|
>Welcome, {{ user_name }}!</a |
|
> |
|
<li class="nav-item dropdown"> |
|
<a |
|
class="nav-link nav-icon-hover" |
|
href="javascript:void(0)" |
|
id="drop2" |
|
data-bs-toggle="dropdown" |
|
aria-expanded="false" |
|
> |
|
<img |
|
src="../static/images/profile/user-1.jpg" |
|
alt="" |
|
width="35" |
|
height="35" |
|
class="rounded-circle" |
|
/> |
|
</a> |
|
<div |
|
class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" |
|
aria-labelledby="drop2" |
|
> |
|
<div class="message-body"> |
|
<a |
|
href="javascript:void(0)" |
|
class="d-flex align-items-center gap-2 dropdown-item" |
|
> |
|
<i class="ti ti-user fs-6"></i> |
|
<p class="mb-0 fs-3">My Profile</p> |
|
</a> |
|
<a |
|
href="javascript:void(0)" |
|
class="d-flex align-items-center gap-2 dropdown-item" |
|
> |
|
<i class="ti ti-mail fs-6"></i> |
|
<p class="mb-0 fs-3">My Account</p> |
|
</a> |
|
<a |
|
href="javascript:void(0)" |
|
class="d-flex align-items-center gap-2 dropdown-item" |
|
> |
|
<i class="ti ti-list-check fs-6"></i> |
|
<p class="mb-0 fs-3">My Task</p> |
|
</a> |
|
<a |
|
href="{{ url_for('logout') }}" |
|
class="btn btn-outline-primary mx-3 mt-2 d-block" |
|
>Logout</a |
|
> |
|
</div> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</nav> |
|
</header> |
|
|
|
<div class="container-fluid"> |
|
|
|
<div class="row"> |
|
<div class="col-lg-8 d-flex align-items-strech"> |
|
<div class="card w-100"> |
|
<div class="card-body"> |
|
<div |
|
class="d-sm-flex d-block align-items-center justify-content-between mb-9" |
|
> |
|
<div class="mb-3 mb-sm-0"> |
|
<h5 class="card-title fw-semibold">Posts Overview</h5> |
|
</div> |
|
</div> |
|
<div id="chart1"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-4"> |
|
<div class="row"> |
|
<div class="col-lg-12"> |
|
|
|
<div class="card overflow-hidden"> |
|
<div class="card-body p-4"> |
|
<h5 class="card-title mb-9 fw-semibold"> |
|
Post Information |
|
</h5> |
|
<div class="row align-items-center"> |
|
<div class="col-8"> |
|
<h4 class="fw-semibold mb-3">Donut Graph</h4> |
|
<div class="d-flex align-items-center mb-3"> |
|
|
|
<p class="fs-3 mb-0"> |
|
Overall seller and buyer posts distribution in |
|
donut graph |
|
</p> |
|
</div> |
|
<div class="d-flex align-items-center"> |
|
<div class="me-4"> |
|
<span |
|
class="round-8 bg-primary rounded-circle me-2 d-inline-block" |
|
></span> |
|
<span class="fs-2">Seller</span> |
|
</div> |
|
<div> |
|
<span |
|
class="round-8 bg-secondary rounded-circle me-2 d-inline-block" |
|
></span> |
|
<span class="fs-2">Buyer</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-4"> |
|
<div class="d-flex justify-content-center"> |
|
<div id="breakup1"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-12"> |
|
|
|
<div class="card"> |
|
<div class="card-body"> |
|
<div class="row alig n-items-start"> |
|
<div class="col-8"> |
|
<h5 class="card-title mb-9 fw-semibold"> |
|
Line Graph Overview |
|
</h5> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="earning"></div> |
|
</div> |
|
<div id="earning"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="col-lg-6 d-flex align-items-stretch"> |
|
<div class="card w-100"> |
|
<div class="card-body p-4"> |
|
<div class="mb-4"> |
|
<h5 class="card-title fw-semibold">Calender</h5> |
|
</div> |
|
<div id="calendar"> |
|
<div id="calendar_header"> |
|
<i class="icon-chevron-left"></i> |
|
<h1></h1> |
|
<i class="icon-chevron-right"></i> |
|
</div> |
|
<div id="calendar_weekdays"></div> |
|
<div id="calendar_content"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-6 d-flex align-items-stretch"> |
|
<div class="card w-100"> |
|
<div class="card-body p-4"> |
|
<h5 class="card-title fw-semibold mb-4">About ARAZIM</h5> |
|
<div class="scrollable-container"> |
|
<h5>Introduction:</h5> |
|
<p> |
|
ARAZIM is a cutting-edge web application that |
|
revolutionizes the real estate industry by seamlessly |
|
connecting buyers and sellers, empowered by the latest |
|
advancements in artificial intelligence. Whether you're |
|
looking for your dream property or aiming to sell your |
|
estate at the best price, ARAZIM is here to provide you |
|
with an exceptional experience. |
|
</p> |
|
<h5>Key Features:</h5> |
|
<p></p> |
|
<h6>Smart Property Search:</h6> |
|
<p> |
|
ARAZIM harnesses the power of AI to deliver intelligent |
|
property search results. Buyers can specify their |
|
preferences, such as location, budget, property type, |
|
amenities, and more. Our AI algorithms analyze this data |
|
to present personalized and relevant listings, saving time |
|
and effort in finding the perfect property. |
|
</p> |
|
|
|
<h6>Property Valuation:</h6> |
|
<p> |
|
For sellers, ARAZIM offers an AI-driven property valuation |
|
tool. Our system leverages vast real estate data and |
|
market trends to accurately assess the value of your |
|
property. This ensures you get the best possible price |
|
when selling your estate. |
|
</p> |
|
|
|
<h6>Virtual Tours:</h6> |
|
<p> |
|
Experience properties like never before with our virtual |
|
tour feature. Buyers can explore properties from the |
|
comfort of their homes, gaining a comprehensive |
|
understanding of the layout and design before arranging a |
|
physical visit. |
|
</p> |
|
|
|
<h6>Intelligent Matchmaking:</h6> |
|
<p> |
|
ARAZIM employs AI to match buyers with the most suitable |
|
properties based on their preferences, lifestyle, and |
|
previous interactions. This streamlined approach enhances |
|
the chances of finding the right home for every buyer. |
|
</p> |
|
|
|
<h6>Real-Time Notifications:</h6> |
|
<p> |
|
Stay up-to-date with the latest listings and property |
|
developments. ARAZIM sends real-time notifications to both |
|
buyers and sellers, ensuring that no opportunity is |
|
missed. |
|
</p> |
|
|
|
<h6>Secure Communication:</h6> |
|
|
|
<p> |
|
Our platform provides a secure messaging system, allowing |
|
buyers and sellers to communicate efficiently and |
|
privately. Share essential details, negotiate terms, and |
|
finalize deals without any hassle. |
|
</p> |
|
|
|
<h6>Document Management:</h6> |
|
<p> |
|
ARAZIM simplifies the paperwork involved in real estate |
|
transactions. Upload, store, and access documents |
|
securely, ensuring a smooth and transparent process. |
|
</p> |
|
|
|
<h5>Benefits for Buyers:</h5> |
|
|
|
<h6>Efficiency:</h6> |
|
<p> |
|
Save time and energy with personalized property |
|
recommendations that match your preferences precisely. |
|
</p> |
|
<h6>Comprehensive Insights:</h6> |
|
<p> |
|
Access detailed property information, neighborhood |
|
statistics, and historical pricing trends to make informed |
|
decisions. |
|
</p> |
|
<h6>Convenience:</h6> |
|
<p> |
|
Explore properties virtually, reducing the need for |
|
unnecessary physical visits. |
|
</p> |
|
<h6>Tailored Experience:</h6> |
|
<p> |
|
Our AI ensures that you are presented with relevant |
|
options based on your unique requirements and lifestyle. |
|
</p> |
|
|
|
<h5>Benefits for Sellers:</h5> |
|
|
|
<h6>Accurate Valuation:</h6> |
|
<p> |
|
Receive an AI-powered property valuation, helping you |
|
determine the optimal listing price. |
|
</p> |
|
<h6>Wider Reach:</h6> |
|
<p> |
|
Showcase your property to a broad audience of potential |
|
buyers, reaching beyond traditional marketing channels. |
|
</p> |
|
<h6>Time Savings:</h6> |
|
<p> |
|
Automate tasks and streamline the selling process, leaving |
|
you with more time to focus on other priorities. |
|
</p> |
|
<h6>Competitive Edge:</h6> |
|
<p> |
|
Gain insights into the market to make strategic decisions |
|
that position your property competitively. |
|
</p> |
|
|
|
<h5>Security and Privacy:</h5> |
|
|
|
ARAZIM prioritizes the security and privacy of its users. |
|
Your data is encrypted and stored securely, ensuring that |
|
your personal information remains protected at all times. |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<script src="{{url_for('static', filename='jquery.min.js')}}"></script> |
|
<script src="{{url_for('static', filename='bootstrap.bundle.min.js')}}"></script> |
|
<script src="{{url_for('static', filename='sidebarmenu.js')}}"></script> |
|
<script src="{{url_for('static', filename='app.min.js')}}"></script> |
|
<script src="{{url_for('static', filename='simplebar.js')}}"></script> |
|
<script src="{{url_for('static', filename='sidebarmenu.js')}}"></script> |
|
<script src="{{url_for('static', filename='apexcharts.min.js')}}"></script> |
|
<script src="{{url_for('static', filename='dashboard.js')}}"></script> |
|
<script> |
|
|
|
async function getPostCounts() { |
|
const response = await fetch("/post_counts"); |
|
const data = await response.json(); |
|
return data; |
|
} |
|
|
|
|
|
async function createBarGraph() { |
|
const data = await getPostCounts(); |
|
|
|
|
|
const options = { |
|
chart: { |
|
type: "bar", |
|
toolbar: { |
|
show: true, |
|
}, |
|
downloadMenu: { |
|
|
|
csv: false, |
|
excel: false, |
|
svg: true, |
|
png: true, |
|
jpeg: true, |
|
pdf: true, |
|
}, |
|
}, |
|
colors: ["#5d87ff", "#64c7ff"], |
|
series: [ |
|
{ |
|
name: "Number of Posts", |
|
data: [data.seller_posts, data.buyer_posts], |
|
}, |
|
], |
|
xaxis: { |
|
categories: ["Seller", "Buyer"], |
|
}, |
|
plotOptions: { |
|
bar: { |
|
distributed: true, |
|
}, |
|
}, |
|
}; |
|
|
|
|
|
const chartContainer = document.getElementById("chart1"); |
|
|
|
|
|
if (chartContainer._chart) { |
|
chartContainer._chart.destroy(); |
|
} |
|
|
|
|
|
const chart = new ApexCharts(chartContainer, options); |
|
chart.render(); |
|
} |
|
|
|
|
|
createBarGraph(); |
|
</script> |
|
<script> |
|
|
|
async function getPostCounts() { |
|
const response = await fetch("/post_counts"); |
|
const data = await response.json(); |
|
return data; |
|
} |
|
|
|
|
|
async function createDonutChart() { |
|
const data = await getPostCounts(); |
|
|
|
|
|
const options = { |
|
chart: { |
|
type: "donut", |
|
width: "150", |
|
height: "150", |
|
}, |
|
series: [data.buyer_posts, data.seller_posts], |
|
labels: ["Buyer", "Seller"], |
|
colors: ["#5d87ff", "#64c7ff"], |
|
dataLabels: { |
|
enabled: false, |
|
formatter: function (val, opts) { |
|
return opts.w.config.series[opts.seriesIndex] + " posts"; |
|
}, |
|
}, |
|
legend: { |
|
show: false, |
|
}, |
|
}; |
|
|
|
|
|
const chartContainer = document.getElementById("breakup1"); |
|
|
|
|
|
if (chartContainer._chart) { |
|
chartContainer._chart.destroy(); |
|
} |
|
|
|
|
|
const chart = new ApexCharts(chartContainer, options); |
|
chart.render(); |
|
} |
|
|
|
|
|
createDonutChart(); |
|
</script> |
|
<script> |
|
$(function () { |
|
function c() { |
|
p(); |
|
var e = h(); |
|
var r = 0; |
|
var u = false; |
|
l.empty(); |
|
while (!u) { |
|
if (s[r] == e[0].weekday) { |
|
u = true; |
|
} else { |
|
l.append('<div class="blank"></div>'); |
|
r++; |
|
} |
|
} |
|
for (var c = 0; c < 42 - r; c++) { |
|
if (c >= e.length) { |
|
l.append('<div class="blank"></div>'); |
|
} else { |
|
var v = e[c].day; |
|
var m = g(new Date(t, n - 1, v)) |
|
? '<div class="today">' |
|
: "<div>"; |
|
l.append(m + "" + v + "</div>"); |
|
} |
|
} |
|
var y = o[n - 1]; |
|
a.css("background-color", y) |
|
.find("h1") |
|
.text(i[n - 1] + " " + t); |
|
f.find("div").css("color", y); |
|
l.find(".today").css("background-color", y); |
|
d(); |
|
} |
|
function h() { |
|
var e = []; |
|
for (var r = 1; r < v(t, n) + 1; r++) { |
|
e.push({ day: r, weekday: s[m(t, n, r)] }); |
|
} |
|
return e; |
|
} |
|
function p() { |
|
f.empty(); |
|
for (var e = 0; e < 7; e++) { |
|
f.append("<div>" + s[e].substring(0, 3) + "</div>"); |
|
} |
|
} |
|
function d() { |
|
var t; |
|
var n = $("#calendar").css("width", e + "px"); |
|
n.find((t = "#calendar_weekdays, #calendar_content")) |
|
.css("width", e + "px") |
|
.find("div") |
|
.css({ |
|
width: e / 7 + "px", |
|
height: e / 7 + "px", |
|
"line-height": e / 7 + "px", |
|
}); |
|
n.find("#calendar_header") |
|
.css({ height: e * (1 / 7) + "px" }) |
|
.find('i[class^="icon-chevron"]') |
|
.css("line-height", e * (1 / 7) + "px"); |
|
} |
|
function v(e, t) { |
|
return new Date(e, t, 0).getDate(); |
|
} |
|
function m(e, t, n) { |
|
return new Date(e, t - 1, n).getDay(); |
|
} |
|
function g(e) { |
|
return y(new Date()) == y(e); |
|
} |
|
function y(e) { |
|
return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate(); |
|
} |
|
function b() { |
|
var e = new Date(); |
|
t = e.getFullYear(); |
|
n = e.getMonth() + 1; |
|
} |
|
var e = 480; |
|
var t = 2013; |
|
var n = 9; |
|
var r = []; |
|
var i = [ |
|
"JANUARY", |
|
"FEBRUARY", |
|
"MARCH", |
|
"APRIL", |
|
"MAY", |
|
"JUNE", |
|
"JULY", |
|
"AUGUST", |
|
"SEPTEMBER", |
|
"OCTOBER", |
|
"NOVEMBER", |
|
"DECEMBER", |
|
]; |
|
var s = [ |
|
"Sunday", |
|
"Monday", |
|
"Tuesday", |
|
"Wednesday", |
|
"Thursday", |
|
"Friday", |
|
"Saturday", |
|
]; |
|
var o = [ |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
"#5d87ff", |
|
]; |
|
var u = $("#calendar"); |
|
var a = u.find("#calendar_header"); |
|
var f = u.find("#calendar_weekdays"); |
|
var l = u.find("#calendar_content"); |
|
b(); |
|
c(); |
|
a.find('i[class^="icon-chevron"]').on("click", function () { |
|
var e = $(this); |
|
var r = function (e) { |
|
n = e == "next" ? n + 1 : n - 1; |
|
if (n < 1) { |
|
n = 12; |
|
t--; |
|
} else if (n > 12) { |
|
n = 1; |
|
t++; |
|
} |
|
c(); |
|
}; |
|
if (e.attr("class").indexOf("left") != -1) { |
|
r("previous"); |
|
} else { |
|
r("next"); |
|
} |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|