Hide Google consent banner and improve image display in gallery

Adds JavaScript and CSS to hide the Google consent banner. Updates the photo gallery component to use a mobile-first responsive aspect ratio for images.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 89d6d546-4436-4198-9d55-f2b55c9c1ccb
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/5JDNRWP
Replit-Helium-Checkpoint-Created: true

client/index.html

@@ -21,6 +21,32 @@
     <link rel="apple-touch-icon" href="/favicon.png" />
     <link rel="shortcut icon" href="/favicon.png" />
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4465464714854276" crossorigin="anonymous"></script>
+    <script>
+      window.googlefc = window.googlefc || {};
+      window.googlefc.ccpa = window.googlefc.ccpa || {};
+      window.googlefc.callbackQueue = window.googlefc.callbackQueue || [];
+      window.googlefc.controlledMessagingFunction = function(message) { message.proceed(false); };
+      (function hideGoogleCMP() {
+        var style = document.createElement('style');
+        style.textContent = '.fc-consent-root,.fc-dialog-container,.fc-dialog-overlay,div[id^="fc-"],div[class^="fc-"]{display:none!important;visibility:hidden!important}';
+        document.head.appendChild(style);
+        var observer = new MutationObserver(function(mutations) {
+          mutations.forEach(function(m) {
+            m.addedNodes.forEach(function(node) {
+              if (node.nodeType === 1) {
+                var id = node.id || '';
+                var cls = node.className || '';
+                if (id.indexOf('fc-') === 0 || (typeof cls === 'string' && cls.indexOf('fc-') >= 0)) {
+                  node.style.display = 'none';
+                  node.remove();
+                }
+              }
+            });
+          });
+        });
+        observer.observe(document.documentElement, { childList: true, subtree: true });
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Oxanium:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

client/src/components/photo-gallery.tsx

@@ -12,6 +12,21 @@ interface GalleryImage {
 
 const PAGE_SIZE = 24;
 
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+  useEffect(() => {
+    const handler = () => setIsMobile(window.innerWidth < 768);
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+  return isMobile;
+}
+
+function cloudinaryTransform(src: string, transform: string) {
+  if (!src.includes("res.cloudinary.com")) return src;
+  return src.replace(/\/upload\/[^/]+\//, `/upload/${transform}/`);
+}
+
 function thumbUrl(src: string) {
   if (src.includes("res.cloudinary.com")) return src;
   return `/api/gallery/thumb?src=${encodeURIComponent(src)}`;
@@ -322,7 +337,7 @@ export default function GalleryPage() {
                 className="group relative rounded-lg overflow-hidden bg-card border border-card-border cursor-pointer flex flex-col"
                 data-testid={`button-gallery-image-${i}`}
               >
-                <div className="relative w-full" style={{ aspectRatio: "9/16" }}>
+                <div className="relative w-full aspect-[16/9] md:aspect-[9/16]">
                   <LazyImage
                     src={thumbUrl(img.thumb)}
                     alt={img.artist || img.fileName}

client/src/index.css

@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+.fc-consent-root,
+.fc-dialog-container,
+.fc-dialog-overlay,
+#fc-dialog-container,
+div[id^="fc-"],
+div[class^="fc-"] {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
 /* LIGHT MODE */
 :root {
   --button-outline: rgba(0,0,0, .10);

server/dropbox-token.json

@@ -1,7 +1,7 @@
 {
-  "access_token": "sl.u.AGWJ8sxDwmUlPT2LcHxWop31dWjgQBdBEFRmm7UFkk6NrkdA_Wcjn5cmlJ1JSNcwQEOv6seTzt5_1NbyWc-12KujpapH4aMNY75sYMTZcklc63GAgoUFouTQFvTW1Dd4UR2uEiP8z09MU3DX-trdEy9CfAXt4gilBx3apibz-vFpxHrsZlQDeEnx7KY_XmRFRlEKg3AHBsezx7O2DAEhDjMCF7M9CrxaCPEMNszI_oi7eXOcjyDn1LpEI7xb8JpeLUJSJ2DtLTut3hBgIpsAMfR0NDfesXLAeyA0NdpL75k_5pKpDCVsqUZJAITyBWqxSthPaalhboLFQAEPMOYNKLPeZpgFvPDeQdEIqLGbH0ob6nJzJbJz2fyYGEUXPgNBzq_3fJpxIThXNOluSmhBIVjuJwzK1M4nbzs_9EIUwq8YRndfm76yBUHz-YG1mQIJwYX-1gnMZEM4v72QZfI2pCo4igGfFWhSvdbW17ni8SRt46_LpxzM9uXoLTOEeMf2VXDqZxRMar1CxdORcz2gHfZHkBLfTkRHB9QkrtcE9ckU3B3srHtBKwhYxL-FT5gKix5u9o4dTvQGQzHnUmBX_5AvoWayATE3BPVXoAIBYFVX3oMwkRElyKyZmwSzmoi1LvoDnzkF7ZuWtTF6GaCPvv6S1aUsTLh6yd0Izu3T_-N7TeblmcHnE3OgIO8IWOFr3jQutrhIiY4D9X637Pr5-GubYtX-sptVPzEhvRM_epIrsBYZWFSvA7HN4JUcZaB7Gn0_ibcuNhDBBwYiai35AslEOSfLrwrDwoygAC2asMILGn8vXEeZNybZKmmyQY2jcBynuHBXh-Jnx18of0Xk2sQ-Q_sCDiA3m3CQCmn2_zF_hdi1AWiC0oPANKlqPhXMuaToEqBSIqtny1PdFyZgK1Q-p2_Gz-Tz5BD9CHaEu6iHRpt5uFwbQFCHa-iumAyJq5NFIPlQ0Gb56P7JLt6Ks0o6VCIFGP2itDRR1kWcaRIFwdeK9v67QTuYjomFszM0P73ZhdZp_AeaWlCF0lovY32cLIxjzpKQ3Z6VIa10s2abc2Gj6fdgnh6OQDHcFaBqHO1jAA-lTmEQ4CSVma7JLfl00LcqS5bwfV2y7eM6Gfck0uF6JUXmfjHyV5qDpLcok-n-sOHLbkmF551_NwpRTTvXUBxaEYzDJ3U8QF-yFQOD5KPREyZfEitATZikay78XT67tyrCPMQ4TmkmZSf5evKlb542x4H1KHT2QW0b_gU7c6jBzZyeR9ki0Fnop3-VwqP0GKDG1_FzexDN1T8dNjCosJXjBcvt1X6u5pcf_Uoe0w",
+  "access_token": "sl.u.AGU9dS2Q3pWqzmye2anX_2dDH5k6Yiw_4DAUc6HcM87HrdYJg2V-GaWesaZsNcxf0NYABgB4-qQwypk9Yr8zAFFDsDizYfi8E_UXMWQauP3AGdHcDLvgX_QQnTkOheE-j3d-kBlL_PhFxmp_c5LTctyWCHxUFPGzvEhYy8elx4LcsmdjcrrlH-no2yuXMAybk_O4NqCRFABykUe66ehPu5cMHSoS90uL4zdxU3EfKCLH-pWuuXa9vPWRXAFVrV1euAHdESBfWPQ5NuFQZBhVrEucGOPDVGgKdv6mJ_N4C5jwZm_rJjJ9SdPMtc5g30Xk0083bxpY4qNDbiSxeRKJTSW9tXJmfvN954B-QCpDxixm4mQ33LQpz5gGniJib_o-0oqA8bERQ5xvi7ojFeQ-C3r_DETHhC25VLchTeICxWSEOAl80VHZBJJ79zeNxck1UYECGfuV8miF-0Hzsn5ZR1ZJadRBhLAoNIX99TyThgQee6H65yma3opMaBdYCQYf6mIarIY52O3tVL4Tv9deDxxzmkR1l_i9XbBc6OV068fa7M4cicu0vgCy8fO2eWwhvEk5RkaqmcxZXIjRaaDufeeh7YFAY47YqPzSaogy3q3-_Im0DMpMaEUg48RKEY-0_BNWWF6Ih1LMyffIx0l_KeGqnUdO5kFDt_rjL1P82uSRWFe-7_rgphYeAwjx-gGmWa6cRzVzlL9M5TPtqzqfJV2ND9-xdknAILfMokjSG-5fHqJhRmCJc3L_h8CzOUD4kBrfdmmjcsfcKfLuyhqz18qyrQkWJaQyyHhLivCpSdigPYErUwM4JevyXwWwgcqFCWJJsK2JDESH7eZzyEZdSaxwJsX6MghTdujcCLcAgvt4_BJYAYDbC8xMJqMk9ovseXim4QHtdWUM4b-EYNKEcg_OYDa1wz9eGRSy16jPCyXG5uk0gXpQ9GQWNNNpXZCqN-Nph-jPwrkl9YwMkp1e8AqCPVkuTdjb2N1GgdbhlVNBjdrSKStSkXlSYQgzV2bu3u8eqrrpYThycHrN24tqHRaU5lUdvtBtJNv-LJA5LSNFEmqxHx1Pm2x00HZY5Ot0PlYVJnaG0ZWCZ3XtKrjMhhSwQmHl-EXWBLSOFG3B9J33I2H1c2TMHBBxGnifShCwYadEF3_4JBctaRlgtgfcy542quS_u_1-GinX0Mbd4UUZeV1mJEY1hrakDuBPY1gqYfMrjV_PbQCEs5Kt3tmffPTcCsULNa1W_Fc-g0ySZYGdVQcKOUB8gxrAgA2QKKiuOfZ9xbjaJTsSz9lO3bwA8KihFgxRYFmY8aDgEmSk2hT0Jw",
   "refresh_token": "8-fiK0Io8Z8AAAAAAAAAAXn1QIGTwFTVWKF47COXY2bjqYlWyd4aRnFtQJ7usZ0y",
-  "expires_at": 1772717208506,
+  "expires_at": 1772731882191,
   "app_key": "sjwprgka82p8tpv",
   "app_secret": "g3vuczqo0rx3crz"
 }