Merge pull request #8 from rtCamp/feat/renaming-first-party-set-to-re…

…lated-set

Renaming first party set to Related websites set and adding new scenarios buttons

app.js

@@ -39,14 +39,14 @@ app.use((req, res, next) => {
 });
 
 // Mount routes for different demo types
-const demoTypes = ['chips', 'first-party-sets', 'private-state-tokens', 'fedcm'];
+const demoTypes = ['chips', 'related-websites-sets', 'private-state-tokens', 'fedcm'];
 demoTypes.forEach(demoType => {
 	const demoRoutes = require(`./demos/${demoType}/routes`);
 	app.use(`/${demoType}`, demoRoutes);  // Mount the routes on a path specific to the demo type
 });
 
 // Mount routes for different scenarios
-const scenarios = ['ecommerce', 'single-sign-on', 'analytics', 'embedded-video'];
+const scenarios = ['ecommerce', 'single-sign-on', 'analytics', 'embedded-video', 'create-account', 'third-party-auth', 'payment-flow', 'content-delivery-networks', ' recommendations'];
 scenarios.forEach(scenario => {
 	const scenarioRoutes = require(`./scenarios/${scenario}/routes`);
 	app.use(`/${scenario}`, scenarioRoutes);  // Mount the routes on a path specific to the scenario

common/common-scenarios.ejs

@@ -0,0 +1,3 @@
+<div class="flex justify-center">
+    <p class="text-lg font-bold mb-4 text-center">To learn more about the CUJs, access<a href="https://github.com/GoogleChromeLabs/ps-analysis-tool/wiki/Example-analysis-scenarios" target="_blank" rel="noopener">Analysis Scenarios</a> page</p>
+</div>

common/footer.ejs

@@ -1,5 +1,5 @@
-    <footer class="mt-auto text-center p-2 text-xs bg-white rounded-lg shadow m-4">
-        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="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>
 </body>
 </html>

common/index.ejs

@@ -1,37 +1,60 @@
 <%- include(commonPath + '/header.ejs') %>
 
 <div class="container-lg mx-auto py-8">
-    <h1 class="text-3xl font-bold mb-4 text-center">Privacy Sandbox</h1>
+    <div class="flex justify-center">
+        <img src="/assets/PS_Logo.svg" class="mx-auto w-24 h-24 mb-4" alt="Logo">
+    </div>
+    <h1 class="text-3xl font-bold mb-8 text-center">Privacy Sandbox</h1>
     <section class="text-center mb-4">
         <h2 class="text-3xl font-bold mb-4 text-center">Scenarios</h2>
         <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
             <a href="/analytics"
                 class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                Analytics
+                🔎 Analytics Tracking
             </a>
             <a href="/embedded-video"
                 class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                Embedded Video
+                📽️ Embedded Content
             </a>
             <a href="/ecommerce"
                 class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                E-Commerce
+                🛒 E-Commerce
             </a>
             <a href="/single-sign-on"
                 class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                Single Sign-On
+                🔐 Single Sign-On
+            </a>
+            <a href="/content-delivery-networks"
+                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+                🚧 Content Delivery Networks
+            </a>
+            <a href="/create-account"
+                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+                🚧 Creating an Account
+            </a>
+            <a href="/payment-flow"
+                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+                🚧 Payment Flow
+            </a>
+            <a href="/third-party-auth"
+                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+                🚧 Third-party Authentication
+            </a>
+            <a href="/recommendations"
+                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+                🚧 Personalization/Recommendations
             </a>
         </div>
     </section>
 <h2 class="text-3xl font-bold mb-4 text-center mt-4">API Demos</h2>
     <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
         <a href="/chips"
            class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-            CHIPS
+            🍪 CHIPS
         </a>
-        <a href="/first-party-sets"
+        <a href="/related-websites-sets"
            class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-            🚧 First Party Sets
+            🚧 Related Website Sets
         </a>
         <a href="/privacy-state-tokens"
            class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">

common/under-construction.ejs

@@ -1,11 +1,11 @@
 <%- include(commonPath + '/header.ejs') %>
 
 <div class="container mx-auto py-8">
-	<h1 class="text-3xl font-bold mb-4 text-center"><%= title %>></h1>
+	<div class="flex justify-center">
+        <a href="/"><img src="/assets/PS_Logo.svg" class="mx-auto w-24 h-24 mb-4" alt="Logo"></a>
+    </div>
+	<h1 class="text-3xl font-bold mb-4 text-center"><%= title %></h1>
 	<p class="text-lg font-bold mb-4 text-center">Page still under construction.</p>
 </div>
 
-</body>
-</html>
-
 <%- include(commonPath + '/footer.ejs') %>

demos/related-websites-sets/routes.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+	res.render('common/under-construction', {
+		title: '🚧 Related Website  Sets Demo'
+	});
+});
+
+module.exports = router;

scenarios/content-delivery-networks/routes.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+	res.render('common/under-construction', {
+		title: '🚧 Content Delivery Network'
+	});
+});
+
+module.exports = router;

demos/first-party-sets/routes.js → scenarios/create-account/routes.js

@@ -4,7 +4,7 @@ const router = express.Router();
 
 router.get('/', (req, res) => {
 	res.render('common/under-construction', {
-		title: '🚧 First Party Sets Demo'
+		title: '🚧 Creating an Account'
 	});
 });
 

scenarios/payment-flow/routes.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+	res.render('common/under-construction', {
+		title: '🚧 Payment Flow'
+	});
+});
+
+module.exports = router;

scenarios/recommendations/routes.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+	res.render('common/under-construction', {
+		title: '🚧 Personalization/Recommendations'
+	});
+});
+
+module.exports = router;

scenarios/third-party-auth/routes.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+	res.render('common/under-construction', {
+		title: '🚧 Third-party Authentication'
+	});
+});
+
+module.exports = router;