You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

754 lines
53 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Records Of Any Model</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<style>
:root {
--primary-color: #7f54b3;
--bg-white: #fff;
--text-color: #121212;
--text-color-light: #64728f;
}
body {
font-family: "Montserrat", sans-serif;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
color: var(--text-color);
font-size: 16px;
font-weight: 500;
border-radius: 30px;
background-color: #f5f5f5;
border: none;
padding: 12px 24px;
text-transform: capitalize;
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
border-color: transparent;
isolation: isolate;
}
.nav-tabs .nav-link:focus-visible {
border-color: transparent;
box-shadow: none;
}
.owl-carousel .owl-nav {
position: absolute;
top: 42%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-42%);
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
font-size: 28px;
background-color: #e4e4e4;
border-radius: 20px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.owl-carousel .owl-nav button.owl-prev {
right: -36px;
}
.owl-carousel .owl-nav button.owl-next {
left: -36px;
}
.version-badge {
background-color: #017e84;
color: #fff;
font-size: 0.8rem;
font-weight: 500;
padding: 4px;
margin: 0 3px;
border-radius: 50px;
min-width: 120px;
text-align: center;
}
.contact-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 33px;
border-radius: 35px;
text-decoration: none;
font-family: Montserrat;
font-size: 16px;
}
.key-highlight-card {
border-radius: 12px;
border: 1px solid #b6bccd;
background: #fff;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.section-card {
border-radius: 16px;
border: 1px solid #ebeef2;
background: #f5f5f7;
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);
padding: 60px 40px;
}
.screenshot-section {
border-radius: 10px;
background-color: #f4f4f4;
padding: 3rem;
}
</style>
</head>
<body>
<div class="container my-5">
<!-- Version Support -->
<div class="d-flex align-items-center justify-content-end my-3">
<div class="version-badge" style="background-color: #017e84;">Community</div>
<div class="version-badge" style="background-color: #875a7b;">Enterprise</div>
<div class="version-badge" style="background-color: #7c7bad;">Odoo.sh</div>
</div>
<!-- Hero Section -->
<div class="tab-content" id="my_TabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="position-relative" style="border-radius: 16px; background: #f8f8f8; padding: 20px 0;">
<div class="row" style="padding: 2rem 0;">
<div class="col-lg-8 mx-auto d-flex flex-column align-items-center gap-4">
<p class="my-1 text-center text-uppercase" style="letter-spacing: 4px; color: var(--primary-color); font-weight: 600; font-size: 14px;">
This module allows to view the records of any model in list
or form view.
</p>
<h1 class="text-center text-uppercase my-0" style="color: var(--text-color); font-size: 46px; font-weight: 700;">
View Records Of Any Model
</h1>
</div>
<div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin: 3rem 0;">
<img src="./assets/icons/brand-pair.svg" class="img-responsive" style="width: 50%;" alt="Brand Pair">
</div>
<div class="col-md-12 text-center">
<a href="mailto:odoo@cybrosys.com" class="contact-btn" style="border: 1px solid var(--primary-color); color: var(--primary-color);">
<img src="./assets/icons/mail.svg" style="width: 24px;" alt="Mail">
<span style="vertical-align: middle;">Email Us</span>
</a>
<a href="skype:cybroopenerp?chat" class="contact-btn" style="background-color: #7f289b; border: 1px solid #7f289b; color: #fff;">
<img src="./assets/icons/skype-fill.svg" style="width: 24px;" alt="Skype">
<span style="vertical-align: middle;">Skype Us</span>
</a>
</div>
<div class="d-flex justify-content-center mt-2">
<img src="./assets/icons/hero.gif" class="w-100" style="z-index: 3; height: auto;" alt="Hero">
</div>
</div>
<div class="position-absolute bottom-0 w-100" style="z-index: 1;">
<img src="./assets/icons/banner-bg.svg" class="img-fluid w-100" alt="Banner Background">
</div>
<div class="position-absolute bottom-0 end-0" style="z-index: 2;">
<img src="./assets/icons/patter.svg" alt="Pattern">
</div>
</div>
<!-- Key Highlights -->
<div class="section-card">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 style="color: var(--text-color); font-size: 40px; font-weight: 700; text-transform: uppercase; padding-bottom: 50px;">
Key Highlights
</h2>
</div>
<div class="col-lg-4">
<div class="key-highlight-card">
<div class="d-flex justify-content-center align-items-center" style="background-color: #7847d9; border-radius: 8px; height: 42px; width: 42px;">
<img src="./assets/icons/feature-icon.svg" class="img-responsive" height="26" width="26" alt="Feature">
</div>
<h5 style="color: #000; font-weight: bold;">Form and List view.</h5>
<p style="color: var(--text-color-light); font-size: 16px; font-weight: 400;">
</p>
</div>
</div>
<div class="col-lg-4">
<div class="key-highlight-card">
<div class="d-flex justify-content-center align-items-center" style="background-color: #7847d9; border-radius: 8px; height: 42px; width: 42px;">
<img src="./assets/icons/feature-icon.svg" class="img-responsive" height="26" width="26" alt="Feature">
</div>
<h5 style="color: #000; font-weight: bold;">Available in Odoo 18.0 Community,Enterprise and Odoo.sh</h5>
<p style="color: var(--text-color-light); font-size: 16px; font-weight: 400;">
</p>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="my-5">
<div class="position-relative" style="padding: 5rem 4rem; background-color: #0a1425; border-radius: 12px;">
<div class="d-flex flex-column gap-4">
<span style="font-size: 40px; font-weight: 700; color: #fff; line-height: 60px; text-transform: capitalize; width: 450px;">
View Records Of Any Model
</span>
<h3 style="font-size: 20px; font-weight: 400; color: #fff; line-height: 32px;">
Are you ready to make your business more organized?<br>Improve now!
</h3>
<div class="d-flex gap-3">
<a href="mailto:odoo@cybrosys.com" class="shop-btn" style="border-radius: 16px; border: 1px solid #ffffff33; background-color: #ffffff14; backdrop-filter: blur(10px); color: #fff; padding: 12px 16px; text-decoration: none;">
<span style="border-radius: 12px; background-color: #ffffff1a; backdrop-filter: blur(6px); padding: 12px;">
<img src="./assets/icons/banner-mail.svg" alt="Mail">
</span>
<span style="font-weight: 500;">odoo@cybrosys.com</span>
</a>
<a href="tel:+91 9074270811" class="shop-btn" style="border-radius: 16px; border: 1px solid #ffffff33; background-color: #ffffff14; backdrop-filter: blur(10px); color: #fff; padding: 12px 22px 12px 18px; text-decoration: none;">
<span style="border-radius: 12px; background-color: #ffffff1a; backdrop-filter: blur(6px); padding: 12px;">
<img src="./assets/icons/banner-call.svg" alt="Call">
</span>
<span style="font-weight: 500;">+91 9074270811</span>
</a>
</div>
</div>
<div class="position-absolute bottom-0 end-0">
<img src="./assets/icons/banner-pattern.svg" style="width: 540px;" alt="Pattern">
</div>
</div>
</div>
<!-- Tabs Section -->
<div class="mb-4 bg-white" style="border: 1px solid #ebeef2; border-radius: 6px; box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.10);">
<ul class="nav nav-tabs justify-content-center bg-white py-2" id="myTab" role="tablist" style="border-radius: 6px 6px 0 0;">
<li class="nav-item">
<a class="nav-link active" id="overview-tab" data-bs-toggle="tab" href="#overview" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">Screenshots</a>
</li>
<li class="nav-item">
<a class="nav-link" id="feature-tab" data-bs-toggle="tab" href="#feature" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" id="faq-tab" data-bs-toggle="tab" href="#faq" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" id="releases-tab" data-bs-toggle="tab" href="#releases" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">Releases</a>
</li>
</ul>
<div class="tab-content p-md-5 p-2 py-3" id="myTabContent">
<!-- Screenshots Tab -->
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<div class="position-relative mb-4" style="border-radius: 10px;">
<img src="//apps.odoocdn.com/apps/assets/17.0/ks_dashboard_ninja/ai-img/o3.png?007008f" class="w-100 h-100 position-absolute img-fluid" loading="lazy" alt="Background">
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Configuration of</span>
<span style="color: var(--primary-color);">New menu</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
The user should be in any of the Administration security groups:
Access Rights or Settings. Add the users to the new security
group to give access to the new menu
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot1.png" class="img-fluid" loading="lazy" alt="Screenshot 1">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">New menu</span>
<span style="color: var(--primary-color);"></span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Open Settings App and enable the developer mode. Technical ->
Database Structure -> View Any Model.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot2.png" class="img-fluid" loading="lazy" alt="Screenshot 2">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Fill fields for </span>
<span style="color: var(--primary-color);">tree view</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Select the View Type as Tree and enter the model name. If the
model name is known, type to get the model in the dropdown. The
model description will be shown in the drop-down.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot3.png" class="img-fluid" loading="lazy" alt="Screenshot 3">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Use the domain for </span>
<span style="color: var(--primary-color);">filter records</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Add the domain for filtering the records. To get all records,
leave the domain as empty.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot5.png" class="img-fluid" loading="lazy" alt="Screenshot 4">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">View the available </span>
<span style="color: var(--primary-color);">records</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
We can see the number of records after filtering the records
using the domain. Click on the View button to view the records.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot6.png" class="img-fluid" loading="lazy" alt="Screenshot 4">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Tree </span>
<span style="color: var(--primary-color);">view</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
All the records for the selected model with the filter domain
will be listed in the tree view.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot7.png" class="img-fluid" loading="lazy" alt="Screenshot 4">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Open the form view of </span>
<span style="color: var(--primary-color);">any record</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Click on any record from the tree view to get the form view of
that record.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot8.png" class="img-fluid" loading="lazy" alt="Screenshot 4">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Fill fields for </span>
<span style="color: var(--primary-color);">form view</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Select the View Type as Form and enter the ID of the record and
the model name. Then click the View button to view the record in
form view.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot9.png" class="img-fluid" loading="lazy" alt="Screenshot 4">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);"> Form </span>
<span style="color: var(--primary-color);">view</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
The record for the selected model can be viewed in the form
view.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm" style="background-color: #fff; border-radius: 10px;">
<img src="./assets/screenshots/screenshot10.png" class="img-fluid" loading="lazy" alt="Screenshot 4">
</div>
</div>
</div>
</div>
</div>
<!-- Features Tab -->
<div class="tab-pane fade py-1" id="feature" role="tabpanel" aria-labelledby="feature-tab">
<div class="row py-4">
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex flex-column align-items-start h-100" style="padding: 30px; border-radius: 12px; background-color: #faf8ff;">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; border-radius: 50%; background-color: #7847d9; margin-right: 10px;">
<i class="fa fa-star" style="color: #fff; font-size: 14px;"></i>
</div>
<p style="color: #1a202c; font-weight: 600; font-size: 1.2rem; margin-bottom: 2px;">
Available in Odoo 18.0 Community,Enterprise and Odoo.sh.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex flex-column align-items-start h-100" style="padding: 30px; border-radius: 12px; background-color: #faf8ff;">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; border-radius: 50%; background-color: #7847d9; margin-right: 10px;">
<i class="fa fa-star" style="color: #fff; font-size: 14px;"></i>
</div>
<p style="color: #1a202c; font-weight: 600; font-size: 1.2rem; margin-bottom: 2px;">
The records can be viewed in either list or form view.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- FAQs Tab -->
<div class="tab-pane fade" id="faq" role="tabpanel" aria-labelledby="faq-tab">
<div class="row" style="background-color: #fff;">
<div class="col-md-12">
<div class="accordion mb-4" id="accordion_faq">
<div style="margin: 1rem 0;">
<div class="card-header collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFAQOne" aria-expanded="false" aria-controls="collapseFAQOne" style="cursor: pointer; background-color: #f8f8f8; border: none; border-top-right-radius: 10px; border-top-left-radius: 10px; padding: 12px 24px;">
<a class="card-title text-decoration-none" style="font-size: 18px; line-height: 30px; font-weight: 500; color: #040f3a;">
What does this module do?
<img alt=""
class="float-end"
src="//apps.odoocdn.com/apps/assets/16.0/index_test_odoo/assets/icons/down.svg?6ef7fd7"
width="25px">
</a>
</div>
<div id="collapseFAQOne" class="accordion-collapse collapse" aria-labelledby="collapseFAQOne" data-bs-parent="#accordion_faq" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; border: 1px solid #f8f8f8; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
<p style="padding: 0.75rem 1.25rem; font-size: 16px; line-height: 27px; color: #888; font-weight: normal;">
This module allows users to view and
interact with records of a selected Odoo
model through the List View or Form View interface.
It makes record management simpler and more efficient.
</p>
</div>
</div>
<div style="margin: 1rem 0;">
<div class="card-header collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFAQThree" aria-expanded="false" aria-controls="collapseFAQThree" style="cursor: pointer; background-color: #f8f8f8; border: 1px solid #f8f8f8; border-top-right-radius: 10px; border-top-left-radius: 10px; padding: 12px 24px;">
<a class="card-title text-decoration-none" style="font-size: 18px; line-height: 30px; font-weight: 500; color: #040f3a;">
Which models can I view using this module?
<img alt=""
class="float-end"
src="//apps.odoocdn.com/apps/assets/16.0/index_test_odoo/assets/icons/down.svg?6ef7fd7"
width="25px">
</a>
</div>
<div id="collapseFAQThree" class="accordion-collapse collapse" aria-labelledby="collapseFAQThree" data-bs-parent="#accordion_faq" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; border: 1px solid #f8f8f8; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
<p style="padding: 0.75rem 1.25rem; font-size: 16px; line-height: 27px; color: #888; font-weight: normal;">
You can configure this module to
display records from any standard model
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Releases Tab -->
<div class="tab-pane fade" id="releases" role="tabpanel" aria-labelledby="releases-tab">
<div class="row pt-5 m-0">
<div class="col-md-3">
<h4 style="font-size: 16px; font-weight: 600; color: #514f4f; margin: 0; line-height: 26px;">
Latest Release 18.0.1.0.0
</h4>
<span style="font-size: 14px; color: #7a7979; display: block; margin-bottom: 20px;">
28th July, 2025
</span>
</div>
<div class="col-md-8">
<div style="padding: 0 0 40px;">
<div style="margin: 0 0 10px;">
<div style="display: inline-block; padding: 0px 8px; color: #514f4f; background-color: #ffd8d8; border-radius: 20px;">
Add
</div>
</div>
<div class="d-flex m-0" style="color: #7a7979;">
<ul class="pl-3 mb-0">
<li>Initial Commit</li>
</ul>
</div>
</div>
<div style="border-bottom: 1px solid #e3e3e3;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Related Products -->
<section class="oe_container mt32">
<h2 style="color: #091e42; font-family: Montserrat; text-align: center; margin: 25px auto; text-transform: uppercase;">
<b>Related Products</b>
</h2>
<div id="demo" class="row carousel slide mt64 mb32" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/18.0/hide_menu_user" target="_blank" style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
<img class="img img-responsive center-block" style="max-width: 100%;" src="./assets/modules/b1.png" alt="Sale Discount">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Hide Any Menu User Wise
</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/18.0/whatsapp_redirect" target="_blank" style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
<img class="img img-responsive center-block" style="max-width: 100%;" src="./assets/modules/b2.png" alt="Advanced Sales">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Send Whatsapp Message Odoo18
</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/18.0/rest_api_odoo" target="_blank" style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
<img class="img img-responsive center-block" style="max-width: 100%;" src="./assets/modules/b3.png" alt="Subscription">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Odoo rest API
</h4>
</div>
</a>
</div>
</div>
<div class="carousel-item">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/18.0/web_login_styles" target="_blank" style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
<img class="img img-responsive center-block" style="max-width: 100%;" src="./assets/modules/b4.png" alt="Product Image">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Customize Login Page Style
</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/18.0/whatsapp_mail_messaging" target="_blank" style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
<img class="img img-responsive center-block" style="max-width: 100%;" src="./assets/modules/b5.png" alt="Multi UoM">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Odoo Whatsapp Connector
</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/18.0/login_user_detail" target="_blank" style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
<img class="img img-responsive center-block" style="max-width: 100%;" src="./assets/modules/b6.png" alt="Invoice">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
User Log Details
</h4>
</div>
</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-bs-slide="prev" style="margin-left: -30px; width: 35px; color: #000;">
<span class="carousel-control-prev-icon">
<i class="fa fa-chevron-left" style="font-size: 24px;"></i>
</span>
</a>
<a class="carousel-control-next" href="#demo" data-bs-slide="next" style="margin-right: -30px; width: 35px; color: #000;">
<span class="carousel-control-next-icon">
<i class="fa fa-chevron-right" style="font-size: 24px;"></i>
</span>
</a>
</div>
</section>
<!-- Services Section -->
<section id="services" class="mt-5 section-card">
<div class="text-center mt-4">
<h3 style="color: #000; font-family: Montserrat; font-size: 40px; font-weight: 700; text-transform: uppercase; padding-bottom: 50px;">
Our Services
</h3>
</div>
<div class="row mt-3">
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #ffe2e5; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #fa5a7d; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/gear.svg" class="img-responsive" height="28" width="28" alt="Gear">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Odoo Customization</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #fff4de; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #ff947a; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/wrench-icon.svg" class="img-responsive" height="28" width="28" alt="Wrench">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Odoo Implementation</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #dcfce7; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #3cd856; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/life-ring-icon.svg" class="img-responsive" height="28" width="28" alt="Life Ring">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Odoo Support</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #f3e8ff; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #bf83ff; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/arrows-repeat.svg" class="img-responsive" height="28" width="28" alt="Arrows">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Odoo Migration</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #f1f9ff; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #01649c; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/puzzle-piece-icon.svg" class="img-responsive" height="28" width="28" alt="Puzzle">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Odoo Integration</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #edf8ed; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #69cc70; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/odoo-consultancy.svg" class="img-responsive" height="28" width="28" alt="Consultancy">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Odoo Consultancy</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #f1f6ff; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #2e4556; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/odoo-licencing.svg" class="img-responsive" height="28" width="28" alt="Licensing">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Odoo Licensing</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration: none;">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" style="background-color: #faf6ea; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center" style="background-color: #fcd12c; border-radius: 50%; height: 56px; width: 56px;">
<img src="./assets/icons/hire-odoo.svg" class="img-responsive" height="28" width="28" alt="Hire">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Hire Odoo Developer</span>
</div>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
rtl: true,
loop: true,
margin: 10,
nav: true,
responsive: {
0: { items: 1 },
600: { items: 3 },
1000: { items: 3 }
}
});
</script>
</body>
</html>