@mks2508/better-logger 5.0.1 → 5.0.2

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 (310) hide show
  1. package/dist/Logger.d.ts +976 -0
  2. package/dist/Logger.d.ts.map +1 -0
  3. package/dist/ScopedLogger.d.ts +74 -0
  4. package/dist/ScopedLogger.d.ts.map +1 -0
  5. package/dist/chunks/Logger-CKqzXDh3.js +2 -0
  6. package/dist/chunks/Logger-CKqzXDh3.js.map +1 -0
  7. package/dist/chunks/Logger-D_vuKP4l.js +4511 -0
  8. package/dist/chunks/Logger-D_vuKP4l.js.map +1 -0
  9. package/dist/chunks/RemoteLogHandler-CjWpWZGl.js +33 -0
  10. package/dist/chunks/RemoteLogHandler-CjWpWZGl.js.map +1 -0
  11. package/dist/chunks/RemoteLogHandler-ymkQ97xl.js +2 -0
  12. package/dist/chunks/RemoteLogHandler-ymkQ97xl.js.map +1 -0
  13. package/dist/chunks/cli-module-B-njrTWb.js +2 -0
  14. package/dist/chunks/cli-module-B-njrTWb.js.map +1 -0
  15. package/dist/chunks/cli-module-Cx7qotPY.js +390 -0
  16. package/dist/chunks/cli-module-Cx7qotPY.js.map +1 -0
  17. package/dist/chunks/color-converter-CCSQRztd.js +2 -0
  18. package/dist/chunks/color-converter-CCSQRztd.js.map +1 -0
  19. package/dist/chunks/color-converter-_Xdmsy7E.js +462 -0
  20. package/dist/chunks/color-converter-_Xdmsy7E.js.map +1 -0
  21. package/dist/chunks/environment-C1xxvc8l.js +1127 -0
  22. package/dist/chunks/environment-C1xxvc8l.js.map +1 -0
  23. package/dist/chunks/environment-Cprkw3g9.js +4 -0
  24. package/dist/chunks/environment-Cprkw3g9.js.map +1 -0
  25. package/dist/chunks/formatting-DMJxYq9o.js +380 -0
  26. package/dist/chunks/formatting-DMJxYq9o.js.map +1 -0
  27. package/dist/chunks/formatting-DpKxCsXq.js +2 -0
  28. package/dist/chunks/formatting-DpKxCsXq.js.map +1 -0
  29. package/dist/cli/CommandProcessor.d.ts +100 -0
  30. package/dist/cli/CommandProcessor.d.ts.map +1 -0
  31. package/dist/cli/commands/ConfigCommand.d.ts +14 -0
  32. package/dist/cli/commands/ConfigCommand.d.ts.map +1 -0
  33. package/dist/cli/commands/ExportCommand.d.ts +48 -0
  34. package/dist/cli/commands/ExportCommand.d.ts.map +1 -0
  35. package/dist/cli/commands/HistoryCommand.d.ts +47 -0
  36. package/dist/cli/commands/HistoryCommand.d.ts.map +1 -0
  37. package/dist/cli/commands/StatusCommand.d.ts +30 -0
  38. package/dist/cli/commands/StatusCommand.d.ts.map +1 -0
  39. package/dist/cli/commands/ThemeCommand.d.ts +30 -0
  40. package/dist/cli/commands/ThemeCommand.d.ts.map +1 -0
  41. package/dist/cli/help.d.ts +12 -0
  42. package/dist/cli/help.d.ts.map +1 -0
  43. package/dist/cli/index.d.ts +15 -0
  44. package/dist/cli/index.d.ts.map +1 -0
  45. package/{src/cli-module.ts → dist/cli-module.d.ts} +2 -8
  46. package/dist/cli-module.d.ts.map +1 -0
  47. package/dist/cli-primitives/box.d.ts +11 -0
  48. package/dist/cli-primitives/box.d.ts.map +1 -0
  49. package/dist/cli-primitives/cli-table.d.ts +11 -0
  50. package/dist/cli-primitives/cli-table.d.ts.map +1 -0
  51. package/dist/cli-primitives/divider.d.ts +11 -0
  52. package/dist/cli-primitives/divider.d.ts.map +1 -0
  53. package/dist/cli-primitives/header.d.ts +12 -0
  54. package/dist/cli-primitives/header.d.ts.map +1 -0
  55. package/{src/cli-primitives/index.ts → dist/cli-primitives/index.d.ts} +1 -1
  56. package/dist/cli-primitives/index.d.ts.map +1 -0
  57. package/dist/cli-primitives/server-fallback.d.ts +25 -0
  58. package/dist/cli-primitives/server-fallback.d.ts.map +1 -0
  59. package/dist/cli-primitives/spinner.d.ts +47 -0
  60. package/dist/cli-primitives/spinner.d.ts.map +1 -0
  61. package/dist/cli-primitives/step.d.ts +11 -0
  62. package/dist/cli-primitives/step.d.ts.map +1 -0
  63. package/dist/cli.cjs +2 -0
  64. package/dist/cli.cjs.map +1 -0
  65. package/dist/cli.js +12 -0
  66. package/dist/cli.js.map +1 -0
  67. package/dist/constants.d.ts +235 -0
  68. package/dist/constants.d.ts.map +1 -0
  69. package/dist/core.cjs +2 -0
  70. package/dist/core.cjs.map +1 -0
  71. package/dist/core.d.ts +127 -0
  72. package/dist/core.d.ts.map +1 -0
  73. package/dist/core.js +291 -0
  74. package/dist/core.js.map +1 -0
  75. package/dist/example.d.ts +18 -0
  76. package/dist/example.d.ts.map +1 -0
  77. package/dist/exports-module.d.ts +196 -0
  78. package/dist/exports-module.d.ts.map +1 -0
  79. package/dist/exports.cjs +2 -0
  80. package/dist/exports.cjs.map +1 -0
  81. package/dist/exports.js +238 -0
  82. package/dist/exports.js.map +1 -0
  83. package/dist/handlers/AnalyticsLogHandler.d.ts +8 -0
  84. package/dist/handlers/AnalyticsLogHandler.d.ts.map +1 -0
  85. package/dist/handlers/ExportLogHandler.d.ts +100 -0
  86. package/dist/handlers/ExportLogHandler.d.ts.map +1 -0
  87. package/dist/handlers/FileLogHandler.d.ts +33 -0
  88. package/dist/handlers/FileLogHandler.d.ts.map +1 -0
  89. package/dist/handlers/RemoteLogHandler.d.ts +11 -0
  90. package/dist/handlers/RemoteLogHandler.d.ts.map +1 -0
  91. package/{src/handlers/index.ts → dist/handlers/index.d.ts} +2 -2
  92. package/dist/handlers/index.d.ts.map +1 -0
  93. package/dist/hooks/HookManager.d.ts +21 -0
  94. package/dist/hooks/HookManager.d.ts.map +1 -0
  95. package/{src/hooks/index.ts → dist/hooks/index.d.ts} +1 -0
  96. package/dist/hooks/index.d.ts.map +1 -0
  97. package/dist/index.cjs +2 -0
  98. package/dist/index.cjs.map +1 -0
  99. package/dist/index.d.ts +161 -0
  100. package/dist/index.d.ts.map +1 -0
  101. package/dist/index.js +627 -0
  102. package/dist/index.js.map +1 -0
  103. package/dist/main.d.ts +2 -0
  104. package/dist/main.d.ts.map +1 -0
  105. package/dist/serializers/SerializerRegistry.d.ts +16 -0
  106. package/dist/serializers/SerializerRegistry.d.ts.map +1 -0
  107. package/{src/serializers/index.ts → dist/serializers/index.d.ts} +1 -0
  108. package/dist/serializers/index.d.ts.map +1 -0
  109. package/dist/styling/LogStyleBuilder.d.ts +146 -0
  110. package/dist/styling/LogStyleBuilder.d.ts.map +1 -0
  111. package/dist/styling/SemanticStyles.d.ts +178 -0
  112. package/dist/styling/SemanticStyles.d.ts.map +1 -0
  113. package/dist/styling/SmartPresets.d.ts +22 -0
  114. package/dist/styling/SmartPresets.d.ts.map +1 -0
  115. package/dist/styling/StyleBuilder.d.ts +140 -0
  116. package/dist/styling/StyleBuilder.d.ts.map +1 -0
  117. package/dist/styling/StyleCache.d.ts +42 -0
  118. package/dist/styling/StyleCache.d.ts.map +1 -0
  119. package/dist/styling/banners.d.ts +42 -0
  120. package/dist/styling/banners.d.ts.map +1 -0
  121. package/dist/styling/index.d.ts +10 -0
  122. package/dist/styling/index.d.ts.map +1 -0
  123. package/dist/styling/themes.d.ts +7 -0
  124. package/dist/styling/themes.d.ts.map +1 -0
  125. package/dist/styling-module.d.ts +178 -0
  126. package/dist/styling-module.d.ts.map +1 -0
  127. package/dist/styling.cjs +2 -0
  128. package/dist/styling.cjs.map +1 -0
  129. package/dist/styling.js +146 -0
  130. package/dist/styling.js.map +1 -0
  131. package/dist/terminal/color-converter.d.ts +73 -0
  132. package/dist/terminal/color-converter.d.ts.map +1 -0
  133. package/dist/terminal/formatter.d.ts +20 -0
  134. package/dist/terminal/formatter.d.ts.map +1 -0
  135. package/dist/terminal/terminal-renderer.d.ts +77 -0
  136. package/dist/terminal/terminal-renderer.d.ts.map +1 -0
  137. package/dist/transports/ConsoleTransport.d.ts +9 -0
  138. package/dist/transports/ConsoleTransport.d.ts.map +1 -0
  139. package/dist/transports/FileTransport.d.ts +15 -0
  140. package/dist/transports/FileTransport.d.ts.map +1 -0
  141. package/dist/transports/HttpTransport.d.ts +16 -0
  142. package/dist/transports/HttpTransport.d.ts.map +1 -0
  143. package/dist/transports/TransportManager.d.ts +14 -0
  144. package/dist/transports/TransportManager.d.ts.map +1 -0
  145. package/{src/transports/index.ts → dist/transports/index.d.ts} +1 -0
  146. package/dist/transports/index.d.ts.map +1 -0
  147. package/{src/types/core.ts → dist/types/core.d.ts} +25 -62
  148. package/dist/types/core.d.ts.map +1 -0
  149. package/{src/types/handlers.ts → dist/types/handlers.d.ts} +5 -15
  150. package/dist/types/handlers.d.ts.map +1 -0
  151. package/{src/types/hooks.ts → dist/types/hooks.d.ts} +3 -12
  152. package/dist/types/hooks.d.ts.map +1 -0
  153. package/dist/types/index.d.ts +11 -0
  154. package/dist/types/index.d.ts.map +1 -0
  155. package/{src/types/serializers.ts → dist/types/serializers.d.ts} +1 -6
  156. package/dist/types/serializers.d.ts.map +1 -0
  157. package/{src/types/transports.ts → dist/types/transports.d.ts} +2 -7
  158. package/dist/types/transports.d.ts.map +1 -0
  159. package/dist/utils/adapter.d.ts +48 -0
  160. package/dist/utils/adapter.d.ts.map +1 -0
  161. package/dist/utils/ansi-colors.d.ts +156 -0
  162. package/dist/utils/ansi-colors.d.ts.map +1 -0
  163. package/dist/utils/environment-detector.d.ts +45 -0
  164. package/dist/utils/environment-detector.d.ts.map +1 -0
  165. package/dist/utils/environment.d.ts +47 -0
  166. package/dist/utils/environment.d.ts.map +1 -0
  167. package/dist/utils/formatting.d.ts +58 -0
  168. package/dist/utils/formatting.d.ts.map +1 -0
  169. package/dist/utils/index.d.ts +8 -0
  170. package/dist/utils/index.d.ts.map +1 -0
  171. package/dist/utils/opentui-detection.d.ts +34 -0
  172. package/dist/utils/opentui-detection.d.ts.map +1 -0
  173. package/dist/utils/output.d.ts +46 -0
  174. package/dist/utils/output.d.ts.map +1 -0
  175. package/dist/utils/stackTrace.d.ts +6 -0
  176. package/dist/utils/stackTrace.d.ts.map +1 -0
  177. package/dist/utils/timestamps.d.ts +20 -0
  178. package/dist/utils/timestamps.d.ts.map +1 -0
  179. package/{src/writers/BufferWriter.ts → dist/writers/BufferWriter.d.ts} +16 -77
  180. package/dist/writers/BufferWriter.d.ts.map +1 -0
  181. package/{src/writers/index.ts → dist/writers/index.d.ts} +1 -1
  182. package/dist/writers/index.d.ts.map +1 -0
  183. package/package.json +5 -1
  184. package/.claude/settings.local.json +0 -48
  185. package/.github/workflows/ci-quality.yml +0 -357
  186. package/.github/workflows/docs-demo.yml +0 -119
  187. package/.github/workflows/releases-core.yml +0 -512
  188. package/.github/workflows/releases-full.yml +0 -582
  189. package/.github/workflows-backup/ci.yml +0 -221
  190. package/.github/workflows-backup/nightly.yml +0 -196
  191. package/.github/workflows-backup/release-optimized.yml +0 -373
  192. package/.github/workflows-backup/release.yml +0 -269
  193. package/.release-notes-0.2.0.md +0 -129
  194. package/.yamllint +0 -28
  195. package/CHANGELOG.json +0 -1120
  196. package/CHANGELOG.md +0 -209
  197. package/CLAUDE.md +0 -217
  198. package/demo.html +0 -847
  199. package/docs/API.md +0 -918
  200. package/docs/CORE.md +0 -264
  201. package/docs/DEVELOPMENT.md +0 -731
  202. package/docs/EXPORTS.md +0 -467
  203. package/docs/PACKAGES.md +0 -244
  204. package/docs/STYLING.md +0 -405
  205. package/docs/_config.yml +0 -36
  206. package/docs/index.md +0 -179
  207. package/examples/README.md +0 -208
  208. package/examples/basic-logging.js +0 -75
  209. package/examples/data-export.js +0 -234
  210. package/examples/package.json +0 -16
  211. package/examples/performance-timing.js +0 -170
  212. package/examples/simplified-api.js +0 -124
  213. package/examples/styling-themes.js +0 -207
  214. package/index.html +0 -358
  215. package/packages/core/package.json +0 -57
  216. package/packages/exports/package.json +0 -41
  217. package/packages/nodejs-opentui/README.md +0 -232
  218. package/packages/nodejs-opentui/package.json +0 -72
  219. package/packages/nodejs-opentui/src/LogRenderer.ts +0 -171
  220. package/packages/nodejs-opentui/src/OpenTUILogHandler.ts +0 -178
  221. package/packages/nodejs-opentui/src/components/LogBadge.tsx +0 -131
  222. package/packages/nodejs-opentui/src/index.ts +0 -133
  223. package/packages/nodejs-opentui/src/types.ts +0 -158
  224. package/packages/nodejs-opentui/tsconfig.json +0 -20
  225. package/packages/styling/package.json +0 -41
  226. package/playground/demo-all.ts +0 -95
  227. package/playground/demo-box.ts +0 -85
  228. package/playground/demo-levels.ts +0 -56
  229. package/playground/demo-real-world.ts +0 -98
  230. package/playground/demo-spinner.ts +0 -77
  231. package/playground/demo-steps.ts +0 -72
  232. package/playground/demo-table.ts +0 -83
  233. package/project-utils/README.md +0 -172
  234. package/project-utils/auto-release-gemini.ts +0 -1193
  235. package/project-utils/auto-release-ui.ts +0 -1329
  236. package/project-utils/commit-generator.ts +0 -1385
  237. package/project-utils/commit-ui.ts +0 -264
  238. package/project-utils/git-utils.ts +0 -199
  239. package/project-utils/github-release-manager.ts +0 -466
  240. package/project-utils/project-config.ts +0 -260
  241. package/project-utils/prompt-templates.js +0 -345
  242. package/project-utils/prompt-templates.ts +0 -422
  243. package/project-utils/version-manager.ts +0 -1078
  244. package/src/Logger.ts +0 -1858
  245. package/src/ScopedLogger.ts +0 -256
  246. package/src/cli/CommandProcessor.ts +0 -248
  247. package/src/cli/commands/ConfigCommand.ts +0 -93
  248. package/src/cli/commands/ExportCommand.ts +0 -276
  249. package/src/cli/commands/HistoryCommand.ts +0 -117
  250. package/src/cli/commands/StatusCommand.ts +0 -112
  251. package/src/cli/commands/ThemeCommand.ts +0 -88
  252. package/src/cli/help.ts +0 -127
  253. package/src/cli/index.ts +0 -71
  254. package/src/cli-primitives/box.ts +0 -86
  255. package/src/cli-primitives/cli-table.ts +0 -62
  256. package/src/cli-primitives/divider.ts +0 -17
  257. package/src/cli-primitives/header.ts +0 -18
  258. package/src/cli-primitives/server-fallback.ts +0 -54
  259. package/src/cli-primitives/spinner.ts +0 -133
  260. package/src/cli-primitives/step.ts +0 -22
  261. package/src/constants.ts +0 -313
  262. package/src/core.ts +0 -397
  263. package/src/example.ts +0 -210
  264. package/src/exports-module.ts +0 -311
  265. package/src/handlers/AnalyticsLogHandler.ts +0 -22
  266. package/src/handlers/ExportLogHandler.ts +0 -610
  267. package/src/handlers/FileLogHandler.ts +0 -169
  268. package/src/handlers/RemoteLogHandler.ts +0 -42
  269. package/src/hooks/HookManager.ts +0 -177
  270. package/src/index.ts +0 -395
  271. package/src/main.ts +0 -196
  272. package/src/serializers/SerializerRegistry.ts +0 -173
  273. package/src/style.css +0 -96
  274. package/src/styling/LogStyleBuilder.ts +0 -355
  275. package/src/styling/SemanticStyles.ts +0 -380
  276. package/src/styling/SmartPresets.ts +0 -288
  277. package/src/styling/StyleBuilder.ts +0 -319
  278. package/src/styling/StyleCache.ts +0 -131
  279. package/src/styling/banners.ts +0 -168
  280. package/src/styling/index.ts +0 -27
  281. package/src/styling/themes.ts +0 -235
  282. package/src/styling-module.ts +0 -244
  283. package/src/terminal/color-converter.ts +0 -315
  284. package/src/terminal/formatter.ts +0 -242
  285. package/src/terminal/terminal-renderer.ts +0 -342
  286. package/src/transports/ConsoleTransport.ts +0 -28
  287. package/src/transports/FileTransport.ts +0 -53
  288. package/src/transports/HttpTransport.ts +0 -56
  289. package/src/transports/TransportManager.ts +0 -130
  290. package/src/types/index.ts +0 -83
  291. package/src/typescript.svg +0 -1
  292. package/src/utils/adapter.ts +0 -291
  293. package/src/utils/ansi-colors.ts +0 -333
  294. package/src/utils/environment-detector.ts +0 -170
  295. package/src/utils/environment.ts +0 -94
  296. package/src/utils/formatting.ts +0 -332
  297. package/src/utils/index.ts +0 -33
  298. package/src/utils/opentui-detection.ts +0 -138
  299. package/src/utils/output.ts +0 -227
  300. package/src/utils/stackTrace.ts +0 -144
  301. package/src/utils/timestamps.ts +0 -80
  302. package/src/vite-env.d.ts +0 -1
  303. package/test-core-browser.html +0 -237
  304. package/test-core-node.js +0 -63
  305. package/tests/test-conflict-resolution.ts +0 -391
  306. package/tests/validate-workflows.sh +0 -131
  307. package/tests/yaml-autofix.sh +0 -146
  308. package/tsconfig.json +0 -50
  309. package/vite.config.ts +0 -256
  310. /package/{public → dist}/vite.svg +0 -0
