Update README.md

README.md

@@ -78,25 +78,40 @@ language:
             float: right; /* Keep it to the right */
         }
       .button {
-            display: inline-block;
-            background-image: linear-gradient(145deg, #F96167 0%, #F0F2D7 100%);
-            color: #F0F0F0;
-            padding: 16px 24px; /* Increased padding for bigger buttons */
-            border: none;
-            border-radius: 10px;
-            cursor: pointer;
-            text-decoration: none;
-            margin-left: 7%;
-            transition: transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease; /* Updated transition */
-            /* Added for a more sophisticated look */
-            font-weight: bold; /* Make the text bold */
-            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
+          display: inline-block;
+          background-image: linear-gradient(145deg, #F96167 0%, #F0F2D7 100%);
+          color: #F0F0F0;
+          padding: 16px 24px; /* Increased padding for bigger buttons */
+          border: none;
+          border-radius: 10px;
+          cursor: pointer;
+          text-decoration: none;
+          margin-left: 7%;
+          transition: transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease, color 0.3s ease, border-radius 0.3s ease; /* Enhanced transitions */
+          font-weight: bold; /* Make the text bold */
+          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
+      }
+      .button:hover {
+          background-image: linear-gradient(145deg, #FB1A3E 0%, #F38555 100%); /* Vibrant to light pink gradient */
+          transform: scale(1.1); /* Increase size for more emphasis */
+          box-shadow: 0 10px 30px rgba(249, 97, 103, 0.8); /* More pronounced glowing effect */
+          color: #FFFFFF; /* Brighten the text color slightly */
+          border-radius: 15px; /* Soften the corners a bit more for a pill-like effect */
+      }
+      @keyframes pulse {
+        0% {
+            transform: scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: scale(1.05);
+            opacity: 0.85;
         }
-        .button:hover {
-            background-image: linear-gradient(145deg, #FB1A3E 0%, #F38555 100%); /* Vibrant to light pink gradient */
-            transform: scale(1.07); /* Slightly increase size for emphasis */
-            box-shadow: 0 5px 25px rgba(249, 97, 103, 0.75); /* Adjusted glowing effect to match the button color */
+        100% {
+            transform: scale(1);
+            opacity: 1;
         }
+    }
     </style>
 
 </head>
@@ -105,7 +120,7 @@ language:
         <div class="header">
             <div class="info" style="margin-top: 5px;">
             <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/PieKyxOEVyn0zrrNqVec_.webp" alt="Image">
-                <h1 style="margin: 10px">HamSter 0.2</h1>
+                <h1 class="product-name" style="margin: 10px">HamSter 0.2</h1>
                 <p>
                     👋 Uncensored fine tune model roleplay focused of "mistralai/Mistral-7B-v0.2" with the help of my team <a href="https://huggingface.co/ConvexAI" target="_blank">ConvexAI.</a><br><br>
                     🚀 For optimal performance, I recommend using a detailed character card! (There is NSFW chub.ai) Check out <a href="https://chub.ai" target="_blank">Chub.ai</a> for some character cards.<br><br>
@@ -141,16 +156,18 @@ language:
         <p>More details: <a href="https://huggingface.co/datasets/open-llm-leaderboard/details_PotatoOff__HamSter-0.2" target="_blank">HamSter-0.2 OpenLLM BenchMarks</a></p>
       </div>
     </div>
-    <div style="overflow: hidden; position: relative;">
-      <div class="info" style="overflow: hidden; margin-top: 20px;">
-          <h2 style="margin-top: 0;">BenchMarks on Ayumi's LLM Role Play & ERP Ranking</h2>
-          <a href="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/NSUmxUmDyhO9tJb-NZd8m.png" target="_blank">
-            <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/NSUmxUmDyhO9tJb-NZd8m.png" alt="Ayumi's LLM Role Play & ERP Ranking" class="info-img">
-          </a>    
-          <p>More details: <a href="http://ayumi.m8geil.de/results_v3/model_resp_DL_20240114_7B-Q6_K_HamSter_0.2.html">Ayumi's LLM RolePlay & ERP Rankin HamSter-0.2 GGUF version Q6_K</a></p>
-        </div>
-    </div>
-    <h2 style="color: #E2E8F0; margin-bottom: 20px;">Have Fun :)</h2>
+<div style="overflow: hidden; position: relative;">
+  <div class="info" style="overflow: hidden; margin-top: 20px;">
+    <h2 style="margin-top: 0;">BenchMarks on Ayumi's LLM Role Play & ERP Ranking</h2>
+    <a href="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/NSUmxUmDyhO9tJb-NZd8m.png" target="_blank">
+      <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/NSUmxUmDyhO9tJb-NZd8m.png" alt="Ayumi's LLM Role Play & ERP Ranking" class="info-img" style="width: 100%; height: auto;">
+    </a>
+    <p>More details: <a href="http://ayumi.m8geil.de/results_v3/model_resp_DL_20240114_7B-Q6_K_HamSter_0.2.html">Ayumi's LLM RolePlay & ERP Rankin HamSter-0.2 GGUF version Q6_K</a></p>
+  </div>
+</div>
+    <h2 style="color: #E2E8F0; margin-bottom: 20px; font-family: 'Arial', sans-serif; font-weight: bold; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); animation: pulse 2s infinite; font-size: 17px;">
+    Have Fun :)
+    </h2>
 </div>
 </body>
 </html>