Manual changes saved

index.html

@@ -11,34 +11,28 @@
 
 <main id="main" class="w-full">
   <!-- Alert Messages -->
-  <div id="fail_email" class="hidden fixed top-6 right-6 max-w-md w-full bg-white border border-red-200 rounded-lg shadow-xl z-50 overflow-hidden">
-    <div class="flex bg-red-50 px-4 py-2">
-      <div class="flex items-center">
-        <i data-feather="alert-triangle" class="w-5 h-5 text-red-600 mr-2"></i>
-        <span class="font-medium text-red-800">Error</span>
+  <div id="fail_email" class="hidden fixed top-4 right-4 max-w-md bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-lg z-50">
+    <div class="flex items-center">
+      <i data-feather="alert-triangle" class="w-5 h-5 mr-2"></i>
+      <div class="flex-1">
+        Could not send an email! Please try again later.
       </div>
-      <button onclick="removeQuery()" class="ml-auto text-red-500 hover:text-red-700 focus:outline-none">
-        <i data-feather="x" class="w-4 h-4"></i>
+      <button onclick="removeQuery()" class="ml-4 text-red-700 hover:text-red-900">
+        <i data-feather="x" class="w-5 h-5"></i>
       </button>
     </div>
-    <div class="p-4 text-red-700">
-      <p>Could not send an email! Please try again later.</p>
-    </div>
   </div>
 
-  <div id="success_email" class="hidden fixed top-6 right-6 max-w-md w-full bg-white border border-green-200 rounded-lg shadow-xl z-50 overflow-hidden">
-    <div class="flex bg-green-50 px-4 py-2">
-      <div class="flex items-center">
-        <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-2"></i>
-        <span class="font-medium text-green-800">Success</span>
+  <div id="success_email" class="hidden fixed top-4 right-4 max-w-md bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-lg z-50">
+    <div class="flex items-center">
+      <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>
+      <div class="flex-1">
+        We have sent you an email. Please check your inbox. If you cannot view it in your primary inbox, please check your Spam or Junk folder.
       </div>
-      <button onclick="removeQuery()" class="ml-auto text-green-500 hover:text-green-700 focus:outline-none">
-        <i data-feather="x" class="w-4 h-4"></i>
+      <button onclick="removeQuery()" class="ml-4 text-green-700 hover:text-green-900">
+        <i data-feather="x" class="w-5 h-5"></i>
       </button>
     </div>
-    <div class="p-4 text-green-700">
-      <p>We have sent you an email. Please check your inbox. If you can't find it in your primary inbox, please check your Spam or Junk folder.</p>
-    </div>
   </div>
 <!---Twitter Card data -->
     <meta name="twitter:card" content="summary_large_image">