mindmap/help.html at main · jamesabela/mindmap · GitHub

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mind Map Help</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        :root {
            --bg-gradient: #ffffff;
            --glass-bg: rgba(255, 255, 255, 0.9);
            --glass-border: rgba(0, 0, 0, 0.1);
            --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --text-primary: #333333;
            --text-secondary: #666666;
            --accent-color: #4a90e2;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-gradient);
            color: var(--text-primary);
            line-height: 1.6;
            margin: 0;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
        }

        .container {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            padding: 40px;
            max-width: 800px;
            width: 100%;
        }

        h1 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 20px;
            text-align: center;
            color: var(--accent-color);
        }

        h2 {
            font-size: 20px;
            font-weight: 600;
            margin-top: 30px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .key {
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 4px 8px;
            font-family: 'Monaco', monospace;
            font-size: 14px;
            font-weight: 600;
            margin-right: 12px;
            min-width: 60px;
            text-align: center;
            color: #374151;
            box-shadow: 0 2px 0 #d1d5db;
        }

        .icon {
            font-size: 20px;
            margin-right: 12px;
            min-width: 30px;
            text-align: center;
        }

        .description {
            color: var(--text-secondary);
        }

        .footer {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            color: var(--text-secondary);
        }

        a {
            color: var(--accent-color);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        iframe {
            display: block;
            margin: 0 auto 30px auto;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
    </style>
</head>

<body>

    <div class="container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/g3BzLqT3-fU?si=PhXX-Ohkd38e0Ml2"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        <h1>🧠 How to use Mind Map</h1>

        <h2>⌨️ Keyboard Shortcuts</h2>
        <ul>
            <li><span class="key">Tab</span> <span class="description">Create a new <strong>Child Node</strong></span>
            </li>
            <li><span class="key">Enter</span> <span class="description">Create a new <strong>Sibling
                        Node</strong></span></li>
            <li><span class="key">Del</span> <span class="description">Delete the selected node</span></li>
            <li><span class="key">Click</span> <span class="description">Select a node to edit text or change
                    style</span></li>
            <li><span class="key">Drag</span> <span class="description">Move nodes around the canvas</span></li>
        </ul>

        <h2>🎨 Toolbar Features</h2>
        <ul>
            <li><span class="icon">🎨</span> <span class="description"><strong>Colors:</strong> Click a color swatch to
                    change the node's background.</span></li>
            <li><span class="icon">😀</span> <span class="description"><strong>Emojis:</strong> Add visual icons to your
                    nodes.</span></li>
            <li><span class="icon">🔗</span> <span class="description"><strong>Link/Image:</strong> Add a hyperlink or
                    embed an image in the node.</span></li>
            <li><span class="icon">✂️</span> <span class="description"><strong>Split:</strong> Extract the selected
                    branch into a new mind map.</span></li>
            <li><span class="icon">🔄</span> <span class="description"><strong>Auto-layout:</strong> Automatically
                    organize your nodes.</span></li>
        </ul>

        <h2>📂 Saving & Exporting</h2>
        <ul>
            <li><span class="icon">💾</span> <span class="description"><strong>Save JSON:</strong> Download your mind
                    map to edit later.</span></li>
            <li><span class="icon">🖼️</span> <span class="description"><strong>Export PNG:</strong> Save as a
                    high-quality image.</span></li>
            <li><span class="icon">✏️</span> <span class="description"><strong>Export SVG:</strong> Save as a scalable
                    vector file (infinite zoom).</span></li>
            <li><span class="icon">📊</span> <span class="description"><strong>Export PPTX:</strong> Convert to
                    PowerPoint (separate slides for each topic).</span></li>
            <li><span class="icon">📋</span> <span class="description"><strong>Copy Text:</strong> Get a text outline of
                    your map.</span></li>
        </ul>
        <h2>🔎 Detailed instructions</h2>
        <p>PDF with full instructions available <a
                href="https://drive.google.com/file/d/1-ifh0JB48Qylcy71xRrJhlxfPRh70vHr/view">here</a>.</p>
        <div class="footer">
            <p>
                <span>
                    Made with ❤️ for better thinking. If it helped you, you can support the project with a tea.
                    <a href="https://wise.com/pay/me/jamesphilipj" target="_blank" rel="noopener" style="color: #e73c7e; text-decoration: none; font-weight: 600;">Buy me a tea</a>.
                </span>
            </p>
            <p><a href="mindmapplain.html">← Back to Mind Map</a></p>
        </div>
    </div>

</body>

</html>