-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
168 lines (141 loc) · 5.08 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-15347038-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-15347038-6');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description"
content="Design studio tool to help you graphically plan complex VPC design, calculate the optimal CIDR range for subnets and generate Terraform/Pulumi code on the fly."
/>
<link rel="stylesheet" type="text/css" href="src/style.scss">
<link rel="canonical" href="https://houqp.github.io/vpcstudio/" />
<title>VPC Design Studio - Subnet CIDR planning with Terraform/Pulumi code gen</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu-items">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar-menu-items" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<div class=navbar-item>
<div class="buttons">
<a class="button" href=https://github.com/houqp/vpcstudio>
<span>Code</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="hero section">
<div class="hero-body">
<div class="container">
<h1 class="title">
VPC Design Studio
</h1>
<h2 class="subtitle">
Specify a CIDR range, express your desired design, sit back and enjoy a cup of ☕
</h2>
</div>
</div>
</section>
<section class="section">
<div id="message-overlay" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p></p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<div class="container">
<div id="config">
</div>
</div>
<div id="plan-container" class="container has-text-centered">
<button id="plan" class="button is-link">
Plan ⬇️
</button>
</div>
<div id="vis" class="container">
<div class="container">
<div class="tabs is-centered">
<ul>
<li id="diagram-tab" data-target="diagram-container"><a>Diagram view</a></li>
<li id="tree-tab" data-target="tree-container"><a>Tree view</a></li>
<li id="terraform-tab" data-target="terraform-container"><a>Terraform</a></li>
<li id="pulumi-tab" data-target="pulumi-container"><a>Pulumi TS</a></li>
<li id="json-tab" data-target="json-container"><a>JSON</a></li>
</ul>
</div>
<div id="diagram-container" class="box">
<div id="diagram">
</div>
</div>
<div id="tree-container" class="box">
<div id="tree">
</div>
</div>
<div id="terraform-container" class="box">
<div id="terraform">
</div>
</div>
<div id="pulumi-container" class="box">
<div id="pulumi">
</div>
</div>
<div id="json-container" class="box">
<div id="json">
</div>
</div>
</div>
</div>
</section>
<section id="footer" class="section">
<div class="content has-text-centered">
<p>Built by <a href="https://github.com/houqp">houqp</a> without your favorite JS framework</p>
</div>
</section>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
<script src="node_modules/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="node_modules/ace-builds/src-noconflict/mode-yaml.js" type="text/javascript" charset="utf-8"></script>
<script src="node_modules/ace-builds/src-noconflict/theme-tomorrow.js" type="text/javascript" charset="utf-8"></script>
<script src="src/main.ts"></script>
</html>