notification-center/index.html at main · Open-Core-Lab/notification-center · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notification Center</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body>
  <button class="bg-green-500 p-3 border-1 border-gray outline-none text-white cursor-pointer"
    onclick="showSuccessAlert()">
    Show Success Notification
  </button>

  <button class="bg-sky-500 p-3 border-1 border-gray outline-none text-white cursor-pointer"
    onclick="showSuccessAlertDialog()">
    Show Success Dialog Notification
  </button>

  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script>
    function showSuccessAlert(){
      notify.success(
        {
          title: 'Success',
          text: 'This is a success message',
          toast: true,
          <!-- class: "bg-blue-800", -->
          alertWidth: 'lg:w-100 sm:w-80 md:w-80',
          position: 'top-3 right-3',
          duration: 5000,
        }
      )
    }

    function showSuccessAlertDialog() {
      dialog
        .show({
          title: "Success",
          text: "This is a success message",
          duration: 3000,
          textColor: "sky",
          titleColor: "green",
          showConfirmButton: true,
          showCancelButton: true,
          confirmButtonText: "Ok",
          cancelButtonText: "Cancel",
          confirmButtonColor: "green",
        })
        .then((result) => {
          if (result) {
            console.log("User clicked OK!");
          } else {
            console.log("User clicked Cancel!");
          }
        });
    }
  </script>
</body>

</html>