gravel
/
sessioncommunities.online
mirror of https://codeberg.org/gravel/sessioncommunities.online
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

Change theme using hidden checkbox instead

Browse Source
dev
gravel 1 year ago
parent fc089deaef
commit f9ab7fd515
Signed by: gravel
GPG Key ID: C0538F3C906B308F
3 changed files with 146 additions and 153 deletions
Show Stats Download Patch File Download Diff File

63
output/index.css
Unescape Escape View File

@ -36,51 +36,60 @@
}
html {
font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px);
}
body {
margin: 0;
}
#toggle-theme-switch {
display: none;
}
#theming-root {
width: 100%;
height: 100%;
margin: 0;
background-color: var(--secondary-color);
color: var(--primary-color);
}
#toggle-theme-switch:not(:checked) ~ #theming-root {
--primary-color: hsl(0, 0%, 100%);
--secondary-color: hsl(0, 0%, 0%);
--secondary-color-heading: hsl(0, 0%, 17%);
--secondary-color-shaded: hsl(0, 0%, 9%);
--anchor-color: hsl(210, 100%, 60%);
--color-http: hsl(0, 0%, 17%);
--color-https: hsl(195, 53%, 21%);
}
html.light-theme {
#toggle-theme-switch:checked ~ #theming-root {
--primary-color: hsl(0, 0%, 0%);
--secondary-color: hsl(0, 0%, 100%);
--secondary-color-heading: hsl(0, 0%, 83%);
--secondary-color-shaded: hsl(0, 0%, 91%);
--anchor-color: hsl(210, 100%, 40%);
--color-http: hsl(0, 0%, 83%);
--color-https: hsl(195, 53%, 79%)
}
a, .anchorstyle {
color: hsl(210, 100%, 60%);
text-decoration: underline;
}
html.light-theme :is(a, .anchorstyle) {
color: hsl(210, 100%, 40%);
color: var(--anchor-color);
text-decoration: underline;
cursor: pointer;
}
*, *::after, *::before {
transition: color 3s, background-color 2s;
}
html {
font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px);
color: var(--primary-color);
background-color: var(--secondary-color);
}
body {
margin: 0;
}
html.js .noscript, .hidden {
display: none;
}
.clickable {
cursor: pointer;
}
html:not(.js) .js-only {
display: none;
}
@ -263,19 +272,11 @@ header {
}
a[href^="http:"] .protocol-indicator {
background-color: hsl(0, 0%, 17%);
}
html.light-theme a[href^="http:"] .protocol-indicator {
background-color: hsl(0, 0%, 83%);
background-color: var(--color-http);
}
a[href^="https:"] .protocol-indicator {
background-color: hsl(195, 53%, 21%);
}
html.light-theme a[href^="https:"] .protocol-indicator {
background-color: hsl(195, 53%, 79%)
background-color: var(--color-https);
}
a[href^="http:"] .protocol-indicator::after {

12
output/main.js
Unescape Escape View File

@ -69,7 +69,6 @@ function onLoad() {
markSortableColumns();
addQRModalHandlers();
addServerIconInteractions();
addThemeHandlers();
}
function displayQRModal(communityID) {
@ -98,15 +97,6 @@ function addQRModalHandlers() {
}
}
function addThemeHandlers() {
document.getElementById("theme-switch").addEventListener(
'click',
() => {
document.documentElement.classList.toggle('light-theme');
}
);
}
function createJoinLinkButtons() {
const join_URLs = dom.join_urls();
Array.from(join_URLs).forEach((td_url) => {
@ -329,4 +319,4 @@ function sortTable(column) {
// `html.js` selector for styling purposes
document.documentElement.classList.add("js");
document.addEventListener('DOMContentLoaded', () => onLoad());
document.addEventListener('DOMContentLoaded', () => onLoad());

224
sites/index.php
Unescape Escape View File

@ -51,126 +51,128 @@
<meta name="timestamp" content="<?=$timestamp?>">
</head>
<body>
<header>
<div id="header-start"></div>
<div id="header-end">
<a
id="theme-switch"
class="js-only"
href="#"
title="Switch color theme"
>
Switch theme
</a>
<a
id="link-instructions"
target="_blank"
rel="help"
title="Mutli-language guide to joining communities using the site."
href="instructions.html"
>Instructions</a>
</div>
</header>
<input type="checkbox" id="toggle-theme-switch">
<div id="theming-root">
<header>
<div id="header-start"></div>
<div id="header-end">
<label
for="toggle-theme-switch"
class="anchorstyle"
title="Switch color theme"
>
Switch theme
</label>
<a
id="link-instructions"
target="_blank"
rel="help"
title="Mutli-language guide to joining communities using the site."
href="instructions.html"
>Instructions</a>
</div>
</header>
<h1 id="headline">Session Communities</h1>
<?php include "+components/qr_modals.php" ?>
<?php include "+components/qr_modals.php" ?>
<input type="checkbox" id="toggle-show-room-ids" class="hidden">
<input type="checkbox" id="toggle-show-room-ids" class="hidden">
<?php include "+components/tbl_communities.php" ?>
<?php include "+components/tbl_communities.php" ?>
<hr>
<hr>
<footer>
<p id="server_summary">
<?=count_rooms($servers)?> unique Session Communities
on <?=count($servers)?> servers have been found.
<span id="servers_hidden">(None hidden as JS is off)</span>
</p>
<p id="last_checked">
Last checked <span id="last_checked_value">
<?=date("Y-m-d H:i:s", $timestamp)?> (UTC)
</span>.
</p>
<p id="disclaimer">
This site is not affiliated with
<footer>
<p id="server_summary">
<?=count_rooms($servers)?> unique Session Communities
on <?=count($servers)?> servers have been found.
<span id="servers_hidden">(None hidden as JS is off)</span>
</p>
<p id="last_checked">
Last checked <span id="last_checked_value">
<?=date("Y-m-d H:i:s", $timestamp)?> (UTC)
</span>.
</p>
<p id="disclaimer">
This site is not affiliated with
<a
href="https://optf.ngo"
target="_blank"
>Oxen Privacy Tech Foundation</a>.
<br>
Communities shown are fetched automatically from
<a
href="https://github.com/mdPlusPlus/sessioncommunities.online#which-sources-are-crawled"
target="_blank"
>various sources</a>.
<br>
<span class="js-only">
We make an attempt to hide communities containing
objectionable or illegal content, but
you should still proceed with caution.
</span>
<span class="noscript">
Proceed with caution when joining unofficial communities.
As JavaScript is disabled, no communities are filtered from the list.
</span>
</p>
<p class="noscript">
This site works fine without JavaScript.
However, some interactive features are
only available with JS enabled.
</p>
<p>
<label
for="toggle-show-room-ids"
class="anchorstyle"
tabindex="0"
title="Shows a column with community identifiers
for developers or language data contributors.">
Toggle room identifier display
</label>
</p>
<nav>
<a
href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"
target="_blank"
title="Closed groups curated by community moderators"
>Closed Groups</a>
<a
href="https://session.directory/"
target="_blank"
title="User-submitted closed groups, communities and user profiles. Not safe for work."
>session.directory</a>
<a
href="https://optf.ngo"
href="https://github.com/oxen-io/session-pysogs"
target="_blank"
>Oxen Privacy Tech Foundation</a>.
<br>
Communities shown are fetched automatically from
title="Information about running a community server."
>Host Your Own Community</a>
<a
href="https://github.com/mdPlusPlus/sessioncommunities.online#which-sources-are-crawled"
href="https://getsession.org/terms-of-service"
target="_blank"
>various sources</a>.
<br>
<span class="js-only">
We make an attempt to hide communities containing
objectionable or illegal content, but
you should still proceed with caution.
</span>
<span class="noscript">
Proceed with caution when joining unofficial communities.
As JavaScript is disabled, no communities are filtered from the list.
</span>
</p>
<p class="noscript">
This site works fine without JavaScript.
However, some interactive features are
only available with JS enabled.
</p>
<p>
<label
for="toggle-show-room-ids"
class="clickable anchorstyle"
tabindex="0"
title="Shows a column with community identifiers
for developers or language data contributors.">
Toggle room identifier display
</label>
</p>
<nav>
<a
href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"
target="_blank"
title="Closed groups curated by community moderators"
>Closed Groups</a>
<a
href="https://session.directory/"
target="_blank"
title="User-submitted closed groups, communities and user profiles. Not safe for work."
>session.directory</a>
<a
href="https://github.com/oxen-io/session-pysogs"
target="_blank"
title="Information about running a community server."
>Host Your Own Community</a>
<a
href="https://getsession.org/terms-of-service"
target="_blank"
>Session Terms Of Service</a>
</nav>
<nav>
<a
href="https://github.com/mdPlusPlus/sessioncommunities.online"
target="_blank"
title="sessioncommunities.online repository on GitHub."
>Source Code</a>
<a
href="https://lokilocker.com/someguy/sessioncommunities.online"
target="_blank"
title="sessioncommunities.online repository on Lokinet Gitea."
>Source Code (Mirror)</a>
<a
href="https://github.com/mdPlusPlus/sessioncommunities.online#contact"
target="_blank"
rel="author"
title="Information on how to contact the maintainer of sessioncommunities.online"
>Contact</a>
</nav>
</footer>
<div id="copy-snackbar">
Copied URL to clipboard. Paste into Session app to join
>Session Terms Of Service</a>
</nav>
<nav>
<a
href="https://github.com/mdPlusPlus/sessioncommunities.online"
target="_blank"
title="sessioncommunities.online repository on GitHub."
>Source Code</a>
<a
href="https://lokilocker.com/someguy/sessioncommunities.online"
target="_blank"
title="sessioncommunities.online repository on Lokinet Gitea."
>Source Code (Mirror)</a>
<a
href="https://github.com/mdPlusPlus/sessioncommunities.online#contact"
target="_blank"
rel="author"
title="Information on how to contact the maintainer of sessioncommunities.online"
>Contact</a>
</nav>
</footer>
<div id="copy-snackbar">
Copied URL to clipboard. Paste into Session app to join
</div>
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save