forked from APIOpsCycles/CanvasCreator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (151 loc) · 4.91 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
<!doctype html>
<html>
<head>
<title>APIOps Cycles - Canvas Creator</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<link rel="stylesheet" href="/canvascreator.v1.min.css">
<link
rel="icon"
type="image/png"
href="/img/apiops-cycles-logo-2025-32.png"
/>
</head>
<body>
<span style="font-size: 30px; cursor: pointer" onclick="openNav()">☰</span>
<div id="toolContainer">
<img
src="/img/apiops-cycles-logo2025-blue.svg"
width="100px"
height="100px"
/>
<h1>APIOps Cycles Canvas Creator</h1>
<div id="localeSelector">
<label for="locale">Select Locale:</label>
<select id="locale"></select>
</div>
<div id="canvasSelector">
<label for="canvas">Select Canvas:</label>
<select id="canvas"></select>
</div>
<div id="canvasToolGroup">
<button id="metadataButton" class="canvas-tools">Edit Metadata</button>
<button class="canvas-tools" id="importButton">Import JSON</button>
<button id="exportButton" class="canvas-tools">Export JSON</button>
<button id="exportSVGButton" class="canvas-tools">Export SVGs</button>
<div id="colorPalette">
<button
class="colorSwatch"
style="background-color: #c0eb6a"
data-color="#C0EB6A"
></button>
<button
class="colorSwatch"
style="background-color: #dfddc5"
data-color="#DFDDC5"
></button>
<button
class="colorSwatch"
style="background-color: #ffafaf"
data-color="#FFAFAF"
></button>
<button
class="colorSwatch"
style="background-color: #7dc9e7"
data-color="#7DC9E7"
></button>
<button
class="colorSwatch"
style="background-color: #fff399"
data-color="#FFF399"
></button>
</div>
</div>
</div>
<div id="canvasCreator">
<div id="metadataForm" style="display: none">
<h2>Content Metadata</h2>
<label for="source">Source:</label>
<input type="text" id="source" name="source" /><br /><br />
<label for="license">License:</label>
<input type="text" id="license" name="license" /><br /><br />
<label for="authors">Authors:</label>
<input type="text" id="authors" name="authors" /><br /><br />
<label for="website">Website:</label>
<input type="text" id="website" name="website" /><br /><br />
<button id="saveMetadata">Save Metadata</button>
</div>
</div>
<!-- Help Icon and Tooltip -->
<div class="help-container">
<div class="help-icon">?</div>
<div class="help-tooltip">
<strong>Canvas Help</strong>
<ul>
<li><b>Open:</b> Select locale & canvas.</li>
<li><b>Create/Edit:</b> Import JSON or double-click.</li>
<li><b>Change Color:</b> Click note, pick color.</li>
<li><b>Remove:</b> Right-click & confirm.</li>
<li><b>Save:</b> Export as JSON (local only).</li>
<li><b>Export:</b> Save as SVG for slides/web.</li>
</ul>
</div>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<a
href="https://www.apiopscycles.com/collecting-requirements"
target="_blank"
>Canvas guides</a
>
<a
href="https://github.com/APIOpsCycles/CanvasCreator.git"
target="_blank"
>Code in Github</a
>
<a href="https://www.apiopscycles.com/partners" target="_blank"
>Partners</a
>
<a href="https://www.osaango.com/contact-us" target="_blank">Contact</a>
</div>
<script>
//configure styles for canvas creator here
const defaultStyles = {
width: 1000,
height: 712,
headerHeight: 80,
footerHeight: 30,
fontSize: 12,
fontFamily: "Arial, sans-serif",
backgroundColor: "#f5f5ff",
borderColor: "#1a3987",
fontColor: "#1a3987",
contentFontColor: "#333",
highlightColor: "#d7e3fe",
sectionColor: "#ffffff",
padding: 10,
cornerRadius: 10,
circleRadius: 14,
lineSize: 1,
shadowColor: "rgba(0, 0, 0, 0.2)",
stickyNoteSize: 80,
stickyNoteSpacing: 10,
stickyNoteCornerRadius: 3,
maxLineWidth: 70,
stickyNoteColor: "#fff399",
stickyNoteBorderColor: "#000",
defaultLocale: "en-US",
}
</script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0"
}
</script>
<script defer src="/canvasCreatorUI.v1_5.min.js"></script>
</body>
</html>