alterware/BetterTwitFix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #224 from MarshDeer/main

Browse Source 
Style preferences page
This commit is contained in:
Dylan 2024-08-27 22:08:10 +01:00 committed by GitHub
commit 7f506b5dd9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 191 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
readme.md
View File

@ -100,3 +100,5 @@ vxTwitter generates a config.json in its root directory the first time you run i
We check for t.co links in non video tweets, and if one is found, we direct the discord useragent to embed that link directly, this means that twitter links containing youtube / vimeo links will automatically embed those as if you had just directly linked to that content We check for t.co links in non video tweets, and if one is found, we direct the discord useragent to embed that link directly, this means that twitter links containing youtube / vimeo links will automatically embed those as if you had just directly linked to that content
This project is licensed under the **Do What The Fuck You Want Public License** This project is licensed under the **Do What The Fuck You Want Public License**
The Font "Roboto-Regular" is licensed under the Apache-2.0 license.

BIN
static/Roboto-Regular.ttf Normal file
View File

Binary file not shown.

66
static/preferences.html
View File

@ -1,25 +1,53 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Preferences</title> <title>vxTwitter - Preferences</title>
<script> <meta name="viewport" content="width=device-width, initial-scale=1.0">
function savePreference() { <link rel="icon" href="/favicon.ico">
var checkbox = document.getElementById("openLinksCheckbox"); <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
localStorage.setItem("openLinksPreference", checkbox.checked); <script>
} function savePreference() {
var checkbox = document.getElementById("openLinksCheckbox");
localStorage.setItem("openLinksPreference", checkbox.checked);
}
function loadPreference() { function loadPreference() {
var checkbox = document.getElementById("openLinksCheckbox"); var checkbox = document.getElementById("openLinksCheckbox");
var preference = localStorage.getItem("openLinksPreference"); var preference = localStorage.getItem("openLinksPreference");
checkbox.checked = preference === "true"; checkbox.checked = preference === "true";
} }
</script> </script>
<link rel="stylesheet" type="text/css" href="/style.css">
</head> </head>
<body onload="loadPreference()"> <body onload="loadPreference()">
<h1>Preferences</h1> <aside>
<label for="openLinksCheckbox"> <em> This is not an official X / Twitter website. </em>
<input type="checkbox" id="openLinksCheckbox" onchange="savePreference()"> </aside>
Open links in app
</label> <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>
<em> This is not an official X / Twitter website. </em>
</aside>
</body> </body>
</html> </html>

142
static/style.css Normal file
View 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);
}