new template affaf
#main_container_templateLoc {
display: flex;
gap: 2rem;
flex-wrap: wrap;
/* justify-content: center; */
background-color: white;
font-family: var(--primary-font, sans-serif);
}
#main_container_templateLoc p,
#main_container_templateLoc h5 {
margin: 0px;
}
.region_templateLoc {
display: flex;
flex-direction: column;
gap: 20px;
}
.regionName_templateLoc {
color: #3a3a3a;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.1px;
padding: 25px 0rem;
}
.outer-container {
width: 300px;
border-radius: 10px;
border-bottom: 1px solid rgba(85, 55, 204, 0.05);
background: rgba(85, 55, 204, 0.05);
margin: 0 auto;
}
.heading-container {
display: flex;
justify-content: space-between;
padding: 20px 20px;
border-radius: 10px;
color: var(--primary-color, #5537cc);
align-items: center;
}
.heading-container:hover {
/* border-bottom: 1px solid rgba(85, 55, 204, 0.05); */
background: rgba(85, 55, 204, 0.1);
/* border-radius: 10px 10px 10px 10px; */
cursor: pointer;
}
.arrowIcon {
width: 16px;
height: 16px;
cursor: pointer;
transition: transform 0.3s ease;
fill: var(--primary-color, #5537cc);
/* Adding transition property */
}
/* when user hovers over the container */
.heading-container:hover .arrowIcon {
transform: rotate(45deg);
}
.outer-container .heading-container .arrowIcon.clicked {
transform: rotate(180deg);
}
.outer-container.clicked .heading-container {
background-color: var(--primary-color, #5537cc);
color: white;
border-radius: 10px 10px 0px 0px;
}
#locations_templateLoc {
display: flex;
flex-direction: column;
gap: 8px;
}
.content_templateLoc {
max-height: 0;
overflow: hidden;
display: none;
border-radius: 0px 0px 10px 10px;
border: 1px solid rgba(85, 55, 204, 0.2);
background: #fff;
padding: 0px 20px 20px 20px;
/* border-radius: 10px; */
transition: max-height 0.3s ease;
/* Adding transition effect */
}
.outer-container.clicked .content_templateLoc {
display: block;
}
.detailsField_templateLoc {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
}
.detailsField_templateLoc_businessNameAndAddress {
display: flex;
flex-direction: column;
gap: 4px;
}
.detailsField_templateLoc_businessName {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.detailsField_templateLoc_locationMarkAddress {
color: #3a3a3a;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.detailsField_templateLoc_fieldValue {
color: #3a3a3a;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
.cta_links {
/* padding-block: 8px;
text-decoration: none; */
display: flex;
flex-direction: column;
gap: 0.5px;
}
.cta_links a:hover {
text-decoration: none;
}
.cta_templateLoc {
color: var(--primary-color, #5537cc);
border-radius: 0.625rem;
border: 1px solid rgba(85, 55, 204, 0);
background: rgba(85, 55, 204, 0.1);
width: max-content;
padding: 6px 10px;
}
.visitLink {
text-decoration: none;
display: flex;
gap: 4px;
align-items: center;
}
a:hover {
text-decoration: none;
}
.arrowIcon .arrowPath {
fill: var(--primary-color, #5537cc);
}
.arrowPath {
fill: aqua;
}
.detailsField_templateLoc_btnText {
color: var(--primary-color, #5537cc);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.detailsField_templateLoc a {
text-decoration: none;
}
let customLocCount = 0;
document.addEventListener("DOMContentLoaded",
function () {
if (customLocCount == 0) {
console.log('called loc')
var currentOpenCard = null;
function closeOpenCard() {
if (currentOpenCard) {
currentOpenCard.classList.remove("clicked");
var content = currentOpenCard.querySelector(".content_templateLoc");
content.style.maxHeight = "0";
var arrowIcon = currentOpenCard.querySelector(".arrowIcon");
arrowIcon.style.transform = "rotate(0deg)";
arrowIcon.innerHTML = `
`;
arrowIcon.style.removeProperty("transform");
currentOpenCard = null;
}
}
function transform(button) {
if (button.closest(".outer-container") === currentOpenCard) {
closeOpenCard();
} else {
closeOpenCard();
var outerContainer = button.closest(".outer-container");
outerContainer.classList.toggle("clicked");
var content = outerContainer.querySelector(".content_templateLoc");
var arrowIcon = outerContainer.querySelector(".arrowIcon");
if (
content.style.maxHeight === "0px" ||
content.style.maxHeight === ""
) {
content.style.maxHeight = content.scrollHeight + "px";
arrowIcon.style.transform = "rotate(180deg)";
arrowIcon.innerHTML = `
`;
} else {
content.style.maxHeight = "0";
arrowIcon.style.transform = "rotate(0deg)";
arrowIcon.innerHTML = `
`;
}
currentOpenCard = outerContainer;
}
}
function createLocations(city) {
console.log(city.zoneName, 'zone')
var cardContainer = document.getElementById(
"main_container_templateLoc"
);
var cardTemplate = document.querySelector(".region_templateLoc");
var newCard = cardTemplate.cloneNode(true);
newCard.style.display = "block";
newCard.querySelector(
".regionName_templateLoc"
).innerText = `${city.zoneName} (${city.locations.length})`;
var locationsContainer = newCard.querySelector(
".locations_templateLoc"
);
city.locations.forEach(function (location) {
var outerContainer = document.createElement("div");
outerContainer.className = "outer-container";
var headingContainer = document.createElement("div");
headingContainer.className = "heading-container";
headingContainer.innerHTML += `
${location.name}
`;headingContainer.onclick = function () {
transform(this);
};
// Append the SVG element to the document body or any other container
// Create an SVG element
var arrowIcon = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);
arrowIcon.setAttribute("width", "16");
arrowIcon.setAttribute("height", "17");
arrowIcon.setAttribute("class", "arrowIcon");
arrowIcon.setAttribute("viewBox", "0 0 16 17");
// Create the path element and set its attributes
var pathElement = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);
pathElement.setAttribute("class", "arrowPath");
pathElement.setAttribute(
"d",
"M2.53773 6.59058C2.57556 6.49921 2.63963 6.42111 2.72184 6.36615C2.80405 6.3112 2.90072 6.28185 2.99961 6.28183L12.9996 6.28183C13.0986 6.28176 13.1953 6.31104 13.2776 6.36597C13.3599 6.42091 13.424 6.49903 13.4619 6.59044C13.4998 6.68185 13.5097 6.78244 13.4904 6.87949C13.471 6.97653 13.4234 7.06566 13.3534 7.13558L8.35336 12.1356C8.30692 12.1821 8.25178 12.219 8.19108 12.2441C8.13038 12.2693 8.06531 12.2822 7.99961 12.2822C7.9339 12.2822 7.86883 12.2693 7.80814 12.2441C7.74744 12.219 7.69229 12.1821 7.64586 12.1356L2.64586 7.13558C2.57595 7.06562 2.52837 6.9765 2.50912 6.87948C2.48988 6.78247 2.49983 6.68193 2.53773 6.59058Z"
);
// Append the path element to the SVG element
arrowIcon.appendChild(pathElement);
// var arrowIcon = document.createElement("img");
// arrowIcon.className = "arrowIcon";
// arrowIcon.src =
// "data:image/svg+xml," +
// encodeURIComponent(`
//
// `);
// arrowIcon.alt = "Arrow";
pathElement.onclick = function () {
transform(this);
};
headingContainer.appendChild(arrowIcon);
var content = document.createElement("div");
content.className = "content_templateLoc";
var htmlTemplate = "";
if (
location.address.businessName &&
location.address.businessName.trim() !== ""
) {
htmlTemplate += `
${location.address.businessName
}
${location.address.locationAddress}
${location.mapDetails.latitude &&
location.mapDetails.longitude
? `
`: ""
}
}
if (location?.websites?.length > 0) {
htmlTemplate += `
d="M10 2C8.41775 2 6.87103 2.46919 5.55544 3.34824C4.23985 4.22729 3.21447 5.47672 2.60897 6.93853C2.00347 8.40034 1.84504 10.0089 2.15372 11.5607C2.4624 13.1126 3.22433 14.538 4.34315 15.6569C5.46197 16.7757 6.88743 17.5376 8.43928 17.8463C9.99113 18.155 11.5997 17.9965 13.0615 17.391C14.5233 16.7855 15.7727 15.7602 16.6518 14.4446C17.5308 13.129 18 11.5822 18 10C17.9978 7.87895 17.1542 5.84542 15.6544 4.34562C14.1546 2.84581 12.121 2.00224 10 2ZM16.7692 10C16.7699 10.8684 16.6027 11.7288 16.2769 12.5338L12.8385 10.4192C12.6923 10.329 12.5287 10.2706 12.3585 10.2477L10.6031 10.0108C10.3612 9.97923 10.1154 10.0198 9.89645 10.1273C9.67751 10.2349 9.49518 10.4047 9.37231 10.6154H8.70154L8.40923 10.0108C8.32842 9.84241 8.21016 9.69478 8.06349 9.57919C7.91683 9.46359 7.74565 9.38309 7.56308 9.34384L6.94769 9.21077L7.54923 8.15384H8.83462C9.04261 8.15344 9.24714 8.10052 9.42923 8L10.3715 7.48C10.4543 7.43385 10.5317 7.37864 10.6023 7.31538L12.6723 5.44308C12.8798 5.25709 13.0178 5.00591 13.0634 4.73098C13.109 4.45605 13.0595 4.17379 12.9231 3.93077L12.8954 3.88077C14.0537 4.43 15.0325 5.29646 15.7182 6.37958C16.4039 7.4627 16.7683 8.71808 16.7692 10ZM3.23077 10C3.22974 8.99386 3.45422 8.00028 3.8877 7.09231L4.76 9.42077C4.8327 9.61356 4.95263 9.78501 5.1088 9.91941C5.26497 10.0538 5.45238 10.1468 5.65385 10.19L7.30231 10.5446L7.59539 11.1538C7.6971 11.3611 7.85473 11.5357 8.05047 11.658C8.2462 11.7804 8.47225 11.8455 8.70308 11.8462H8.81693L8.26077 13.0946C8.16278 13.3144 8.13139 13.5582 8.1705 13.7957C8.2096 14.0331 8.31747 14.254 8.48077 14.4308L8.49154 14.4415L10 15.9954L9.85077 16.7646C8.08295 16.7235 6.4012 15.9931 5.1644 14.7292C3.92761 13.4654 3.23371 11.7683 3.23077 10Z" fill="var(--primary-color, #5537cc)" /> Visit website
`;
}
if (location?.mobileNumbers?.length > 0) {
htmlTemplate += `
d="M15.8315 16.6663C8.72233 16.6763 3.32649 11.2163 3.33399 4.16884C3.33399 3.70801 3.70733 3.33301 4.16733 3.33301H6.36733C6.77983 3.33301 7.13066 3.63634 7.19149 4.04467C7.33658 5.02389 7.62143 5.97721 8.03733 6.87551L8.12316 7.06051C8.18082 7.185 8.19322 7.32571 8.15823 7.45837C8.12324 7.59103 8.04305 7.70731 7.93149 7.78717C7.24983 8.27384 6.98983 9.25301 7.52066 10.0163C8.18898 10.9774 9.02311 11.8119 9.98399 12.4805C10.7482 13.0105 11.7273 12.7505 12.2132 12.0697C12.2929 11.9578 12.4093 11.8773 12.5422 11.8421C12.675 11.807 12.816 11.8194 12.9407 11.8772L13.1248 11.9622C14.0232 12.3788 14.9765 12.6638 15.9557 12.8088C16.364 12.8697 16.6673 13.2205 16.6673 13.6338V15.833C16.6673 15.9425 16.6457 16.0509 16.6038 16.1521C16.5619 16.2533 16.5004 16.3452 16.423 16.4226C16.3455 16.5 16.2535 16.5613 16.1523 16.6031C16.0511 16.645 15.9427 16.6665 15.8332 16.6663H15.8315Z" fill="var(--primary-color, #5537cc)" /> Call
`;
}
content.innerHTML = htmlTemplate;
outerContainer.appendChild(headingContainer);
outerContainer.appendChild(content);
locationsContainer.appendChild(outerContainer);
});
cardContainer.appendChild(newCard);
}
var locationsData = [
{
zoneName: "North Zone",
locations: [
{
name: "Dehradun",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Dehradun, Uttarakhand, India",
},
websites: ["https://www.sterispharma.com/dehradun"],
mobileNumbers: ["08042755598"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Delhi",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Delhi, India",
},
websites: ["https://www.sterispharma.com/delhi"],
mobileNumbers: ["08042754623"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Dhanbad",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Dhanbad, Jharkhand, India",
},
websites: ["https://www.sterispharma.com/dhanbad"],
mobileNumbers: ["08042754798"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Faridabad",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Faridabad, Haryana, India",
},
websites: ["https://www.sterispharma.com/faridabad"],
mobileNumbers: ["08042755827"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Gaya",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Gaya, Bihar, India",
},
websites: ["https://www.sterispharma.com/gaya"],
mobileNumbers: ["08042756938"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Ghaziabad",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Ghaziabad, Uttar Pradesh, India",
},
websites: ["https://www.sterispharma.com/ghaziabad"],
mobileNumbers: ["08042781245"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Gurugram",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Gurugram, Haryana, India",
},
websites: ["https://www.sterispharma.com/gurugram"],
mobileNumbers: ["08042781245"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Indore",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Indore, Madhya Pradesh, India",
},
websites: ["https://www.sterispharma.com/indore"],
mobileNumbers: ["08042781585"],
mapDetails: {
latitude: "",
longitude: "",
},
},
],
},
{
zoneName: "South Zone",
locations: [
{
name: "Secunderabad",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Secunderabad, Telangana, India",
},
websites: ["https://www.sterispharma.com/secunderabad"],
mobileNumbers: [" 08048033980"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Amravati",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Amravati, Maharashtra, India",
},
websites: ["https://www.sterispharma.com/amravati"],
mobileNumbers: ["08042754195"],
mapDetails: {
latitude: "",
longitude: "",
},
},
],
},
{
zoneName: "East Zone",
locations: [
{
name: "Guwahati",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Guwahati, Assam, India",
},
websites: ["https://www.sterispharma.com/guwahati"],
mobileNumbers: ["08042756787"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Howrah",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Howrah, West Bengal, India",
},
websites: ["https://www.sterispharma.com/howrah"],
mobileNumbers: ["08042781276"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Hubballi",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Hubballi, Karnataka, India",
},
websites: ["https://www.sterispharma.com/hubballi"],
mobileNumbers: ["08042781773"],
mapDetails: {
latitude: "",
longitude: "",
},
},
{
name: "Kolkata",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Kolkata, West Bengal, India",
},
websites: ["https://www.sterispharma.com/kolkata"],
mobileNumbers: ["08042783607"],
mapDetails: {
latitude: "",
longitude: "",
},
},
],
},
{
zoneName: "West Zone",
locations: [
{
name: "Ahmedabad",
address: {
businessName: "Steris Healthcare Pvt. Ltd",
locationAddress: "Ahmedabad, Gujarat, India",
},
websites: ["https://www.sterispharma.com/ahmedabad"],
mobileNumbers: ["08042754285"],
mapDetails: {
latitude: "",
longitude: "",
},
},
],
},
];
let printedLocationsCount = 0
locationsData.forEach(function (city) {
createLocations(city);
});
}
customLocCount++;
let regionAdd = document.querySelectorAll('.region_templateLoc'); //8 actual lemgth-4
for (let i = locationsData.length+1; i < regionAdd.length; i++) {
regionAdd[i].remove();
}
}, { once: true });