lda/qrcode-from-onetab
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

refactors

Browse Source
This commit is contained in:
lda committed 2025-12-24 01:01:47 +07:00
1 parent 218e0374d2
commit e61c34bc0d
1 file changed
+113 -33
Download Patch File Download Diff File Expand all files Collapse all files
past/nsfw_shield.html
+113 -33
View File
@@ -13,6 +13,7 @@
--error-color: #cf6679; --error-color: #cf6679;
--success-color: #03dac6; --success-color: #03dac6;
} }
body { body {
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--text-color); color: var(--text-color);
@@ -20,11 +21,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh;
margin: 0; margin: 0;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
min-height: 100lvh;
} }
.card { .card {
background-color: var(--surface-color); background-color: var(--surface-color);
padding: 2rem; padding: 2rem;
@@ -35,11 +37,13 @@
text-align: center; text-align: center;
border: 1px solid #333; border: 1px solid #333;
} }
h1 { h1 {
margin-top: 0; margin-top: 0;
color: var(--error-color); color: var(--error-color);
font-size: 1.8rem; font-size: 1.8rem;
} }
p { p {
line-height: 1.5; line-height: 1.5;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -56,6 +60,7 @@
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem; font-size: 1rem;
} }
input:focus { input:focus {
outline: 2px solid var(--primary-color); outline: 2px solid var(--primary-color);
border-color: transparent; border-color: transparent;
@@ -67,6 +72,7 @@
justify-content: center; justify-content: center;
margin-top: 20px; margin-top: 20px;
} }
button { button {
padding: 12px 24px; padding: 12px 24px;
border: none; border: none;
@@ -76,22 +82,27 @@
font-size: 1rem; font-size: 1rem;
transition: transform 0.1s, opacity 0.2s; transition: transform 0.1s, opacity 0.2s;
} }
button:active { button:active {
transform: scale(0.98); transform: scale(0.98);
} }
button.primary { button.primary {
background-color: var(--error-color); background-color: var(--error-color);
color: #000; color: #000;
} }
button.create-btn { button.create-btn {
background-color: var(--primary-color); background-color: var(--primary-color);
color: #000; color: #000;
} }
button.secondary { button.secondary {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
border: 1px solid #444; border: 1px solid #444;
} }
button:hover { button:hover {
opacity: 0.9; opacity: 0.9;
} }
@@ -108,6 +119,7 @@
border: 1px solid #333; border: 1px solid #333;
text-align: left; text-align: left;
} }
.link-display { .link-display {
word-break: break-all; word-break: break-all;
color: var(--primary-color); color: var(--primary-color);
@@ -115,6 +127,7 @@
display: block; display: block;
font-family: monospace; font-family: monospace;
} }
.copy-feedback { .copy-feedback {
display: none; display: none;
color: var(--success-color); color: var(--success-color);
@@ -123,6 +136,7 @@
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.copy-feedback.show { .copy-feedback.show {
opacity: 1; opacity: 1;
display: unset; display: unset;
@@ -133,15 +147,53 @@
font-size: 0.8rem; font-size: 0.8rem;
color: #666; color: #666;
} }
footer a { footer a {
color: #888; color: #888;
text-decoration: none; text-decoration: none;
} }
footer a:hover { footer a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Utility Classes */
.text-primary {
color: var(--primary-color);
}
.text-muted {
color: #888;
font-size: 0.9em;
}
.mb-small {
margin: 0 0 5px 0;
}
.btn-full {
width: 100%;
padding: 8px;
}
.warning-box {
background: #252525;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
text-align: left;
}
.destination-url {
color: white;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style> </style>
</head> </head>
<body> <body>
<div class="card" id="app"> <div class="card" id="app">
<!-- Content injected by JS --> <!-- Content injected by JS -->
@@ -154,9 +206,8 @@
return btoa( return btoa(
encodeURIComponent(str).replace( encodeURIComponent(str).replace(
/%([0-9A-F]{2})/g, /%([0-9A-F]{2})/g,
function toSolidBytes(match, p1) { /* toSolidBytes */ (match, p1) =>
return String.fromCharCode("0x" + p1); String.fromCharCode(`0x${p1}`)
}
) )
) )
.replace(/\+/g, "-") .replace(/\+/g, "-")
@@ -169,37 +220,51 @@
return decodeURIComponent( return decodeURIComponent(
atob(str) atob(str)
.split("") .split("")
.map(function (c) { .map(
return ( (c) =>
"%" + `%${(
("00" + c.charCodeAt(0).toString(16)).slice( "00" + c.charCodeAt(0).toString(16)
-2 ).slice(-2)}`
) )
);
})
.join("") .join("")
); );
}, },
}; };
const html = (strings, ...values) =>
String.raw({ raw: strings }, ...values); // mdn
const app = document.getElementById("app"); const app = document.getElementById("app");
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const redirectParam = params.get("redirect"); const redirectParam = params.get("redirect");
// --- Views --- // --- Views ---
const renderCreator = () => { const renderCreator = () => {
app.innerHTML = /* html */ ` app.innerHTML = html`
<h1 style="color: var(--primary-color)">Shield Generator</h1> <h1 class="text-primary">Shield Generator</h1>
<p>Create a warning wrapper for NSFW or sensitive links.</p> <p>Create a warning wrapper for NSFW or sensitive links.</p>
<input type="url" id="urlInput" placeholder="https://example.com/sensitive-content" autocomplete="off" /> <input
type="url"
id="urlInput"
placeholder="https://example.com/sensitive-content"
autocomplete="off"
/>
<div class="buttons"> <div class="buttons">
<button class="create-btn" onclick="generateLink()">Generate Shield</button> <button class="create-btn" onclick="generateLink()">
Generate Shield
</button>
</div> </div>
<div id="result-area" class="hidden"> <div id="result-area" class="hidden">
<p style="margin:0 0 5px 0; font-size:0.8em; color:#888;">Your Shielded Link:</p> <p class="text-muted mb-small">Your Shielded Link:</p>
<a id="generatedLink" href="#" target="_blank" class="link-display"></a> <a
<button class="secondary" style="width:100%; padding: 8px;" onclick="copyLink()"> id="generatedLink"
Copy to Clipboard <span id="copyMsg" class="copy-feedback">Copied!</span> href="#"
target="_blank"
class="link-display"
></a>
<button class="secondary btn-full" onclick="copyLink()">
Copy to Clipboard
<span id="copyMsg" class="copy-feedback"
>Copied!</span
>
</button> </button>
</div> </div>
`; `;
@@ -222,19 +287,34 @@
domain = new URL(targetUrl).href; domain = new URL(targetUrl).href;
} catch (e) {} } catch (e) {}
app.innerHTML = /* html */ ` app.innerHTML = html`
<h1>NSFW Warning</h1> <h1>NSFW Warning</h1>
<p>The link you are about to visit contains content marked as <strong>Not Safe For Work</strong>.</p> <p>
<div style="background: #252525; padding: 10px; border-radius: 4px; margin-bottom: 20px; text-align: left;"> The link you are about to visit contains content marked
<span style="color: #888; font-size: 0.9em;">Destination:</span><br> as
<strong style="color: white; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${domain}">${domain}</strong> <strong>Not Safe For Work</strong>.
</p>
<div class="warning-box">
<span class="text-muted">Destination:</span><br />
<strong class="destination-url" title="${domain}"
>${domain}</strong
>
</div> </div>
<div class="buttons"> <div class="buttons">
<button class="secondary" onclick="goBack()">I'm out</button> <button class="secondary" onclick="goBack()">
<button class="primary" onclick="proceed('${targetUrl}')">Proceed</button> I'm out
</button>
<button
class="primary"
onclick="proceed('${targetUrl}')"
>
Proceed
</button>
</div> </div>
<footer> <footer>
<a href="${location.pathname}">Create your own shield</a> <a href="${location.pathname}"
>Create your own shield</a
>
</footer> </footer>
`; `;
}; };
@@ -256,7 +336,9 @@
new URL(rawUrl); new URL(rawUrl);
const encoded = Base64.encode(rawUrl); const encoded = Base64.encode(rawUrl);
const shieldUrl = `${location.origin}${location.pathname}?redirect=${encoded}`; const shieldUrl = new URL(location);
shieldUrl.search = "";
shieldUrl.searchParams.append("redirect", encoded);
link.href = shieldUrl; link.href = shieldUrl;
link.textContent = shieldUrl; link.textContent = shieldUrl;
@@ -277,10 +359,8 @@
}; };
window.goBack = () => { window.goBack = () => {
if (history.length > 1) history.back(); history.back();
else { if (history.length <= 1) window.close();
window.close();
}
const newURL = new URL(window.location); const newURL = new URL(window.location);
newURL.search = ""; newURL.search = "";
window.location.replace(newURL); window.location.replace(newURL);