From 14bfe1f4794da27090b4aeb638202a2cefc12a38 Mon Sep 17 00:00:00 2001
From: Mikeumus <mikeumus@proton.me>
Date: Tue, 19 Mar 2024 23:45:12 -0700
Subject: [PATCH] animating circles

---
 index.html |  30 +++++++------
 styles.css | 123 ++++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 101 insertions(+), 52 deletions(-)

diff --git a/index.html b/index.html
index 510b16f..022d69a 100644
--- a/index.html
+++ b/index.html
@@ -23,18 +23,24 @@
   <!-- Your first section here -->
   <div class="correlated">
     <div class="container">
-        <div class="circle"></div>
-        <div class="satisfaction">
-        <div>
+      <div class="circle">
+        <div class="satisfaction-wrapper patient-wrapper">
+          <div class="satisfaction patient-satisfaction">
             <span class="emoji patient-emoji">👩🏻‍💼</span>
-            <!-- Patient <br class="mobile-only"/> Satisfaction -->
-            Patient Satisfaction
+            Patient 
+            <br/>
+            Satisfaction
+          </div>
         </div>
-        <div>
+        <div class="satisfaction-wrapper physician-wrapper">
+          <div class="satisfaction physician-satisfaction">
             <span class="emoji">👨🏾‍⚕️</span>
-            Physician Satisfaction
-        </div>
+            Physician
+            <br/>
+            Satisfaction
+          </div>
         </div>
+      </div>             
         <div class="caption">
             <span class="grey"> The two are directly correlated. </span>
         </div>
@@ -47,7 +53,7 @@
   <!-- The second section starts here -->
   <div class="patient-container quote-container">
     <img class="patient-image" src="images/ani-kolleshi-vu-DaZVeny0-unsplash.jpg" alt="female white patient blue darting eyes blond hair">
-    <div class="unsplash-patient"> 
+    <div class="unsplash-patient mobile-hide max-900-hide"> 
         Photo by <a href="https://unsplash.com/@anikolleshi?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ani Kolleshi</a> on <a href="https://unsplash.com/photos/closeup-photo-of-womans-eye-wearing-mask-vu-DaZVeny0?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
     </div>
     <div class="text-content">
@@ -136,7 +142,7 @@ <h2>We're training a family of Medical Language Models</h2>
 </div>  
 
 <br/><br/><br/><br/><br/>
-<hr/>
+<hr style="width: 65%; background-color: #9c9c9c;"/>
 <br/><br/><br/><br/><br/>
 
 <div id="mc_embed_shell">
@@ -171,7 +177,7 @@ <h2>We're training a family of Medical Language Models</h2>
 <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>
 
 <br/><br/><br/><br/><br/>
-<hr/>
+<hr style="width: 50%; background-color: #b6b6b6;"/>
 <br/><br/><br/><br/><br/>
 
 <!-- Footer starts here -->
@@ -182,8 +188,6 @@ <h2>We're training a family of Medical Language Models</h2>
     </div>
   </footer>
   <!-- Footer ends here -->
-  
-
 </div>
 
 <script>
diff --git a/styles.css b/styles.css
index d97f68c..c04eb8f 100644
--- a/styles.css
+++ b/styles.css
@@ -5,7 +5,6 @@ body {
     font-family: 'Montserrat', sans-serif;
     justify-content: center;
     align-items: center;
-    width: 100vw;
     margin: 0;
     overflow-x: clip;
   }
@@ -25,13 +24,52 @@ body {
     text-align: center;
     margin-top: 275px;  
   }
