Merge pull request #33 from rtCamp/feature/new-home-page

Add new homepage
rtCamp · Jan 29, 2024 · c199375 · c199375
2 parents ca03103 + 28ebdab
commit c199375
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 19 deletions.
diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
@@ -618,10 +618,18 @@ video {
   margin-bottom: 2rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -702,8 +710,8 @@ video {
   width: 6rem;
 }
 
-.w-\[50rem\] {
-  width: 50rem;
+.w-\[60rem\] {
+  width: 60rem;
 }
 
 .w-full {

diff --git a/src/common/footer.ejs b/src/common/footer.ejs
@@ -1,6 +1,8 @@
 
-    <footer class="main-footer mt-auto text-center p-2 text-xs bg-white rounded-lg m-4 container-lg">
-        This project is part of the Privacy Sandbox Analysis Tool. To learn more, visit our <a href="https://github.com/GoogleChromeLabs/ps-analysis-tool/wiki" class="text-blue-600 hover:underline" target="_blank" rel="noopener">Wiki Page</a>.
+    <footer class="flex gap-4 main-footer mt-auto p-8 text-xs bg-white">
+        <a href="https://github.com/GoogleChromeLabs/ps-analysis-tool/wiki" class="text-600 font-bold hover:underline" target="_blank" rel="noopener">Documentation</a>
+        <a href="https://chromewebstore.google.com/detail/privacy-sandbox-analysis/ehbnpceebmgpanbbfckhoefhdibijkef" class="text-600 font-bold hover:underline" target="_blank" rel="noopener">Download the PSAT extension</a>
+        <a href="https://privacysandbox.com/" class="text-600 font-bold hover:underline" target="_blank" rel="noopener">About Privacy Sandbox</a>
     </footer>
     <script>
         const mainFooter = document.querySelector('.main-footer');

diff --git a/src/common/index.ejs b/src/common/index.ejs
@@ -1,21 +1,22 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<% const renderCard = (title, emoji, link) => { %>
+<% const renderCard = (title, emoji, link, description ) => { %>
     <a href="<%= link %>"
-        class="flex flex-col border border-blue justify-center items-center font-bold p-4 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-md hover:bg-blue-500 hover:text-white aspect-square transition duration-300 text-center size-40">
+        class="flex flex-col border border-blue p-4 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-md hover:bg-blue-500 hover:text-white aspect-square transition duration-300 size-40">
         <span class="block text-5xl mb-4"><%= emoji %></span>
-        <%= title %>
+        <h3 class="font-bold mb-1"><%= title %></h3>
+        <p class="text-sm"><%= description %></p>
     </a>
 <% } %>
 
 <div class="container-lg mx-auto py-8">
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 mt-8">
-        <%= renderCard('Analytics Tracking', '🔎', '/analytics') %>
-        <%= renderCard('Embedded Content', '📽️', '/embedded-video') %>
-        <%= renderCard('E-Commerce', '🛒', '/ecommerce') %>
-        <%= renderCard('Single Sign-On', '🔐', '/single-sign-on') %>
-        <%= renderCard('Payment Gateway', '💳', '/payment-gateway') %>
-        <%= renderCard('CHIPS', '🍪', '/chips') %>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 mt-8 w-[60rem] mx-auto max-w-full">
+        <%= renderCard('Analytics Tracking', '🔎', '/analytics','Testing the tracking cross-site') %>
+        <%= renderCard('Embedded Content', '📽️', '/embedded-video','Sharing data across sites with embedded content') %>
+        <%= renderCard('E-Commerce', '🛒', '/ecommerce','Storage a shopping cart across sites via iframe') %>
+        <%= renderCard('Single Sign-On', '🔐', '/single-sign-on','Using third-party providers to creating a login session') %>
+        <%= renderCard('Payment Gateway', '💳', '/payment-gateway','Payment flow simulation with credit card') %>
+        <%= renderCard('CHIPS', '🍪', '/chips','Using CHIPS to solve tracking issues across third-party applications') %>
     </div>
 </div>
 

diff --git a/src/scenarios/analytics/index.ejs b/src/scenarios/analytics/index.ejs
@@ -2,8 +2,7 @@
 
     <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 w-[50rem] mx-auto max-w-full">
+        <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
             <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">

diff --git a/src/scenarios/ecommerce/index.ejs b/src/scenarios/ecommerce/index.ejs
@@ -2,7 +2,7 @@
 
 <div class="container mx-auto py-8">
 	<h1 class="text-3xl font-bold mb-4 text-center text-slate-800">E-Commerce</h1>
-	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[50rem] mx-auto max-w-full">
+	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
 		<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-8 rounded w-1/2 h-96"></iframe>

diff --git a/src/scenarios/embedded-video/index.ejs b/src/scenarios/embedded-video/index.ejs
@@ -2,7 +2,7 @@
 
 <div class="container mx-auto py-8">
     <h1 class="text-3xl font-bold my-8 text-center text-slate-800">Embedded Video</h1>
-    <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[50rem] mx-auto max-w-full">
+    <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
         <p class="text-lg font-bold mb-4 text-center">Here is an embedded Third-Party video player, check if you can play the video and if it shows up in your history in your logged in account.</p>
         <div class="mt-8 flex justify-center">
             <iframe class="border-8 rounded" width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ?si=CuSLBTjNMf9NA1eg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

diff --git a/src/scenarios/payment-gateway/checkout.ejs b/src/scenarios/payment-gateway/checkout.ejs
@@ -2,7 +2,7 @@
 
 <div class="container mx-auto py-8">
     <h1 class="text-3xl font-bold mb-4 text-center text-slate-800">Checkout</h1>
-    <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[50rem] mx-auto max-w-full">
+    <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
         <p class="bg-gray-100 p-4 rounded-lg mb-4 text-lg">Item: <%= item %> - $<%= price %></p>
         <div class="overflow-hidden rounded-lg">
             <iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/payment-gateway/payment-form" class="w-full h-96" frameborder="0"></iframe>