Merge pull request #29 from rtCamp/feature/updating-analytics-interna…

…l-pages Adding new design to the internal Analytics Page
rtCamp · Jan 24, 2024 · 9427175 · 9427175
2 parents 00e77c5 + bc6d46a
commit 9427175
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 41 deletions.
diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
@@ -603,6 +603,21 @@ video {
   margin-right: auto;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -941,6 +956,11 @@ video {
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

diff --git a/src/demos/chips/analytics-first-party.ejs b/src/demos/chips/analytics-first-party.ejs
@@ -2,17 +2,19 @@
 
 <div class="container mx-auto py-8">
 	<h1 class="text-3xl font-bold mb-4 text-center"><%= title %></h1>
-	<p class="text-center">Track user interactions using the analytics code provided below:</p>
-	<script src="<%= protocol %>://<%= domainA %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics.js"></script>
-	<div class="flex justify-center space-x-4 mt-4">
-		<button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
-			Click me!
-		</button>
-		<button onclick="trackInteraction('buttonClickedCHIPS')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
-			CHIPS Click me!
-		</button>
+	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center">
+		<p class="text-center">Track user interactions using the analytics code provided below:</p>
+		<script src="<%= protocol %>://<%= domainA %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics.js"></script>
+		<div class="flex justify-center space-x-4 mt-4">
+			<button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+				Track me!
+			</button>
+			<button onclick="trackInteraction('buttonClickedCHIPS')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+				CHIPS Track me!
+			</button>
+		</div>
+		<div id="status" class="text-center mt-4"></div>
 	</div>
-	<div id="status" class="text-center mt-4"></div>
 </div>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/demos/chips/analytics-third-party.ejs b/src/demos/chips/analytics-third-party.ejs
@@ -2,17 +2,19 @@
 
 <div class="container mx-auto py-8">
 	<h1 class="text-3xl font-bold mb-4 text-center"><%= title %></h1>
-	<p class="text-center">Track user interactions using the analytics code provided below:</p>
-	<script src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics.js"></script>
-	<div class="flex justify-center space-x-4 mt-4">
-		<button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
-			Click me!
-		</button>
-		<button onclick="trackInteraction('buttonClickedCHIPS')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
-			CHIPS Click me!
-		</button>
+	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center">
+		<p class="text-center">Track user interactions using the analytics code provided below:</p>
+		<script src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics.js"></script>
+		<div class="flex justify-center space-x-4 mt-4">
+			<button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+				Track me!
+			</button>
+			<button onclick="trackInteraction('buttonClickedCHIPS')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+				CHIPS Track me!
+			</button>
+		</div>
+		<div id="status" class="text-center mt-4"></div>
 	</div>
-	<div id="status" class="text-center mt-4"></div>
 </div>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/demos/chips/index.ejs b/src/demos/chips/index.ejs
@@ -2,16 +2,18 @@
 
 <div class="container mx-auto py-8">
 	<h1 class="text-3xl font-bold mb-4 text-center">CHIPS</h1>
-	<p class="text-center font-bold">Cookies Having Independent Partitioned State</p>
-	<div class="flex justify-center space-x-4 mt-4">
-		<a href="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics-first-party"
-		   class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-			Analytics First-Party
-		</a>
-		<a href="<%= protocol %>://<%= domainA %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics-third-party"
-		   class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-			Analytics Third-Party
-		</a>
+	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center">
+		<p class="text-center font-bold">Cookies Having Independent Partitioned State</p>
+		<div class="flex justify-center space-x-4 mt-4">
+			<a href="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics-first-party"
+			class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+				Analytics First-Party
+			</a>
+			<a href="<%= protocol %>://<%= domainA %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics-third-party"
+			class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+				Analytics Third-Party
+			</a>
+		</div>
 	</div>
 </div>
 

diff --git a/src/scenarios/analytics/index.ejs b/src/scenarios/analytics/index.ejs
@@ -1,15 +1,18 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-    <h1 class="text-3xl font-bold mb-4 text-center">Analytics</h1>
-    <p class="text-lg font-bold mb-4 text-center">Here is a button that track clicks using third-party analytics service, check if it works.</p>
-    <script src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/analytics/analytics.js"></script>
-    <div class="flex justify-center space-x-4 mt-4">
-        <button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
-            Click me!
-        </button>
+    <div class="container mx-auto py-8">
+        <h1 class="text-3xl font-bold my-8 text-center text-slate-800">Analytics</h1>
+
+        <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center">
+            <p class="text-lg mb-4 text-center">Here is a button that tracks clicks using a third-party analytics service; check if it works.</p>
+
+            <div class="flex justify-center space-x-4 my-10">
+                <button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+                    Track me!
+                </button>
+            </div>
+            <div id="status" class="text-center text-lg my-4"></div>
+        </div>
     </div>
-    <div id="status" class="text-center text-lg mt-4"></div>
-</div>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/ecommerce/index.ejs b/src/scenarios/ecommerce/index.ejs
@@ -4,7 +4,7 @@
 	<h1 class="text-3xl font-bold mb-4 text-center">E-Commerce</h1>
 	<p class="text-lg font-bold mb-4 text-center">Here is an embedded Third-Party e-commerce site, check if you can add products to cart.</p>
 	<div class="mt-8 flex justify-center">
-		<iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/ecommerce/products" class="border border-8 rounded w-1/2 h-96"></iframe>
+		<iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/ecommerce/products" class="border-8 rounded w-1/2 h-96"></iframe>
 	</div>
 </div>