mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
perennial
454 lines
31 KiB
HTML
454 lines
31 KiB
HTML
{{- extends "layout/default" }}
|
|
{{- block body() }}
|
|
<div class="row justify-content-center g-4" data-hx-boost="false">
|
|
|
|
<div class="col-12 col-lg-9">
|
|
{* NOTE: inside the col element since the nav is only 3 columns wide *}
|
|
<h1 class="mb-4"><i class="bi bi-gear me-2"></i>Settings</h1>
|
|
|
|
<p class="card-text">PixivFE uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">cookies</a> to store your preferences, which you can change on this page to customize your experience on this instance.</p>
|
|
<noscript>
|
|
{{- include "noscript/settings" }}
|
|
</noscript>
|
|
<div class="row js-required">
|
|
<div class="col-12 col-lg-3 mb-3 mb-lg-0">
|
|
<!-- Tabs -->
|
|
<nav class="nav nav-pills nav-fill d-flex flex-column fw-bold" id="settingsTabs" role="tablist">
|
|
<!-- TODO: update nav buttons to use charcoal colours -->
|
|
<button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1 active" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button" role="tab" aria-controls="account" aria-selected="true">Account</button>
|
|
|
|
<button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="site-tab" data-bs-toggle="tab" data-bs-target="#site" type="button" role="tab" aria-controls="site" aria-selected="false">Site</button>
|
|
|
|
<button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="novels-tab" data-bs-toggle="tab" data-bs-target="#novels" type="button" role="tab" aria-controls="novels" aria-selected="false">Novels</button>
|
|
|
|
<button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="language-tab" data-bs-toggle="tab" data-bs-target="#language" type="button" role="tab" aria-controls="language" aria-selected="false">Language</button>
|
|
|
|
<button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="advanced-settings-tab" data-bs-toggle="tab" data-bs-target="#advanced-settings" type="button" role="tab" aria-controls="advanced-settings" aria-selected="false">Cookies</button>
|
|
|
|
<button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold" id="reset-tab" data-bs-toggle="tab" data-bs-target="#reset" type="button" role="tab" aria-controls="reset" aria-selected="false">Reset</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-9">
|
|
<div class="custom-card bg-charcoal-surface1 p-4">
|
|
<!-- Tab content -->
|
|
<div class="tab-content" id="settingsTabsContent">
|
|
<!-- Account tab -->
|
|
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
|
|
<h2 class="mb-4">Account</h2>
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Log in</legend>
|
|
<p>
|
|
Log in with your Pixiv account's cookie to access the features below. To learn how to obtain your cookie, please see <a href="https://pixivfe-docs.pages.dev/obtaining-pixivfe-token/">the guide on obtaining your PixivFE token</a>.
|
|
</p>
|
|
<p>Supported features (for now):</p>
|
|
<ul class="mb-3">
|
|
<li>Discovery page</li>
|
|
<li>Landing page</li>
|
|
<li>Like/Bookmark</li>
|
|
</ul>
|
|
<p>Cookies will be saved on your browser, and will expire after a fixed period of time.</p>
|
|
<form id="login-form" hx-post="/settings/token" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<div class="mb-3">
|
|
<label for="token" class="form-label"><span class="fw-bold">PixivFE token</span></label>
|
|
<input type="password" class="form-control" id="token" name="token" placeholder="123456_AaBbccDDeeFFggHHIiJjkkllmMnnooPP" />
|
|
<div id="tokenHelpBlock" class="form-text">The underscore separates your member ID (left side) from a random string (right side).</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary fw-bold rounded-pill">Log in</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Log out</legend>
|
|
<p>To securely end your session, click the 'Log out!' button. This will immediately remove your session token.</p>
|
|
<form id="logout-form" hx-post="/settings/logout" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<button type="submit" class="btn btn-danger fw-bold rounded-pill">Log out!</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Site tab -->
|
|
<div class="tab-pane fade" id="site" role="tabpanel" aria-labelledby="site-tab">
|
|
<h2 class="mb-4">Site</h2>
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Image proxy server</legend>
|
|
<p>Choose how images are loaded in PixivFE by selecting either the built-in proxy or one of the provided external proxy servers.</p>
|
|
<p>If you prefer, you can also specify a custom proxy server by entering its URL manually.</p>
|
|
<form id="image-proxy-form" hx-post="/settings/imageServer" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<div class="mb-3">
|
|
<label for="current-image-proxy" class="form-label fw-bold"> Current image proxy server </label>
|
|
{* TODO: there's probably a better way of doing this *}
|
|
{{ a, _ := CookieList["pixivfe-ImageProxy"] }} {{- if a != "" -}}
|
|
<input class="form-control" type="text" value="{{ a }}" aria-label="Current image proxy" id="current-image-proxy" disabled readonly />
|
|
{{- else }}
|
|
<input class="form-control" type="text" value="{{ .DefaultProxyServer }}" aria-label="Current image proxy" id="current-image-proxy" disabled readonly />
|
|
{{ end -}}
|
|
<div id="current-image-proxy-help" class="form-text">The image proxy server currently set.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="image-proxy" class="form-label fw-bold">Select image proxy server</label>
|
|
<select class="form-select" id="image-proxy" name="image-proxy" required data-proxy-check-enabled="{{ .ProxyCheckEnabled }}">
|
|
<option value="/proxy/i.pximg.net" data-proxy-type="working">/proxy/i.pximg.net (built-in proxy)</option>
|
|
{{- range .WorkingProxyList }}
|
|
<option value="{{.}}" data-proxy-type="working">{{.}}</option>
|
|
{{- end }} {{- range .ProxyList }}
|
|
<option value="{{.}}" data-proxy-type="all" style="display: none">{{.}}</option>
|
|
{{- end }}
|
|
</select>
|
|
<div id="image-proxy-help" class="form-text">Choose a proxy server to load images through.</div>
|
|
</div>
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="show-all-proxies" />
|
|
<label class="form-check-label fw-bold" for="show-all-proxies">Show all proxy servers</label>
|
|
<div id="show-all-proxies-help" class="form-text">Enable this to display all available proxy servers, including those that may not be currently working.</div>
|
|
</div>
|
|
{{ if .ProxyCheckEnabled == false }}
|
|
<div class="alert alert-warning" role="alert">
|
|
<p>
|
|
<i class="bi bi-exclamation-triangle-fill"></i> This PixivFE instance has been configured to <span class="fw-bold">not</span> check the list of built-in image proxies (<a href="https://pixivfe-docs.pages.dev/hosting/environment-variables/#pixivfe_proxy_check_enabled" class="text-decoration-none"><code class="bg-dark-subtle rounded p-1">PIXIVFE_PROXY_CHECK_ENABLED=false</code></a> has been set).
|
|
</p>
|
|
<p class="mb-0">All image proxies will be shown by default, regardless of their actual state.</p>
|
|
</div>
|
|
{{- else -}}
|
|
<p>This PixivFE instance has been configured to check the list of built-in image proxies every {{ .ProxyCheckInterval }}.</p>
|
|
<p>Image proxies that fail this check will not be shown unless "Show all proxy servers" is enabled.</p>
|
|
{{- end -}}
|
|
<div class="mb-3">
|
|
<label for="custom-image-proxy" class="form-label fw-bold">Custom image proxy server</label>
|
|
<input type="text" class="form-control" id="custom-image-proxy" name="custom-image-proxy" placeholder="https://example.com" autocomplete="off" />
|
|
<div id="custom-image-proxy-help" class="form-text">Enter the URL of a custom proxy server if you wish to use one not listed above.</div>
|
|
</div>
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Time zone</legend>
|
|
<p>
|
|
Setting the time zone ensures that dates are interpreted and displayed correctly in the application.
|
|
</p>
|
|
<form id="time-zone-form" hx-post="/settings/timeZone" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<div class="mb-3">
|
|
<label for="current-time-zone" class="form-label fw-bold">Current</label>
|
|
{{- timeZoneValue := CookieList["pixivfe-TZ"] }}
|
|
{{- if timeZoneValue != "" -}}
|
|
<input class="form-control" type="text" value="{{ timeZoneValue }}" aria-label="Current image proxy" id="current-image-proxy" disabled readonly />
|
|
{{- else }}
|
|
<input class="form-control" type="text" value="Etc/UTC" aria-label="Current time zone" id="current-time-zone" disabled readonly />
|
|
{{ end -}}
|
|
<div id="current-time-zone-help" class="form-text">The time zone currently set.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="time-zone" class="form-label fw-bold">New</label>
|
|
<input type="text" class="form-control" id="time-zone" name="time-zone" placeholder="America/New_York" autocomplete="off" />
|
|
<div id="time-zone-help" class="form-text">
|
|
The value must be a valid <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" target="_blank" and rel="noopener noreferrer" class="text-decoration-none">tz database name<i class="bi bi-box-arrow-up-right align-top small ms-1"></i></a>.
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Filter artworks</legend>
|
|
<p>Toggle the switches below to hide specific types of content. Disabled switches will allow the content to be shown.</p>
|
|
<form id="filter-form" hx-post="/settings/filter" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
{{- hideR18 := CookieList["pixivfe-HideArtR18"] }}
|
|
{{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
|
|
{{- hideAI := CookieList["pixivfe-HideArtAI"] }}
|
|
<div class="mb-3 form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="filter-r18" name="filter-r18" value="1" {{- if hideR18 != "" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="filter-r18">Hide explicit content (R-18)</label>
|
|
<div id="filter-r18-help" class="form-text">
|
|
Hides artwork tagged as R18. This includes sexually explicit material suitable for adults (<a href="https://dic.pixiv.net/en/a/R-18" target="_blank" and rel="noopener noreferrer" class="text-decoration-none">entry on pixiv Encyclopedia<i class="bi bi-box-arrow-up-right align-top small ms-1"></i></a>).
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="filter-r18g" name="filter-r18g" value="1" {{- if hideR18G != "" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="filter-r18g">Hide ero-guro content (R-18G)</label>
|
|
<div id="filter-r18g-help" class="form-text">
|
|
Hides artwork tagged as R18G. This includes extremely graphic or violent material (<a href="https://dic.pixiv.net/en/a/R-18G" target="_blank" and rel="noopener noreferrer" class="text-decoration-none">entry on pixiv Encyclopedia<i class="bi bi-box-arrow-up-right align-top small ms-1"></i></a>).
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="filter-ai" name="filter-ai" value="1" {{- if hideAI != "" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="filter-ai">Hide AI-generated artworks</label>
|
|
<div id="filter-ai-help" class="form-text">Hides artwork that has been tagged as AI-generated. This helps focus on human-created content.</div>
|
|
</div>
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Open artworks in new tab</legend>
|
|
<p>Choose whether clicking on artwork thumbnails opens the full artwork in the same tab or a new tab.</p>
|
|
<form id="ttnt-form" hx-post="/settings/thumbnailToNewTab" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
{{- ttntValue := CookieList["pixivfe-ThumbnailToNewTab"] }}
|
|
<div class="mb-3 form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="ttnt-switch" name="ttnt" value="_blank" {{- if ttntValue == "_blank" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="ttnt-switch">Open in new tab</label>
|
|
<div id="ttnt-switch-help" class="form-text">When enabled, clicking on artwork thumbnails will open the full artwork in a new browser tab.</div>
|
|
</div>
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Artwork preview pop-ups</legend>
|
|
{{- artworkPreviewValue := CookieList["pixivfe-ArtworkPreview"] }}
|
|
<p>Configure how artwork previews are displayed when interacting with thumbnails.</p>
|
|
<form id="artwork-preview-form" hx-post="/settings/artworkPreview" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="app" id="app-c" value="cover" {{- if artworkPreviewValue == "cover" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="app-c"> Cover </label>
|
|
<div id="app-c-help" class="form-text">Open the previewer when you click into the thumbnails. This allows for quick previews without leaving the current page.</div>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="app" id="app-b" value="button" {{- if artworkPreviewValue == "button" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="app-b"> Button </label>
|
|
<div id="app-b-help" class="form-text">Add a button at the bottom-right of the thumbnails and open the previewer when you click into it. This provides more control over when previews are shown.</div>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="app" id="app-d" value="" {{- if artworkPreviewValue == "" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="app-d"> Disable </label>
|
|
<div id="app-d-help" class="form-text">No previewing. Clicking on thumbnails will directly open the full artwork page.</div>
|
|
</div>
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Logo style</legend>
|
|
{{- logoStyleValue := CookieList["pixivfe-LogoStyle"] }}
|
|
<p>Choose between the standard PixivFE logo or an alternative design created by <a href="https://codeberg.org/VnPower/PixivFE/issues/4#issuecomment-1017835" rel="noopener">@dragongoose</a> as a fun variation.</p>
|
|
<form id="locale-form" hx-post="/settings/set-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2 me-2">
|
|
<input type="hidden" name="key" value="pixivfe-LogoStyle">
|
|
<div class="col-auto">
|
|
<select class="form-select" id="locale" name="value" required>
|
|
<option value="standard" {{- if logoStyleValue == "standard" || logoStyleValue == "" }} selected{{- end }}>Standard</option>
|
|
<option value="alternative" {{- if logoStyleValue == "alternative" }} selected{{- end }}>Alternative</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</div>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Novels tab -->
|
|
<div class="tab-pane fade" id="novels" role="tabpanel" aria-labelledby="novels-tab">
|
|
<h2 class="mb-4">Novels</h2>
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Font family</legend>
|
|
{{- novelFontTypeValue := CookieList["pixivfe-NovelFontType"] }}
|
|
<p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
|
|
<form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" {{- if novelFontTypeValue == "mincho" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
|
|
<div id="font-type-mincho-help" class="form-text">A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.</div>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" {{- if novelFontTypeValue == "gothic" || novelFontTypeValue == "" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
|
|
<div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
|
|
</div>
|
|
|
|
<div class="accordion mb-3" id="typeface-samples">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="heading-typefaces">
|
|
<button class="accordion-button collapsed bg-dark text-body" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-typefaces" aria-expanded="false" aria-controls="collapse-typefaces">Typeface samples</button>
|
|
</h2>
|
|
<!-- TODO: remove the inline styling used here -->
|
|
<div id="collapse-typefaces" class="accordion-collapse collapse" aria-labelledby="heading-typefaces" data-bs-parent="#typeface-samples">
|
|
<div class="accordion-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h3 class="mb-3">Mincho</h3>
|
|
<p class="mb-0" style="font-family: "Noto Serif JP", serif">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h3 class="mb-3">Gothic</h3>
|
|
<p class="mb-0" style="font-family: "Noto Sans JP", sans-serif">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Force text orientation</legend>
|
|
{{- novelViewModeValue := CookieList["pixivfe-NovelViewMode"] }}
|
|
<p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
|
|
<form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" {{- if novelViewModeValue == "1" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
|
|
<div id="tx-ori-h-help" class="form-text">Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.</div>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" {{- if novelViewModeValue == "2" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
|
|
<div id="tx-ori-v-help" class="form-text">Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.</div>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" {{- if novelViewModeValue == "" }}checked{{- end }} />
|
|
<label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
|
|
<div id="tx-ori-n-help" class="form-text">Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.</div>
|
|
</div>
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Cookies tab -->
|
|
<div class="tab-pane fade" id="advanced-settings" role="tabpanel" aria-labelledby="advanced-settings-tab">
|
|
<h2 class="mb-4">Cookies</h2>
|
|
<p>This section allows you to directly manage PixivFE's cookie-based preferences. Intended for advanced users who understand the implications of changing these values.</p>
|
|
<div class="alert alert-warning" role="alert">
|
|
<p class="mb-0"><i class="bi bi-exclamation-triangle-fill"></i> Exercise caution when modifying these settings. Incorrect values may adversely affect PixivFE's functionality.</p>
|
|
</div>
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Cookie values</legend>
|
|
<p>View and edit individual cookie values. This is useful for fine-tuning specific preferences or troubleshooting issues.</p>
|
|
{{- range CookieListOrdered }}
|
|
<div class="mb-3">
|
|
<h4>{{ .k }}</h4>
|
|
|
|
<div class="d-flex">
|
|
<!-- Set cookie form -->
|
|
<form id="set-cookie-form-{{ .k }}" hx-post="/settings/set-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2 me-2">
|
|
<input type="hidden" name="key" value="{{ .k }}" />
|
|
|
|
<div class="col-auto">
|
|
<label class="visually-hidden" for="cookieValue-{{ .k }}">Cookie Value</label>
|
|
<input id="cookieValue-{{ .k }}" type="text" class="form-control" name="value" value="{{- .v }}" />
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<button type="submit" class="custom-btn-secondary">Set</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Clear cookie form -->
|
|
<form id="clear-cookie-form-{{ .k }}" hx-post="/settings/clear-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2">
|
|
<input type="hidden" name="key" value="{{ .k }}" />
|
|
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-danger fw-bold rounded-pill">Clear</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
|
|
<hr class="my-4">
|
|
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Raw settings</legend>
|
|
<p>This area displays all your current cookie values in a raw format. You can:</p>
|
|
<ul class="mb-3">
|
|
<li>Copy these settings to quickly configure another PixivFE instance</li>
|
|
<li>Restore your settings if the current instance's cookies have expired</li>
|
|
<li>Make bulk changes to multiple preferences at once</li>
|
|
</ul>
|
|
<p>When importing settings, any invalid or unrecognized values will be ignored to prevent configuration errors.</p>
|
|
<!-- Save raw settings -->
|
|
<form id="raw-settings-form" hx-post="/settings/raw" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<div class="mb-3">
|
|
<!-- NOTE: do not modify this <textarea> - weird whitespace will appear -->
|
|
<textarea class="form-control" name="raw" rows="10">
|
|
{{- range CookieListOrdered -}}{{ .k }}={{ .v + "\n" }}{{end -}}
|
|
</textarea>
|
|
</div>
|
|
<button type="submit" class="custom-btn-secondary">Set raw settings</button>
|
|
<div id="set-raw-settings-help" class="form-text">Applies the raw settings entered above. This action will overwrite your current configuration with the provided values.</div>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Language tab -->
|
|
<div class="tab-pane fade" id="language" role="tabpanel" aria-labelledby="language-tab">
|
|
<h2 class="mb-4">Language</h2>
|
|
{* TODO: create a separate endpoint in routes/settings for a tailored confirmation message *}
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Display language</legend>
|
|
{{- localeValue := CookieList["pixivfe-Locale"] }}
|
|
<p>Select your preferred display language from the dropdown menu below.</p>
|
|
<form id="locale-form" hx-post="/settings/set-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2 me-2">
|
|
<input type="hidden" name="key" value="pixivfe-Locale">
|
|
<div class="col-auto">
|
|
<select class="form-select" id="locale" name="value" required>
|
|
<option value="en" {{- if localeValue == "en" || localeValue == "" }} selected{{- end }}>English</option>
|
|
<option value="vi-VN" {{- if localeValue == "vi-VN" }} selected{{- end }}>Vietnamese</option>
|
|
<option value="zh-TW" {{- if localeValue == "zh-TW" }} selected{{- end }}>Chinese Traditional</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="custom-btn-secondary">Save</button>
|
|
</div>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Reset tab -->
|
|
<div class="tab-pane fade" id="reset" role="tabpanel" aria-labelledby="reset-tab">
|
|
<h2 class="mb-4">Reset</h2>
|
|
<fieldset>
|
|
<legend class="fs-5 fw-bold">Reset all preferences</legend>
|
|
<p>You can reset all cookies and use PixivFE's default preferences instead. This action will remove all customized settings.</p>
|
|
<form id="reset-all-form" hx-post="/settings/reset-all" hx-target="next #form-htmx-target" hx-swap="outerHTML">
|
|
<button type="submit" class="btn btn-danger fw-bold rounded-pill">Reset all preferences</button>
|
|
<div id="reset-all-help" class="form-text">
|
|
<span class="fw-bold">This action will reset all your preferences to default values. It cannot be undone.</span>
|
|
</div>
|
|
</form>
|
|
<div id="form-htmx-target"></div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|