Skip to content

Commit

Permalink
Create demo-mapkey.html
Browse files Browse the repository at this point in the history
  • Loading branch information
ledangtrung committed Dec 11, 2024
1 parent 7c67a36 commit 4e7d2c2
Showing 1 changed file with 105 additions and 0 deletions.
105 changes: 105 additions & 0 deletions html/demo-mapkey.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://therealtimex.github.io">
<link rel="preconnect" href="https://maps.google.com">

<!-- Modern Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://therealtimex.github.io/rtlibrary/css/rt-dmview-css-min.css">
<script src="https://therealtimex.github.io/rtlibrary/js/rt-html-abs.js" defer></script>
<script src="https://therealtimex.github.io/rtlibrary/js/dm-template-handler.js" defer></script>



</head>

<body>
<main class="container">
<div>
<h2 class="dmview-title">##store_lb##</h2>

<div class="tab-container">
<ul class="nav nav-pills mb-3" id="dmTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab1" data-bs-toggle="tab" data-bs-target="#info-content"
type="button" role="tab" aria-controls="info-content" aria-selected="true">
πŸ‘€ Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#media-content"
type="button" role="tab" aria-controls="media-content" aria-selected="false">
πŸ’Ό Documents
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#map-content"
type="button" role="tab" aria-controls="map-content" aria-selected="false">
πŸ“ Maps
</button>
</li>
</ul>

<div id="TabContent">
<div class="tab-pane fade show active" id="info-content" role="tabpanel" aria-labelledby="tab1">
<div class="content-scroll">
<p class="mb-1">
<span aria-hidden="true">πŸ‘€</span> ##crm_info_en##<br>##crm_desp##
</p>
<p class="mb-1">
<span aria-hidden="true">βœ…</span> Care status: ##crm_interact_status##
</p>
<p class="mb-1">
<span aria-hidden="true">🏷</span> Classifying label: ##customer_status_lb##
</p>
<p class="mb-1">
<span aria-hidden="true">πŸ”—</span> Source: ##crm_source_ct##
</p>
<p class="mb-1">
<span aria-hidden="true">πŸ†”</span> ID: ##store_id##
</p>
</div>
</div>

<div class="tab-pane fade" id="media-content" role="tabpanel" aria-labelledby="tab2">
<div class="media-container" id="media-slider-container" aria-label="Media Gallery">
</div>
</div>
<div class="tab-pane fade" id="map-content" role="tabpanel" aria-labelledby="tab3">
<iframe tabindex="-1" width=100% height=100% style="border:0;" loading="lazy" allowfullscreen
src="https://maps.google.com/maps?key=" + fetchGoogleMapsApiKey()
+ "&q=##crm_gpsLatitude##,##crm_gpsLongitude##&z=14&output=embed"></iframe>
</div>
</div>
</div>
</div>
</main>

<!-- Modern JS Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"
defer></script>
<script src="https://therealtimex.github.io/rtlibrary/js/mediaSlider.js" defer></script>
<script>
const listFiles = "##input_files##";
let listFilesArray;
if (listFiles === "null" || listFiles.trim() === "") {
listFilesArray = [];
} else {
listFilesArray = listFiles.split(";");
}
document.addEventListener('DOMContentLoaded', () => {
new MediaSlider('media-slider-container', listFilesArray);
});

</script>
</body>

</html>

0 comments on commit 4e7d2c2

Please sign in to comment.