From aaddfd5a9a44ad1f580e1e405c01e162aa0339ba Mon Sep 17 00:00:00 2001
From: amir angel <amirangel101@hotmail.com>
Date: Thu, 7 Nov 2024 14:36:54 +0200
Subject: [PATCH 01/11] New one-click preview page

---
 .../resources/one-click-page/index.html       | 102 +++++++++---------
 1 file changed, 54 insertions(+), 48 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 857f83ee0f..9d7a7b482a 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -33,15 +33,39 @@
     --max-width: 460px;
     overflow: hidden;
     height: 100dvh;
+    background-color: #ECECEC;
   }
 
-  body {
-    background: url("{{{zupassUrl}}}/images/devcon/devcon-landscape.webp") lightgray 50% / cover no-repeat;
+  .zupass-link {
+    display: block;
+    text-align: center;
+    color: #0077FF;
+    text-decoration: none;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    font-family: Rubik;
+    font-size: 14px;
+    background-color: #FCE5B2;
+    border: 1px solid #E2DCAD;
+  }
 
-    @media (max-width: 460px) {
-      background: url("{{{zupassUrl}}}/images/devcon/devcon-portrait.webp") lightgray 50% / cover no-repeat;
-    }
+  .zupass-link:hover {
+    text-decoration: underline;
+  }
 
+  .ticket__footer {
+    color: var(--text-tertiary);
+    text-align: center;
+    font-family: Rubik;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    width: 100%;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    border-top: 1px solid #eee;
   }
 
   .container {
@@ -154,7 +178,7 @@
   }
 
   .header__title {
-    color: var(--white);
+    color: #1E2C50;
     text-align: center;
     font-family: Barlow;
     font-size: 28px;
@@ -165,7 +189,7 @@
   }
 
   .header__subtitle {
-    color: #c0d1ff;
+    color: #7C8BB4;
     text-align: center;
     font-family: Rubik;
     font-size: 18px;
@@ -440,29 +464,8 @@
 </style>
 
 <body>
-  <div class="page-header" id="page-header">
-    <svg xmlns="http://www.w3.org/2000/svg" width="118" height="21" viewBox="0 0 118 21" fil="none">
-      <path
-        d="M0.587402 17.6774L13.949 2.65875H1.20393V0.406738H17.4772V2.49193L4.22441 17.4011H18.1248L17.7466 19.6531H0.587402V17.6722V17.6774Z"
-        fill="#FFD6A0" />
-      <path
-        d="M23.5906 0.406738V11.3332C23.5906 16.4002 26.5541 17.7868 29.4347 17.7868C32.9629 17.7868 35.0663 16.1083 35.0663 11.3332V0.406738H37.7604V11.3019C37.7604 17.5627 34.5275 20.0597 29.3569 20.0597C24.1864 20.0597 20.8965 17.5106 20.8965 11.5208V0.406738H23.5906Z"
-        fill="#FFD6A0" />
-      <path
-        d="M43.1799 0.406738H52.1792C56.9197 0.406738 59.1009 2.87248 59.1009 6.07326C59.1009 9.84225 56.5156 11.9535 52.2569 11.9535H45.8999V19.6531H43.1799V0.406738ZM45.8999 9.65458H51.8787C54.521 9.65458 56.3498 8.89349 56.3498 6.10454C56.3498 3.93593 54.894 2.69003 51.8787 2.69003H45.8999V9.65458Z"
-        fill="#FFD6A0" />
-      <path
-        d="M63.8673 13.825L61.3908 19.6531H58.5879L66.8048 0.406738H70.0895L78.6588 19.6531H75.6953L73.1359 13.825H63.8673ZM72.25 11.4948C69.9082 6.18273 68.7995 3.65964 68.3695 2.36161H68.3436C67.9395 3.60751 66.6442 6.91776 64.7066 11.4948H72.25Z"
-        fill="#FFD6A0" />
-      <path
-        d="M83.2646 14.0438C83.964 16.3219 85.6064 17.891 89.3522 17.891C93.098 17.891 94.5797 16.4261 94.5797 14.6381C94.5797 12.7405 93.528 11.5728 88.5698 10.7335C82.8294 9.75872 81.4564 7.93938 81.4564 5.31204C81.4564 1.92359 84.6375 0 88.8134 0C95.0356 0 96.4915 3.27897 96.7091 5.23384H93.9891C93.585 3.90453 92.7768 2.1686 88.7356 2.1686C85.9897 2.1686 84.2075 3.11737 84.2075 5.04096C84.2075 6.61528 84.9898 7.61618 89.3522 8.346C96.248 9.53977 97.3515 11.6823 97.3515 14.3618C97.3515 17.427 94.9268 20.0544 89.1605 20.0544C83.8241 20.0544 81.13 17.5886 80.4824 14.0386H83.2594L83.2646 14.0438Z"
-        fill="#FFD6A0" />
-      <path
-        d="M102.932 14.0438C103.631 16.3219 105.273 17.891 109.019 17.891C112.765 17.891 114.247 16.4261 114.247 14.6381C114.247 12.7405 113.195 11.5728 108.237 10.7335C102.496 9.75872 101.123 7.93938 101.123 5.31204C101.123 1.92359 104.304 0 108.48 0C114.703 0 116.158 3.27897 116.376 5.23384H113.656C113.252 3.90453 112.444 2.1686 108.403 2.1686C105.657 2.1686 103.874 3.11737 103.874 5.04096C103.874 6.61528 104.657 7.61618 109.019 8.346C115.915 9.53977 117.018 11.6823 117.018 14.3618C117.018 17.427 114.594 20.0544 108.827 20.0544C103.491 20.0544 100.797 17.5886 100.155 14.0386H102.932V14.0438Z"
-        fill="#FFD6A0" />
-    </svg>
-  </div>
   <main class="container" ontouchstart>
+    <a href="#" onclick="redirectToZupass()" class="zupass-link">View full page in Zupass</a>
     <div class="header">
       <span class="header__title">{{eventName}}</span>
       <div class="ticket__subtitle--container">
@@ -497,26 +500,26 @@
           fill="#154133" />
       </svg></button>
 
-    {{#tickets}}
-    <div class="ticket">
-      <img class="ticket__qr-code" src="{{qr}}" draggable="false" />
-      <div class="ticket__text-container">
-        <span class="ticket__title">{{attendeeName}}</span>
-        <div class="ticket__subtitle--container">
-          <span class="ticket__subtitle--text">{{attendeeEmail}}</span>
-          <span class="ticket__subtitle--text">·</span>
-          <span class="ticket__subtitle--text">{{ticketName}}</span>
+      {{#tickets}}
+      <div class="ticket">
+        <img class="ticket__qr-code" src="{{qr}}" draggable="false" />
+        <div class="ticket__text-container">
+          <span class="ticket__title">{{attendeeName}}</span>
+          <div class="ticket__subtitle--container">
+            <span class="ticket__subtitle--text">{{attendeeEmail}}</span>
+            <span class="ticket__subtitle--text">·</span>
+            <span class="ticket__subtitle--text">{{ticketName}}</span>
+          </div>
         </div>
-      </div>
-      {{#showAddons}}
-      <button id="addons-btn" type="button" class="ticket__addons-btn">
-        {{#moreThanOneAddon}}
-        <span class="ticket__subtitle--text" style="font-size: 16px;">View {{addonsCount}}
-          add-on items</span>
-        {{/moreThanOneAddon}}
-        {{^moreThanOneAddon}}
-        <span class="ticket__subtitle--text" style="font-size: 16px;">View add-on item</span>
-        {{/moreThanOneAddon}}
+        {{#showAddons}}
+        <button id="addons-btn" type="button" class="ticket__addons-btn">
+          {{#moreThanOneAddon}}
+          <span class="ticket__subtitle--text" style="font-size: 16px;">View {{addonsCount}}
+            add-on items</span>
+          {{/moreThanOneAddon}}
+          {{^moreThanOneAddon}}
+          <span class="ticket__subtitle--text" style="font-size: 16px;">View add-on item</span>
+          {{/moreThanOneAddon}}
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="var(--text-tertiary)" class="size-4"
           style="width: 20px;">
           <path d="M4.75 4.25a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" />
@@ -540,6 +543,9 @@
       <!-- spacer when we dont have any addon -->
       <div style="height:16px;"></div>
       {{/showAddons}}
+      <div class="ticket__footer">
+        QR POD • ZK powered by ZUPASS
+      </div>
     </div>
     {{/tickets}}
   </main>

From 6d796c5f5230aef3bcae81c124544bfb35432d9a Mon Sep 17 00:00:00 2001
From: amir angel <amirangel101@hotmail.com>
Date: Thu, 7 Nov 2024 16:44:06 +0200
Subject: [PATCH 02/11] styling

---
 .../resources/one-click-page/index.html       | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 9d7a7b482a..17871c597a 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -80,7 +80,7 @@
     max-height: calc(100dvh - 72px);
     position: relative;
     overflow: scroll;
-    margin-top: 72px;
+    margin-top: 40px;
 
     padding: 25px 20px 25px 20px;
     -ms-overflow-style: none;
@@ -142,7 +142,7 @@
     width: 100%;
     background: none;
     border: none;
-    padding: 16px 0;
+    padding: 16px 0 0 0;
     border-top: 1px solid #eee;
     display: flex;
     justify-content: space-between;
@@ -169,12 +169,12 @@
   }
 
   .header {
-    margin-top: 30px;
+    margin-top: 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin-bottom: 26px;
+    margin-bottom: 12px;
   }
 
   .header__title {
@@ -200,28 +200,28 @@
   }
 
   .cta {
-    border-radius: 8px;
-    border: 2px solid #FFC971;
+    border-radius: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.2);
     background: linear-gradient(0deg, #FFAE00 0%, #4CCCB0 100%);
-    height: 76px;
+    height: 55px;
     width: 100%;
     color: #000;
     display: flex;
     align-items: center;
     padding: 20px 0;
     justify-content: center;
-    gap: 8px;
+    gap: 16px;
     /* Fallback for older browsers */
-    color: #154133;
+    color: #1E4F3F;
     text-align: center;
-    font-family: "Fragment Mono";
-    font-size: 28px;
+    font-family: "Rubik";
+    font-size: 24px;
+    line-height: 32.4px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
     cursor: pointer;
-    box-shadow: 0 10px #A8650F;
-    margin-top: 30px;
-    margin-bottom: 45px;
+    box-shadow: 0 4px #B3901B;
+    margin-bottom: 20px;
   }
 
   .cta:active {
@@ -478,11 +478,11 @@
         {{/isMoreThanOne}}
       </div>
     </div>
-    <button onclick="redirectToZupass()" class="cta">Score: 0 <svg xmlns="http://www.w3.org/2000/svg" width="41"
+    <button onclick="redirectToZupass()" class="cta">SCORE: 0 <svg xmlns="http://www.w3.org/2000/svg" width="41"
         height="32" viewBox="0 0 41 32" fill="none">
         <path
           d="M39.8985 9.69016C39.8985 5.42073 36.4459 1.95996 32.1865 1.95996C29.0961 1.95996 26.4383 3.78611 25.2076 6.41626C23.7812 6.19747 22.293 6.07843 20.7611 6.07843C19.2292 6.07843 17.7802 6.19481 16.3703 6.40762C15.1383 3.78212 12.4825 1.95996 9.39539 1.95996C5.13599 1.95996 1.68335 5.42073 1.68335 9.69016C1.68335 11.2769 2.1617 12.7512 2.97975 13.9782C2.23203 15.2743 1.82268 16.6749 1.82268 18.1366C1.82268 24.7961 10.3017 30.1947 20.7604 30.1947C31.2192 30.1947 39.6982 24.7961 39.6982 18.1366C39.6982 16.6935 39.2988 15.3102 38.569 14.0274C39.4069 12.7905 39.8979 11.2975 39.8979 9.68949L39.8985 9.69016Z"
-          fill="#74DB61" stroke="#154133" stroke-width="2" />
+          fill="#74DB61" stroke="#154133" stroke-width="1.7" />
         <path
           d="M9.45699 11.1948C10.7167 11.1948 11.738 9.86595 11.738 8.22678C11.738 6.5876 10.7167 5.25879 9.45699 5.25879C8.19725 5.25879 7.17603 6.5876 7.17603 8.22678C7.17603 9.86595 8.19725 11.1948 9.45699 11.1948Z"
           fill="#154133" />

From 40640278f0d00a69b6dd98c20c1aa1672f8206d8 Mon Sep 17 00:00:00 2001
From: amir angel <amirangel101@hotmail.com>
Date: Thu, 7 Nov 2024 17:25:34 +0200
Subject: [PATCH 03/11] styling

---
 .../resources/one-click-page/index.html       | 33 +++++++------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 17871c597a..c88c1fd33c 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -201,7 +201,7 @@
 
   .cta {
     border-radius: 16px;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    border: 2px solid #FFC971;
     background: linear-gradient(0deg, #FFAE00 0%, #4CCCB0 100%);
     height: 55px;
     width: 100%;
@@ -478,27 +478,16 @@
         {{/isMoreThanOne}}
       </div>
     </div>
-    <button onclick="redirectToZupass()" class="cta">SCORE: 0 <svg xmlns="http://www.w3.org/2000/svg" width="41"
-        height="32" viewBox="0 0 41 32" fill="none">
-        <path
-          d="M39.8985 9.69016C39.8985 5.42073 36.4459 1.95996 32.1865 1.95996C29.0961 1.95996 26.4383 3.78611 25.2076 6.41626C23.7812 6.19747 22.293 6.07843 20.7611 6.07843C19.2292 6.07843 17.7802 6.19481 16.3703 6.40762C15.1383 3.78212 12.4825 1.95996 9.39539 1.95996C5.13599 1.95996 1.68335 5.42073 1.68335 9.69016C1.68335 11.2769 2.1617 12.7512 2.97975 13.9782C2.23203 15.2743 1.82268 16.6749 1.82268 18.1366C1.82268 24.7961 10.3017 30.1947 20.7604 30.1947C31.2192 30.1947 39.6982 24.7961 39.6982 18.1366C39.6982 16.6935 39.2988 15.3102 38.569 14.0274C39.4069 12.7905 39.8979 11.2975 39.8979 9.68949L39.8985 9.69016Z"
-          fill="#74DB61" stroke="#154133" stroke-width="1.7" />
-        <path
-          d="M9.45699 11.1948C10.7167 11.1948 11.738 9.86595 11.738 8.22678C11.738 6.5876 10.7167 5.25879 9.45699 5.25879C8.19725 5.25879 7.17603 6.5876 7.17603 8.22678C7.17603 9.86595 8.19725 11.1948 9.45699 11.1948Z"
-          fill="#154133" />
-        <path
-          d="M32.1245 11.1948C33.3842 11.1948 34.4054 9.86595 34.4054 8.22678C34.4054 6.5876 33.3842 5.25879 32.1245 5.25879C30.8647 5.25879 29.8435 6.5876 29.8435 8.22678C29.8435 9.86595 30.8647 11.1948 32.1245 11.1948Z"
-          fill="#154133" />
-        <path
-          d="M9.19039 20.2213C10.4501 20.2213 11.4714 18.6094 11.4714 16.6209C11.4714 14.6325 10.4501 13.0205 9.19039 13.0205C7.93065 13.0205 6.90942 14.6325 6.90942 16.6209C6.90942 18.6094 7.93065 20.2213 9.19039 20.2213Z"
-          fill="#F9C1D4" />
-        <path
-          d="M32.3916 20.2213C33.6513 20.2213 34.6725 18.6094 34.6725 16.6209C34.6725 14.6325 33.6513 13.0205 32.3916 13.0205C31.1318 13.0205 30.1106 14.6325 30.1106 16.6209C30.1106 18.6094 31.1318 20.2213 32.3916 20.2213Z"
-          fill="#F9C1D4" />
-        <path
-          d="M20.7908 18.8751C17.9001 18.8751 15.5488 16.6925 15.5488 14.0098C15.5488 13.6068 15.8746 13.2803 16.2766 13.2803C16.6787 13.2803 17.0045 13.6068 17.0045 14.0098C17.0045 15.8878 18.7029 17.4154 20.7901 17.4154C22.8774 17.4154 24.5758 15.8878 24.5758 14.0098C24.5758 13.6068 24.9023 13.2803 25.3037 13.2803C25.705 13.2803 26.0315 13.6068 26.0315 14.0098C26.0315 16.6925 23.6802 18.8751 20.7895 18.8751H20.7908Z"
-          fill="#154133" />
-      </svg></button>
+    <button onclick="redirectToZupass()" class="cta">SCORE: 0 <svg width="39" height="31" viewBox="0 0 39 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M35.7266 10.0758C35.7266 6.45013 32.7945 3.51117 29.1773 3.51117C26.5529 3.51117 24.2958 5.06197 23.2507 7.29556C22.0393 7.10976 20.7756 7.00867 19.4746 7.00867C18.1737 7.00867 16.9432 7.1075 15.7459 7.28822C14.6996 5.05859 12.4442 3.51117 9.82261 3.51117C6.20543 3.51117 3.27338 6.45013 3.27338 10.0758C3.27338 11.4233 3.67961 12.6754 4.37431 13.7173C3.73933 14.818 3.3917 16.0074 3.3917 17.2487C3.3917 22.9041 10.5923 27.4888 19.4741 27.4888C28.3559 27.4888 35.5564 22.9041 35.5564 17.2487C35.5564 16.0232 35.2173 14.8485 34.5975 13.7591C35.3091 12.7087 35.726 11.4408 35.726 10.0753L35.7266 10.0758Z" fill="#74DB61" stroke="white" stroke-width="6"/>
+      <path d="M35.7266 10.0758C35.7266 6.45013 32.7945 3.51117 29.1773 3.51117C26.5529 3.51117 24.2958 5.06197 23.2507 7.29556C22.0393 7.10976 20.7756 7.00867 19.4746 7.00867C18.1737 7.00867 16.9432 7.1075 15.7459 7.28822C14.6996 5.05859 12.4442 3.51117 9.82261 3.51117C6.20543 3.51117 3.27338 6.45013 3.27338 10.0758C3.27338 11.4233 3.67961 12.6754 4.37431 13.7173C3.73933 14.818 3.3917 16.0074 3.3917 17.2487C3.3917 22.9041 10.5923 27.4888 19.4741 27.4888C28.3559 27.4888 35.5564 22.9041 35.5564 17.2487C35.5564 16.0232 35.2173 14.8485 34.5975 13.7591C35.3091 12.7087 35.726 11.4408 35.726 10.0753L35.7266 10.0758Z" fill="#74DB61" stroke="#154133" stroke-width="1.69845"/>
+      <path d="M9.87498 11.3534C10.9448 11.3534 11.812 10.2249 11.812 8.83292C11.812 7.4409 10.9448 6.31244 9.87498 6.31244C8.80517 6.31244 7.93793 7.4409 7.93793 8.83292C7.93793 10.2249 8.80517 11.3534 9.87498 11.3534Z" fill="#154133"/>
+      <path d="M29.1246 11.3535C30.1944 11.3535 31.0617 10.225 31.0617 8.83298C31.0617 7.44096 30.1944 6.3125 29.1246 6.3125C28.0548 6.3125 27.1876 7.44096 27.1876 8.83298C27.1876 10.225 28.0548 11.3535 29.1246 11.3535Z" fill="#154133"/>
+      <path d="M9.64854 19.0192C10.7183 19.0192 11.5856 17.6503 11.5856 15.9617C11.5856 14.273 10.7183 12.9041 9.64854 12.9041C8.57873 12.9041 7.71149 14.273 7.71149 15.9617C7.71149 17.6503 8.57873 19.0192 9.64854 19.0192Z" fill="#F9C1D4"/>
+      <path d="M29.3515 19.0191C30.4213 19.0191 31.2886 17.6502 31.2886 15.9615C31.2886 14.2729 30.4213 12.904 29.3515 12.904C28.2817 12.904 27.4145 14.2729 27.4145 15.9615C27.4145 17.6502 28.2817 19.0191 29.3515 19.0191Z" fill="#F9C1D4"/>
+      <path d="M19.4999 17.8757C17.0451 17.8757 15.0483 16.0222 15.0483 13.744C15.0483 13.4017 15.3249 13.1245 15.6664 13.1245C16.0078 13.1245 16.2844 13.4017 16.2844 13.744C16.2844 15.3388 17.7268 16.6361 19.4993 16.6361C21.2719 16.6361 22.7142 15.3388 22.7142 13.744C22.7142 13.4017 22.9914 13.1245 23.3323 13.1245C23.6732 13.1245 23.9504 13.4017 23.9504 13.744C23.9504 16.0222 21.9536 17.8757 19.4988 17.8757H19.4999Z" fill="#154133"/>
+      </svg>
+      </button>
 
       {{#tickets}}
       <div class="ticket">

From 5801018703abd6a04eeb83523ea53056101be658 Mon Sep 17 00:00:00 2001
From: amir angel <amirangel101@hotmail.com>
Date: Thu, 7 Nov 2024 17:37:11 +0200
Subject: [PATCH 04/11] margin fix

---
 apps/passport-server/resources/one-click-page/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index c88c1fd33c..6b50b449ae 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -49,6 +49,7 @@
     font-size: 14px;
     background-color: #FCE5B2;
     border: 1px solid #E2DCAD;
+    margin-top: 20px;
   }
 
   .zupass-link:hover {
@@ -80,7 +81,6 @@
     max-height: calc(100dvh - 72px);
     position: relative;
     overflow: scroll;
-    margin-top: 40px;
 
     padding: 25px 20px 25px 20px;
     -ms-overflow-style: none;

From 142506699e03d27c73ffca4a75b81c6013632edd Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 8 Nov 2024 13:47:00 +0700
Subject: [PATCH 05/11] styling, scroll issue

---
 .../resources/one-click-page/index.html        | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 755f1a1449..71f8a42401 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -31,11 +31,15 @@
     --frogcrypto: #17A34A;
     --core-accent: #01685C;
     --max-width: 460px;
-    overflow: hidden;
-    height: 100dvh;
     background-color: #ECECEC;
   }
 
+  body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+  }
+
   .zupass-link {
     display: block;
     text-align: center;
@@ -77,16 +81,12 @@
     flex-direction: column;
     max-width: var(--max-width);
     align-items: center;
-    max-height: calc(100vh - 72px);
-    max-height: calc(100dvh - 72px);
     position: relative;
-    overflow: scroll;
-
+    overflow-y: auto;
+    overflow-x: hidden;
     padding: 25px 20px 25px 20px;
     -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
     scrollbar-width: none;
-    /* Firefox */
   }
 
   .container::-webkit-scrollbar {
@@ -468,7 +468,7 @@
   <main class="container" ontouchstart>
     <a href="#" onclick="redirectToZupass()" class="zupass-link">View full page in Zupass</a>
     <div class="header">
-      <span class="header__title">{{eventName}}</span>
+      <span class="header__title">WELCOME TO {{eventName}}</span>
       <div class="ticket__subtitle--container">
         <span class="header__subtitle">{{eventLocation}}</span>
         <span class="header__subtitle">·</span>

From 91a9ddbe22379aea7583fdd1ffcd06c221c4ae4c Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 8 Nov 2024 14:22:20 +0700
Subject: [PATCH 06/11] fix swiper

---
 apps/passport-server/resources/one-click-page/index.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 71f8a42401..46918d0e33 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -713,6 +713,8 @@
     for(const addonsBtn of addonsBtns){
       const id = addonsBtn.id.split("_")[2];
       const addonsModal = document.getElementById("modal_addons_"+id);
+      let swiper; // Declare swiper variable outside the function
+
       addonsBtn.onclick = function () {
         overlay.classList.remove("modal__overlay--disabled");
         addonsModal.classList.remove("modal__container--hide");
@@ -725,7 +727,7 @@
         const closeBtn = addonsModal.querySelector("#close");
 
         // Initialize a new Swiper instance for the specific modal
-        const swiper = new Swiper(swiperContainer, {
+        swiper = new Swiper(swiperContainer, {
           spaceBetween: 12,
           navigation: {
             prevEl: prevButton,
@@ -743,6 +745,7 @@
         closeBtn.onclick = function () {
           overlay.classList.add("modal__overlay--disabled");
           addonsModal.classList.add("modal__container--hide");
+          swiper.slideTo(0); // Reset swiper to the first slide
         };
       }
     }

From a9c6a3898712d9ab2dc3e88724a24a6f4a321114 Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 8 Nov 2024 14:31:23 +0700
Subject: [PATCH 07/11] updated icon, now need to change redirect

---
 .../resources/one-click-page/index.html       | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 46918d0e33..48b1983b7b 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -41,23 +41,36 @@
   }
 
   .zupass-link {
-    display: block;
+    display: flex;
+    padding: 6px 12px 6px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+
+    border-radius: 200px;
+    border: 2px solid var(--text-white, #FFF);
+    background: var(--bg-white-transparent, rgba(255, 255, 255, 0.80));
+
+    /* shadow-sm */
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  }
+
+  .zupass-link__text {
+    color: var(--text-tertiary, #8B94AC);
     text-align: center;
-    color: #0077FF;
-    text-decoration: none;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-top: 2px;
-    padding-bottom: 2px;
+
+    /* text-sm (14px)/medium-rubik */
     font-family: Rubik;
     font-size: 14px;
-    background-color: #FCE5B2;
-    border: 1px solid #E2DCAD;
-    margin-top: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 135%; /* 18.9px */
   }
 
-  .zupass-link:hover {
-    text-decoration: underline;
+  .zupass-link__icon {
+    width: 16px;
+    height: 16px;
   }
 
   .ticket__footer {
@@ -466,7 +479,9 @@
 
 <body>
   <main class="container" ontouchstart>
-    <a href="#" onclick="redirectToZupass()" class="zupass-link">View full page in Zupass</a>
+    <button onclick="redirectToZupass()" class="zupass-link"><div class="zupass-link__text">View full page in Zupass</div><div class="zupass-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.71967 4.71967C7.01256 4.42678 7.48744 4.42678 7.78033 4.71967L11.0303 7.96967C11.3232 8.26256 11.3232 8.73744 11.0303 9.03033L7.78033 12.2803C7.48744 12.5732 7.01256 12.5732 6.71967 12.2803C6.42678 11.9874 6.42678 11.5126 6.71967 11.2197L9.43934 8.5L6.71967 5.78033C6.42678 5.48744 6.42678 5.01256 6.71967 4.71967Z" fill="#8B94AC"/>
+    </svg></div></button>
     <div class="header">
       <span class="header__title">WELCOME TO {{eventName}}</span>
       <div class="ticket__subtitle--container">

From ea286325ed9025a9e4a874e090a565c01c8e169d Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 8 Nov 2024 15:04:13 +0700
Subject: [PATCH 08/11] more styling

---
 .../resources/one-click-page/index.html       | 51 ++++++++++---------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 48b1983b7b..6123f372dc 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -7,7 +7,7 @@
   <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=Barlow:wght@800&family=Fragment+Mono&family=IBM+Plex+Sans&family=Rubik:wght@300..900&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Barlow:wght@800&family=Fragment+Mono&family=IBM+Plex+Sans&family=Rubik:wght@300..900&family=IBM+Plex+Mono:wght@500&display=swap"
     rel="stylesheet">
 </head>
 <style>
@@ -194,7 +194,7 @@
     color: #1E2C50;
     text-align: center;
     font-family: Barlow;
-    font-size: 28px;
+    font-size: 20px;
     font-style: normal;
     font-weight: 800;
     line-height: 135%;
@@ -205,41 +205,47 @@
     color: #7C8BB4;
     text-align: center;
     font-family: Rubik;
-    font-size: 18px;
+    font-size: 16px;
     font-style: normal;
-    font-weight: 300;
+    font-weight: 400;
     line-height: 135%;
     /* 24.3px */
   }
 
   .cta {
+    position: relative;
     border-radius: 16px;
-    border: 2px solid #FFC971;
     background: linear-gradient(0deg, #FFAE00 0%, #4CCCB0 100%);
     height: 55px;
     width: 100%;
-    color: #000;
     display: flex;
     align-items: center;
     padding: 20px 0;
     justify-content: center;
     gap: 16px;
-    /* Fallback for older browsers */
     color: #1E4F3F;
     text-align: center;
-    font-family: "Rubik";
-    font-size: 24px;
-    line-height: 32.4px;
+    font-family: "IBM Plex Mono";
+    font-size: 20px;
     font-style: normal;
     font-weight: 500;
+    line-height: 135%; /* 27px */
+    letter-spacing: -0.4px;
     cursor: pointer;
     box-shadow: 0 4px #B3901B;
     margin-bottom: 20px;
   }
 
-  .cta:active {
-    transform: translateY(5px);
-    box-shadow: 0 3px #8f560d;
+  .cta::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.20);
+    pointer-events: none;
   }
 
   .modal__overlay--disabled {
@@ -494,16 +500,15 @@
         {{/isMoreThanOne}}
       </div>
     </div>
-    <button onclick="redirectToZupass()" class="cta">SCORE: 0 <svg width="39" height="31" viewBox="0 0 39 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M35.7266 10.0758C35.7266 6.45013 32.7945 3.51117 29.1773 3.51117C26.5529 3.51117 24.2958 5.06197 23.2507 7.29556C22.0393 7.10976 20.7756 7.00867 19.4746 7.00867C18.1737 7.00867 16.9432 7.1075 15.7459 7.28822C14.6996 5.05859 12.4442 3.51117 9.82261 3.51117C6.20543 3.51117 3.27338 6.45013 3.27338 10.0758C3.27338 11.4233 3.67961 12.6754 4.37431 13.7173C3.73933 14.818 3.3917 16.0074 3.3917 17.2487C3.3917 22.9041 10.5923 27.4888 19.4741 27.4888C28.3559 27.4888 35.5564 22.9041 35.5564 17.2487C35.5564 16.0232 35.2173 14.8485 34.5975 13.7591C35.3091 12.7087 35.726 11.4408 35.726 10.0753L35.7266 10.0758Z" fill="#74DB61" stroke="white" stroke-width="6"/>
-      <path d="M35.7266 10.0758C35.7266 6.45013 32.7945 3.51117 29.1773 3.51117C26.5529 3.51117 24.2958 5.06197 23.2507 7.29556C22.0393 7.10976 20.7756 7.00867 19.4746 7.00867C18.1737 7.00867 16.9432 7.1075 15.7459 7.28822C14.6996 5.05859 12.4442 3.51117 9.82261 3.51117C6.20543 3.51117 3.27338 6.45013 3.27338 10.0758C3.27338 11.4233 3.67961 12.6754 4.37431 13.7173C3.73933 14.818 3.3917 16.0074 3.3917 17.2487C3.3917 22.9041 10.5923 27.4888 19.4741 27.4888C28.3559 27.4888 35.5564 22.9041 35.5564 17.2487C35.5564 16.0232 35.2173 14.8485 34.5975 13.7591C35.3091 12.7087 35.726 11.4408 35.726 10.0753L35.7266 10.0758Z" fill="#74DB61" stroke="#154133" stroke-width="1.69845"/>
-      <path d="M9.87498 11.3534C10.9448 11.3534 11.812 10.2249 11.812 8.83292C11.812 7.4409 10.9448 6.31244 9.87498 6.31244C8.80517 6.31244 7.93793 7.4409 7.93793 8.83292C7.93793 10.2249 8.80517 11.3534 9.87498 11.3534Z" fill="#154133"/>
-      <path d="M29.1246 11.3535C30.1944 11.3535 31.0617 10.225 31.0617 8.83298C31.0617 7.44096 30.1944 6.3125 29.1246 6.3125C28.0548 6.3125 27.1876 7.44096 27.1876 8.83298C27.1876 10.225 28.0548 11.3535 29.1246 11.3535Z" fill="#154133"/>
-      <path d="M9.64854 19.0192C10.7183 19.0192 11.5856 17.6503 11.5856 15.9617C11.5856 14.273 10.7183 12.9041 9.64854 12.9041C8.57873 12.9041 7.71149 14.273 7.71149 15.9617C7.71149 17.6503 8.57873 19.0192 9.64854 19.0192Z" fill="#F9C1D4"/>
-      <path d="M29.3515 19.0191C30.4213 19.0191 31.2886 17.6502 31.2886 15.9615C31.2886 14.2729 30.4213 12.904 29.3515 12.904C28.2817 12.904 27.4145 14.2729 27.4145 15.9615C27.4145 17.6502 28.2817 19.0191 29.3515 19.0191Z" fill="#F9C1D4"/>
-      <path d="M19.4999 17.8757C17.0451 17.8757 15.0483 16.0222 15.0483 13.744C15.0483 13.4017 15.3249 13.1245 15.6664 13.1245C16.0078 13.1245 16.2844 13.4017 16.2844 13.744C16.2844 15.3388 17.7268 16.6361 19.4993 16.6361C21.2719 16.6361 22.7142 15.3388 22.7142 13.744C22.7142 13.4017 22.9914 13.1245 23.3323 13.1245C23.6732 13.1245 23.9504 13.4017 23.9504 13.744C23.9504 16.0222 21.9536 17.8757 19.4988 17.8757H19.4999Z" fill="#154133"/>
-      </svg>
-      </button>
+    <button onclick="redirectToZupass()" class="cta">SCORE: 0 <svg xmlns="http://www.w3.org/2000/svg" width="33" height="25" viewBox="0 0 33 25" fill="none">
+      <path d="M30.0348 7.97566C30.0348 4.95142 27.5891 2.5 24.572 2.5C22.3829 2.5 20.5003 3.79354 19.6285 5.65661C18.6181 5.50163 17.564 5.4173 16.4788 5.4173C15.3937 5.4173 14.3673 5.49974 13.3687 5.65048C12.496 3.79072 10.6147 2.5 8.42799 2.5C5.41086 2.5 2.96519 4.95142 2.96519 7.97566C2.96519 9.09962 3.30403 10.144 3.88349 11.0131C3.35385 11.9312 3.06389 12.9233 3.06389 13.9587C3.06389 18.6759 9.06995 22.5 16.4784 22.5C23.8868 22.5 29.8929 18.6759 29.8929 13.9587C29.8929 12.9364 29.61 11.9566 29.093 11.0479C29.6866 10.1718 30.0343 9.11422 30.0343 7.97519L30.0348 7.97566Z" fill="#74DB61" stroke="white" stroke-width="5.00467"/>
+      <path d="M30.0348 7.97566C30.0348 4.95142 27.5891 2.5 24.572 2.5C22.3829 2.5 20.5003 3.79354 19.6285 5.65661C18.6181 5.50163 17.564 5.4173 16.4788 5.4173C15.3937 5.4173 14.3673 5.49974 13.3687 5.65048C12.496 3.79072 10.6147 2.5 8.42799 2.5C5.41086 2.5 2.96519 4.95142 2.96519 7.97566C2.96519 9.09962 3.30403 10.144 3.88349 11.0131C3.35385 11.9312 3.06389 12.9233 3.06389 13.9587C3.06389 18.6759 9.06995 22.5 16.4784 22.5C23.8868 22.5 29.8929 18.6759 29.8929 13.9587C29.8929 12.9364 29.61 11.9566 29.093 11.0479C29.6866 10.1718 30.0343 9.11422 30.0343 7.97519L30.0348 7.97566Z" fill="#74DB61" stroke="#154133" stroke-width="1.41669"/>
+      <path d="M8.47167 9.04127C9.36401 9.04127 10.0874 8.10001 10.0874 6.93891C10.0874 5.77781 9.36401 4.83655 8.47167 4.83655C7.57934 4.83655 6.85596 5.77781 6.85596 6.93891C6.85596 8.10001 7.57934 9.04127 8.47167 9.04127Z" fill="#154133"/>
+      <path d="M24.528 9.04133C25.4204 9.04133 26.1438 8.10007 26.1438 6.93897C26.1438 5.77787 25.4204 4.83661 24.528 4.83661C23.6357 4.83661 22.9123 5.77787 22.9123 6.93897C22.9123 8.10007 23.6357 9.04133 24.528 9.04133Z" fill="#154133"/>
+      <path d="M8.28279 15.4355C9.17512 15.4355 9.8985 14.2936 9.8985 12.8851C9.8985 11.4766 9.17512 10.3348 8.28279 10.3348C7.39045 10.3348 6.66707 11.4766 6.66707 12.8851C6.66707 14.2936 7.39045 15.4355 8.28279 15.4355Z" fill="#F9C1D4"/>
+      <path d="M24.7173 15.4353C25.6096 15.4353 26.333 14.2935 26.333 12.885C26.333 11.4765 25.6096 10.3347 24.7173 10.3347C23.8249 10.3347 23.1016 11.4765 23.1016 12.885C23.1016 14.2935 23.8249 15.4353 24.7173 15.4353Z" fill="#F9C1D4"/>
+      <path d="M16.4999 14.4816C14.4523 14.4816 12.7868 12.9356 12.7868 11.0353C12.7868 10.7498 13.0175 10.5186 13.3023 10.5186C13.5871 10.5186 13.8178 10.7498 13.8178 11.0353C13.8178 12.3656 15.0209 13.4476 16.4994 13.4476C17.9779 13.4476 19.181 12.3656 19.181 11.0353C19.181 10.7498 19.4122 10.5186 19.6966 10.5186C19.9809 10.5186 20.2121 10.7498 20.2121 11.0353C20.2121 12.9356 18.5466 14.4816 16.499 14.4816H16.4999Z" fill="#154133"/>
+    </svg>      </button>
 
       {{#tickets}}
       <div class="ticket">

From ac61f24835f021c1b0a76e31323d6aea57301f65 Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 8 Nov 2024 15:07:00 +0700
Subject: [PATCH 09/11] fix redirect

---
 .../resources/one-click-page/index.html             | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 6123f372dc..9d3fb0759c 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -500,7 +500,7 @@
         {{/isMoreThanOne}}
       </div>
     </div>
-    <button onclick="redirectToZupass()" class="cta">SCORE: 0 <svg xmlns="http://www.w3.org/2000/svg" width="33" height="25" viewBox="0 0 33 25" fill="none">
+    <button onclick="onFrogcryptoClick()" class="cta">SCORE: 0 <svg xmlns="http://www.w3.org/2000/svg" width="33" height="25" viewBox="0 0 33 25" fill="none">
       <path d="M30.0348 7.97566C30.0348 4.95142 27.5891 2.5 24.572 2.5C22.3829 2.5 20.5003 3.79354 19.6285 5.65661C18.6181 5.50163 17.564 5.4173 16.4788 5.4173C15.3937 5.4173 14.3673 5.49974 13.3687 5.65048C12.496 3.79072 10.6147 2.5 8.42799 2.5C5.41086 2.5 2.96519 4.95142 2.96519 7.97566C2.96519 9.09962 3.30403 10.144 3.88349 11.0131C3.35385 11.9312 3.06389 12.9233 3.06389 13.9587C3.06389 18.6759 9.06995 22.5 16.4784 22.5C23.8868 22.5 29.8929 18.6759 29.8929 13.9587C29.8929 12.9364 29.61 11.9566 29.093 11.0479C29.6866 10.1718 30.0343 9.11422 30.0343 7.97519L30.0348 7.97566Z" fill="#74DB61" stroke="white" stroke-width="5.00467"/>
       <path d="M30.0348 7.97566C30.0348 4.95142 27.5891 2.5 24.572 2.5C22.3829 2.5 20.5003 3.79354 19.6285 5.65661C18.6181 5.50163 17.564 5.4173 16.4788 5.4173C15.3937 5.4173 14.3673 5.49974 13.3687 5.65048C12.496 3.79072 10.6147 2.5 8.42799 2.5C5.41086 2.5 2.96519 4.95142 2.96519 7.97566C2.96519 9.09962 3.30403 10.144 3.88349 11.0131C3.35385 11.9312 3.06389 12.9233 3.06389 13.9587C3.06389 18.6759 9.06995 22.5 16.4784 22.5C23.8868 22.5 29.8929 18.6759 29.8929 13.9587C29.8929 12.9364 29.61 11.9566 29.093 11.0479C29.6866 10.1718 30.0343 9.11422 30.0343 7.97519L30.0348 7.97566Z" fill="#74DB61" stroke="#154133" stroke-width="1.41669"/>
       <path d="M8.47167 9.04127C9.36401 9.04127 10.0874 8.10001 10.0874 6.93891C10.0874 5.77781 9.36401 4.83655 8.47167 4.83655C7.57934 4.83655 6.85596 5.77781 6.85596 6.93891C6.85596 8.10001 7.57934 9.04127 8.47167 9.04127Z" fill="#154133"/>
@@ -655,6 +655,7 @@
     const path = window.location.pathname;
     const oneClickMatch = path.match(/\/one-click-preview.*/);
     const newPath = oneClickMatch ? oneClickMatch[0] : "";
+    const clientPath = joinPaths("{{{zupassUrl}}}", "#", newPath);
 
 
     // Once loaded we want to set the one click redirect link to local storage
@@ -683,11 +684,15 @@
       // Format the time string without spans
       return `${days}d:${hours}h:${minutes}m:${seconds}s`;
     }
-
+    
     function redirectToZupass() {
+      window.location.replace(clientPath);
+    }
+
+    function onFrogcryptoClick() {
       const maybeDate = Date.parse("{{startDate}}");
       if (isNaN(maybeDate) || maybeDate < Date.now()) {
-        window.location.replace(clientPath);
+        redirectToZupass()
       }
       else {
         timeLeftText.innerText = timeToStartDate();
@@ -700,8 +705,6 @@
       }
     }
 
-    const clientPath = joinPaths("{{{zupassUrl}}}", "#", newPath);
-
     for(const addonModal of addonsModals){
       addonModal.onclick = function (e) {
         e.stopPropagation();

From 70326cb52bc0f316be3abf593947ed6377c4a8ec Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 8 Nov 2024 15:14:44 +0700
Subject: [PATCH 10/11] prevent scrolling when modal is open

---
 .../resources/one-click-page/index.html       | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 9d3fb0759c..8769c6849a 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -696,8 +696,7 @@
       }
       else {
         timeLeftText.innerText = timeToStartDate();
-        overlay.classList.remove("modal__overlay--disabled");
-        timeModal.classList.remove("modal__container--hide");
+        openModal(timeModal);
 
         interval = setInterval(function () {
           timeLeftText.innerText = timeToStartDate();
@@ -717,19 +716,17 @@
 
 
     yesBtn.onclick = function () {
-      overlay.classList.add("modal__overlay--disabled");
+      closeModal(timeModal);
       for(const addonModal of addonsModals){
-        addonModal.classList.add("modal__container--hide");
+        closeModal(addonModal);
       }
-      timeModal.classList.add("modal__container--hide");
       clearInterval(interval);
     }
     overlay.onclick = function () {
-      overlay.classList.add("modal__overlay--disabled");
+      closeModal(timeModal);
       for(const addonModal of addonsModals){
-        addonModal.classList.add("modal__container--hide");
+        closeModal(addonModal);
       }
-     timeModal.classList.add("modal__container--hide");
       clearInterval(interval);
     }
 
@@ -739,8 +736,7 @@
       let swiper; // Declare swiper variable outside the function
 
       addonsBtn.onclick = function () {
-        overlay.classList.remove("modal__overlay--disabled");
-        addonsModal.classList.remove("modal__container--hide");
+        openModal(addonsModal);
 
         // Select the specific navigation buttons and index text within the modal
         const swiperContainer = addonsModal.querySelector(".swiper-container");
@@ -766,14 +762,29 @@
 
         // Close button functionality for the specific modal
         closeBtn.onclick = function () {
-          overlay.classList.add("modal__overlay--disabled");
-          addonsModal.classList.add("modal__container--hide");
+          closeModal(addonsModal);
           swiper.slideTo(0); // Reset swiper to the first slide
         };
       }
     }
 
+    function toggleBodyScroll(enable) {
+      document.body.style.overflow = enable ? 'auto' : 'hidden';
+    }
 
+    // When opening a modal
+    function openModal(modal) {
+      overlay.classList.remove("modal__overlay--disabled");
+      modal.classList.remove("modal__container--hide");
+      toggleBodyScroll(false); // Disable scrolling
+    }
+
+    // When closing a modal
+    function closeModal(modal) {
+      overlay.classList.add("modal__overlay--disabled");
+      modal.classList.add("modal__container--hide");
+      toggleBodyScroll(true); // Enable scrolling
+    }
 
   </script>
 </body>

From c874b0fc34ca951434b536a6b08ed0d838c83bf5 Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 8 Nov 2024 15:20:42 +0700
Subject: [PATCH 11/11] anti-aliasing

---
 apps/passport-server/resources/one-click-page/index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/passport-server/resources/one-click-page/index.html b/apps/passport-server/resources/one-click-page/index.html
index 8769c6849a..678c0bcecd 100644
--- a/apps/passport-server/resources/one-click-page/index.html
+++ b/apps/passport-server/resources/one-click-page/index.html
@@ -20,6 +20,8 @@
     font: inherit;
     vertical-align: baseline;
     box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   html {