LexCW/HELP_PREVIEW.html at main · milekpl/LexCW · 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help Preview - Lexicographic Curation Workbench</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .help-sidebar {
            position: sticky;
            top: 20px;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            background-color: #f8f9fa;
            border-radius: 0.25rem;
            padding: 1.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .help-sidebar .nav-link {
            color: #333;
            padding: 0.5rem 0.75rem;
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        .help-sidebar .nav-link:hover {
            color: #3498db;
            background-color: rgba(52, 152, 219, 0.1);
            border-left-color: #3498db;
        }
        .help-sidebar .nav-link.active {
            color: #3498db;
            font-weight: 600;
            background-color: rgba(52, 152, 219, 0.15);
            border-left-color: #3498db;
        }
        .help-content {
            padding-left: 30px;
            background-color: white;
            border-radius: 0.25rem;
            padding: 2rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .help-content h2 {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 2px solid #dee2e6;
        }
        .help-content h2:first-child {
            margin-top: 0;
            border-top: none;
        }
        .help-content h3 {
            margin-top: 25px;
            color: #0d6efd;
        }
        .feature-badge {
            display: inline-block;
            padding: 3px 8px;
            margin-left: 10px;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 4px;
        }
        .badge-essential {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        .badge-advanced {
            background-color: #fff3cd;
            color: #856404;
        }
        .badge-professional {
            background-color: #d4edda;
            color: #155724;
        }
        .example-box {
            background-color: #f8f9fa;
            border-left: 4px solid #0d6efd;
            padding: 15px;
            margin: 15px 0;
        }
        .feature-list {
            list-style: none;
            padding-left: 0;
        }
        .feature-list li {
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
        }
        .feature-list li:before {
            content: "✓";
            color: #28a745;
            font-weight: bold;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-md-3">
                <div class="help-sidebar">
                    <h5 class="mb-3">Contents</h5>
                    <nav id="help-nav" class="nav flex-column">
                        <a class="nav-link active" href="#introduction">Introduction</a>
                        <a class="nav-link" href="#lift-overview">What is LIFT?</a>
                        <a class="nav-link" href="#core-features">Core Features</a>
                        <a class="nav-link" href="#advanced-features">Advanced Features</a>
                        <a class="nav-link" href="#custom-fields">Custom Fields</a>
                    </nav>
                </div>
            </div>
            <div class="col-md-9">
                <div class="help-content">
                    <h1><i class="fas fa-question-circle"></i> Help System Preview</h1>
                    <p class="lead">Comprehensive LIFT documentation for lexicographers</p>

                    <h2 id="introduction">Key Features</h2>
                    <ul class="feature-list">
                        <li><strong>13 Major Sections</strong> covering all LIFT 0.13 features</li>
                        <li><strong>Sidebar Navigation</strong> with smooth scrolling</li>
                        <li><strong>Visual Badges</strong> categorizing features (Essential, Advanced, Professional)</li>
                        <li><strong>Practical Examples</strong> showing real-world usage</li>
                        <li><strong>Mobile Responsive</strong> design for all devices</li>
                        <li><strong>FieldWorks Compatible</strong> highlighting 91% LIFT compliance</li>
                    </ul>

                    <h2 id="lift-overview">Content Highlights</h2>

                    <h3><i class="fas fa-globe"></i> Multilingual Support <span class="feature-badge badge-essential">Essential</span></h3>
                    <p>Explains how every text field supports multiple writing systems for international dictionaries.</p>

                    <h3><i class="fas fa-lightbulb"></i> Senses & Subsenses <span class="feature-badge badge-essential">Essential</span></h3>
                    <p>Shows hierarchical organization of word meanings with unlimited nesting levels.</p>

                    <h3><i class="fas fa-volume-up"></i> Pronunciation <span class="feature-badge badge-professional">Professional</span></h3>
                    <p>Documents IPA transcription, audio files, TTS integration, CV patterns, and tone marking.</p>

                    <div class="example-box">
                        <strong><i class="fas fa-info-circle"></i> Example Boxes</strong>
                        <p class="mb-0 mt-2">
                            Help page includes highlighted example boxes showing practical usage of features,
                            making abstract concepts concrete for lexicographers.
                        </p>
                    </div>

                    <h2 id="ranges">Ranges & Custom Values</h2>
                    <p>
                        The application reads official LIFT ranges from a <code>lift-ranges</code> file stored in the project database. There are two types of ranges:
                        <strong>official ranges</strong> defined in the LIFT ranges document and <strong>custom (undefined) ranges</strong> that are discovered when entries use values not present in the official ranges.
                    </p>
                    <p>
                        Important: the system does <em>not</em> pretend that missing ranges exist. When a range has no values, the UI will show a hint and you should add the needed values using the <em>Ranges Editor</em>. During import the app may automatically create custom ranges for undefined values it finds, but it will not invent hardcoded fallback lists — recommended default values are only applied when you explicitly choose to install them during project setup.
                    </p>
                    <p>
                        See <em>Ranges Editor</em> (Settings → Ranges) to add, edit, or remove range values. This ensures your dropdowns and validation reflect your actual data.
                    </p>

                    <h4>Official vs Custom ranges</h4>
                    <p>
                        In the Ranges Editor, you will see badges identifying whether a range is <strong>Official</strong> (defined in the project's <code>lift-ranges</code> file) or <strong>Custom</strong> (created/imported). Use the badges to guide whether values should be edited in the source LIFT ranges file or adjusted locally via the editor.
                    </p>
                    <p>
                        Administrators can provide localized human-friendly labels and descriptions for FieldWorks-only ranges by adding or editing <code>app/config/custom_ranges.json</code>. The application will pick up that file on restart and surface those labels in the editor.
                    </p>
                    <h4>Important Traits</h4>
                    <p>
                        Certain LIFT traits are used to control complex-form and publication behavior. Notable ones:
                    </p>
                    <ul>
                        <li><strong>is-primary</strong>: marks component lexemes that should be considered primary in complex forms; primary components drive subentry generation.</li>
                        <li><strong>hide-minor-entry</strong>: integer flag controlling whether a variant or complex form entry is hidden in publication outputs (0 = show, 1 = hide).</li>
                        <li><strong>complex-form-type</strong>: label shown in the editor as <em>Complex form types</em> to indicate how subentries relate to main entries.</li>
                    </ul>

                    <h2 id="core-features">User Benefits</h2>
                    <ul class="feature-list">
                        <li>Self-service learning without external documentation</li>
                        <li>Feature discovery for advanced capabilities</li>
                        <li>Best practices with real examples</li>
                        <li>Quick reference for specific features</li>
                        <li>Confidence through standards compliance information</li>
                    </ul>

                    <div class="alert alert-success mt-4">
                        <h5><i class="fas fa-check-circle"></i> All Tests Passing</h5>
                        <p class="mb-0">8/8 unit tests verify content, navigation, and integration.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Smooth scroll spy simulation
        const scrollSpy = new bootstrap.ScrollSpy(document.body, {
            target: '#help-nav',
            offset: 100
        });
    </script>
</body>
</html>