અમને ટોલ ફ્રી પર કૉલ કરો
૧૮૦૦ ૨૬૭ ૯૦૯૦
An error occurred while processing the template.
Syntax error in template "48914885574227#20121#T-SBIL-CORP-BOTTOM-APP-BAR" in line 116, column 302: #else is an existing directive, but the tag is malformed. (See FreeMarker Manual / Directive Reference.)
1<!-- T-SBIL-CORP-BOTTOM-APP-BAR -->
2
3<style>
4 .mobile-bottom-nav-bar {
5 display: flex;
6 justify-content: space-around;
7 align-items: stretch;
8 position: fixed;
9 bottom: 0;
10 left: 0;
11 width: 100%;
12 height: 4rem; /* 64px */
13 z-index: 1000;
14 background-color: #ffffff;
15 border-top: 0.0625rem solid rgba(42, 32, 118, 0.10); /* 1px */
16 box-shadow: 0 -0.0625rem 0.25rem rgba(0, 0, 0, 0.05);
17 box-sizing: border-box;
18 }
19
20 .mobile-bottom-nav-bar .mobile-nav-item {
21 flex: 1 1 0;
22 display: flex;
23 flex-direction: column;
24 justify-content: center;
25 align-items: center;
26 gap: 0.25rem; /* 4px */
27 padding: 0.3125rem; /* 5px */
28 text-decoration: none;
29 background: none;
30 border: none;
31 cursor: pointer;
32 font-family: 'Lato', sans-serif;
33 -webkit-tap-highlight-color: transparent;
34 }
35
36 .mobile-bottom-nav-bar .mobile-nav-item svg {
37 width: 1.75rem; /* 28px */
38 height: 1.75rem;
39 overflow: visible;
40 }
41
42 .mobile-bottom-nav-bar .mobile-nav-item-title {
43 font-size: 0.75rem; /* 12px */
44 font-weight: 400;
45 color: #111111;
46 opacity: 0.80;
47 text-align: center;
48 line-height: 1.2;
49 }
50
51 .mobile-bottom-nav-bar .mobile-nav-item:active {
52 background-color: rgba(0, 0, 0, 0.04);
53 }
54
55
56
57 @media (min-width: 768px) { /* 768px */
58 .mobile-bottom-nav-bar {
59 display: none;
60 }
61 }
62
63 @media (max-width: 767px) {
64 #allincall-popup,
65 #allincall-min-popup,
66 #allincall-popup-wrapper {
67 display: none !important;
68 }
69 }
70
71 @supports (-webkit-touch-callout: none) {
72 .mobile-bottom-nav-bar .mobile-nav-item svg use {
73 -webkit-mask-image: none !important;
74 mask-image: none !important;
75 fill: red !important;
76 }
77}
78
79</style>
80
81<script>
82 function triggerChatbot() {
83 const btn = document.getElementById("allincall-popup");
84 if (btn) {
85 btn.click();
86 }
87 }
88</script>
89
90<#if bottomAppbar.getSiblings()?has_content>
91 <div class="mobile-bottom-nav-bar">
92 <#list bottomAppbar.getSiblings() as cta>
93
94 <#assign
95 isButton = getterUtil.getBoolean(cta.isButton.getData())
96 title = cta.title.getData()
97 link = cta.link.getData()
98 iconId = cta.icon.getData()
99 />
100
101 <#if title?has_content>
102
103 <#-- Determine tag -->
104 <#assign tagName = isButton?then("button", "a") />
105
106 <${tagName}
107 class="mobile-nav-item"
108 <#if isButton>
109 onclick="triggerChatbot()"
110 type="button"
111 <#elseif !isButton && link?has_content>
112 href="${link}"
113 </#if>
114 >
115 <#if iconId?has_content>
116 <#if iconId == "surecity-access"> <svg width="28" height="28" viewBox="0 0 24 24"> <path fill="#2A2076" d="M12 2a10 10 0 1 0 .001 20A10 10 0 0 0 12 2zm1 14v2h-2v-2h2zm0-9v7h-2V7h2z"/> </svg> <#else> <svg focusable="false" aria-hidden="true"> ${siteSpritemap}#${iconId} </svg> </#else>
117 </#if>
118
119 <span class="mobile-nav-item-title">
120 ${title}
121 </span>
122 </${tagName}>
123
124 </#if>
125
126 </#list>
127 </div>
128</#if>