commit 21dae15c5c12dd030feab58df81a228a646272a6 parent ede4432fc0984d76e22c0abe929ec32caa6dc41b Author: Silas Brack <silasbrack@gmail.com> Date: Sat, 4 Oct 2025 23:45:40 +0200 style: format HTML with prettier Diffstat:
| M | src/simple_web_app/templates/application.html | | | 33 | ++++++++++++++++++--------------- |
| M | src/simple_web_app/templates/index.html | | | 194 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------- |
| M | src/simple_web_app/templates/load_more.html | | | 25 | ++++++++++++++++++++++++- |
| M | src/simple_web_app/templates/news_card.html | | | 35 | ++++++++++++++++++++++------------- |
| M | src/simple_web_app/templates/news_cards.html | | | 4 | +--- |
| M | src/simple_web_app/templates/oob_swap.html | | | 3 | +-- |
| M | src/simple_web_app/templates/search.html | | | 67 | +++++++++++++++++++++++++++++++++++++------------------------------ |
| M | src/simple_web_app/templates/search_results.html | | | 15 | ++++++--------- |
| M | src/simple_web_app/templates/settings.html | | | 122 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------ |
| M | src/simple_web_app/templates/settings_tab.html | | | 731 | ++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------- |
10 files changed, 847 insertions(+), 382 deletions(-)
diff --git a/src/simple_web_app/templates/application.html b/src/simple_web_app/templates/application.html @@ -1,18 +1,21 @@ <!doctype html> <html lang="en"> - <head> - <meta charset="utf-8" /> - <title>My Chat</title> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script> - <script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.0"></script> - <script src="https://unpkg.com/hyperscript.org@0.9.14"></script> - <link rel="stylesheet" href="{{ url_for('static', path='style.css') }}"/> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.amber.min.css"/> - </head> - <body hx-ext="preload"> - <main class="container"> - <div id="content">{% include content %}</div> - </main> - </body> + <head> + <meta charset="utf-8" /> + <title>My Chat</title> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.0"></script> + <script src="https://unpkg.com/hyperscript.org@0.9.14"></script> + <link rel="stylesheet" href="{{ url_for('static', path='style.css') }}" /> + <link + rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.amber.min.css" + /> + </head> + <body hx-ext="preload"> + <main class="container"> + <div id="content">{% include content %}</div> + </main> + </body> </html> diff --git a/src/simple_web_app/templates/index.html b/src/simple_web_app/templates/index.html @@ -1,48 +1,176 @@ <div id="login"> <!-- <article> --> - <nav> - <ul> - <li><a href="/" class="secondary"><img src="https://kite.kagi.com/svg/kagi_news_compact_dark.svg"></img></a></li> - </ul> - <ul> - <li><strong style="cursor: pointer;" data-tooltip="Choose another date" data-placement="bottom">Tuesday, September 30</strong></li> - </ul> - <ul> - <li><a id="search-btn" style="cursor: pointer;" data-tooltip="Search" hx-trigger="click, keyup[ctrlKey&&shiftKey&&key=='O']" hx-get="{{ url_for('search_page') }}" hx-target="#modal-placeholder" hx-swap="innerHTML" preload class="secondary"><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg></a></li> - <li><a id="font-size-btn" data-tooltip="Change font size" class="secondary"><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M349.1 114.7C343.9 103.3 332.5 96 320 96C307.5 96 296.1 103.3 290.9 114.7L123.5 480L112 480C94.3 480 80 494.3 80 512C80 529.7 94.3 544 112 544L200 544C217.7 544 232 529.7 232 512C232 494.3 217.7 480 200 480L193.9 480L215.9 432L424.2 432L446.2 480L440.1 480C422.4 480 408.1 494.3 408.1 512C408.1 529.7 422.4 544 440.1 544L528.1 544C545.8 544 560.1 529.7 560.1 512C560.1 494.3 545.8 480 528.1 480L516.6 480L349.2 114.7zM394.8 368L245.2 368L320 204.8L394.8 368z"/></svg></a></li> - <li><a id="settings-btn" style="cursor: pointer;" data-tooltip="Settings" hx-get="{{ url_for('settings_page') }}" hx-target="#modal-placeholder" hx-swap="innerHTML" preload class="secondary"><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z"/></svg></a></li> - </ul> - </nav> + <nav> + <ul> + <li> + <a href="/" class="secondary" + ><img src="https://kite.kagi.com/svg/kagi_news_compact_dark.svg" + /></a> + </li> + </ul> + <ul> + <li> + <strong + style="cursor: pointer" + data-tooltip="Choose another date" + data-placement="bottom" + >Tuesday, September 30</strong + > + </li> + </ul> + <ul> + <li> + <a + id="search-btn" + style="cursor: pointer" + data-tooltip="Search" + hx-trigger="click, keyup[ctrlKey&&shiftKey&&key=='O']" + hx-get="{{ url_for('search_page') }}" + hx-target="#modal-placeholder" + hx-swap="innerHTML" + preload + class="secondary" + ><svg + height="20pt" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 640 640" + > + <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> + <path + d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z" + /></svg + ></a> + </li> + <li> + <a id="font-size-btn" data-tooltip="Change font size" class="secondary" + ><svg + height="20pt" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 640 640" + > + <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> + <path + d="M349.1 114.7C343.9 103.3 332.5 96 320 96C307.5 96 296.1 103.3 290.9 114.7L123.5 480L112 480C94.3 480 80 494.3 80 512C80 529.7 94.3 544 112 544L200 544C217.7 544 232 529.7 232 512C232 494.3 217.7 480 200 480L193.9 480L215.9 432L424.2 432L446.2 480L440.1 480C422.4 480 408.1 494.3 408.1 512C408.1 529.7 422.4 544 440.1 544L528.1 544C545.8 544 560.1 529.7 560.1 512C560.1 494.3 545.8 480 528.1 480L516.6 480L349.2 114.7zM394.8 368L245.2 368L320 204.8L394.8 368z" + /></svg + ></a> + </li> + <li> + <a + id="settings-btn" + style="cursor: pointer" + data-tooltip="Settings" + hx-get="{{ url_for('settings_page') }}" + hx-target="#modal-placeholder" + hx-swap="innerHTML" + preload + class="secondary" + ><svg + height="20pt" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 640 640" + > + <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> + <path + d="M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z" + /></svg + ></a> + </li> + </ul> + </nav> - <div class="overflow-auto" style="text-wrap: nowrap;"> + <div class="overflow-auto" style="text-wrap: nowrap"> <table> <tr> - {% for category in categories %} - <th><div hx-get="{{ url_for('news_page').include_query_params(category_id=category.id) }}" hx-target="#news-cards" preload style="cursor: pointer;">{{ category.name }}</div></th> - {% endfor %} + {% for category in categories %} + <th> + <div + hx-get="{{ url_for('news_page').include_query_params(category_id=category.id) }}" + hx-target="#news-cards" + preload + style="cursor: pointer" + > + {{ category.name }} + </div> + </th> + {% endfor %} </tr> </table> - </div> + </div> - <div id="modal-placeholder"></div> - <div id="news-cards-with-buttons"> - <div id="news-cards"> - {% include 'news_cards.html' %} - </div> - <nav><ul></ul><ul><li>{% include 'load_more.html' %}</li><li> <button>Mark all as read</button></li></ul><ul></ul></nav> - </div> + <div id="modal-placeholder"></div> + <div id="news-cards-with-buttons"> + <div id="news-cards">{% include 'news_cards.html' %}</div> + <nav> + <ul></ul> + <ul> + <li>{% include 'load_more.html' %}</li> + <li><button>Mark all as read</button></li> + </ul> + <ul></ul> + </nav> + </div> <!-- </article> --> - <footer> - <nav> + <footer> + <nav> <ul></ul> <ul> - <li><a href="https://github.com/silasbrack/simple-web-app"><svg height="24pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M237.9 461.4C237.9 463.4 235.6 465 232.7 465C229.4 465.3 227.1 463.7 227.1 461.4C227.1 459.4 229.4 457.8 232.3 457.8C235.3 457.5 237.9 459.1 237.9 461.4zM206.8 456.9C206.1 458.9 208.1 461.2 211.1 461.8C213.7 462.8 216.7 461.8 217.3 459.8C217.9 457.8 216 455.5 213 454.6C210.4 453.9 207.5 454.9 206.8 456.9zM251 455.2C248.1 455.9 246.1 457.8 246.4 460.1C246.7 462.1 249.3 463.4 252.3 462.7C255.2 462 257.2 460.1 256.9 458.1C256.6 456.2 253.9 454.9 251 455.2zM316.8 72C178.1 72 72 177.3 72 316C72 426.9 141.8 521.8 241.5 555.2C254.3 557.5 258.8 549.6 258.8 543.1C258.8 536.9 258.5 502.7 258.5 481.7C258.5 481.7 188.5 496.7 173.8 451.9C173.8 451.9 162.4 422.8 146 415.3C146 415.3 123.1 399.6 147.6 399.9C147.6 399.9 172.5 401.9 186.2 425.7C208.1 464.3 244.8 453.2 259.1 446.6C261.4 430.6 267.9 419.5 275.1 412.9C219.2 406.7 162.8 398.6 162.8 302.4C162.8 274.9 170.4 261.1 186.4 243.5C183.8 237 175.3 210.2 189 175.6C209.9 169.1 258 202.6 258 202.6C278 197 299.5 194.1 320.8 194.1C342.1 194.1 363.6 197 383.6 202.6C383.6 202.6 431.7 169 452.6 175.6C466.3 210.3 457.8 237 455.2 243.5C471.2 261.2 481 275 481 302.4C481 398.9 422.1 406.6 366.2 412.9C375.4 420.8 383.2 435.8 383.2 459.3C383.2 493 382.9 534.7 382.9 542.9C382.9 549.4 387.5 557.3 400.2 555C500.2 521.8 568 426.9 568 316C568 177.3 455.5 72 316.8 72zM169.2 416.9C167.9 417.9 168.2 420.2 169.9 422.1C171.5 423.7 173.8 424.4 175.1 423.1C176.4 422.1 176.1 419.8 174.4 417.9C172.8 416.3 170.5 415.6 169.2 416.9zM158.4 408.8C157.7 410.1 158.7 411.7 160.7 412.7C162.3 413.7 164.3 413.4 165 412C165.7 410.7 164.7 409.1 162.7 408.1C160.7 407.5 159.1 407.8 158.4 408.8zM190.8 444.4C189.2 445.7 189.8 448.7 192.1 450.6C194.4 452.9 197.3 453.2 198.6 451.6C199.9 450.3 199.3 447.3 197.3 445.4C195.1 443.1 192.1 442.8 190.8 444.4zM179.4 429.7C177.8 430.7 177.8 433.3 179.4 435.6C181 437.9 183.7 438.9 185 437.9C186.6 436.6 186.6 434 185 431.7C183.6 429.4 181 428.4 179.4 429.7z"/></svg> Contribute</a></li> + <li> + <a href="https://github.com/silasbrack/simple-web-app" + ><svg + height="24pt" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 640 640" + > + <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> + <path + d="M237.9 461.4C237.9 463.4 235.6 465 232.7 465C229.4 465.3 227.1 463.7 227.1 461.4C227.1 459.4 229.4 457.8 232.3 457.8C235.3 457.5 237.9 459.1 237.9 461.4zM206.8 456.9C206.1 458.9 208.1 461.2 211.1 461.8C213.7 462.8 216.7 461.8 217.3 459.8C217.9 457.8 216 455.5 213 454.6C210.4 453.9 207.5 454.9 206.8 456.9zM251 455.2C248.1 455.9 246.1 457.8 246.4 460.1C246.7 462.1 249.3 463.4 252.3 462.7C255.2 462 257.2 460.1 256.9 458.1C256.6 456.2 253.9 454.9 251 455.2zM316.8 72C178.1 72 72 177.3 72 316C72 426.9 141.8 521.8 241.5 555.2C254.3 557.5 258.8 549.6 258.8 543.1C258.8 536.9 258.5 502.7 258.5 481.7C258.5 481.7 188.5 496.7 173.8 451.9C173.8 451.9 162.4 422.8 146 415.3C146 415.3 123.1 399.6 147.6 399.9C147.6 399.9 172.5 401.9 186.2 425.7C208.1 464.3 244.8 453.2 259.1 446.6C261.4 430.6 267.9 419.5 275.1 412.9C219.2 406.7 162.8 398.6 162.8 302.4C162.8 274.9 170.4 261.1 186.4 243.5C183.8 237 175.3 210.2 189 175.6C209.9 169.1 258 202.6 258 202.6C278 197 299.5 194.1 320.8 194.1C342.1 194.1 363.6 197 383.6 202.6C383.6 202.6 431.7 169 452.6 175.6C466.3 210.3 457.8 237 455.2 243.5C471.2 261.2 481 275 481 302.4C481 398.9 422.1 406.6 366.2 412.9C375.4 420.8 383.2 435.8 383.2 459.3C383.2 493 382.9 534.7 382.9 542.9C382.9 549.4 387.5 557.3 400.2 555C500.2 521.8 568 426.9 568 316C568 177.3 455.5 72 316.8 72zM169.2 416.9C167.9 417.9 168.2 420.2 169.9 422.1C171.5 423.7 173.8 424.4 175.1 423.1C176.4 422.1 176.1 419.8 174.4 417.9C172.8 416.3 170.5 415.6 169.2 416.9zM158.4 408.8C157.7 410.1 158.7 411.7 160.7 412.7C162.3 413.7 164.3 413.4 165 412C165.7 410.7 164.7 409.1 162.7 408.1C160.7 407.5 159.1 407.8 158.4 408.8zM190.8 444.4C189.2 445.7 189.8 448.7 192.1 450.6C194.4 452.9 197.3 453.2 198.6 451.6C199.9 450.3 199.3 447.3 197.3 445.4C195.1 443.1 192.1 442.8 190.8 444.4zM179.4 429.7C177.8 430.7 177.8 433.3 179.4 435.6C181 437.9 183.7 438.9 185 437.9C186.6 436.6 186.6 434 185 431.7C183.6 429.4 181 428.4 179.4 429.7z" + /> + </svg> + Contribute</a + > + </li> - <li><a href=""><svg height="20pt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /> </svg> About</a></li> - - <li><a href=""><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" /> </svg> RSS Feed</a></li> + <li> + <a href="" + ><svg + height="20pt" + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="size-6" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" + /> + </svg> + About</a + > + </li> + + <li> + <a href="" + ><svg + height="20pt" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="currentColor" + class="size-6" + > + <path + fill-rule="evenodd" + d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" + clip-rule="evenodd" + /> + </svg> + RSS Feed</a + > + </li> </ul> <ul></ul> - </nav> - </footer> + </nav> + </footer> </div> diff --git a/src/simple_web_app/templates/load_more.html b/src/simple_web_app/templates/load_more.html @@ -1 +1,24 @@ -<button id="load-more-btn" {%- if reached_end %} disabled{% endif %} {% if oob %}hx-swap-oob="true"{% endif %} hx-target="#news-cards" hx-swap="beforeend" hx-get="{{ url_for('news_page') }}?page={{ page + 1 }}¤t_time={{ current_time }}{% if category_id %}&category_id={{ category_id }}{% endif %}" preload class="secondary">Load more</button> +<button + id="load-more-btn" + {%- + if + reached_end + %} + disabled{% + endif + %} + {% + if + oob + %}hx-swap-oob="true" + {% + endif + %} + hx-target="#news-cards" + hx-swap="beforeend" + hx-get="{{ url_for('news_page') }}?page={{ page + 1 }}¤t_time={{ current_time }}{% if category_id %}&category_id={{ category_id }}{% endif %}" + preload + class="secondary" +> + Load more +</button> diff --git a/src/simple_web_app/templates/news_card.html b/src/simple_web_app/templates/news_card.html @@ -1,21 +1,30 @@ <header> -<nav><ul> -{% for category in new.categories %} -<li><div style="cursor: pointer;" hx-get="{{ url_for('news_page').include_query_params(category_id=category.id) }}" hx-target="#news-cards" preload><small>{{ category.name }}</small></div></small></li> -{% endfor %} -</ul></nav> + <nav> + <ul> + {% for category in new.categories %} + <li> + <div + style="cursor: pointer" + hx-get="{{ url_for('news_page').include_query_params(category_id=category.id) }}" + hx-target="#news-cards" + preload + > + <small>{{ category.name }}</small> + </div> + </li> + {% endfor %} + </ul> + </nav> </header> <details> -<summary> -<strong>{{ new.title }}</strong> -</summary> -<p><small>{{ new.text }}</small></p> + <summary> + <strong>{{ new.title }}</strong> + </summary> + <p><small>{{ new.text }}</small></p> </details> <footer> <small> - <em> - {{ new.time_since_published }} - </em> + <em> {{ new.time_since_published }} </em> </small> </footer> -<hr> +<hr /> diff --git a/src/simple_web_app/templates/news_cards.html b/src/simple_web_app/templates/news_cards.html @@ -1,3 +1 @@ -{% for new in news %} -{% include 'news_card.html' %} -{% endfor %} +{% for new in news %} {% include 'news_card.html' %} {% endfor %} diff --git a/src/simple_web_app/templates/oob_swap.html b/src/simple_web_app/templates/oob_swap.html @@ -1,2 +1 @@ -{% include 'news_cards.html' %} -{% include 'load_more.html' %} +{% include 'news_cards.html' %} {% include 'load_more.html' %} diff --git a/src/simple_web_app/templates/search.html b/src/simple_web_app/templates/search.html @@ -1,32 +1,39 @@ -<div id="search-modal" class="modal-is-open modal-is-opening" _="on closeModal remove .modal-is-opening then wait 10 then add .modal-is-closing then wait for animationend then remove me"> -<dialog _="on click if target is me then trigger closeModal" open> - <article> - <h3> - Search News - <span class="htmx-indicator"> - <img src="/img/bars.svg"/> Searching... - </span> - </h3> - <input class="form-control" type="search" - name="search" placeholder="Begin typing to search in news" - hx-post="/search" - hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load" - hx-target="#search-results" - hx-indicator=".htmx-indicator"> - - <div class="overflow-auto"> - <table class="table"> - <tbody id="search-results"> - </tbody> - </table> - </div> +<div + id="search-modal" + class="modal-is-open modal-is-opening" + _="on closeModal remove .modal-is-opening then wait 10 then add .modal-is-closing then wait for animationend then remove me" +> + <dialog _="on click if target is me then trigger closeModal" open> + <article> + <h3> + Search News + <span class="htmx-indicator"> + <img src="/img/bars.svg" /> Searching... + </span> + </h3> + <input + class="form-control" + type="search" + name="search" + placeholder="Begin typing to search in news" + hx-post="/search" + hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load" + hx-target="#search-results" + hx-indicator=".htmx-indicator" + /> - <footer> - <button _="on click trigger closeModal" class="secondary"> - Cancel - </button> - <button>Confirm</button> - </footer> - </article> -</dialog> + <div class="overflow-auto"> + <table class="table"> + <tbody id="search-results"></tbody> + </table> + </div> + + <footer> + <button _="on click trigger closeModal" class="secondary"> + Cancel + </button> + <button>Confirm</button> + </footer> + </article> + </dialog> </div> diff --git a/src/simple_web_app/templates/search_results.html b/src/simple_web_app/templates/search_results.html @@ -1,13 +1,10 @@ {% for new in news %} <tr> -<td> - <details> - <summary> - {{ new.title }} - </summary> - <p><small>{{ new.text }}</small></p> - </details> -</td> + <td> + <details> + <summary>{{ new.title }}</summary> + <p><small>{{ new.text }}</small></p> + </details> + </td> </tr> {% endfor %} - diff --git a/src/simple_web_app/templates/settings.html b/src/simple_web_app/templates/settings.html @@ -1,28 +1,96 @@ -<div id="settings-modal" class="modal-is-open modal-is-opening" _="on closeModal remove .modal-is-opening then wait 10 then add .modal-is-closing then wait for animationend then remove me"> -<dialog _="on click if target is me then trigger closeModal" open> - <article> - <div class="overflow-auto" style="text-wrap: nowrap;"> - <nav> - <ul> - <li><div id="general-tab" hx-get="{{ url_for('settings_tab').include_query_params(tab='general') }}" hx-target="#settings-tab" hx-swap="innerHTML" preload style="cursor: pointer;">General</div></li> - <li><div id="categories-tab" hx-get="{{ url_for('settings_tab').include_query_params(tab='categories') }}" hx-target="#settings-tab" hx-swap="innerHTML" preload style="cursor: pointer;">Categories</div></li> - <li><div id="sections-tab" hx-get="{{ url_for('settings_tab').include_query_params(tab='sections') }}" hx-target="#settings-tab" hx-swap="innerHTML" preload style="cursor: pointer;">Sections</div></li> - <li><div id="content-filter-tab" hx-get="{{ url_for('settings_tab').include_query_params(tab='content-filter') }}" hx-target="#settings-tab" hx-swap="innerHTML" preload style="cursor: pointer;">Content Filter</div></li> - <li><div id="syncing-tab" hx-get="{{ url_for('settings_tab').include_query_params(tab='syncing') }}" hx-target="#settings-tab" hx-swap="innerHTML" preload style="cursor: pointer;">Syncing</div></li> - <li><div id="experimental-tab" hx-get="{{ url_for('settings_tab').include_query_params(tab='experimental') }}" hx-target="#settings-tab" hx-swap="innerHTML" preload style="cursor: pointer;">Experimental</div></li> - </ul> - </nav> - </div> - <hr> - <div id="settings-tab"> - {% include 'settings_tab.html' %} - </div> - <footer> - <button _="on click trigger closeModal" class="secondary"> - Cancel - </button> - <button>Save</button> - </footer> - </article> -</dialog> +<div + id="settings-modal" + class="modal-is-open modal-is-opening" + _="on closeModal remove .modal-is-opening then wait 10 then add .modal-is-closing then wait for animationend then remove me" +> + <dialog _="on click if target is me then trigger closeModal" open> + <article> + <div class="overflow-auto" style="text-wrap: nowrap"> + <nav> + <ul> + <li> + <div + id="general-tab" + hx-get="{{ url_for('settings_tab').include_query_params(tab='general') }}" + hx-target="#settings-tab" + hx-swap="innerHTML" + preload + style="cursor: pointer" + > + General + </div> + </li> + <li> + <div + id="categories-tab" + hx-get="{{ url_for('settings_tab').include_query_params(tab='categories') }}" + hx-target="#settings-tab" + hx-swap="innerHTML" + preload + style="cursor: pointer" + > + Categories + </div> + </li> + <li> + <div + id="sections-tab" + hx-get="{{ url_for('settings_tab').include_query_params(tab='sections') }}" + hx-target="#settings-tab" + hx-swap="innerHTML" + preload + style="cursor: pointer" + > + Sections + </div> + </li> + <li> + <div + id="content-filter-tab" + hx-get="{{ url_for('settings_tab').include_query_params(tab='content-filter') }}" + hx-target="#settings-tab" + hx-swap="innerHTML" + preload + style="cursor: pointer" + > + Content Filter + </div> + </li> + <li> + <div + id="syncing-tab" + hx-get="{{ url_for('settings_tab').include_query_params(tab='syncing') }}" + hx-target="#settings-tab" + hx-swap="innerHTML" + preload + style="cursor: pointer" + > + Syncing + </div> + </li> + <li> + <div + id="experimental-tab" + hx-get="{{ url_for('settings_tab').include_query_params(tab='experimental') }}" + hx-target="#settings-tab" + hx-swap="innerHTML" + preload + style="cursor: pointer" + > + Experimental + </div> + </li> + </ul> + </nav> + </div> + <hr /> + <div id="settings-tab">{% include 'settings_tab.html' %}</div> + <footer> + <button _="on click trigger closeModal" class="secondary"> + Cancel + </button> + <button>Save</button> + </footer> + </article> + </dialog> </div> diff --git a/src/simple_web_app/templates/settings_tab.html b/src/simple_web_app/templates/settings_tab.html @@ -1,268 +1,501 @@ <section> -{% if tab == "general" %} -<h4>Appearance</h4> + {% if tab == "general" %} + <h4>Appearance</h4> -<label> -Theme -<details class="dropdown"> - <summary>System</summary> - <ul> - <li><a>System</a></li> - <li><a>Light</a></li> - <li><a>Dark</a></li> - </ul> -</details> -</label> + <label> + Theme + <details class="dropdown"> + <summary>System</summary> + <ul> + <li><a>System</a></li> + <li><a>Light</a></li> + <li><a>Dark</a></li> + </ul> + </details> + </label> -<label> -Font Size -<details class="dropdown"> - <summary>Normal</summary> - <ul> - <li><a href="#">Small</a></li> - <li><a href="#">Normal</a></li> - <li><a href="#">Large</a></li> - </ul> -</details> -</label> + <label> + Font Size + <details class="dropdown"> + <summary>Normal</summary> + <ul> + <li><a href="#">Small</a></li> + <li><a href="#">Normal</a></li> + <li><a href="#">Large</a></li> + </ul> + </details> + </label> -<h4>Language & Region</h4> + <h4>Language & Region</h4> -<label> -Interface Language -<details class="dropdown"> - <summary>English</summary> - <ul> - <li>English</li> - <li>Spanish</li> - <li>Danish</li> - <li>Chinese</li> - </ul> -</details> -</label> + <label> + Interface Language + <details class="dropdown"> + <summary>English</summary> + <ul> + <li>English</li> + <li>Spanish</li> + <li>Danish</li> + <li>Chinese</li> + </ul> + </details> + </label> -<label> -Content Language -<details class="dropdown"> - <summary>English</summary> - <ul> - <li>English</li> - <li>Spanish</li> - <li>Danish</li> - <li>Chinese</li> - </ul> -</details> -</label> + <label> + Content Language + <details class="dropdown"> + <summary>English</summary> + <ul> + <li>English</li> + <li>Spanish</li> + <li>Danish</li> + <li>Chinese</li> + </ul> + </details> + </label> -<h4>Reading Experience</h4> + <h4>Reading Experience</h4> -<label> -Number of Stories Shown: <output>10</output> -<input type="range" value="10" min="1" max="30" oninput="this.previousElementSibling.value = this.value"/> -</label> + <label> + Number of Stories Shown: <output>10</output> + <input + type="range" + value="10" + min="1" + max="30" + oninput="this.previousElementSibling.value = this.value" + /> + </label> -<label> -Story Open Mode -<details class="dropdown"> - <summary>Multiple stories</summary> - <ul> - <li>Multiple stories</li> - <li>One story at a time</li> - </ul> -</details> -</label> + <label> + Story Open Mode + <details class="dropdown"> + <summary>Multiple stories</summary> + <ul> + <li>Multiple stories</li> + <li>One story at a time</li> + </ul> + </details> + </label> -<label> -Story Expand Mode -<details class="dropdown"> - <summary>Double-click to expand all</summary> - <ul> - <li>Always expand all</li> - <li>Double-click to expand all</li> - <li>Never expand all</li> - </ul> -</details> -</label> + <label> + Story Expand Mode + <details class="dropdown"> + <summary>Double-click to expand all</summary> + <ul> + <li>Always expand all</li> + <li>Double-click to expand all</li> + <li>Never expand all</li> + </ul> + </details> + </label> -<h4>Navigation</h4> + <h4>Navigation</h4> -<label> - Use Latest URLs -<details class="dropdown"> - <summary>Disabled</summary> - <ul> - <li>Disabled</li> - <li>Enabled</li> - </ul> -</details> -</label> + <label> + Use Latest URLs + <details class="dropdown"> + <summary>Disabled</summary> + <ul> + <li>Disabled</li> + <li>Enabled</li> + </ul> + </details> + </label> -<h4>About</h4> + <h4>About</h4> -<label> - Maps Provider -<details class="dropdown"> - <summary>Auto</summary> - <ul> - <li>Auto</li> - <li>Kagi Maps</li> - <li>Google Maps</li> - <li>OpenStreetMap</li> - <li>Apple Maps</li> - </ul> -</details> -</label> -{% elif tab == "sections" %} -<hgroup> -<h4>Article Sections</h4> -<h6>Drag to reorder sections. Use the switch to enable/disable.</small> -</hgroup> -<article><nav><ul><li>Summary</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Primary Image</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Sources</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Highlights</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Quotes</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Secondary Image</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Perspectives</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Historical Background</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Humanitarian Impact</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Technical Details</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Business Angle</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Scientific Significance</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<article><nav><ul><li>Travel Advisory</li></ul><ul><li><label><input name="summary" type="checkbox" role="switch" /></label></li></ul></nav></article> -<nav><ul></ul><ul><li> -<button class="secondary">Reset Order</button> -<button>Toggle All</button> -</li></ul><ul></ul></nav> -{% elif tab == "content-filter" %} -<hgroup> -<h4>Filter Presets</h4> -<p>Select one or more preset filters to quickly hide common topics</p> -</hgroup> -<select aria-label="Topics" multiple size="6"> - <option>Cheese</option> - <option selected>Fruits</option> - <option selected>Nuts</option> - <option>Chocolate</option> - <option>Crackers</option> -</select> -<hgroup> -<h4>Custom Keywords</h4> -<p>Add your own keywords to filter, separated by commas</p> -</hgroup> -<input type="text" name="custom-keywords" placeholder="e.g., celebrity name, topic" aria-label="Custom Keywords"> -<hgroup> -<h4>Filter Mode</h4> -<p>Choose how filtered content is handled</p> -</hgroup> -<fieldset> <label> - <input type="radio" name="language" checked /> - Hide completely + Maps Provider + <details class="dropdown"> + <summary>Auto</summary> + <ul> + <li>Auto</li> + <li>Kagi Maps</li> + <li>Google Maps</li> + <li>OpenStreetMap</li> + <li>Apple Maps</li> + </ul> + </details> + </label> + {% elif tab == "sections" %} + <hgroup> + <h4>Article Sections</h4> + <h6>Drag to reorder sections. Use the switch to enable/disable.</h6> + </hgroup> + <article> + <nav> + <ul> + <li>Summary</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Primary Image</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Sources</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Highlights</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Quotes</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Secondary Image</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Perspectives</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Historical Background</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Humanitarian Impact</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Technical Details</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Business Angle</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Scientific Significance</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li>Travel Advisory</li> + </ul> + <ul> + <li> + <label><input name="summary" type="checkbox" role="switch" /></label> + </li> + </ul> + </nav> + </article> + <nav> + <ul></ul> + <ul> + <li> + <button class="secondary">Reset Order</button> + <button>Toggle All</button> + </li> + </ul> + <ul></ul> + </nav> + {% elif tab == "content-filter" %} + <hgroup> + <h4>Filter Presets</h4> + <p>Select one or more preset filters to quickly hide common topics</p> + </hgroup> + <select aria-label="Topics" multiple size="6"> + <option>Cheese</option> + <option selected>Fruits</option> + <option selected>Nuts</option> + <option>Chocolate</option> + <option>Crackers</option> + </select> + <hgroup> + <h4>Custom Keywords</h4> + <p>Add your own keywords to filter, separated by commas</p> + </hgroup> + <input + type="text" + name="custom-keywords" + placeholder="e.g., celebrity name, topic" + aria-label="Custom Keywords" + /> + <hgroup> + <h4>Filter Mode</h4> + <p>Choose how filtered content is handled</p> + </hgroup> + <fieldset> + <label> + <input type="radio" name="language" checked /> + Hide completely + </label> + <label> + <input type="radio" name="language" /> + Blur with warning + </label> + </fieldset> + <hgroup> + <h4>Filter Scope</h4> + <p>Choose which parts of stories to check for keywords</p> + </hgroup> + <select name="filter-scope" required> + <option>Title only</option> + <option>Title and summary</option> + <option selected>All content</option> + </select> + <nav> + <ul> + <li> + <hgroup> + <h4>Show Filtered Count</h4> + <p>Display number of filtered stories in each category</p> + </hgroup> + </li> + </ul> + <ul> + <li> + <input name="terms" type="checkbox" role="switch" /> + </li> + </ul> + </nav> + <hr /> + <hgroup> + <h4>Backup & Restore</h4> + <p> + Export your filter settings to a file or import from a previous backup + </p> + </hgroup> + <button class="secondary">Export Settings</button> + <button>Import Settings</button> + <hr /> + <button class="outline">Reset Content Filter Settings to Defaults</button> + {% elif tab == "syncing" %} + <p> + Kagi News can sync your settings and read history across all your devices. + This data is stored securely on Kagi servers and associated with your Kagi + Search account. Your synced data is not used for any other purpose, not + shared with anyone, and is solely stored to provide the sync service to you. + You have full control over what gets synced and can delete your data at any + time. + </p> + <h4>Sync Preferences</h4> + <label> + <input + name="sync-settings" + type="checkbox" + role="switch" + aria-describedby="sync-settings-description" + /> + Sync Settings </label> <label> - <input type="radio" name="language" /> - Blur with warning + <input + name="sync-read-history" + type="checkbox" + role="switch" + aria-describedby="email-helper" + /> + Sync Read History </label> -</fieldset> -<hgroup> -<h4>Filter Scope</h4> -<p>Choose which parts of stories to check for keywords</p> -</hgroup> -<select name="filter-scope" required> - <option>Title only</option> - <option>Title and summary</option> - <option selected>All content</option> -</select> -<nav> -<ul><li> -<hgroup> -<h4>Show Filtered Count</h4> -<p>Display number of filtered stories in each category</p> -</hgroup> -</li></ul> -<ul><li> -<input name="terms" type="checkbox" role="switch" /> -</li></ul> -</nav> -<hr> -<hgroup> -<h4>Backup & Restore</h4> -<p>Export your filter settings to a file or import from a previous backup</p> -</hgroup> -<button class="secondary">Export Settings</button> -<button>Import Settings</button> -<hr> -<button class="outline">Reset Content Filter Settings to Defaults</button> -{% elif tab == "syncing" %} -<p> -Kagi News can sync your settings and read history across all your devices. This data is stored securely on Kagi servers and associated with your Kagi Search account. Your synced data is not used for any other purpose, not shared with anyone, and is solely stored to provide the sync service to you. You have full control over what gets synced and can delete your data at any time. -</p> -<h4>Sync Preferences</h4> -<label> - <input name="sync-settings" type="checkbox" role="switch" aria-describedby="sync-settings-description"/> - Sync Settings -</label> -<label> - <input name="sync-read-history" type="checkbox" role="switch" aria-describedby="email-helper"/> - Sync Read History -</label> -<br> -<h4>Data Management</h4> -<p> -You are in control of your data. Export or delete your cloud data at any time. Deletion does not affect local data. -</p> -<button class="secondary">Export Data</button> -<button>Clear All Synced Data</button> -{% elif tab == "experimental" %} -<p>⚠️ These are experimental features that may be changed or removed at any time.</p> -<article> -<nav> -<ul><li> -<hgroup> -<h4>Show icons next to articles</h4> -<p>When enabled, small icons will be displayed next to articles to provide visual context.</p> -</hgroup> -</li></ul> -<ul><li> - <input name="show-icons-next-to-articles" type="checkbox" role="switch"/> -</li></ul> -</article> -<article> -<nav> -<ul><li> -<hgroup> -<h4>Show icons in category labels</h4> -<p>When enabled, small icons will be displayed next to category labels to provide visual context.</p> -</hgroup> -</li></ul> -<ul><li> - <input name="show-icons-next-to-category-labels" type="checkbox" role="switch"/> -</li></ul> -</article> -<article> -<nav> -<ul><li> -<hgroup> -<h4>Disable horizontal category swiping</h4> -<p>When enabled, horizontal swiping to change categories on mobile devices will be disabled.</p> -</hgroup> -</li></ul> -<ul><li> - <input name="disable-horizontal-category-swiping" type="checkbox" role="switch"/> -</li></ul> -</article> -<article> -<nav> -<ul><li> -<hgroup> -<h4>Show World Tension Index</h4> -<p>Display a global temperature reading of world stability based on current events.</p> -</hgroup> -</li></ul> -<ul><li> - <input name="show-icons-next-to-articles" type="checkbox" role="switch"/> -</li></ul> -</article> -{% endif %} + <br /> + <h4>Data Management</h4> + <p> + You are in control of your data. Export or delete your cloud data at any + time. Deletion does not affect local data. + </p> + <button class="secondary">Export Data</button> + <button>Clear All Synced Data</button> + {% elif tab == "experimental" %} + <p> + ⚠️ These are experimental features that may be changed or removed at any + time. + </p> + <article> + <nav> + <ul> + <li> + <hgroup> + <h4>Show icons next to articles</h4> + <p> + When enabled, small icons will be displayed next to articles to + provide visual context. + </p> + </hgroup> + </li> + </ul> + <ul> + <li> + <input + name="show-icons-next-to-articles" + type="checkbox" + role="switch" + /> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li> + <hgroup> + <h4>Show icons in category labels</h4> + <p> + When enabled, small icons will be displayed next to category + labels to provide visual context. + </p> + </hgroup> + </li> + </ul> + <ul> + <li> + <input + name="show-icons-next-to-category-labels" + type="checkbox" + role="switch" + /> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li> + <hgroup> + <h4>Disable horizontal category swiping</h4> + <p> + When enabled, horizontal swiping to change categories on mobile + devices will be disabled. + </p> + </hgroup> + </li> + </ul> + <ul> + <li> + <input + name="disable-horizontal-category-swiping" + type="checkbox" + role="switch" + /> + </li> + </ul> + </nav> + </article> + <article> + <nav> + <ul> + <li> + <hgroup> + <h4>Show World Tension Index</h4> + <p> + Display a global temperature reading of world stability based on + current events. + </p> + </hgroup> + </li> + </ul> + <ul> + <li> + <input + name="show-icons-next-to-articles" + type="checkbox" + role="switch" + /> + </li> + </ul> + </nav> + </article> + {% endif %} </section>