your message

src/main/resources/static/css/login.css

@@ -0,0 +1,290 @@
+/* BASIC */
+
+html {
+    background-color: #56baed;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    height: 100vh;
+}
+
+a {
+    color: #92badd;
+    display:inline-block;
+    text-decoration: none;
+    font-weight: 400;
+}
+
+h2 {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display:inline-block;
+    margin: 40px 8px 10px 8px;
+    color: #cccccc;
+}
+
+
+
+/* STRUCTURE */
+
+.wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    padding: 20px;
+}
+
+#formContent {
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border-radius: 10px 10px 10px 10px;
+    background: #fff;
+    padding: 30px;
+    width: 90%;
+    max-width: 450px;
+    position: relative;
+    padding: 0px;
+    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    text-align: center;
+}
+
+#formFooter {
+    background-color: #f6f6f6;
+    border-top: 1px solid #dce8f1;
+    padding: 25px;
+    text-align: center;
+    -webkit-border-radius: 0 0 10px 10px;
+    border-radius: 0 0 10px 10px;
+}
+
+
+
+/* TABS */
+
+h2.inactive {
+    color: #cccccc;
+}
+
+h2.active {
+    color: #0d0d0d;
+    border-bottom: 2px solid #5fbae9;
+}
+
+
+
+/* FORM TYPOGRAPHY*/
+
+input[type=button], input[type=submit], input[type=reset]  {
+    background-color: #56baed;
+    border: none;
+    color: white;
+    padding: 15px 80px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 13px;
+    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    margin: 5px 20px 40px 20px;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+
+input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
+    background-color: #39ace7;
+}
+
+input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
+    -moz-transform: scale(0.95);
+    -webkit-transform: scale(0.95);
+    -o-transform: scale(0.95);
+    -ms-transform: scale(0.95);
+    transform: scale(0.95);
+}
+
+input[type=text] {
+    background-color: #f6f6f6;
+    border: none;
+    color: #0d0d0d;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 5px;
+    width: 85%;
+    border: 2px solid #f6f6f6;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+}
+
+input[type=text]:focus {
+    background-color: #fff;
+    border-bottom: 2px solid #5fbae9;
+}
+
+input[type=text]:placeholder {
+    color: #cccccc;
+}
+input[type=password] {
+    background-color: #f6f6f6;
+    border: none;
+    color: #0d0d0d;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 5px;
+    width: 85%;
+    border: 2px solid #f6f6f6;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+}
+
+input[type=password]:focus {
+    background-color: #fff;
+    border-bottom: 2px solid #5fbae9;
+}
+
+input[type=password]:placeholder {
+    color: #cccccc;
+}
+
+
+
+/* ANIMATIONS */
+
+/* Simple CSS3 Fade-in-down Animation */
+.fadeInDown {
+    -webkit-animation-name: fadeInDown;
+    animation-name: fadeInDown;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+@-webkit-keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+/* Simple CSS3 Fade-in Animation */
+@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+
+.fadeIn {
+    opacity:0;
+    -webkit-animation:fadeIn ease-in 1;
+    -moz-animation:fadeIn ease-in 1;
+    animation:fadeIn ease-in 1;
+
+    -webkit-animation-fill-mode:forwards;
+    -moz-animation-fill-mode:forwards;
+    animation-fill-mode:forwards;
+
+    -webkit-animation-duration:1s;
+    -moz-animation-duration:1s;
+    animation-duration:1s;
+}
+
+.fadeIn.first {
+    -webkit-animation-delay: 0.4s;
+    -moz-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+}
+
+.fadeIn.second {
+    -webkit-animation-delay: 0.6s;
+    -moz-animation-delay: 0.6s;
+    animation-delay: 0.6s;
+}
+
+.fadeIn.third {
+    -webkit-animation-delay: 0.8s;
+    -moz-animation-delay: 0.8s;
+    animation-delay: 0.8s;
+}
+
+.fadeIn.fourth {
+    -webkit-animation-delay: 1s;
+    -moz-animation-delay: 1s;
+    animation-delay: 1s;
+}
+
+/* Simple CSS3 Fade-in Animation */
+.underlineHover:after {
+    display: block;
+    left: 0;
+    bottom: -10px;
+    width: 0;
+    height: 2px;
+    background-color: #56baed;
+    content: "";
+    transition: width 0.2s;
+}
+
+.underlineHover:hover {
+    color: #0d0d0d;
+}
+
+.underlineHover:hover:after{
+    width: 100%;
+}
+
+
+
+/* OTHERS */
+
+*:focus {
+    outline: none;
+}
+
+#icon {
+    width:60%;
+}

src/main/resources/static/css/style.css

@@ -294,4 +294,32 @@ li a:hover {
     .central-body{
         padding-top: 25%;
     }
+    .card {
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+        max-width: 300px;
+        margin: auto;
+        text-align: center;
+        font-family: arial;
+    }
+
+    .price {
+        color: grey;
+        font-size: 22px;
+    }
+
+    .card button {
+        border: none;
+        outline: 0;
+        padding: 12px;
+        color: white;
+        background-color: #000;
+        text-align: center;
+        cursor: pointer;
+        width: 100%;
+        font-size: 18px;
+    }
+
+    .card button:hover {
+        opacity: 0.7;
+    }
 }

src/main/resources/static/js/jquery.mycart.js

@@ -0,0 +1,401 @@
+/*
+ * jQuery myCart - v1.7 - 2018-03-07
+ * http://asraf-uddin-ahmed.github.io/
+ * Copyright (c) 2017 Asraf Uddin Ahmed; Licensed None
+ */
+// function print_current_page(){
+//    window.print();
+// }
+
+function print_current_page() {
+  window.print();
+   var x = document.getElementById('hide_product');
+   x.style.display = "none"; 
+ }
+
+(function ($) {
+ 
+  "use strict";
+  
+  var OptionManager = (function () {
+    var objToReturn = {};
+
+    var _options = null;
+    var DEFAULT_OPTIONS = {
+      currencySymbol: '$',
+      classCartIcon: 'my-cart-icon',
+      classCartBadge: 'my-cart-badge',
+      classProductQuantity: 'my-product-quantity',
+      classProductRemove: 'my-product-remove',
+      classCheckoutCart: 'my-cart-checkout',
+      affixCartIcon: true,
+      showCheckoutModal: true,
+      numberOfDecimals: 2,
+      cartItems: null,
+      clickOnAddToCart: function ($addTocart) {},
+      afterAddOnCart: function (products, totalPrice, totalQuantity) {},
+      clickOnCartIcon: function ($cartIcon, products, totalPrice, totalQuantity) {},
+      checkoutCart: function (products, totalPrice, totalQuantity) {
+      
+        return false;
+      },
+      getDiscountPrice: function (products, totalPrice, totalQuantity) {
+        return null;
+      }
+    };
+
+
+    var loadOptions = function (customOptions) {
+      _options = $.extend({}, DEFAULT_OPTIONS);
+      ProductManager.clearProduct();
+      if (typeof customOptions === 'object') {
+        $.extend(_options, customOptions);
+      }
+    };
+    var getOptions = function () {
+      return _options;
+    };
+
+    objToReturn.loadOptions = loadOptions;
+    objToReturn.getOptions = getOptions;
+    return objToReturn;
+  }());
+
+  var MathHelper = (function () {
+    var objToReturn = {};
+    var getRoundedNumber = function (number) {
+      if (isNaN(number)) {
+        throw new Error('Parameter is not a Number');
+      }
+      number = number * 1;
+      var options = OptionManager.getOptions();
+      return number.toFixed(options.numberOfDecimals);
+    };
+    objToReturn.getRoundedNumber = getRoundedNumber;
+    return objToReturn;
+  }());
+
+  var ProductManager = (function () {
+    var objToReturn = {};
+
+    /*
+    PRIVATE
+    */
+    localStorage.products = localStorage.products ? localStorage.products : "";
+    var getIndexOfProduct = function (id) {
+      var productIndex = -1;
+      var products = getAllProducts();
+      $.each(products, function (index, value) {
+        if (value.id == id) {
+          productIndex = index;
+          return;
+        }
+      });
+      return productIndex;
+    };
+    var setAllProducts = function (products) {
+      localStorage.products = JSON.stringify(products);
+    };
+    var addProduct = function (id, name, summary, price, quantity, image) {
+      var products = getAllProducts();
+      products.push({
+        id: id,
+        name: name,
+        summary: summary,
+        price: price,
+        quantity: quantity,
+        image: image
+      });
+      setAllProducts(products);
+    };
+
+    /*
+    PUBLIC
+    */
+    var getAllProducts = function () {
+      try {
+        var products = JSON.parse(localStorage.products);
+        return products;
+      } catch (e) {
+        return [];
+      }
+    };
+    var updatePoduct = function (id, quantity) {
+      var productIndex = getIndexOfProduct(id);
+      if (productIndex < 0) {
+        return false;
+      }
+      var products = getAllProducts();
+      products[productIndex].quantity = typeof quantity === "undefined" ? products[productIndex].quantity * 1 + 1 : quantity;
+      setAllProducts(products);
+      return true;
+    };
+    var setProduct = function (id, name, summary, price, quantity, image) {
+      if (typeof id === "undefined") {
+        console.error("id required");
+        return false;
+      }
+      if (typeof name === "undefined") {
+        console.error("name required");
+        return false;
+      }
+      if (typeof image === "undefined") {
+        console.error("image required");
+        return false;
+      }
+      if (!$.isNumeric(price)) {
+        console.error("price is not a number");
+        return false;
+      }
+      if (!$.isNumeric(quantity)) {
+        console.error("quantity is not a number");
+        return false;
+      }
+      summary = typeof summary === "undefined" ? "" : summary;
+
+      if (!updatePoduct(id)) {
+        addProduct(id, name, summary, price, quantity, image);
+      }
+    };
+    var clearProduct = function () {
+      setAllProducts([]);
+    };
+    var removeProduct = function (id) {
+      var products = getAllProducts();
+      products = $.grep(products, function (value, index) {
+        return value.id != id;
+      });
+      setAllProducts(products);
+    };
+    var getTotalQuantity = function () {
+      var total = 0;
+      var products = getAllProducts();
+      $.each(products, function (index, value) {
+        total += value.quantity * 1;
+      });
+      return total;
+    };
+    var getTotalPrice = function () {
+      var products = getAllProducts();
+      var total = 0;
+      $.each(products, function (index, value) {
+        total += value.quantity * value.price;
+        total = MathHelper.getRoundedNumber(total) * 1;
+      });
+      return total;
+    };
+
+    objToReturn.getAllProducts = getAllProducts;
+    objToReturn.updatePoduct = updatePoduct;
+    objToReturn.setProduct = setProduct;
+    objToReturn.clearProduct = clearProduct;
+    objToReturn.removeProduct = removeProduct;
+    objToReturn.getTotalQuantity = getTotalQuantity;
+    objToReturn.getTotalPrice = getTotalPrice;
+    return objToReturn;
+  }());
+
+
+  var loadMyCartEvent = function (targetSelector) {
+
+    var options = OptionManager.getOptions();
+    var $cartIcon = $("." + options.classCartIcon);
+    var $cartBadge = $("." + options.classCartBadge);
+    var classProductQuantity = options.classProductQuantity;
+    var classProductRemove = options.classProductRemove;
+    var classCheckoutCart = options.classCheckoutCart;
+
+    var idCartModal = 'my-cart-modal';
+    var idCartTable = 'my-cart-table';
+    var idGrandTotal = 'my-cart-grand-total';
+    var idEmptyCartMessage = 'my-cart-empty-message';
+    var idDiscountPrice = 'my-cart-discount-price';
+    var classProductTotal = 'my-product-total';
+    var classAffixMyCartIcon = 'my-cart-icon-affix';
+    
+
+    if (options.cartItems && options.cartItems.constructor === Array) {
+      ProductManager.clearProduct();
+      $.each(options.cartItems, function () {
+        ProductManager.setProduct(this.id, this.name, this.summary, this.price, this.quantity, this.image);
+      });
+    }
+    $cartBadge.text(ProductManager.getTotalQuantity());
+
+    if (!$("#" + idCartModal).length) {
+      $('body').append(
+        '<div class="modal fade  " id="' + idCartModal + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' +
+        '<div class="modal-dialog" role="document">' +
+        '<div class="modal-content  ">' +
+        '<div class="modal-header hide_product">' +
+        '<button type="button" class="close hide_product" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
+        '<h4 class="modal-title hide_product" id="myModalLabel"><span class="glyphicon glyphicon-shopping-cart hide_product"></span> My Cart</h4>' +
+        '</div>' +
+        '<div class="modal-body">' +
+        '<table class="table table-hover table-responsive" id="' + idCartTable + '"></table>' +
+        '</div>' +
+        '<div class="modal-footer hide_product">' +
+        '<button class="btn btn-success hide_product" style="margint-top:10px!important;" onclick="print_current_page()">Print this page</button>' +
+        '<button type="button" class="btn btn-primary ' + classCheckoutCart + '" >Checkout</button>' +
+        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
+        '</div>' +
+        '</div>' +
+        '</div>' +
+        '</div>'
+      );
+    }
+
+    var drawTable = function () {
+      var $cartTable = $("#" + idCartTable);
+      $cartTable.empty();
+
+      var products = ProductManager.getAllProducts();
+      $.each(products, function () {
+        var total = this.quantity * this.price;
+        $cartTable.append(
+          '<tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + this.price + '">' +
+          '<td class="text-center" style="width: 30px;"><img width="30px" height="30px" src="' + this.image + '"/></td>' +
+          '<td>' + this.name + '</td>' +
+          '<td title="Unit Price" class="text-right">' + options.currencySymbol + MathHelper.getRoundedNumber(this.price) + '</td>' +
+          '<td title="Quantity"><input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/></td>' +
+          '<td title="Total" class="text-right ' + classProductTotal + '">' + options.currencySymbol + MathHelper.getRoundedNumber(total) + '</td>' +
+          '<td title="Remove from Cart" class="text-center" style="width: 30px;"><a href="javascript:void(0);" class="btn btn-xs btn-danger ' + classProductRemove + '">X</a></td>' +
+          '</tr>'
+        );
+      });
+
+      $cartTable.append(products.length ?
+        '<tr>' +
+        '<td></td>' +
+        '<td><strong>Total</strong></td>' +
+        '<td></td>' +
+        '<td></td>' +
+        '<td class="text-right"><strong id="' + idGrandTotal + '"></strong></td>' +
+        '<td></td>' +
+        '</tr>' :
+        '<div class="alert alert-danger" role="alert" id="' + idEmptyCartMessage + '">Your cart is empty</div>'
+      );
+
+      var discountPrice = options.getDiscountPrice(products, ProductManager.getTotalPrice(), ProductManager.getTotalQuantity());
+      if (products.length && discountPrice !== null) {
+        $cartTable.append(
+          '<tr style="color: red">' +
+          '<td></td>' +
+          '<td><strong>Total (including discount)</strong></td>' +
+          '<td></td>' +
+          '<td></td>' +
+          '<td class="text-right"><strong id="' + idDiscountPrice + '"></strong></td>' +
+          '<td></td>' +
+          '</tr>'
+        );
+      }
+
+      showGrandTotal();
+      showDiscountPrice();
+    };
+    var showModal = function () {
+      drawTable();
+      $("#" + idCartModal).modal('show');
+    };
+    var updateCart = function () {
+      $.each($("." + classProductQuantity), function () {
+        var id = $(this).closest("tr").data("id");
+        ProductManager.updatePoduct(id, $(this).val());
+      });
+    };
+    var showGrandTotal = function () {
+      $("#" + idGrandTotal).text(options.currencySymbol + MathHelper.getRoundedNumber(ProductManager.getTotalPrice()));
+    };
+    var showDiscountPrice = function () {
+      $("#" + idDiscountPrice).text(options.currencySymbol + MathHelper.getRoundedNumber(options.getDiscountPrice(ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity())));
+    };
+
+    /*
+    EVENT
+    */
+    if (options.affixCartIcon) {
+      var cartIconBottom = $cartIcon.offset().top * 1 + $cartIcon.css("height").match(/\d+/) * 1;
+      var cartIconPosition = $cartIcon.css('position');
+      $(window).scroll(function () {
+        $(window).scrollTop() >= cartIconBottom ? $cartIcon.addClass(classAffixMyCartIcon) : $cartIcon.removeClass(classAffixMyCartIcon);
+      });
+    }
+
+    $cartIcon.click(function () {
+      options.showCheckoutModal ? showModal() : options.clickOnCartIcon($cartIcon, ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity());
+    });
+
+    $(document).on("input", "." + classProductQuantity, function () {
+      var price = $(this).closest("tr").data("price");
+      var id = $(this).closest("tr").data("id");
+      var quantity = $(this).val();
+
+      $(this).parent("td").next("." + classProductTotal).text(options.currencySymbol + MathHelper.getRoundedNumber(price * quantity));
+      ProductManager.updatePoduct(id, quantity);
+
+      $cartBadge.text(ProductManager.getTotalQuantity());
+      showGrandTotal();
+      showDiscountPrice();
+    });
+
+    $(document).on('keypress', "." + classProductQuantity, function (evt) {
+      if (evt.keyCode == 38 || evt.keyCode == 40) {
+        return;
+      }
+      evt.preventDefault();
+    });
+
+    $(document).on('click', "." + classProductRemove, function () {
+      var $tr = $(this).closest("tr");
+      var id = $tr.data("id");
+      $tr.hide(500, function () {
+        ProductManager.removeProduct(id);
+        drawTable();
+        $cartBadge.text(ProductManager.getTotalQuantity());
+      });
+    });
+
+    $(document).on('click', "." + classCheckoutCart, function () {
+      var products = ProductManager.getAllProducts();
+      if (!products.length) {
+        $("#" + idEmptyCartMessage).fadeTo('fast', 0.5).fadeTo('fast', 1.0);
+        return;
+      }
+      updateCart();
+      var isCheckedOut = options.checkoutCart(ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity());
+      if (isCheckedOut !== false) {
+        window.print();
+        ProductManager.clearProduct();
+        $cartBadge.text(ProductManager.getTotalQuantity());
+        $("#" + idCartModal).modal("hide");       
+      }
+    });
+
+    $(document).on('click', targetSelector, function () {
+      var $target = $(this);
+      options.clickOnAddToCart($target);
+
+      var id = $target.data('id');
+      var name = $target.data('name');
+      var summary = $target.data('summary');
+      var price = $target.data('price');
+      var quantity = $target.data('quantity');
+      var image = $target.data('image');
+
+      ProductManager.setProduct(id, name, summary, price, quantity, image);
+      $cartBadge.text(ProductManager.getTotalQuantity());
+
+      options.afterAddOnCart(ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity());
+    });
+
+  };
+
+
+  $.fn.myCart = function (userOptions) {
+    OptionManager.loadOptions(userOptions);
+    loadMyCartEvent(this.selector);
+    return this;
+  };
+
+
+})(jQuery);