intro-site/index.html

1595 lines
74 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hamekara</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/cubeportfolio.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/settings.css">
<link rel="stylesheet" type="text/css" href="css/bootsnav.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/pink.css">
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<style>
.btn.btn-white {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
transition: all 0.2s ease;
}
.btn.btn-white:hover {
background-color: #f2f2f2;
color: #000;
}
.top40 {
margin-top: 40px;
}
.image {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border-radius: 12px;
overflow: hidden;
margin: 16px;
transition: box-shadow 0.3s ease;
}
.image:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
#maxo_news {
background: #f7f7f7;
padding: 40px 0;
font-family: 'Tahoma', sans-serif;
}
.scrollable_videos {
display: flex;
overflow-x: auto;
gap: 20px;
padding: 20px 0;
}
.video_card {
flex: 0 0 auto;
width: 260px;
background: #fff;
border-radius: 12px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow */
transition: box-shadow 0.3s ease;
}
.video_card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}
.thumb_wrapper {
position: relative;
width: 100%;
cursor: pointer;
}
.video_thumb {
width: 100%;
display: block;
border-radius: 8px;
}
.play_icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
color: rgba(255, 255, 255, 0.8);
pointer-events: none;
}
.video_card video {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
border-radius: 8px;
object-fit: cover;
}
.video_caption {
padding: 10px;
font-size: 14px;
color: #333;
font-weight: bold;
text-align: center;
}
.icon_box {
min-height: 350px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.icon_box p {
margin-top: auto;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Optional scrollbar styling */
</style>
<style>
.custom-video-wrapper {
border: 1px solid #D1E3F8; /* رنگ آبی روشن هماهنگ با تم */
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* سایه ملایم */
overflow: hidden;
background-color: #ffffff;
padding: 0.5rem;
max-width: 100%;
}
/* ریسپانسیو برای iframe داخل اسکریپت آپارات */
.custom-video-wrapper iframe {
width: 100% !important;
height: 100% !important;
border: none;
border-radius: 12px;
}
#cube-gallery .cbp-item {
border: 1px solid #ddd; /* حاشیه ظریف */
border-radius: 12px; /* گوشه گرد */
overflow: hidden; /* جلوگیری از بیرون زدن محتوای داخل */
}
#cube-gallery .cbp-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
</style>
<style>
/* Team Caption Box */
.ourteam .team_caption {
padding: 25px 10px 27px 10px;
position: relative;
text-align: center;
width: 100%;
z-index: 1;
background: #f5f5f5;
}
/* Caption Overlay Effect */
.ourteam .team_caption .overlay {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background: #ff4c70;
padding: 0;
z-index: -1;
transition: width 0.4s ease;
}
/* Caption Paragraph */
.ourteam .team_caption p {
font-size: 0.75rem;
font-weight: normal;
margin-bottom: 0;
}
/* Social Icon Panel (Hidden Initially) */
.ourteam .social_vertical {
background: #ffffff;
padding: 10px;
position: absolute;
top: 10px;
left: -10px;
z-index: 1;
opacity: 0;
text-align: center;
transform: scaleX(0);
transition: all 0.4s ease;
}
/* Hover Effects */
.ourteam:hover .team_caption .overlay {
opacity: 1;
width: 100%;
}
.ourteam:hover .darkcolor {
color: #ffffff;
}
.ourteam:hover .social_vertical {
opacity: 1;
left: 10px;
transform: scaleX(1);
}
/* باکس هر مشتری */
#customer-swiper .swiper-slide.ourteam {
display: flex;
align-items: center;
justify-content: center;
height: 160px; /* ارتفاع ثابت برای یکدست‌سازی */
}
/* محتوای داخل باکس */
#customer-swiper .customer-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px;
box-sizing: border-box;
height: 100%;
width: 100%;
justify-content: center;
}
/* عکس مشتری */
#customer-swiper .customer-card img {
max-height: 60px;
max-width: 75px;
object-fit: contain;
margin-bottom: 8px;
display: block;
}
/* نام مشتری */
#customer-swiper .customer-name {
font-size: 14px;
color: #333;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
cursor: pointer;
user-select: none;
text-align: center;
}
/* موبایل */
@media (max-width: 768px) {
#customer-swiper .swiper-slide.ourteam {
height: 120px;
}
#customer-swiper .customer-card img {
max-height: 50px;
}
#customer-swiper .customer-name {
font-size: 12px;
}
}
/* دسکتاپ بزرگ */
@media (min-width: 1200px) {
#customer-swiper .swiper-slide.ourteam {
height: 180px;
}
#customer-swiper .customer-card img {
max-height: 100px;
}
#customer-swiper .customer-name {
font-size: 15px;
}
}
</style>
<!-- Include Swiper JS and jQuery (before </body>) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</head>
<body id="home" data-spy="scroll" data-target=".navbar" data-offset="50">
<!--Page Loader-->
<div class="loader">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
<!--Page Loader ends-->
<!--Header Starts-->
<header class="default">
<nav class="navbar navbar-default navbar-fixed brand-center bootsnav">
<div class="container">
<div class="menu-icon">
<span></span>
</div>
<!-- Start Header Navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo-white-pink.png" class="logo logo-display" alt="">
<img src="images/logo-dark-pink.png" class="logo logo-scrolled" alt="">
</a>
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
<li><a href="#home" class="scroll">خانه</a></li>
<li><a href="#features" class="scroll">درباره ما</a></li>
<li><a href="#work" class="scroll"> نمونه‌کارها</a></li>
<li><a href="#pricing" class="scroll">تعرفه ها</a></li>
<li><a href="#maxo_news" class="scroll"> اخبار</a></li>
<li><a href="#maxo-blog" class="scroll">بلاگ</a></li>
<li><a href="blog-detail.html">جزئیات مطلب بلاگ</a></li>
<li><a href="#contactus" class="scroll">تماس</a></li>
</ul>
</div>
<div class="text-center">
<a href="https://hamekara.com/hamyar" class="btn btn-white" style="padding: 5px;">
<i class="fa fa-users"></i> ورود همیار
</a>
<a href="https://hamekara.com/operator" class="btn btn-white" style="padding: 5px;">
<i class="fa fa-headphones"></i> ورود اپراتور
</a>
<a href="https://hamekara.com/" class="btn btn-white" style="padding: 5px;">
<i class="fa fa-home"></i> ورود به وبسایت
</a>
<a href="https://hamekara.com/admin" class="btn btn-white" style="padding: 5px;">
<i class="fa fa-lock"></i> ورود به پنل مدیریت
</a>
<a href="https://hamekara.com/hamekara.apk" class="btn btn-white" style="margin: 5px;">
<i class="fa fa-android"></i> دانلود اپلیکیشن
</a>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
</header>
<!--Header ends-->
<!--Full Menu-->
<section class="overlay-menu">
<div class="menu-icon active">
<span></span>
</div>
<div class="centered">
<div class="container">
<div class="row">
<div class="col-sm-12 columns half text-center">
<a href="index.html" class="logo-full heading_space"><img src="images/logo-dark-pink.png"
alt=""></a>
</div>
<div class="col-sm-12 columns half text-right">
<ul class="full-nav top20 heading_space">
<li class="active"><span>01.</span> <a href="#home" class="scroll">خانه</a></li>
<li><span>02.</span> <a href="#features" class="scroll">درباره ما</a></li>
<li><span>03.</span> <a href="#work" class="scroll"> نمونه‌کارها</a></li>
<li><span>04.</span> <a href="#pricing" class="scroll">تعرفه ها</a></li>
<li><span>05.</span> <a href="#maxo_news" class="scroll"> اخبار</a></li>
<li><span>06.</span> <a href="#maxo-blog" class="scroll">بلاگ</a></li>
<li><span>07.</span> <a href="#contactus" class="scroll">تماس</a></li>
<li><span>08.</span> <a href="blog-detail.html">جزئیات مطلب بلاگ</a></li>
</ul>
</div>
<div class="col-sm-12">
<ul class="social">
<li><a href="javascript:void(0)"><i class="fa fa-facebook"></i> </a></li>
<li><a href="javascript:void(0)"><i class="fa fa-twitter"></i> </a></li>
<li><a href="javascript:void(0)"><i class="fa fa-instagram"></i> </a></li>
<li><a href="javascript:void(0)"><i class="fa fa-telegram"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--Full Menu-->
<!--Main Slider-->
<section id="text-rotate" class="parallax text-rotator bg5">
<div class="centered padding">
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-2"></div>
<div class="col-sm-10 col-md-8 text-center">
<div class="">
<div class="swiper-container" dir="rtl">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swipe-rotate whitecolor">
<h1 class="text-captilize text-center">
<strong>حرفه ای اغاز کنید</strong><br>با پلتفرم فروشگاهی همه کارا کسب و کار
خود را بسازید
</h1>
<a href="https://hamekara.com/admin" class="button white top40">شروع همکاری</a>
</div>
</div>
<div class="swiper-slide">
<div class="swipe-rotate whitecolor">
<h1 class="text-captilize text-center">
<strong> راهکاری اقتصادی</strong> <br>برای توسعه انواع کسب و کارهای کوچک و
بزرگ
</h1>
<a href="https://hamekara.com/admin" class="button white top40">شروع همکاری</a>
</div>
</div>
<div class="swiper-slide">
<div class="swipe-rotate whitecolor">
<h1 class="text-captilize text-center">
<strong>موبایل اپلیکیشن</strong> <br> تجربه ای متفاوت با اپلیکیشن موبایلی
برای مشتریان حرفه ای کسب و کارها
</h1>
<a href="https://hamekara.com/admin" class="button white top40">شروع همکاری</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1 col-md-2"></div>
</div>
</div>
</div>
<div class="swiper-pagination top40"></div>
</section>
<!--Main Slider ends -->
<!--About Us-->
<section id="features" class="padding" style="max-lines: 4">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<p class="title bottom0">با همه‌کارا کسب و کار خودتان را بسازید</p>
<h2 class="text-captalize darkcolor bottom30">قدرتمند شروع کنید</h2>
</div>
<div class="icon_wrap text-center clearfix">
<div class="col-sm-4 top30">
<div class="icon_box">
<i class="fa fa-upload"></i>
<h4 class="text-capitalize bottom15">همیشه در مسیر پیشرفت</h4>
<p class="no_bottom">پلتفرم فروشگاهی همه کارابا توجه به نیاز کاربران هماهنگ میشود و به طور مداوم
درحال به روزرسانی و ارتقای امکانات خود است.</p>
</div>
</div>
<div class="col-sm-4 top30">
<div class="icon_box border_radius">
<i class="fa fa-umbrella"></i>
<h4 class="text-capitalize bottom15">مشاوره رایگان راهی به سوی پیشرفت</h4>
<p class="no_bottom">در همه کارا میتوانید از راهنمایی دائمی مشاوران کسب و کار بهره مند شوید و هر
روز یک گام به اهداف خودد نزدیک تر شوید.</p>
</div>
</div>
<div class="col-sm-4 top30 ">
<div class="icon_box border_radius">
<i class="fa fa-mobile-phone"></i>
<h4 class="text-capitalize bottom15">موبایل اپلیکیشن اختصاصی</h4>
<p class="no_bottom">با عضویت در همه کارا هیچ مرزی برای رشد کسب و کار شما وجود ندارد، شما
میتوانید محصولات و خدمات خود را به صورت همزمان در وب سایت و اپلیکیشن موبایل منتشر کنید </p>
</div>
</div>
<div class="col-sm-4 top30">
<div class="icon_box border_radius">
<i class="fa fa-link"></i>
<h4 class="text-capitalize botبه کمک باشگاه مشتریان همه کارا دیگر نگرtom15">باشگاه مشتریان</h4>
<p class="no_bottom">با همه کارا بدون نگرانی درباره هزینه های نگهداشت و جذب مشتری جدید کسب و
کارهای خود را گسترش دهید و ارتباطی پایدار با مشتریان وفادار خود برقرار کنید.</p>
</div>
</div>
<div class="col-sm-4 top30">
<div class="icon_box border_radius">
<i class="fa fa-shopping-basket"></i>
<h4 class="text-capitalize bottom15">فروشگاه انلاین حرفه ای همراه رشد کسب و کار شما</h4>
<p class="no_bottom"> همه کارا یک پلتفرم قدرتمند است که با امکانات پیشرفته به شما کمک می کند
مدیریت کسب و کار خود را بهبود دهید </p>
</div>
</div>
<div class="col-sm-4 top30">
<div class="icon_box border_radius">
<i class="fa fa-laptop"></i>
<h4 class="text-capitalize bottom15">پشتیبانی</h4>
<p class="no_bottom"> همه کارا با امکان ایجاد فروشگاه اختصاصی عضویت آسان و پشتیبانی 24 ساعته
همراه شما در مسیر موفقیت است رشد کسب و کار شما تضمین شده است</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--About Us ends -->
<!--Testimonials-->
<section class="bg bglight" id="maxo-testimonials">
<div class="row" style=" padding:8px ">
<!-- ✅ Testimonial Column -->
<div class="col-md-6 col-sm-12">
<div class="bglight padding darkcolor right">
<h2 class="text-captalize heading_space">پنل حرفه ای برای فروش محصولات و خدمات شما</h2>
<div class="testimonial">
<div class="testimonial_slide">
<span class="photo bottom25"><img src="images/kiani.jpg" alt=""> </span>
<div class="signature bottom25">
<h6>مهندس کیانی</h6>
<span>گروه بازرگانان برتر</span>
</div>
<p class="bottom0 top15">با فعال کردن فروشگاه اینترنتی خود در همه کارا میتوانید محصولات و
خدمات خود را در یک لینک اختصاصی ارائه کنید، هر پذیرنده یک صفحه اختصاصی و یک پنل مدیریتی
خواهد داشت که به کمک آن میتواند به صورت کاملا حرفه ایی و کسب و کار خود رو مدیریت کند و
به کمک ابزارها امور مربوط به فروش، قرعه کشی، ارسال پیام و مدیریت وظدهدایف کارکنان را
پیگیری و انجام دهد .</p>
</div>
</div>
</div>
</div>
<!-- 🎬 Aparat Video Column -->
<div class="col-md-6 col-sm-12" style="text-align: center;">
<div class="custom-video-wrapper">
<div id="25479828314" style=" margin: 8px">
<script type="text/JavaScript"
src="https://www.aparat.com/embed/rxi78x9?data[rnddiv]=25479828314&data[responsive]=yes&titleShow=true"></script>
</div>
</div>
</div>
</div>
</section>
<!--Testimonials ends-->
<!--Gallery-->
<section id="work" class="padding">
<div class="container">
<div class="row">
<div class="col-sm-7">
<p class="bottom0">پیش نمایش</p>
<h2 class="text-captalize darkcolor heading_space">همه کارا در یک نگاه</h2>
</div>
<div class="col-sm-5 text-left">
<div id="cube-filters" class="cbp-l-filters heading_space">
<div data-filter="*" class="cbp-filter-item">
<span>نقشه </span>
</div>
<div data-filter=".web" class="cbp-filter-item">
<span>فروشگاه ها</span>
</div>
<div data-filter=".print" class="cbp-filter-item">
<span>فاکتور ها</span>
</div>
<div data-filter=".logo" class="cbp-filter-item">
<span> محصولات </span>
</div>
<div data-filter="*" class="cbp-filter-item">
<span>پرونده‌ها</span>
</div>
</div>
</div>
</div>
<div id="cube-gallery" class="cbp">
<div class="cbp-item logo">
<a href="images/SMS.webp" data-fancybox="">
<img src="images/SMS.webp" alt="">
</a>
<div class="overlay text-uppercase whitecolor">
<a class="likeus" href="javascript:void(0)"><span><i class="fa fa-thumbs-up"></i> 25</span> </a>
<a href="images/SMS.webp" data-fancybox="first-Maxo">
<h4>پنل پیامک رسان</h4>
<p class="heading">با سامانه پیامک اینترومون، اطلاع‌رسانی و ارتباط با مشتریان سریع و ساده است؛ از ارسال اعلان‌ها تا یادآوری پرداخت و پیشنهادهای ویژه، همه در یک پنل قدرتمند <span class="colorbar"></span></p>
</a>
</div>
</div>
<div class="cbp-item logo web print">
<a href="images/maali.webp" data-fancybox="">
<img src="images/maali.webp" alt=""/>
</a>
<div class="overlay text-uppercase whitecolor">
<a class="likeus" href="javascript:void(0)"><span><i class="fa fa-thumbs-up"></i> 25</span> </a>
<a href="" data-fancybox="">
<h4>مالی</h4>
<p class="heading"> مدیریت مالی کسب‌وکار با اینترومون ساده و دقیق است. از ثبت تراکنش‌ها تا گزارش‌های کامل، همه‌چیز یکجا برای کنترل بهتر درآمد و هزینه‌های شما
<span class="colorbar"></span>
</p>
</a>
</div>
</div>
<div class="cbp-item logo web print">
<a href="images/factorhaa.webp" data-fancybox="">
<img src="images/factorhaa.webp"/>
</a>
<div class="overlay text-uppercase whitecolor">
<a class="likeus" href="javascript:void(0)"><span><i class="fa fa-thumbs-up"></i> 25</span> </a>
<a href="images/factorhaa.webp">
<h4>فاکتور ها </h4>
<p class="heading"> صدور و مدیریت فاکتور فروش، خرید و خدمات ساده‌تر از همیشه است. شخصی‌سازی، محاسبه خودکار ، همه در یک جا برای مدیریت حرفه‌ای کسب‌وکار شما. <span class="colorbar"></span></p>
</a>
</div>
</div>
<div class="cbp-item graphics web print">
<a href="images/mahsoolat.webp" data-fancybox="">
<img src="images/mahsoolat.webp" alt="">
</a>
<div class="overlay text-uppercase whitecolor">
<a class="likeus" href="javascript:void(0)"><span><i class="fa fa-thumbs-up"></i> 25</span> </a>
<a href="images/mahsoolat.webp" data-fancybox="">
<h4>محصولات </h4>
<p class="heading">مدیریت کامل لیست محصولات با امکان افزودن، ویرایش و دسته‌بندی، به شما کمک
می‌کند تا موجودی و قیمت‌ها را به‌روز نگه دارید. این بخش کنترل دقیق‌تری روی تنوع کالا و نظم
فروشگاه ایجاد کرده و تجربه خرید مشتریان را بهبود می‌بخشد.<span class="colorbar"></span></p>
</a>
</div>
</div>
<div class="cbp-item logo print">
<a href="images/vazayef.webp" data-fancybox="">
<img src="images/vazayef.webp" alt="">
</a>
<div class="overlay text-uppercase whitecolor">
<a class="likeus" href="javascript:void(0)"><span><i class="fa fa-thumbs-up"></i> 25</span> </a>
<a href="images/vazayef.webp" data-fancybox="">
<h4>وظایف شخصی</h4>
<p class="heading">مدیریت و دسترسی سریع به پرونده‌ها و اطلاعات مهم کاربران را فراهم می‌کند. این
بخش امکان مشاهده، ویرایش و پیگیری سوابق و مستندات را به‌صورت دقیق و یکپارچه فراهم
می‌سازد.</p>
</a>
</div>
</div>
<div class="cbp-item logo print">
<a href data-fancybox="">
<img src="images/moshtarian.webp" alt="">
</a>
<div class="overlay text-uppercase whitecolor">
<a class="likeus" href="javascript:void(0)"><span><i class="fa fa-thumbs-up"></i> 25</span> </a>
<a href="images/moshtarian.webp" data-fancybox="">
<h4> باشگاه مشتریان</h4>
<p class="heading"><span></span>به مدیریت ارتباط با مشتریان و امتیاز ویژه وفاداری مشتریان را
افزایش میدهد و ارتباط با مشتریان هوشمندانه مدیریت میکند <span class="colorbar"></span></p>
</a>
</div>
</div>
</div>
</div>
</section>
<!--Gallery ends-->
<!--Parallax-->
<section id="m-parallax" class="parallax-bg parallax padding">
<div class="container text-center">
<div class="row">
<div class="col-sm-1 col-md-2"></div>
<div class="col-sm-10 col-md-8">
<h2 class="whitecolor"><i class="fa fa-quote-right"></i>به جمع فروشگاه های همه کارا بپیوندید و با پلتفرم
حرفه ای ما به سادگی کسب در آمد کنید<i class="fa fa-quote-left"></i></h2>
<h1><a href="https://hamekara.com/admin" class="whitecolor">hamekara.com/admin</a></h1>
</div>
<div class="col-sm-1 col-md-2"></div>
</div>
</div>
</section>
<!--Parallax Ends-->
<!--PRICINGS Starts-->
<section id="pricing" class="padding">
<div class="container text-center">
<div class="row">
<div class="col-sm-12">
<h1 class="title bottom0">ماژول‌های اختصاصی</h1>
<h2 class="text-capitalize darkcolor bottom20">بسته ها</h2>
</div>
</div>
<div class="row" id="packages-container">
<!-- Dynamic package items will be inserted here -->
</div>
</div>
</section>
<script>
async function loadPackages() {
const container = document.getElementById('packages-container');
try {
const res = await fetch("https://hamekara.com/api/v3/acceptor/packages?pagination%5Bpage%5D=1&pagination%5Bpages%5D=2&pagination%5Bperpage%5D=10&pagination%5Btotal%5D=12&query=", {
headers: {
"Accept": "application/json, text/javascript, */*; q=0.01",
"Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzIiwianRpIjoiMTE3YWVlYTgyMGRiMzRhMzA3MWVkN2FhOGU5MDg5ZmQxMTc0MTJkZmM3MDkxMzA4N2MyYTdhYWIwYWU0ZDU3NmNlOTBlNGU1ZjBmZGIwMWYiLCJpYXQiOjE3NTMwMTMwOTQuNDUxNDE2LCJuYmYiOjE3NTMwMTMwOTQuNDUxNDIsImV4cCI6MTc4NDU0OTA5NC40NDgwMDEsInN1YiI6IjU1ODU4Iiwic2NvcGVzIjpbXX0.S1juIWSFg-sx82z9XmYq_EYnR3mfC5TtYm_qmW6xwQJO_bn47MxD4hVi6E0UmEnoqNT2-8DOf2dy4tnjMhG41UXbt3G8VKtr7wkOoPmeXqJH_jJxk6Zeab1NkzXEJCAAXqSJJB51lTdbC4jbk8zbr_kfrg1aUE9dAFZmIb8hna8jGZUzDeM5PDyb5uS1YyE1ZaXMssmFLw-s-Reb5ygEizLZarqMxslT1K2qOX4Qn46dNQgfHZvYh7BzZmFZsRl8Uchrt1RLH9qN_O2DseZzt_Axt_xkE83SkaXz95BryzIp68ddHCwPJWl2vuXNPxZzagQy6PgvwOySUqflJYq1LjTFzk3QM1CK0YOpKpsIHRrSpdJMVx8vWio2JqRycFfBUyCo8m7kr3KiHgptuX3yP2lVXeqGaHW-phdooGTrEZIKj44YzBSUyGV19vOis1s6gRAknCg_FoT28RY9MVxGfoV43L_LD2ZxA18RIF30dRJQ7kombLqZeYlvUPb3YYsQ80shnAWs8kmKynSZLtsTsE_8cuqPkK2BDGKgrHUBiEG8vIXQN5hN9An6x-U9c3Pvr2VsnU6lsuNGZJrcJgvn_Yv7C0G35DyFULkLTom9Ihd52io15uMicGDhGYYrGBIBpl6xrd--hXQ6kGxCXhlFDnoHZYCdIFzBaHWZIxgMr3Q",
},
method: "GET"
});
if (!res.ok) throw new Error("Failed to fetch");
const data = await res.json();
if (!data || !Array.isArray(data.data)) {
throw new Error("Invalid response format");
}
container.innerHTML = "";
data.data.forEach((pkg, index) => {
const html = `
<div class="col-md-4 col-sm-6">
<div class="pricing-item package-card" style="border:1px solid #eee; padding:15px; border-radius:20px; text-align:center; margin-bottom:20px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: background-color 0.3s;">
<h3>${pkg.title}</h3>
<p>${pkg.description || ''}</p>
<div class="price">${formatNumber(pkg.price)} تومان</div>
<div class="rating">${generateStars(3)}</div>
<br/>
<a href="https://hamekara.com/admin" class="button white top20" style="display:inline-block; margin-top:15px; padding:10px 20px; background:#fff; color:#333; border:1px solid #ccc; border-radius:30px; text-decoration:none; transition:0.2s;">هم اکنون بخرید</a>
</div>
</div>
`;
container.insertAdjacentHTML('beforeend', html);
});
// Add toggle behavior for check buttons
// Add hover effect for pink background
const style = document.createElement('style');
style.textContent = `
.package-card:hover {
background-color: #f93d66;
} .pricing-item {
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, background-color 0.3s ease;
}
.pricing-item:hover {
background-color: #ec407a;
color: #fff;
transform: scale(1.05); /* 🔥 This line zooms in the box */
}
.pricing-item:hover .btn-primary {
background-color: #fff;
color: #ec407a;
}
`;
document.head.appendChild(style);
} catch (error) {
container.innerHTML = "<p style='color:red;'>مشکلی در بارگذاری بسته‌ها رخ داده است.</p>";
console.error("Package load error:", error);
}
}
function generateStars(rating) {
rating = rating || 0;
const full = Math.floor(rating);
const half = (rating - full) >= 0.5 ? 1 : 0;
const empty = 5 - full - half;
let starsHtml = '';
for (let i = 0; i < full; i++) {
starsHtml += '<i class="fa fa-star"></i> ';
}
if (half) {
starsHtml += '<i class="fa fa-star-half-o"></i> ';
}
for (let i = 0; i < empty; i++) {
starsHtml += '<i class="fa fa-star-o"></i> ';
}
return starsHtml.trim();
}
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
document.addEventListener('DOMContentLoaded', loadPackages);
</script>
<!--PRICINGS ends-->
<!--Latest Updates-->
<section id="maxo_news" class="bg bglight">
<div class="container">
<h2 class="text-capitalize heading_space darkcolor">همه کارا در ده گام</h2>
<div class="update_slide scrollable_videos">
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/moghadame.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">مقدمه همه کارا</div>
<video src="images/Moghadame.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step1.jpg" alt="گام اول :نقشه" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام اول :نقشه</div>
<video src="images/Step1.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step2.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام دوم :رونق فروش حضوری</div>
<video src="images/Step2.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step3.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام سوم :ویترین فروش آنلاین</div>
<video src="images/Step3.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step4.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام چهارم:داغ داغ</div>
<video src="images/Step4.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step5.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام پنجم: تبلیغات</div>
<video src="images/Step5.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step6.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام ششم : مدیریت مالی</div>
<video src="images/Step6.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step7.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام هفتم : مدیریت مشتریان</div>
<video src="images/Step7.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step8.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام هشتم : مدیریت وظایف شخصی</div>
<video src="images/Step8.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step9.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption">گام نهم : ارتقای کسب و کار</div>
<video src="images/Step9.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step10.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption"> گام دهم : مشاوره،آموزش و کوچینگ</div>
<video src="images/Step10.mp4"></video>
</div>
<div class="video_card">
<div class="thumb_wrapper">
<img src="images/Step11.jpg" alt="مقدمه همه کارا" class="video_thumb">
<div class="play_icon"></div>
</div>
<div class="video_caption"> کلام آخر</div>
<video src="images/Step11.mp4"></video>
</div>
<!-- Repeat for other video cards -->
<!-- ... -->
</div>
</div>
</section>
<!-- 🔹 SCRIPT: Set start time to 3s -->
<script>
document.querySelectorAll('.video_card').forEach(card => {
const thumbWrapper = card.querySelector('.thumb_wrapper');
const video = card.querySelector('video');
// Show video on mouse enter
card.addEventListener('mouseenter', () => {
video.style.display = 'block';
thumbWrapper.style.display = 'none';
video.currentTime = 3;
video.play();
});
// Hide video on mouse leave
card.addEventListener('mouseleave', () => {
video.pause();
video.currentTime = 3;
video.style.display = 'none';
thumbWrapper.style.display = 'block';
});
});
</script>
<!--Latest Updates ends-->
<!-- Our Team-->
<!-- Include Swiper CSS (put this in your <head>) -->
<!-- Section HTML -->
<section class="padding ivy-team" id="team">
<div class="swiper-container" dir="rtl">
<div class="swiper-wrapper">
<!-- Team Member 1 -->
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team1.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">مهندس اسماعیل کیانی</h3>
<p class="darkcolor">مدیر عامل</p>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team2.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">مهندس مهران ظهیری</h3>
<p class="darkcolor">طراح و برنامه نویس ارشد</p>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team3.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">محمدرضا مختاری</h3>
<p class="darkcolor">طراح و برنامه نویس </p>
</div>
</div>
</div>
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team6.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">محمد مبین خسروی</h3>
<p class="darkcolor">طراح و برنامه نویس </p>
</div>
</div>
</div>
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team4.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">محمد حسین ملکی</h3>
<p class="darkcolor">سوشال مدیا</p>
</div>
</div>
</div>
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team5.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">فاطمه کارگر</h3>
<p class="darkcolor">سوشال مدیا</p>
</div>
</div>
</div>
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team8.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">یاسمن داوودی</h3>
<p class="darkcolor">کارشناس فروش و بازاریابی</p>
</div>
</div>
</div>
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team9.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">فریده باقری</h3>
<p class="darkcolor">کارشناس فروش و بازاریابی</p>
</div>
</div>
</div>
<div class="swiper-slide ourteam">
<div class="image">
<ul class="social_vertical">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<img src="images/team10.jpg" alt="">
<div class="team_caption darkcolor">
<div class="overlay"></div>
<h3 class="bottom10">مریم طاهریان</h3>
<p class="darkcolor">کارشناس فروش و بازاریابی</p>
</div>
</div>
</div>
</div>
<!-- Add Pagination Bullets -->
<div class="swiper-pagination"></div>
</div>
</section>
<!-- Initialize Swiper -->
<!--Our Team ends-->
<!--Blog-->
<section id="maxo-blog" class="padding bglight darkcolor">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2 class="title bottom0">همه کارا </h2>
<h1 class="text-capitalize heading_space">بلاگ ما</h1>
<div class="our-blog">
<div class="swiper-container" dir="rtl">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="ourblog">
<div class="row">
<div class="col-sm-12">
<div class="image">
<a href="blog.html"><img src="images/pexels-eva-bronzini-6956303.jpg"
alt="blog"></a>
<div class="desc_tags">
<a href="#" class="ivydatedate">19 مهر</a>
<a href="#" class="ivydatedate">مدیر</a>
<a href="#" class="ivydatedate">طراحی</a>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="blog_desc">
<h3 class="top25 bottom20"><a href="blog.html">اهمیت تولید محتوا</a>
</h3>
<p class="bottom20"> تولید محتوا یکی از راههای اصلی برای جذب مخاطبان،
افزایش شناخت برند، ایجاد اعتماد و ارزش برای مشتریان و بهبود رتبه سئو
است. تولید محتوا به شما کمک میکند که اطلاعات مفید و رایگان را در
اختیار مخاطبتان بگذارید و با نیازها و علایق آنها همخوانی داشته
باشید.</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="ourblog">
<div class="row">
<div class="col-sm-12">
<div class="image">
<a href="blog.html"><img src="images/pexels-fauxels-3183153.jpg"
alt="blog"></a>
<div class="desc_tags">
<a href="#" class="ivydatedate">17 تیر</a>
<a href="#" class="ivydatedate">مدیر</a>
<a href="#" class="ivydatedate">طراحی</a>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="blog_desc">
<h3 class="top25 bottom20"><a href="blog.html">اهمیت بازار دیجیتال</a>
</h3>
<p class="bottom20">بازاریابی دیجیتال به شما امکان میدهد که با مشتریان
در هرجایی ارتباط برقرار کنید، با کسب و کارهای رقیب با سرعت بیشتری
رقابت کنید و مخاطب ایدهآل خود را هدفگذاری کنید و نتایج کمپینهای خود
را پیگیری و نظارت کنید.</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="ourblog">
<div class="row">
<div class="col-sm-12">
<div class="image">
<a href="blog.html"><img src="images/pexels-pixabay-355952.jpg"
alt="blog"></a>
<div class="desc_tags">
<a href="#" class="ivydatedate">6 آذر</a>
<a href="#" class="ivydatedate">مدیر</a>
<a href="#" class="ivydatedate">طراحی</a>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="blog_desc">
<h3 class="top25 bottom20"><a href="blog.html">اهمیت مشاوران کسب کار</a>
</h3>
<p class="bottom20">مشاوران کسب و کار با تخصص و تجربهای که دارند،
میتوانند به شما کمک کنند که مشکلات و مسائل کسب و کار خود را حل و فصل
کنید، فرصتهای تغییر و بهبود را شناسایی و اجرا کنید و ایده های خاصی
را برای راه اندازی یا توسعه کسب و کار خود داشته باشید.</p>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="swiper-slide">-->
<!-- <div class="ourblog">-->
<!-- <div class="row">-->
<!-- <div class="col-sm-12">-->
<!-- <div class="image">-->
<!-- <a href="blog.html"><img src="images/blog1.jpg" alt="blog"></a>-->
<!-- <div class="desc_tags">-->
<!-- <a href="#" class="ivydatedate">19 مهر</a>-->
<!-- <a href="#" class="ivydatedate">مدیر</a>-->
<!-- <a href="#" class="ivydatedate">طراحی</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-sm-12">-->
<!-- <div class="blog_desc">-->
<!-- <h3 class="top25 bottom20"><a href="blog.html">لورم ایپسوم متن ساختگی با تولید</a> </h3>-->
<!-- <p class="bottom20">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="swiper-slide">-->
<!-- <div class="ourblog">-->
<!-- <div class="row">-->
<!-- <div class="col-sm-12">-->
<!-- <div class="image">-->
<!-- <a href="blog.html"><img src="images/blog2.jpg" alt="blog"></a>-->
<!-- <div class="desc_tags">-->
<!-- <a href="#" class="ivydatedate">19 مهر</a>-->
<!-- <a href="#" class="ivydatedate">مدیر</a>-->
<!-- <a href="#" class="ivydatedate">طراحی</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-sm-12">-->
<!-- <div class="blog_desc">-->
<!-- <h3 class="top25 bottom20"><a href="blog.html">لورم ایپسوم متن ساختگی با تولید</a> </h3>-->
<!-- <p class="bottom20">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="swiper-slide">-->
<!-- <div class="ourblog">-->
<!-- <div class="row">-->
<!-- <div class="col-sm-12">-->
<!-- <div class="image">-->
<!-- <a href="blog.html"><img src="images/blog3.jpg" alt="blog"></a>-->
<!-- <div class="desc_tags">-->
<!-- <a href="#" class="ivydatedate">19 مهر</a>-->
<!-- <a href="#" class="ivydatedate">مدیر</a>-->
<!-- <a href="#" class="ivydatedate">طراحی</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-sm-12">-->
<!-- <div class="blog_desc">-->
<!-- <h3 class="top25 bottom20"><a href="blog.html">لورم ایپسوم متن ساختگی با تولید</a> </h3>-->
<!-- <p class="bottom20">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="swiper-pagination top20"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Blog ends -->
<!--We Work With....-->
<div class="container">
<div class="col-md-12 col-sm-12 text-center">
<h1 class="title bottom0">برخی از مشتریان ما</h1>
</div>
<div class="col-md-12 col-sm-12">
<div class="partners">
<section class="ivy-team">
<div class="swiper-container" id="customer-swiper" dir="rtl">
<div class="swiper-wrapper" id="customer-list">
<!-- Slides will be inserted dynamically -->
<script>
async function getMarkets() {
const container = document.getElementById('customer-list');
try {
const res = await fetch("https://hamekara.com/api/v3/markets", {
headers: {
"Accept": "application/json, text/javascript, */*; q=0.01",
"Authorization": "Bearer YOUR_TOKEN_HERE"
},
method: "GET"
});
if (!res.ok) throw new Error("Failed to fetch markets");
const data = await res.json();
if (!data || !Array.isArray(data.data)) throw new Error("Invalid data format");
container.innerHTML = "";
data.data.forEach(market => {
const imgUrl = market.pictures?.[0]?.url
? `https://hamekara.com/upload/images/markets/${market.pictures[0].url}`
: 'fallback.jpg';
const marketName = market.name || '';
const shortName = marketName.length > 10 ? marketName.slice(0, 10) + '…' : marketName;
const html = `
<div class="swiper-slide ourteam">
<div class="image customer-card">
<img src="${imgUrl}" alt="${marketName}">
<p class="customer-name" data-full-name="${marketName}">
${shortName}
</p>
</div>
</div>
`;
container.insertAdjacentHTML('beforeend', html);
});
new Swiper('#customer-swiper', {
slidesPerView: 6,
spaceBetween: 20,
speed: 2000,
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false
},
breakpoints: {
320: { slidesPerView: 2 },
640: { slidesPerView: 3 },
1024: { slidesPerView: 6 }
}
});
// Tooltip functionality
const popup = document.getElementById('name-popup');
document.querySelectorAll('.customer-name').forEach(el => {
el.addEventListener('click', e => {
const fullName = el.getAttribute('data-full-name');
popup.innerText = fullName;
const rect = el.getBoundingClientRect();
popup.style.left = (rect.left + window.scrollX) + 'px';
popup.style.top = (rect.bottom + window.scrollY + 5) + 'px';
popup.style.display = 'block';
});
});
// Hide tooltip when clicking outside
document.addEventListener('click', e => {
if (!e.target.classList.contains('customer-name')) {
popup.style.display = 'none';
}
});
} catch (err) {
console.error("Market fetch error:", err);
}
}
document.addEventListener('DOMContentLoaded', getMarkets);
</script>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- Popup برای نمایش اسم کامل -->
<div id="name-popup" style="display:none;"></div>
<!--We Work With ends....-->
<section class="bg bglight" id="contactus">
<div class="bghalf equalheight">
<div id="maxo-map"></div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="padding equalheight darkcolor left">
<h2 class="text-capitalize bottom25">تماس با ما</h2>
<div class="locations top15">
<i class="fa fa-envelope-o"></i>
<span class="ltr_text"><a href="thetoptraders@gmail.com">thetoptraders@gmail.com
</a></span>
</div>
<div class="locations top15">
</div>
<div class="locations top15">
<i class="fa fa-envelope-o"></i>
<span class="ltr_text"><a href="thetoptraders@gmail.com">team.hamekara@gmail.com</a></span>
</div>
<div class="locations top15">
<i class="fa fa-map-marker"></i>
<span>ایران - چهار محال و بختیاری-شهرکرد-ساختمان پارک علم و فناوری </span>
</div>
<form class="callus top40" onsubmit="return false">
<div class="row">
<div class="col-sm-12 center">
<div id="result"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<input type="text" class="form-control" placeholder="نام شما" name="name" id="name"
required>
</div>
<div class="col-sm-6 form-group">
<input type="email" class="form-control" placeholder="آدرس ایمیل" name="email"
id="email" dir="ltr" required>
</div>
<div class="col-sm-6 form-group">
<input type="tel" class="form-control" placeholder="شماره تلفن" name="phone" id="phone"
dir="ltr">
</div>
<div class="col-sm-6 form-group">
<input type="text" class="form-control" placeholder="موضوع" name="subject" id="subject">
</div>
<div class="col-sm-12 form-group">
<textarea class="form-control" placeholder="پیام شما" name="message" id="message"
required></textarea>
<button class="button dark top20" id="submit_btn">ثبت</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--Footer starts-->
<footer id="evy-footer" class="padding_half">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p class="top10">
کلیه حقوق مادی و معنوی همه کارا متعلق به
<a href="https://www.rtl-theme.com" target="_blank">
گروه بازرگانان برتر میباشد.
</a>
</p>
</div>
<div class="col-sm-6 text-left">
<ul class="social top10">
<li><a href="javascript:void(0)"><i class="fa fa-facebook"></i></a></li>
<li><a href="javascript:void(0)"><i class="fa fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fa fa-instagram"></i></a></li>
<li><a href="javascript:void(0)"><i class="fa fa-telegram"></i></a></li>
</ul>
<!-- eNamad Trust Seal -->
<div class="top10">
<a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=618220&Code=W86FGXOVhlD2RNWlNLWwxE5EVujECL5N'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=618220&Code=W86FGXOVhlD2RNWlNLWwxE5EVujECL5N' alt='' style='cursor:pointer' code='W86FGXOVhlD2RNWlNLWwxE5EVujECL5N'></a>
</div>
</div>
</div>
</div>
</footer>
<!--Footer enda-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-2.2.3.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyAEn4c_T1rFt7ltf_oNavnjND8dDPm4KQs&language=fa"
type="text/javascript"></script>
<script src="js/map.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootsnav.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/jquery.cubeportfolio.min.js"></script>
<script src="js/jquery.matchHeight-min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.parallax-1.1.3.js"></script>
<script src="js/jquery.themepunch.tools.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<script src="js/revolution.extension.actions.min.js"></script>
<script src="js/revolution.extension.layeranimation.min.js"></script>
<script src="js/revolution.extension.navigation.min.js"></script>
<script src="js/revolution.extension.parallax.min.js"></script>
<script src="js/revolution.extension.slideanims.min.js"></script>
<script src="js/revolution.extension.kenburn.min.js"></script>
<script src="js/revolution.extension.video.min.js"></script>
<script src="js/functions.js"></script>
<!--<script >
window.open('mailto:mehran.zahiri.eng@gmail.com?subject=title&body=salam');
</script>-->
<!-- Default Statcounter code for hamekara http://intro.hamekara.com -->
<script type="text/javascript">
var sc_project = 12919696;
var sc_invisible = 1;
var sc_security = "1a4c106a";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript>
<div class="statcounter"><a title="Web Analytics Made Easy -
Statcounter" href="https://statcounter.com/" target="_blank"><img
class="statcounter" src="https://c.statcounter.com/12919696/0/1a4c106a/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div>
</noscript>
<!-- End of Statcounter Code -->
</body>
</html>