Update alert again

NhanAZ · Jul 15, 2024 · 3f85838 · 3f85838
1 parent 03eb3f8
commit 3f85838
Showing 1 changed file with 57 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -180,15 +180,69 @@
         #responsiveAlert {
             animation: fadeIn 0.5s ease-out;
         }
+
+        #contributionAlert {
+            background-color: rgba(0, 123, 255, 0.1);
+            border: 1px solid rgba(0, 123, 255, 0.2);
+            color: #0056b3;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        #contributionAlert:hover {
+            background-color: rgba(0, 123, 255, 0.15);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        #contributionAlert .alert-link {
+            color: #004085;
+            font-weight: 600;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        #contributionAlert .github-link {
+            text-decoration: underline;
+        }
+
+        #contributionAlert .alert-link:hover {
+            color: #0056b3;
+        }
+
+        #contributionAlert svg {
+            color: #0056b3;
+        }
+
+        @media (min-width: 768px) {
+            #responsiveAlert {
+                display: none !important;
+            }
+        }
     </style>
 </head>
 
 <body>
     <div class="container">
-        <div id="responsiveAlert" class="alert alert-warning alert-dismissible fade show" role="alert">
+        <div id="contributionAlert" class="alert alert-info d-flex align-items-center" role="alert">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github me-2"
+                viewBox="0 0 16 16">
+                <path
+                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+            <div>
+                <strong>Contribute to Glyph Tools:</strong>
+                Help improve this project!
+                <a href="https://github.com/NhanAZ/glyph" target="_blank" class="alert-link github-link">
+                    Visit our GitHub repository
+                </a>
+                to contribute code, report issues, or suggest new features.
+            </div>
+        </div>
+        <div id="responsiveAlert" class="alert alert-warning alert-dismissible fade show d-block d-md-none"
+            role="alert">
             <strong>Note:</strong> This website is optimized for larger screens. Mobile experience may be limited.
-            <a href="https://github.com/NhanAZ/glyph" target="_blank" class="alert-link">Click here to contribute to the
-                project on Github</a>
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
 
@@ -306,12 +360,8 @@ <h3 class="text-center mb-0">Generated Glyph</h3>
             const glyphInput = document.getElementById('glyph-input').value || "E0";
             Glyph(glyphInput);
 
-            // Display success message
             const glyphSuccessMsg = document.getElementById('glyphSuccessMsg');
             glyphSuccessMsg.textContent = 'Glyph generated successfully!';
-            setTimeout(() => {
-                glyphSuccessMsg.textContent = '';
-            }, 3000);
         });
 
         let isHexToEmoji = true;