Jul 31 [UPDT] Updated 'animated_snippet'

animated_snippet/README.rst

@@ -1,9 +1,8 @@
 .. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg
     :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
     :alt: License: LGPL-3
-
 Animated Snippets
-=================
+=========
 * Variety of animated snippets for the website.
 
 Installation

animated_snippet/__manifest__.py

@@ -21,9 +21,9 @@
 #############################################################################
 {
     'name': "Animated Snippets",
-    'version': '16.0.1.0.0',
-    'summary': """Animated Snippets for Websites.""",
-    'description': """Variety of Snippets With Animations to Beautify your Website.""",
+    'version': '16.0.1.1.0',
+    'summary': """Animated snippets for websites.""",
+    'description': """Variety of snippets which have animations beautify your website.""",
     'author': "Cybrosys Techno Solutions",
     'company': 'Cybrosys Techno Solutions',
     'maintainer': 'Cybrosys Techno Solutions',
@@ -48,6 +48,7 @@
         'views/snippets/a_features_09_templates.xml',
         'views/snippets/a_numbers_templates.xml',
         'views/snippets/a_product_list_templates.xml',
+        'views/snippets/s_pricing_page.xml',
     ],
     'assets': {
         'web.assets_frontend': [
@@ -67,6 +68,8 @@
             '/animated_snippet/static/src/css/a_numbers.css',
             '/animated_snippet/static/src/css/a_product_list.css',
             '/animated_snippet/static/src/css/a_showcase.css',
+            '/animated_snippet/static/src/css/s_pricing_page.css',
+            '/animated_snippet/static/js/animated_snippet.js',
         ]},
     'images': ['static/description/banner.png'],
     'license': 'LGPL-3',

animated_snippet/doc/RELEASE_NOTES.md

@@ -4,4 +4,11 @@
 #### Version 16.0.1.0.0
 #### ADD
 
-- Initial Commit for Animated Snippets
+- Initial commit for Animated Snippets
+
+#### 31.07.2024
+#### Version 16.0.1.1.0
+#### ADD
+
+- Added some snippet Supports annual and monthly pricing.
+

animated_snippet/static/js/animated_snippet.js

@@ -0,0 +1,34 @@
+odoo.define('animated_snippet.pricing_page', function (require) {
+    var PublicWidget = require('web.public.widget');
+    var rpc = require('web.rpc');
+    var AppPricingPage = PublicWidget.Widget.extend({
+        selector: '.pricing-tables',  // The selector for the elements to which this widget applies
+        events: {
+            'change input': '_onSwitchChange'  // Event listener for input changes
+        },
+
+        start: function() {
+            this._super.apply(this, arguments);
+        },
+
+        _initializeSwitches: function() {
+            var self = this;
+            this.$('.custom-switch').each(function(i) {
+                var $this = $(this);
+                var classes = $(this).attr("class"),
+                    id      = $(this).attr("id"),
+                    name    = $(this).attr("name");
+                $(this).wrap('<div class="custom-switch" id="' + name + '"></div>');
+                $(this).after('<label for="custom-switch-' + i + '"></label>');
+                $(this).attr("id", "custom-switch-" + i);
+                $(this).attr("name", name);
+            });
+        },
+
+        _onSwitchChange: function(event) {
+            $(".pricing-tables").toggleClass("plans--annually");
+        }
+    });
+    PublicWidget.registry.AppPricingPage = AppPricingPage;
+    return AppPricingPage;
+});

animated_snippet/static/src/css/s_pricing_page.css

