Styled preferences page
This commit is contained in:
MarshDeer
parent
0db90f556c
commit
4fd5be3466
BIN
static/Roboto-Regular.ttf
Normal file
BIN
static/Roboto-Regular.ttf
Normal file
Binary file not shown.
@ -1,25 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Preferences</title>
|
||||
<script>
|
||||
function savePreference() {
|
||||
var checkbox = document.getElementById("openLinksCheckbox");
|
||||
localStorage.setItem("openLinksPreference", checkbox.checked);
|
||||
}
|
||||
<title>vxTwitter - Preferences</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<script>
|
||||
function savePreference() {
|
||||
var checkbox = document.getElementById("openLinksCheckbox");
|
||||
localStorage.setItem("openLinksPreference", checkbox.checked);
|
||||
}
|
||||
|
||||
function loadPreference() {
|
||||
var checkbox = document.getElementById("openLinksCheckbox");
|
||||
var preference = localStorage.getItem("openLinksPreference");
|
||||
checkbox.checked = preference === "true";
|
||||
}
|
||||
</script>
|
||||
function loadPreference() {
|
||||
var checkbox = document.getElementById("openLinksCheckbox");
|
||||
var preference = localStorage.getItem("openLinksPreference");
|
||||
checkbox.checked = preference === "true";
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
</head>
|
||||
|
||||
<body onload="loadPreference()">
|
||||
<h1>Preferences</h1>
|
||||
<label for="openLinksCheckbox">
|
||||
<input type="checkbox" id="openLinksCheckbox" onchange="savePreference()">
|
||||
Open links in app
|
||||
</label>
|
||||
<aside class="warning top">
|
||||
<em> This is not an official X / Twitter website. </em>
|
||||
</aside>
|
||||
|
||||
<header>
|
||||
<a href="https://github.com/dylanpdx/BetterTwitFix" aria-label="Back">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" style="color: white"><path d="M7.414 13l5.043 5.04-1.414 1.42L3.586 12l7.457-7.46 1.414 1.42L7.414 11H21v2H7.414z"></path></svg>
|
||||
</a>
|
||||
<h1>vxTwitter Preferences</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="optiongroup" id="redirectionSettings">
|
||||
<h2 labels="redirectionSettings"> Redirection settings </h2>
|
||||
<label for="openLinksCheckbox">
|
||||
<div class="checkboxcontainer">
|
||||
<input type="checkbox" id="openLinksCheckbox" onchange="savePreference()">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M9.64 18.952l-5.55-4.861 1.317-1.504 3.951 3.459 8.459-10.948L19.4 6.32 9.64 18.952z"></path></svg>
|
||||
</div>
|
||||
<h3> Open links in app </h3>
|
||||
<p> When you open a link on this device, vxTwitter will try to redirect you to the official X (formerly Twitter) app instead of using your browser. </p>
|
||||
</label>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<aside class="warning bottom">
|
||||
<em> This is not an official X / Twitter website. </em>
|
||||
</aside>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
142
static/style.css
Normal file
142
static/style.css
Normal file
@ -0,0 +1,142 @@
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto"),
|
||||
url("/Roboto-Regular.ttf");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #000;
|
||||
--fg: #fff;
|
||||
--gray: #777;
|
||||
--lowcontrast: #222;
|
||||
--accent: #1d9bf0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #fff;
|
||||
--fg: #000;
|
||||
--lowcontrast: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 1em 1ch;
|
||||
border-bottom: 1px solid var(--lowcontrast);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
header svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: var(--fg);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0 auto;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
width: calc(100% - 4ch);
|
||||
max-width: 1500px;
|
||||
padding: 0 2ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
label input {
|
||||
grid-area: input;
|
||||
}
|
||||
|
||||
label h3 {
|
||||
grid-area: title;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label p {
|
||||
grid-area: text;
|
||||
color: var(--gray);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Checkbox settings */
|
||||
label:has(input[type=checkbox]) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"title input"
|
||||
"text text";
|
||||
}
|
||||
|
||||
label:has(input[type=checkbox]):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkboxcontainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--gray);
|
||||
border-radius: 5px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
input[type=checkbox]+svg {
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--fg);
|
||||
position: absolute;
|
||||
inset: 1px 2px;
|
||||
}
|
||||
|
||||
input[type=checkbox]:hover {
|
||||
box-shadow: 0 0 0 5px var(--lowcontrast);
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked+svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* "Not a phishing site" warning tape */
|
||||
aside {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--bg) 1ch 2ch,
|
||||
var(--accent) 2ch 3ch);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
aside em {
|
||||
background: var(--bg);
|
||||
color: var(--accent);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user