Cybrosys Technologies
6 months ago
87 changed files with 1515 additions and 0 deletions
@ -0,0 +1,49 @@ |
|||
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg |
|||
:target: https://www.gnu.org/licenses/agpl-3.0-standalone.html |
|||
:alt: License: AGPL-3 |
|||
|
|||
POS NIGHT MODE |
|||
============== |
|||
This module helps you to change the color theme of the Point of Sale module to dark mode. |
|||
|
|||
Configuration |
|||
============= |
|||
A button with a moon icon will be visible in the POS interface's Navbar. You can enable or disable dark mode by clicking on this icon. |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
License |
|||
------- |
|||
Affero General Public License, v3.0 (AGPL v3). |
|||
(https://www.gnu.org/licenses/agpl-3.0-standalone.html) |
|||
|
|||
Credits |
|||
------- |
|||
* Developers: (v16) Ramees Jaman KT, |
|||
(v17) Ajith V, |
|||
(v18) Aysha Shalin, |
|||
Contact: odoo@cybrosys.com |
|||
|
|||
Contacts |
|||
-------- |
|||
* Mail Contact : odoo@cybrosys.com |
|||
* Website : https://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 `Our Website <https://cybrosys.com/>`__ |
|||
|
|||
Further information |
|||
=================== |
|||
HTML Description: `<static/description/index.html>`__ |
|||
@ -0,0 +1,22 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################### |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Aysha Shalin (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC |
|||
# LICENSE (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
from . import models |
|||
@ -0,0 +1,51 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################### |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Aysha Shalin (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC |
|||
# LICENSE (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
{ |
|||
'name': 'POS Night Mode Theme', |
|||
'version': '18.0.1.0.0', |
|||
'category': 'Themes/Backend', |
|||
'summary': """This module helps you to change the color theme of the |
|||
Point of Sale module to dark.""", |
|||
'description':"""This module facilitates the transformation of color theme |
|||
of the Point of Sale module to dark mode for enhanced visual comfort and |
|||
aesthetics.""", |
|||
'author': 'Cybrosys Techno Solutions', |
|||
'company': 'Cybrosys Techno Solutions', |
|||
'maintainer': 'Cybrosys Techno Solutions', |
|||
'website': 'https://www.cybrosys.com', |
|||
'depends': ['base', 'point_of_sale'], |
|||
'assets': { |
|||
'point_of_sale._assets_pos': [ |
|||
'pos_night_mode/static/src/js/**/*.js', |
|||
'pos_night_mode/static/src/xml/button.xml', |
|||
'pos_night_mode/static/src/scss/theme_style.scss' |
|||
], |
|||
}, |
|||
'images': [ |
|||
'static/description/banner-1.png', |
|||
'static/description/banner-2.png', |
|||
], |
|||
'license': 'AGPL-3', |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
## Module <pos_night_mode> |
|||
|
|||
#### 24.10.2024 |
|||
#### Version 18.0.1.0.0 |
|||
##### ADD |
|||
- Initial commit POS Night Mode Theme |
|||
@ -0,0 +1,22 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################### |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Aysha Shalin (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC |
|||
# LICENSE (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
from . import res_users |
|||
@ -0,0 +1,48 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################### |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Aysha Shalin (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC |
|||
# LICENSE (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
from odoo import api, fields, models |
|||
|
|||
|
|||
class Users(models.Model): |
|||
""" Inherit the res.Users model and add a new field """ |
|||
_inherit = 'res.users' |
|||
|
|||
""" Theme Config for night mode """ |
|||
mode_check = fields.Boolean(string="Active", |
|||
help="Enable / Disable checkbox") |
|||
|
|||
@api.model |
|||
def get_active(self): |
|||
""" Get the value of the mode_check field """ |
|||
return self.env.user.mode_check |
|||
|
|||
@api.model |
|||
def set_active(self): |
|||
""" Set up the mode_check value """ |
|||
self.env.user.mode_check = True |
|||
return self.env.user.mode_check |
|||
|
|||
@api.model |
|||
def set_deactivate(self): |
|||
""" Deactivating the value of mode check field """ |
|||
self.env.user.mode_check = False |
|||
return self.env.user.mode_check |
|||
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 310 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 542 B |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 561 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 543 KiB |
|
After Width: | Height: | Size: 163 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 880 KiB |
|
After Width: | Height: | Size: 310 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 543 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 347 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 196 KiB |
|
After Width: | Height: | Size: 251 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: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 353 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 310 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 253 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 258 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 885 B |
@ -0,0 +1,865 @@ |
|||
<!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="./img/pos_night_mode.png" 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>Enjoy Dark Mode in Point of Sale Module</h2> |
|||
|
|||
<p style="color: #999; |
|||
text-align: center; |
|||
font-size: 15.625px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 25.6px;">Switch to Night Mode with just one tap for a sleek, eye-friendly experience!</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>Order Screen</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>Payment Screen</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>Receipt Screen</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>Popups</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>Product Info</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>Orders</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>Customer List Screen</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;">info includes 300+ elements that you may need to create website without |
|||
external plugins.</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: var(--text-color); |
|||
font-size: 24px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Easy to Use.</a></h4> |
|||
<p>Easy to enable or disable night mode.</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: var(--text-color); |
|||
font-size: 24px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Switch to Night Mode with just One Tap.</a></h4> |
|||
<p>Simply toggle the button to enable or disable.</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: var(--text-color); |
|||
font-size: 24px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Sleek, Eye-friendly Experience!</a></h4> |
|||
<p>A dark background with light text reduces glare and is easier on the eyes, especially in dim light.</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: var(--text-color); |
|||
font-size: 24px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Aesthetic Appeal</a></h4> |
|||
<p>Visually Appealing and offers a sleek and modern look.</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: var(--text-color); |
|||
font-size: 24px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Longer Usage</a></h4> |
|||
<p>Employees may be able to work longer without discomfort, leading to increased efficiency and productivity.</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: var(--text-color); |
|||
font-size: 24px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Longer Display Life</a></h4> |
|||
<p>Potentially helps to extend the lifespan of the display, as less power is needed to illuminate the pixels.</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;">Order Screen</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/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;">Payment Screen</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/2.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;">Receipt Screen</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/3.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;">Popups</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/4.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;">Product Info</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/5.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;">Orders</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/6.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;">Customer List Screen</span> |
|||
<div class="mt-3" style="border-radius: 6px 6px 0px 0px;overflow: hidden;"> |
|||
<img src="img/7.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;">Dark Mode Popup</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;">Enable Night Mode with Just One Tap</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;">Disable Night Mode</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> |
|||
<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;">Product Info</h3> |
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/5.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> |
|||
<!-- --> |
|||
</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> |
|||
@ -0,0 +1,157 @@ |
|||
/** @odoo-module **/ |
|||
import { Navbar } from "@point_of_sale/app/navbar/navbar"; |
|||
import { rpc } from '@web/core/network/rpc'; |
|||
import { patch } from "@web/core/utils/patch"; |
|||
import { useService } from "@web/core/utils/hooks"; |
|||
import { useRef } from "@odoo/owl"; |
|||
|
|||
// Includes a function in navbar in pos
|
|||
patch(Navbar.prototype, { |
|||
setup() { |
|||
super.setup() |
|||
this.orm = useService("orm"); |
|||
var self = this; |
|||
this.root = useRef("root") |
|||
this.toggle = useRef("toggle") |
|||
this.isProcessingClick = false; |
|||
|
|||
rpc('/web/dataset/call_kw',{ |
|||
model:'res.users', |
|||
method:'get_active', |
|||
args:[], |
|||
kwargs:{}, |
|||
}).then((res)=>{ |
|||
if(res){ |
|||
this.root.el.classList.remove("fa", "fa-moon-o", "moon-color"); |
|||
this.root.el.classList.add("fa", "fa-sun-o", "sun-color"); |
|||
self._OnNightTrue(); |
|||
} |
|||
else{ |
|||
this.root.el.classList.remove("fa", "fa-sun-o", "sun-color"); |
|||
this.root.el.classList.add("fa", "fa-moon-o", "moon-color"); |
|||
} |
|||
}); |
|||
}, |
|||
//Added a function for click button change the pos color to black
|
|||
async OnClickMoon(){ |
|||
var self = this; |
|||
if (this.isProcessingClick) return; // If already processing, ignore the click
|
|||
this.isProcessingClick = true; |
|||
var buttonToggle = this.root.el; |
|||
var isPressed = buttonToggle.getAttribute('aria-pressed') === "true"; |
|||
console.log('pressed', isPressed) |
|||
buttonToggle.setAttribute('aria-pressed', !isPressed); |
|||
try{ |
|||
if(isPressed){ |
|||
console.log("moon") |
|||
this.root.el.classList.remove("fa", "fa-moon-o", "moon-color") |
|||
this.root.el.classList.add("fa", "fa-sun-o", "sun-color") |
|||
console.log("moon", this.root.el.classList) |
|||
await rpc('/web/dataset/call_kw',{ |
|||
model:'res.users',method: 'set_active', |
|||
args:[],kwargs:{}, |
|||
}).then((response) =>{ |
|||
console.log("on night") |
|||
self._OnNightTrue() |
|||
}); |
|||
} |
|||
else{ |
|||
console.log("false") |
|||
this.root.el.classList.remove("fa", "fa-sun-o", "sun-color") |
|||
this.root.el.classList.add("fa", "fa-moon-o", "moon-color") |
|||
console.log("sun", this.root.el.classList) |
|||
await rpc('/web/dataset/call_kw',{ |
|||
model: 'res.users',method: 'set_deactivate', |
|||
args:[], kwargs:{}, |
|||
}).then((response) =>{ |
|||
const styles = document.querySelectorAll('style'); |
|||
styles.forEach(style => style.remove()); |
|||
}); |
|||
} |
|||
} finally { |
|||
this.isProcessingClick = false; // Reset the flag once processing is complete
|
|||
} |
|||
}, |
|||
//Added a function for click button change the pos color to black
|
|||
async _OnNightTrue(){ |
|||
var pos_element = document.querySelector('.pos') |
|||
var pos_product_list_modifier = document.createElement('style') |
|||
pos_product_list_modifier.innerHTML = '.pos{color:white;}'+'.pos .product { background-color:#3c3f41 !important;border:'+ |
|||
'thin solid white;border-radius: 5px;}.pos .product .product-img img {background-image:'+ |
|||
'linear-gradient(to bottom,white,#3c3f41) !important;}'+ |
|||
'.pos .product-list{background-color:#3c3f41 !important;}'+ |
|||
'.pos .product .price-tag {color:#F45976 !important;}'+ |
|||
'.pos .product-content .product-name{color:white}'+ |
|||
'.pos .order{background-color:#3c3f41}'+ |
|||
'.pos .rightpane{background-color:#3c3f41}'+ |
|||
'.pos .rightpane-header{background-color:#3c3f41;}'+ |
|||
'.pos .pos-content .product-screen .leftpane .pads .control-buttons .fw-bolder{color:white;}'+ |
|||
'.pos .breadcrumb-button{color:white}'+ |
|||
'.pos .form-control{color:black}'+ |
|||
'.pos .category-simple-button{background-color:#3c3f41 !important;}'+ |
|||
'.pos .sb-product .pos-search-bar{background-color:#3c3f41 !important;}'+ |
|||
'.pos .pos-search-bar input, .pos .partner-list'+ |
|||
'.pos-search-bar input{color:#880808}'+ |
|||
'.pos .orderline .selected{background-color:darkgray !important;}'+ |
|||
'.pos .info-list{color:#B3B7BF !important}'+ |
|||
'.pos .info-list em{color:#B3B7BF !important}'+ |
|||
'.pos .control-button{background-color:#3c3f41 !important;}'+ |
|||
'.pos .numpad button{background-color:#3c3f41;color:white;}'+ |
|||
'.pos .numpad button:hover{background-color:#f45976 !important;}'+ |
|||
'.pos .button.validation:hover{background-color:#f45976 !important;}'+ |
|||
'.pos .button.next.validation{background-color:#3c3f41;color:white;}'+ |
|||
'.pos .o_payment_successful h1{color:white;}'+ '.pos .top-content-center h1{color:white;}'+ |
|||
'.pos .pay-order-button{background-color:#3c3f41 !important;}'+ |
|||
'.pos .cc .button{background-color:#3c3f41;color:white;}'+ |
|||
'.pos .actionpad .button:hover{background-color:#f45976 !important;}'+ |
|||
'.pos .control-button:hover{background-color:#f45976 !important;}'+ |
|||
'.pos .modal-dialog .popup{background-color:#1e1f20 !important;}'+ |
|||
'.pos .popup .button{background:#8F3536;color: black !important};'+ |
|||
'.ticket-screen .controls button {background-color:white;color:black;}'+ |
|||
'.ticket-screen .pos-search-bar .filter{color:black}'+ |
|||
'.ticket-screen .pos-search-bar .filter .options{border-radius:5px}'+ |
|||
'.pos .order-container{background-color:#3c3f41 !important}'+ |
|||
'.pos .order-summary{background-color:#3c3f41 !important}'+ |
|||
'.pos .order-summary .subentry {color:white !important}'+ |
|||
'.pos .pos-content .product-screen .leftpane .pads .control-button .fa-undo{color:white !important}'+ |
|||
'.pos .partner-list{color:black;}'+ |
|||
'.pos .partner-list .table-hover thead > tr{background-color:#3c3f41;color:white}'+ |
|||
'.pos .partner-list tr.partner-line:hover{background-color:#f45976}'+ |
|||
'.pos .partner-list tr.partner-line.highlight{background-color:#017e84}'+ |
|||
'.screen .screen-content{background-color:#e0e2e6}'+ |
|||
'.pos .partner-list .ms-auto i{color:black;}'+ |
|||
'.pos .partner-list .ms-auto input{color:#2a2b2d;}'+ |
|||
'.screen .top-content .button.highlight{background-color:#017e84 !important;border-color:#3c3f41 !important;}'+ |
|||
'.screen .top-content{background-color:#3c3f41}'+ |
|||
'.pos .close-pos-popup header{background-color:rgb(56, 57, 58)}'+ |
|||
'.pos .popup .title{background-color:rgb(56, 57, 58)}'+ |
|||
'.pos .close-pos-popup .closing-notes{background-color:#c1c3c6}'+ |
|||
'.pos .opening-cash-control .opening-cash-notes{background-color:#c1c3c6}'+ |
|||
'.payment-screen .main-content{background:#3c3f41}'+ |
|||
'.paymentmethods .button{background:#3c3f41}'+ |
|||
'.pos .paymentline{background:#3c3f41}'+ |
|||
'.pos .paymentline.selected{background:#707375}'+ |
|||
'.pos .screen .button.next:not(.highlight){background:#e6e3e2;color:#017e84;}'+ |
|||
'.receipt-screen .default-view{background:#3c3f41}'+ |
|||
'.receipt-screen .default-view .actions .send-email input{background:#666668;color:white;}'+ |
|||
'.receipt-screen .default-view .actions .buttons .button{background:#666668}'+ |
|||
'.receipt-screen .default-view .actions .send-email button.send{background:#017e84;color:black}'+ |
|||
'.pos .pos-receipt-container > div{color:black}'+ |
|||
'.pos .popup.popup-error .button{background:#8F3536}'+ |
|||
'.pos .orders .order-row:nth-child(n){background:#3c3f41}'+ |
|||
'.pos .orders .order-row.highlight{background:#017e84}'+ |
|||
'.pos .orders .order-row:hover{background:#f45976;}'+ |
|||
'.pos .pos-content .product-screen .leftpane .bg-100:{background-color:#c1c3c6 !important}'+ |
|||
'.payment-screen .payment-buttons .button{background:#3c3f41;color:white;}'+ |
|||
'.payment-screen .payment-buttons .button:hover{background:#f45976}'+ '.paymentmethod{color:white;}'+ |
|||
'.o_notification_body{color:black;}'+ |
|||
'.modal-title{color:white;}'+ '.modal-header{color:white;}'+ |
|||
'.modal-content{background:#3c3f41; color:black;}'+ '.modal-body {color:white;}'+ |
|||
'.modal-body .button:hover{background:#f45976;}'+ '.modal-header .btn{background:#8F3536; color:white;}'+ |
|||
'.modal-footer .btn{background:#8F3536; color:white;}'+ |
|||
'.search-more-button .btn{background:#e6e3e2; color:black;}'+ |
|||
'.pos-receipt .order-container .orderline {background-color:white;}'+ |
|||
'.payment-infos{background-color:#3c3f41;}'; |
|||
pos_element.parentNode.insertBefore(pos_product_list_modifier, pos_element); |
|||
}, |
|||
}); |
|||
@ -0,0 +1,13 @@ |
|||
.fa-sun-o{ |
|||
color:#e8a214; |
|||
font-size: 130% !important; |
|||
background:white; |
|||
} |
|||
.fa-moon-o{ |
|||
font-size: 130% !important; |
|||
color:black; |
|||
} |
|||
#button_toggle{ |
|||
border: none; |
|||
background: none; |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
<template id="template" xml:space="preserve"> |
|||
<!-- Adding a button inside pos Navbar --> |
|||
<t name="NavbarInherit" t-inherit="point_of_sale.Navbar" |
|||
t-inherit-mode="extension"> |
|||
<xpath expr="//div[hasclass('status-buttons')]//CashierName" position="before"> |
|||
<div class="image-checkbox"> |
|||
<button type="button" id="button_toggle" class="btn btn-primary" data-bs-toggle="button" |
|||
t-on-click="OnClickMoon" aria-pressed="false" t-ref="toggle" |
|||
autocomplete="off"> |
|||
<i class="fa fa-moon-o moon-color" id="fa-icon" t-on-click="OnClickMoon" t-ref="root"/> |
|||
</button> |
|||
</div> |
|||
</xpath> |
|||
</t> |
|||
</template> |
|||
Loading…
Reference in new issue