Merge pull request #6 from rtCamp/feat/adding-footer-link

Adding footer content and grid structure
rtCamp · Dec 13, 2023 · 77347b7 · 77347b7
2 parents 8aeb98a + bb7d2d1
commit 77347b7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/common/footer.ejs b/common/footer.ejs
@@ -1,2 +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>
 </body>
 </html>
diff --git a/common/header.ejs b/common/header.ejs
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title %></title>
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-100">
+<body class="bg-gray-100 flex flex-col min-h-screen">
diff --git a/common/index.ejs b/common/index.ejs
@@ -1,27 +1,30 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
+<div class="container-lg mx-auto py-8">
     <h1 class="text-3xl font-bold mb-4 text-center">Privacy Sandbox</h1>
-    <h2 class="text-3xl font-bold mb-4 text-center">Scenarios</h2>
-    <div class="flex justify-center space-x-4 mt-4">
-        <a href="/analytics"
-           class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-            Analytics
-        </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</a>
-        <a href="/ecommerce"
-           class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-            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
-        </a>
-    </div>
-    <h2 class="text-3xl font-bold mb-4 text-center mt-4">API Demos</h2>
-    <div class="flex justify-center space-x-4 mt-4">
+    <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
+            </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
+            </a>
+            <a href="/ecommerce"
+                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+                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
+            </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