mirror of
https://github.com/knadh/listmonk.git
synced 2025-10-27 00:46:12 +08:00
87 lines
2.4 KiB
HTML
87 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/src/favicon/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/src/favicon/favicon-16x16.png" />
|
|
<meta name="viewport" content="width=900" />
|
|
<meta name="description" content="EmailBuilder.js interactive playground. Brought to you by Waypoint." />
|
|
<title>EmailBuilder.js — Free and Open Source Template Builder</title>
|
|
<style>
|
|
html {
|
|
margin: 0px;
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
body {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
#root {
|
|
/* height: 100vh; */
|
|
width: 800px;
|
|
position: relative;
|
|
}
|
|
.root-wrapper {
|
|
padding: 100px;
|
|
background-color: black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="root-wrapper">
|
|
<div id="root" class="email-builder-container"></div>
|
|
</div>
|
|
<script type="module">
|
|
const testData = {
|
|
"root": {
|
|
"type": "EmailLayout",
|
|
"data": {
|
|
"backdropColor": "#F5F5F5",
|
|
"canvasColor": "#FFFFFF",
|
|
"textColor": "#262626",
|
|
"fontFamily": "MODERN_SANS",
|
|
"childrenIds": [
|
|
"block-1727858083795"
|
|
]
|
|
}
|
|
},
|
|
"block-1727858083795": {
|
|
"type": "Text",
|
|
"data": {
|
|
"style": {
|
|
"fontWeight": "normal",
|
|
"padding": {
|
|
"top": 16,
|
|
"bottom": 16,
|
|
"right": 24,
|
|
"left": 24
|
|
}
|
|
},
|
|
"props": {
|
|
"markdown": false,
|
|
"text": "Test template"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
import('/src/main.tsx')
|
|
.then(module => {
|
|
module.render('root', { data: testData, onChange: (json, html) => {
|
|
console.log("onChange", json, html)
|
|
}});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading the module:', error);
|
|
});
|
|
</script>
|
|
|
|
<!-- Prod build -->
|
|
<!-- <script src="dist/listmonk-email-builder.umd.js"></script>
|
|
<script>
|
|
EmailBuilder.render("root");
|
|
</script> -->
|
|
</body>
|
|
</html>
|