-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (61 loc) · 2.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Mind Map KAJ
</title>
<script type="module" src="main.js"></script>
<link id="styleBase" href="style.css" rel="stylesheet">
</head>
<body class="container">
<nav>
<header>
Mind map editor - KAJ project
</header>
<button id="export" title="Simple export menu. Allows you to select image type (png/jpg).">Export</button>
<button id="info_btn" title="Instructions.">Info</button>
<button id="save_btn" title="Save current mind map for later use.">Save</button>
<div id="placeholder"></div>
</nav>
<aside>
<button id="add_bubble" title="Generate new bubble in the editor plane.">Add bubble</button> <br>
<button id="remove_all" title="Remove all bubbles. Your last save is still available.">Remove all bubbles</button> <br>
<button id="remove_bubble" title="Remove bubble and corresponding lines.">Remove bubble</button> <br>
<button id="create_line" title="Select two bubbles to connect with line.">Create line</button> <br>
<button id="delete_line" title="Select two bubbles to disconnect.">Delete line</button>
<br>
<div id="selected_container" class="hidden">
<input id="text_input" type="text"/>
<br>
<button id="set_text" title="Sets the text in from the input to the selected bubble.">Set text</button>
<br>
<input type="radio" id="none" name="radio" value="none">
<label for="none">None</label><br>
<input type="radio" id="green" name="radio" value="green">
<label for="green">Green 🟢</label><br>
<input type="radio" id="blue" name="radio" value="blue">
<label for="blue">Blue 🔵</label><br>
<input type="radio" id="yellow" name="radio" value="yellow">
<label for="yellow">Yellow 🟡</label>
</div>
</aside>
<div id="svg_container">
<svg id="svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5" opacity="0.35"/>
</pattern>
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)" />
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1" opacity="0.2"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>
<br>
<footer>
Mind map editor - KAJ project by Vojtěch Luňák, ČVUT FEL SIT 2022
</footer>
</body>
</html>