settings_tab.html (10939B)
1 <section id="settings-tab"> 2 {% if tab == "general" %} 3 <h4>Appearance</h4> 4 5 <label> 6 Theme 7 <details class="dropdown"> 8 <summary>System</summary> 9 <ul> 10 <li><a>System</a></li> 11 <li><a>Light</a></li> 12 <li><a>Dark</a></li> 13 </ul> 14 </details> 15 </label> 16 17 <label> 18 Font Size 19 <details class="dropdown"> 20 <summary>Normal</summary> 21 <ul> 22 <li><a href="#">Small</a></li> 23 <li><a href="#">Normal</a></li> 24 <li><a href="#">Large</a></li> 25 </ul> 26 </details> 27 </label> 28 29 <h4>Language & Region</h4> 30 31 <label> 32 Interface Language 33 <details class="dropdown"> 34 <summary>English</summary> 35 <ul> 36 <li>English</li> 37 <li>Spanish</li> 38 <li>Danish</li> 39 <li>Chinese</li> 40 </ul> 41 </details> 42 </label> 43 44 <label> 45 Content Language 46 <details class="dropdown"> 47 <summary>English</summary> 48 <ul> 49 <li>English</li> 50 <li>Spanish</li> 51 <li>Danish</li> 52 <li>Chinese</li> 53 </ul> 54 </details> 55 </label> 56 57 <h4>Reading Experience</h4> 58 59 <label> 60 Number of Stories Shown: <output>10</output> 61 <input 62 type="range" 63 value="10" 64 min="1" 65 max="30" 66 oninput="this.previousElementSibling.value = this.value" 67 /> 68 </label> 69 70 <label> 71 Story Open Mode 72 <details class="dropdown"> 73 <summary>Multiple stories</summary> 74 <ul> 75 <li>Multiple stories</li> 76 <li>One story at a time</li> 77 </ul> 78 </details> 79 </label> 80 81 <label> 82 Story Expand Mode 83 <details class="dropdown"> 84 <summary>Double-click to expand all</summary> 85 <ul> 86 <li>Always expand all</li> 87 <li>Double-click to expand all</li> 88 <li>Never expand all</li> 89 </ul> 90 </details> 91 </label> 92 93 <h4>Navigation</h4> 94 95 <label> 96 Use Latest URLs 97 <details class="dropdown"> 98 <summary>Disabled</summary> 99 <ul> 100 <li>Disabled</li> 101 <li>Enabled</li> 102 </ul> 103 </details> 104 </label> 105 106 <h4>About</h4> 107 108 <label> 109 Maps Provider 110 <details class="dropdown"> 111 <summary>Auto</summary> 112 <ul> 113 <li>Auto</li> 114 <li>Kagi Maps</li> 115 <li>Google Maps</li> 116 <li>OpenStreetMap</li> 117 <li>Apple Maps</li> 118 </ul> 119 </details> 120 </label> 121 {% else if tab == "sections" %} 122 <hgroup> 123 <h4>Article Sections</h4> 124 <h6>Drag to reorder sections. Use the switch to enable/disable.</h6> 125 </hgroup> 126 <article> 127 <nav> 128 <ul> 129 <li>Summary</li> 130 </ul> 131 <ul> 132 <li> 133 <label><input name="summary" type="checkbox" role="switch" /></label> 134 </li> 135 </ul> 136 </nav> 137 </article> 138 <article> 139 <nav> 140 <ul> 141 <li>Primary Image</li> 142 </ul> 143 <ul> 144 <li> 145 <label><input name="summary" type="checkbox" role="switch" /></label> 146 </li> 147 </ul> 148 </nav> 149 </article> 150 <article> 151 <nav> 152 <ul> 153 <li>Sources</li> 154 </ul> 155 <ul> 156 <li> 157 <label><input name="summary" type="checkbox" role="switch" /></label> 158 </li> 159 </ul> 160 </nav> 161 </article> 162 <article> 163 <nav> 164 <ul> 165 <li>Highlights</li> 166 </ul> 167 <ul> 168 <li> 169 <label><input name="summary" type="checkbox" role="switch" /></label> 170 </li> 171 </ul> 172 </nav> 173 </article> 174 <article> 175 <nav> 176 <ul> 177 <li>Quotes</li> 178 </ul> 179 <ul> 180 <li> 181 <label><input name="summary" type="checkbox" role="switch" /></label> 182 </li> 183 </ul> 184 </nav> 185 </article> 186 <article> 187 <nav> 188 <ul> 189 <li>Secondary Image</li> 190 </ul> 191 <ul> 192 <li> 193 <label><input name="summary" type="checkbox" role="switch" /></label> 194 </li> 195 </ul> 196 </nav> 197 </article> 198 <article> 199 <nav> 200 <ul> 201 <li>Perspectives</li> 202 </ul> 203 <ul> 204 <li> 205 <label><input name="summary" type="checkbox" role="switch" /></label> 206 </li> 207 </ul> 208 </nav> 209 </article> 210 <article> 211 <nav> 212 <ul> 213 <li>Historical Background</li> 214 </ul> 215 <ul> 216 <li> 217 <label><input name="summary" type="checkbox" role="switch" /></label> 218 </li> 219 </ul> 220 </nav> 221 </article> 222 <article> 223 <nav> 224 <ul> 225 <li>Humanitarian Impact</li> 226 </ul> 227 <ul> 228 <li> 229 <label><input name="summary" type="checkbox" role="switch" /></label> 230 </li> 231 </ul> 232 </nav> 233 </article> 234 <article> 235 <nav> 236 <ul> 237 <li>Technical Details</li> 238 </ul> 239 <ul> 240 <li> 241 <label><input name="summary" type="checkbox" role="switch" /></label> 242 </li> 243 </ul> 244 </nav> 245 </article> 246 <article> 247 <nav> 248 <ul> 249 <li>Business Angle</li> 250 </ul> 251 <ul> 252 <li> 253 <label><input name="summary" type="checkbox" role="switch" /></label> 254 </li> 255 </ul> 256 </nav> 257 </article> 258 <article> 259 <nav> 260 <ul> 261 <li>Scientific Significance</li> 262 </ul> 263 <ul> 264 <li> 265 <label><input name="summary" type="checkbox" role="switch" /></label> 266 </li> 267 </ul> 268 </nav> 269 </article> 270 <article> 271 <nav> 272 <ul> 273 <li>Travel Advisory</li> 274 </ul> 275 <ul> 276 <li> 277 <label><input name="summary" type="checkbox" role="switch" /></label> 278 </li> 279 </ul> 280 </nav> 281 </article> 282 <nav> 283 <ul></ul> 284 <ul> 285 <li> 286 <button class="secondary">Reset Order</button> 287 <button>Toggle All</button> 288 </li> 289 </ul> 290 <ul></ul> 291 </nav> 292 {% else if tab == "content-filter" %} 293 <hgroup> 294 <h4>Filter Presets</h4> 295 <p>Select one or more preset filters to quickly hide common topics</p> 296 </hgroup> 297 <select aria-label="Topics" multiple size="6"> 298 <option>Cheese</option> 299 <option selected>Fruits</option> 300 <option selected>Nuts</option> 301 <option>Chocolate</option> 302 <option>Crackers</option> 303 </select> 304 <hgroup> 305 <h4>Custom Keywords</h4> 306 <p>Add your own keywords to filter, separated by commas</p> 307 </hgroup> 308 <input 309 type="text" 310 name="custom-keywords" 311 placeholder="e.g., celebrity name, topic" 312 aria-label="Custom Keywords" 313 /> 314 <hgroup> 315 <h4>Filter Mode</h4> 316 <p>Choose how filtered content is handled</p> 317 </hgroup> 318 <fieldset> 319 <label> 320 <input type="radio" name="language" checked /> 321 Hide completely 322 </label> 323 <label> 324 <input type="radio" name="language" /> 325 Blur with warning 326 </label> 327 </fieldset> 328 <hgroup> 329 <h4>Filter Scope</h4> 330 <p>Choose which parts of stories to check for keywords</p> 331 </hgroup> 332 <select name="filter-scope" required> 333 <option>Title only</option> 334 <option>Title and summary</option> 335 <option selected>All content</option> 336 </select> 337 <nav> 338 <ul> 339 <li> 340 <hgroup> 341 <h4>Show Filtered Count</h4> 342 <p>Display number of filtered stories in each category</p> 343 </hgroup> 344 </li> 345 </ul> 346 <ul> 347 <li> 348 <input name="terms" type="checkbox" role="switch" /> 349 </li> 350 </ul> 351 </nav> 352 <hr /> 353 <hgroup> 354 <h4>Backup & Restore</h4> 355 <p> 356 Export your filter settings to a file or import from a previous backup 357 </p> 358 </hgroup> 359 <button class="secondary">Export Settings</button> 360 <button>Import Settings</button> 361 <hr /> 362 <button class="outline">Reset Content Filter Settings to Defaults</button> 363 {% else if tab == "syncing" %} 364 <p> 365 Kagi News can sync your settings and read history across all your devices. 366 This data is stored securely on Kagi servers and associated with your Kagi 367 Search account. Your synced data is not used for any other purpose, not 368 shared with anyone, and is solely stored to provide the sync service to you. 369 You have full control over what gets synced and can delete your data at any 370 time. 371 </p> 372 <h4>Sync Preferences</h4> 373 <label> 374 <input 375 name="sync-settings" 376 type="checkbox" 377 role="switch" 378 aria-describedby="sync-settings-description" 379 /> 380 Sync Settings 381 </label> 382 <label> 383 <input 384 name="sync-read-history" 385 type="checkbox" 386 role="switch" 387 aria-describedby="email-helper" 388 /> 389 Sync Read History 390 </label> 391 <br /> 392 <h4>Data Management</h4> 393 <p> 394 You are in control of your data. Export or delete your cloud data at any 395 time. Deletion does not affect local data. 396 </p> 397 <button class="secondary">Export Data</button> 398 <button>Clear All Synced Data</button> 399 {% else if tab == "experimental" %} 400 <p> 401 ⚠️ These are experimental features that may be changed or removed at any 402 time. 403 </p> 404 <article> 405 <nav> 406 <ul> 407 <li> 408 <hgroup> 409 <h4>Show icons next to articles</h4> 410 <p> 411 When enabled, small icons will be displayed next to articles to 412 provide visual context. 413 </p> 414 </hgroup> 415 </li> 416 </ul> 417 <ul> 418 <li> 419 <input 420 name="show-icons-next-to-articles" 421 type="checkbox" 422 role="switch" 423 /> 424 </li> 425 </ul> 426 </nav> 427 </article> 428 <article> 429 <nav> 430 <ul> 431 <li> 432 <hgroup> 433 <h4>Show icons in category labels</h4> 434 <p> 435 When enabled, small icons will be displayed next to category 436 labels to provide visual context. 437 </p> 438 </hgroup> 439 </li> 440 </ul> 441 <ul> 442 <li> 443 <input 444 name="show-icons-next-to-category-labels" 445 type="checkbox" 446 role="switch" 447 /> 448 </li> 449 </ul> 450 </nav> 451 </article> 452 <article> 453 <nav> 454 <ul> 455 <li> 456 <hgroup> 457 <h4>Disable horizontal category swiping</h4> 458 <p> 459 When enabled, horizontal swiping to change categories on mobile 460 devices will be disabled. 461 </p> 462 </hgroup> 463 </li> 464 </ul> 465 <ul> 466 <li> 467 <input 468 name="disable-horizontal-category-swiping" 469 type="checkbox" 470 role="switch" 471 /> 472 </li> 473 </ul> 474 </nav> 475 </article> 476 <article> 477 <nav> 478 <ul> 479 <li> 480 <hgroup> 481 <h4>Show World Tension Index</h4> 482 <p> 483 Display a global temperature reading of world stability based on 484 current events. 485 </p> 486 </hgroup> 487 </li> 488 </ul> 489 <ul> 490 <li> 491 <input 492 name="show-icons-next-to-articles" 493 type="checkbox" 494 role="switch" 495 /> 496 </li> 497 </ul> 498 </nav> 499 </article> 500 {% else %} 501 <p>Select a tab to view settings.</p> 502 {% endif %} 503 </section>