-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
71 lines (63 loc) · 2.9 KB
/
index.html
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
65
66
67
68
69
70
71
<!doctype html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">
<link rel="manifest" href="./manifest.json">
<title>web-component-designer-simple-demo</title>
<script type="esms-options">
{
"shimMode": true
}
</script>
<script src="./node_modules/es-module-shims/dist/es-module-shims.js"></script>
<script>
const importMap = {
imports: {
"@node-projects/web-component-designer": "./node_modules/@node-projects/web-component-designer/dist/index.js",
"@node-projects/web-component-designer/": "./node_modules/@node-projects/web-component-designer/",
"@node-projects/base-custom-webcomponent/": "./node_modules/@node-projects/base-custom-webcomponent/",
"@node-projects/base-custom-webcomponent": "./node_modules/@node-projects/base-custom-webcomponent/dist/index.js",
"@node-projects/lean-he-esm/": "./node_modules/@node-projects/lean-he-esm/"
}
};
//@ts-ignore
importShim.addImportMap(importMap);
</script>
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
background-color: white;
-webkit-font-smoothing: antialiased;
}
</style>
</head>
<body style="height: 100%; width: 100%;">
<node-projects-designer-view style="height: 100%; width: 100%;">
<button style="width:100px;height:30px;position:absolute;top:192px;left:365px;">Button</button>
<div style="position:absolute;top:161px;left:149px;">Default Text 2</div>
<div style="position:absolute;width:20px;height:20px;top:301px;left:507px;background:red;"></div>
<button style="width:100px;height:30px;position:absolute;top:385px;left:507px;">Button</button>
<button style="width:154.23px;height:103.645px;position:absolute;top:256px;left:625px;">Button</button>
<svg style="position:absolute;left:326px;top:343px;width:554px;height:441px;">
<path d="
M 50 150 C70 250 , 130 250 ,150 150
M150 150 C170 50 , 230 50 , 250 150
M250 150 C270 250 , 330 250 ,350 150
M350 150 C370 50 , 430 50 , 450 150
M450 150 C470 250 , 530 250 ,550 150" fill="hsla(0,0%,75%,0.5)" stroke="black" stroke-width="2" style="position:absolute;left:-50px;top:33px;"></path>
</svg>
<div style="display: grid; column-gap: 5px; row-gap: 5px; grid-template-columns: 60px 120px 120px; grid-template-rows: 50px 50px 50px; height: 150px; width: 300px; top: 400px; left: 30px; position: absolute;">
<button></button>
<input type="range" style="width: 100%; height: 100%;">
</div>
</node-projects-designer-view>
</body>
<script type="module">
importShim('./dist/initialize.js');
</script>
</html>