Cybrosys Technologies
6 months ago
64 changed files with 6138 additions and 0 deletions
@ -0,0 +1,52 @@ |
|||
.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg |
|||
:target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html |
|||
:alt: License: LGPL-3 |
|||
|
|||
Chameleon Multi color Backend Theme |
|||
=================================== |
|||
* Configurable multi color backend theme for Odoo 18,Only Admin can have the role to create, update, and removing the themes |
|||
|
|||
Installation |
|||
============ |
|||
- www.odoo.com/documentation/18.0/setup/install.html |
|||
- Install our custom addon |
|||
|
|||
License |
|||
------- |
|||
General Public License, Version 3 (LGPL v3). |
|||
(https://www.gnu.org/licenses/lgpl-3.0-standalone.html) |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
Credits |
|||
------- |
|||
* Developer: |
|||
Linto CT @ Cybrosys |
|||
Sanjith Rashin @ Cybrosys |
|||
V14 Dino @ Cybrosys |
|||
V15 Sigha Ck @ Cybrosys |
|||
V16 Sigha Ck @ Cybrosys |
|||
V17 Fouzan M @ Cybrosys |
|||
V18 Rosmy John @ Cybrosys |
|||
|
|||
Contacts |
|||
-------- |
|||
* Mail Contact : odoo@cybrosys.com |
|||
|
|||
Bug Tracker |
|||
----------- |
|||
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. |
|||
|
|||
Maintainer |
|||
========== |
|||
.. image:: https://cybrosys.com/images/logo.png |
|||
:target: https://cybrosys.com |
|||
This module is maintained by Cybrosys Technologies. |
|||
|
|||
For support and more information, please visit https://www.cybrosys.com |
|||
|
|||
Further information |
|||
=================== |
|||
HTML Description: `<static/description/index.html>`__ |
|||
@ -0,0 +1,23 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from . import controllers |
|||
from . import models |
|||
@ -0,0 +1,68 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
{ |
|||
"name": "Chameleon Multi Color Backend Theme", |
|||
"version": "18.0.1.0.0", |
|||
"category": "Themes/Backend", |
|||
"summary": "Configurable multi color backend theme for Odoo 18", |
|||
"description": """ |
|||
Configurable multi color backend theme for Odoo 18, |
|||
Only Admin can have the role to create, update, and removing the themes. |
|||
""", |
|||
'author': 'Cybrosys Techno Solutions', |
|||
'company': 'Cybrosys Techno Solutions', |
|||
'maintainer': 'Cybrosys Techno Solutions', |
|||
"website": "https://www.cybrosys.com", |
|||
"depends": ['web', 'mail'], |
|||
"data": [ |
|||
'security/security_groups.xml', |
|||
'security/ir.model.access.csv', |
|||
'data/theme_data.xml', |
|||
'views/login_templates.xml', |
|||
], |
|||
"assets": { |
|||
'web.assets_backend': [ |
|||
'web/static/lib/jquery/jquery.js', |
|||
'/multicolor_backend_theme/static/src/xml/sidebar_menu_icon.xml', |
|||
'/multicolor_backend_theme/static/src/xml/systray_ext.xml', |
|||
'/multicolor_backend_theme/static/src/scss/theme_style_backend.scss', |
|||
'/multicolor_backend_theme/static/src/css/backend.css', |
|||
'/multicolor_backend_theme/static/src/wcolpick/wcolpick.css', |
|||
'/multicolor_backend_theme/static/src/js/sidebar_menu.js', |
|||
'/multicolor_backend_theme/static/src/wcolpick/wcolpick.js', |
|||
'/multicolor_backend_theme/static/src/js/search_apps.js', |
|||
'/multicolor_backend_theme/static/src/js/systray_item.js', |
|||
], |
|||
'web.assets_frontend': [ |
|||
'multicolor_backend_theme/static/src/scss/theme_style.scss', |
|||
'multicolor_backend_theme/static/src/js/login_page.js' |
|||
], |
|||
}, |
|||
'images': [ |
|||
'static/description/banner.jpg', |
|||
'static/description/theme_screenshot.jpg', |
|||
], |
|||
'license': 'LGPL-3', |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from . import theme_config |
|||
@ -0,0 +1,40 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from odoo import http |
|||
from odoo.http import request |
|||
|
|||
|
|||
class LoginPage(http.Controller): |
|||
"""Controller for the login page. This controller provides methods for |
|||
retrieving the active theme's main color, view font color, and theme font |
|||
color and updating the theme of the login page.""" |
|||
@http.route('/active_theme', auth='public', type='json') |
|||
def find_active_theme(self): |
|||
"""find the active theme for updating theme of login page""" |
|||
active_theme = request.env['theme.config'].sudo().search([ |
|||
('is_theme_active', '=', True) |
|||
]) |
|||
return {'id': active_theme[0].id, |
|||
'theme_main_color': active_theme[0].theme_main_color, |
|||
'view_font_color': active_theme[0].view_font_color, |
|||
'theme_font_color': active_theme[0].theme_font_color, |
|||
} if active_theme else [] |
|||
@ -0,0 +1,26 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<odoo> |
|||
<data noupdate="1"> |
|||
<record id="theme_config_theme_1" model="theme.config"> |
|||
<field name="name">Theme 1</field> |
|||
<field name="theme_main_color">#6fb702</field> |
|||
<field name="theme_font_color">#fff</field> |
|||
<field name="view_font_color">#333</field> |
|||
<field name="is_theme_active">true</field> |
|||
</record> |
|||
<record id="theme_config_theme_2" model="theme.config"> |
|||
<field name="name">Theme 2</field> |
|||
<field name="theme_main_color">#404a5e</field> |
|||
<field name="theme_font_color">#fff</field> |
|||
<field name="view_font_color">#404a5e</field> |
|||
<field name="is_theme_active">false</field> |
|||
</record> |
|||
<record id="theme_config_theme_3" model="theme.config"> |
|||
<field name="name">Theme 3</field> |
|||
<field name="theme_main_color">#f39b12</field> |
|||
<field name="theme_font_color">#000</field> |
|||
<field name="view_font_color">#333</field> |
|||
<field name="is_theme_active">false</field> |
|||
</record> |
|||
</data> |
|||
</odoo> |
|||
@ -0,0 +1,6 @@ |
|||
## Module <multicolor_backend_theme> |
|||
|
|||
#### 18.10.2024 |
|||
#### Version 18.0.1.0.0 |
|||
#### ADD |
|||
- Initial Commit for Chameleon Multi color Backend Theme |
|||
@ -0,0 +1,22 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from . import theme_config |
|||
@ -0,0 +1,57 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from odoo import api, fields, models |
|||
|
|||
|
|||
class ThemeConfig(models.Model): |
|||
"""Model for storing configuration settings related to the theme""" |
|||
_name = 'theme.config' |
|||
_description = "Model for storing configuration related to the theme" |
|||
|
|||
name = fields.Char(help="Theme name") |
|||
theme_main_color = fields.Char(help="main theme color") |
|||
view_font_color = fields.Char(help="backend font color") |
|||
theme_font_color = fields.Char(help="backend view font color") |
|||
is_theme_active = fields.Boolean(string="Active Theme") |
|||
|
|||
@api.model |
|||
def create_new_theme(self): |
|||
"""function to create a new theme""" |
|||
theme_obj = self.create({ |
|||
'theme_main_color': '#6fb702', |
|||
'view_font_color': '#333', |
|||
'theme_font_color': '#fff', |
|||
'is_theme_active': False, |
|||
}) |
|||
theme_obj.name = 'Theme ' + str(theme_obj.id) |
|||
return theme_obj.read(['name', 'theme_main_color', 'view_font_color', |
|||
'theme_font_color', 'is_theme_active']) |
|||
|
|||
@api.model |
|||
def update_active_theme(self, theme_id): |
|||
"""function to update active theme""" |
|||
theme = {} |
|||
for record in self.search([]): |
|||
if record.is_theme_active: |
|||
theme['prev'] = record.id |
|||
record.is_theme_active = record.id == theme_id |
|||
return theme |
|||
|
@ -0,0 +1,13 @@ |
|||
<?xml version="1.0" encoding="utf-8" ?> |
|||
<odoo> |
|||
<record id="multicolor_theme_module_access" model="ir.module.category" > |
|||
<field name="name">Multicolor Backend Theme </field> |
|||
<field name="description">User access levels for Theme selection</field> |
|||
<field name="sequence">10</field> |
|||
</record> |
|||
<record id="multicolor_theme_manager_access" model="res.groups"> |
|||
<field name="name">Administrator</field> |
|||
<field name="category_id" ref="multicolor_theme_module_access"/> |
|||
<field name="users" eval="[(4, ref('base.user_root')), (4, ref('base.user_admin'))]"/> |
|||
</record> |
|||
</odoo> |
|||
|
After Width: | Height: | Size: 244 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 273 KiB |
|
After Width: | Height: | Size: 201 KiB |
|
After Width: | Height: | Size: 233 KiB |
|
After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 212 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 199 KiB |
|
After Width: | Height: | Size: 265 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 171 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 143 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 298 KiB |
|
After Width: | Height: | Size: 202 KiB |
|
After Width: | Height: | Size: 885 B |
@ -0,0 +1,915 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>app index</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" /> |
|||
<style> |
|||
:root { |
|||
--primary-color: #F5C000; |
|||
; |
|||
--bg-white: #fff; |
|||
--text-color: #121212; |
|||
--text-color-light: #64728f; |
|||
} |
|||
|
|||
body { |
|||
font-family: "Montserrat", sans-serif; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<!-- overview --> |
|||
<div class="container"> |
|||
|
|||
<!-- support-header --> |
|||
|
|||
<div class="supports my-5 py-3" style="border-bottom: 1px solid #e7e7e7;"> |
|||
<div class="row justify-content-between"> |
|||
<div class="col-4"> |
|||
<div class="my-3"> |
|||
<img src="//apps.odoocdn.com/apps/assets/17.0/theme_boec/images/Cybrosys.png?fcdde35" |
|||
style="width:auto !important; height:40px !important"> |
|||
</div> |
|||
</div> |
|||
<div class="col-6"> |
|||
<div class="row" style="margin-top:10px"> |
|||
|
|||
<div class="my-3 d-flex align-items-center justify-content-end"> |
|||
<span class="me-3"><b>Supports: </b></span> |
|||
<div class="text-center" |
|||
style="background-color:#017E84 !important; font-size:0.8rem !important; color:#fff !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
|||
Community |
|||
</div> |
|||
<div class="text-center" |
|||
style="background-color:#875A7B !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
|||
Enterprise |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row" style="margin-top:10px"> |
|||
<div class="d-flex align-items-center justify-content-end"> |
|||
<span class="me-3"><b>Availability: </b></span> |
|||
<div class="text-center col" |
|||
style="border:1px solid #017E84; font-size:0.8rem !important; color:#017E84 !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important"> |
|||
<i class="fa fa-times" style="color:red"></i> Odoo Online |
|||
</div> |
|||
<div class="text-center col" |
|||
style="font-size:0.8rem !important; border:1px solid #714b67; color:#714b67 !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important"> |
|||
<i class="fa fa-check" style="color:green"></i> Odoo.sh |
|||
</div> |
|||
<div class="text-center col" |
|||
style="font-size:0.8rem !important; color:#5B899E !important; border:1px solid #5B899E; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important"> |
|||
<i class="fa fa-check" style="color:green"></i> On Premise |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
|
|||
<!-- banner-section --> |
|||
<div class="my-5"> |
|||
<div class=""> |
|||
<img src="./theme_screenshot.jpg" class="img-fluid" style="border-radius: 16px;"> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
|
|||
|
|||
<!-- widgets-features --> |
|||
|
|||
<div class="" style="border-radius: 12px; |
|||
background: #121212; padding: 80px 40px;"> |
|||
<div class="position-relative" style="color: #FFF; |
|||
text-align: center; |
|||
font-size: 46.875px; |
|||
font-style: normal; |
|||
font-weight: 600; padding-bottom: 40px; "> |
|||
<h2 style="color: #fff;"> Chameleon Multi Color Backend Theme |
|||
</h2> |
|||
|
|||
<p style="color: #999; |
|||
text-align: center; |
|||
font-size: 15.625px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 25.6px;">Choose your color by yourself!</p> |
|||
</div> |
|||
|
|||
|
|||
<div class="d-flex justify-content-center gap-3 flex-wrap"> |
|||
<div class="d-flex align-items-center gap-2" |
|||
style="border-radius: 12px; background: #1F1F1F; padding: 16px 22px; color: #fff;"> |
|||
<img src="./img/gear.svg" class="img-responsive" height="22px" width="22px"> |
|||
<span>Carefully Crafted</span> |
|||
</div> |
|||
<div class="d-flex align-items-center gap-2" |
|||
style="border-radius: 12px; background: #1F1F1F; padding: 16px 22px; color: #fff;"> |
|||
<img src="./img/gear.svg" class="img-responsive" height="22px" width="22px"> |
|||
<span>Responsive Design</span> |
|||
</div> |
|||
<div class="d-flex align-items-center gap-2" |
|||
style="border-radius: 12px; background: #1F1F1F; padding: 16px 22px; color: #fff;"> |
|||
<img src="./img/gear.svg" class="img-responsive" height="22px" width="22px"> |
|||
<span>Quality Checked</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!--feature section --> |
|||
|
|||
<div class="my-5" style="padding: 100px; background-color: #f1f5fd; border-radius: 16px;"> |
|||
<div class="container"> |
|||
<div class="row mb-60"> |
|||
<div class="col-lg-12 d-flex justify-content-center align-items-center flex-wrap gap-3"> |
|||
<div class="position-relative" ; style=" |
|||
text-align: center; |
|||
font-size: 46.875px; |
|||
font-style: normal; |
|||
padding-bottom: 40px; "> |
|||
<h2 style="font-weight: 600;">Our Features</h2> |
|||
|
|||
<p style="color: #999; |
|||
text-align: center; |
|||
font-size: 15.625px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 25.6px;"></p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row g-4"> |
|||
<div class="col-lg-4 col-md-6" style="visibility: visible;"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Modified Font</a></h4> |
|||
|
|||
<!-- <p style=" font-size: 16px;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 1.5;--> |
|||
<!-- color: #212529;">Revolutionize your digital presence with our Web & App Development services—innovative solutions,--> |
|||
<!-- user-centric experiences.</p>--> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff; height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">New Color Combination</a></h4> |
|||
|
|||
<!-- <p style="font-size: 16px;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 1.5;--> |
|||
<!-- color: #212529;">Strategic guidance for success: Elevate your business with our expert Consulting Services, tailored--> |
|||
<!-- for growth and innovation..</p>--> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff; height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Full Screen View</a></h4> |
|||
|
|||
<!-- <p style="font-size: 16px;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 1.5;--> |
|||
<!-- color: #212529;">Guard your digital fortress with our Cyber Security solutions—ensuring robust protection against--> |
|||
<!-- evolving threats.</p>--> |
|||
</div> |
|||
|
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Stages are separated in view</a></h4> |
|||
|
|||
<!-- <p style="font-size: 16px;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 1.5;--> |
|||
<!-- color: #212529;">Revolutionize retail with our E-commerce Solutions: seamless, secure, and tailored for your--> |
|||
<!-- business's success.</p>--> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Clean Layout</a></h4> |
|||
|
|||
<!-- <p style="font-size: 16px;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 1.5;--> |
|||
<!-- color: #212529;">Empower decision-making with insightful Data Analytics—uncover valuable insights for strategic--> |
|||
<!-- business advancements.</p>--> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Buttons with new colors</a></h4> |
|||
|
|||
<!-- <p style="font-size: 16px;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 1.5;--> |
|||
<!-- color: #212529;">Effortless data management with our Cloud Services—seamless, secure, and scalable solutions for--> |
|||
<!-- modern businesses.</p>--> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
<section class="container my-5"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<ul role="tablist" class="nav nav-tabs justify-content-center d-flex justify-content-center" data-tabs="tabs" |
|||
style="border:none; background-color:unset; margin:0 auto"> |
|||
<li class="nav-item" |
|||
style="border-top-right-radius:10px; border-top-left-radius:10px; margin-right:10px; border:1px solid #D6E0FF; border-bottom:0"> |
|||
<a href="#Features" data-bs-toggle="tab" aria-expanded="true" class="show" |
|||
style="text-transform:uppercase;display: block; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px;text-decoration: none; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent"> |
|||
Features</a> |
|||
</li> |
|||
<li class="nav-item" |
|||
style="border-top-right-radius:10px; border-top-left-radius:10px; margin-right:10px; border:1px solid #D6E0FF; border-bottom:0"> |
|||
<a href="#Screenshot" data-bs-toggle="tab" aria-expanded="true" class="show" |
|||
style="text-transform:uppercase;display: block; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px;text-decoration: none; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent"> |
|||
Screenshot |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="col-md-12 tab-content ui-front" |
|||
style="border-radius:20px;border: 1px solid #D6E0FF; height:auto;padding: 20px;"> |
|||
<div class="tab-pane fade" id="Screenshot" role="tabpanel" aria-labelledby="screenshot-1"> |
|||
<div class="row" style="padding:4rem 2.5rem 0 !important; background-color:#fff !important"> |
|||
<section class="mb-5" |
|||
style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Login Page</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/login.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;"> Expanded side bar</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/exp_sidebar_1.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Minimized side bar</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/min_sidebar_1.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Tree view</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/tree_view_1.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Kanban view</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/kanban_view.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Form view</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/form_view.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Color picker</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/color_picker_1.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Control panel</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/control_panel.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Chat Box</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/chatbot1.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Advanced Search</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/adv_search_1.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
<section class="mb-5" style="background: linear-gradient(to top, rgb(253 254 255), #f1f5fd); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;padding-bottom: 0px;"> |
|||
<span class="label" style="font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">Only Administrator can create, update and |
|||
remove theme.</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/admin_access.png" class="img-fluid" alt=""> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="tab-pane active show fade" id="Features" role="tabpanel" aria-labelledby="features-1"> |
|||
<section class="oe_container pt16 mt16 pb-5"> |
|||
<section class="mt-5"> |
|||
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px;"> |
|||
<div> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Carefully Crafted</h3> |
|||
<!-- <p class="des" style="color: #c7c7c7;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 24px;--> |
|||
<!-- margin-bottom: 0;">Popups in Dark Mode</p>--> |
|||
</div> |
|||
<!-- <div class="mt-5">--> |
|||
<!-- <img src="img/4.png" alt="Grid item" class="img-fluid">--> |
|||
<!-- </div>--> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
<div> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Responsive Design</h3> |
|||
</div> |
|||
<!-- <div class="mt-5">--> |
|||
<!-- <img src="./img/9.png" alt="Grid item" class="img-fluid">--> |
|||
<!-- </div>--> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
|
|||
<!--row-2 --> |
|||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;"> |
|||
<div> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Quality Checked</h3> |
|||
<p class="des" style="color: #c7c7c7; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin-bottom: 0;"> |
|||
</div> |
|||
<!-- <div class="mt-5">--> |
|||
<!-- <img src="./img/8.png" alt="Grid item" class="img-fluid">--> |
|||
<!-- </div>--> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
|
|||
</div> |
|||
<!-- --> |
|||
</section> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<!--sections --> |
|||
|
|||
|
|||
|
|||
<!-- section content --> |
|||
<!-- <section class="mb-5"--> |
|||
<!-- style="background: linear-gradient(to top, rgb(253 254 255), #E5EEFF); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;">--> |
|||
<!-- <div class="row d-flex align-items-center">--> |
|||
<!-- <div class="col col-12 col-md-12 col-lg-6">--> |
|||
<!-- <div style="padding: 20px;">--> |
|||
<!-- <h4 class="" style="font-size: 46px;">--> |
|||
<!-- <span class="gradient" style="background: linear-gradient(248.96deg, #FF9C8D 45.28%, #D655A5 65.79%, #6053CB 85.87%);--> |
|||
<!-- background-clip: text;--> |
|||
<!-- -webkit-background-clip: text;--> |
|||
<!-- -webkit-text-fill-color: transparent;--> |
|||
<!-- font-weight: 700;--> |
|||
<!-- display: inline-block;--> |
|||
<!-- width: 100%;"></span><br>--> |
|||
<!-- <span class="gradient" style="background: linear-gradient(248.96deg, #FF9C8D 45.28%, #D655A5 65.79%, #6053CB 85.87%);--> |
|||
<!-- background-clip: text;--> |
|||
<!-- -webkit-background-clip: text;--> |
|||
<!-- -webkit-text-fill-color: transparent;--> |
|||
<!-- font-weight: 700;--> |
|||
<!-- display: inline-block;--> |
|||
<!-- width: 100%;"><span class="under-line">Unlock</span> your online</span><br>--> |
|||
<!-- <span class="gradient" style="background: linear-gradient(248.96deg, #FF9C8D 45.28%, #D655A5 65.79%, #6053CB 85.87%);--> |
|||
<!-- background-clip: text;--> |
|||
<!-- -webkit-background-clip: text;--> |
|||
<!-- -webkit-text-fill-color: transparent;--> |
|||
<!-- font-weight: 700;--> |
|||
<!-- display: inline-block;--> |
|||
<!-- width: 100%;">sales potential.</span>--> |
|||
<!-- </h4>--> |
|||
|
|||
<!-- <div class="mt-4">--> |
|||
<!-- <p style="color: #444;">Now take advantage of everything your dashboard has to offer even on the go. Our--> |
|||
<!-- design are now fully responsive, enabling you to view and manage everything from the comfort of your--> |
|||
<!-- mobile device.</p>--> |
|||
<!-- <ul class="d-flex flex-column gap-3 ms-0 ps-0 mt-4">--> |
|||
<!-- <li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"--> |
|||
<!-- style="width: 24px;"><span style=" color: #444;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 32px;">Appealing card hover style</span></li>--> |
|||
<!-- <li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"--> |
|||
<!-- style="width: 24px;"><span style=" color: #444;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 32px;">Detailed product filtering</span></li>--> |
|||
<!-- <li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"--> |
|||
<!-- style="width: 24px;"><span style=" color: #444;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 32px;">Modernized mini basket</span></li>--> |
|||
<!-- <li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"--> |
|||
<!-- style="width: 24px;"><span style=" color: #444;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 32px;">Cutting-edge single product</span></li>--> |
|||
<!-- </ul>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="col col-12 col-md-12 col-lg-6">--> |
|||
<!-- <div>--> |
|||
<!-- <div>--> |
|||
<!-- <img class="img-fluid" src="./img/screenshot-5.svg" style="--> |
|||
<!-- border-radius: 20px;--> |
|||
<!-- ">--> |
|||
<!-- </div>--> |
|||
|
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- </section>--> |
|||
|
|||
<!-- 2 --> |
|||
|
|||
<!-- <section class=""--> |
|||
<!-- style="background: linear-gradient(to top, rgb(253 254 255), #E5EEFF); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;">--> |
|||
<!-- <div class="row d-flex align-items-center">--> |
|||
<!-- <div class="col col-12 col-md-12 col-lg-6">--> |
|||
<!-- <div>--> |
|||
<!-- <div>--> |
|||
<!-- <img class="img-fluid" src="./img/screenshot-5.svg" style="--> |
|||
<!-- border-radius: 20px;--> |
|||
<!-- ">--> |
|||
<!-- </div>--> |
|||
|
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="col col-12 col-md-12 col-lg-6">--> |
|||
<!-- <div style="padding: 20px;">--> |
|||
<!-- <h4 class="" style="font-size: 46px;">--> |
|||
<!-- <span class="gradient" style="background: linear-gradient(248.96deg, #FF9C8D 45.28%, #D655A5 65.79%, #6053CB 85.87%);--> |
|||
<!-- background-clip: text;--> |
|||
<!-- -webkit-background-clip: text;--> |
|||
<!-- -webkit-text-fill-color: transparent;--> |
|||
<!-- font-weight: 700;--> |
|||
<!-- display: inline-block;--> |
|||
<!-- width: 100%;"><span class="under-line">Fully Responsive </span></span><br>--> |
|||
<!-- <span class="gradient" style="background: linear-gradient(248.96deg, #FF9C8D 45.28%, #D655A5 65.79%, #6053CB 85.87%);--> |
|||
<!-- background-clip: text;--> |
|||
<!-- -webkit-background-clip: text;--> |
|||
<!-- -webkit-text-fill-color: transparent;--> |
|||
<!-- font-weight: 700;--> |
|||
<!-- display: inline-block;--> |
|||
<!-- width: 100%;">Layout</span>--> |
|||
<!-- </h4>--> |
|||
|
|||
<!-- <div class="mt-4">--> |
|||
<!-- <p style="color: #444;">Now take advantage of everything your dashboard has to offer even on the go. Our--> |
|||
<!-- design are now fully responsive, enabling you to view and manage everything from the comfort of your--> |
|||
<!-- mobile device.</p>--> |
|||
<!-- <ul class="d-flex flex-column gap-3 ms-0 ps-0 mt-4">--> |
|||
<!-- <li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"--> |
|||
<!-- style="width: 24px;"><span style=" color: #444;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 32px;">Detailed product filtering</span></li>--> |
|||
<!-- <li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"--> |
|||
<!-- style="width: 24px;"><span style=" color: #444;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 32px;">Modernized mini basket</span></li>--> |
|||
<!-- <li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"--> |
|||
<!-- style="width: 24px;"><span style=" color: #444;--> |
|||
<!-- font-size: 16px;--> |
|||
<!-- font-style: normal;--> |
|||
<!-- font-weight: 400;--> |
|||
<!-- line-height: 32px;">Cutting-edge single product</span></li>--> |
|||
<!-- </ul>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
|
|||
<!-- </div>--> |
|||
<!-- </section>--> |
|||
|
|||
<!-- --> |
|||
|
|||
<!-- --> |
|||
|
|||
|
|||
|
|||
<div class="my-5"> |
|||
<!-- banner card --> |
|||
|
|||
|
|||
|
|||
<!-- service-section --> |
|||
|
|||
<section id="services" class="mt-5" style="border-radius: 16px; |
|||
border: 1px solid #EBEEF2; |
|||
background: var(--Neutral-N0, #FFF); |
|||
padding: 60px 40px; |
|||
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);"> |
|||
<div class="text-center mt-4"> |
|||
<h3 class="mb-0" style="color: #000; |
|||
text-align: center; |
|||
font-family: Montserrat; |
|||
font-size: 40px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: normal; |
|||
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="font-size:25px; font-weight:bold;background-color:#FFE2E5; margin:auto; 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="./img/gear.svg" class="img-responsive" height="28px" width="28px"> |
|||
</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="font-size:25px; font-weight:bold;background-color:#FFF4DE; margin:auto; 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="./img/wrench-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</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="font-size:25px; font-weight:bold;background-color:#DCFCE7; margin:auto; 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="./img/life-ring-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</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="font-size:25px; font-weight:bold;background-color:#F3E8FF; margin:auto; 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="./img/arrows-repeat.svg" class="img-responsive" height="28px" width="28px"> |
|||
</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="font-size:25px; font-weight:bold;background-color:#F1F9FF; margin:auto; 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="./img/puzzle-piece-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</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="font-size:25px; font-weight:bold;background-color:#EDF8ED; margin:auto; 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="./img/odoo-consultancy.svg" class="img-responsive" height="28px" width="28px"> |
|||
</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="font-size:25px; font-weight:bold;background-color:#F1F6FF; margin:auto; 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="./img/odoo-licencing.svg" class="img-responsive" height="28px" width="28px"> |
|||
</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="font-size:25px; font-weight:bold;background-color:#FAF6EA; margin:auto; 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="./img/hire-odoo.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span style="font-size: 18px; |
|||
color: var(--text-color); |
|||
font-weight: 600;">Hire Odoo Developer</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
</section> |
|||
<!-- --> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> |
|||
</html> |
|||
|
After Width: | Height: | Size: 461 KiB |
@ -0,0 +1,5 @@ |
|||
:root{ |
|||
--theme_main_color: #AD7B90 !default; |
|||
--theme_font_color: black !default; |
|||
--view_font_color |
|||
} |
|||
|
After Width: | Height: | Size: 106 KiB |
@ -0,0 +1,20 @@ |
|||
/** @odoo-module **/ |
|||
|
|||
import publicWidget from "@web/legacy/js/public/public_widget"; |
|||
import { rpc } from "@web/core/network/rpc"; |
|||
|
|||
publicWidget.registry.loginPage = publicWidget.Widget.extend({ |
|||
selector: '.oe_login_buttons', |
|||
async start() { |
|||
var data = await rpc('/active_theme') |
|||
if (data) { |
|||
this.$('.cybro-login-btn').css({ |
|||
'background-color': data.theme_main_color, |
|||
'color': data.theme_font_color |
|||
}); |
|||
this.$('.cybro-super-btn').css({ |
|||
'color': data.view_font_color |
|||
}); |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,74 @@ |
|||
/** @odoo-module */ |
|||
|
|||
import { NavBar } from "@web/webclient/navbar/navbar"; |
|||
const { fuzzyLookup } = require('@web/core/utils/search'); |
|||
import { computeAppsAndMenuItems } from "@web/webclient/menus/menu_helpers"; |
|||
const { onMounted } = owl; |
|||
import { patch } from "@web/core/utils/patch"; |
|||
|
|||
patch(NavBar.prototype, { |
|||
// For advance search bar feature, and this will enable a global search for apps and related content
|
|||
setup() { |
|||
super.setup(); |
|||
this._search_def = $.Deferred(); |
|||
let { apps, menuItems } = computeAppsAndMenuItems(this.menuService.getMenuAsTree("root")); |
|||
this._apps = apps; |
|||
this._searchableMenus = menuItems; |
|||
onMounted(() => this.onMounted()); |
|||
}, |
|||
onMounted() { |
|||
this.$search_container = $(".search-container"); |
|||
this.$search_input = $(".search-input input"); |
|||
this.$search_results = $(".search-results"); |
|||
this.$app_menu = $(".app-menu"); |
|||
this.$dropdown_menu = $(".dropdown-menu"); |
|||
}, |
|||
// to show the search results
|
|||
_searchMenusSchedule() { |
|||
this.$search_results.removeClass("o_hidden") |
|||
this.$app_menu.addClass("o_hidden"); |
|||
this._search_def.reject(); |
|||
this._search_def = $.Deferred(); |
|||
setTimeout(this._search_def.resolve.bind(this._search_def), 50); |
|||
this._search_def.done(this._searchMenus.bind(this)); |
|||
}, |
|||
// function for searching all apps and content
|
|||
_searchMenus() { |
|||
var query = this.$search_input.val() ; |
|||
if (query === "") { |
|||
this.$search_container.removeClass("has-results"); |
|||
this.$app_menu.removeClass("o_hidden"); |
|||
this.$search_results.empty(); |
|||
return; |
|||
} |
|||
// search for all apps
|
|||
var results = []; |
|||
fuzzyLookup(query, this._apps, (menu) => menu.label) |
|||
.forEach((menu) => { |
|||
results.push({ |
|||
category: "apps", |
|||
name: menu.label, |
|||
actionID: menu.actionID, |
|||
id: menu.id, |
|||
webIconData: menu.webIconData, |
|||
}); |
|||
}); |
|||
// search for all content
|
|||
fuzzyLookup(query, this._searchableMenus, (menu) => |
|||
(menu.parents + " / " + menu.label).split("/").reverse().join("/") |
|||
).forEach((menu) => { |
|||
results.push({ |
|||
category: "menu_items", |
|||
name: menu.parents + " / " + menu.label, |
|||
actionID: menu.actionID, |
|||
id: menu.id, |
|||
}); |
|||
}); |
|||
this.$search_container.toggleClass("has-results", Boolean(results.length)); |
|||
var resultsHtml = "" |
|||
results.forEach(function(result) { |
|||
resultsHtml += "<p class='search-items'><a href='/web#action=" + result["actionID"] + "&menu_id=" + result["id"] + "'>" + result["name"] + "</a></p>" |
|||
}) |
|||
this.$search_results.empty().append(resultsHtml) |
|||
}, |
|||
}); |
|||
@ -0,0 +1,43 @@ |
|||
/** @odoo-module **/ |
|||
|
|||
import { NavBar } from "@web/webclient/navbar/navbar"; |
|||
import { patch } from "@web/core/utils/patch"; |
|||
|
|||
patch(NavBar.prototype, { |
|||
onclickOpenSidebar(){ |
|||
$("#openSidebar").hide(); |
|||
$("#closeSidebar").show(); |
|||
$("#sidebar_panel").css({'display':'block'}); |
|||
//add class in navbar
|
|||
var navbar = $(".o_main_navbar"); |
|||
var navbar_id = navbar.data("id"); |
|||
$("nav").addClass(navbar_id); |
|||
navbar.addClass("small_nav"); |
|||
//add class in action-manager
|
|||
var action_manager = $(".o_action_manager"); |
|||
var action_manager_id = action_manager.data("id"); |
|||
$("div").addClass(action_manager_id); |
|||
action_manager.addClass("sidebar_margin"); |
|||
//add class in top_heading
|
|||
var top_head = $(".top_heading"); |
|||
var top_head_id = top_head.data("id"); |
|||
$("div").addClass(top_head_id); |
|||
top_head.addClass("sidebar_margin"); |
|||
}, |
|||
onclickCloseSidebar(){ |
|||
$("#closeSidebar").hide(); |
|||
$("#openSidebar").show(); |
|||
$("#sidebar_panel").css({'display':'none'}); |
|||
$(".o_action_manager").css({'margin-left': '0px'}); |
|||
//remove class in navbar
|
|||
var navbar = $(".o_main_navbar"); |
|||
var navbar_id = navbar.data("id"); |
|||
$("nav").removeClass(navbar_id); |
|||
navbar.removeClass("small_nav"); |
|||
//remove class in action-manager
|
|||
var action_manager = $(".o_action_manager"); |
|||
var action_manager_id = action_manager.data("id"); |
|||
$("div").removeClass(action_manager_id); |
|||
action_manager.removeClass("sidebar_margin"); |
|||
}, |
|||
}); |
|||
@ -0,0 +1,177 @@ |
|||
/** @odoo-module **/ |
|||
|
|||
import { NavBar } from "@web/webclient/navbar/navbar"; |
|||
import { patch } from "@web/core/utils/patch"; |
|||
import { useService } from "@web/core/utils/hooks"; |
|||
import { useState, onWillStart} from "@odoo/owl"; |
|||
import { user } from "@web/core/user"; |
|||
|
|||
patch(NavBar.prototype, { |
|||
setup(...args) { |
|||
super.setup(...args); |
|||
this.state = useState({ |
|||
theme_data: {}, |
|||
selected_theme: {} |
|||
}); |
|||
this.editMode = false; |
|||
this.orm = useService("orm"); |
|||
this.notification = useService('notification'); |
|||
this.current_theme = {}; |
|||
this.themes_by_id = {}; |
|||
// this.user = useService("user");
|
|||
onWillStart(async () => { |
|||
var self = this; |
|||
this.user = await user.hasGroup("multicolor_backend_theme.multicolor_theme_manager_access"); |
|||
const theme_data = await this.orm.searchRead('theme.config', [], ['name', 'is_theme_active', 'theme_font_color', 'theme_main_color', 'view_font_color']); |
|||
return $.when(theme_data).then((theme_data) => { |
|||
self.state.theme_data = theme_data; |
|||
theme_data.forEach(theme => { |
|||
if (theme.is_theme_active) { |
|||
self.selected_theme = theme; |
|||
} |
|||
self.themes_by_id[theme.id] = theme; |
|||
}) |
|||
if (!self.selected_theme) { |
|||
self.selected_theme = theme_data[0]; |
|||
self.selected_theme.is_theme_active = true; |
|||
} |
|||
self.state.selected_theme = self.selected_theme; |
|||
self.onClickApply(); |
|||
}); |
|||
}); |
|||
}, |
|||
// Handle the onChange event for selecting a theme.
|
|||
onChangeTheme() { |
|||
let themeId = parseInt($('.theme_select').val()); |
|||
this.state.selected_theme = this.themes_by_id[themeId]; |
|||
const colorProperties = ['theme_main_color', 'theme_font_color', 'view_font_color']; |
|||
colorProperties.forEach(property => { |
|||
document.getElementById(property).style.backgroundColor = this.state.selected_theme[property]; |
|||
}); |
|||
this.onChangeActive(); |
|||
}, |
|||
// Handle the event for selecting base color.
|
|||
onClickBaseColor(){ |
|||
var self = this; |
|||
const selectedTheme = this.themes_by_id[parseInt($('.theme_select').val())] |
|||
const colorProperties = ['theme_main_color', 'theme_font_color', 'view_font_color']; |
|||
colorProperties.forEach(property => { |
|||
$('#' + property).loads({ |
|||
layout: 'hex', |
|||
flat: false, |
|||
enableAlpha: false, |
|||
color: self.selected_theme.property, |
|||
onSubmit: function(ev) { |
|||
let elId = $(ev.el).attr('id'); |
|||
$('#' + elId).css('background-color', '#' + ev.hex); |
|||
$('#' + elId).val("#" + ev.hex); |
|||
$('#' + elId).hides(); |
|||
self._onchangeColor($(ev.el), ev.hex); |
|||
}, |
|||
onLoaded: function(ev) { |
|||
$('.picker').css('color', 'green'); |
|||
}, |
|||
onChange: function(ev) { |
|||
let elId = $(ev.el).attr('id'); |
|||
$('#' + elId).setColor(ev.hex, false); |
|||
} |
|||
}); |
|||
}) |
|||
}, |
|||
// Function to update color on backend.
|
|||
_onchangeColor(element, data) { |
|||
let current_theme = this.themes_by_id[$('.theme_select').val()]; |
|||
let colorCode = '#' + data; |
|||
if (colorCode != current_theme[element.attr('id')]) { |
|||
current_theme[element.attr('id')] = colorCode; |
|||
this.themes_by_id[current_theme.id][element.attr('id')] = '#' + data; |
|||
let field = element.attr('id'); |
|||
this.orm.write('theme.config', [current_theme.id], { |
|||
[field]: colorCode, |
|||
}); |
|||
}; |
|||
}, |
|||
// Handle the onClick event for applying the selected theme.
|
|||
async onClickApply(){ |
|||
if (this.state.selected_theme) { |
|||
this.appliedTheme = this.state.selected_theme; |
|||
document.documentElement.style.setProperty("--theme_main_color", this.state.selected_theme.theme_main_color); |
|||
document.documentElement.style.setProperty("--theme_font_color", this.state.selected_theme.theme_font_color); |
|||
document.documentElement.style.setProperty("--view_font_color", this.state.selected_theme.view_font_color); |
|||
$('.cybro-main-menu .input-group-text').css({ |
|||
'background-color': this.state.selected_theme.theme_main_color, |
|||
'border-color': this.state.selected_theme.theme_main_color, |
|||
'color': this.state.selected_theme.theme_font_color, |
|||
}); |
|||
$('.o_loading').css({ |
|||
'background-color': this.state.selected_theme.theme_main_color, |
|||
'color': this.state.selected_theme.theme_font_color, |
|||
}); |
|||
$('.btn-primary').css({ |
|||
'background-color': this.state.selected_theme.theme_main_color, |
|||
'color': this.state.selected_theme.theme_font_color, |
|||
}); |
|||
$('.o-mail-ChatWindow-header').attr('style', `background-color: ${this.state.selected_theme.theme_main_color} !important; color: ${this.state.selected_theme.theme_font_color};`); |
|||
|
|||
} |
|||
let curr_theme_id = parseInt($('.theme_select').val()); |
|||
if (curr_theme_id){ |
|||
let result = await this.orm.call('theme.config','update_active_theme',[curr_theme_id]); |
|||
this.themes_by_id[result['prev']].is_theme_active = false; |
|||
this.themes_by_id[curr_theme_id].is_theme_active = true; |
|||
this.onChangeActive(); |
|||
this.notification.add("Theme has been successfully updated", |
|||
{ type: 'success' }, 3000 |
|||
); |
|||
}; |
|||
}, |
|||
// Handle the onClick event for creating new theme.
|
|||
async onClickCreate(){ |
|||
let result = await this.orm.call('theme.config', 'create_new_theme',[]); |
|||
this.state.selected_theme = result[0]; |
|||
this.state.theme_data.push(result[0]); |
|||
this.themes_by_id[result[0].id] = result[0]; |
|||
this.onChangeActive(); |
|||
}, |
|||
// Handle the onClick event for deleting theme.
|
|||
async onClickRemove(){ |
|||
let themeId = parseInt($('.theme_select').val()); |
|||
let currentTheme = this.themes_by_id[themeId]; |
|||
if (currentTheme.is_theme_active) { |
|||
this.notification.add("You cannot delete an active theme.", |
|||
{ type: 'danger' }, 3000 |
|||
); |
|||
} else { |
|||
this.orm.unlink('theme.config', [themeId]); |
|||
this.state.theme_data = this.state.theme_data.filter(data => data.id !== themeId); |
|||
this.state.selected_theme = this.appliedTheme; |
|||
}; |
|||
this.onChangeActive(); |
|||
}, |
|||
// Function to edit name of theme.
|
|||
async onEditName() { |
|||
this.editMode = !this.editMode; |
|||
let themeInput = document.getElementById('themeName'); |
|||
let editIcon = document.getElementById('editIcon'); |
|||
if (this.editMode) { |
|||
themeInput.removeAttribute('readonly'); |
|||
themeInput.style.backgroundColor = '#e4eaec'; |
|||
editIcon.classList.remove('fa-pencil'); |
|||
editIcon.classList.add('fa-check'); |
|||
} else { |
|||
themeInput.setAttribute('readonly', 'readonly'); |
|||
themeInput.style.backgroundColor = 'white'; |
|||
editIcon.classList.remove('fa-check'); |
|||
editIcon.classList.add('fa-pencil'); |
|||
this.orm.write('theme.config', [this.state.selected_theme.id] , { |
|||
name: themeInput.value |
|||
}); |
|||
this.state.selected_theme.name = themeInput.value; |
|||
this.themes_by_id[this.state.selected_theme.id].name = themeInput.value; |
|||
}; |
|||
}, |
|||
// Function to set active selected theme.
|
|||
onChangeActive() { |
|||
document.getElementById('active_theme').style.display = this.state.selected_theme.is_theme_active ? 'block' : 'none'; |
|||
}, |
|||
}); |
|||
@ -0,0 +1,202 @@ |
|||
@import url('https://fonts.googleapis.com/css?family=Poppins'); |
|||
body { |
|||
font-size: 14px; |
|||
font-family: lato, sans-serif |
|||
} |
|||
|
|||
h1, h2, h3, h4, h5, h6 { |
|||
margin: 0; |
|||
font-family: poppins, sans-serif |
|||
} |
|||
|
|||
p { |
|||
font-family: lato, sans-serif; |
|||
font-size: 15px; |
|||
line-height: 26px; |
|||
color: #444; |
|||
margin-bottom: 0 |
|||
} |
|||
|
|||
p img { |
|||
margin: 0 |
|||
} |
|||
|
|||
a, a:visited { |
|||
text-decoration: none; |
|||
transition: all .3s ease-in-out; |
|||
-webkit-transition: all .3s ease-in-out; |
|||
-moz-transition: all .3s ease-in-out; |
|||
-o-transition: all .3s ease-in-out; |
|||
outline: 0; |
|||
font-family: poppins, sans-serif |
|||
} |
|||
|
|||
a:hover { |
|||
text-decoration: none |
|||
} |
|||
|
|||
a:focus { |
|||
text-decoration: none; |
|||
outline: 0 |
|||
} |
|||
|
|||
p a, p a:visited { |
|||
line-height: inherit; |
|||
outline: 0 |
|||
} |
|||
|
|||
ul, ol { |
|||
margin-bottom: 0; |
|||
margin-top: 0; |
|||
padding: 0 |
|||
} |
|||
|
|||
ul { |
|||
margin: 0; |
|||
list-style-type: none |
|||
} |
|||
|
|||
ol { |
|||
list-style: decimal |
|||
} |
|||
|
|||
ol, ul.square, ul.circle, ul.disc { |
|||
margin-left: 0 |
|||
} |
|||
|
|||
ul.square { |
|||
list-style: square outside |
|||
} |
|||
|
|||
ul.circle { |
|||
list-style: circle outside |
|||
} |
|||
|
|||
ul.disc { |
|||
list-style: disc outside |
|||
} |
|||
|
|||
ul ul, ul ol, ol ol, ol ul { |
|||
margin: 0 |
|||
} |
|||
|
|||
ul ul li, ul ol li, ol ol li, ol ul li { |
|||
margin-bottom: 0 |
|||
} |
|||
|
|||
button { |
|||
cursor: pointer; |
|||
outline: none !important; |
|||
letter-spacing: 0 |
|||
} |
|||
|
|||
blockquote { |
|||
padding: 60px; |
|||
position: relative; |
|||
background: #853bfa |
|||
} |
|||
|
|||
blockquote:before { |
|||
content: '\f10d'; |
|||
font-family: fontawesome; |
|||
color: #fff; |
|||
font-size: 32px; |
|||
position: absolute; |
|||
left: 16px; |
|||
top: 46px |
|||
} |
|||
|
|||
blockquote p { |
|||
font-size: 17px; |
|||
color: #fff |
|||
} |
|||
|
|||
.blockquote-footer { |
|||
color: #fff |
|||
} |
|||
/*==============login================*/ |
|||
.oe_website_login_container { |
|||
padding: 1rem 5rem 5rem; |
|||
background: #f1f4f5; |
|||
} |
|||
.oe_login_form, .oe_signup_form, .oe_reset_password_form { |
|||
color: #fff !important; |
|||
} |
|||
.oe_login_form, .oe_signup_form, .oe_reset_password_form { |
|||
max-width: 360px; |
|||
position: relative; |
|||
margin: 50px auto; |
|||
border-radius: 7px; |
|||
padding: 3rem; |
|||
background: #ffffff; |
|||
box-shadow: 0 0 11px 0px #4477d4; |
|||
} |
|||
|
|||
.oe_login_form input { |
|||
height: 40px !important; |
|||
border-radius: 0 !important; |
|||
background: #fff !important; |
|||
border: 1px solid #ffffff; |
|||
} |
|||
|
|||
.oe_login_form i.fa.fa-database { |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
.oe_login_form a.btn.btn-secondary { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-radius: 0 !important; |
|||
} |
|||
.cybro-login-btn { |
|||
height: 47px; |
|||
border-radius: 0; |
|||
//background: #3e8df7 !important; |
|||
border: none; |
|||
//color: #ffffff !important; |
|||
font-size: 16px; |
|||
} |
|||
.cybro-super-btn { |
|||
//color: #fff; |
|||
font-size: 14px; |
|||
text-decoration: none; |
|||
} |
|||
.cybro-super-btn:hover { |
|||
color: black !important; |
|||
text-decoration: none; |
|||
} |
|||
.cybro-bg footer{ |
|||
background: #303641 !important; |
|||
color: #fff; |
|||
padding-top: 2rem; |
|||
} |
|||
.cybro-bg .navbar { |
|||
background: #303641 !important; |
|||
color: #fff; |
|||
} |
|||
.cybro-bg footer a,.cybro-bg footer p,.cybro-bg header a,.cybro-bg header p { |
|||
color: #fff; |
|||
} |
|||
.cybro-bg .navbar-light .navbar-nav .nav-link { |
|||
color: #ffffff !important; |
|||
} |
|||
.homepage .dropdown-menu.js_usermenu.dropdown-menu-right.show { |
|||
background: #303641; |
|||
} |
|||
.oe_website_login_container .btn-secondary { |
|||
color: #FFFFFF; |
|||
background-color: #afafaf; |
|||
border-color: #afafae; |
|||
} |
|||
input { |
|||
border: 1px solid #e4eaec !important; |
|||
} |
|||
.oe_login_form, .oe_signup_form, .oe_reset_password_form { |
|||
color: #37474f !important; |
|||
font-weight: 300 !important; |
|||
} |
|||
form label { |
|||
font-weight: 300 !important; |
|||
} |
|||
/*==============//login================*/ |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,76 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<templates id="template" xml:space="preserve"> |
|||
<!-- Advanced sidebar view--> |
|||
<t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1"> |
|||
<xpath expr="//nav[hasclass('o_main_navbar')]" position="after"> |
|||
<div class="cybro-sidebar-qweb"> |
|||
<div class="sidebar-menus" role="menu"> |
|||
<DropdownItem |
|||
t-foreach="menuService.getApps()" |
|||
t-as="app" |
|||
t-key="app.id" |
|||
class="{ 'o_app': true, focus: menuService.getCurrentApp() === app }" |
|||
onSelected="() => this.onNavBarDropdownItemSelection(app)" |
|||
attrs="{ href: getMenuItemHref(app), 'data-menu-xmlid': app.xmlid, 'data-section': app.id }" |
|||
> |
|||
<img t-if="app.webIconData" class="o_app_icon me-2" t-attf-src="{{app.webIconData}}" |
|||
t-att-title="app.name" |
|||
style="width: 40px !important;height: 40px !important; border-radius: 10px !important;margin: 5px 5px 5px 5px;"/> |
|||
</DropdownItem> |
|||
</div> |
|||
</div> |
|||
<div class="sidebar_panel" id="sidebar_panel"> |
|||
<div class="sidebar"> |
|||
<div class="sidebar_close"> |
|||
<a id="closeSidebar" style="cursor: pointer;"/> |
|||
</div> |
|||
<div class="search-container form-row align-items-center m-auto col-12"> |
|||
<div class="search-input col-md-12 ml-auto mr-auto" |
|||
t-on-input="_searchMenusSchedule"> |
|||
<div class="input-group"> |
|||
<div class="input-group-prepend"> |
|||
<div class="input-group-text"> |
|||
<i class="fa fa-search"/> |
|||
</div> |
|||
</div> |
|||
<input type="search" |
|||
autocomplete="off" |
|||
placeholder="Search menus..." |
|||
class="form-control"/> |
|||
</div> |
|||
</div> |
|||
<div class="search-results col-md-12 ml-auto mr-auto" t-on-click="onclickCloseSidebar"/> |
|||
</div> |
|||
<ul class="sidebar_menu"> |
|||
<DropdownItem |
|||
t-foreach="menuService.getApps()" |
|||
t-as="app" |
|||
t-key="app.id" |
|||
class="{ 'o_app': true, focus: menuService.getCurrentApp() === app }" |
|||
onSelected="() => this.onNavBarDropdownItemSelection(app)" |
|||
attrs="{ href: getMenuItemHref(app), 'data-menu-xmlid': app.xmlid, 'data-section': app.id }" |
|||
> |
|||
<img t-if="app.webIconData" class="o_app_icon me-2" t-attf-src="{{app.webIconData}}" |
|||
t-att-title="app.name" |
|||
style="width: 40px !important;height: 40px !important; border-radius: 10px !important;margin: 5px 5px 5px 5px;"/> |
|||
<b class="a_app_menu_title"><t t-esc="app.name"/></b> |
|||
</DropdownItem> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</xpath> |
|||
</t> |
|||
<!-- Toggle icon for Advanced sidebar--> |
|||
<t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1"> |
|||
<xpath expr="//Dropdown" position="replace"> |
|||
<li class="dropdown"> |
|||
<a id="openSidebar" style="display: block; cursor: pointer; margin-left: 10px;"> |
|||
<i class="fa fa-bars fa-lg" t-on-click="onclickOpenSidebar"/> |
|||
</a> |
|||
<a id="closeSidebar" style="display: none; cursor: pointer; margin-left: 10px;"> |
|||
<i class="fa fa-close fa-lg" t-on-click="onclickCloseSidebar"/> |
|||
</a> |
|||
</li> |
|||
</xpath> |
|||
</t> |
|||
</templates> |
|||
@ -0,0 +1,99 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<templates> |
|||
<!-- Systray view--> |
|||
<t t-inherit="web.NavBar" t-inherit-mode="extension"> |
|||
<xpath expr="//div[@class='o_menu_systray d-flex flex-shrink-0 ms-auto']//t[@t-foreach='systrayItems']" position="before"> |
|||
<Dropdown state="dropdown"> |
|||
<a data-display="static" aria-expanded="false" title="Themes" |
|||
role="button"> |
|||
<t t-if="user"> |
|||
<i class="fa fa-paint-brush" role="img" |
|||
aria-label="Themes Configuration" /> |
|||
</t> |
|||
</a> |
|||
<t t-set-slot="content"> |
|||
<div class="themes_selector dropdown-menu-right" role="menu"> |
|||
<div class="row"> |
|||
<div class="themes_list"> |
|||
<div class="row theme_obj"> |
|||
<select class="theme_select" t-on-change="onChangeTheme"> |
|||
<t t-foreach="state.theme_data" |
|||
t-as="theme_data_id" t-key="theme_data_id.id"> |
|||
<option t-att-id="theme_data_id.id" t-att-value="theme_data_id.id" |
|||
t-att-selected="theme_data_id.id === state.selected_theme.id"> |
|||
<span t-esc="theme_data_id.name"/> |
|||
</option> |
|||
</t> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div class="theme_data"> |
|||
<div class="row name"> |
|||
<div class="cell"> |
|||
<p>Name</p> |
|||
</div> |
|||
<div class="cell"> |
|||
<input type="text" |
|||
id="themeName" |
|||
readonly="readonly" |
|||
t-att-value="state.selected_theme.name"/> |
|||
<i id="editIcon" class="fa fa-pencil" t-on-click="onEditName"/> |
|||
</div> |
|||
</div> |
|||
<div class="theme_extra"> |
|||
<div id="active_theme" class="theme-active"> |
|||
<p>Active</p> |
|||
</div> |
|||
</div> |
|||
<!-- Color selector --> |
|||
<div class="color_selector"> |
|||
<div class="row theme_main_color"> |
|||
<div class="cell"> |
|||
<p>Base Color |
|||
</p> |
|||
</div> |
|||
<div class="cell"> |
|||
<div class="color" id="theme_main_color" t-on-click="onClickBaseColor" |
|||
t-att-style="'background-color:'+state.selected_theme.theme_main_color"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row theme_font_color"> |
|||
<div class="cell"> |
|||
<p>Font Color</p> |
|||
</div> |
|||
<div class="cell"> |
|||
<div class="color" id="theme_font_color" t-on-click="onClickBaseColor" |
|||
t-att-style="'background-color:'+state.selected_theme.theme_font_color"/> |
|||
</div> |
|||
</div> |
|||
<div class="row view_font_color"> |
|||
<div class="cell"> |
|||
<p>View Font Color</p> |
|||
</div> |
|||
<div class="cell"> |
|||
<div class="color" id="view_font_color" t-on-click="onClickBaseColor" |
|||
t-att-style="'background-color:'+state.selected_theme.view_font_color"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--View for Theme create, remove and apply buttons--> |
|||
<div class="header_buttons row" style="position: absolute; bottom: 0;"> |
|||
<div class="button-create cell"> |
|||
<p t-on-click="onClickCreate">Create</p> |
|||
</div> |
|||
<div class="button-create cell"> |
|||
<p t-on-click="onClickRemove">Remove</p> |
|||
</div> |
|||
<div class="button-create cell"> |
|||
<p t-on-click="onClickApply"><i class="fa fa-check"/>Apply</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</t> |
|||
</Dropdown> |
|||
</xpath> |
|||
</t> |
|||
</templates> |
|||
@ -0,0 +1,23 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<odoo> |
|||
<!-- Login page view--> |
|||
<template id="login_templated_ext" inherit_id="web.login" |
|||
name="Login Ext"> |
|||
<xpath expr="//button[@type='submit'][1]" position="replace"> |
|||
<button type="submit" class="btn btn-primary btn-block cybro-login-btn"> |
|||
Log in |
|||
</button> |
|||
</xpath> |
|||
<xpath expr="//t[@t-if='debug']/button" position="replace"> |
|||
<button type="submit" name="redirect" value="/web/become" |
|||
class="btn btn-link btn-sm btn-block cybro-super-btn"> |
|||
Log in as superuser |
|||
</button> |
|||
</xpath> |
|||
</template> |
|||
<template id="webclient_bootstrap_ext" inherit_id="web.webclient_bootstrap"> |
|||
<xpath expr="//t[@t-set='head']" position="after"> |
|||
<div class="cybro-sidebar"/> |
|||
</xpath> |
|||
</template> |
|||
</odoo> |
|||
Loading…
Reference in new issue