1744 lines
108 KiB
HTML
1744 lines
108 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-base-path="__RUSTBOX_BASE_PATH__" data-default-theme="__RUSTBOX_DEFAULT_THEME__"
|
||
data-default-interface-skin="__RUSTBOX_DEFAULT_INTERFACE_SKIN__"
|
||
data-max-attachment-bytes="__RUSTBOX_MAX_ATTACHMENT_BYTES__" data-max-attachment-mb="__RUSTBOX_MAX_ATTACHMENT_MB__"
|
||
data-max-message-bytes="__RUSTBOX_MAX_MESSAGE_BYTES__" data-max-message-mb="__RUSTBOX_MAX_MESSAGE_MB__"
|
||
data-theme="dark" data-interface-skin="__RUSTBOX_DEFAULT_INTERFACE_SKIN__" 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>
|
||
<script src="__RUSTBOX_ASSET_PREFIX__/assets/theme-bootstrap.__RUSTBOX_ASSET_ID__.js"></script>
|
||
<link rel="icon" href="__RUSTBOX_ASSET_PREFIX__/favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="__RUSTBOX_ASSET_PREFIX__/assets/app.__RUSTBOX_ASSET_ID__.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" data-i18n-scope 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" data-i18n-scope>
|
||
<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">
|
||
<span id="indexing-indicator" class="indexing-indicator hidden" role="status" aria-live="polite"
|
||
title="Mail synchronization" aria-label="Mail synchronization"><svg aria-hidden="true">
|
||
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-refresh-cw"></use>
|
||
</svg></span>
|
||
<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">
|
||
<button id="folder-drawer-scrim" class="folder-drawer-scrim" type="button" aria-label="Close folders"
|
||
tabindex="-1"></button>
|
||
<aside id="folder-pane" class="folder-pane" data-i18n-scope>
|
||
<div class="folder-drawer-header mobile-only">
|
||
<button id="folder-drawer-close" class="icon-button folder-drawer-close" type="button"
|
||
aria-label="Back to messages" title="Back to messages"><svg>
|
||
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-arrow-left"></use>
|
||
</svg></button>
|
||
<strong>Folders</strong>
|
||
</div>
|
||
<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 id="folder-quota" class="folder-quota" aria-live="polite">
|
||
<div class="folder-quota-label"><span>IMAP storage</span><span id="folder-quota-text">Loading…</span></div>
|
||
<div class="folder-quota-track"><span id="folder-quota-bar"></span></div>
|
||
</div>
|
||
<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="reader-fullscreen" class="icon-button" type="button" title="Open full screen"
|
||
aria-label="Open message full screen" aria-pressed="false"><svg>
|
||
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-external-link"></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 data-i18n="reply">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 data-i18n="reply_all">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 data-i18n="forward">Forward</span></button>
|
||
<details id="message-details-menu" class="toolbar-menu">
|
||
<summary class="button quiet"><svg aria-hidden="true">
|
||
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-file-text"></use>
|
||
</svg><span data-i18n="message_details">Message details</span></summary>
|
||
<div class="toolbar-menu-popover" role="menu">
|
||
<button id="headers-btn" type="button" role="menuitem" data-i18n="headers">Headers</button>
|
||
<button id="source-btn" type="button" role="menuitem" data-i18n="source">Source</button>
|
||
</div>
|
||
</details>
|
||
<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>
|
||
<details id="message-transfer-menu" class="toolbar-menu">
|
||
<summary class="button quiet"><svg aria-hidden="true">
|
||
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-folder"></use>
|
||
</svg><span data-i18n="move_copy">Move / copy</span></summary>
|
||
<div class="toolbar-menu-popover" role="menu">
|
||
<button id="reader-move-action" type="button" role="menuitem" data-i18n="move_to">Move to…</button>
|
||
<button id="reader-copy-action" type="button" role="menuitem" data-i18n="copy_to">Copy to…</button>
|
||
</div>
|
||
</details>
|
||
<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">
|
||
<div class="sender-line"><strong id="reader-from"></strong><button id="reader-add-sender-contact"
|
||
class="address-contact-button" type="button" title="Add sender to contacts"
|
||
aria-label="Add sender to contacts"><svg>
|
||
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-user-round"></use>
|
||
</svg></button></div>
|
||
<div id="reader-to" class="reader-recipients" role="button" tabindex="0" aria-expanded="false"
|
||
title="Show full addresses"></div>
|
||
</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>
|
||
<div class="inline-actions"><button id="remote-image-load" class="button quiet" type="button">Load
|
||
images</button><button id="remote-image-trust" class="button quiet" type="button">Trust sender</button>
|
||
</div>
|
||
</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" data-i18n-scope>
|
||
<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-response-control"><span class="sr-only">Saved response</span><select
|
||
id="compose-response-template" title="Saved response">
|
||
<option value="">Response…</option>
|
||
</select></label>
|
||
<button type="button" id="compose-response-insert" title="Insert saved response" disabled><svg>
|
||
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-file-text"></use>
|
||
</svg></button>
|
||
</div>
|
||
<div id="compose-editor" class="compose-editor" contenteditable="true" role="textbox" aria-multiline="true"
|
||
data-placeholder="Write a message"></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 compose-footer">
|
||
<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>
|
||
<span id="compose-status" class="muted"></span><span id="compose-message-size"
|
||
class="muted compose-message-size" title="Estimated final message size">~0 / __RUSTBOX_MAX_MESSAGE_MB__
|
||
MiB</span>
|
||
<div class="compose-submit-actions"><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></div>
|
||
</footer>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="markdown-preview-dialog" class="dialog markdown-preview-dialog" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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><button id="shortcuts-open" class="button quiet settings-shortcuts"
|
||
type="button">Keyboard shortcuts</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="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>Interface style</span><select id="pref-interface-skin">
|
||
<option value="default">Global default</option>
|
||
<option value="rustbox">RustBox (custom)</option>
|
||
<option value="roundcube-classic">Roundcube Classic</option>
|
||
<option value="roundcube-larry">Roundcube Larry</option>
|
||
<option value="roundcube-elastic">Roundcube Elastic</option>
|
||
<option value="clean">Clean</option>
|
||
<option value="gmail">Gmail inspired</option>
|
||
<option value="proton">Proton inspired</option>
|
||
<option value="zoho">Zoho inspired</option>
|
||
<option value="outlook">Outlook inspired</option>
|
||
<option value="minimal">Minimal</option>
|
||
<option value="graphite">Graphite</option>
|
||
<option value="high-contrast">High contrast</option>
|
||
<option value="fastmail">Fastmail inspired</option>
|
||
<option value="apple-mail">Apple Mail inspired</option>
|
||
<option value="yahoo">Yahoo Mail inspired</option>
|
||
<option value="hey">HEY inspired</option>
|
||
<option value="nord">Nord</option>
|
||
<option value="github">GitHub inspired</option>
|
||
<option value="gitlab">GitLab inspired</option>
|
||
<option value="discord">Discord inspired</option>
|
||
<option value="slack">Slack inspired</option>
|
||
<option value="reddit">Reddit inspired</option>
|
||
<option value="notion">Notion inspired</option>
|
||
</select><small id="pref-interface-skin-note" class="muted">RustBox is fully customizable: colors,
|
||
spacing, panes and typography.</small></label>
|
||
<label id="pref-preset-scale-unlocked-row" class="checkbox-row hidden"><input
|
||
id="pref-preset-scale-unlocked" type="checkbox"><span>Allow UI scaling for predefined
|
||
style</span><small class="muted">When enabled, the UI size control can override the scale defined by
|
||
the selected preset.</small></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="emerald">Emerald</option>
|
||
<option value="lime">Lime</option>
|
||
<option value="sky">Sky</option>
|
||
<option value="navy">Navy</option>
|
||
<option value="plum">Plum</option>
|
||
<option value="magenta">Magenta</option>
|
||
<option value="copper">Copper</option>
|
||
<option value="sand">Sand</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>
|
||
<label><span>Maximum attachment size</span><output
|
||
id="compose-pref-max-attachment">__RUSTBOX_MAX_ATTACHMENT_MB__ MiB</output><small
|
||
class="muted">Per-file upload limit set with <code>max_attachment_size_mb</code> in
|
||
rustbox.toml.</small></label>
|
||
<label><span>Maximum message size</span><output id="compose-pref-max-message">__RUSTBOX_MAX_MESSAGE_MB__
|
||
MiB</output><small class="muted">Hard limit for the complete RFC822/MIME message sent to the MTA,
|
||
including base64/MIME overhead.</small></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>
|
||
<div class="settings-panel-heading response-template-heading">
|
||
<div>
|
||
<h3>Saved responses</h3>
|
||
<p class="muted">Reusable text or HTML responses, compatible with the Roundcube canned-response
|
||
workflow.</p>
|
||
</div><button id="response-template-new" class="button quiet" type="button">New response</button>
|
||
</div>
|
||
<div id="response-template-list" class="response-template-list"><span class="muted">No saved
|
||
responses.</span></div>
|
||
</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
|
||
id="identity-overview-help" 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 and calendar
|
||
reminders</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>
|
||
<p id="notify-permission-status" class="muted">Browser permission: unknown</p>
|
||
<div class="inline-actions"><button id="notify-permission" class="button quiet" type="button">Request
|
||
permission</button><button id="notify-test" class="button quiet" type="button">Test
|
||
notification</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><strong id="diagnostic-imap-status">Not checked</strong>
|
||
</div>
|
||
<div id="diagnostic-imap-summary" class="capability-grid"></div>
|
||
<div id="diagnostic-imap-caps" class="capability-list"></div>
|
||
<div class="inline-actions diagnostic-imap-actions"><button id="diagnostic-imap-reconnect"
|
||
class="button quiet" type="button">Reconnect</button></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 id="diagnostic-sieve-card" 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>
|
||
<div class="settings-panel-heading account-session-heading">
|
||
<div>
|
||
<h3>Reset settings</h3>
|
||
<p class="muted">Restore appearance, mailbox, notifications, folder, calendar and OpenPGP preferences.
|
||
Messages, identities, keys and templates are kept.</p>
|
||
</div><button id="reset-all-settings" class="button quiet danger" type="button">Reset all
|
||
settings</button>
|
||
</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>
|
||
<dt>Repository</dt>
|
||
<dd><a href="https://git.linuxiarz.pl/gru/RustBox" target="_blank"
|
||
rel="noopener noreferrer">git.linuxiarz.pl/gru/RustBox</a></dd>
|
||
</dl>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
|
||
|
||
<dialog id="identity-dialog" class="dialog identity-dialog" data-i18n-scope>
|
||
<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 id="identity-defaults-help"
|
||
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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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" data-i18n-scope>
|
||
<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.__RUSTBOX_ASSET_ID__.js" defer></script>
|
||
</body>
|
||
|
||
</html> |