/
githubmirror
/
obsidian-clipper
Обзор
Документация
Войти
/
githubmirror
/
obsidian-clipper
Код
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
1.3.0
src/settings.html
878 строк
43 KB
kepano
Settings: mobile style fixes
02 апр 2026, 23:57
02 апр 2026, 23:57
95184bb
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en" id="settings-page" style="height: 100%; overflow: hidden;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Obsidian Web Clipper</title> <link rel="stylesheet" href="style.css"> </head> <body style="height: 100%; overflow: hidden;"> <div id="settings"> <div id="settings-container"> <div id="sidebar"> <ul> <li class="sidebar-heading" data-i18n="settingsHeading">Settings</li> <li data-section="general"><i data-lucide="paperclip"></i><span data-i18n="general">General</span></li> <li data-section="properties"><i data-lucide="archive"></i><span data-i18n="properties">Properties</span></li> <li data-section="reader"><i data-lucide="book-open"></i><span data-i18n="reader">Reader</span></li> <li data-section="highlighter"><i data-lucide="highlighter"></i><span data-i18n="highlighter">Highlighter</span></li> <li data-section="interpreter"><i data-lucide="quote"></i><span data-i18n="interpreter">Interpreter</span></li> <li class="sidebar-heading" data-i18n="templatesHeading">Templates</li> </ul> <button type="button" id="new-template-btn" class="mod-cta" data-i18n="newTemplate">New template</button> <ul id="template-list"></ul> </div> <div id="content"> <div id="navbar"> <div id="navbar-title"> <svg xmlns="http://www.w3.org/2000/svg" class="logo" fill="none" viewBox="0 0 256 256"> <path class="purple" d="M94.82 149.44c6.53-1.94 17.13-4.9 29.26-5.71a102.97 102.97 0 0 1-7.64-48.84c1.63-16.51 7.54-30.38 13.25-42.1l3.47-7.14 4.48-9.18c2.35-5 4.08-9.38 4.9-13.56.81-4.07.81-7.64-.2-11.11-1.03-3.47-3.07-7.14-7.15-11.21a17.02 17.02 0 0 0-15.8 3.77l-52.81 47.5a17.12 17.12 0 0 0-5.5 10.2l-4.5 30.18a149.26 149.26 0 0 1 38.24 57.2ZM54.45 106l-1.02 3.06-27.94 62.2a17.33 17.33 0 0 0 3.27 18.96l43.94 45.16a88.7 88.7 0 0 0 8.97-88.5A139.47 139.47 0 0 0 54.45 106Z"/><path class="purple" d="m82.9 240.79 2.34.2c8.26.2 22.33 1.02 33.64 3.06 9.28 1.73 27.73 6.83 42.82 11.21 11.52 3.47 23.45-5.8 25.08-17.73 1.23-8.67 3.57-18.46 7.75-27.53a94.81 94.81 0 0 0-25.9-40.99 56.48 56.48 0 0 0-29.56-13.35 96.55 96.55 0 0 0-40.99 4.79 98.89 98.89 0 0 1-15.29 80.34h.1Z"/><path class="purple" d="M201.87 197.76a574.87 574.87 0 0 0 19.78-31.6 8.67 8.67 0 0 0-.61-9.48 185.58 185.58 0 0 1-21.82-35.9c-5.91-14.16-6.73-36.08-6.83-46.69 0-4.07-1.22-8.05-3.77-11.21l-34.16-43.33c0 1.94-.4 3.87-.81 5.81a76.42 76.42 0 0 1-5.71 15.9l-4.7 9.8-3.36 6.72a111.95 111.95 0 0 0-12.03 38.23 93.9 93.9 0 0 0 8.67 47.92 67.9 67.9 0 0 1 39.56 16.52 99.4 99.4 0 0 1 25.8 37.31Z"/></svg> <span>Obsidian Web Clipper</span> </div> <button id="hamburger-menu" class="hamburger-menu"> <span class="hamburger-icon"></span> </button> </div> <div id="general-section" class="settings-section"> <div class="settings-section-header"> <h2 data-i18n="generalSettings">General settings</h2> </div> <form id="general-settings-form"> <div class="setting-group"> <div class="setting-items"> <div id="usage-chart-container"> <div class="usage-chart-header"> <div class="usage-chart-title"> <div class="usage-chart-name" data-i18n="activity">Activity</div> <div class="setting-item-description"></div> </div> <div class="usage-chart-controls"> <select id="usage-period-select" class="dropdown"> <option value="30d" data-i18n="last30Days">Last 30 days</option> <option value="all" data-i18n="allTime">All time</option> </select> <select id="usage-aggregation-select" class="dropdown"> <option value="day" selected data-i18n="byDay">Days</option> <option value="week" data-i18n="byWeek">Weeks</option> </select> </div> </div> <div id="usage-chart" class="usage-chart"></div> </div> <div class="setting-item mod-horizontal is-hidden" id="rate-extension"> <div class="setting-item-info"> <label data-i18n="feedback">Feedback</label> <div class="setting-item-description" data-i18n="rateExtensionDescription"> Are you enjoying Web Clipper? Help us by giving it a rating. </div> </div> <div class="setting-item-control"> <div class="star-rating"> <span class="star" data-rating="1">★</span> <span class="star" data-rating="2">★</span> <span class="star" data-rating="3">★</span> <span class="star" data-rating="4">★</span> <span class="star" data-rating="5">★</span> </div> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="language-select" data-i18n="language">Language</label> <div class="setting-item-description" data-i18n="languageDescription"> Choose the display language for the extension interface. </div> </div> <div class="setting-item-control"> <select id="language-select"> <option value="" data-i18n="systemDefault">System default</option> <option value="en">English</option> </select> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="version"> <span data-i18n="version">Version</span> <span id="version-number" class="version-tag"></span> </label> <div class="setting-item-description"> <span id="using-latest-version" data-i18n="usingLatestVersion"> You are using the latest version. </span> <span id="update-available" class="text-warning" style="display: none;" data-i18n="updateAvailable"> An update is available. </span> </div> </div> <div class="setting-item-control"> <a href="https://github.com/obsidianmd/obsidian-clipper/releases" id="changelog-link" data-i18n="changelog" class="btn" target="_blank">Changelog</a> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="help-open-btn" data-i18n="help">Help</label> <div class="setting-item-description" data-i18n="helpDescription">Learn how to use Web Clipper and get help troubleshooting.</div> </div> <div class="setting-item-control"> <a href="https://help.obsidian.md/web-clipper" id="help-open-btn" class="btn" target="_blank" data-i18n="open">Open</a> </div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="vaults">Vaults</h3></div> <div class="setting-items"> <div class="setting-item-description" data-i18n="vaultsDescription">By default, clipped notes are saved to the currently open vault. You can add vaults here if you want the option to save to different vaults. Vault names must exactly match the name of the Obsidian vault. Press <strong>enter</strong> to add a vault.</div> <input type="text" id="vault-input" data-i18n="addVaultPlaceholder" placeholder="Press enter to add a vault" autocomplete="off" spellcheck="false" /> <ul id="vault-list" class="setting-item-list"></ul> </div> </div> <div class="setting-group" id="hotkeys-subsection"> <div class="setting-item setting-item-heading"><h3 data-i18n="hotkeys">Hotkeys</h3></div> <div class="setting-items"> <div class="setting-item-description shortcut-instructions"> </div> <div id="keyboard-shortcuts-list"></div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="behavior">Behavior</h3></div> <div class="setting-items"> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="save-behavior-dropdown" data-i18n="saveBehaviorLabel">Save behavior</label> <div class="setting-item-description" data-i18n="saveBehaviorDescription"> Choose the default option for saving pages. Alternate options appear in the dropdown menu next to the main button. </div> </div> <div class="setting-item-control"> <select id="save-behavior-dropdown"> <option value="addToObsidian" selected data-i18n="addToObsidian">Add to Obsidian</option> <option value="copyToClipboard" data-i18n="copyToClipboard">Copy to clipboard</option> <option value="saveFile" data-i18n="saveFile">Save file</option> </select> </div> </div> <div class="setting-item mh mod-horizontal"> <div class="setting-item-info"> <label for="open-behavior-dropdown" data-i18n="openBehaviorTitle">Default open behavior</label> <div class="setting-item-description" data-i18n="openBehaviorDescription"> Choose how Web Clipper opens by default. </div> </div> <div class="setting-item-control"> <select id="open-behavior-dropdown"> <option value="popup" selected data-i18n="popup">Popup</option> <option value="embedded" data-i18n="embedded">Embedded</option> </select> </div> </div> <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="silent-open-toggle" data-i18n="silentOpen">Save clipped note without opening it</label> <div class="setting-item-description" data-i18n="silentOpenDescription"> Clipped notes will be saved but will not open as a new tab. Obsidian will still be brought to the foreground. </div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="silent-open-toggle" /> </div> </div> </div> <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="legacy-mode-toggle" data-i18n="legacyMode">Legacy mode</label> <div class="setting-item-description" data-i18n="legacyModeDescription"> Uses the URI clipping method compatible with Obsidian 1.6.7 or earlier. Note that the length of the content you can clip is limited by your browser and OS. Some pages may fail without any errors. </div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="legacy-mode-toggle" /> </div> </div> </div> </div> <div class="setting-item setting-item-heading"><h3 data-i18n="advanced">Advanced</h3></div> <div class="setting-items"> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="reset-default-template-btn" data-i18n="resetDefaultTemplate">Reset default template</label> <div class="setting-item-description" data-i18n="resetDefaultTemplateDescription">Remove any changes you've made to the default template.</div> </div> <div class="setting-item-control"> <button type="button" id="reset-default-template-btn" class="mod-warning" data-i18n="reset">Reset</button> </div> </div> <div class="setting-item mod-horizontal mod-toggle" style="display: none;"> <div class="setting-item-info"> <label for="beta-features-toggle" data-i18n="earlyAccessFeatures">Early access features</label> <div class="setting-item-description" data-i18n="earlyAccessDescription"> Use features that require the latest <a href="https://help.obsidian.md/Obsidian/Early+access+versions" target="_blank">early access version</a> of Obsidian. Currently requires Obsidian 1.7.2 or later. </div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="beta-features-toggle" /> </div> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="export-all-settings-btn" data-i18n="exportAllSettings">Export all settings</label> <div class="setting-item-description" data-i18n="exportAllSettingsDescription">Export all settings including templates and properties.</div> </div> <div class="setting-item-control"> <button type="button" id="export-all-settings-btn" data-i18n="export">Export</button> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="import-all-settings-btn" data-i18n="importAllSettings">Import all settings</label> <div class="setting-item-description" data-i18n="importAllSettingsDescription">Import all settings including templates and properties. This will replace your current configuration.</div> </div> <div class="setting-item-control"> <button type="button" id="import-all-settings-btn" data-i18n="import">Import</button> </div> </div> </div> </div> </form> </div> <div id="highlighter-section" class="settings-section"> <div class="settings-section-header"> <h2 data-i18n="highlighterSettings">Highlighter</h2> </div> <form id="highlighter-settings-form"> <div class="setting-group"> <div class="setting-items"> <!-- <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="highlighter-toggle" data-i18n="enableHighlighter">Enable highlighter</label> <div class="setting-item-description" data-i18n="enableHighlighterDescription"> Enable the highlighter tool. </div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="highlighter-toggle" checked/> </div> </div> </div> --> <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="highlighter-visibility" data-i18n="alwaysShowHighlights">Always show highlights</label> <div class="setting-item-description" data-i18n="alwaysShowHighlightsDescription"> Display your saved highlights when you load a page. Turn off to only display highlights when highlighter mode is activated. </div> </div> <div class="setting-item-control"> <div class="checkbox-container is-enabled"> <input type="checkbox" id="highlighter-visibility" checked/> </div> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="highlighter-behavior" data-i18n="clipBehavior">Clip behavior</label> <div class="setting-item-description" data-i18n="clipBehaviorDescription"> Choose how highlighted content is saved to Obsidian. Defines the <strong>{{content}}</strong> variable. </div> </div> <div class="setting-item-control"> <select id="highlighter-behavior"> <option value="highlight-inline" data-i18n="highlightInline">Highlight inline</option> <option value="replace-content" data-i18n="replaceContent">Replace the page content</option> <option value="no-highlights" data-i18n="noHighlights">Do nothing</option> </select> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="export-highlights" data-i18n="exportHighlights">Export highlights</label> <div class="setting-item-description" data-i18n="exportHighlightsDescription"> Export your highlights to a file. </div> </div> <div class="setting-item-control"> <button type="button" id="export-highlights" data-i18n="export">Export</button> </div> </div> </div> </div> </form> </div> <div id="reader-section" class="settings-section"> <div class="settings-section-header"> <h2 data-i18n="reader">Reader</h2> </div> <div id="reader-preview" class="obsidian-reader-active"> <p class="reader-preview-title">File over app</p> <p class="reader-preview-meta">Steph Ango · July 1, 2023 · <a class="reader-preview-meta-link" href="https://stephango.com/file-over-app" target="_blank">stephango.com</a></p> <p class="reader-preview-body"><em>File over app</em> is a philosophy: if you want to create <strong>digital artifacts that last</strong>, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you this <a class="reader-preview-link" href="https://stephango.com/file-over-app" target="_blank">freedom</a>.</p> </div> <form id="reader-settings-form"> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="readerFonts">Fonts</h3></div> <div class="setting-items"> <div class="setting-item"> <div class="setting-item-info"> <label data-i18n="readerFont">Font options</label> <div class="setting-item-description" data-i18n="readerFontDescription">Add fonts installed on your system. Press enter to add a font.</div> </div> <input type="text" id="reader-font-input" data-i18n="readerFontPlaceholder" placeholder="Press enter to add a font" autocomplete="off" spellcheck="false" /> <ul id="reader-font-list" class="setting-item-list"></ul> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="readerTypography">Typography</h3></div> <div class="setting-items"> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="reader-font-size" data-i18n="readerFontSize">Base font size</label> </div> <div class="setting-item-control"> <input type="range" id="reader-font-size" min="9" max="24" step="1" /> <span id="reader-font-size-display" class="slider-value"></span> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="reader-line-height" data-i18n="readerLineHeight">Line height</label> </div> <div class="setting-item-control"> <input type="range" id="reader-line-height" min="1.1" max="2" step="0.1" /> <span id="reader-line-height-display" class="slider-value"></span> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="reader-max-width" data-i18n="readerLineWidth">Line width</label> </div> <div class="setting-item-control"> <input type="range" id="reader-max-width" min="30" max="60" step="1" /> <span id="reader-max-width-display" class="slider-value"></span> </div> </div> <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="reader-color-links" data-i18n="readerColorLinks">Color links</label> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="reader-color-links" /> </div> </div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="readerImages">Images</h3></div> <div class="setting-items"> <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="reader-blend-images" data-i18n="readerBlendImages">Blend images</label> <div class="setting-item-description" data-i18n="readerBlendImagesDescription">Blend images with the page background in reader mode.</div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="reader-blend-images" checked /> </div> </div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="readerThemeSection">Theme</h3></div> <div class="setting-items"> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="reader-appearance" data-i18n="readerAppearance">Appearance</label> <div class="setting-item-description" data-i18n="readerAppearanceDescription">Choose light or dark appearance.</div> </div> <div class="setting-item-control"> <select id="reader-appearance"> <option value="auto" data-i18n="readerAppearanceAuto">Automatic</option> <option value="light" data-i18n="readerAppearanceLight">Light</option> <option value="dark" data-i18n="readerAppearanceDark">Dark</option> </select> </div> </div> <div class="setting-item setting-item-stacked"> <div class="setting-item-info"> <label data-i18n="readerTheme">Theme</label> <div class="setting-item-description" data-i18n="readerThemeDescription">Choose the colors used in reading view.</div> </div> <div id="reader-theme-grid-light" class="reader-theme-grid"></div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="reader-separate-dark-theme" data-i18n="readerDarkTheme">Dark mode color scheme</label> <div class="setting-item-description" data-i18n="readerDarkThemeDescription">Use a different color scheme in dark mode.</div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="reader-separate-dark-theme" /> </div> </div> </div> <div id="reader-theme-dark-section"> <div id="reader-theme-grid-dark" class="reader-theme-grid"></div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="advanced">Advanced</h3></div> <div class="setting-items"> <div class="setting-item"> <div class="setting-item-info"> <label for="reader-custom-css" data-i18n="readerCustomCss">Custom CSS</label> <div class="setting-item-description" data-i18n="readerCustomCssDescription">CSS applied automatically in reading view.</div> </div> <textarea id="reader-custom-css" rows="6" spellcheck="false"></textarea> </div> </div> </div> </form> </div> <div id="interpreter-section" class="settings-section"> <div class="settings-section-header"> <h2 data-i18n="interpreter">Interpreter</h2> </div> <form id="interpreter-settings-form"> <div class="setting-group"> <div class="setting-items"> <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="interpreter-toggle" data-i18n="enableInterpreter">Enable interpreter</label> <div class="setting-item-description" data-i18n="enableInterpreterDescription"> Use natural language to extract data from pages. For example, you can use the template syntax <strong>{{"a summary of the page"}}</strong>. Requires an API key or custom model configured below. <a href="https://help.obsidian.md/web-clipper/interpreter" target="_blank">Learn more</a>. </div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="interpreter-toggle" /> </div> </div> </div> <div class="setting-item mod-horizontal mod-toggle"> <div class="setting-item-info"> <label for="interpreter-auto-run-toggle" data-i18n="autoRunInterpreter">Automatically run</label> <div class="setting-item-description" data-i18n="autoRunInterpreterDescription">Run prompt variables immediately if the template contains any. This will consume API credits with your model provider. Turn off if you only want to run interpreter manually.</div> </div> <div class="setting-item-control"> <div class="checkbox-container"> <input type="checkbox" id="interpreter-auto-run-toggle" /> </div> </div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"> <h3 data-i18n="providers">Providers</h3> <div id="api-keys-warning-container" class="warning-container"> <div class="warning-icon"> <i data-lucide="alert-triangle"></i> </div> <div class="warning-text" data-i18n="apiKeysWarning"> By using an external provider you agree to their terms and privacy policy. Interpreter requests are sent directly to the provider you choose. Obsidian does not gather or store any data about your requests. </div> </div> </div> <div class="setting-items"> <div class="provider-list-container"> <div id="provider-list"></div> <div class="add-btn"> <a id="add-provider-btn" data-i18n="addProvider">+ Add provider</a> </div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="models">Models</h3></div> <div class="setting-items"> <div class="model-list-container"> <div id="model-list"></div> <div class="add-btn"> <a id="add-model-btn" data-i18n="addModel">+ Add model</a> </div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="advanced">Advanced</h3></div> <div class="setting-items"> <div class="setting-item"> <label for="default-prompt-context" data-i18n="defaultInterpreterContext">Default interpreter context</label> <div class="setting-item-description" data-i18n="defaultInterpreterContextDescription">Override the context used to interpret prompt variables. Variables can be used here.</div> <textarea id="default-prompt-context" rows="4" placeholder="{{fullHtml}}" spellcheck="false"></textarea> </div> </div> </div> </form> </div> <div id="properties-section" class="settings-section"> <div class="settings-section-header"> <h2 data-i18n="propertiesSettings">Properties</h2> </div> <form id="property-types-form"> <div class="setting-group"> <div class="setting-items"> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="import-types-btn" data-i18n="importProperties">Import properties</label> <div class="setting-item-description" data-i18n="importPropertiesDescription"> To import your properties from Obsidian, locate the <strong>types.json</strong> file in the <strong>.obsidian</strong> folder within your vault. Note this folder is hidden by default on most operating systems. </div> </div> <div class="setting-item-control"> <button type="button" id="import-types-btn" data-i18n="import">Import</button> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="export-types-btn" data-i18n="exportProperties">Export properties</label> <div class="setting-item-description" data-i18n="exportPropertiesDescription"> Save Web Clipper properties to a <strong>types.json</strong> file that can be imported into your Obsidian vault, or into Web Clipper on other devices. </div> </div> <div class="setting-item-control"> <button type="button" id="export-types-btn" data-i18n="export">Export</button> </div> </div> <div class="setting-item mod-horizontal"> <div class="setting-item-info"> <label for="delete-unused-properties-btn" data-i18n="removeUnusedProperties">Remove unused properties</label> <div class="setting-item-description" data-i18n="removeUnusedPropertiesDescription"> Remove all properties that are not used in any template. </div> </div> <div class="setting-item-control"> <button type="button" id="delete-unused-properties-btn" data-i18n="remove">Remove</button> </div> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="allProperties">All properties</h3></div> <div class="setting-items"> <div class="add-btn" style="display: none;"> <a id="add-property-type-btn">+ Add property</a> </div> <div id="property-types-list" class="properties-list"></div> </div> </div> </form> </div> <div id="templates-section" class="settings-section"> <div class="settings-section-header"> <h2 id="template-editor-title" data-i18n="editTemplate">Edit template</h2> <div class="settings-section-actions"> <button class="export-template-btn mh" data-i18n="export">Export</button> <button class="import-template-btn mh" data-i18n="import">Import</button> <div class="menu-btn"> <button id="more-actions-btn" class="menu-toggle" data-i18n="more">More</button> <div id="template-actions-menu" class="menu"> <div class="menu-item" id="duplicate-template-btn"> <div class="menu-item-icon"> <i data-lucide="copy-plus"></i> </div> <div class="menu-item-title" data-i18n="duplicate"> Duplicate </div> </div> <div class="menu-item" id="copy-template-json-btn"> <div class="menu-item-icon"> <i data-lucide="copy"></i> </div> <div class="menu-item-title" data-i18n="copyAsJson"> Copy as JSON </div> </div> <div class="menu-item export-template-btn dkh"> <div class="menu-item-icon"> <i data-lucide="files"></i> </div> <div class="menu-item-title" data-i18n="export"> Export </div> </div> <div class="menu-item import-template-btn dkh"> <div class="menu-item-icon"> <i data-lucide="import"></i> </div> <div class="menu-item-title" data-i18n="import"> Import </div> </div> <div class="menu-item" id="delete-template-btn"> <div class="menu-item-icon"> <i data-lucide="trash-2"></i> </div> <div class="menu-item-title" data-i18n="delete"> Delete </div> </div> </div> </div> </div> </div> <form id="template-settings-form"> <div id="template-editor"> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="template">Template</h3></div> <div class="setting-items"> <div class="setting-item"> <label for="template-name" data-i18n="templateName">Template name</label> <input type="text" id="template-name" data-i18n="templateName" placeholder="Template name" /> </div> <div class="setting-item"> <label for="url-patterns" data-i18n="templateTriggers">Template triggers</label> <div class="setting-item-description" data-i18n="templateTriggersDescription">Define rules to automatically select this template if it matches a URL pattern or contains schema.org data. One rule per line.</div> <textarea id="url-patterns" placeholder="https://example.com/" rows="2" spellcheck="false"></textarea> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="templateGroupLocation">Location</h3></div> <div class="setting-items"> <div class="setting-item"> <label for="template-behavior" data-i18n="behavior">Behavior</label> <select id="template-behavior"> <option value="create" data-i18n="createNewNote">Create new note</option> <option value="append-specific" data-i18n="appendToExisting">Add to an existing note, at the bottom</option> <option value="prepend-specific" data-i18n="prependToExisting">Add to an existing note, at the top</option> <option value="append-daily" data-i18n="appendToDaily">Add to daily note, at the bottom</option> <option value="prepend-daily" data-i18n="prependToDaily">Add to daily note, at the top</option> <option value="overwrite" data-i18n="overwriteNote">Overwrite note</option> </select> </div> <div class="setting-item" id="note-name-format-container" style="display: none;"> <label for="note-name-format" data-i18n="noteNameFormat">Note name</label> <div class="setting-item-description" data-i18n="noteNameFormatDescription">Format for the file name of the note. You can use variables like {{title}}, {{date}}, and {{published}} to pre-populate data from the page.</div> <input type="text" id="note-name-format" placeholder="{{title}}" /> </div> <div class="setting-item" id="path-name-container" style="display: none;"> <label for="template-path-name" data-i18n="noteLocation">Note location</label> <div class="setting-item-description" data-i18n="noteLocationDescription">The folder or path of the note.</div> <input type="text" id="template-path-name" placeholder="Clippings" /> </div> <div class="setting-item"> <label for="template-vault" data-i18n="vault">Vault</label> <div class="setting-item-description" data-i18n="vaultDescription">Select the default vault for this template. Go to general settings to add or remove vaults.</div> <select id="template-vault"> <option value="" data-i18n="lastUsed">Last used</option> </select> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="templateGroupContent">Content</h3></div> <div class="setting-items"> <div id="properties-container"> <label data-i18n="templateProperties">Properties</label> <div class="setting-item-description" data-i18n="templatePropertiesDescription">Properties to add to the top of the clipped note. Use variables to pre-populate data from the page.</div> <div id="template-properties" class="properties-list"></div> <div class="add-btn metadata-add-btn"> <a id="add-property-btn" data-i18n="addProperty">+ Add property</a> </div> </div> <div class="setting-item"> <label for="note-content-format" data-i18n="noteContent">Note content</label> <div class="setting-item-description" data-i18n="noteContentDescription">Customize the content of the note. Use variables to pre-populate data from the page.</div> <textarea id="note-content-format" rows="6" placeholder="{{content}}"></textarea> </div> </div> </div> <div class="setting-group"> <div class="setting-item setting-item-heading"><h3 data-i18n="advanced">Advanced</h3></div> <div class="setting-items"> <div class="setting-item" id="prompt-context-container"> <label for="prompt-context" data-i18n="interpreterContext">Interpreter context</label> <div class="setting-item-description" data-i18n="interpreterContextDescription">The context used to interpret prompt variables. Overrides the default context defined in Interpreter settings. Variables can be used here.</div> <textarea id="prompt-context" rows="4" spellcheck="false"></textarea> </div> </div> </div> </div> </form> </div> </div> </div> </div> <div id="import-modal" class="modal-container"> <div class="modal-bg"></div> <div class="modal"> <div class="modal-header"> <div class="modal-title" data-i18n="importModalTitle">Import</div> </div> <div class="modal-content"> <div class="import-options"> <div class="import-drop-zone import-option"> <p data-i18n="dragAndDropFile">Drag and drop file here</p> </div> <p class="import-or-text" data-i18n="orPasteBelow">Or paste content below</p> <textarea class="import-json-textarea" data-i18n="pasteJsonHere"></textarea> </div> </div> <div class="modal-button-container"> <button class="import-confirm-btn mod-cta" data-i18n="import">Import</button> <button class="import-cancel-btn" data-i18n="cancel">Cancel</button> </div> </div> </div> <div id="model-modal" class="modal-container"> <div class="modal-bg"></div> <div class="modal"> <div class="modal-header"> <div class="modal-title" data-i18n="addModelTitle"></div> </div> <div class="modal-content"> <form id="model-form"> <div class="setting-item"> <div class="setting-item-info"> <label for="model-provider" data-i18n="provider">Provider</label> <div class="setting-item-description" data-i18n="modelProviderDescription">Select the provider for this model.</div> </div> <div class="setting-item-control"> <select id="model-provider" name="providerId" required> <option value="" data-i18n="selectProvider">Select a provider</option> </select> </div> </div> <div class="setting-item model-selection-container" style="display: none;"> <div class="setting-item-info"> <label data-i18n="popularModels">Popular models</label> <div class="setting-item-description" data-i18n="popularModelsDescription">Choose from commonly used models or enter custom model details.</div> </div> <div class="setting-item-control"> <div class="radio-container" id="model-selection-radios"> </div> </div> </div> <div class="setting-item"> <div class="setting-item-info"> <label for="model-name"> <span data-i18n="modelName">Display name</span> </label> <div class="setting-item-description" data-i18n="modelNameDescription">A name for this model.</div> </div> <div class="setting-item-control"> <input type="text" id="model-name" name="name" data-i18n="modelName" placeholder="Model name" required> </div> </div> <div class="setting-item"> <div class="setting-item-info"> <label for="provider-model-id" data-i18n="providerModelId">Model ID</label> <div class="setting-item-description" data-i18n="providerModelIdDescription">The model identifier from your provider.</div> </div> <div class="setting-item-control"> <input type="text" id="provider-model-id" name="providerModelId" data-i18n="providerModelId" placeholder="Model ID" required> </div> </div> </form> </div> <div class="modal-button-container"> <button class="model-confirm-btn mod-cta" data-i18n="save">Save</button> <button class="model-cancel-btn" data-i18n="cancel">Cancel</button> </div> </div> </div> <div id="provider-modal" class="modal-container"> <div class="modal-bg"></div> <div class="modal"> <div class="modal-header"> <div class="modal-title" data-i18n="addProviderTitle"></div> </div> <div class="modal-content"> <form id="provider-form"> <div class="setting-item"> <div class="setting-item-info"> <label for="provider-preset"> <span data-i18n="provider">Provider</span> </label> <div class="setting-item-description" data-i18n="providerPresetDescription">Choose a Provider or add a custom one.</div> </div> <div class="setting-item-control"> <select id="provider-preset" name="preset"> <option value="">Custom</option> </select> </div> </div> <div class="setting-item"> <div class="setting-item-info"> <label for="provider-name" data-i18n="providerName">Provider name</label> <div class="setting-item-description" data-i18n="providerNameDescription">Display name for this provider.</div> </div> <div class="setting-item-control"> <input type="text" id="provider-name" name="name" data-i18n="providerName" placeholder="Provider name" required> </div> </div> <div class="setting-item"> <div class="setting-item-info"> <label for="provider-base-url" data-i18n="providerBaseUrl">Base URL</label> <div class="setting-item-description" data-i18n="providerBaseUrlDescription">The API endpoint URL for this provider.</div> </div> <div class="setting-item-control"> <input type="text" id="provider-base-url" name="baseUrl" data-i18n="providerBaseUrl" placeholder="Base URL" required> </div> </div> <div class="setting-item"> <div class="setting-item-info"> <label for="provider-api-key" data-i18n="providerApiKey">API key</label> <div class="setting-item-description" data-i18n="providerApiKeyDescription">Your API key for this provider.</div> </div> <div class="setting-item-control"> <input type="text" id="provider-api-key" name="apiKey" data-i18n="providerApiKey" placeholder="API key"> </div> </div> </form> </div> <div class="modal-button-container"> <button class="provider-confirm-btn mod-cta" data-i18n="save">Save</button> <button class="provider-cancel-btn" data-i18n="cancel">Cancel</button> </div> </div> </div> <div id="feedback-modal" class="modal-container"> <div class="modal-bg"></div> <div class="modal"> <div class="modal-header"> <div class="modal-title" data-i18n="feedbackTitle">Thanks for your feedback</div> </div> <div class="modal-content"> <p data-i18n="feedbackDescription">How can we improve Web Clipper? Please visit our help page, where you can report bugs, suggest features, and get help with common issues.</p> </div> <div class="modal-button-container"> <a class="btn mod-cta" href="https://help.obsidian.md/web-clipper/troubleshoot" target="_blank" data-i18n="help">Help</a> <button class="feedback-close-btn" data-i18n="close">Close</button> </div> </div> </div> <script type="module" src="settings.js"></script> </body> </html>