lyraxis-notification 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/assets/sound.mp3 +0 -0
  2. package/index.html +34 -0
  3. package/package.json +11 -0
  4. package/script.js +1010 -0
  5. package/style.css +915 -0
  6. package/test.html +216 -0
package/test.html ADDED
@@ -0,0 +1,216 @@
1
+ <!DOCTYPE html>
2
+ <html lang="id">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Lyraxis Test</title>
7
+ <link rel="stylesheet" href="style.css" type="text/css" media="all" />
8
+ </head>
9
+
10
+ <body class="lynDar">
11
+
12
+ <div class="buttons">
13
+ <button onclick="tes()">Log</button>
14
+ <button onclick="tes2()">Info</button>
15
+ <button onclick="tes3()">Confirm</button>
16
+ <button onclick="tes4()">Prompt</button>
17
+ <button onclick="tes5()">Toast</button>
18
+ <button onclick="tes7()">Dynamic Island</button>
19
+ </div>
20
+
21
+ <script src="./script.js"></script>
22
+
23
+ <script>
24
+
25
+ lyn.soundNotification("allow");
26
+
27
+ function tes() {
28
+ lyn.log({
29
+ Status: "err",
30
+ Mess: "Berhasil mengirim riquest mohon tunggu sebentar."
31
+ });
32
+ }
33
+
34
+ function tes2() {
35
+ lyn.info({
36
+ Mess: "Teks",
37
+ title: "Coba"
38
+ });
39
+ }
40
+
41
+ function tes3() {
42
+ lyn.confirm({
43
+ Mess: "Yakin ingin melanjutkan?",
44
+ Event: function() {
45
+ lyn.info({
46
+ Mess: "Telah diklik"
47
+ });
48
+ }
49
+ });
50
+ }
51
+
52
+ async function tes4() {
53
+ try {
54
+ const a = await lyn.prompt({
55
+ Mess: "Masukkan nomor:",
56
+ Type: "num"
57
+ });
58
+
59
+ lyn.log({
60
+ Mess: a >= 50
61
+ ? "Nilai lebih dari 50."
62
+ : "Nilai untuk Pak Prabowo: 11/100."
63
+ });
64
+ } catch (err) {
65
+ lyn.log({
66
+ Mess: "User membatalkan prompt",
67
+ Status: "er"
68
+ });
69
+ }
70
+ }
71
+
72
+ function tes5() {
73
+ lyn.toast({
74
+ Title: "Pemberitahuan",
75
+ Mess: "Ini toast biasa, hilang 5 detik",
76
+ Status: "default"
77
+ });
78
+
79
+ lyn.toast({
80
+ Title: "Berhasil!",
81
+ Mess: "Data berhasil disimpan ke database.",
82
+ Status: "success"
83
+ });
84
+
85
+ lyn.toast({
86
+ Title: "Gagal Menyimpan",
87
+ Mess: "Koneksi terputus.",
88
+ Status: "error",
89
+ Permanent: true
90
+ });
91
+ }
92
+
93
+ function tes7() {
94
+ // Default
95
+ lyn.dynamicIsland({
96
+ Status: "default",
97
+ Mess: "File pertama selesai",
98
+ Label: "info"
99
+ });
100
+
101
+ // Success
102
+ lyn.dynamicIsland({
103
+ Status: "success",
104
+ Mess: "File berhasil disimpan",
105
+ Label: "download"
106
+ });
107
+
108
+ // Warning
109
+ lyn.dynamicIsland({
110
+ Status: "warning",
111
+ Mess: "Koneksi agak lambat",
112
+ Label: "warning"
113
+ });
114
+
115
+ // Failed / Error
116
+ lyn.dynamicIsland({
117
+ Status: "failed",
118
+ Mess: "Gagal menghubungkan server",
119
+ Label: "error"
120
+ });
121
+
122
+ // Active
123
+ lyn.dynamicIsland({
124
+ Status: "active",
125
+ Mess: "Memutar musik",
126
+ Label: "music"
127
+ });
128
+
129
+ // Wait
130
+ lyn.dynamicIsland({
131
+ Status: "active",
132
+ Mess: "Sedang memproses...",
133
+ Label: "wait"
134
+ });
135
+
136
+ // Notification
137
+ lyn.dynamicIsland({
138
+ Status: "default",
139
+ Mess: "Ada notifikasi baru",
140
+ Label: "notification"
141
+ });
142
+
143
+ // Custom icon
144
+ lyn.dynamicIsland({
145
+ Status: "active",
146
+ Mess: "Custom icon berhasil",
147
+ Label: "custom",
148
+ Icon: `
149
+ <svg viewBox="0 0 24 24">
150
+ <path d="M12 2 14.8 8.2 21 11l-6.2 2.8L12 20l-2.8-6.2L3 11l6.2-2.8L12 2Z"/>
151
+ </svg>
152
+ `
153
+ });
154
+
155
+ // Custom icon + custom animation
156
+ lyn.dynamicIsland({
157
+ Status: "warning",
158
+ Mess: "Custom animation",
159
+ Label: "custom",
160
+ Icon: `
161
+ <svg viewBox="0 0 24 24">
162
+ <path d="M12 2 2 22h20L12 2Zm0 6 5 10H7l5-10Zm-1 3v4h2v-4h-2Zm0 5v2h2v-2h-2Z"/>
163
+ </svg>
164
+ `,
165
+ Animation: "shake"
166
+ });
167
+ }
168
+
169
+
170
+
171
+
172
+ </script>
173
+
174
+ <style>
175
+ * {
176
+ box-sizing: border-box;
177
+ }
178
+
179
+ body {
180
+ margin: 0;
181
+ padding: 15px;
182
+ background: #16191f;
183
+ font-family: Arial, sans-serif;
184
+ }
185
+
186
+ .buttons {
187
+ display: flex;
188
+ flex-wrap: wrap;
189
+ gap: 8px;
190
+ }
191
+
192
+ button {
193
+ padding: 9px 15px;
194
+ border: 1px solid #30353e;
195
+ border-radius: 7px;
196
+ background: #20242c;
197
+ color: #c9ced8;
198
+ font-size: 14px;
199
+ font-weight: 600;
200
+ cursor: pointer;
201
+ transition: .15s;
202
+ }
203
+
204
+ button:hover {
205
+ border-color: #23a982;
206
+ background: #252b33;
207
+ color: #d8eee7;
208
+ }
209
+
210
+ button:active {
211
+ transform: scale(.97);
212
+ }
213
+ </style>
214
+
215
+ </body>
216
+ </html>