+  /* Define the rotation keyframes */
+  @keyframes rotate-around-circle {
+    from {
+      transform: rotate(0deg) translate(-50%, -50%);
+    }
+    to {
+      transform: rotate(360deg) translate(-50%, -50%);
+    }
+  }
+  /* Position the wrappers absolutely around the circle */
+  .satisfaction-wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Center the wrapper on the circle */
+    width: 245px;
+    height: 245px;
+  }
+  /* Initial positioning of satisfaction blocks */
+  .patient-wrapper {
+    transform-origin: bottom;
+    animation: rotate-patient 20s linear infinite; /* Adjust time as needed */
+  }
+
+  .physician-wrapper {
+    transform-origin: top;
+    animation: rotate-physician 20s linear infinite; /* Adjust time as needed */
+  }
+
+  /* Keyframes for rotation */
+  @keyframes rotate-patient {
+    0% { transform: translate(-50%, -100%) rotate(0deg); }
+    100% { transform: translate(-50%, -100%) rotate(360deg); }
+  }
+
+  @keyframes rotate-physician {
+    0% { transform: translate(-50%, 0%) rotate(0deg); }
+    100% { transform: translate(-50%, 0%) rotate(-360deg); }
+  }
   .correlated {
     height: 404px;
     width: 100%;
     display: block;
   }
   .circle {
-    position: absolute;
+    position: relative;
     width: 400px; /* Adjust size as needed */
     height: 400px; /* Adjust size as needed */
     background-color: transparent;
@@ -42,34 +80,47 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  .infinity-symbol {
+    font-size: 62px;
+    line-height: 1px;
+  }
   .satisfaction {
-    position: relative;
-    display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 32px;
-    background-color: white; /* Make the text color white */
-    z-index: 1;
+    position: absolute;
+    background-color: #fbfbfb;
+    border-radius: 50%;
+    transform-origin: center;
+    background-color: white;
+    padding: 21px;
   }
   .satisfaction > div {
-    margin: 0px -15px 0px 22px;
+    margin: 0px 28px;
   }
-  .satisfaction > div:not(:last-child):after {
-    content: '∞';
-    font-size: 75px;
-    line-height: 0;
-    margin-left: 20px;
-    vertical-align: middle;
-    background-color: white; /* Make the infinity symbol color white */
+  .patient-satisfaction {
+    top: -20px; /* Adjust this value based on the size of the circle */
+    animation: counter-rotate 20s linear infinite;
+  }
+  
+  .physician-satisfaction {
+    bottom: -20px; /* Adjust this value based on the size of the circle */
+    animation: counter-rotate-physician 20s linear infinite;
+  }
+  
+  /* Counter rotate the blocks */
+  @keyframes counter-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(-360deg); }
+  }
+  
+  @keyframes counter-rotate-physician {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
   .emoji {
     font-size: 50px;
     line-height: 1;
     display: block;
-    margin-bottom: 10px;
-  }
-  .patient-emoji { 
-    margin: 0 0 0 -120px;
   }
   .caption {
     margin-top: 20px;
@@ -109,10 +160,6 @@ body {
   .content {
     padding-top: 60px; /* Make space for fixed header */
   }
-  .circle-section {
-    /* Your circle section styles here */
-    /* Make sure you adjust any top/bottom margins or padding as necessary */
-  }
   .quote-container {
     display: flex;
     align-items: center;
@@ -126,8 +173,6 @@ body {
     background-color: #cccccc; /* Placeholder color */
     margin-right: 20px;
   }
-  .text-content {
-  }
   .quote1 {
     padding: 22px 0 0 75px;
     max-width: 785px;
@@ -182,10 +227,10 @@ body {
   }
   .unsplash-patient { 
     position: absolute;
-    top: 395px;
+    top: 406px;
     z-index: 1;
     color: grey;
-    left: 520px;
+    left: 535px;
     font-size: 11px;
 
     a {
@@ -233,7 +278,6 @@ body {
 
 .section {
     text-align: center;
-    margin-top: 40px; /* Adjust as needed for spacing between sections */
     padding: 20px;
     background-color: #ffffff; /* Assuming white background for the quote section */
   }
@@ -251,7 +295,7 @@ body {
 
 .branding {
     text-align: center;
-    margin-top: 40px; /* Adjust as needed for spacing */
+    margin: 0 0 35px 0;
   }
   
   .with-galvani-logo {
@@ -444,6 +488,14 @@ body {
   }
 
 /* Mobile styles */
+@media screen and (max-width: 900px) {
+  .patient-container, .quote-container {
+    flex-direction: column;
+  }
+  .max-900-hide {
+    display: none;
+  }
+}
 @media (max-width: 768px) {
   .nav-header {
     height: auto;
@@ -468,20 +520,18 @@ body {
   }
 
   .satisfaction > div {
-    /* font-size: 20px; */
-    margin: 0px -15px 0px auto;
+    margin: 0px -25px 0px 158px;
+    background-color: white;
   }
   .satisfaction {
     font-size: 22px;
     width: 377px;
   }
   .satisfaction > div:not(:last-child):after {
+    display: none;
     content: "";
     font-size: 42px;
   }
-  .patient-emoji {
-    margin: 0 0 0 -27px;
-  }
 
   .quote2 {
     font-size: 33px;
@@ -510,11 +560,6 @@ body {
     display: none;
   }
 
-  .patient-container, .quote-container {
-    flex-direction: column;
-    text-align: center;
-  }
-
   .patient-image {
     width: 100%;
     height: auto;