diff --git a/_dev/elegance.css b/_dev/elegance.css
old mode 100644
new mode 100755
index 9d0b97c..1a230e2
--- a/_dev/elegance.css
+++ b/_dev/elegance.css
@@ -44,6 +44,7 @@ input[type="radio"],input[type="checkbox"] {
.tabs {
position: relative;
height: 14.75rem;
+
}
.tabs::before,
.tabs::after {
@@ -55,6 +56,7 @@ input[type="radio"],input[type="checkbox"] {
}
.tab {
float: left;
+
}
.tab-switch {
display: none;
@@ -70,10 +72,13 @@ input[type="radio"],input[type="checkbox"] {
top: 0;
transition: all 0.25s;
border-bottom: #000000;
+ width: 120px;
+ text-align: center;
}
.tab-label:hover {
top: -0.25rem;
transition: top 0.25s;
+
}
.tab-content {
height: 12rem;
@@ -89,14 +94,52 @@ input[type="radio"],input[type="checkbox"] {
}
.tab-switch:checked + .tab-label {
background: #fff;
- color: #2c3e50;
+ color: #ffffff;
border-bottom: 0;
transition: all 0.35s;
z-index: 1;
top: -0.0625rem;
+ background-color: rgb(23 37 84);
}
.tab-switch:checked + label + .tab-content {
z-index: 2;
opacity: 1;
transition: all 0.35s;
}
+.mainBody::-webkit-scrollbar {
+ -webkit-appearance: none;
+}
+.mainBody::-webkit-scrollbar:vertical {
+ width: 11px;
+}
+.mainBody::-webkit-scrollbar-thumb {
+ border-radius: 8px;
+ border: 2px solid white; /* should match background, can't be transparent */
+ background-color: rgba(0, 0, 0, .5);
+}
+.mainBody::-webkit-scrollbar-track {
+ background-color: #fff;
+ border-radius: 8px;
+}
+.mainBody {
+ height: 250px;
+ background-color: #ddd;
+ padding: 24px;
+ overflow: scroll;
+ border: 2px solid #000;
+}
+.pop-up{
+ display: none;
+ overflow-y:auto;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ height: 70%;
+ background-color: white;
+ padding: 20px; z-index: 9999;
+ box-shadow: 0 0 0 9999px #000000b0;
+
+}
+
+
\ No newline at end of file
diff --git a/assets/css/theme.css b/assets/css/theme.css
old mode 100644
new mode 100755
index 8e527db..b31c89f
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -846,11 +846,6 @@ select {
margin-bottom: -0.75rem;
}
-.mx-1 {
- margin-left: 0.25rem;
- margin-right: 0.25rem;
-}
-
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
@@ -886,14 +881,6 @@ select {
margin-bottom: 2rem;
}
-.-mb-px {
- margin-bottom: -1px;
-}
-
-.mb-0 {
- margin-bottom: 0px;
-}
-
.mb-1 {
margin-bottom: 0.25rem;
}
@@ -1046,6 +1033,14 @@ select {
height: 100%;
}
+.h-\[120px\] {
+ height: 120px;
+}
+
+.h-64 {
+ height: 16rem;
+}
+
.max-h-\[40px\] {
max-height: 40px;
}
@@ -1131,10 +1126,6 @@ select {
width: max-content;
}
-.w-56 {
- width: 14rem;
-}
-
.max-w-6xl {
max-width: 72rem;
}
@@ -1190,10 +1181,6 @@ select {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
-.transform {
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
.cursor-pointer {
cursor: pointer;
}
@@ -1208,10 +1195,6 @@ select {
list-style-type: square;
}
-.list-none {
- list-style-type: none;
-}
-
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
@@ -1322,35 +1305,14 @@ select {
border-radius: 0.5rem;
}
-.rounded-t {
- border-top-left-radius: 0.25rem;
- border-top-right-radius: 0.25rem;
-}
-
.border {
border-width: 1px;
}
-.border-b-0 {
- border-bottom-width: 0px;
-}
-
-.border-l-0 {
- border-left-width: 0px;
-}
-
-.border-r-0 {
- border-right-width: 0px;
-}
-
.border-t {
border-top-width: 1px;
}
-.border-t-0 {
- border-top-width: 0px;
-}
-
.border-none {
border-style: none;
}
@@ -1419,11 +1381,6 @@ select {
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
-.bg-blue-600 {
- --tw-bg-opacity: 1;
- background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
.bg-blue-950 {
--tw-bg-opacity: 1;
background-color: rgb(23 37 84 / var(--tw-bg-opacity));
@@ -1439,11 +1396,6 @@ select {
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
-.bg-gray-600 {
- --tw-bg-opacity: 1;
- background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1531,11 +1483,6 @@ select {
padding-right: 0.5rem;
}
-.px-3 {
- padding-left: 0.75rem;
- padding-right: 0.75rem;
-}
-
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@@ -1580,10 +1527,6 @@ select {
padding-bottom: 3rem;
}
-.pl-0 {
- padding-left: 0px;
-}
-
.pl-12 {
padding-left: 3rem;
}
@@ -1632,6 +1575,18 @@ select {
padding-top: 1.5rem;
}
+.pl-8 {
+ padding-left: 2rem;
+}
+
+.pl-24 {
+ padding-left: 6rem;
+}
+
+.pl-28 {
+ padding-left: 7rem;
+}
+
.text-left {
text-align: left;
}
@@ -1656,10 +1611,6 @@ select {
text-align: end;
}
-.align-middle {
- vertical-align: middle;
-}
-
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@@ -1812,14 +1763,6 @@ select {
text-underline-offset: 2px;
}
-.opacity-0 {
- opacity: 0;
-}
-
-.opacity-100 {
- opacity: 1;
-}
-
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1927,6 +1870,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
top: 0;
transition: all 0.25s;
border-bottom: #000000;
+ width: 120px;
+ text-align: center;
}
.tab-label:hover {
@@ -1949,11 +1894,12 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.tab-switch:checked + .tab-label {
background: #fff;
- color: #2c3e50;
+ color: #ffffff;
border-bottom: 0;
transition: all 0.35s;
z-index: 1;
top: -0.0625rem;
+ background-color: rgb(23 37 84);
}
.tab-switch:checked + label + .tab-content {
@@ -1962,6 +1908,48 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
transition: all 0.35s;
}
+.mainBody::-webkit-scrollbar {
+ -webkit-appearance: none;
+}
+
+.mainBody::-webkit-scrollbar:vertical {
+ width: 11px;
+}
+
+.mainBody::-webkit-scrollbar-thumb {
+ border-radius: 8px;
+ border: 2px solid white;
+ /* should match background, can't be transparent */
+ background-color: rgba(0, 0, 0, .5);
+}
+
+.mainBody::-webkit-scrollbar-track {
+ background-color: #fff;
+ border-radius: 8px;
+}
+
+.mainBody {
+ height: 250px;
+ background-color: #ddd;
+ padding: 24px;
+ overflow: scroll;
+ border: 2px solid #000;
+}
+
+.pop-up{
+ display: none;
+ overflow-y:auto;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ height: 70%;
+ background-color: white;
+ padding: 20px;
+ z-index: 9999;
+ box-shadow: 0 0 0 9999px #000000b0;
+}
+
.file\:mr-4::file-selector-button {
margin-right: 1rem;
}
@@ -2025,21 +2013,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
border-color: rgb(30 58 138 / var(--tw-border-opacity));
}
-.hover\:bg-blue-600:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
.hover\:bg-blue-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 58 138 / var(--tw-bg-opacity));
}
-.hover\:bg-gray-700:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
.hover\:stroke-blue-900:hover {
stroke: #1e3a8a;
}
@@ -2208,10 +2186,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.sm\:flex {
display: flex;
}
-
- .sm\:w-1\/2 {
- width: 50%;
- }
}
@media (min-width: 768px) {
@@ -2263,6 +2237,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 50%;
}
+ .md\:w-56 {
+ width: 14rem;
+ }
+
.md\:flex-row {
flex-direction: row;
}
@@ -2384,10 +2362,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 100%;
}
- .lg\:w-44 {
- width: 11rem;
- }
-
.lg\:max-w-full {
max-width: 100%;
}
@@ -2433,6 +2407,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-top: 6rem;
}
+ .lg\:pl-28 {
+ padding-left: 7rem;
+ }
+
+ .lg\:pl-32 {
+ padding-left: 8rem;
+ }
+
.lg\:shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
@@ -2445,3 +2427,5 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 25%;
}
}
+
+
\ No newline at end of file
diff --git a/modules/thobbodymeasurements/views/js/front-set-product-measurements.js b/modules/thobbodymeasurements/views/js/front-set-product-measurements.js
old mode 100644
new mode 100755
index 0ce9d9d..0e54cb9
--- a/modules/thobbodymeasurements/views/js/front-set-product-measurements.js
+++ b/modules/thobbodymeasurements/views/js/front-set-product-measurements.js
@@ -43,29 +43,13 @@ $(document).ready(function() {
});
});
-
- // Add click event handler to the "Custom Measurements" tab
- $('#custom-measurements-tab').click(function(event) {
- // Prevent the default behavior of the anchor tag
- event.preventDefault();
-
- // Hide the "Mirror Size Measurements" tab if it's currently active
- $('#mirror-size-measurements').removeClass('opacity-100 block active');
-
- // Show the "Custom Measurements" tab
- $('#custom-measurements').addClass('opacity-100 block active');
-});
-
-// Add click event handler to the "Mirror Size Measurements" tab
-$('#mirror-size-measurements-tab').click(function(event) {
- // Prevent the default behavior of the anchor tag
- event.preventDefault();
-
-
- // Show the "Mirror Size Measurements" tab
- $('#mirror-size-measurements').addClass('opacity-100 block active');
-});
-
+ $('#closebutton').click(function() {
+ $('#measurements-modal').hide();
+ });
+
+ $('#closemirrorbutton').click(function() {
+ $('#measurements-modal').hide();
+ });
// Add click event handler to the "Photos Completed" button
@@ -195,12 +179,15 @@ $('#mirror-size-measurements-tab').click(function(event) {
success: function(response) {
console.log(response);
console.log("Proceed to add to cart....");
+ console.log(event.currentTarget)
const $form = $(event.currentTarget.form);
const query = `${$form.serialize()}&add=1&action=update`;
+ console.log("Form: ", $form.serialize());
console.log("Query: ", query);
const actionURL = $form.attr('action');
+ console.log("actionURL: ", actionURL);
const addToCartButton = $(event.currentTarget);
addToCartButton.prop('disabled', true);
diff --git a/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
old mode 100644
new mode 100755
index 60af8d9..efeff33
--- a/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
+++ b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
@@ -39,7 +39,7 @@
type="text"
id="{$attribute.id}"
name="{$attribute.id}"
- class=" lg:w-[450px]"
+ class=" lg:w-[450px] p-2"
pattern="[0-9]+"
title="Please enter a positive number"
required
@@ -64,11 +64,11 @@
</div>
</form>
{else}
- <form action="#" method="post" class="form-horizontal">
+ <form action="#" method="post" class="form-horizontal mx-auto">
<div class="flex lg:flex-row flex-col gap-4 justify-center">
<label for="form_select" class="form-control-label col-md-3 font-medium text-lg mt-1 ">{l s='Select a Form:' mod='thobbodymeasurements'}</label>
<div class="">
- <select name="form_select" id="form_select" class="form-control form-control-select w-[220px] h-[40px] rounded">
+ <select name="form_select" id="form_select" class="form-control p-2 form-control-select w-[220px] h-[40px] rounded">
{foreach from=$currentForms item=form}
<option value="{$form.id_form}">{$form.label_form}</option>
{/foreach}
@@ -76,7 +76,7 @@
</div>
</div>
- <div class="">
+ <div class="lg:pl-32 p-4">
<div class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light w-32">
<button type="submit" class="">{l s='Select Form' mod='thobbodymeasurements'}</button>
</div>
diff --git a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
old mode 100644
new mode 100755
index 8dc7236..6ba4fde
--- a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
+++ b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
@@ -9,137 +9,81 @@
</a>
<!-- Modal -->
-<div class="modal modal-set-measurements lg:w-[600px]" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;">
- <div class="wrapper">
- <div class="tabs">
- <div class="tab">
- <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
- <label for="tab-1" class="tab-label">Tab One</label>
- <div class="tab-content my-12">
- {if isset($currentForm)}
- <h2 class="font-semibold mb-4">{$currentForm.label_form}</h2>
- <form id="measurements-form" name="measurements-form" class="form-horizontal" action="#" method="POST">
- <section class="form-fields">
- {foreach from=json_decode($currentForm.attributes, true) item=$attribute}
- <div class="mb-4 flex flex-row form-group ">
- <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
- <div class=" pr-4 pl-4 js-input-column">
- <input
- type="text"
- id="{$attribute.id}"
- name="{$attribute.id}"
- class=" block appearance-none w-56 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
- pattern="[0-9]+"
- title="Please enter a positive number"
- required
- {if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
- value="{$customerMeasurements[$attribute.id]}"
- {/if}>
- </div>
- <div class="md:w-1/4 pr-4 pl-4 form-control-comment">
- <small class="block mt-1 text-gray-700">{$attribute.unit}</small>
- </div>
- </div>
- {/foreach}
- <input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
- <input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
- </section>
- </form>
- {else}
- <p>No form data available.</p>
- {/if}
- <button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
- <button type="button" class="hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light" data-dismiss="modal">Close</button>
-
- </div>
- </div>
- <div class="tab mb-8">
- <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
- <label for="tab-2" class="tab-label">Tab Two</label>
- <div class="tab-content gap-mb-8">
- <div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
- {if $qrCode}
- <img src="{$qrCode}" alt="Mirror Size QR Code" class="max-w-full h-auto">
- <p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
- <p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p>
- <button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
- <button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light " data-dismiss="modal">Close</button>
- {/if}
- </div>
- </div>
- </div>
- </div>
-
- </div>
-
-</div>
-
-
-
-
-
-
- <!-- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <ul class="flex flex-wrap list-none pl-0 mb-0 border border-t-0 border-r-0 border-l-0 border-b-1 border-gray-200" id="measurementTabs" role="tablist">
- <li class="-mb-px">
- <a class="inline-block py-2 px-4 no-underline border border-b-0 mx-1 rounded rounded-t active" id="custom-measurements-tab" data-toggle="tab" href="#custom-measurements" role="tab" aria-controls="custom-measurements" aria-selected="true">Custom Measurements</a>
- </li>
- <li class="-mb-px">
- <a class="inline-block py-2 px-4 no-underline border border-b-0 mx-1 rounded rounded-t" id="mirror-size-measurements-tab" data-toggle="tab" href="#mirror-size-measurements" role="tab" aria-controls="mirror-size-measurements" aria-selected="false">Mirror Size Measurements</a>
- </li>
- </ul>
- <div class="modal-body">
- <div class="tab-content" id="measurementTabsContent">
- <div class="tab-pane opacity-100 block active" id="custom-measurements" role="tabpanel" aria-labelledby="custom-measurements-tab">
+<div class="">
+ <div class="modal modal-set-measurements lg:w-[600px] mainBody pop-up" id="measurements-modal" tabindex="-1" role="dialog" >
+ <div class="wrapper">
+ <div class="tabs">
+ <div class="tab">
+ <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
+ <label for="tab-1" class="tab-label">Custom</label>
+
+ <div class="tab-content my-12">
{if isset($currentForm)}
- <h2>{$currentForm.label_form}</h2>
- <form id="measurements-form" name="measurements-form" class="form-horizontal" action="#" method="POST">
+ <h2 class="font-semibold mb-4">{$currentForm.label_form}</h2>
+
<section class="form-fields">
- {foreach from=json_decode($currentForm.attributes, true) item=$attribute}
- <div class="mb-4 flex flex-wrap form-group ">
- <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
- <div class="md:w-1/2 pr-4 pl-4 js-input-column">
- <input
- type="text"
- id="{$attribute.id}"
- name="{$attribute.id}"
- class=" block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
- pattern="[0-9]+"
- title="Please enter a positive number"
- required
- {if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
- value="{$customerMeasurements[$attribute.id]}"
- {/if}>
+ {foreach from=json_decode($currentForm.attributes, true) item=$attribute}
+ <div class="mb-4 flex flex-row form-group ">
+ <div class="w-24 pr-8">
+ <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
+ </div>
+ <div class=" js-input-column">
+ <input
+ type="text"
+ id="{$attribute.id}"
+ name="{$attribute.id}"
+ class=" block appearance-none md:w-56 w-24 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
+ pattern="[0-9]+"
+ title="Please enter a positive number"
+ required
+ {if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
+ value="{$customerMeasurements[$attribute.id]}"
+ {/if}>
+ </div>
+ <div class="md:w-1/4 pr-4 pl-4 form-control-comment w-24">
+ <small class="block mt-1 text-gray-700 ">{$attribute.unit}</small>
+ </div>
</div>
- <div class="md:w-1/4 pr-4 pl-4 form-control-comment">
- <small class="block mt-1 text-gray-700">{$attribute.unit}</small>
- </div>
- </div>
- {/foreach}
- <input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
- <input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
+ {/foreach}
+
+ <input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
+ <input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
</section>
- </form>
+
+ <button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
+
+
{else}
<p>No form data available.</p>
{/if}
+ <button type="button" class="hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light" id="closebutton" data-dismiss="modal">Close</button>
</div>
- <div class="tab-pane opacity-0" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
- {if $qrCode}
- <img src="{$qrCode}" alt="Mirror Size QR Code" class="max-w-full h-auto">
- <p> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
- <p> Click on 'Photos Completed' button once your above process is finished. </p>
- <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
- {/if}
+ </div>
+
+ <div class="tab mb-8">
+ <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
+ <label for="tab-2" class="tab-label">Mirror</label>
+
+ <div class="tab-content gap-mb-8">
+ <div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
+ {if $qrCode}
+ <img src="{$qrCode}" alt="Mirror Size QR Code" class="mx-auto max-w-full h-64">
+ <p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
+ <p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p>
+ <button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
+ <button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light " id="closemirrorbutton" data-dismiss="modal">Close</button>
+ {/if}
+ </div>
</div>
</div>
</div>
- <div class="modal-footer">
- <button type="submit" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-blue-600 text-white hover:bg-blue-600" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
- <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
- </div>
</div>
</div>
-</div> -->
+</div>
+
+
+
+
+
+
+