Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground
Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
data_array
Python Editor
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body style="margin: 0 !important; padding: 0 !important; background-color: #F6F6F6;" bgcolor="#F6F6F6"> <!-- SPACER --> <table class="mobile-hide" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="padding: 20px 0" align="center"></td> </tr> </table> <!-- END SPACER --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" style="background-color: #F6F6F6;" bgcolor="#F6F6F6"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="800px" class="mobile-table"> <!-- HEADER --> <tr style="border-left: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD;"> <td align="left" valign="top" style="font-size:0; padding: 0; background-color:#FFFFFF !important;" bgcolor="#FFFFFF"> <table align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td style="padding: 9px 0 6px 20px; height:60px;"> <span style="font-family:-apple-system,BlinkMacSystemFont,'Noto Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:16pt;font-weight:500">Jarvis System</span> </td> </tr> </table> </td> </tr> </table> </td> </tr> <!-- END HEADER --> <!-- HR --> <tr style="border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD;"> <td align="left" style="padding: 0 20px 0 20px; background-color: #FFFFFF;" bgcolor="#FFFFFF"> <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="border-bottom: 1px solid #E3E3E3;">Alarm details</td> </tr> </table> </td> </tr> <!-- END HR --> <!-- TEXT BLOCK --> <tr style="border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD;"> <td align="left" style="padding: 10px 20px 20px 20px; background-color: #ffffff;" bgcolor="#ffffff"> <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:1000px;"> <tr> <td align="left"> <p> <table class="data-table-v2" style="font-family:-apple-system,BlinkMacSystemFont,'Noto Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height: 1.5"> <thead> <tr> <td colspan="2"><span>Alarm Code</span></td> <td><span>Activated at</span></td> <td><span>Deactivated at</span></td> <td><span>Note</span></td> </tr> </thead> <tbody> <tr> <td style="background-color: #63CC50; border-bottom: 4px solid white"> </td> <td style="font-weight: 500;"><span style="">Tickets.NoNewTickets</span></td> <td>12/03/2026 20:13:34</td> <td></td> <td>Warning: no new tickets in the last 1 seconds.<br>sssssssssssss<br>ssssssssssss</td> </tr> <tr> <td style="background-color: #FCDE19; border-bottom: 4px solid white"></td> <td style="font-weight: 500;"><span style="">Tickets.NoNewTickets</span></td> <td>12/03/2026 20:13:34</td> <td></td> <td>Warning: no new tickets in the last 1 seconds.</td> </tr> <tr> <td style="background-color: #FF7700; border-bottom: 4px solid white"></td> <td style="font-weight: 500;"><span style="">Tickets.NoNewTickets</span></td> <td>12/03/2026 20:13:34</td> <td></td> <td>Warning: no new tickets in the last 1 seconds.</td> </tr> <tr> <td style="color: white; background-color: #BD0000; border-bottom: 4px solid white"></td> <td style="font-weight: 500"><span style="">Tickets.NoNewTickets</span></td> <td>12/03/2026 20:13:34</td> <td></td> <td>Warning: no new tickets in the last 1 seconds.</td> </tr> <tr> <td style="color: white; background-color: #9C009A; border-bottom: 4px solid white"></td> <td style="font-weight: 500"><span style="">Tickets.NoNewTickets</span></td> <td>12/03/2026 20:13:34</td> <td></td> <td>Warning: no new tickets in the last 1 seconds.</td> </tr> </tbody> </table> </p> </td> </tr> </table> </td> </tr> <!-- END TEXT BLOCK --> <!-- PRE-FOOTER --> <!-- END PRE-FOOTER --> </table> </td> </tr> </table> <!-- SPACER --> <table class="mobile-hide" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="padding: 20px 0" align="center"> </td> </tr> </table> <!-- END SPACER --> </body> </html>
/* CLIENT-SPECIFIC STYLES */ body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { -ms-interpolation-mode: bicubic; } /* RESET STYLES */ img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } /* table { border-collapse: collapse !important; } body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } */ /* iOS BLUE LINKS */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* MEDIA QUERIES */ @media screen and (max-width: 800px) { .mobile-hide { display: none !important; } .mobile-table { width: 100% !important; } } /* ANDROID CENTER FIX */ div[style*="margin: 16px 0;"] { margin: 0 !important; } .data-table-v2 { border-spacing: 5px; padding: 0px; border-radius: 0px; margin: 0px; } .data-table-v2 thead tr td { background-color: #ffffff; border-top: 0px; border-left: 0px; border-right: 0px; border-radius: 0px; border-bottom: 2px solid #000000; font-weight: 500; padding-left: 0px; font-variant-caps: all-small-caps; } .data-table-v2 thead tr td.data-center-v2 { text-align: center; } .data-table-v2 thead tr td.data-highlite-v2 { background-color: #FFB343; border: 1px solid #A0A0A0; } .data-table-v2 thead tr td.data-highlite-center-v2 { text-align: center; background-color: #FFB343; border: 1px solid #A0A0A0; } .data-table-v2 tr { margin: 0px; } .data-table-v2 tr td { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #A0A0A0; padding-left: 4px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; } .data-table-v2 tr td.data-center-v2 { padding-left: 4px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; text-align: center; }
// Write JavaScript here
Check out the new AI-powered Python Playground
×