package/demo.html DELETED
@@ -1,847 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Better Logger - Professional Console Logging</title>
7
- <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
8
-
9
- <!-- Import Better Logger from jsDelivr CDN with local fallback -->
10
- <script type="module">
11
- try {
12
- await import('https://cdn.jsdelivr.net/npm/@mks2508/better-logger@latest/dist/index.js');
13
- } catch (e) {
14
- console.log('Using local fallback');
15
- await import('./dist/index.js');
16
- }
17
- </script>
18
-
19
- <style>
20
- * {
21
- margin: 0;
22
- padding: 0;
23
- box-sizing: border-box;
24
- }
25
-
26
- body {
27
- font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
28
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
29
- min-height: 100vh;
30
- color: #333;
31
- }
32
-
33
- .container {
34
- max-width: 1200px;
35
- margin: 0 auto;
36
- padding: 20px;
37
- }
38
-
39
- .header {
40
- text-align: center;
41
- margin-bottom: 40px;
42
- padding: 40px 20px;
43
- background: rgba(255, 255, 255, 0.95);
44
- border-radius: 20px;
45
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
46
- backdrop-filter: blur(10px);
47
- }
48
-
49
- .logo {
50
- font-size: 4rem;
51
- margin-bottom: 20px;
52
- background: linear-gradient(135deg, #667eea, #764ba2);
53
- -webkit-background-clip: text;
54
- -webkit-text-fill-color: transparent;
55
- background-clip: text;
56
- }
57
-
58
- .title {
59
- font-size: 3rem;
60
- font-weight: 700;
61
- margin-bottom: 10px;
62
- background: linear-gradient(135deg, #667eea, #764ba2);
63
- -webkit-background-clip: text;
64
- -webkit-text-fill-color: transparent;
65
- background-clip: text;
66
- }
67
-
68
- .subtitle {
69
- font-size: 1.3rem;
70
- color: #666;
71
- margin-bottom: 30px;
72
- }
73
-
74
- .badges {
75
- display: flex;
76
- justify-content: center;
77
- gap: 15px;
78
- flex-wrap: wrap;
79
- margin-bottom: 30px;
80
- }
81
-
82
- .badge {
83
- display: inline-flex;
84
- align-items: center;
85
- padding: 8px 16px;
86
- background: linear-gradient(135deg, #4facfe, #00f2fe);
87
- color: white;
88
- border-radius: 25px;
89
- font-weight: 600;
90
- text-decoration: none;
91
- transition: all 0.3s ease;
92
- font-size: 0.9rem;
93
- }
94
-
95
- .badge:hover {
96
- transform: translateY(-2px);
97
- box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
98
- }
99
-
100
- .npm-badge { background: linear-gradient(135deg, #CB3837, #FF4D6D); }
101
- .github-badge { background: linear-gradient(135deg, #333, #24292e); }
102
- .docs-badge { background: linear-gradient(135deg, #00C851, #00E676); }
103
-
104
- .demo-grid {
105
- display: grid;
106
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
107
- gap: 30px;
108
- margin-bottom: 40px;
109
- }
110
-
111
- .demo-section {
112
- background: rgba(255, 255, 255, 0.95);
113
- border-radius: 15px;
114
- padding: 30px;
115
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
116
- backdrop-filter: blur(10px);
117
- transition: transform 0.3s ease;
118
- }
119
-
120
- .demo-section:hover {
121
- transform: translateY(-5px);
122
- }
123
-
124
- .section-title {
125
- font-size: 1.5rem;
126
- font-weight: 700;
127
- margin-bottom: 15px;
128
- color: #333;
129
- display: flex;
130
- align-items: center;
131
- gap: 10px;
132
- }
133
-
134
- .section-description {
135
- color: #666;
136
- margin-bottom: 20px;
137
- line-height: 1.6;
138
- }
139
-
140
- .button-group {
141
- display: flex;
142
- flex-wrap: wrap;
143
- gap: 10px;
144
- margin-top: 20px;
145
- }
146
-
147
- .demo-btn {
148
- padding: 12px 24px;
149
- border: none;
150
- border-radius: 8px;
151
- font-weight: 600;
152
- cursor: pointer;
153
- transition: all 0.3s ease;
154
- color: white;
155
- font-size: 0.9rem;
156
- }
157
-
158
- .demo-btn:hover {
159
- transform: translateY(-2px);
160
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
161
- }
162
-
163
- .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); }
164
- .btn-success { background: linear-gradient(135deg, #4CAF50, #45a049); }
165
- .btn-warning { background: linear-gradient(135deg, #FF9800, #F57C00); }
166
- .btn-error { background: linear-gradient(135deg, #F44336, #D32F2F); }
167
- .btn-info { background: linear-gradient(135deg, #2196F3, #1976D2); }
168
- .btn-critical { background: linear-gradient(135deg, #9C27B0, #7B1FA2); }
169
-
170
- .features-grid {
171
- display: grid;
172
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
173
- gap: 20px;
174
- margin-bottom: 40px;
175
- }
176
-
177
- .feature-card {
178
- background: rgba(255, 255, 255, 0.9);
179
- border-radius: 12px;
180
- padding: 25px;
181
- text-align: center;
182
- transition: transform 0.3s ease;
183
- }
184
-
185
- .feature-card:hover {
186
- transform: translateY(-3px);
187
- }
188
-
189
- .feature-icon {
190
- font-size: 2.5rem;
191
- margin-bottom: 15px;
192
- }
193
-
194
- .feature-title {
195
- font-weight: 700;
196
- margin-bottom: 10px;
197
- color: #333;
198
- }
199
-
200
- .feature-desc {
201
- color: #666;
202
- font-size: 0.9rem;
203
- }
204
-
205
- .console-notice {
206
- background: rgba(255, 255, 255, 0.95);
207
- border-radius: 15px;
208
- padding: 25px;
209
- text-align: center;
210
- margin-bottom: 40px;
211
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
212
- }
213
-
214
- .console-notice h3 {
215
- color: #333;
216
- margin-bottom: 10px;
217
- font-size: 1.3rem;
218
- }
219
-
220
- .console-notice p {
221
- color: #666;
222
- margin-bottom: 15px;
223
- }
224
-
225
- .console-shortcut {
226
- display: inline-flex;
227
- align-items: center;
228
- gap: 5px;
229
- background: #f5f5f5;
230
- padding: 8px 12px;
231
- border-radius: 8px;
232
- font-family: 'Monaco', 'Consolas', monospace;
233
- font-weight: 600;
234
- }
235
-
236
- .footer {
237
- text-align: center;
238
- padding: 40px 20px;
239
- background: rgba(255, 255, 255, 0.9);
240
- border-radius: 15px;
241
- margin-top: 40px;
242
- }
243
-
244
- .footer-links {
245
- display: flex;
246
- justify-content: center;
247
- gap: 30px;
248
- flex-wrap: wrap;
249
- margin-bottom: 20px;
250
- }
251
-
252
- .footer-link {
253
- color: #667eea;
254
- text-decoration: none;
255
- font-weight: 600;
256
- transition: color 0.3s ease;
257
- }
258
-
259
- .footer-link:hover {
260
- color: #764ba2;
261
- }
262
-
263
- @media (max-width: 768px) {
264
- .title { font-size: 2rem; }
265
- .subtitle { font-size: 1.1rem; }
266
- .demo-grid { grid-template-columns: 1fr; }
267
- .badges { justify-content: center; }
268
- .button-group { justify-content: center; }
269
- }
270
- </style>
271
- </head>
272
- <body>
273
- <div class="container">
274
- <!-- Header -->
275
- <div class="header">
276
- <div class="logo">📊</div>
277
- <h1 class="title">Better Logger</h1>
278
- <p class="subtitle">State-of-the-art console logging with advanced CSS styling, SVG support, and animations</p>
279
-
280
- <div class="badges">
281
- <a href="https://www.npmjs.com/package/@mks2508/better-logger" class="badge npm-badge">📦 NPM Package</a>
282
- <a href="https://github.com/MKS2508/advanced-logger" class="badge github-badge">⭐ GitHub</a>
283
- <a href="https://github.com/MKS2508/advanced-logger/blob/main/README.md" class="badge docs-badge">📚 Documentation</a>
284
- </div>
285
- </div>
286
-
287
- <!-- Console Notice -->
288
- <div class="console-notice">
289
- <h3>🔍 Open Developer Console</h3>
290
- <p>To see the magical console output, open your browser's Developer Console:</p>
291
- <div class="console-shortcut">
292
- <span>Press</span>
293
- <kbd>F12</kbd>
294
- <span>or</span>
295
- <kbd>Ctrl+Shift+I</kbd>
296
- <span>(Windows/Linux)</span>
297
- <kbd>Cmd+Opt+I</kbd>
298
- <span>(Mac)</span>
299
- </div>
300
- </div>
301
-
302
- <!-- Features Overview -->
303
- <div class="features-grid">
304
- <div class="feature-card">
305
- <div class="feature-icon">🎨</div>
306
- <div class="feature-title">Advanced Styling</div>
307
- <div class="feature-desc">CSS gradients, shadows, and modern visual effects</div>
308
- </div>
309
- <div class="feature-card">
310
- <div class="feature-icon">🖼️</div>
311
- <div class="feature-title">SVG Support</div>
312
- <div class="feature-desc">Custom graphics and branded console messages</div>
313
- </div>
314
- <div class="feature-card">
315
- <div class="feature-icon">✨</div>
316
- <div class="feature-title">Animations</div>
317
- <div class="feature-desc">CSS keyframe animations in console output</div>
318
- </div>
319
- <div class="feature-card">
320
- <div class="feature-icon">📊</div>
321
- <div class="feature-title">Performance</div>
322
- <div class="feature-desc">Built-in timing and performance monitoring</div>
323
- </div>
324
- <div class="feature-card">
325
- <div class="feature-icon">🔧</div>
326
- <div class="feature-title">Modular</div>
327
- <div class="feature-desc">Import only what you need - Core, Styling, or Exports</div>
328
- </div>
329
- <div class="feature-card">
330
- <div class="feature-icon">🌈</div>
331
- <div class="feature-title">Themes</div>
332
- <div class="feature-desc">5 built-in themes: Default, Dark, Neon, Cyberpunk, Retro</div>
333
- </div>
334
- </div>
335
-
336
- <!-- Demo Sections -->
337
- <div class="demo-grid">
338
- <!-- Core Logging -->
339
- <div class="demo-section">
340
- <h2 class="section-title">🚀 Core Logging</h2>
341
- <p class="section-description">Essential logging features with beautiful styling and performance monitoring.</p>
342
- <div class="button-group">
343
- <button class="demo-btn btn-info" onclick="demoBasicLogging()">Basic Levels</button>
344
- <button class="demo-btn btn-primary" onclick="demoPerformanceTiming()">Performance</button>
345
- <button class="demo-btn btn-success" onclick="demoScopedLogger()">Scoped Logger</button>
346
- </div>
347
- </div>
348
-
349
- <!-- Visual Features -->
350
- <div class="demo-section">
351
- <h2 class="section-title">🎨 Visual Features</h2>
352
- <p class="section-description">Advanced styling with themes, banners, SVG backgrounds, and CSS animations.</p>
353
- <div class="button-group">
354
- <button class="demo-btn btn-primary" onclick="demoThemes()">Themes</button>
355
- <button class="demo-btn btn-success" onclick="demoBanners()">Banners</button>
356
- <button class="demo-btn btn-warning" onclick="demoSVGBackgrounds()">SVG Graphics</button>
357
- <button class="demo-btn btn-error" onclick="demoAnimations()">Animations</button>
358
- </div>
359
- </div>
360
-
361
- <!-- Data Export -->
362
- <div class="demo-section">
363
- <h2 class="section-title">📤 Data Export</h2>
364
- <p class="section-description">Export logs to CSV, JSON, XML formats and send to remote endpoints.</p>
365
- <div class="button-group">
366
- <button class="demo-btn btn-info" onclick="demoLogBuffer()">Log Buffer</button>
367
- <button class="demo-btn btn-primary" onclick="demoExportCSV()">Export CSV</button>
368
- <button class="demo-btn btn-success" onclick="demoExportJSON()">Export JSON</button>
369
- <button class="demo-btn btn-warning" onclick="demoRemoteLogging()">Remote Logging</button>
370
- </div>
371
- </div>
372
-
373
- <!-- Advanced Features -->
374
- <div class="demo-section">
375
- <h2 class="section-title">⚡ Advanced Features</h2>
376
- <p class="section-description">Table display, grouping, stack traces, and custom styling APIs.</p>
377
- <div class="button-group">
378
- <button class="demo-btn btn-primary" onclick="demoTableDisplay()">Tables</button>
379
- <button class="demo-btn btn-success" onclick="demoGrouping()">Grouping</button>
380
- <button class="demo-btn btn-info" onclick="demoStackTraces()">Stack Traces</button>
381
- <button class="demo-btn btn-critical" onclick="demoCustomStyles()">Custom Styles</button>
382
- </div>
383
- </div>
384
-
385
- <!-- CLI Interface -->
386
- <div class="demo-section">
387
- <h2 class="section-title">💻 CLI Interface</h2>
388
- <p class="section-description">Interactive command-line interface with configuration, help, and enumeration.</p>
389
- <div class="button-group">
390
- <button class="demo-btn btn-info" onclick="demoCLIHelp()">Help</button>
391
- <button class="demo-btn btn-primary" onclick="demoCLIConfig()">Config</button>
392
- <button class="demo-btn btn-success" onclick="demoCLIFeatures()">Enumerate All</button>
393
- <button class="demo-btn btn-warning" onclick="demoCLIStatus()">Status</button>
394
- </div>
395
- </div>
396
-
397
- <!-- Bundle Information -->
398
- <div class="demo-section">
399
- <h2 class="section-title">📦 Bundle Information</h2>
400
- <p class="section-description">Optimized bundle sizes for different use cases and selective imports.</p>
401
- <div class="button-group">
402
- <button class="demo-btn btn-info" onclick="showBundleSizes()">Bundle Sizes</button>
403
- <button class="demo-btn btn-primary" onclick="showModularImports()">Modular Imports</button>
404
- <button class="demo-btn btn-success" onclick="showCompatibility()">Compatibility</button>
405
- </div>
406
- </div>
407
- </div>
408
-
409
- <!-- Footer -->
410
- <div class="footer">
411
- <div class="footer-links">
412
- <a href="https://github.com/MKS2508/advanced-logger" class="footer-link">GitHub Repository</a>
413
- <a href="https://www.npmjs.com/package/@mks2508/better-logger" class="footer-link">NPM Package</a>
414
- <a href="https://github.com/MKS2508/advanced-logger/blob/main/README.md" class="footer-link">Documentation</a>
415
- <a href="https://github.com/MKS2508/advanced-logger/issues" class="footer-link">Issues & Support</a>
416
- <a href="https://github.com/MKS2508/advanced-logger/blob/main/LICENSE" class="footer-link">MIT License</a>
417
- </div>
418
- <p style="color: #666; margin-top: 20px;">
419
- Made with ❤️ by <strong>MKS2508</strong> • Better Logger v0.0.1
420
- </p>
421
- </div>
422
- </div>
423
-
424
- <script type="module">
425
- // Import from CDN will be available globally after load
426
- // Wait for module to load
427
- setTimeout(() => {
428
- if (window.BetterLogger) {
429
- console.log('%c🎉 Better Logger loaded successfully!', 'background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 10px 20px; border-radius: 8px; font-weight: bold;');
430
- }
431
- }, 1000);
432
-
433
- // Demo Functions
434
- window.demoBasicLogging = function() {
435
- console.log('%c🚀 Basic Logging Demo', 'background: linear-gradient(135deg, #4facfe, #00f2fe); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
436
-
437
- // Simulate different log levels
438
- console.log('%c🔷 DEBUG: Application initialized', 'background: linear-gradient(135deg, #9E9E9E, #757575); color: white; padding: 6px 12px; border-radius: 4px;');
439
- console.log('%cℹ️ INFO: User logged in successfully', 'background: linear-gradient(135deg, #2196F3, #1976D2); color: white; padding: 6px 12px; border-radius: 4px;');
440
- console.log('%c⚠️ WARN: API rate limit approaching', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 6px 12px; border-radius: 4px;');
441
- console.log('%c❌ ERROR: Payment processing failed', 'background: linear-gradient(135deg, #F44336, #D32F2F); color: white; padding: 6px 12px; border-radius: 4px;');
442
- console.log('%c🚨 CRITICAL: Database connection lost', 'background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 6px 12px; border-radius: 4px;');
443
- };
444
-
445
- window.demoPerformanceTiming = function() {
446
- console.log('%c⏱️ Performance Timing Demo', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
447
-
448
- const start = performance.now();
449
-
450
- // Simulate some work
451
- setTimeout(() => {
452
- const end = performance.now();
453
- const duration = (end - start).toFixed(2);
454
- console.log(`%c📊 Operation completed in ${duration}ms`, 'background: linear-gradient(135deg, #00C851, #00E676); color: white; padding: 6px 12px; border-radius: 4px;');
455
-
456
- // Show performance data
457
- console.table({
458
- 'Start Time': start.toFixed(2) + 'ms',
459
- 'End Time': end.toFixed(2) + 'ms',
460
- 'Duration': duration + 'ms',
461
- 'Status': '✅ Success'
462
- });
463
- }, 100);
464
- };
465
-
466
- window.demoScopedLogger = function() {
467
- console.log('%c🎯 Scoped Logger Demo', 'background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
468
-
469
- console.log('%c[API] 🌐 Making HTTP request...', 'background: linear-gradient(135deg, #2196F3, #1976D2); color: white; padding: 6px 12px; border-radius: 4px;');
470
- console.log('%c[AUTH] 🔐 Validating token...', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 6px 12px; border-radius: 4px;');
471
- console.log('%c[DB] 🗄️ Querying user data...', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 6px 12px; border-radius: 4px;');
472
- console.log('%c[CACHE] ⚡ Cache hit for user:123', 'background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 6px 12px; border-radius: 4px;');
473
- };
474
-
475
- window.demoThemes = function() {
476
- console.log('%c🌈 Theme System Demo', 'background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
477
-
478
- const themes = [
479
- { name: 'Default', colors: ['#667eea', '#764ba2'] },
480
- { name: 'Dark', colors: ['#2c3e50', '#34495e'] },
481
- { name: 'Neon', colors: ['#ff006e', '#fb8500'] },
482
- { name: 'Cyberpunk', colors: ['#b224ef', '#7209b7'] },
483
- { name: 'Retro', colors: ['#f72585', '#b5179e'] }
484
- ];
485
-
486
- themes.forEach((theme, index) => {
487
- setTimeout(() => {
488
- const style = `background: linear-gradient(135deg, ${theme.colors[0]}, ${theme.colors[1]}); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;`;
489
- console.log(`%c🎨 ${theme.name} Theme Applied`, style);
490
- }, index * 500);
491
- });
492
- };
493
-
494
- window.demoBanners = function() {
495
- console.log('%c🎭 Banner System Demo', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
496
-
497
- // ASCII Banner
498
- console.log('%c╔══════════════════════════════════╗\n║ BETTER LOGGER ║\n║ Advanced Console Logging ║\n╚══════════════════════════════════╝', 'color: #667eea; font-family: monospace; font-weight: bold;');
499
-
500
- // Unicode Banner
501
- setTimeout(() => {
502
- console.log('%c▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\n▓ ▓\n▓ 🚀 BETTER LOGGER ▓\n▓ Professional Logging ▓\n▓ ▓\n▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓', 'background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 10px; border-radius: 8px; font-family: monospace; font-weight: bold;');
503
- }, 1000);
504
- };
505
-
506
- window.demoSVGBackgrounds = function() {
507
- console.log('%c🖼️ SVG Graphics Demo', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
508
-
509
- // SVG with gradient background
510
- const svgStyle = "background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 80\"><defs><linearGradient id=\"bg\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"><stop offset=\"0%\" style=\"stop-color:%23667eea\"/><stop offset=\"100%\" style=\"stop-color:%23764ba2\"/></linearGradient></defs><rect width=\"100%\" height=\"100%\" fill=\"url(%23bg)\" rx=\"8\"/><text x=\"200\" y=\"45\" text-anchor=\"middle\" fill=\"white\" font-family=\"Arial\" font-size=\"18\" font-weight=\"bold\">BETTER LOGGER</text></svg>'); background-size: 400px 80px; background-repeat: no-repeat; color: transparent; padding: 40px 200px; border-radius: 8px;";
511
-
512
- console.log('%c ', svgStyle);
513
- console.log('%c✨ Custom SVG graphics in console!', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 6px 12px; border-radius: 4px; margin-top: 10px;');
514
- };
515
-
516
- window.demoAnimations = function() {
517
- console.log('%c✨ CSS Animations Demo', 'background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
518
-
519
- // Add CSS animation keyframes
520
- const style = document.createElement('style');
521
- style.textContent = `
522
- @keyframes loggerPulse {
523
- 0%, 100% { background-position: 0% 50%; }
524
- 50% { background-position: 100% 50%; }
525
- }
526
- `;
527
- document.head.appendChild(style);
528
-
529
- const animatedStyle = 'background: linear-gradient(270deg, #ff006e, #fb8500, #ff006e); background-size: 400% 100%; animation: loggerPulse 2s ease-in-out infinite; color: white; padding: 10px 20px; border-radius: 8px; font-weight: bold;';
530
-
531
- setTimeout(() => {
532
- console.log('%c🌟 Animated gradient background!', animatedStyle);
533
- console.log('%c⚡ Watch the colors flow...', animatedStyle);
534
- }, 500);
535
- };
536
-
537
- window.demoLogBuffer = function() {
538
- console.log('%c📊 Log Buffer Demo', 'background: linear-gradient(135deg, #2196F3, #1976D2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
539
-
540
- console.log('%c📝 Collecting logs in buffer...', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 6px 12px; border-radius: 4px;');
541
-
542
- // Simulate buffer data
543
- const bufferData = [
544
- { timestamp: new Date().toISOString(), level: 'info', message: 'User login', data: { userId: 123 } },
545
- { timestamp: new Date().toISOString(), level: 'warn', message: 'Cache miss', data: { key: 'user:123' } },
546
- { timestamp: new Date().toISOString(), level: 'error', message: 'API timeout', data: { endpoint: '/api/users' } }
547
- ];
548
-
549
- setTimeout(() => {
550
- console.table(bufferData);
551
- console.log('%c✅ Buffer contains 3 log entries', 'background: linear-gradient(135deg, #00C851, #00E676); color: white; padding: 6px 12px; border-radius: 4px;');
552
- }, 1000);
553
- };
554
-
555
- window.demoExportCSV = function() {
556
- console.log('%c📄 CSV Export Demo', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
557
-
558
- const csvData = `timestamp,level,prefix,message,location
559
- 2024-01-15T10:30:00.123Z,error,API,"Payment timeout","api.js:45:12"
560
- 2024-01-15T10:31:15.456Z,info,DB,"Query completed","database.js:23:8"
561
- 2024-01-15T10:32:30.789Z,warn,CACHE,"Cache expiry","cache.js:67:5"`;
562
-
563
- console.log('%c📋 CSV Export Preview:', 'background: #f5f5f5; color: #333; padding: 6px 12px; border-radius: 4px; font-family: monospace;');
564
- console.log(csvData);
565
-
566
- setTimeout(() => {
567
- console.log('%c✅ CSV export completed', 'background: linear-gradient(135deg, #00C851, #00E676); color: white; padding: 6px 12px; border-radius: 4px;');
568
- }, 1500);
569
- };
570
-
571
- window.demoExportJSON = function() {
572
- console.log('%c📋 JSON Export Demo', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
573
-
574
- const jsonData = {
575
- metadata: {
576
- exportTime: new Date().toISOString(),
577
- totalLogs: 3,
578
- filters: { level: 'all' }
579
- },
580
- logs: [
581
- {
582
- id: 'log_001',
583
- timestamp: '2024-01-15T10:30:00.123Z',
584
- level: 'error',
585
- prefix: 'API',
586
- message: 'Payment timeout',
587
- location: { file: 'api.js', line: 45, column: 12 }
588
- },
589
- {
590
- id: 'log_002',
591
- timestamp: '2024-01-15T10:31:15.456Z',
592
- level: 'info',
593
- prefix: 'DB',
594
- message: 'Query completed',
595
- location: { file: 'database.js', line: 23, column: 8 }
596
- }
597
- ]
598
- };
599
-
600
- setTimeout(() => {
601
- console.log('%c📊 JSON Export Data:', 'background: #f5f5f5; color: #333; padding: 6px 12px; border-radius: 4px;');
602
- console.log(jsonData);
603
- console.log('%c✅ JSON export completed', 'background: linear-gradient(135deg, #00C851, #00E676); color: white; padding: 6px 12px; border-radius: 4px;');
604
- }, 1000);
605
- };
606
-
607
- window.demoRemoteLogging = function() {
608
- console.log('%c📡 Remote Logging Demo', 'background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
609
-
610
- console.log('%c🔗 Connecting to remote endpoint...', 'background: linear-gradient(135deg, #2196F3, #1976D2); color: white; padding: 6px 12px; border-radius: 4px;');
611
-
612
- setTimeout(() => {
613
- console.log('%c📤 Sending log batch (5 entries)...', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 6px 12px; border-radius: 4px;');
614
- }, 1000);
615
-
616
- setTimeout(() => {
617
- console.log('%c✅ Remote logging successful', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 6px 12px; border-radius: 4px;');
618
- console.log('%c📊 Endpoint: https://api.logs.company.com', 'background: #f5f5f5; color: #333; padding: 4px 8px; border-radius: 4px; font-family: monospace;');
619
- }, 2000);
620
- };
621
-
622
- window.demoTableDisplay = function() {
623
- console.log('%c📊 Table Display Demo', 'background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
624
-
625
- const userData = [
626
- { id: 1, name: 'John Doe', email: 'john@example.com', status: '✅ Active', lastLogin: '2024-01-15' },
627
- { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: '⚠️ Pending', lastLogin: '2024-01-14' },
628
- { id: 3, name: 'Bob Wilson', email: 'bob@example.com', status: '❌ Inactive', lastLogin: '2024-01-10' }
629
- ];
630
-
631
- setTimeout(() => {
632
- console.table(userData);
633
- console.log('%c✨ Formatted data tables in console!', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 6px 12px; border-radius: 4px;');
634
- }, 500);
635
- };
636
-
637
- window.demoGrouping = function() {
638
- console.log('%c📁 Console Grouping Demo', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
639
-
640
- console.group('🚀 Application Startup');
641
- console.log('%c⚙️ Loading configuration...', 'background: linear-gradient(135deg, #2196F3, #1976D2); color: white; padding: 4px 8px; border-radius: 4px;');
642
- console.log('%c🔌 Connecting to database...', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 4px 8px; border-radius: 4px;');
643
- console.log('%c✅ Server ready on port 3000', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 4px 8px; border-radius: 4px;');
644
- console.groupEnd();
645
-
646
- setTimeout(() => {
647
- console.group('👤 User Authentication');
648
- console.log('%c🔐 Validating credentials...', 'background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 4px 8px; border-radius: 4px;');
649
- console.log('%c✅ Login successful', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 4px 8px; border-radius: 4px;');
650
- console.groupEnd();
651
- }, 1500);
652
- };
653
-
654
- window.demoStackTraces = function() {
655
- console.log('%c🔍 Stack Trace Demo', 'background: linear-gradient(135deg, #F44336, #D32F2F); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
656
-
657
- function level3() {
658
- console.trace('%c📍 Stack trace from level 3', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 6px 12px; border-radius: 4px;');
659
- }
660
-
661
- function level2() {
662
- level3();
663
- }
664
-
665
- function level1() {
666
- level2();
667
- }
668
-
669
- setTimeout(() => {
670
- console.log('%c🔗 Tracing function call hierarchy:', 'background: #f5f5f5; color: #333; padding: 6px 12px; border-radius: 4px;');
671
- level1();
672
- }, 500);
673
- };
674
-
675
- window.demoCustomStyles = function() {
676
- console.log('%c🎨 Custom Styles Demo', 'background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
677
-
678
- const styles = [
679
- 'background: linear-gradient(45deg, #ff6b6b, #feca57); color: white; padding: 12px 24px; border-radius: 25px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3);',
680
- 'background: #2c3e50; color: #ecf0f1; padding: 10px 20px; border-radius: 8px; border-left: 4px solid #3498db; font-family: monospace;',
681
- 'background: radial-gradient(circle, #667eea, #764ba2); color: white; padding: 15px 30px; border-radius: 50px; box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);'
682
- ];
683
-
684
- const messages = [
685
- '🌟 Gradient with rounded corners',
686
- '💻 Monospace with left border',
687
- '🔮 Radial gradient with shadow'
688
- ];
689
-
690
- styles.forEach((style, index) => {
691
- setTimeout(() => {
692
- console.log(`%c${messages[index]}`, style);
693
- }, (index + 1) * 500);
694
- });
695
- };
696
-
697
- window.demoCLIHelp = function() {
698
- console.log('%c💻 CLI Help System', 'background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
699
-
700
- const helpText = `
701
- 🔧 Better Logger CLI Commands:
702
- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
703
-
704
- 📋 Information Commands:
705
- /help Show this help message
706
- /version Display version information
707
- /status Show logger status and statistics
708
- /enumerate List all available features
709
-
710
- 🎨 Configuration Commands:
711
- /config Show current configuration
712
- /theme [name] Change theme (default, dark, neon, cyberpunk, retro)
713
- /banner [type] Set banner type (simple, ascii, unicode, svg, animated)
714
- /reset Reset to default configuration
715
-
716
- 🚀 Action Commands:
717
- /clear Clear console and log buffer
718
- /export [format] Export logs (csv, json, xml)
719
- /demo [feature] Run feature demonstration
720
- /benchmark Run performance benchmarks
721
- `;
722
-
723
- console.log('%c' + helpText, 'background: #f8f9fa; color: #333; padding: 15px; border-radius: 8px; font-family: monospace; line-height: 1.6;');
724
- };
725
-
726
- window.demoCLIConfig = function() {
727
- console.log('%c⚙️ CLI Configuration Demo', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
728
-
729
- setTimeout(() => {
730
- console.log('%c/theme cyberpunk', 'background: #2c3e50; color: #00ff41; padding: 8px 12px; border-radius: 4px; font-family: monospace;');
731
- }, 500);
732
-
733
- setTimeout(() => {
734
- console.log('%c🌈 Theme changed to Cyberpunk!', 'background: linear-gradient(135deg, #b224ef, #7209b7); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
735
- }, 1500);
736
-
737
- setTimeout(() => {
738
- console.log('%c/banner animated', 'background: #2c3e50; color: #00ff41; padding: 8px 12px; border-radius: 4px; font-family: monospace;');
739
- }, 2500);
740
-
741
- setTimeout(() => {
742
- console.log('%c✨ Banner type set to animated!', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
743
- }, 3500);
744
- };
745
-
746
- window.demoCLIFeatures = function() {
747
- console.log('%c📚 CLI Feature Enumeration', 'background: linear-gradient(135deg, #2196F3, #1976D2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
748
-
749
- const features = [
750
- { category: '🚀 Core Features', items: ['Multi-level logging', 'Performance timing', 'Scoped loggers', 'Stack trace analysis'] },
751
- { category: '🎨 Visual Features', items: ['5 Built-in themes', 'CSS animations', 'SVG backgrounds', 'Custom styling API'] },
752
- { category: '📤 Export Features', items: ['CSV export', 'JSON export', 'XML export', 'Remote logging'] },
753
- { category: '⚡ Advanced Features', items: ['Table display', 'Console grouping', 'Log buffering', 'Real-time filtering'] }
754
- ];
755
-
756
- features.forEach((category, index) => {
757
- setTimeout(() => {
758
- console.group(`%c${category.category}`, 'background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 6px 12px; border-radius: 4px; font-weight: bold;');
759
- category.items.forEach(item => {
760
- console.log(`%c✅ ${item}`, 'color: #4CAF50; padding: 2px 8px;');
761
- });
762
- console.groupEnd();
763
- }, index * 1000);
764
- });
765
- };
766
-
767
- window.demoCLIStatus = function() {
768
- console.log('%c📊 CLI Status Information', 'background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
769
-
770
- const status = {
771
- version: '0.0.1',
772
- theme: 'Default',
773
- bannerType: 'SVG',
774
- logBuffer: '142 entries',
775
- performance: '⚡ Optimized',
776
- remoteEndpoints: '2 active',
777
- lastExport: '2024-01-15T10:30:00Z'
778
- };
779
-
780
- setTimeout(() => {
781
- console.table(status);
782
- console.log('%c🟢 All systems operational', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 6px 12px; border-radius: 4px;');
783
- }, 1000);
784
- };
785
-
786
- window.showBundleSizes = function() {
787
- console.log('%c📦 Bundle Size Information', 'background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
788
-
789
- const bundleData = [
790
- { module: 'Full Library', size: '64KB', gzipped: '13KB', description: 'Complete feature set' },
791
- { module: 'Core Module', size: '6KB', gzipped: '2KB', description: 'Essential logging only' },
792
- { module: 'Styling Module', size: '26KB', gzipped: '5KB', description: 'Visual features & themes' },
793
- { module: 'Exports Module', size: '12KB', gzipped: '3KB', description: 'Data export & remote logging' }
794
- ];
795
-
796
- setTimeout(() => {
797
- console.table(bundleData);
798
- console.log('%c💡 Use selective imports to minimize bundle size!', 'background: linear-gradient(135deg, #00C851, #00E676); color: white; padding: 6px 12px; border-radius: 4px;');
799
- }, 500);
800
- };
801
-
802
- window.showModularImports = function() {
803
- console.log('%c🔧 Modular Import Examples', 'background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
804
-
805
- const importExamples = `
806
- // 📦 Full library (64KB)
807
- import { Logger } from '@mks2508/better-logger';
808
-
809
- // 🚀 Core only (6KB)
810
- import { Logger } from '@mks2508/better-logger/core';
811
-
812
- // 🎨 Styling features (26KB)
813
- import { setTheme, logWithSVG } from '@mks2508/better-logger/styling';
814
-
815
- // 📤 Export features (12KB)
816
- import { ExportLogger } from '@mks2508/better-logger/exports';
817
-
818
- // 🎯 Mix and match
819
- import { Logger } from '@mks2508/better-logger/core';
820
- import { setTheme } from '@mks2508/better-logger/styling';
821
- `;
822
-
823
- setTimeout(() => {
824
- console.log('%c' + importExamples, 'background: #f8f9fa; color: #333; padding: 15px; border-radius: 8px; font-family: monospace; line-height: 1.6;');
825
- }, 500);
826
- };
827
-
828
- window.showCompatibility = function() {
829
- console.log('%c🌐 Browser Compatibility', 'background: linear-gradient(135deg, #2196F3, #1976D2); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold;');
830
-
831
- const compatibility = [
832
- { feature: 'CSS Styling', chrome: '✅', firefox: '✅', safari: '✅', node: '❌' },
833
- { feature: 'SVG Backgrounds', chrome: '✅', firefox: '✅', safari: '✅', node: '❌' },
834
- { feature: 'Animations', chrome: '✅', firefox: '✅', safari: '✅', node: '❌' },
835
- { feature: 'Unicode Banners', chrome: '✅', firefox: '✅', safari: '✅', node: '✅' },
836
- { feature: 'Performance API', chrome: '✅', firefox: '✅', safari: '✅', node: '✅' },
837
- { feature: 'Core Logging', chrome: '✅', firefox: '✅', safari: '✅', node: '✅' }
838
- ];
839
-
840
- setTimeout(() => {
841
- console.table(compatibility);
842
- console.log('%c💡 Automatic fallbacks for Node.js environments', 'background: linear-gradient(135deg, #00C851, #00E676); color: white; padding: 6px 12px; border-radius: 4px;');
843
- }, 500);
844
- };
845
- </script>
846
- </body>
847
- </html>