{"id":6,"date":"2021-11-18T06:25:58","date_gmt":"2021-11-18T06:25:58","guid":{"rendered":"https:\/\/qms.marvelsoftpos.com.my\/?page_id=6"},"modified":"2025-08-17T10:34:52","modified_gmt":"2025-08-17T02:34:52","slug":"qms","status":"publish","type":"page","link":"https:\/\/yardnco.marvelsoftpos.com.my\/","title":{"rendered":"ONLINE WAITLIST"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-76ba176 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"76ba176\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ddf923a\" data-id=\"ddf923a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4a31b1e elementor-widget elementor-widget-text-editor\" data-id=\"4a31b1e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 style=\"text-align: center;\"><span style=\"color: #000000;\">ONLINE WAITLIST<\/span><\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-58a1caa5 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"58a1caa5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3560fa15\" data-id=\"3560fa15\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-392d8c99 elementor-widget elementor-widget-text-editor\" data-id=\"392d8c99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t    <style>\n        table {\r\n  width: 100%;\r\n  table-layout: fixed;\r\n}\r\n\r\n.tbl-header {\r\n  background-color: #5a4a42;\r\n}\r\n\r\n.tbl-content {\r\n  height: 300px;\r\n  overflow-x: auto;\r\n  margin-top: 0px;\r\n  border: 1px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\nth {\r\n  padding: 20px 15px;\r\n  text-align: center;\r\n  font-weight: 500;\r\n  font-size: 18px;\r\n  color: #fff;\r\n  text-transform: uppercase;\r\n}\r\n\r\ntd {\r\n  padding: 15px;\r\n  text-align: center;\r\n  vertical-align: middle;\r\n  font-weight: 300;\r\n  font-size: 18px;\r\n  color: #fff;\r\n  border: solid 1px rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n\/* demo styles *\/\r\n\/* body {\r\n    background: -webkit-linear-gradient(left, #25c481, #25b7c4);\r\n    background: linear-gradient(to right, #25c481, #25b7c4);\r\n    font-family: 'Roboto', sans-serif;\r\n} *\/\r\n\r\nsection {\r\n  margin: 50px;\r\n}\r\n\r\n\/* for custom scrollbar for webkit browser*\/\r\n\r\n::-webkit-scrollbar {\r\n  width: 6px;\r\n}\r\n\r\n::-webkit-scrollbar-track {\r\n  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n\/* Button Design *\/\r\n.btn-container {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: right;\r\n  align-items: center;\r\n  background: var(--bg);\r\n}\r\n\r\n.btn-container:nth-child(1) {\r\n  --btn-bg: #9b8578;\r\n}\r\n\r\nbutton, .csbtn {\r\n  --width: 180px;\r\n  --height: 50px;\r\n  border: 0;\r\n  position: relative;\r\n  min-width: var(--width);\r\n  min-height: var(--height);\r\n  border-radius: var(--height);\r\n  color: #fff;\r\n  font-family: \"Montserrat\";\r\n  font-weight: bold;\r\n  background: rgba(0, 0, 0, 0.3);\r\n  cursor: pointer;\r\n  overflow: hidden;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin: 0 1rem;\r\n  margin-bottom: 20px;\r\n}\r\n\r\nbutton .text,\r\nbutton .icon-container {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\nbutton .icon-container {\r\n  --icon-size: 25px;\r\n  position: relative;\r\n  width: var(--icon-size);\r\n  height: var(--icon-size);\r\n  margin-left: 15px;\r\n  transition: transform 500ms ease;\r\n}\r\n\r\nbutton .icon-container .icon {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  width: var(--icon-size);\r\n  height: var(--icon-size);\r\n  transition: transform 500ms ease, opacity 250ms ease;\r\n}\r\n\r\nbutton .icon-container .icon--left {\r\n  transform: translateX(-200%);\r\n  opacity: 0;\r\n}\r\n\r\nbutton .icon-container .icon svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  fill: #fff;\r\n}\r\n\r\nbutton::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: var(--btn-bg);\r\n  border-radius: var(--height);\r\n  z-index: 1;\r\n  transition: transform 500ms ease;\r\n}\r\n\r\nbutton:hover::after {\r\n  transform: translateX(70%);\r\n}\r\n\r\nbutton:hover .icon-container {\r\n  transform: translateX(30%);\r\n}\r\n\r\nbutton:hover .icon-container .icon--left {\r\n  transform: translateX(0);\r\n  opacity: 1;\r\n}\r\n\r\nbutton:hover .icon-container .icon--right {\r\n  transform: translateX(200%);\r\n  opacity: 0;\r\n}\r\n    <\/style>\n\n    <div>\n        <div class=\"btn-container\">\n                            <a href='https:\/\/yardnco.marvelsoftpos.com.my\/?page_id=11' target=\"_blank\">\n                    <button>\n                        <span class=\"text\">Take Number<\/span>\n                        <div class=\"icon-container\">\n                            <div class=\"icon icon--left\">\n                                <svg>\n                                    <use xlink:href=\"#arrow-right\"><\/use>\n                                <\/svg>\n                            <\/div>\n                            <div class=\"icon icon--right\">\n                                <svg>\n                                    <use xlink:href=\"#arrow-right\"><\/use>\n                                <\/svg>\n                            <\/div>\n                        <\/div>\n                    <\/button>\n                <\/a>\n                    <\/div>\n\n        <svg style=\"display: none;\">\n            <symbol id=\"arrow-right\" viewBox=\"0 0 20 10\">\n                <path d=\"M14.84 0l-1.08 1.06 3.3 3.2H0v1.49h17.05l-3.3 3.2L14.84 10 20 5l-5.16-5z\"><\/path>\n            <\/symbol>\n        <\/svg>\n\n        <div class=\"tbl-header\">\n            <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n                <thead>\n                    <tr>\n                        <th>Table<\/th>\n                        <th>Now Serving<\/th>\n                        <th>Next Number<\/th>\n                    <\/tr>\n                <\/thead>\n            <\/table>\n        <\/div>\n        <div class=\"tbl-content\">\n            <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n                <tbody>\n                    \n                        <tr>\n                            <td>Small Table<\/td>\n                            <td> <\/td>\n                            <td> <\/td>\n                        <\/tr>\n                        <tr>\n                            <td>Medium Table<\/td>\n                            <td><\/td>\n                            <td><\/td>\n                        <\/tr>\n                        <tr>\n                            <td>Big Table<\/td>\n                            <td><\/td>\n                            <td><\/td>\n                        <\/tr>                <\/tbody>\n            <\/table>\n        <\/div>\n    <\/div>\n    <\/section>\n\n    <script>\n        \/\/ '.tbl-content' consumed little space for vertical scrollbar, scrollbar width depend on browser\/os\/platfrom. Here calculate the scollbar width .\n        $(window).on(\"load resize \", function() {\n            var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();\n            $('.tbl-header').css({\n                'padding-right': scrollWidth\n            });\n        }).resize();\n    <\/script>\n\t\t\t\t\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ONLINE WAITLIST<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":82,"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/yardnco.marvelsoftpos.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}