Browse Source

Jan 22 : [ADD] Initial Commit 'pos_theme_sapphire'

pull/313/head
RisvanaCybro 1 year ago
parent
commit
77cc109774
  1. 48
      pos_theme_sapphire/README.rst
  2. 21
      pos_theme_sapphire/__init__.py
  3. 52
      pos_theme_sapphire/__manifest__.py
  4. 6
      pos_theme_sapphire/doc/RELEASE_NOTES.md
  5. BIN
      pos_theme_sapphire/static/description/assets/cybro-icon.png
  6. BIN
      pos_theme_sapphire/static/description/assets/cybro-odoo.png
  7. BIN
      pos_theme_sapphire/static/description/assets/icons/check.png
  8. BIN
      pos_theme_sapphire/static/description/assets/icons/chevron.png
  9. BIN
      pos_theme_sapphire/static/description/assets/icons/cogs.png
  10. BIN
      pos_theme_sapphire/static/description/assets/icons/consultation.png
  11. 1
      pos_theme_sapphire/static/description/assets/icons/down.svg
  12. BIN
      pos_theme_sapphire/static/description/assets/icons/ecom-black.png
  13. BIN
      pos_theme_sapphire/static/description/assets/icons/education-black.png
  14. BIN
      pos_theme_sapphire/static/description/assets/icons/faq.png
  15. BIN
      pos_theme_sapphire/static/description/assets/icons/feature.png
  16. BIN
      pos_theme_sapphire/static/description/assets/icons/hotel-black.png
  17. BIN
      pos_theme_sapphire/static/description/assets/icons/license.png
  18. BIN
      pos_theme_sapphire/static/description/assets/icons/lifebuoy.png
  19. BIN
      pos_theme_sapphire/static/description/assets/icons/manufacturing-black.png
  20. BIN
      pos_theme_sapphire/static/description/assets/icons/pos-black.png
  21. BIN
      pos_theme_sapphire/static/description/assets/icons/puzzle.png
  22. BIN
      pos_theme_sapphire/static/description/assets/icons/restaurant-black.png
  23. BIN
      pos_theme_sapphire/static/description/assets/icons/screenshot.png
  24. BIN
      pos_theme_sapphire/static/description/assets/icons/service-black.png
  25. BIN
      pos_theme_sapphire/static/description/assets/icons/support.png
  26. BIN
      pos_theme_sapphire/static/description/assets/icons/test-1 - Copy.png
  27. BIN
      pos_theme_sapphire/static/description/assets/icons/test-2.png
  28. BIN
      pos_theme_sapphire/static/description/assets/icons/trading-black.png
  29. BIN
      pos_theme_sapphire/static/description/assets/icons/training.png
  30. BIN
      pos_theme_sapphire/static/description/assets/icons/update.png
  31. BIN
      pos_theme_sapphire/static/description/assets/icons/user.png
  32. BIN
      pos_theme_sapphire/static/description/assets/icons/video.png
  33. BIN
      pos_theme_sapphire/static/description/assets/icons/whatsapp.png
  34. BIN
      pos_theme_sapphire/static/description/assets/icons/wrench.png
  35. BIN
      pos_theme_sapphire/static/description/assets/modules/boec.png
  36. BIN
      pos_theme_sapphire/static/description/assets/modules/code_backend_theme.png
  37. BIN
      pos_theme_sapphire/static/description/assets/modules/college.jpg
  38. BIN
      pos_theme_sapphire/static/description/assets/modules/hue.png
  39. BIN
      pos_theme_sapphire/static/description/assets/modules/jazzy.jpg
  40. BIN
      pos_theme_sapphire/static/description/assets/modules/vista.jpg
  41. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Desktop view 1.png
  42. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Desktop view 2.png
  43. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Desktop view 3.png
  44. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Desktop view 4.png
  45. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Mobile view 1.png
  46. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Mobile view 2.png
  47. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Mobile view 3.png
  48. BIN
      pos_theme_sapphire/static/description/assets/screenshots/Mobile view 4.png
  49. BIN
      pos_theme_sapphire/static/description/assets/screenshots/pos_theme_sapphire-V17_banner.jpg
  50. BIN
      pos_theme_sapphire/static/description/banner.jpg
  51. BIN
      pos_theme_sapphire/static/description/icon.png
  52. 551
      pos_theme_sapphire/static/description/index.html
  53. BIN
      pos_theme_sapphire/static/description/theme_screenshot.jpg
  54. 505
      pos_theme_sapphire/static/src/css/custom.css
  55. 66
      pos_theme_sapphire/static/src/js/ProducScreen.js
  56. 9
      pos_theme_sapphire/static/src/js/ProductsWidget.js
  57. 7
      pos_theme_sapphire/static/src/xml/Chrome.xml
  58. 20
      pos_theme_sapphire/static/src/xml/ChromeWidgets/CashierName.xml
  59. 16
      pos_theme_sapphire/static/src/xml/screens/PaymentScreen/PaymentScreen.xml
  60. 29
      pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductCard.xml
  61. 130
      pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductScreen.xml
  62. 134
      pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductsWidget.xml
  63. 16
      pos_theme_sapphire/static/src/xml/screens/TicketScreen/TicketScreen.xml

48
pos_theme_sapphire/README.rst

