Files
RustBox/ui/index.html
T
Mateusz Gruszczyński bc5fbd6ba9
RustBox CI / rustbox (push) Waiting to run
first commit
2026-10-29 15:24:59 +01:00

699 lines
86 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" data-base-path="__RUSTBOX_BASE_PATH__" data-theme="dark" data-density="compact" data-preview="right">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="color-scheme" content="dark light">
<meta name="description" content="RustBox webmail">
<title>RustBox</title>
<link rel="icon" href="__RUSTBOX_ASSET_PREFIX__/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="__RUSTBOX_ASSET_PREFIX__/assets/app.css">
</head>
<body>
<div id="boot" class="boot-screen" aria-live="polite">
<svg class="boot-icon" aria-hidden="true"><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use></svg>
<strong>RustBox</strong>
</div>
<section id="login-view" class="login-view hidden" aria-label="Sign in">
<div class="login-panel">
<header class="login-brand">
<svg class="brand-icon" aria-hidden="true"><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use></svg>
<div><strong>RustBox</strong><span>Webmail</span></div>
</header>
<form id="login-form" autocomplete="on" class="login-form">
<label><span>Email</span><input id="login-email" type="email" autocomplete="username" required autofocus></label>
<label><span>Password</span><input id="login-password" type="password" autocomplete="current-password" required></label>
<label id="login-remember-row" class="checkbox-row"><input id="login-remember" type="checkbox"><span id="login-remember-label">Keep me signed in</span></label>
<div id="login-error" class="form-error hidden" role="alert"></div>
<button class="button primary wide" type="submit">Sign in</button>
</form>
<footer>RustBox __RUSTBOX_VERSION__</footer>
</div>
</section>
<main id="app-view" class="app-view hidden">
<div id="offline-banner" class="offline-banner hidden" role="status" aria-live="polite"></div>
<header class="appbar">
<div class="app-brand">
<svg class="brand-icon" aria-hidden="true"><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use></svg>
<strong>RustBox</strong>
</div>
<form id="search-form" class="search-field" role="search">
<svg aria-hidden="true"><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-search"></use></svg>
<input id="search-input" autocomplete="off" placeholder="Search mail" data-i18n-placeholder="search_mail">
<button id="advanced-search-btn" class="search-filter-button" type="button" title="Advanced search" aria-label="Advanced search"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-sliders"></use></svg></button>
<kbd>/</kbd>
</form>
<div class="appbar-actions">
<button id="contacts-btn" class="icon-button" type="button" title="Contacts" aria-label="Contacts"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-user-round"></use></svg></button>
<button id="calendar-btn" class="icon-button" type="button" title="Calendar" aria-label="Calendar"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-calendar-days"></use></svg></button>
<button id="settings-btn" class="icon-button" type="button" title="Settings" aria-label="Settings"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-settings"></use></svg></button>
<button id="logout-btn" class="icon-button" type="button" title="Sign out" aria-label="Sign out"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-log-out"></use></svg></button>
<div class="account-summary"><span id="account-email">—</span><span id="connection-label">Connecting</span></div>
</div>
</header>
<div class="mail-shell">
<aside id="folder-pane" class="folder-pane">
<button id="compose-btn" class="button primary compose-button" type="button">
<svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-square-pen"></use></svg><span data-i18n="compose">Compose</span>
</button>
<div class="section-heading"><span>Folders</span><button id="folder-manage-btn" class="icon-button small" type="button" title="Manage folders" aria-label="Manage folders"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-folder-plus"></use></svg></button></div>
<nav id="folder-list" class="folder-list" aria-label="Mail folders"></nav>
<div class="section-heading label-heading"><span>Labels</span><button id="tag-add-btn" class="icon-button small" type="button" title="New label" aria-label="New label"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-plus"></use></svg></button></div>
<nav id="tag-list" class="folder-list tag-list" aria-label="Message labels"></nav>
<div class="folder-pane-footer"><span id="mail-server-label">IMAP</span><span>RustBox __RUSTBOX_VERSION__</span></div>
<div id="folder-resizer" class="pane-resizer" role="separator" aria-orientation="vertical" aria-label="Resize folder pane"></div>
</aside>
<section class="message-pane">
<div class="pane-toolbar">
<div class="pane-title"><button id="mobile-folders" class="icon-button mobile-only" type="button" aria-label="Folders"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-menu"></use></svg></button><div><strong id="folder-title">Inbox</strong><span id="message-count">0 messages</span></div></div>
<div class="toolbar-actions">
<label class="list-sort-control"><span class="sr-only">Sort messages</span><select id="message-sort" title="Sort messages"><option value="date_desc">Newest</option><option value="date_asc">Oldest</option><option value="sender_asc">Sender A–Z</option><option value="sender_desc">Sender Z–A</option><option value="subject_asc">Subject A–Z</option><option value="subject_desc">Subject Z–A</option><option value="size_asc">Smallest</option><option value="size_desc">Largest</option></select></label>
<button id="select-mode-btn" class="icon-button" type="button" title="Select messages" aria-label="Select messages" aria-pressed="false"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-check-circle"></use></svg></button>
<button id="refresh-btn" class="icon-button" type="button" title="Refresh" aria-label="Refresh"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-refresh-cw"></use></svg></button>
</div>
</div>
<div id="bulk-toolbar" class="bulk-toolbar hidden" role="toolbar" aria-label="Actions for selected messages" aria-live="polite">
<label class="bulk-select"><input id="bulk-select-all" type="checkbox"><span id="bulk-count">0 selected</span></label>
<button id="bulk-select-search" class="button quiet hidden" type="button" data-i18n="select_all_results">Select all results</button>
<button id="bulk-read" class="button quiet" type="button">Mark read</button>
<button id="bulk-unread" class="button quiet" type="button">Mark unread</button>
<button id="bulk-flag" class="button quiet" type="button">Flag</button>
<button id="bulk-unflag" class="button quiet" type="button">Unflag</button>
<button id="bulk-archive" class="button quiet" type="button">Archive</button>
<button id="bulk-junk" class="button quiet" type="button" data-i18n="spam">Spam</button>
<label class="move-control"><span class="sr-only">Move selected</span><select id="bulk-move-select"><option value="">Move to…</option></select></label>
<label class="move-control"><span class="sr-only">Copy selected</span><select id="bulk-copy-select"><option value="">Copy to…</option></select></label>
<label class="move-control"><span class="sr-only">Label selected</span><select id="bulk-tag-select"><option value="">Add label…</option></select></label>
<span class="toolbar-spacer"></span>
<button id="bulk-delete" class="button quiet danger" type="button">Delete</button>
<button id="selection-done" class="button quiet" type="button">Done</button>
</div>
<div id="message-list" class="message-list" aria-live="polite"></div>
<button id="load-more" class="button quiet load-more hidden" type="button">Load more</button>
<div id="message-resizer" class="pane-resizer" role="separator" aria-orientation="vertical" aria-label="Resize message list"></div>
</section>
<section id="reader" class="reader-pane">
<div id="reader-empty" class="reader-empty">
<svg aria-hidden="true"><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail-open"></use></svg>
<strong>No message selected</strong><span>Select a message from the list.</span>
</div>
<article id="reader-content" class="reader-content hidden">
<div class="reader-toolbar">
<button id="reader-back" class="icon-button mobile-only" type="button" aria-label="Back"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-arrow-left"></use></svg></button>
<button id="reader-prev" class="icon-button" type="button" title="Previous message" aria-label="Previous message"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-arrow-left"></use></svg></button>
<button id="reader-next" class="icon-button" type="button" title="Next message" aria-label="Next message"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-chevron-right"></use></svg></button>
<button id="reply-btn" class="button quiet" type="button"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-reply"></use></svg><span>Reply</span></button>
<button id="reply-all-btn" class="button quiet" type="button"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-reply-all"></use></svg><span>Reply all</span></button>
<button id="forward-btn" class="button quiet" type="button"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-forward"></use></svg><span>Forward</span></button>
<button id="headers-btn" class="button quiet" type="button">Headers</button><button id="source-btn" class="button quiet" type="button" data-i18n="source">Source</button>
<button id="quick-filter-btn" class="icon-button" type="button" title="Create filter from sender" aria-label="Create filter from sender" data-i18n-title="create_filter_sender" data-i18n-aria-label="create_filter_sender"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-filter"></use></svg></button>
<button id="print-btn" class="icon-button" type="button" title="Print message" aria-label="Print message" data-i18n-title="print_message" data-i18n-aria-label="print_message"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-printer"></use></svg></button>
<button id="archive-btn" class="icon-button" type="button" title="Archive" aria-label="Archive"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-archive"></use></svg></button>
<button id="spam-btn" class="icon-button" type="button" title="Mark as spam" aria-label="Mark as spam" data-i18n-title="mark_spam" data-i18n-aria-label="mark_spam"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-shield-alert"></use></svg></button>
<button id="flag-btn" class="icon-button" type="button" title="Flag" aria-label="Flag"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-star"></use></svg></button>
<button id="unread-btn" class="icon-button" type="button" title="Mark read or unread" aria-label="Mark read or unread"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use></svg></button>
<label class="move-control"><span class="sr-only">Move to folder</span><select id="move-select"><option value="">Move to…</option></select></label>
<label class="move-control"><span class="sr-only">Copy to folder</span><select id="copy-select"><option value="">Copy to…</option></select></label>
<span class="toolbar-spacer"></span>
<button id="delete-btn" class="icon-button danger" type="button" title="Delete" aria-label="Delete"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-trash"></use></svg></button>
</div>
<header class="message-header">
<h1 id="reader-subject"></h1>
<div class="message-meta"><div class="avatar" id="reader-avatar">?</div><div class="sender"><strong id="reader-from"></strong><span id="reader-to"></span></div><time id="reader-date"></time></div>
</header>
<section id="thread-section" class="thread-section hidden"><div class="section-heading"><span id="thread-title">Thread</span><button id="thread-toggle" class="icon-button small" type="button" aria-label="Toggle thread"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-chevron-right"></use></svg></button></div><div id="thread-list" class="thread-list"></div></section>
<div id="attachment-list" class="attachment-list hidden"></div>
<div id="remote-image-bar" class="remote-image-bar hidden"><span>Remote images are blocked.</span><button id="remote-image-load" class="button quiet" type="button">Load images</button></div>
<div id="pgp-reader-bar" class="pgp-reader-bar hidden" role="status" aria-live="polite"><div><strong id="pgp-reader-title">OpenPGP</strong><span id="pgp-reader-status" class="muted"></span></div><div class="inline-actions"><button id="pgp-reader-process" class="button quiet small" type="button">Verify / decrypt</button><button id="pgp-reader-discover" class="button quiet small hidden" type="button">Find signer key</button></div></div>
<div id="message-body" class="message-body"></div>
</article>
</section>
</div>
</main>
<dialog id="compose-dialog" class="dialog compose-dialog">
<form id="compose-form" class="dialog-card compose-card" method="dialog">
<header class="dialog-header"><strong id="compose-title">New message</strong><div class="compose-header-actions"><button type="button" id="compose-recover" class="button quiet small" title="Recover a saved draft">Recover draft</button><button type="button" id="compose-fullscreen" class="icon-button compose-fullscreen-toggle" aria-label="Toggle full screen composer" aria-pressed="false" title="Full screen">⛶</button><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></div></header>
<div class="compose-addresses">
<label><span>From</span><select id="compose-from"><option value="">Account default</option></select></label>
<label><span>To</span><input id="compose-to" required autocomplete="off"></label>
<label><span>Cc</span><input id="compose-cc" autocomplete="off"></label>
<label><span>Bcc</span><input id="compose-bcc" autocomplete="off"></label>
<label><span>Subject</span><input id="compose-subject" autocomplete="off"></label>
<div class="compose-options-row"><span>Options</span><div class="compose-options"><label><span>Priority</span><select id="compose-priority"><option value="normal">Normal</option><option value="high">High</option><option value="low">Low</option></select></label><label id="compose-pgp-option" class="hidden"><span>OpenPGP</span><select id="compose-pgp-mode"><option value="none">Off</option><option value="sign">Sign</option><option value="encrypt">Encrypt</option><option value="sign-encrypt">Sign + encrypt</option></select></label><label class="compose-mdn-option"><input id="compose-mdn" type="checkbox"><span>Request read receipt</span></label></div></div>
<details id="compose-pgp-panel" class="compose-pgp-panel hidden"><summary><span class="compose-pgp-summary-title">OpenPGP</span><span id="compose-pgp-status" class="muted compose-pgp-summary-status">OpenPGP disabled</span><span class="compose-pgp-summary-action">Details</span></summary><div class="compose-pgp-details"><label class="checkbox-row"><input id="compose-pgp-inline" type="checkbox"><span>Inline OpenPGP (text only; PGP/MIME recommended)</span></label><label class="checkbox-row" id="compose-pgp-attach-sender-row"><input id="compose-pgp-attach-key" type="checkbox"><span>Attach my public OpenPGP key</span></label><label class="checkbox-row" id="compose-pgp-attach-recipient-row"><input id="compose-pgp-attach-recipient-keys" type="checkbox"><span>Attach public keys of To/Cc recipients</span></label><small id="compose-pgp-attach-recipient-help" class="muted compose-pgp-wide">Bcc recipient keys are never attached, so hidden recipients are not disclosed.</small><label id="compose-pgp-passphrase-row" class="compose-pgp-passphrase hidden"><span>Private-key passphrase</span><input id="compose-pgp-passphrase" type="password" autocomplete="off" maxlength="1024"></label><div class="inline-actions"><button id="compose-pgp-check" class="button quiet small" type="button">Check recipient keys</button><button id="compose-pgp-discover" class="button quiet small" type="button">Find missing keys</button></div></div></details>
</div>
<div class="editor-toolbar" aria-label="Formatting">
<button type="button" data-command="bold" title="Bold"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-bold"></use></svg></button>
<button type="button" data-command="italic" title="Italic"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-italic"></use></svg></button>
<button type="button" data-command="underline" title="Underline"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-underline"></use></svg></button>
<button type="button" data-command="strikeThrough" title="Strikethrough"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-strikethrough"></use></svg></button>
<span class="toolbar-separator"></span>
<label class="editor-select"><span class="sr-only">Font</span><select id="editor-font" title="Font"><option value="">Font</option><option value="Arial">Arial</option><option value="Georgia">Georgia</option><option value="Times New Roman">Times</option><option value="Courier New">Courier</option><option value="Verdana">Verdana</option></select></label>
<label class="editor-select"><span class="sr-only">Text size</span><select id="editor-size" title="Text size"><option value="">Size</option><option value="2">Small</option><option value="3">Normal</option><option value="4">Large</option><option value="5">Larger</option></select></label>
<label class="editor-color" title="Text color"><span class="sr-only">Text color</span><input id="editor-color" type="color" value="#222222"></label>
<span class="toolbar-separator"></span>
<button type="button" data-command="insertUnorderedList" title="Bullet list"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-list"></use></svg></button>
<button type="button" data-command="insertOrderedList" title="Numbered list"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-list-ordered"></use></svg></button>
<button type="button" data-command="formatBlock" data-command-value="blockquote" title="Quote"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-quote"></use></svg></button>
<button type="button" data-command="justifyLeft" title="Align left"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-align-left"></use></svg></button>
<button type="button" data-command="justifyCenter" title="Align center"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-align-center"></use></svg></button>
<button type="button" data-command="justifyRight" title="Align right"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-align-right"></use></svg></button>
<button type="button" id="editor-link" title="Insert link"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-link"></use></svg></button>
<button type="button" id="editor-image" title="Insert inline image"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-image"></use></svg></button><input id="compose-images" type="file" accept="image/png,image/jpeg,image/gif,image/webp" hidden>
<button type="button" id="editor-image-edit" title="Edit selected image" disabled><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-sliders"></use></svg></button>
<button type="button" data-command="removeFormat" title="Clear formatting"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-remove-format"></use></svg></button>
<button type="button" data-command="undo" title="Undo"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-undo"></use></svg></button>
<button type="button" data-command="redo" title="Redo"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-redo"></use></svg></button>
<button type="button" id="compose-attach" title="Attach files"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-paperclip"></use></svg></button><input id="compose-files" type="file" multiple hidden>
<button type="button" id="compose-markdown-preview" class="hidden" title="Preview Markdown"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-file-text"></use></svg></button>
<label class="compose-mode-control"><span class="sr-only">Compose format</span><select id="compose-mode"><option value="html">HTML</option><option value="text">Plain text</option><option value="markdown">Markdown</option></select></label>
</div>
<div id="compose-editor" class="compose-editor" contenteditable="true" role="textbox" aria-multiline="true"></div><div id="compose-upload-progress" class="compose-upload-progress hidden" role="status" aria-live="polite"><div class="compose-upload-track" aria-hidden="true"><span id="compose-upload-bar"></span></div><span id="compose-upload-label">Uploading…</span></div><div id="compose-attachments" class="compose-attachments hidden"></div>
<div id="compose-error" class="form-error hidden"></div>
<footer class="dialog-actions"><span id="compose-status" class="muted"></span><button type="button" class="button quiet close-dialog">Cancel</button><button id="send-btn" type="submit" class="button primary"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-send"></use></svg><span>Send</span></button></footer>
</form>
</dialog>
<dialog id="markdown-preview-dialog" class="dialog markdown-preview-dialog">
<div class="dialog-card markdown-preview-card">
<header class="dialog-header"><strong>Markdown preview</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<article id="markdown-preview-content" class="markdown-preview-content"></article>
</div>
</dialog>
<dialog id="image-edit-dialog" class="dialog image-edit-dialog">
<form id="image-edit-form" class="dialog-card image-edit-card">
<header class="dialog-header"><strong>Edit inline image</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<div class="image-edit-layout">
<div class="image-edit-preview"><canvas id="image-edit-preview" width="640" height="360" aria-label="Image crop preview"></canvas></div>
<div class="image-edit-controls">
<label><span>Display width</span><div class="image-edit-range-line"><input id="image-edit-width" type="range" min="10" max="100" step="5" value="100"><output id="image-edit-width-value">100%</output></div></label>
<label><span>Position</span><select id="image-edit-align"><option value="inline">Inline</option><option value="left">Left</option><option value="center">Center</option><option value="right">Right</option></select></label>
<fieldset id="image-crop-controls" class="image-crop-controls">
<legend>Crop / cut</legend>
<label><span>Top</span><div class="image-edit-range-line"><input id="image-crop-top" type="range" min="0" max="45" step="1" value="0"><output id="image-crop-top-value">0%</output></div></label>
<label><span>Right</span><div class="image-edit-range-line"><input id="image-crop-right" type="range" min="0" max="45" step="1" value="0"><output id="image-crop-right-value">0%</output></div></label>
<label><span>Bottom</span><div class="image-edit-range-line"><input id="image-crop-bottom" type="range" min="0" max="45" step="1" value="0"><output id="image-crop-bottom-value">0%</output></div></label>
<label><span>Left</span><div class="image-edit-range-line"><input id="image-crop-left" type="range" min="0" max="45" step="1" value="0"><output id="image-crop-left-value">0%</output></div></label>
</fieldset>
<p id="image-edit-help" class="image-edit-help">Resizing changes only the displayed size. Cropping creates a new CID image and replaces the previous inline attachment.</p>
</div>
</div>
<footer class="dialog-actions"><button id="image-edit-reset" type="button" class="button quiet">Reset crop</button><button type="button" class="button quiet close-dialog">Cancel</button><button id="image-edit-apply" type="submit" class="button primary">Apply</button></footer>
</form>
</dialog>
<dialog id="folder-dialog" class="dialog">
<div class="dialog-card folder-card">
<header class="dialog-header"><strong>Folders</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<section class="settings-section"><label><span>Create folder</span><div class="inline-field"><input id="new-folder-name" placeholder="Folder name"><button id="create-folder-btn" type="button" class="button primary">Create</button></div></label></section>
<section class="settings-section"><label><span>Current folder</span><input id="current-folder-name" readonly></label><div class="inline-actions"><button id="subscribe-folder-btn" type="button" class="button quiet">Subscribe / Unsubscribe</button><button id="rename-folder-btn" type="button" class="button quiet">Rename</button><button id="delete-folder-btn" type="button" class="button quiet danger">Delete</button></div></section>
</div>
</dialog>
<dialog id="settings-dialog" class="dialog settings-dialog">
<div class="dialog-card settings-card">
<header class="dialog-header"><strong>Settings</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<div class="settings-layout">
<nav class="settings-nav"><button class="settings-tab active" data-tab="appearance" type="button" data-i18n="appearance">Appearance</button><button class="settings-tab" data-tab="mailbox" type="button">Mailbox</button><button class="settings-tab" data-tab="composing" type="button">Composing</button><button class="settings-tab" data-tab="folders" type="button">Folders</button><button class="settings-tab" data-tab="identities" type="button">Identities & signatures</button><button class="settings-tab" data-tab="notifications" type="button">Notifications</button><button class="settings-tab" data-tab="openpgp" type="button">OpenPGP</button><button class="settings-tab" data-tab="sieve" type="button" data-i18n="filters">Filters</button><button class="settings-tab" data-tab="diagnostics" type="button">Diagnostics</button><button class="settings-tab" data-tab="account" type="button">Account</button><button class="settings-tab" data-tab="about" type="button" data-i18n="about">About</button></nav>
<div class="settings-content">
<section class="settings-panel" data-panel="appearance">
<div class="settings-panel-heading"><div><h2 data-i18n="appearance">Appearance</h2><p class="muted">Personalize RustBox without changing mail behavior.</p></div><button id="pref-reset" class="button quiet" type="button" data-i18n="reset_appearance">Reset appearance</button></div>
<div class="appearance-presets" aria-label="Interface presets">
<button type="button" class="appearance-preset" data-appearance-preset="compact" data-preset-label="Compact"><strong>Compact</strong><span>More mail on screen, narrow panes and smaller controls.</span></button>
<button type="button" class="appearance-preset" data-appearance-preset="balanced" data-preset-label="Balanced"><strong>Balanced</strong><span>Default proportions for everyday desktop use.</span></button>
<button type="button" class="appearance-preset" data-appearance-preset="comfortable" data-preset-label="Comfortable"><strong>Comfortable</strong><span>Larger controls and more breathing room.</span></button>
<button type="button" class="appearance-preset" data-appearance-preset="reading" data-preset-label="Reading"><strong>Reading</strong><span>Larger text with a wide, bottom preview.</span></button>
</div>
<div class="settings-grid appearance-grid">
<label><span data-i18n="language">Language</span><select id="pref-language"><option value="en">English</option><option value="pl">Polski</option></select></label>
<label><span data-i18n="theme">Theme</span><select id="pref-theme"><option value="dark">Dark</option><option value="light">Light</option><option value="system">System</option></select></label>
<label><span data-i18n="color_preset">Color preset</span><select id="pref-color-preset"><option value="sage">Sage</option><option value="blue">Blue</option><option value="teal">Teal</option><option value="cyan">Cyan</option><option value="indigo">Indigo</option><option value="slate">Slate</option><option value="graphite">Graphite</option><option value="amber">Amber</option><option value="orange">Orange</option><option value="violet">Violet</option><option value="rose">Rose</option><option value="red">Red</option><option value="custom">Custom</option></select></label>
<label><span data-i18n="accent_color">Accent color</span><div class="color-input"><input id="pref-accent" type="color" value="#6f9c86"><output id="pref-accent-value">#6f9c86</output></div></label>
<label><span>Custom background</span><div class="color-input"><input id="pref-background" type="color" value="#121513"><output id="pref-background-value">#121513</output></div></label>
<label><span>Custom panel</span><div class="color-input"><input id="pref-panel" type="color" value="#181c19"><output id="pref-panel-value">#181c19</output></div></label>
<label><span>Custom text</span><div class="color-input"><input id="pref-text-color" type="color" value="#edf0ec"><output id="pref-text-color-value">#edf0ec</output></div></label>
<label><span data-i18n="density">Density</span><select id="pref-density"><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label>
<label><span data-i18n="preview_pane">Preview pane</span><select id="pref-preview"><option value="right">Right</option><option value="bottom">Bottom</option><option value="off">Off</option></select></label>
<label><span data-i18n="ui_size">UI size</span><select id="pref-scale"><option value="small">Small</option><option value="normal">Normal</option><option value="large">Large</option></select></label>
<label><span data-i18n="font_family">Font family</span><select id="pref-font-family"><option value="system">System UI</option><option value="inter">Inter</option><option value="humanist">Humanist</option><option value="mono">Monospace</option></select></label>
<label><span><span data-i18n="font_size">Font size</span> <output id="pref-font-size-value">13 px</output></span><input id="pref-font-size" type="range" min="11" max="18" step="1" value="13"></label>
<label><span><span data-i18n="row_height">Message row height</span> <output id="pref-row-height-value">58 px</output></span><input id="pref-row-height" type="range" min="42" max="88" step="2" value="58"></label>
<label><span><span data-i18n="folder_width">Folder pane width</span> <output id="pref-folder-width-value">228 px</output></span><input id="pref-folder-width" type="range" min="180" max="360" step="4" value="228"></label>
<label><span><span data-i18n="message_width">Message pane width</span> <output id="pref-message-width-value">420 px</output></span><input id="pref-message-width" type="range" min="300" max="720" step="10" value="420"></label>
<label><span><span data-i18n="corner_radius">Corner radius</span> <output id="pref-radius-value">4 px</output></span><input id="pref-radius" type="range" min="0" max="12" step="1" value="4"></label>
<label><span data-i18n="contrast">Contrast</span><select id="pref-contrast"><option value="soft">Soft</option><option value="normal">Normal</option><option value="high">High</option></select></label>
<label><span>Date format</span><select id="pref-date-format"><option value="locale">Locale</option><option value="iso">YYYY-MM-DD</option><option value="eu">DD/MM/YYYY</option><option value="us">MM/DD/YYYY</option></select></label>
<label><span>Time format</span><select id="pref-time-format"><option value="locale">Locale</option><option value="24h">24-hour</option><option value="12h">12-hour</option></select></label>
</div>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="pref-avatars" type="checkbox"><span data-i18n="show_avatars">Show avatars</span></label>
<label class="checkbox-row"><input id="pref-attachment-icons" type="checkbox"><span data-i18n="show_attachment_icons">Show attachment icons</span></label>
<label class="checkbox-row"><input id="pref-flags" type="checkbox"><span data-i18n="show_flags">Show flags</span></label>
<label class="checkbox-row"><input id="pref-reduce-motion" type="checkbox"><span data-i18n="reduce_motion">Reduce motion</span></label>
</div>
<details class="appearance-advanced">
<summary>Advanced interface styling</summary>
<div class="settings-grid appearance-grid">
<label><span>Icon size <output id="pref-icon-size-value">18 px</output></span><input id="pref-icon-size" type="range" min="14" max="28" step="1" value="18"></label>
<label><span>Toolbar density</span><select id="pref-toolbar-density"><option value="compact">Compact</option><option value="normal">Normal</option><option value="spacious">Spacious</option></select></label>
<label><span>Sidebar item height <output id="pref-sidebar-height-value">29 px</output></span><input id="pref-sidebar-height" type="range" min="24" max="48" step="1" value="29"></label>
<label><span>Reader max width</span><select id="pref-reader-width"><option value="0">Fluid</option><option value="680">680 px</option><option value="820">820 px</option><option value="980">980 px</option><option value="1200">1200 px</option></select></label>
<label><span>Composer width <output id="pref-composer-width-value">900 px</output></span><input id="pref-composer-width" type="range" min="640" max="1400" step="20" value="900"></label>
<label><span>Selection color</span><div class="color-input"><input id="pref-selection-color" type="color" value="#28352e"><output id="pref-selection-color-value">#28352e</output></div></label>
<label><span>Unread weight <output id="pref-unread-weight-value">730</output></span><input id="pref-unread-weight" type="range" min="500" max="800" step="10" value="730"></label>
<label><span>Unread marker</span><select id="pref-unread-badge"><option value="dot">Dot</option><option value="outline">Outline</option><option value="solid">Solid</option></select></label>
<label><span>Scrollbar</span><select id="pref-scrollbar-density"><option value="thin">Thin</option><option value="normal">Normal</option><option value="hidden">Hidden</option></select></label>
</div>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="pref-compact-headers" type="checkbox"><span>Compact message headers</span></label>
<label class="checkbox-row"><input id="pref-show-borders" type="checkbox"><span>Show panel borders</span></label>
<label class="checkbox-row"><input id="pref-monochrome" type="checkbox"><span>Monochrome interface</span></label>
</div>
<div class="pane-background-grid">
<label class="pane-background-control"><span><input id="pref-folder-bg-enabled" type="checkbox"> Folder background override</span><input id="pref-folder-bg" type="color" value="#101310"></label>
<label class="pane-background-control"><span><input id="pref-message-bg-enabled" type="checkbox"> Message-list background override</span><input id="pref-message-bg" type="color" value="#181c19"></label>
<label class="pane-background-control"><span><input id="pref-reader-bg-enabled" type="checkbox"> Reader background override</span><input id="pref-reader-bg" type="color" value="#181c19"></label>
</div>
</details>
</section>
<section class="settings-panel hidden" data-panel="mailbox">
<div class="settings-panel-heading"><div><h2>Mailbox</h2><p class="muted">Control message-list and reader behavior for this account.</p></div></div>
<div class="settings-grid">
<label><span>Messages per page</span><select id="mail-pref-per-page"><option value="20">20</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select></label>
<label><span>Mark as read</span><select id="mail-pref-read-delay"><option value="0">Immediately</option><option value="750">After 0.75 s</option><option value="1500">After 1.5 s</option><option value="3000">After 3 s</option><option value="5000">After 5 s</option></select></label>
<label><span>Remote images</span><select id="mail-pref-remote-images"><option value="never">Never</option><option value="contacts">Contacts only</option><option value="ask">Ask for each message</option><option value="always">Always load</option></select></label>
<label><span>Message body</span><select id="mail-pref-preferred-body"><option value="auto">Auto</option><option value="html">Prefer HTML</option><option value="text">Plain text</option></select></label>
<label><span>Threads</span><select id="mail-pref-thread-mode"><option value="threaded">Threaded</option><option value="flat">Flat</option></select></label>
<label><span>Default sort</span><select id="mail-pref-sort"><option value="date_desc">Newest first</option><option value="date_asc">Oldest first</option><option value="sender_asc">Sender A–Z</option><option value="sender_desc">Sender Z–A</option><option value="subject_asc">Subject A–Z</option><option value="subject_desc">Subject Z–A</option><option value="size_asc">Smallest first</option><option value="size_desc">Largest first</option></select></label>
</div>
<div class="appearance-toggles"><label class="checkbox-row"><input id="mail-pref-collapse-quotes" type="checkbox"><span>Collapse quoted text where possible</span></label><label class="checkbox-row"><input id="mail-pref-show-snippets" type="checkbox"><span>Show message snippets in the list</span></label><label class="checkbox-row"><input id="mail-pref-flagged-top" type="checkbox"><span>Keep flagged messages on top by default</span></label><label class="checkbox-row"><input id="mail-pref-sync-keywords" type="checkbox"><span>Synchronize RustBox labels as IMAP keywords</span></label></div><p class="muted">Keyword synchronization is used only in folders whose IMAP server advertises persistent custom flags. Local labels remain available everywhere.</p>
<div class="inline-actions"><button id="mail-pref-save" class="button primary" type="button">Save mailbox settings</button><button id="mail-pref-reconcile-labels" class="button quiet" type="button">Reconcile IMAP labels now</button><span id="mail-pref-reconcile-status" class="muted"></span></div>
</section>
<section class="settings-panel hidden" data-panel="composing">
<div class="settings-panel-heading"><div><h2>Composing</h2><p class="muted">Defaults for new messages and draft behavior.</p></div></div>
<div class="settings-grid">
<label><span>Default format</span><select id="compose-pref-format"><option value="html">HTML</option><option value="text">Plain text</option><option value="markdown">Markdown</option></select></label>
<label><span>Autosave interval</span><select id="compose-pref-autosave"><option value="1000">1 second</option><option value="3000">3 seconds</option><option value="5000">5 seconds</option><option value="10000">10 seconds</option><option value="20000">20 seconds</option><option value="60000">60 seconds</option></select></label>
<label><span>Default priority</span><select id="compose-pref-priority"><option value="normal">Normal</option><option value="high">High</option><option value="low">Low</option></select></label>
<label><span>Default message font</span><select id="compose-pref-font"><option value="system">System sans</option><option value="humanist">Humanist sans</option><option value="serif">Serif</option><option value="mono">Monospace</option></select></label>
<label><span>Reply position</span><select id="compose-pref-reply-position"><option value="above">Write above quote</option><option value="below">Write below quote</option></select></label>
<label><span>Quote style</span><select id="compose-pref-quote-style"><option value="standard">Standard attribution</option><option value="compact">Compact attribution</option><option value="none">Do not include quote</option></select></label>
<label><span>Forward button</span><select id="compose-pref-forward-mode"><option value="inline">Forward inline</option><option value="attachment">Forward as .eml attachment</option></select></label>
</div>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="compose-pref-mdn" type="checkbox"><span>Request read receipt by default</span></label>
<label class="checkbox-row"><input id="compose-pref-attachment-reminder" type="checkbox"><span>Warn when message text suggests a missing attachment</span></label>
<label class="checkbox-row"><input id="compose-pref-spellcheck" type="checkbox"><span>Use browser spellcheck while composing</span></label>
</div>
<p class="muted">Markdown is stored as source text and sent as a safe rendered HTML alternative with a plain-text fallback.</p>
</section>
<section class="settings-panel hidden" data-panel="folders">
<div class="settings-panel-heading"><div><h2>Folders</h2><p class="muted">Choose special IMAP folders used by RustBox. Values are stored per account.</p></div><button id="special-folders-auto" class="button quiet" type="button">Auto-detect</button></div>
<div class="settings-grid">
<label><span>Sent</span><select id="special-sent"></select></label>
<label><span>Drafts</span><select id="special-drafts"></select></label>
<label><span>Trash</span><select id="special-trash"></select></label>
<label><span>Default spam destination</span><select id="spam-default-folder"></select><small class="muted">Shared by all accounts in this browser when that folder exists.</small></label>
<label><span>Spam destination override (this account)</span><select id="special-junk"></select><small class="muted">Leave automatic to use the default above, then IMAP Junk/Spam auto-detection.</small></label>
<label><span>Archive</span><select id="special-archive"></select></label>
</div>
<p class="muted">Sent, Trash, Spam/Junk and Archive are used directly by mail actions. The spam destination resolves in this order: account override → browser default → IMAP Junk/Spam auto-detection.</p>
<div id="quota-summary" class="quota-summary"><strong>Mailbox storage</strong><span>Loading quota…</span><div class="quota-track"><span id="quota-bar"></span></div></div>
<div class="inline-actions"><button id="special-folders-save" class="button primary" type="button">Save folder settings</button></div>
</section>
<section class="settings-panel hidden" data-panel="identities">
<div class="settings-panel-heading"><div><h2>Identities & signatures</h2><p class="muted">Sender identities and account-wide signatures. Editing opens in a dedicated window so the form never collides with Settings.</p></div><button id="identity-new" class="button primary" type="button">New identity</button></div>
<div class="identity-overview">
<div class="identity-overview-hint"><strong>Configured identities</strong><span class="muted">Select an identity to edit its sender data, text/HTML footer, image and OpenPGP defaults.</span></div>
<div id="identity-list" class="identity-list"></div>
</div>
</section>
<section class="settings-panel hidden" data-panel="openpgp">
<div class="settings-panel-heading"><div><h2>OpenPGP</h2><p class="muted">Manage per-user keys, trust and discovery. Private keys never leave the server unless you explicitly export one.</p></div><button id="pgp-refresh" class="button quiet" type="button">Refresh</button></div>
<div class="settings-section">
<h3>Policy & discovery</h3>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="pgp-pref-wkd" type="checkbox"><span>Discover keys with WKD</span></label>
<label class="checkbox-row"><input id="pgp-pref-hkp" type="checkbox"><span>Fallback to configured HTTPS key server</span></label>
<label class="checkbox-row"><input id="pgp-pref-trusted" type="checkbox"><span>Encrypt only to trusted keys</span></label>
</div>
<div class="inline-actions"><button id="pgp-pref-save" class="button primary" type="button">Save OpenPGP policy</button></div>
</div>
<div class="pgp-settings-grid">
<div class="settings-section">
<h3>Generate key</h3>
<label><span>Name</span><input id="pgp-generate-name" autocomplete="name"></label>
<label><span>Email</span><input id="pgp-generate-email" type="email" autocomplete="email"></label>
<label><span>Passphrase</span><input id="pgp-generate-passphrase" type="password" autocomplete="new-password" maxlength="1024"><small class="muted">Not stored by RustBox.</small></label>
<div class="inline-actions"><button id="pgp-generate" class="button primary" type="button">Generate key</button></div>
</div>
<div class="settings-section">
<h3>Import / discover</h3>
<label><span>Armored public/private key</span><textarea id="pgp-import-data" rows="6" spellcheck="false" placeholder="-----BEGIN PGP ... KEY BLOCK-----"></textarea></label>
<label><span>Initial trust</span><select id="pgp-import-trust"><option value="unknown">Unknown</option><option value="verified">Verified</option><option value="trusted">Trusted</option><option value="untrusted">Untrusted</option></select></label>
<div class="inline-actions"><button id="pgp-import" class="button quiet" type="button">Import</button><button id="pgp-import-file" class="button quiet" type="button">Import file</button><input id="pgp-import-file-input" type="file" accept=".asc,.pgp,application/pgp-keys,text/plain" hidden></div>
<label><span>Discover by email</span><input id="pgp-discover-email" type="email" autocomplete="email"></label>
<div class="inline-actions"><button id="pgp-discover" class="button quiet" type="button">Discover key</button></div>
</div>
</div>
<div class="settings-section"><div class="settings-panel-heading compact"><div><h3>Keyring</h3><p id="pgp-key-summary" class="muted">No keys loaded</p></div></div><div id="pgp-key-list" class="pgp-key-list"></div></div>
</section>
<section class="settings-panel hidden" data-panel="notifications">
<h2>Notifications</h2>
<div class="settings-section notification-settings">
<label class="checkbox-row"><input id="notify-enabled" type="checkbox"><span>Desktop notifications</span></label>
<label class="checkbox-row"><input id="notify-sound" type="checkbox"><span>Sound for new mail</span></label>
<label class="checkbox-row"><input id="notify-dnd-enabled" type="checkbox"><span>Do Not Disturb</span></label>
<div class="settings-grid"><label><span>DND from</span><input id="notify-dnd-start" type="time" value="22:00"></label><label><span>DND until</span><input id="notify-dnd-end" type="time" value="07:00"></label></div>
<div><span class="field-label">Folders</span><div id="notify-folders" class="notification-folder-list"></div></div>
<div class="inline-actions"><button id="notify-permission" class="button quiet" type="button">Browser permission</button><button id="notify-save" class="button primary" type="button">Save</button></div>
</div>
</section>
<section class="settings-panel hidden" data-panel="sieve">
<div class="sieve-header"><div><h2>ManageSieve filters</h2><p id="sieve-status" class="muted">Not checked</p></div><div class="inline-actions"><button id="sieve-backup" class="button quiet" type="button">Backup</button><button id="sieve-restore" class="button quiet" type="button">Restore</button><input id="sieve-restore-file" type="file" accept="application/json,.json" hidden><button id="sieve-refresh" class="button quiet" type="button">Refresh</button></div></div>
<div class="sieve-layout">
<div><div class="field-label">Scripts</div><div id="sieve-scripts" class="sieve-scripts"></div><button id="sieve-new" class="button quiet wide" type="button">New script</button></div>
<div class="sieve-editor-wrap">
<label><span>Script name</span><input id="sieve-name" placeholder="rustbox"></label>
<section class="sieve-rules-overview">
<div class="sieve-section-heading"><div><strong>Rules in this script</strong><small class="muted">Existing <code># rule:[name]</code> filters and RustBox rules are parsed automatically.</small></div><span id="sieve-rule-count" class="sieve-count-badge">0</span></div>
<div id="sieve-managed-rules" class="sieve-managed-rules"><div class="muted">No rules found in this script</div></div>
</section>
<div class="sieve-rule-launch"><button id="sieve-rule-new" class="button primary" type="button">Create filter</button><span class="muted">Rules are edited in a separate visual window with a live “what will happen” preview.</span></div>
<details class="sieve-builder sieve-vacation">
<summary>Autoresponder / vacation</summary>
<div class="sieve-builder-grid">
<label><span>Subject</span><input id="sieve-vacation-subject" value="Out of office"></label>
<label><span>Reply interval (days)</span><input id="sieve-vacation-days" type="number" min="1" max="30" value="7"></label>
<label><span>Active from</span><input id="sieve-vacation-start" type="date"></label>
<label><span>Active until</span><input id="sieve-vacation-end" type="date"></label>
<label class="sieve-builder-wide"><span>Message</span><textarea id="sieve-vacation-message" rows="4" placeholder="I am currently away..."></textarea></label>
<label class="checkbox-row"><input id="sieve-vacation-skip-lists" type="checkbox" checked><span>Skip mailing lists</span></label>
<label class="checkbox-row"><input id="sieve-vacation-skip-auto" type="checkbox" checked><span>Skip automated messages</span></label>
</div>
<div class="inline-actions"><button id="sieve-vacation-append" class="button quiet" type="button">Append autoresponder</button><span id="sieve-vacation-capability" class="muted"></span></div>
</details>
<details class="sieve-raw-source"><summary>Advanced Sieve source</summary><p class="muted">Use this only for syntax the visual editor does not understand. Parsed rules stay editable above.</p><textarea id="sieve-editor" class="code-editor" spellcheck="false"></textarea></details>
<div id="sieve-result" class="muted sieve-result"></div>
<div class="inline-actions"><button id="sieve-check" class="button quiet" type="button">Validate</button><button id="sieve-save" class="button primary" type="button">Save</button><button id="sieve-activate" class="button quiet" type="button">Activate</button><button id="sieve-deactivate" class="button quiet" type="button">Deactivate all</button><button id="sieve-delete" class="button quiet danger" type="button">Delete</button></div>
</div>
</div>
</section>
<section class="settings-panel hidden" data-panel="diagnostics">
<div class="settings-panel-heading"><div><h2>Diagnostics</h2><p class="muted">Live capability checks for the current account. Credentials and server host names are not returned to the browser.</p></div><button id="diagnostics-refresh" class="button quiet" type="button">Refresh</button></div>
<div class="diagnostics-grid">
<section class="diagnostic-card"><div class="section-heading"><span>IMAP</span><div class="inline-actions"><strong id="diagnostic-imap-status">Not checked</strong><button id="diagnostic-imap-reconnect" class="button quiet" type="button">Reconnect</button></div></div><div id="diagnostic-imap-summary" class="capability-grid"></div><div id="diagnostic-imap-caps" class="capability-list"></div></section>
<section class="diagnostic-card"><div class="section-heading"><span>SMTP</span><strong id="diagnostic-smtp-status">Not checked</strong></div><div id="diagnostic-smtp-summary" class="capability-list"></div></section>
<section class="diagnostic-card"><div class="section-heading"><span>ManageSieve</span><strong id="diagnostic-sieve-status">Not checked</strong></div><div id="diagnostic-sieve-summary" class="capability-list"></div></section>
<section class="diagnostic-card"><div class="section-heading"><span>Realtime</span><strong id="diagnostic-ws-status">Disconnected</strong></div><p class="muted">IMAP IDLE events are delivered to the browser through the RustBox WebSocket connection.</p></section>
<section class="diagnostic-card"><div class="section-heading"><span>Synchronization cache</span><strong id="diagnostic-sync-status">Not checked</strong></div><div id="diagnostic-sync-summary" class="capability-list"></div></section>
<section class="diagnostic-card"><div class="section-heading"><span>Search index</span><strong id="diagnostic-search-status">Not checked</strong></div><div id="diagnostic-search-summary" class="capability-list"></div><div class="inline-actions"><button id="diagnostic-search-rebuild" class="button quiet" type="button">Rebuild index</button></div></section>
</div>
</section>
<section class="settings-panel hidden" data-panel="account">
<div class="settings-panel-heading"><div><h2>Account</h2><p class="muted">Accounts signed in to this RustBox browser session.</p></div><button id="account-add" class="button quiet" type="button">Add account</button></div>
<div id="account-settings-list" class="account-settings-list"></div>
<div class="settings-panel-heading account-session-heading"><div><h3>Active sessions</h3><p class="muted">Live RustBox sessions for this account, including other browsers while the server is running.</p></div><button id="account-revoke-others" class="button quiet danger" type="button">Revoke other sessions</button></div>
<div id="account-session-list" class="account-settings-list"></div>
</section>
<section class="settings-panel hidden" data-panel="about">
<h2>RustBox __RUSTBOX_VERSION__</h2>
<p>Webmail based on the Oxi codebase, with a RustBox-owned interface compiled into the Rust executable.</p>
<dl class="about-list"><dt>Upstream</dt><dd>c0h1b4/oxi</dd><dt>Oxi base</dt><dd><code>__RUSTBOX_OXI_BASE__</code></dd><dt>Frontend</dt><dd>HTML, CSS and vanilla JavaScript embedded at Cargo build time</dd><dt>Author</dt><dd>@linuxiarz.pl</dd></dl>
<div class="inline-actions"><button id="shortcuts-open" class="button quiet" type="button">Keyboard shortcuts</button></div>
</section>
</div>
</div>
</div>
</dialog>
<dialog id="identity-dialog" class="dialog identity-dialog">
<form id="identity-form" class="dialog-card identity-card">
<header class="dialog-header"><strong id="identity-dialog-title">Identity & signature</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<div class="identity-form-body">
<input id="identity-id" type="hidden">
<section class="identity-modal-section">
<div class="identity-modal-heading"><strong>Sender identity</strong><span class="muted">Address and headers used when this identity is selected in the composer.</span></div>
<div class="identity-fields-grid">
<label><span>Display name</span><input id="identity-name" autocomplete="name"></label>
<label><span>Email</span><input id="identity-email" type="email" required autocomplete="email"></label>
<label><span>Reply-To</span><input id="identity-reply-to" type="email" autocomplete="email"></label>
<label><span>Automatic Bcc</span><input id="identity-bcc" placeholder="archive@example.com"></label>
<label class="identity-field-wide"><span>Organization</span><input id="identity-organization"></label>
</div>
</section>
<section class="identity-modal-section">
<div class="identity-modal-heading"><strong>Signature / footer</strong><span class="muted">Maintain separate text and HTML versions. Imported images are embedded into outgoing mail as inline CID images.</span></div>
<div class="identity-signature-grid">
<label><span>Plain-text signature / footer</span><textarea id="identity-signature-text" rows="8" placeholder="Text-only signature used in plain-text messages"></textarea></label>
<label class="identity-signature-field"><span>HTML signature / footer</span><div class="signature-editor-shell"><div class="signature-editor-toolbar" aria-label="Signature formatting"><button type="button" data-signature-command="bold" title="Bold"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-bold"></use></svg></button><button type="button" data-signature-command="italic" title="Italic"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-italic"></use></svg></button><button type="button" data-signature-command="underline" title="Underline"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-underline"></use></svg></button><button type="button" id="identity-signature-link" title="Insert link"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-link"></use></svg></button><button type="button" id="identity-signature-image-btn" title="Import image"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-image"></use></svg></button><button type="button" data-signature-command="removeFormat" title="Clear formatting"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-remove-format"></use></svg></button></div><div id="identity-signature" class="signature-editor" contenteditable="true" role="textbox" aria-multiline="true"></div></div><input id="identity-signature-image" type="file" accept="image/png,image/jpeg,image/gif,image/webp" hidden><small class="muted signature-help">You can also paste an image directly into this editor.</small></label>
</div>
<div class="identity-options-grid">
<label><span>Signature position</span><select id="identity-signature-position"><option value="above">Above quoted text</option><option value="below">Below quoted text</option></select></label>
<label id="identity-pgp-key-row"><span>OpenPGP key</span><select id="identity-pgp-key"><option value="">Automatic / none</option></select></label>
</div>
</section>
<section class="identity-modal-section identity-modal-options">
<div class="identity-modal-heading"><strong>Defaults</strong><span class="muted">Choose where this signature is inserted and, when OpenPGP is configured, its default behavior.</span></div>
<div class="identity-toggle-grid">
<label class="checkbox-row"><input id="identity-signature-new" type="checkbox"><span>Signature on new messages</span></label>
<label class="checkbox-row"><input id="identity-signature-reply" type="checkbox"><span>Signature on replies</span></label>
<label class="checkbox-row"><input id="identity-signature-forward" type="checkbox"><span>Signature on forwards</span></label>
<label class="checkbox-row"><input id="identity-default" type="checkbox"><span>Default identity</span></label>
<label class="checkbox-row identity-pgp-default"><input id="identity-pgp-sign" type="checkbox"><span>Sign by default with OpenPGP</span></label>
<label class="checkbox-row identity-pgp-default"><input id="identity-pgp-encrypt" type="checkbox"><span>Encrypt by default with OpenPGP</span></label>
<label class="checkbox-row identity-pgp-default"><input id="identity-pgp-inline" type="checkbox"><span>Use inline OpenPGP by default</span></label>
</div>
</section>
</div>
<footer class="dialog-actions identity-dialog-actions"><button id="identity-delete" type="button" class="button quiet danger">Delete</button><button type="button" class="button quiet close-dialog">Cancel</button><button type="submit" class="button primary">Save identity</button></footer>
</form>
</dialog>
<dialog id="sieve-rule-dialog" class="dialog sieve-rule-dialog">
<div class="dialog-card sieve-rule-card">
<header class="dialog-header"><div><strong id="sieve-rule-dialog-title">Create filter</strong><span id="sieve-rule-dialog-subtitle" class="muted sieve-rule-dialog-subtitle">Build the rule visually and verify the preview before applying it.</span></div><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<div class="sieve-rule-dialog-body">
<div class="sieve-builder sieve-builder-modal">
<div class="sieve-builder-body">
<section class="sieve-builder-section">
<div class="sieve-section-heading"><div><strong>Rule</strong><small class="muted">Give it a readable name and decide whether it is active.</small></div></div>
<div class="sieve-builder-grid sieve-builder-grid-rule">
<label><span>Rule name</span><input id="sieve-builder-name" placeholder="allegro"></label>
<label class="checkbox-row"><input id="sieve-builder-enabled" type="checkbox" checked><span>Rule enabled</span></label>
<label class="checkbox-row"><input id="sieve-builder-stop" type="checkbox" checked><span>Stop after this rule</span></label>
</div>
</section>
<section class="sieve-builder-section">
<div class="sieve-section-heading"><div><strong>When</strong><small class="muted">Choose what the incoming message must match.</small></div></div>
<div class="sieve-builder-grid">
<label><span>Condition</span><select id="sieve-builder-condition"><option value="from">From address</option><option value="from-domain">From domain</option><option value="to">To / Cc address</option><option value="header-from">From header</option><option value="header-to">To header</option><option value="subject">Subject</option><option value="list-id">List-ID</option><option value="header">Custom header</option></select></label>
<label><span>Match</span><select id="sieve-builder-match"><option value="contains">contains</option><option value="is">is exactly</option><option value="matches">wildcard matches</option></select></label>
<label id="sieve-builder-header-wrap" class="hidden"><span>Header name</span><input id="sieve-builder-header" placeholder="X-Spam-Status"></label>
<label><span>Value</span><input id="sieve-builder-value" placeholder="example.com"></label>
<label class="checkbox-row"><input id="sieve-builder-negate" type="checkbox"><span>NOT / negate</span></label>
<label><span>Join next condition</span><select id="sieve-builder-logic"><option value="allof">AND</option><option value="anyof">OR</option></select></label>
<label><span>Second condition</span><select id="sieve-builder-condition-2"><option value="">None</option><option value="from">From address</option><option value="from-domain">From domain</option><option value="to">To / Cc address</option><option value="header-from">From header</option><option value="header-to">To header</option><option value="subject">Subject</option><option value="list-id">List-ID</option><option value="header">Custom header</option></select></label>
<label><span>Match</span><select id="sieve-builder-match-2"><option value="contains">contains</option><option value="is">is exactly</option><option value="matches">wildcard matches</option></select></label>
<label id="sieve-builder-header-wrap-2" class="hidden"><span>Header name</span><input id="sieve-builder-header-2" placeholder="X-Spam-Status"></label>
<label><span>Value</span><input id="sieve-builder-value-2" placeholder="optional"></label>
<label class="checkbox-row"><input id="sieve-builder-negate-2" type="checkbox"><span>NOT / negate</span></label>
<label><span>Join third condition</span><select id="sieve-builder-logic-3"><option value="allof">AND</option><option value="anyof">OR</option></select></label>
<label><span>Third condition</span><select id="sieve-builder-condition-3"><option value="">None</option><option value="from">From address</option><option value="from-domain">From domain</option><option value="to">To / Cc address</option><option value="header-from">From header</option><option value="header-to">To header</option><option value="subject">Subject</option><option value="list-id">List-ID</option><option value="header">Custom header</option></select></label>
<label><span>Match</span><select id="sieve-builder-match-3"><option value="contains">contains</option><option value="is">is exactly</option><option value="matches">wildcard matches</option></select></label>
<label id="sieve-builder-header-wrap-3" class="hidden"><span>Header name</span><input id="sieve-builder-header-3" placeholder="X-Spam-Status"></label>
<label><span>Value</span><input id="sieve-builder-value-3" placeholder="optional"></label>
<label class="checkbox-row"><input id="sieve-builder-negate-3" type="checkbox"><span>NOT / negate</span></label>
<div id="sieve-builder-extra-conditions" class="sieve-builder-dynamic-list sieve-builder-wide"></div>
<div class="inline-actions sieve-builder-wide"><button id="sieve-builder-add-condition" class="button quiet small" type="button">+ Add condition</button></div>
</div>
</section>
<section class="sieve-builder-section">
<div class="sieve-section-heading"><div><strong>Then</strong><small class="muted">Actions run in the order shown below.</small></div></div>
<div class="sieve-builder-grid">
<label><span>Action</span><select id="sieve-builder-action"><option value="move">Move to folder</option><option value="copy">Copy to folder</option><option value="redirect">Redirect</option><option value="redirect-copy">Redirect and keep copy</option><option value="discard">Discard</option><option value="mark-read">Mark read</option><option value="add-flag">Add IMAP flag</option><option value="set-flags">Set IMAP flags</option><option value="keep">Keep</option></select></label>
<label id="sieve-builder-target-wrap"><span id="sieve-builder-target-label">Folder</span><input id="sieve-builder-target" list="sieve-folder-options" placeholder="Archive"><datalist id="sieve-folder-options"></datalist></label>
<label><span>Second action</span><select id="sieve-builder-action-2"><option value="">None</option><option value="move">Move to folder</option><option value="copy">Copy to folder</option><option value="redirect">Redirect</option><option value="redirect-copy">Redirect and keep copy</option><option value="discard">Discard</option><option value="mark-read">Mark read</option><option value="add-flag">Add IMAP flag</option><option value="set-flags">Set IMAP flags</option><option value="keep">Keep</option></select></label>
<label id="sieve-builder-target-wrap-2" class="hidden"><span id="sieve-builder-target-label-2">Folder</span><input id="sieve-builder-target-2" list="sieve-folder-options" placeholder="Archive"></label>
<div id="sieve-builder-extra-actions" class="sieve-builder-dynamic-list sieve-builder-wide"></div>
<div class="inline-actions sieve-builder-wide"><button id="sieve-builder-add-action" class="button quiet small" type="button">+ Add action</button></div>
</div>
</section>
<section class="sieve-rule-preview" aria-live="polite">
<div class="sieve-section-heading"><div><strong>What will happen</strong><small class="muted">Live explanation of the rule before you save it.</small></div><span id="sieve-builder-preview-state" class="sieve-status-pill">Ready</span></div>
<div id="sieve-builder-preview-text" class="sieve-rule-preview-text">Complete the rule to see its effect.</div>
<pre id="sieve-builder-preview-code" class="sieve-rule-preview-code"></pre>
</section>
<div class="sieve-builder-footer">
<div class="inline-actions"><button id="sieve-builder-append" class="button primary" type="button">Add rule</button><button id="sieve-builder-replace" class="button quiet" type="button" disabled>Update selected rule</button><button id="sieve-builder-clear" class="button quiet" type="button">Clear</button></div>
<span id="sieve-builder-capability" class="muted"></span>
</div>
</div>
</div>
</div>
</div>
</dialog>
<dialog id="shortcuts-dialog" class="dialog">
<div class="dialog-card shortcuts-card">
<header class="dialog-header"><strong>Keyboard shortcuts</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<div class="shortcuts-grid">
<section><h3>Global</h3><dl><dt><kbd>/</kbd></dt><dd>Focus search</dd><dt><kbd>C</kbd> / <kbd>Ctrl</kbd> + <kbd>N</kbd></dt><dd>New message</dd><dt><kbd>V</kbd></dt><dd>Toggle selection mode</dd><dt><kbd>?</kbd></dt><dd>Show shortcuts</dd></dl></section>
<section><h3>Message</h3><dl><dt><kbd>J</kbd> / <kbd>K</kbd></dt><dd>Next / previous message</dd><dt><kbd>X</kbd></dt><dd>Select / unselect current message</dd><dt><kbd>R</kbd></dt><dd>Reply</dd><dt><kbd>A</kbd></dt><dd>Reply all</dd><dt><kbd>F</kbd></dt><dd>Forward</dd><dt><kbd>E</kbd></dt><dd>Archive</dd><dt><kbd>M</kbd></dt><dd>Read / unread</dd><dt><kbd>S</kbd></dt><dd>Flag / unflag</dd><dt><kbd>!</kbd></dt><dd>Spam / not spam</dd><dt><kbd>Delete</kbd></dt><dd>Delete / move to Trash</dd></dl></section>
</div>
<footer class="dialog-actions"><button type="button" class="button primary close-dialog">Close</button></footer>
</div>
</dialog>
<dialog id="tag-dialog" class="dialog">
<div class="dialog-card tag-card">
<header class="dialog-header"><strong>Label</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<form id="tag-form" class="tag-form">
<input id="tag-id" type="hidden">
<label><span>Name</span><input id="tag-name" maxlength="60" required></label>
<label><span>Color</span><input id="tag-color" type="color" value="#6b7280"></label>
<footer class="dialog-actions"><button id="tag-delete" type="button" class="button quiet danger">Delete</button><span class="toolbar-spacer"></span><button type="button" class="button quiet close-dialog">Cancel</button><button type="submit" class="button primary">Save</button></footer>
</form>
</div>
</dialog>
<dialog id="advanced-search-dialog" class="dialog">
<div class="dialog-card advanced-search-card">
<header class="dialog-header"><strong>Advanced search</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<form id="advanced-search-form" class="advanced-search-form">
<div class="settings-grid advanced-search-grid">
<label><span>Contains</span><input id="search-text" autocomplete="off"></label>
<label><span>Folder</span><select id="search-folder"><option value="">All folders</option></select></label>
<label><span>From</span><input id="search-from" autocomplete="off"></label>
<label><span>To</span><input id="search-to" autocomplete="off"></label>
<label class="wide-field"><span>Subject</span><input id="search-subject" autocomplete="off"></label>
<label><span>Date from</span><input id="search-date-from" type="date"></label>
<label><span>Date to</span><input id="search-date-to" type="date"></label>
<label><span>Read status</span><select id="search-read"><option value="">Any</option><option value="unread">Unread</option><option value="read">Read</option></select></label>
<label><span>Flag</span><select id="search-flagged"><option value="">Any</option><option value="true">Flagged</option><option value="false">Not flagged</option></select></label>
<label><span>Attachments</span><select id="search-attachment"><option value="">Any</option><option value="true">Has attachment</option><option value="false">No attachment</option></select></label>
<label><span>Sort</span><select id="search-sort"><option value="date_desc">Newest first</option><option value="date_asc">Oldest first</option></select></label>
</div>
<div class="saved-search-section">
<div class="section-heading"><span>Saved searches</span></div>
<div id="saved-search-list" class="saved-search-list"></div>
</div>
<footer class="dialog-actions advanced-search-actions">
<button id="search-reset-btn" type="button" class="button quiet">Reset</button>
<button id="search-save-btn" type="button" class="button quiet">Save search</button>
<span class="toolbar-spacer"></span>
<button type="button" class="button quiet close-dialog">Cancel</button>
<button type="submit" class="button primary">Search</button>
</footer>
</form>
</div>
</dialog>
<dialog id="contacts-dialog" class="dialog">
<div class="dialog-card contacts-card">
<header class="dialog-header"><strong>Contacts</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<div class="contacts-layout">
<div class="contacts-sidebar">
<div class="contact-group-toolbar"><select id="contact-group-filter"><option value="">All contacts</option></select><button id="contact-group-new" class="button quiet" type="button">New group</button><button id="contact-group-rename" class="button quiet" type="button">Rename</button><button id="contact-group-delete" class="button quiet danger" type="button">Delete</button></div>
<div class="inline-field"><input id="contact-search" placeholder="Search contacts"><button id="contact-new" class="button quiet" type="button">New</button></div>
<div class="contact-transfer"><button id="contact-import" class="button quiet" type="button">Import vCard</button><input id="contact-import-file" type="file" accept=".vcf,text/vcard,text/x-vcard" hidden><button id="contact-export" class="button quiet" type="button">Export vCard</button><button id="contact-duplicates" class="button quiet" type="button">Find duplicates</button></div>
<div id="contact-list" class="contact-list"></div>
</div>
<form id="contact-form" class="contact-form">
<input id="contact-id" type="hidden">
<div class="contact-photo-editor">
<div id="contact-photo-placeholder" class="contact-photo-placeholder">Photo</div>
<img id="contact-photo-preview" class="contact-photo-preview hidden" alt="Contact photo">
<div class="inline-actions">
<button id="contact-photo-upload" type="button" class="button quiet" disabled>Upload photo</button>
<button id="contact-photo-delete" type="button" class="button quiet danger" disabled>Remove photo</button>
<input id="contact-photo-file" type="file" accept="image/png,image/jpeg,image/webp" hidden>
</div>
</div>
<label><span>Name</span><input id="contact-name"></label>
<label><span>Email</span><input id="contact-email" type="email" required></label>
<label><span>Other emails</span><textarea id="contact-emails" rows="2" placeholder="One address per line"></textarea></label>
<label><span>Phone</span><input id="contact-phone" type="tel"></label>
<label><span>Other phones</span><textarea id="contact-phones" rows="2" placeholder="One number per line"></textarea></label>
<label><span>Company</span><input id="contact-company"></label>
<label><span>Job title</span><input id="contact-job-title"></label>
<label><span>Website</span><input id="contact-website" type="url" placeholder="https://"></label>
<label><span>Birthday</span><input id="contact-birthday" type="date"></label>
<label><span>Address</span><textarea id="contact-address" rows="3"></textarea></label>
<label><span>Other addresses</span><textarea id="contact-addresses" rows="3" placeholder="One address per line"></textarea></label>
<label><span>Notes</span><textarea id="contact-notes" rows="6"></textarea></label>
<label class="checkbox-row"><input id="contact-favorite" type="checkbox"><span>Favorite</span></label>
<div><span class="field-label">Groups</span><div id="contact-group-membership" class="contact-group-membership"></div></div>
<div class="inline-actions"><button type="submit" class="button primary">Save</button><button id="contact-compose" type="button" class="button quiet">Compose</button><button id="contact-delete" type="button" class="button quiet danger">Delete</button></div>
</form>
</div>
</div>
</dialog>
<dialog id="contact-duplicates-dialog" class="dialog">
<div class="dialog-card duplicates-card">
<header class="dialog-header"><strong>Duplicate contacts</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<p class="muted">Duplicates are detected when two contacts share a primary or alternate e-mail address. Choose which record to keep.</p>
<div id="contact-duplicate-list" class="duplicate-contact-list"></div>
<footer class="dialog-actions"><button type="button" class="button primary close-dialog">Close</button></footer>
</div>
</dialog>
<dialog id="calendar-dialog" class="dialog">
<div class="dialog-card calendar-card">
<header class="dialog-header"><strong>Calendar</strong><div class="inline-actions"><button id="calendar-today" type="button" class="button quiet">Today</button><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></div></header>
<div class="calendar-toolbar"><button id="calendar-prev" type="button" class="button quiet">Previous</button><strong id="calendar-range"></strong><button id="calendar-next" type="button" class="button quiet">Next</button><select id="calendar-view" aria-label="Calendar view"><option value="month">Month</option><option value="week">Week</option><option value="day">Day</option><option value="agenda">Agenda</option></select><button id="calendar-import" type="button" class="button quiet">Import ICS</button><input id="calendar-import-file" type="file" accept=".ics,text/calendar" hidden><button id="calendar-export" type="button" class="button quiet">Export ICS</button><button id="calendar-new" type="button" class="button primary">New event</button></div>
<div id="calendar-events" class="calendar-events"></div>
<form id="calendar-form" class="calendar-form hidden">
<input id="calendar-event-id" type="hidden">
<label><span>Title</span><input id="calendar-title" required></label>
<label class="checkbox-row"><input id="calendar-all-day" type="checkbox"><span>All day</span></label>
<div class="settings-grid"><label><span>Start</span><input id="calendar-start" type="datetime-local" required></label><label><span>End</span><input id="calendar-end" type="datetime-local" required></label></div>
<div class="settings-grid"><label><span>Recurrence</span><select id="calendar-recurrence"><option value="">Does not repeat</option><option value="FREQ=DAILY">Daily</option><option value="FREQ=WEEKLY">Weekly</option><option value="FREQ=MONTHLY">Monthly</option><option value="FREQ=YEARLY">Yearly</option><option value="custom">Custom RRULE</option></select></label><label id="calendar-rrule-wrap" class="hidden"><span>RRULE</span><input id="calendar-rrule" placeholder="FREQ=WEEKLY;INTERVAL=2"></label></div>
<div class="settings-grid"><label><span>Status</span><select id="calendar-status"><option value="confirmed">Confirmed</option><option value="tentative">Tentative</option><option value="cancelled">Cancelled</option></select></label><label><span>Reminder</span><select id="calendar-reminder"><option value="">None</option><option value="0">At start</option><option value="5">5 minutes</option><option value="15">15 minutes</option><option value="30">30 minutes</option><option value="60">1 hour</option><option value="1440">1 day</option></select></label></div>
<div class="settings-grid"><label><span>Organizer</span><input id="calendar-organizer" type="email"></label><label><span>Color</span><input id="calendar-color" type="color" value="#6b7280"></label></div>
<label><span>Attendees</span><input id="calendar-attendees" placeholder="alice@example.com, bob@example.com"></label>
<label><span>Location</span><input id="calendar-location"></label>
<label><span>Meeting link</span><input id="calendar-meeting-url" type="url" placeholder="https://"></label>
<label><span>Description</span><textarea id="calendar-description" rows="4"></textarea></label>
<div class="inline-actions"><button type="submit" class="button primary">Save</button><button id="calendar-delete" type="button" class="button quiet danger">Delete</button><button id="calendar-cancel" type="button" class="button quiet">Cancel</button></div>
</form>
</div>
</dialog>
<dialog id="headers-dialog" class="dialog">
<div class="dialog-card headers-card">
<header class="dialog-header"><strong>Message headers</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<div id="headers-summary" class="headers-summary"></div><pre id="headers-content" class="headers-content"></pre>
<footer class="dialog-actions"><button id="copy-headers-btn" type="button" class="button quiet">Copy</button><button type="button" class="button primary close-dialog">Close</button></footer>
</div>
</dialog>
<dialog id="add-account-dialog" class="dialog">
<div class="dialog-card add-account-card">
<header class="dialog-header"><strong>Add account</strong><button type="button" class="icon-button close-dialog" aria-label="Close"><svg><use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use></svg></button></header>
<form id="add-account-form" class="login-form">
<label><span>Email</span><input id="add-account-email" type="email" autocomplete="username" required></label>
<label><span>Password</span><input id="add-account-password" type="password" autocomplete="current-password" required></label>
<label id="add-account-remember-row" class="checkbox-row"><input id="add-account-remember" type="checkbox"><span id="add-account-remember-label">Keep me signed in</span></label>
<div id="add-account-error" class="form-error hidden" role="alert"></div>
<footer class="dialog-actions"><button type="button" class="button quiet close-dialog">Cancel</button><button class="button primary" type="submit">Add account</button></footer>
</form>
</div>
</dialog>
<div id="context-menu" class="context-menu hidden" role="menu"></div>
<div id="toast-stack" class="toast-stack" aria-live="polite"></div>
<script src="__RUSTBOX_ASSET_PREFIX__/assets/app.js" defer></script>
</body>
</html>