VnPower/PixivFE
1
0
Fork 0
mirror of https://codeberg.org/VnPower/PixivFE synced 2024-12-06 19:16:23 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change the settings page layout

Browse Source
This commit is contained in:
VnPower
2024-08-07 21:53:45 +07:00
parent 98bdab213f
commit 5b7fe7fac6
4 changed files with 115 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.go
+1 -1
View File
@@ -104,7 +104,7 @@ func main() {
"OriginalURL": c.OriginalURL(),
"PageURL": pageURL,
"LoggedIn": token != "",
"Queries": c.Queries(),
"Queries": c.Queries(),
})
return c.Next()
})
views/css/style.css
+20
View File
@@ -335,6 +335,26 @@ input[type=submit][hidden] {
filter: brightness(1);
}
.tabs {
margin-top: 1rem;
margin-bottom: 1rem;
border: 1px solid white;
border-radius: 3px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.tabs input[type=radio]:checked + label + .tabs-content {
display: block;
}
.tabs .tabs-content {
order: 999;
width: 100%;
border-top: 1px solid white;
padding: 0.5rem 1rem 1rem;
display: none;
}
#loading-indicator {
z-index: 2;
isolation: isolate;
views/css/style.scss
+22
View File
@@ -383,6 +383,28 @@ input[type="submit"][hidden] {
}
}
.tabs {
margin-top: 1rem;
margin-bottom: 1rem;
border: 1px solid white;
border-radius: 3px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
input[type="radio"]:checked + label + .tabs-content {
display: block;
}
.tabs-content {
order: 999;
width: 100%;
border-top: 1px solid white;
padding: .5rem 1rem 1rem;
display: none;
}
}
// https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
#loading-indicator {
z-index: 2;
views/pages/settings.jet.html
+72 -61
View File
@@ -4,6 +4,78 @@
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>
<!-- General settings -->
<div class="tabs">
<input id="account" class="hidden" type="radio" name="tabsSG" checked>
<label for="account">Account</label>
<div class="tabs-content">
<h2 id="login">Login</h2>
<p>Supported features (for now):</p>
<ul>
<li>Discovery page</li>
<li>Landing page</li>
<li>Like/Bookmark</li>
</ul>
<p>
Log in with your Pixiv account's cookie to access features above.
To learn how to obtain your cookie, please see
<a href="https://pixivfe.pages.dev/obtaining-pixivfe-token/">the guide on obtaining your PixivFE token</a>.
</p>
<p>
Keep in mind that logins will expire whenever the server is updated, so you
may need to log in again if the server has been restarted recently.
</p>
<form action="/settings/token" method="post">
<input type="text" name="token" autocomplete="off" />
<input type="submit" value="Remember account cookie (until next server restart)" />
</form>
<hr />
<h2>Logout</h2>
<p>
To securely end your session, click the 'Logout!' button. This will
immediately remove your session token.
</p>
<form action="/settings/logout" method="post">
<input type="submit" value="Logout!" />
</form>
</div>
<input id="site" class="hidden" type="radio" name="tabsSG">
<label for="site">Site</label>
<div class="tabs-content">
<h2>Image proxy server</h2>
<p>
Choose how images are loaded in PixivFE by selecting either the built-in
proxy or one of the provided external proxy servers. If you prefer, you can
also specify a custom proxy server by entering its URL and clicking 'Use
Custom Proxy'.
</p>
<div class="form-field">
<form action="/settings/imageServer" method="post">
<label>
<input type="radio" name="image-proxy" required="true" value="" />
No (use built-in proxy)
</label>
{{ range ProxyList }}
<label>
<input type="radio" name="image-proxy" required="true" value="{{.}}" />
{{.}}
</label>
{{ end }}
<input type="submit" value="Use selected proxy" />
</form>
<br />
<form action="/settings/imageServer" method="post">
<label for="image-proxy">
Custom image proxy server
<input type="text" name="image-proxy" required="true" placeholder="https://example.com" autocomplete="off" />
</label>
<input type="submit" value="Use custom proxy" />
</form>
</div>
</div>
</div>
<!-- End of general settings -->
<details>
<summary>
<h2>Current cookie values</h2>
@@ -43,65 +115,4 @@
<form action="/settings/reset-all" method="post">
<input class="critical" type="submit" value="Reset all cookies/preferences" />
</form>
<hr />
<h2 id="login">Login</h2>
<p>Supported features (for now):</p>
<ul>
<li>Discovery page</li>
<li>Landing page</li>
<li>Like/Bookmark</li>
</ul>
<p>
Log in with your Pixiv account's cookie to access features above.
To learn how to obtain your cookie, please see
<a href="https://pixivfe.pages.dev/obtaining-pixivfe-token/">the guide on obtaining your PixivFE token</a>.
</p>
<p>
Keep in mind that logins will expire whenever the server is updated, so you
may need to log in again if the server has been restarted recently.
</p>
<form action="/settings/token" method="post">
<input type="text" name="token" autocomplete="off" />
<input type="submit" value="Remember account cookie (until next server restart)" />
</form>
<hr />
<h2>Logout</h2>
<p>
To securely end your session, click the 'Logout!' button. This will
immediately remove your session token.
</p>
<form action="/settings/logout" method="post">
<input type="submit" value="Logout!" />
</form>
<hr />
<h2>Image proxy server</h2>
<p>
Choose how images are loaded in PixivFE by selecting either the built-in
proxy or one of the provided external proxy servers. If you prefer, you can
also specify a custom proxy server by entering its URL and clicking 'Use
Custom Proxy'.
</p>
<div class="form-field">
<form action="/settings/imageServer" method="post">
<label>
<input type="radio" name="image-proxy" required="true" value="" />
No (use built-in proxy)
</label>
{{ range ProxyList }}
<label>
<input type="radio" name="image-proxy" required="true" value="{{.}}" />
{{.}}
</label>
{{ end }}
<input type="submit" value="Use selected proxy" />
</form>
<br />
<form action="/settings/imageServer" method="post">
<label for="image-proxy">
Custom image proxy server
<input type="text" name="image-proxy" required="true" placeholder="https://example.com" autocomplete="off" />
</label>
<input type="submit" value="Use custom proxy" />
</form>
</div>
</div>