@@ -0,0 +1,508 @@
+
+.pricing-tables img {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  -ms-interpolation-mode: bicubic;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Lists */
+.pricing-tables ul,
+.pricing-tables ol {
+  list-style: none;
+}
+
+/* Anchor Link*/
+.pricing-tables a {
+  color: inherit;
+  text-decoration: none;
+}
+  .pricing-tables a:hover,
+  .pricing-tables a:focus,
+  .pricing-tables a:active {
+    text-decoration: none;
+    outline: none;
+  }
+
+.pricing-tables select {
+  width: 100%;
+}
+
+.pricing-tables input:focus {
+  outline: 0;
+}
+
+.pricing-tables ::selection {
+  background-color: grey;
+  color: #fff;
+}
+
+.pricing-tables ::-moz-selection {
+  background-color: grey;
+  color: #fff;
+}
+
+/* -----------------
+   # GLOBAL CLASEES
+--------------------*/
+.pricing-tables .dis-block {
+  display: block;
+}
+
+@media (max-width: 767px) {
+  .pricing-tables .dis-block-sm {
+    display: block;
+  }
+}
+
+/* Aligning */
+.pricing-tables .text-center {
+  text-align: center;
+}
+
+@media (max-width: 767px) {
+  .pricing-tables .text-center-sm {
+    display: block;
+  }
+}
+
+.pricing-tables .text-left {
+  text-align: left;
+}
+
+.pricing-tables .box-fit {
+  width: 100%;
+}
+
+/* Text Style */
+.pricing-tables .caps {
+  text-transform: uppercase;
+}
+
+.pricing-tables .lspg1 {
+  letter-spacing: 1px;
+}
+
+.pricing-tables .lspg1-5 {
+  letter-spacing: 1.5px;
+}
+
+.pricing-tables .lspg2 {
+  letter-spacing: 2px;
+}
+
+.pricing-tables .lspg3 {
+  letter-spacing: 3px;
+}
+
+.pricing-tables .lspg-1 {
+  letter-spacing: -1px;
+}
+
+.pricing-tables .lspg-2 {
+  letter-spacing: -2px;
+}
+
+.pricing-tables .lspg-3 {
+  letter-spacing: -3px;
+}
+
+.pricing-tables h2 {
+  font-family: "Playfair Display", serif;
+  font-size: 48px;
+  font-weight: 500;
+}
+
+.pricing-tables h3 {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.pricing-tables button {
+  border: 0;
+  padding: 0;
+}
+
+.pricing-tables .btn {
+  border-radius: 6px;
+  padding: .5rem .9rem;
+  transition: all 300ms ease;
+  cursor: pointer;
+}
+  .pricing-tables .btn:active {
+    position: relative;
+    top: 1px;
+    left: 1px;
+    transform: scale(0.99);
+  }
+  .pricing-tables .btn:focus {
+    outline: 1px dotted #aaa;
+  }
+  .pricing-tables .btn.btn-sm {
+    padding: .5rem 1.4rem !important;
+    font-size: 13px !important;
+  }
+  .pricing-tables .btn.btn-md {
+    padding: .5rem 1.7rem !important;
+    font-size: 14px !important;
+  }
+  .pricing-tables .btn.btn-lg {
+    padding: .7rem 1.7rem !important;
+  }
+  .pricing-tables .btn.btn-default {
+    background: #0066cc;
+    color: #fff;
+  }
+    .pricing-tables .btn.btn-default:focus {
+      outline: 1px dotted #0066cc !important;
+    }
+  .pricing-tables .btn.btn-default--outline {
+    background: transparent;
+    color: #0066cc;
+    border: 1px solid #0066cc;
+  }
+    .pricing-tables .btn.btn-default--outline:focus {
+      outline: 1px dotted #0066cc !important;
+    }
+  .pricing-tables .btn.btn-danger {
+    background: #f97f6f;
+    color: #fff;
+  }
+    .pricing-tables .btn.btn-danger:hover {
+      background: #fa9083;
+    }
+    .pricing-tables .btn.btn-danger:focus {
+      outline: 1px dotted #f97f6f !important;
+    }
+  .pricing-tables .btn.btn-danger-outline {
+    background: transparent;
+    color: #f97f6f;
+    border: 1px solid #f97f6f;
+  }
+    .pricing-tables .btn.btn-danger-outline:focus {
+      outline: 1px dotted #f97f6f !important;
+    }
+  .pricing-tables .btn.btn-disabled {
+    cursor: not-allowed;
+  }
+    .pricing-tables .btn.btn-disabled:active {
+      position: relative;
+      top: 0px;
+      left: 0px;
+      transform: scale(1);
+    }
+    .pricing-tables .btn.btn-disabled:focus {
+      outline: 1px dotted #abb9ba !important;
+    }
+
+.pricing-tables .btn {
+  font-size: 14px;
+  font-weight: 600;
+}
+  .pricing-tables .btn:focus {
+    outline: 0;
+  }
+  .pricing-tables .btn.btn-default--outline.plan__btn--start {
+    border-radius: 50px;
+    border: 1px solid #2c79ff;
+    box-shadow: 0 0 1px rgba(44, 121, 255, 0.8);
+    padding: .470rem 0 !important;
+  }
+    .pricing-tables .btn.btn-default--outline.plan__btn--start span {
+      display: block;
+      padding: 0rem 0;
+      color: #2c79ff;
+      font-weight: 400;
+      transition: all 250ms ease;
+    }
+    .pricing-tables .btn.btn-default--outline.plan__btn--start:hover {
+      background: #2c79ff;
+      color: #FFFFFF;
+      border: 1px solid transparent;
+      box-shadow: 0 7px 10px rgba(44, 121, 255, 0.6);
+    }
+      .pricing-tables .btn.btn-default--outline.plan__btn--start:hover span {
+        color: #FFFFFF;
+      }
+    .pricing-tables .btn.btn-default--outline.plan__btn--start:focus {
+      outline: 0 !important;
+    }
+  .pricing-tables .btn.btn-default--outline.plan--bussiness__price-btn {
+    background: #db3827;
+    border: 1px solid transparent;
+    box-shadow: 0 0.5px 9.3px rgba(219, 56, 39, 0.875);
+  }
+    .pricing-tables .btn.btn-default--outline.plan--bussiness__price-btn span {
+      color: #FFFFFF;
+    }
+    .pricing-tables .btn.btn-default--outline.plan--bussiness__price-btn:hover {
+      background: transparent;
+      border: 1px solid #db3827;
+      box-shadow: 0 7px 10px rgba(219, 56, 39, 0.35);
+    }
+      .pricing-tables .btn.btn-default--outline.plan--bussiness__price-btn:hover span {
+        color: #db3827;
+      }
+
+.pricing-tables .s_container {
+  position: relative;
+  width: 82%;
+  max-width: 1200px;
+  margin: auto;
+}
+  @media only screen and (max-width: 991px) {
+    .pricing-tables .s_container {
+      width: 85%;
+    }
+  }
+  @media only screen and (max-width: 420px) {
+    .pricing-tables .s_container {
+      width: 90%;
+    }
+  }
+
+.pricing-tables .flex-wrapper {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.pricing-tables .grid-wrapper {
+  display: -ms-grid;
+  display: grid;
+}
+
+
+.pricing-tables {
+  background: #fff;
+  padding: 3rem 0 4.5rem;
+  box-shadow: 0 5px 127px 0 rgba(0, 0, 0, 0.07);
+  transition: background-color .4s ease-in-out;
+  border-radius: 4px; }
+  @media only screen and (max-width: 991px) {
+    .pricing-tables {
+      margin-bottom: 10rem; } }
+  .pricing-tables.plans--annually .switch .monthly {
+    opacity: .35; }
+  .pricing-tables.plans--annually .switch .annually {
+    opacity: 1; }
+    .pricing-tables.plans--annually .switch .annually .save {
+      color: #eeaeca; }
+  .pricing-tables.plans--annually .plans .plan .plan__head::after {
+    opacity: .5; }
+  .pricing-tables.plans--annually .plans .plan .plan__price .price.price--monthly {
+    opacity: 0;
+    transform: translateY(100px); }
+  .pricing-tables.plans--annually .plans .plan .plan__price .price.price--annually {
+    opacity: 1 !important;
+    transform: translateY(0px) !important; }
+  .pricing-tables .section__title {
+    margin: 0 0 4.2rem 0;
+    position: relative; }
+    .pricing-tables .section__title::after {
+      content: "";
+      display: block;
+      width: 30px;
+      height: 2px;
+      border-radius: 15px;
+      background: #2c79ff;
+      position: absolute;
+      right: 0;
+      left: 0;
+      margin: 0 auto;
+      bottom: -14px; }
+  .pricing-tables .switch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    user-select: none; }
+    .pricing-tables .switch span {
+      font-size: 15px;
+      font-family: "Raleway", sans-serif;
+      font-weight: 800;
+      transition: all .3s ease-in-out; }
+      .pricing-tables .switch span.annually {
+        opacity: .35;
+        position: relative; }
+        .pricing-tables .switch span.annually .save {
+          color: darkslategray;
+          font-size: 11px;
+          font-weight: 500;
+          font-family: "Montserrat", sans-serif;
+          position: absolute;
+          top: 21px;
+          left: 1px; }
+    .pricing-tables .switch .custom-switch {
+      position: relative;
+      display: inline-block;
+      margin: 0 1rem; }
+      .pricing-tables .switch .custom-switch input {
+        display: none; }
+        .pricing-tables .switch .custom-switch input:checked + label:active:after {
+          left: 25px; }
+        .pricing-tables .switch .custom-switch input:checked + label:after {
+          left: 41px;
+          background: #2c79ff; }
+      .pricing-tables .switch .custom-switch label {
+        position: relative;
+        display: block;
+        width: 66px;
+        height: 26px;
+        border-radius: 50px;
+        background: #d3e3f7;
+        transition: all .4s ease-in-out;
+        cursor: pointer; }
+        .pricing-tables .switch .custom-switch label::after {
+          position: relative;
+          display: block;
+          content: '';
+          width: 20px;
+          height: 20px;
+          top: 3px;
+          left: 5px;
+          border-radius: 19px;
+          background: #2c79ff;
+          pointer-events: none;
+          transition: all .4s ease-in-out; }
+        .pricing-tables .switch .custom-switch label:active:after {
+          width: 36px; }
+  .pricing-tables .plans {
+    min-height: 0;
+    margin-top: 3.6rem;
+    grid-template-columns: 1fr;
+    grid-gap: 2rem; }
+    @media only screen and (max-width: 767px) {
+      .pricing-tables .plans {
+        grid-template-columns: 1fr; } }
+    @media only screen and (min-width: 767px) and (max-width: 991px) {
+      .pricing-tables .plans {
+        grid-template-columns: 1fr 1fr; }
+        .pricing-tables .plans .plan--starter {
+          grid-column: 1 / -1;
+          grid-row: 1; } }
+    @media only screen and (min-width: 992px) {
+      .pricing-tables .plans {
+        grid-template-columns: 1fr 1fr 1fr; } }
+    .pricing-tables .plans .plan {
+      padding: 0 0 1.8rem;
+      flex-flow: nowrap column;
+      justify-content: space-between;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
+      border-radius: 15px;
+      overflow: hidden;
+      transition: box-shadow 300ms ease, transform 300ms ease; }
+      .pricing-tables .plans .plan .plan__head {
+        transition: all .4s ease-in-out;
+        background: linear-gradient(45deg, #2c79ff, rgba(44, 121, 255, 0.5));
+        background: #2c79ff;
+        color: #FFFFFF;
+        padding: 2rem 0;
+        overflow: hidden;
+        position: relative;
+        z-index: 1; }
+        .pricing-tables .plans .plan .plan__head::after {
+          content: "";
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: #0e090b;
+          background: linear-gradient(-45deg, #eeaeca 0%, #94bbe9 100%);
+          position: absolute;
+          top: 0;
+          left: 0;
+          opacity: 0;
+          z-index: -1;
+          transition: all .4s ease-in-out; }
+        .pricing-tables .plans .plan .plan__head .plan__title {
+          color: #FFFFFF;
+          margin: 0 0 .7rem; }
+        .pricing-tables .plans .plan .plan__head .plan__price .price {
+          font-size: 48px;
+          font-family: "UnifrakturMaguntia", cursive;
+          display: inline-block;
+          transition: transform .4s ease 0s, opacity 0.2s ease 0s;
+          position: relative; }
+          .pricing-tables .plans .plan .plan__head .plan__price .price .plan__type {
+            font-size: 11px;
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            position: absolute;
+            bottom: -3px;
+            left: 0px;
+            right: 0;
+            margin: 0 auto; }
+          .pricing-tables .plans .plan .plan__head .plan__price .price.price--annually {
+            transition: transform .4s ease 0s, opacity 1s ease 0s;
+            position: absolute;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            opacity: 0;
+            transform: translateY(100px); }
+      .pricing-tables .plans .plan .plan__features {
+        padding: 2.4rem 2rem 2.1rem; }
+        .pricing-tables .plans .plan .plan__features p {
+          margin: 0;
+          font-size: 15px;
+          font-weight: 500; }
+          .pricing-tables .plans .plan .plan__features p span {
+            display: block;
+            margin-bottom: .2rem; }
+      .pricing-tables .plans .plan .plan__btn--start {
+        margin: auto;
+        width: 75%; }
+      .pricing-tables .plans .plan:hover {
+        box-shadow: 0 10px 11px 0px rgba(44, 121, 255, 0.6);
+        transform: translateY(-3px); }
+
+/* Developed By*/
+.dev-by {
+  color: rgba(0, 0, 0, 0.7);
+  max-width: 420px;
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  bottom: .7rem;
+  right: 0;
+  left: 0;
+  margin: 0 auto;
+  z-index: 999; }
+  @media only screen and (max-width: 991px) {
+    .dev-by {
+      background: #fff;
+      color: #777;
+      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
+      padding: .5rem;
+      border-radius: 50px;
+      flex-wrap: wrap;
+      max-width: 420px; } }
+  .dev-by span:not(:last-child) {
+    margin-right: .5rem; }
+  .dev-by span a {
+    position: relative; }
+    .dev-by span a::before {
+      content: "";
+      display: inline-block;
+      width: 100%;
+      height: 5px;
+      background: rgba(44, 121, 255, 0.19);
+      position: absolute;
+      bottom: 0;
+      z-index: -1;
+      transition: all 300ms ease; }
+    .dev-by span a:hover::before {
+      height: 90%; }
+  .dev-by img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    margin-right: .8rem;
+    box-shadow: 0 2px 10px -3px black;
+    -webkit-user-select: none; }