style: Improve UI styling and add ASCII art logo. Added warning note …

…button.
mehmetkahya0 · Aug 28, 2024 · 5677d41 · 5677d41
1 parent 6206f82
commit 5677d41
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 66 deletions.
diff --git a/api.js b/api.js
@@ -1,40 +1,57 @@
 // Author: Mehmet Kahya
 // Created: 17 March 2024
-// Last Updated: 5.05.2024
+// Last Updated: 28.08.2024
+
+console.log(`
+  ████████╗███████╗███╗   ███╗██████╗     ███╗   ███╗ █████╗ ██╗██╗     
+  ╚══██╔══╝██╔════╝████╗ ████║██╔══██╗    ████╗ ████║██╔══██╗██║██║     
+     ██║   █████╗  ██╔████╔██║██████╔╝    ██╔████╔██║███████║██║██║     
+     ██║   ██╔══╝  ██║╚██╔╝██║██╔═══╝     ██║╚██╔╝██║██╔══██║██║██║     
+     ██║   ███████╗██║ ╚═╝ ██║██║         ██║ ╚═╝ ██║██║  ██║██║███████╗
+     ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝         ╚═╝     ╚═╝╚═╝  ╚═╝╚═╝╚══════╝
+  `);
+
+console.log("API is ready!");
+
+function warningAlert() {
+  alert(
+    "⚠️ This project is purely for educational purposes. We do not allow illegal things to be done with this project and we are not responsible for any incidents that may occur. Use it legally ⚠️"
+  );
+}
 
 function getUserAndDomain() {
-    const addr = $("#addr").val();
-    if (!addr) {
-      alert("Please generate or input an email address first!");
-      return null;
-    }
-
-    const [user, domain] = addr.split("@");
-    return { user, domain };
+  const addr = $("#addr").val();
+  if (!addr) {
+    alert("Please generate or input an email address first!");
+    return null;
   }
-
-  function genEmail() {
-    $.getJSON(
-      "https://www.1secmail.com/api/v1/?action=genRandomMailbox&count=1",
-      (res) => {
-        $("#addr").val(res[0]);
-        refreshMail();
-      }
-    );
-  }
-
-  function refreshMail() {
-    const { user, domain } = getUserAndDomain();
-
-    if (!user || !domain) return;
-
-    $.getJSON(
-      `https://www.1secmail.com/api/v1/?action=getMessages&login=${user}&domain=${domain}`,
-      (emails) => {
-        const emailsElement = $("#emails");
-        emailsElement.empty();
-
-        emailsElement.append(`
+
+  const [user, domain] = addr.split("@");
+  return { user, domain };
+}
+
+function genEmail() {
+  $.getJSON(
+    "https://www.1secmail.com/api/v1/?action=genRandomMailbox&count=1",
+    (res) => {
+      $("#addr").val(res[0]);
+      refreshMail();
+    }
+  );
+}
+
+function refreshMail() {
+  const { user, domain } = getUserAndDomain();
+
+  if (!user || !domain) return;
+
+  $.getJSON(
+    `https://www.1secmail.com/api/v1/?action=getMessages&login=${user}&domain=${domain}`,
+    (emails) => {
+      const emailsElement = $("#emails");
+      emailsElement.empty();
+
+      emailsElement.append(`
           <tr>
             <th><b>ID</b></th>
             <th><b>From</b></th>
@@ -43,9 +60,9 @@ function getUserAndDomain() {
             <th><b>Content</b></th>
           </tr>
         `);
-  
-        for (const email of emails) {
-          emailsElement.append(`
+
+      for (const email of emails) {
+        emailsElement.append(`
             <tr>
               <td>${email.id}</td>
               <td>${email.from}</td>
@@ -54,34 +71,34 @@ function getUserAndDomain() {
               <td id="${email.id}"><a onclick="loadEmail('${email.id}')">Load content...</a></td>
             </tr>
           `);
-        }
       }
-    );
-  }
-  function loadEmail(id) {
-    const { user, domain } = getUserAndDomain();
-
-    if (!user || !domain) return;
-
-    $.getJSON(
-      `https://www.1secmail.com/api/v1/?action=readMessage&login=${user}&domain=${domain}&id=${id}`,
-      (email) => {
-        const elm = $(`#${id}`);
-        if (email.htmlBody) {
-          elm.html(email.htmlBody);
-        } else {
-          elm.text(email.body);
-        }
-
-        const atts = $("<div></div>");
-        for (const file of email.attachments) {
-          atts.append(
-            `<a href='https://www.1secmail.com/api/v1/?action=download&login=${user}&domain=${domain}&id=${id}&file=${file.filename}'>${file.filename}</a>`
-          );
-        }
-        elm.append(atts);
+    }
+  );
+}
+function loadEmail(id) {
+  const { user, domain } = getUserAndDomain();
+
+  if (!user || !domain) return;
+
+  $.getJSON(
+    `https://www.1secmail.com/api/v1/?action=readMessage&login=${user}&domain=${domain}&id=${id}`,
+    (email) => {
+      const elm = $(`#${id}`);
+      if (email.htmlBody) {
+        elm.html(email.htmlBody);
+      } else {
+        elm.text(email.body);
       }
-    );
-  }
-
-  $(genEmail);
+
+      const atts = $("<div></div>");
+      for (const file of email.attachments) {
+        atts.append(
+          `<a href='https://www.1secmail.com/api/v1/?action=download&login=${user}&domain=${domain}&id=${id}&file=${file.filename}'>${file.filename}</a>`
+        );
+      }
+      elm.append(atts);
+    }
+  );
+}
+
+$(genEmail);
diff --git a/index.html b/index.html
@@ -17,7 +17,11 @@
       href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
     />
     <script src="api.js"></script>
-    <script id="_wauact">var _wau = _wau || []; _wau.push(["", "891ylz89z8", "", "c4302bffffff", ""]);</script><script async src="//waust.at/d.js"></script>
+    <script id="_wauact">
+      var _wau = _wau || [];
+      _wau.push(["", "891ylz89z8", "", "c4302bffffff", ""]);
+    </script>
+    <script async src="//waust.at/d.js"></script>
     <!-- Add favicon -->
     <link rel="icon" href="images/temp-mail-icon.png" type="image/x-icon" />
   </head>
@@ -51,7 +55,9 @@
           for any incidents that may occur. Use it legally ⚠️
         </p>
 
-        <p class="main" style="font-size: 0.75rem !important;">&copy; 2024 Mehmet Kahya - TempMail</p>
+        <p class="main" style="font-size: 0.75rem !important">
+          &copy; 2024 Mehmet Kahya - TempMail
+        </p>
       </div>
     </div>
     <div class="horizontalContainer">
@@ -71,6 +77,8 @@
           ><i class="fab fa-github"></i
         ></a>
       </div>
+
+      <button class="warning-button" onclick="warningAlert()">⚠️ Warning Note ⚠️</button>
     </footer>
 
     <script src="//code.jquery.com/jquery.min.js"></script>

diff --git a/style.css b/style.css
@@ -226,6 +226,23 @@ footer {
   color: rgb(214, 227, 243);
 }
 
+.warning-button {
+  display: flex !important;
+  position: absolute;
+  bottom: 0 !important;
+  left: 0 !important;
+  font-size: 0.5rem;
+  padding: 0.5rem;
+  margin: 0.75rem !important;
+}
+
+.warning-button:hover {
+  background-color: var(--danger-color);
+  color: var(--light-color);
+  cursor: pointer;
+}
+
+
 @media (max-width: 768px) {
   button {
     font-size: 0.5rem;