Revamp the Tags index page.

adobe · Jan 9, 2024 · abf7d22 · abf7d22
1 parent 74f69ba
commit abf7d22
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 74 deletions.
diff --git a/sandbox/public/HistoryTracker.js b/sandbox/public/HistoryTracker.js
diff --git a/sandbox/public/index_extension.html b/sandbox/public/index_extension.html
@@ -7,7 +7,6 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
     <meta
       http-equiv="Content-Security-Policy"
       content="default-src 'self' *.demdex.net;
@@ -17,59 +16,84 @@
             connect-src 'self' *.alloyio.com *.localalloy.com unifiedjslab.tt.omtrdc.net *.demdex.net http://localhost:8080 *.adobedc.net https://beta.adobedc.net https://edgegateway.azurewebsites.net konductor-qe.apps-exp-edge-npe-va6.experience-edge.adobeinternal.net"
     />
 
-    <title>Mock website hosting Alloy</title>
+    <title>AEP Web SDK - Tags Extension</title>
+    <style>
+      body {
+          margin: 0 auto;
+          font-family: Arial, sans-serif;
+          width: 60%;
+          padding: 50px;
+          height: 100%;
+          border: 1px solid gainsboro;
+      }
+      .header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 10px;
+      }
+      .logo {
+        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+      }
+      .nav-bar {
+          display: flex;
+          gap: 15px;
+      }
+      .nav-bar a {
+          text-decoration: none;
+          color: black;
+      }
+      .banner {
+          width: 100%;
+          height: 80px;
+          background-color: #f3f3f3;
+          text-align: center;
+          padding-top: 30px;
+          margin-bottom: 20px;
+      }
+      .buttons {
+          display: flex;
+          justify-content: center;
+          gap: 10px;
+          margin-top: 70px;
+      }
+      .video-player {
+          display: flex;
+          justify-content: center;
+          margin: 20px 0;
+      }
+      button {
+        cursor:pointer;
+        margin: 0 20px;
+        padding: 15px;
+      }
+    </style>
 
-    <script>
-      var dataLayer = {
-        // Demonstrates overriding automatically collected data
-        device: {
-          screenHeight: 666
-        }
-      };
-    </script>
-
-    <!-- prettier-ignore -->
-    <script>
-      !function(e,a,n,t){var i=e.head;if(i){
-      if (a) return;
-      var o=e.createElement("style");
-      o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),
-      setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
-      (document, document.location.href.indexOf("mboxEdit") !== -1, ".personalization-container { opacity: 0 !important }", 3000);
-    </script>
-
-    <!-- Using UnifiedEdgeQEOnly, property alloyio.com -->
-    <!-- <script
-      src="//assets.adobedtm.com/4b26fd82417d/e34bddb5ee87/launch-b1dd2c004c8c-development.js"
-      async
-    ></script> -->
-
-    <!-- Using Unified JS LAB, property alloyio.com -->
-    <script
-      src="//assets.adobedtm.com/1281f6ff0c59/c2b711dc1596/launch-c80198ec8c6d-development.js"
-      async
-    ></script>
+    <!-- Using Unified JS LAB, property Alloyio-Tags -->
+    <script src="https://assets.adobedtm.com/1281f6ff0c59/6075d61c737a/launch-1d287ed0445a-development.min.js" async></script>
   </head>
   <body>
-    <div id="root">
-      <button class="optIn">Opt In</button>
-      <button class="optOut">Opt Out</button>
-      <button class="syncIdentity">Sync identity</button>
-
-      <button class="sendEventWithMergeId1">Send event with merge ID 1</button>
-      <button class="sendEventWithMergeId2">Send event with merge ID 2</button>
-
-      <button class="resetMergeId1">Reset Merge ID 1</button>
-      <button class="resetMergeId2">Reset Merge ID 2</button>
-
-      <div class="personalization-container">
-        <h2>Some awesome default content</h2>
-      </div>
-
-      <div class="personalization-container-2"></div>
-
-      <li><a href="http://example.com">Go to example.com</a></li>
-      <li><a href="download.zip">Download ZIP file</a></li>
+    <div class="header">
+      <h3 class="logo">Alloy</h3>
+      <nav class="nav-bar">
+          <a href="#" class="link1">Link 1</a>
+          <a href="#" class="link2">Link 2</a>
+          <a href="#" class="link3">Link 3</a>
+      </nav>
+    </div>
+    <div class="banner">
+        Banner Content
+    </div>
+    <div class="video-player">
+        <video width="640" height="360" controls id="home-player">
+            <source src="video/clickbaby.mp4" type="video/mp4">
+        </video>
+    </div>
+    <div class="buttons">
+        <button class="button1">Button 1</button>
+        <button class="button2">Button 2</button>
+        <button class="button3">Button 3</button>
+        <button class="button4">Button 4</button>
     </div>
   </body>
 </html>
diff --git a/sandbox/public/video/clickbaby.mp4 b/sandbox/public/video/clickbaby.mp4