@ -0,0 +1,48 @@
.. 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 THEME SAPPHIRE
==================
POS Theme Sapphire is a modern point of sale (POS) app theme designed to help businesses streamline their sales operations.
Configuration
=============
* No additional configurations needed
Company
-------
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
License
-------
General Public License, Version 3 (AGPL v3).
(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
Credits
-------
* Developers: (V17) ASWIN A K
(V16) Dilshad A
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>`__

21
pos_theme_sapphire/__init__.py

@ -0,0 +1,21 @@
# -*- coding: utf-8 -*-
################################################################################
#
# Cybrosys Technologies Pvt. Ltd.
#
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
# Author: ASWIN A K (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/>.
#
################################################################################

52
pos_theme_sapphire/__manifest__.py

@ -0,0 +1,52 @@
# -*- coding: utf-8 -*-
################################################################################
#
# Cybrosys Technologies Pvt. Ltd.
#
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
# Author: ASWIN A K (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 Theme Sapphire',
'version': '17.0.1.0.0',
'category': 'Themes/Backend',
'summary': 'The POS Theme Sapphire Is A Responsive And Ultimate '
'Theme For Your Odoo V17.This Theme Will Give You '
'A New Experience With Odoo.',
'description': '''Minimalist and elegant backend POS theme for Odoo 17''',
'author': 'Cybrosys Techno Solutions',
'company': 'Cybrosys Techno Solutions',
'maintainer': 'Cybrosys Techno Solutions',
'website': 'https://www.cybrosys.com',
'depends': ['point_of_sale'],
'assets': {
'point_of_sale._assets_pos': [
'pos_theme_sapphire/static/src/js/ProductsWidget.js',
'pos_theme_sapphire/static/src/js/ProducScreen.js',
'pos_theme_sapphire/static/src/xml/**/*.xml',
'pos_theme_sapphire/static/src/css/custom.css',
],
},
'images': [
'static/description/icon.png',
'static/description/banner.jpg',
'static/description/theme_screenshot.jpg',
],
'license': 'AGPL-3',
'installable': True,
'auto_install': False,
'application': False,
}

6
pos_theme_sapphire/doc/RELEASE_NOTES.md

@ -0,0 +1,6 @@
## Module <pos_theme_sapphire>
#### 12.01.2024
#### Version 17.0.1.0.0
#### ADD
- Initial commit POS Theme Sapphire

BIN
pos_theme_sapphire/static/description/assets/cybro-icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
pos_theme_sapphire/static/description/assets/cybro-odoo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/check.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/chevron.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 310 B

BIN
pos_theme_sapphire/static/description/assets/icons/cogs.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/consultation.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

1
pos_theme_sapphire/static/description/assets/icons/down.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g id="Layer_2" data-name="Layer 2"><path d="m12 1a11 11 0 1 0 11 11 11.013 11.013 0 0 0 -11-11zm5.707 9.707-5 5a1 1 0 0 1 -1.414 0l-5-5a1 1 0 0 1 1.414-1.414l4.293 4.293 4.293-4.293a1 1 0 0 1 1.414 1.414z" fill="#781d96" data-original="#000000" class=""></path></g></g></svg>

After

Width:  |  Height:  |  Size: 542 B

BIN
pos_theme_sapphire/static/description/assets/icons/ecom-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

BIN
pos_theme_sapphire/static/description/assets/icons/education-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 733 B

BIN
pos_theme_sapphire/static/description/assets/icons/faq.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/feature.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/hotel-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 911 B

BIN
pos_theme_sapphire/static/description/assets/icons/license.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/lifebuoy.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/manufacturing-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

BIN
pos_theme_sapphire/static/description/assets/icons/pos-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 878 B

BIN
pos_theme_sapphire/static/description/assets/icons/puzzle.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 653 B

BIN
pos_theme_sapphire/static/description/assets/icons/restaurant-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 905 B

BIN
pos_theme_sapphire/static/description/assets/icons/screenshot.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/service-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 839 B

BIN
pos_theme_sapphire/static/description/assets/icons/support.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/test-1 - Copy.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/test-2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/trading-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 427 B

BIN
pos_theme_sapphire/static/description/assets/icons/training.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 627 B

BIN
pos_theme_sapphire/static/description/assets/icons/update.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/user.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 988 B

BIN
pos_theme_sapphire/static/description/assets/icons/video.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/whatsapp.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
pos_theme_sapphire/static/description/assets/icons/wrench.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
pos_theme_sapphire/static/description/assets/modules/boec.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

BIN
pos_theme_sapphire/static/description/assets/modules/code_backend_theme.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

BIN
pos_theme_sapphire/static/description/assets/modules/college.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

BIN
pos_theme_sapphire/static/description/assets/modules/hue.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

BIN
pos_theme_sapphire/static/description/assets/modules/jazzy.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 KiB

BIN
pos_theme_sapphire/static/description/assets/modules/vista.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Desktop view 1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Desktop view 2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Desktop view 3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Desktop view 4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Mobile view 1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Mobile view 2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Mobile view 3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/Mobile view 4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
pos_theme_sapphire/static/description/assets/screenshots/pos_theme_sapphire-V17_banner.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

BIN
pos_theme_sapphire/static/description/banner.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

BIN
pos_theme_sapphire/static/description/icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

551
pos_theme_sapphire/static/description/index.html

@ -0,0 +1,551 @@
<!-- HERO -->
<div class="container shadow" style="margin-left:calc(-42vw + 50%); width:84vw;">
<div class="row"
style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
<div class="col-lg-12 d-flex flex-column align-items-center">
<h1 class="text-center text-uppercase"
style="font-family: Montserrat, 'sans-serif' !important; font-size: 67px !important; color: #791d97; font-weight: 900 !important;">
<span style="color:#5154a5;">POS THEME </span> SAPPHIRE
</h1>
<p class="my-1 text-center text-uppercase"
style="letter-spacing: 4px !important; color: #74788D !important;">
Minimalist and elegant POS theme for Odoo 17.</p>
</div>
<div class="col-lg-12 d-flex flex-column justify-content-center">
<p class="my-1 text-center"
style="font-family: Montserrat, 'sans-serif' !important; color: #212121 !important;">
POS Theme Sapphire is a modern point of sale (POS) app theme designed to help businesses streamline their
sales operations. The app enables a user-friendly theme for Odoo 17 POS community and enterprise editions.
</p>
</div>
<div class="col-lg-12 d-flex justify-content-center align-items-center"
style="margin: 2rem 0;">
<img src="./assets/cybro-odoo.png" width="100%" height="auto" style="width:50%;"
class="img-responsive">
</div>
<div class="col-md-12 text-center ">
<a href="mailto:odoo@cybrosys.com" target="_blank"
style="background-color:#5154a5; border-radius:35px; font-family:Montserrat; display:inline-block; padding:7px 33px; border:1px solid #5154a5"
class="mx-1 mb-2 deep-1 deep_hover">
<img class="img" style="width:30px" src="assets/icons/support.png">
<span class="pl-2" style="color:#fff; font-size:16px; vertical-align:middle">Email Us</span>
</a>
<a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
style="background-color:#7f289b; font-family:Montserrat; display:inline-block; padding:7px 33px; border:1px solid #7f289b; border-radius:35px"
class="mx-1 mb-2 deep-1 deep_hover">
<img class="img" style="width:27px" src="assets/icons/whatsapp.png">
<span class="pl-2" style="color:#fff; font-size:16px; vertical-align:middle">What's App</span>
</a>
</div>
</div>
</div>
<!-- END OF HERO -->
<!-- Start OF slide -->
<div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
<img src="assets/screenshots/pos_theme_sapphire-V17_banner.jpg" width="100%" height="auto" class="img-responsive">
</div>
<!-- END OF slide -->
<section class="oe_container pb-5">
<div class="mt64 mb64">
<h2 class="text-center text-uppercase"
style="font-family: Montserrat, 'sans-serif' !important; font-size: 50px !important; color: #791d97; font-weight: 900 !important;">
<span style="color:#5154a5;">KEY </span> <b>Highlights</b>
</h2>
<div class="row">
<div class="col-md-6 col-sm-12 mt32">
<div class="container shadow" style="border-radius: 5px;padding: 33px 0px;">
<div class="col-md-3" style="float:left">
<img class="img img-responsive" src="assets/icons/test-2.png">
</div>
<div class="col-md-9" style="padding-left:0; float:left; width:70%">
<h3 class="mt16 mb0"
style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">Fully responsive </h3>
<p class=" mt8" style="font-family:Roboto ; color: #280135;">Theme design are now fully responsive enabling you to view and manage everything from the comfort of your mobile device.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 mt32">
<div class="container shadow" style="border-radius: 5px;padding: 33px 0px;">
<div class="col-md-3" style="float:left">
<img class="img img-responsive" src="assets/icons/test-2.png">
</div>
<div class="col-md-9" style="padding-left:0; float:left; width:70%">
<h3 class="mt16 mb0"
style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">Modern design</h3>
<p class=" mt8" style="font-family:Roboto ; color: #280135;">The theme has modern design of a new user experience</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- New section -->
<div class="container shadow" style=" margin-left:calc(-42vw + 50%); width:84vw">
<div class="row"
style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
<div class="col-md-12 shadow">
<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; background-color:#ffe305; margin-right:10px; border:1px solid #ddd; border-bottom:0">
<a href="#screenshot-1" data-toggle="tab" aria-expanded="true" class="show active"
style="font-family:Roboto; text-transform:uppercase; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent">
<img src="assets/icons/screenshot.png" style="width: 100%; width: 25px; margin-right: 10px;">screenshot
</a>
<span class="border-left-0"
style="float:left; margin-top:-4px; margin-left:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 5px 0"></span>
<span class="border-right-0"
style="float:right; margin-top:-4px; margin-right:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 0 5px"></span>
</li>
</ul>
</div>
<div class="col-md-12 tab-content ui-front shadow"
style="border-top-right-radius:15px;border-bottom-right-radius:15px;background-color:#fffafa;height:auto;">
<div class="tab-pane fade active show" id="screenshot-1" role="tabpanel" aria-labelledby="screenshot-1">
<div class="row" style="padding:4rem 2.5rem 0 !important; background-color:#fff !important">
<div class="col-lg-12 d-flex flex-column align-items-center">
<h1 class="text-center text-uppercase"
style="font-family:Montserrat, 'sans-serif' !important; font-size:40px !important; color:#791d97; font-weight:900 !important">
<span style="color:#5154a5">Screenshots </span> <sup>
</sup></h1>
</div>
<div class="col-lg-12 d-flex flex-column align-items-center">
<h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
Order Screen</h3>
</div>
<div class="col-lg-12 d-flex justify-content-center align-items-center"
style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
<img src="assets/screenshots/Desktop view 1.png?6ef7fd7"
class="img img-responsive center-block">
</div>
<div class="col-lg-12 d-flex flex-column align-items-center">
<h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
Payment Screen</h3>
</div>
<div class="col-lg-12 d-flex justify-content-center align-items-center"
style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
<img src="assets/screenshots/Desktop view 3.png?6ef7fd7"
class="img img-responsive center-block">
</div>
<div class="col-lg-12 d-flex flex-column align-items-center">
<h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
Customer List Screen</h3>
</div>
<div class="col-lg-12 d-flex justify-content-center align-items-center"
style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
<img src="assets/screenshots/Desktop view 2.png?6ef7fd7"
class="img img-responsive center-block">
</div>
<div class="col-lg-12 d-flex flex-column align-items-center">
<h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
Orders</h3>
</div>
<div class="col-lg-12 d-flex justify-content-center align-items-center"
style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
<img src="assets/screenshots/Desktop view 4.png?6ef7fd7"
class="img img-responsive center-block">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- New section -->
<section style="margin-top:50px;">
<div class="row">
<div class="col-sm-12 col-md-12-col-lg-2">
<h2 style="font-weight:bold; color:#3D3D4E">Related Modules</h2>
<p style="color:#777783">Explore our related modules</p>
<hr>
</div>
<div class="col-sm-12">
<div id="demo1" class="row carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner" style="padding:30px">
<div class="carousel-item" style="min-height:198.656px">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/themes/17.0/code_backend_theme/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block" style="border-radius:0px"
src="./assets/modules/code_backend_theme.png">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/themes/17.0/vista_backend_theme/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block" style="border-radius:0px"
src="./assets/modules/vista.jpg">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/themes/17.0/jazzy_backend_theme/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block" style="border-radius:0px"
src="./assets/modules/jazzy.jpg">
</div>
</a>
</div>
</div>
<div class="carousel-item active" style="min-height:198.656px">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/themes/17.0/hue_backend_theme/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block" style="border-radius:0px"
src="./assets/modules/hue.png">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/themes/17.0/theme_boec/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block" style="border-radius:0px"
src="./assets/modules/boec.png">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/themes/17.0/theme_college/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block" style="border-radius:0px"
src="./assets/modules/college.jpg">
</div>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo1" data-slide="prev" style="width:35px; color:#000"> <span
class="carousel-control-prev-icon"><i class="fa fa-chevron-left"
style="font-size:24px"></i></span>
</a> <a class="carousel-control-next" href="#demo1" data-slide="next" style="width:35px; color:#000">
<span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
style="font-size:24px"></i></span>
</a>
</div>
</div>
</div>
</section>
<section>
<div class="d-flex align-items-center" style="border-bottom:2px solid #714B67; padding:15px 0px">
<div class="d-flex justify-content-center align-items-center mr-2"
style="background-color:#F5F5F5; border-radius:0px; width:40px; height:40px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/misc/star.png?aedef96">
</div>
<h2 class="mt-2" style="font-family:'Montserrat', sans-serif; font-size:24px; font-weight:bold">Our Services
</h2>
</div>
<div class="container my-5">
<div class="row">
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#1dd1a1 !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/cogs.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Customization</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#ff6b6b !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/wrench.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Implementation</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#6462CD !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/lifebuoy.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Support</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#ffa801 !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/user.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Hire
Odoo
Developer</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#54a0ff !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/puzzle.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Integration</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#6d7680 !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/update.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Migration</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#786fa6 !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/consultation.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Consultancy</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#f8a5c2 !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/training.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Implementation</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color:#e6be26 !important; border-radius:15px !important; height:80px; width:80px">
<img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/license.png?aedef96"
class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family:Montserrat, 'sans-serif' !important; font-weight:bold">
Odoo
Licensing Consultancy</h6>
</div>
</div>
</div>
</section>
<section class="container" style="margin-top:6rem !important">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 style="color:#212529 !important">Our Industries</h2>
<hr style="border:3px solid #714B67 !important; background-color:#714B67 !important; width:80px !important; margin-bottom:2rem !important">
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/trading-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
Trading
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
Easily procure
and
sell your products</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/pos-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
POS
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
Easy
configuration
and convivial experience</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/education-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
Education
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
A platform for
educational management</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/manufacturing-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
Manufacturing
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
Plan, track and
schedule your operations</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/ecom-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
E-commerce &amp; Website
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
Mobile
friendly,
awe-inspiring product pages</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/service-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
Service Management
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
Keep track of
services and invoice</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/restaurant-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
Restaurant
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
Run your bar or
restaurant methodically</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
<img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/hotel-black.png?2d98612"
class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family:Montserrat, sans-serif !important; color:#000 !important; font-weight:bold">
Hotel Management
</h5>
<p style="font-family:Montserrat, sans-serif !important; font-size:0.9rem !important">
An
all-inclusive
hotel management application</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<!-- Footer Section -->
<div class="container mt-5">
<div class="row">
<div class="col-sm-12 col-md-12-col-lg-2">
<h2 style="font-weight:bold; color:#3D3D4E">Support</h2>
<p style="color:#777783">Need help? Get in touch.
</p>
<hr>
</div>
<div class="col-sm-12 col-md-6">
<div class="d-flex align-items-center" style="background-color:#F6F8F9; padding:30px">
<div class="mr-4 d-flex justify-content-center align-items-center"
style="background-color:#714B67; height:70px; width:70px">
<img src="assets/icons/support.png" height="48" width="48" style="width:42px; height:42px">
</div>
<div>
<h4>Need Help?</h4>
<p style="line-height:100%">Got questions or need help? Get in touch.</p>
<a href="mailto:odoo@cybrosys.com">
<p style="font-weight:400; font-size:28px; line-height:80%; color:#714B67">
odoo@cybrosys.com</p>
</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="d-flex align-items-center" style="background-color:#F6F8F9; padding:30px">
<div class="mr-4 d-flex justify-content-center align-items-center"
style="background-color:#2AC44D; height:70px; width:70px">
<img src="assets/icons/whatsapp.png" height="52" width="52" style="width:52px; height:52px">
</div>
<div>
<h4>WhatsApp</h4>
<p style="line-height:100%">Say hi to us on WhatsApp!</p>
<span href="https://api.whatsapp.com/send?phone=918606827707">
<p style="font-weight:400; font-size:28px; line-height:80%; color:#714B67">+91
86068
27707</p>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<section class="oe_container"
style="padding: 2rem 3rem 1rem; background-color: #fff !important;">
<div class="row"
style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
<!-- Logo -->
<div class="col-lg-12 d-flex justify-content-center align-items-center"
style="margin-top: 3rem;">
<img src="https://www.cybrosys.com/images/logo.png"
width="200px" height="auto"/>
</div>
<!-- End of Logo -->
</div>
</section>
<!-- END OF FOOTER -->
</div>

BIN
pos_theme_sapphire/static/description/theme_screenshot.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 487 KiB

505
pos_theme_sapphire/static/src/css/custom.css

@ -0,0 +1,505 @@
.main-app {
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
}
.main-app .sidebar {
width: 80px;
height: 100%;
left: 0;
top: 0;
bottom: 0;
background: #fff;
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
}
@media (max-width: 768px) {
.main-app .sidebar {
width: 60px;
}
}
.main-app .main-menu {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.main-app .menu-item {
list-style: none;
position: relative;
width: 85px;
height: 65px;
}
.main-app .menu-txt {
opacity: 0;
width: 0px;
min-width: 0px;
overflow: hidden;
transition: 300ms linear;
transition-delay: 250ms;
display: flex;
align-items: center;
position: relative;
top: 2px;
white-space: nowrap;
overflow: hidden;
}
.main-app .menu-a {
padding: 35px 33.5px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.main-app .menu-icon {
display: block;
font-size: 1.5rem;
color: #fefefe;
position: relative;
z-index: 100;
transition: 400ms;
}
@media (min-width: 768px) {
.main-app .menu-item:hover .menu-txt {
opacity: 1;
width: 100%;
min-width: 40px;
padding: 0px 10px;
transition-delay: 0s;
color: #4c4c4c;
font-size: 15px;
font-weight: 600;
align-self: center;
}
.main-app .menu-item:hover .menu-icon {
color: #0f0f0f;
}
}
.main-app .menu-txt-hld {
position: absolute;
z-index: 99;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 10px;
font-size: .94rem;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0);
padding: 9.5px 8px;
transition: 250ms linear;
display: flex;
align-items: center;
transition-delay: 300ms;
left: 22px;
}
@media (min-width: 768px) {
.main-app .menu-item:hover .menu-txt-hld {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.07);
background: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.05);
transition-delay: 0ms;
left: 5px;
}
}
.main-app .active .menu-icon {
color: #223b6e;
}
.custom-header .card {
margin-left: 20px;
}
.custom-header .top-container{
display: flex;
align-items: center;
}
.custom-header .profile-image{
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.custom-header .name{
font-size: 15px;
font-weight: bold;
color: #251F1F;
position: relative;
top: 0px;
}
.custom-header .mail{
font-size: 14px !important;
color: #251F1F;
position: relative;
top: -15px;
}
.product-card {
display: flex;
flex-direction: column;
align-items: center;
min-width: 150px;
max-width: 185px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
transition: all 0.3s ease;
margin: 2px;
background-color: white;
}
.product-card .title {
font-size: 1.2em;
font-weight: bold;
margin: 10px;
}
.product-card .price {
color: #888;
margin: 5px;
}
.pos .product-list {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}
.pos .product-img {
width: 85%;
}
.pos .product-img img {
width: 100%;
height: 130px;
object-fit: cover;
border-radius: 5px;
margin-top: 10px;
}
.pos .products-widget .products-widget-control {
box-shadow: unset !important;
padding: 5px;
}
.pos .rightpane {
background: #ededed !important;
}
.box{
position: relative;
margin-left: auto;
right: 10px;
}
@media (max-width: 768px) {
.box{
position: absolute;
}
}
[badge]:after {
background: #a8a8a8;
border-radius: 10rem;
color: #fff;
content: attr(badge);
font-size: small;
min-width: 18px;
padding: 2px;
position: absolute;
text-align: center;
left: 1.7em;
bottom: 1.7em;
z-index: 999;
}
@media (min-width: 768px) {
.pos .leftpane {
max-width: 500px;
height: calc(100% - 30px);
margin: 15px;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 47%);
border: unset;
}
}
.pos .order-container {
border-radius: 10px 10px 0px 0px;
}
.pos *::-webkit-scrollbar {
width: 0 !important;
}
.pos .screen {
background: #ededed !important;
}
.pos .mode-button.selected-mode {
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
}
.pos .button.validation {
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
}
.pos .button.validation:hover {
background: linear-gradient(to right bottom, rgb(61 72 142), rgb(63 54 128)) !important;
}
.pos .order .orderline.selected {
background: rgb(70 71 166 / 33%) !important;
}
.pos .oe_status {
cursor: default;
}
.pos .oe_status .d-inline-block{
display: inline-block;
}
.pos .mode-button.selected-mode:hover {
background: linear-gradient(to right bottom, rgb(74 82 131), rgb(58, 46, 141)) !important;
}
.pos .category-button {
display: inline-flex;
margin: 5px !important;
width: 160px;
height: 60px;
background: #fff;
border: 1px solid #d7d7d7;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
}
.pos .category-button .category-img {
position: relative;
width: 55px;
text-align: center;
cursor: pointer;
object-fit: contain;
padding: 5px;
height: calc(100% - 10px);
}
.pos .category-button .category-img img {
object-fit: cover;
width: 100%;
height: 50px;
object-fit: cover;
border-radius: 5px;
}
.pos .category-button .category-name {
display: inline-grid;
position: relative;
width: unset;
align-content: center;
padding-top: unset;
font-size: 14px;
font-family: 'Roboto', sans-serif;
color: #251F1F;
}
.pos .category-list {
background: none;
}
.pos .categories {
border-bottom: none;
}
.pos .category-list-scroller {
max-height: 85px;
}
.pos .breadcrumb-button {
color: #251F1F;
}
.pos .breadcrumb-arrow {
width: 10px;
}
.pos a.button {
color: #fff;
}
.ticket-screen .controls button.highlight {
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
border-color: #494cab;
}
.pos .orders .order-row:hover, .pos .orders .order-row.highlight {
background-color: #4544a2d9;
}
.pos .control-button.highlight, .pos .button.highlight {
color:#fff !important;
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141)) !important;
border-color: #494cab !important;
}
.pos .popup .button {
color: #111;
border: 1px solid #484aa8;
}
.screen .top-content .button {
border: 1px solid #484aa8;
}
.pos .partnerlist-screen tr.partner-line:hover {
color:#fff;
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141)) !important;
}
.pos textarea:focus {
box-shadow: 0px 0px 0px 3px #484aa8;
}
.pos .category-simple-button:active {
color: #484aa8;
}
.pos .switchpane .btn-switchpane.secondary {
color: #fff;
}
.payment-screen .paymentlines-empty .total {
color: #484aa8;
}
.pos .rightpane-header {
flex-direction: unset;
border-radius: 5px;
}
.pos .partner-list tr.partner-line.highlight {
color:#fff;
background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141)) !important;
}
.menu-item .oe_status i {
font-size: 22px;
}
.category-simple-button{
font-weight:bold;
margin-left:10px;
padding:5px;
transition: all 0.8s ease;
}
.category-simple-button:hover{
background: grey;
border-radius:5px;
color:#fff;
}
.btn.cashier-name{
background:none !important;
}
.bg-100, .text-bg-100 {
--background-color: RGBA(248, 249, 250, var(--bg-opacity, 1));
background-color: rgb(234 236 237) !important;
}
.search-products .h-100{
height:30px !important;
}
.products-widget-control-category{
border-radius:7px;
margin-right: 7px;
margin-left: 9px;
margin-bottom:5px;
}
#search-products .input-container {
position: relative;
}
#search-products .input-container input {
opacity: 0; /* Hide input visually */
width: 0; /* Collapse input width */
min-width: 0 !important;
transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out; /* Add transition for smooth animation */
}
#search-products .input-container:hover input {
opacity: 1; /* Show input on hover */
width: 300px; /* Expand input width on hover */ /* Adjust width as needed */
}
/* Optional animation for icon */
#search-products .input-container:hover i {
animation: search-icon-expand 0.8s ease-in-out;
}
@keyframes search-icon-expand {
from { transform: scale(1); }
to { transform: scale(1.6); } /* Adjust scale as desired */
}
#search-products .input-group{
width:34px;
border-radius:25px;
background:none !important;
transition: opacity 2s ease-in-out, width 0.5s ease-in-out;
}
#search-products .input-group:hover{
width:300px;
border-radius:20px;
background:#fff !important;
}
.home-category-button{
padding:10px;
margin:15px;
}
#search-products .input-group > .form-control {
border: solid 1px;
border-radius: 20px;
}
.menu-a.SyncNotification .btn-light{
border:none !important;
background-color:transparent !important;
}
.menu-item .menu-txt-hld .px-4{
padding-left:5px !important;
color:#fff;
}
.btn-light.active{
color: #fff;
background-color: #71639e;
border-color: #71639e;
}
@media (max-width: 768px) {
.products-widget-control .search-products .lg-screen, .products-widget-control .search-products .lg-screen-cat {
display: none !important;
}
}
@media (min-width: 769px) {
.products-widget-control .sm-screen, .products-widget-control .sm-screen-cat {
display: none !important;
}
}
.products-widget-control .sm-screen .input-group.h-100{
height: 65% !important;
}
/*. lg-screen .input-group .form-control input{
min-width:0px !important;
}*/

66
pos_theme_sapphire/static/src/js/ProducScreen.js

@ -0,0 +1,66 @@
/** @odoo-module **/
import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen";
import { useService } from "@web/core/utils/hooks";
import { _t } from "@web/core/l10n/translation";
import { patch } from "@web/core/utils/patch";
import { ProxyStatus } from "@point_of_sale/app/navbar/proxy_status/proxy_status";
import { SyncNotification } from "@point_of_sale/app/navbar/sync_notification/sync_notification";
import { ClosePosPopup } from "@point_of_sale/app/navbar/closing_popup/closing_popup";
import { SaleDetailsButton } from "@point_of_sale/app/navbar/sale_details_button/sale_details_button";
import { CashMovePopup } from "@point_of_sale/app/navbar/cash_move_popup/cash_move_popup";
import { TicketScreen } from "@point_of_sale/app/screens/ticket_screen/ticket_screen";
import { BackButton } from "@point_of_sale/app/navbar/back_button/back_button";
ProductScreen.components = {
...ProductScreen.components,
ProxyStatus,
SyncNotification,
SaleDetailsButton,
BackButton,
}
patch(ProductScreen.prototype, {
setup() {
super.setup(...arguments);
this.hardwareProxy = useService("hardware_proxy");
},
async closeSession() {
const info = await this.pos.getClosePosInfo();
this.popup.add(ClosePosPopup, { ...info, keepBehind: true });
},
onCashMoveButtonClick() {
this.hardwareProxy.openCashbox(_t("Cash in / out"));
this.popup.add(CashMovePopup);
},
get orderCount() {
return this.pos.get_order_list().length;
},
async onTicketButtonClick() {
if (this.isTicketScreenShown) {
this.pos.closeScreen();
} else {
if (this._shouldLoadOrders()) {
try {
this.pos.setLoadingOrderState(true);
const message = await this.pos._syncAllOrdersFromServer();
if (message) {
this.notification.add(message, 5000);
}
} finally {
this.pos.setLoadingOrderState(false);
this.pos.showScreen("TicketScreen");
}
} else {
this.pos.showScreen("TicketScreen");
}
}
},
_shouldLoadOrders() {
return this.pos.config.trusted_config_ids.length > 0;
},
showBackButton() {
return this.pos.showBackButton() && this.ui.isSmall;
},
});

9
pos_theme_sapphire/static/src/js/ProductsWidget.js

@ -0,0 +1,9 @@
/** @odoo-module **/
import { ProductsWidget } from "@point_of_sale/app/screens/product_screen/product_list/product_list";
import { CashierName } from "@point_of_sale/app/navbar/cashier_name/cashier_name";
ProductsWidget.components = {
...ProductsWidget.components,
CashierName,
}

7
pos_theme_sapphire/static/src/xml/Chrome.xml

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<!-- Replace Navbar from pos -->
<t t-inherit="point_of_sale.Chrome" t-inherit-mode="extension">
<xpath expr="//Navbar" position="replace"/>
</t>
</templates>

20
pos_theme_sapphire/static/src/xml/ChromeWidgets/CashierName.xml

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<!-- Current cashier details -->
<t t-name="CashierName" t-inherit="point_of_sale.CashierName" t-inherit-mode="extension" owl="1">
<xpath expr="//div[hasclass('btn-light')]//img[hasclass('avatar')]" position="attributes">
<attribute name="class" remove="avatar" add="img-fluid profile-image avatar cashier-name" separator=" "/>
<attribute name="width">70</attribute>
</xpath>
<xpath expr="//div[hasclass('btn-light')]" position="attributes">
<attribute name="class" remove="avatar" add="cashier-name" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('btn-light')]//span[hasclass('username')]" position="replace"/>
<xpath expr="//div[hasclass('btn-light')]//img[hasclass('avatar')]" position="after">
<div style="margin-left: 20px" class="d-inline-block">
<h5 class="name username"><t t-esc="username"/></h5>
<p class="mail">clark@zmail.com</p>
</div>
</xpath>
</t>
</templates>

16
pos_theme_sapphire/static/src/xml/screens/PaymentScreen/PaymentScreen.xml

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<!-- Add a back button before the existing switchpane button -->
<t t-inherit="point_of_sale.PaymentScreenValidate" t-inherit-mode="extension">
<xpath expr="//div[@class='switchpane d-flex h-12']/button" position="before">
<!-- New button to go back to the ProductScreen -->
<button t-if="ui.isSmall" class="btn-switchpane btn btn-lg btn-light"
t-on-click="() => pos.showScreen('ProductScreen')">
<span class="search-icon">
<i class="fa fa-angle-double-left"/>
</span>
Back
</button>
</xpath>
</t>
</templates>

29
pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductCard.xml

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
<!-- Product card section -->
<t t-name="ProductCard" t-inherit="point_of_sale.ProductCard"
t-inherit-mode="extension">
<xpath expr="//article" position="replace">
<div tabindex="0"
class="product-card"
t-on-keypress="(event) => event.code === 'Space' ? props.onClick(event) : ()=>{}"
t-on-click="props.onClick"
t-att-data-product-id="props.productId"
t-attf-aria-labelledby="article_product_{{props.productId}}">
<div t-if="props.imageUrl" class="product-img">
<img class="w-100" t-att-src="props.imageUrl"
t-att-alt="props.name"/>
</div>
<div class="product-content d-flex flex-column justify-content-between h-100 mx-2 py-1">
<div class="overflow-hidden lh-sm fw-bolder product-name"
t-att-class="{'no-image': !props.imageUrl}"
t-attf-id="article_product_{{props.productId}}"
t-esc="props.name"/>
<span t-if="props.price"
class="price-tag text-primary py-1 fw-bolder"
t-esc="props.price"/>
</div>
</div>
</xpath>
</t>
</templates>

130
pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductScreen.xml

@ -0,0 +1,130 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<!-- Point of sale order session page -->
<t t-inherit="point_of_sale.ProductScreen" t-inherit-mode="extension">
<xpath expr="//div[@class='product-screen d-flex h-100 bg-100']" position="replace">
<div class="product-screen d-flex h-100 bg-100" t-att-class="{ 'd-none': !props.isShown }">
<div class="main-app">
<div class="sidebar">
<nav class="main-nav" style="height: 100%">
<ul class="main-menu" style="height: 100%">
<li class="menu-item" t-if="showBackButton()">
<a href="#" class="menu-a" target="_blank">
<div class="menu-txt-hld" t-on-click="">
<span class="menu-txt">Back</span>
<BackButton t-if="showBackButton()"/>
</div>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-a" target="_blank">
<div class="ticket-button menu-txt-hld with-badge" t-on-click="onTicketButtonClick" t-att-badge="orderCount">
<i class="fa fa-ticket menu-icon"/>
<span class="menu-txt">Orders</span>
</div>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-a" target="_blank">
<div class="cash-move-button menu-txt-hld" t-on-click="onCashMoveButtonClick">
<i class="fa fa-money menu-icon"/>
<span class="menu-txt">Cash In/Out</span>
</div>
</a>
</li>
<li class="menu-item">
<SaleDetailsButton t-if="hardwareProxy.printer" isHeaderButton="true"/>
</li>
<li class="menu-item">
<ProxyStatus t-if="pos.config.use_proxy" />
</li>
<li class="menu-item" style="position: absolute; bottom: 130px;">
<a href="#" class="menu-a SyncNotification" target="_blank">
<SyncNotification />
</a>
</li>
<li class="menu-item" style="position: absolute; bottom: 60px;">
<a href="#" class="menu-a" target="_blank">
<div class="header-button menu-txt-hld" t-on-click="() => pos.closePos()">
<i class="fa fa-pause menu-icon"/>
<span class="menu-txt">Backend</span>
</div>
</a>
</li>
<li class="menu-item" style="position: absolute; bottom: 5px;">
<a href="#" class="menu-a" target="_blank">
<div class="header-button menu-txt-hld" t-on-click="closeSession">
<i class="fa fa-sign-out menu-icon"/>
<span class="menu-txt">Logout</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="rightpane overflow-auto d-flex flex-grow-1 flex-column w-60" t-if="!ui.isSmall || pos.mobile_pane === 'right'">
<ProductsWidget />
<t t-if="ui.isSmall">
<div class="product-reminder d-flex justify-content-center align-items-center py-1 text-bg-warning bg-opacity-50 fw-bolder" t-if="state.showProductReminder" t-key="animationKey" >
<span><t t-esc="selectedOrderlineQuantity"/> <t t-esc="selectedOrderlineDisplayName"/> <t t-esc="selectedOrderlineTotal"/></span>
</div>
<div class="switchpane d-flex h-12">
<button class="btn-switchpane pay-button btn w-50 rounded-0 fw-bolder" t-attf-class="{{ primaryPayButton ? 'btn-primary' : 'btn-secondary' }}" t-on-click="() => currentOrder.pay()">
<span class="fs-1 d-block">Pay</span>
<span><t t-esc="total" /></span>
</button>
<button class="btn-switchpane btn w-50 btn-secondary rounded-0 fw-bolder review-button" t-on-click="switchPane">
<span class="fs-1 d-block">Review</span>
<span><t t-esc="items"/> items</span>
</button>
</div>
</t>
</div>
<div t-if="!ui.isSmall || pos.mobile_pane === 'left'"
t-att-class="{'flex-grow-1': ui.isSmall}"
class="leftpane order-screen d-flex flex-column border-end" >
<OrderWidget lines="currentOrder.orderlines" t-slot-scope="scope"
total="env.utils.formatCurrency(currentOrder.get_total_with_tax())"
tax="!env.utils.floatIsZero(currentOrder.get_total_tax()) and env.utils.formatCurrency(currentOrder.get_total_tax()) or ''">
<t t-set="line" t-value="scope.line" />
<Orderline line="line.getDisplayData()"
t-on-click="() => this.selectLine(line)"
class="{ ...line.getDisplayClasses(), 'selected' : line.selected }">
<t t-set-slot="product-name">
<i t-if="line.get_product().isTracked()"
t-on-click.stop="() => line.editPackLotLines()" role="img"
t-attf-class="{{ line.has_valid_product_lot() ? 'text-success' : 'text-danger'}} fa fa-list line-lot-icon ms-1"
t-attf-title="{{ line.has_valid_product_lot() ? 'Valid product lot' : 'Invalid product lot'}}" />
</t>
<ul t-if="line.pack_lot_lines">
<li t-foreach="line.get_lot_lines()" t-as="lot" t-key="lot.cid">
SN <t t-esc="lot.lot_name"/>
</li>
</ul>
</Orderline>
<t t-set-slot="details" />
</OrderWidget>
<div class="pads border-top">
<div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden bg-300"
t-if="!ui.isSmall">
<t t-foreach="controlButtons" t-as="cb" t-key="cb.name">
<t t-component="cb.component" t-key="cb.name"/>
</t>
</div>
<div class="subpads d-flex">
<ActionpadWidget
partner="partner"
actionName="constructor.numpadActionName"
actionType="'payment'"
onClickMore.bind="displayAllControlPopup" />
<Numpad buttons="getNumpadButtons()" onClick.bind="onNumpadClick" class="'w-100'"/>
</div>
</div>
</div>
</div>
</xpath>
</t>
</templates>

134
pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductsWidget.xml

@ -0,0 +1,134 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
<!-- Product listing section -->
<t t-name="ProductsWidget" t-inherit="point_of_sale.ProductsWidget"
t-inherit-mode="extension" owl="1">
<xpath expr="//div[hasclass('products-widget')]" position="replace">
<div class="products-widget d-flex flex-column flex-grow-1 overflow-auto"
t-ref="products-widget">
<t t-set="showCategoryImages"
t-value="getShowCategoryImages()"/>
<div class="products-widget-control products-widget-control-header mt-4 d-flex shadow-sm justify-content-between">
<CashierName/>
<div class="d-flex search-products" id="search-products">
<Input tModel="[pos, 'searchProductWord']"
class="'p-2 lg-screen'"
isSmall="ui.isSmall"
placeholder="'Search products...'"
icon="{type: 'fa', value: 'fa-search'}"
debounceMillis="100"/>
<div class="home-category-button lg-screen-cat">
<span class="breadcrumb-button breadcrumb-home"
t-on-click="() => this.pos.setSelectedCategoryId(0)">
<i class="fa fa-home" role="img"
aria-label="Home" title="Home"
style="font-size: 30px;"/>
</span>
</div>
</div>
</div>
<div class="products-widget-control products-widget-control-header mt-4 d-flex shadow-sm justify-content-between">
<Input tModel="[pos, 'searchProductWord']"
class="'p-2 sm-screen'"
isSmall="ui.isSmall"
placeholder="'Search products...'"
icon="{type: 'fa', value: 'fa-search'}"
debounceMillis="100"/>
<div class="home-category-button sm-screen-cat">
<span class="breadcrumb-button breadcrumb-home"
t-on-click="() => this.pos.setSelectedCategoryId(0)">
<i class="fa fa-home" role="img"
aria-label="Home" title="Home"
style="font-size: 30px;"/>
</span>
</div>
</div>
<t t-set="categories" t-value="getCategories()"/>
<div t-if="categories.length > 2"
class="products-widget-control bg-white products-widget-control-category d-flex shadow-sm">
<div class="rightpane-header">
<div class="categories-header">
<div class="category-list simple"
style="border-radius: 5px; padding: 10px;">
<t t-foreach="getCategories()"
t-as="category" t-key="category.id">
<span t-if="category.id != 0"
class="category-simple-button"
t-on-click="() => this.pos.setSelectedCategoryId(category.id)">
<t t-esc="category.name"/>
</span>
</t>
</div>
</div>
</div>
</div>
<div class="product-list-container flex-grow-1 overflow-y-auto">
<div t-if="productsToDisplay.length != 0 and pos.posHasValidProduct()"
t-attf-class="product-list {{this.pos.productListViewMode}} p-1">
<t t-foreach="productsToDisplay" t-as="product"
t-key="product.id">
<ProductCard
class="pos.productViewMode"
name="product.display_name"
productId="product.id"
price="product.getFormattedUnitPrice()"
imageUrl="product.getImageUrl()"
onClick="() =>this.pos.addProductToCurrentOrder(product)"
productInfo="true"
onProductInfoClick="() => this.onProductInfoClick(product)"
/>
</t>
</div>
<div t-else=""
class="product-list-empty no-results-message text-center mt-5">
<t t-if="searchWord">
<p>No products found for <b>"<t t-esc="searchWord"/>
"</b>
in this category.</p>
</t>
<t t-else="">
<t t-if="pos.posHasValidProduct()">
<p>There are no products in this category.</p>
</t>
<t t-else="">
<div t-if="!state.loadingDemo">
<p class="text-large">No products available. Explore
<a role="button"
class="button-no-demo fw-bolder"
t-on-click="loadDemoDataProducts">demo data</a>
or <a
role="button"
class="button-no-demo fw-bolder"
t-on-click="createNewProducts">create your own</a>.</p>
</div>
<div t-else=""
class="block-top-header position-absolute top-0 start-0 bg-black opacity-50 w-100 h-100 z-1000">
<div class="d-flex h-100 w-100 text-white flex-row align-items-center justify-content-center">
<div class="o_spinner d-flex flex-column mb-4">
<img src="/web/static/img/spin.svg"
alt="Loading..."/>
Loading...
</div>
</div>
</div>
</t>
</t>
</div>
<div t-if="searchWord"
class="search-more-button d-flex justify-content-center">
<button class="btn btn-primary btn-lg"
t-on-click="onPressEnterKey">Search more</button>
</div>
<div class="portal search-database-button no-results-message"
t-att-class="{ 'd-none': !shouldShowButton }"/>
</div>
</div>
</xpath>
</t>
</templates>

16
pos_theme_sapphire/static/src/xml/screens/TicketScreen/TicketScreen.xml

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<!-- Add a back button before the existing switchpane button -->
<t t-inherit="point_of_sale.TicketScreen" t-inherit-mode="extension">
<xpath expr="//div[@class='switchpane d-flex w-100']/button[@class='btn-switchpane load-order-button primary btn btn-primary rounded-0 w-50 fw-bolder py-3']"
position="before">
<button t-if="ui.isSmall" class="btn-switchpane btn btn-lg btn-light"
t-on-click="() => this.closeTicketScreen()">
<span class="search-icon">
<i class="fa fa-angle-double-left"/>
</span>
Back
</button>
</xpath>
</t>
</templates>
Loading…
Cancel
Save