Reimar/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Reimar:0ac3c438e6c60dcda5fdf13daa3fa7ae7f46b8df
Branches Tags
Reimar:master
Reimar:articles
Reimar:revamp
...
compare: Reimar:d0aa70d8c3c0e66aae23f15f9d8c1d58ddda651f
Branches Tags
Reimar:master
Reimar:articles
Reimar:revamp

10 Commits
0ac3c438e6 ... d0aa70d8c3

Author SHA1 Message Date
Reimar
d0aa70d8c3
Add URL editor 2023-12-18 23:15:33 +01:00
Reimar
8b5507196a
Add xmpp alternative connection methods 2023-12-07 16:54:42 +01:00
ReimarPB
556e14486e Fix link 2023-10-14 01:40:36 +02:00
ReimarPB
24524a20fe Fix visual bug in chrome while changing themes 2023-09-09 18:06:32 +02:00
ReimarPB
f7fcf6788c Add support for alternative stylesheets 2023-08-13 20:32:01 +02:00
ReimarPB
206fd6ef2f Stop using shorthand syntax 2023-05-20 17:51:43 +02:00
ReimarPB
0c745d758b Improve and reformat opener 2023-02-14 20:25:24 +01:00
ReimarPB
fc370b9e61 Add matrix link 2023-01-31 15:14:22 +01:00
ReimarPB
a7d2a69f0d Add licenses to javascript files 2023-01-22 14:50:25 +01:00
ReimarPB
67b8dc9efd Add mcstatus 2023-01-19 15:59:48 +01:00
22 changed files with 192 additions and 139 deletions
Show Stats Expand all files Collapse all files

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "tools/url-editor"]
path = tools/url-editor
url = https://git.reim.ar/Reimar/url-editor

6
.well-known/host-meta Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">
<Link rel="urn:xmpp:alt-connections:xbosh" href="https://reim.ar:5281/http-bind" />
<Link rel="urn:xmpp:alt-connections:websocket" href="wss://reim.ar:5281/xmpp-websocket" />
</XRD>

6
.well-known/host-meta.json Normal file
View File

@ -0,0 +1,6 @@
{
"links": [
{ "rel": "urn:xmpp:alt-connections:xbosh", "href": "https://reim.ar:5281/http-bind" },
{ "rel": "urn:xmpp:alt-connections:websocket", "href": "wss://reim.ar:5281/xmpp-websocket" }
]
}

11
about/index.php
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<? require "../inc/head.inc" ?> <?php require "../inc/head.inc" ?>
</head> </head>
<body> <body>
<? require "../inc/nav.inc" ?> <?php require "../inc/nav.inc" ?>
<div id="main-and-sidebar" class="inline-block"> <div id="main-and-sidebar" class="inline-block">
@ -34,7 +34,8 @@
<source type="image/svg+xml" srcset="/assets/icons/matrix.svg"> <source type="image/svg+xml" srcset="/assets/icons/matrix.svg">
<img class="icon" src="/assets/icons/matrix.png" alt=""> <img class="icon" src="/assets/icons/matrix.png" alt="">
</picture> </picture>
<span>Matrix: @reimar:reim.ar</span> <span>Matrix: </span>
<a href="https://matrix.to/#/@reimar:reim.ar" target="_blank">@reimar:reim.ar</a>
<br><br> <br><br>
<h1>Donate</h1> <h1>Donate</h1>
@ -72,11 +73,11 @@
</div> </div>
</div><!-- </div><!--
--><? require "../inc/sidebar.inc" ?> --><?php require "../inc/sidebar.inc" ?>
</div> </div>
<? require "../inc/background.inc" ?> <?php require "../inc/background.inc" ?>
</body> </body>
</html> </html>

BIN
assets/bin/mcstatus Normal file
View File

Binary file not shown.

2
assets/icons/light-mode/theme-auto.svg
View File

@ -4,5 +4,5 @@
<rect x="0" y="0" width="50" height="100" fill="white" /> <rect x="0" y="0" width="50" height="100" fill="white" />
</mask> </mask>
<circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" /> <circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
<circle cx="50" cy="50" r="45" fill-opacity="0" stroke="black" stroke-width="10" /> <circle cx="50" cy="50" r="45" fill-opacity="0" stroke="currentColor" stroke-width="10" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 366 B

After

Width:  |  Height:  |  Size: 373 B

BIN
assets/script/.theme.js.swp
View File

Binary file not shown.

4
assets/script/compatibility.js
View File

@ -1,3 +1,5 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0
if (!document.getElementsByClassName) { if (!document.getElementsByClassName) {
document.getElementsByClassName = function(className) { document.getElementsByClassName = function(className) {
@ -82,3 +84,5 @@ if(window.opera && Object.defineProperty) {
} }
}); });
} }
// @license-end

4
assets/script/inline-code.js
View File

@ -1,3 +1,5 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0
window.addEventListener("load", function() { window.addEventListener("load", function() {
// Get list of inline code elements // Get list of inline code elements
@ -89,3 +91,5 @@ function inputDeselect(input) {
if (input.blur) input.blur(); if (input.blur) input.blur();
else input.setSelectionRange(0, 0); else input.setSelectionRange(0, 0);
} }
// @license-end

4
assets/script/navigation.js
View File

@ -1,3 +1,5 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0
window.addEventListener("load", makeLinksDynamic, false); window.addEventListener("load", makeLinksDynamic, false);
function makeLinksDynamic() { function makeLinksDynamic() {
@ -62,3 +64,5 @@ function loadUrl(href, callback) {
xhr.send(); xhr.send();
} }
// @license-end

100
assets/script/theme.js
View File

@ -1,3 +1,5 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0
// Enable transitions between themes without reloading page // Enable transitions between themes without reloading page
var Themes = { var Themes = {
@ -6,8 +8,6 @@ var Themes = {
DARK: "dark" DARK: "dark"
}; };
var jsTheme;
window.addEventListener("load", function() { window.addEventListener("load", function() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
@ -15,24 +15,24 @@ window.addEventListener("load", function() {
// Add trees // Add trees
if (!document.querySelector(".tree")) { if (!document.querySelector(".tree")) {
for (var x = 0; x < width; x += 240) { for (var x = 0; x < width; x += 240) {
var left = x + Math.floor(Math.random() * 240 / 2); var left = x + Math.floor(Math.random() * 240 / 2);
var bottom = Math.floor(Math.random() * 150); var bottom = Math.floor(Math.random() * 150);
var img = document.createElement("img");
img.className = "tree"; for (var i = 0; i < 2; i++) {
img.height = 300; var theme = ["light", "dark"][i];
img.alt = ""; var img = document.createElement("img");
img.style.position = "fixed"; img.src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
img.style.left = left + "px"; img.className = theme + " tree";
img.style.bottom = bottom + "px"; img.height = 300;
document.body.appendChild(img); img.alt = "";
img.style.position = "fixed";
img.style.left = left + "px";
img.style.bottom = bottom + "px";
document.body.appendChild(img);
}
} }
} }
// Apply current theme
var themeCookie = document.cookie.match(/theme=([a-z]+)/i);
if (themeCookie) applyTheme(themeCookie[1], true);
else applyPreferredTheme(true);
// Add click listener to theme buttons // Add click listener to theme buttons
var themeBtns = document.getElementsByClassName("theme-btn"); var themeBtns = document.getElementsByClassName("theme-btn");
for (var i = 0; i < themeBtns.length; i++) { for (var i = 0; i < themeBtns.length; i++) {
@ -53,15 +53,16 @@ window.addEventListener("load", function() {
// Apply theme changes // Apply theme changes
if (theme === Themes.AUTO) { if (theme === Themes.AUTO) {
document.cookie = "theme=; expires=Tue, 19 Jan 2038 03:14:08 GMT"; document.cookie = "theme=; expires=Tue, 19 Jan 2038 03:14:08 GMT";
applyPreferredTheme(false);
} else { } else {
document.cookie = "theme=" + theme + "; expires=Tue, 19 Jan 2038 03:14:08 GMT" document.cookie = "theme=" + theme + "; expires=Tue, 19 Jan 2038 03:14:08 GMT"
applyTheme(theme, false);
} }
// Set new selected button // Enable / disable the right stylesheets
deselectThemeButton(document.querySelector(".theme-btn.selected")); var themeStyles = document.getElementsByClassName("theme-style");
selectThemeButton(target); for (var i = 0; i < themeStyles.length; i++) {
themeStyles[i].disabled = true;
if (themeStyles[i].getAttribute("data-theme") === theme) themeStyles[i].disabled = false;
}
// Force redrawing of containers because of a bug in IE8 // Force redrawing of containers because of a bug in IE8
var containers = document.getElementsByClassName("container"); var containers = document.getElementsByClassName("container");
@ -70,57 +71,6 @@ window.addEventListener("load", function() {
} }
} }
// Automatically computes the preferred theme and calls applyTheme() with it
function applyPreferredTheme(firstTime) {
var preferredTheme = ("matchMedia" in window && matchMedia("(prefers-color-scheme: dark)").matches) ? Themes.DARK : Themes.LIGHT;
applyTheme(preferredTheme, firstTime);
}
function applyTheme(theme, firstTime) {
if (jsTheme && jsTheme.href.match(theme)) return;
// Set trees
var trees = document.getElementsByClassName("tree");
for (var i = 0; i < trees.length; i++) {
trees[i].src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
}
if (!firstTime) {
if (jsTheme) document.head.removeChild(jsTheme);
jsTheme = document.createElement("link");
jsTheme.rel = "stylesheet";
jsTheme.href = "/assets/style/" + theme + "-mode.css";
document.head.appendChild(jsTheme);
if (window.linkOnloadSupported) {
document.body.className += " loading";
jsTheme.onload = function () {
document.body.className = document.body.className.replace(/\s*loading/g, "");
var themeStyles = document.getElementsByClassName("theme-style");
for (var i = 0; i < themeStyles.length; i++) {
document.head.removeChild(themeStyles[i]);
}
}
}
}
}
// Functions to select/deselect a theme button
function selectThemeButton(themeBtn) {
if (themeBtn.textContent) themeBtn.textContent += " ✓";
else themeBtn.innerText += " ✓";
themeBtn.className += "selected";
}
function deselectThemeButton(themeBtn) {
if (themeBtn.textContent) themeBtn.textContent = themeBtn.textContent.replace(" ✓", "");
else themeBtn.innerText = themeBtn.innerText.replace(" ✓", "");
themeBtn.className = themeBtn.className.replace("selected", "");
}
}, false); }, false);
// @license-end

10
assets/style/dark-mode.css
View File

@ -20,6 +20,15 @@ body {
color: #212121; color: #212121;
} }
/* Theme buttons */
#dark-theme .theme-check {
display: inline;
}
#dark-theme .theme-btn {
text-decoration: none;
cursor: default;
}
/* Background */ /* Background */
#grass { #grass {
background-color: #265728; background-color: #265728;
@ -67,3 +76,4 @@ body {
.light { .light {
display: none !important; display: none !important;
} }

23
assets/style/detect-dark-mode.css
View File

@ -3,4 +3,27 @@
Dark mode can be forced by importing the CSS file below in the HTML Dark mode can be forced by importing the CSS file below in the HTML
Light mode can be forced by not loading this file at all Light mode can be forced by not loading this file at all
*/ */
@import "/assets/style/light-mode.css";
@import "/assets/style/dark-mode.css" (prefers-color-scheme: dark); @import "/assets/style/dark-mode.css" (prefers-color-scheme: dark);
/* Theme buttons */
/* Shouldn't be overriden by the detected theme */
.theme-btn {
padding-left: 3px !important;
text-decoration: underline !important;
cursor: pointer !important;
}
.theme-btn:hover {
text-decoration: none !important;
}
.theme-check {
display: none !important;
}
#auto-theme .theme-check {
display: inline !important;
}
#auto-theme .theme-btn {
text-decoration: none !important;
cursor: default !important;
}

10
assets/style/light-mode.css
View File

@ -20,6 +20,15 @@ body {
color: #EEE; color: #EEE;
} }
/* Theme buttons */
#light-theme .theme-check {
display: inline;
}
#light-theme .theme-btn {
text-decoration: none;
cursor: default;
}
/* Background */ /* Background */
#grass { #grass {
background-color: #4CAF50; background-color: #4CAF50;
@ -67,3 +76,4 @@ body {
.dark { .dark {
display: none !important; display: none !important;
} }

21
assets/style/main.css
View File

@ -92,13 +92,20 @@ a:hover {
text-align: left; text-align: left;
line-height: 1.5; line-height: 1.5;
} }
/* Theme buttons */
.theme-btn { .theme-btn {
padding-left: 3px; padding-left: 3px;
text-decoration: underline;
cursor: pointer;
} }
.theme-btn.selected { .theme-btn:hover {
text-decoration: none; text-decoration: none;
cursor: default;
} }
.theme-check {
display: none;
}
/* Main section */ /* Main section */
#main-and-sidebar { #main-and-sidebar {
@ -207,6 +214,14 @@ h1, h2 {
float: right; float: right;
} }
.light, .dark {
display: none;
}
.icon-wrapper {
display: inline-block;
width: 1em;
}
.icon { .icon {
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
display: inline-block; display: inline-block;

4
background/index.php
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<? require "../inc/head.inc" ?> <?php require "../inc/head.inc" ?>
</head> </head>
<body> <body>
<? require "../inc/background.inc" ?> <?php require "../inc/background.inc" ?>
</body> </body>
</html> </html>

11
inc/head.inc
View File

@ -7,14 +7,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Reimar</title> <title>Reimar</title>
<link rel="stylesheet" href="/assets/style/main.css" onload="linkOnloadSupported = true"> <link rel="stylesheet" href="/assets/style/main.css" onload="linkOnloadSupported = true">
<? if ($_COOKIE["theme"] == "dark") : ?> <link class="theme-style" rel="<?= $_COOKIE["theme"] ? "alternate " : "" ?>stylesheet" href="assets/style/detect-dark-mode.css" data-theme="auto" title="Auto">
<link class="theme-style" rel="stylesheet" href="/assets/style/dark-mode.css"> <link class="theme-style" rel="<?= $_COOKIE["theme"] != "light" ? "alternate " : "" ?>stylesheet" href="/assets/style/light-mode.css" data-theme="light" title="Light">
<? else : ?> <link class="theme-style" rel="<?= $_COOKIE["theme"] != "dark" ? "alternate " : "" ?>stylesheet" href="/assets/style/dark-mode.css" data-theme="dark" title="Dark">
<link class="theme-style" rel="stylesheet" href="/assets/style/light-mode.css">
<? endif ?>
<? if (!$_COOKIE["theme"]) : ?>
<style>@import "/assets/style/dark-mode.css" (prefers-color-scheme: dark)</style>
<? endif ?>
<!--[if lt IE 6]><style>.container { box-shadow: none !important; }</style><![endif]--> <!--[if lt IE 6]><style>.container { box-shadow: none !important; }</style><![endif]-->
<!--[if lte IE 9]> <!--[if lte IE 9]>
<script src="/assets/script/compatibility.js"></script> <script src="/assets/script/compatibility.js"></script>

37
inc/sidebar.inc
View File

@ -3,26 +3,23 @@
<aside> <aside>
<div class="section container" style="font-size: 14px;"> <div class="section container" style="font-size: 14px;">
<h2>Theme</h2> <h2>Theme</h2>
<?php <?php foreach (["auto", "light", "dark"] as $theme): ?>
// List of themes and a condition to test if it's deselected (!) <div class="icon-wrapper">
$themes = [ <picture class="light">
"auto" => $_COOKIE["theme"], <source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $theme ?>.svg">
"light" => $_COOKIE["theme"] != "light", <img class="icon" src="/assets/icons/light-mode/theme-<?= $theme ?>.png" alt="">
"dark" => $_COOKIE["theme"] != "dark" </picture>
]; <picture class="dark">
?> <source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $theme ?>.svg">
<?php foreach ($themes as $name=>$condition): ?> <img class="icon" src="/assets/icons/dark-mode/theme-<?= $theme ?>.png" alt="">
<picture class="light"> </picture>
<source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $name ?>.svg"> </div>
<img class="icon" src="/assets/icons/light-mode/theme-<?= $name ?>.png" alt=""> <span id="<?= $theme ?>-theme">
</picture> <a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $name ?>.php">
<picture class="dark"> <?= ucwords($theme) ?>
<source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $name ?>.svg"> </a>
<img class="icon" src="/assets/icons/dark-mode/theme-<?= $name ?>.png" alt=""> <span class="theme-check">&#10003;</span>
</picture> </span>
<a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php">
<?= ucwords($name) . ($condition ? "" : " &#10003;") ?>
</a>
<br> <br>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>

10
index.php
View File

@ -4,11 +4,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<? require "inc/head.inc" ?> <?php require "inc/head.inc" ?>
</head> </head>
<body> <body>
<? require "inc/nav.inc" ?> <?php require "inc/nav.inc" ?>
<div id="main-and-sidebar" dir="rtl" class="inline-block"> <div id="main-and-sidebar" dir="rtl" class="inline-block">
@ -44,7 +44,7 @@
<br> <br>
<span>Have a timer or stopwatch in the corner of your screen, directly from within your browser</span> <span>Have a timer or stopwatch in the corner of your screen, directly from within your browser</span>
<br> <br>
<i><a href="https://popup-timer.reimarpb.com" target="_blank">Open in browser</a></i> <i><a href="https://popup-timer.reim.ar" target="_blank">Open in browser</a></i>
<hr> <hr>
@ -80,11 +80,11 @@
</div> </div>
</div><!-- </div><!--
--><? require "inc/sidebar.inc" ?> --><?php require "inc/sidebar.inc" ?>
</div> </div>
<? require "inc/background.inc" ?> <?php require "inc/background.inc" ?>
</body> </body>
</html> </html>

9
opener/iframe.html Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Opener</title>
</head>
<body>
<iframe src="index.php" width="500" height="800"></iframe>
</body>
</html>

39
opener/index.php
View File

@ -18,19 +18,26 @@
<script> <script>
window.onload = function() { window.onload = function() {
if (window.opener) { if (window.opener) {
document.getElementById("opener").innerText = window.opener; document.getElementById("opener").innerText = window.opener.location || window.opener;
document.getElementById("opener").className = "green"; document.getElementById("opener").className = "green";
} else { } else {
document.getElementById("opener").innerText = "Null"; document.getElementById("opener").innerText = "Null";
} }
if (window.name) { if (window.name) {
document.getElementById("name").innerText = window.name; document.getElementById("name").innerText = window.name;
document.getElementById("name").className = "green"; document.getElementById("name").className = "green";
} else { } else {
document.getElementById("name").innerText = "Empty String"; document.getElementById("name").innerText = "Empty String";
} }
if (document.referrer) {
document.getElementById("referrer").innerText = document.referrer;
document.getElementById("referrer").className = "green";
} else {
document.getElementById("referrer").innerText = "Empty string";
}
} }
</script> </script>
@ -41,6 +48,14 @@
<h2>JavaScript</h2> <h2>JavaScript</h2>
&emsp;window.opener: <span id="opener" class="grey">Enable JavaScript</span> &emsp;window.opener: <span id="opener" class="grey">Enable JavaScript</span>
<br><br> <br><br>
&emsp;document.referrer: <span id="referrer" class="grey">Enable JavaScript</span>
<br><br>
&emsp;window.name: <span id="name" class="grey">Enable JavaScript</span> &emsp;window.name: <span id="name" class="grey">Enable JavaScript</span>
<h2>Test yourself</h2>
&emsp;<a href="#" onclick="window.open(location.href)">window.open()</a>
<br><br>
&emsp;<a href="/opener">&lt;a&gt;</a>
<br><br>
&emsp;<a href="/opener/iframe.html">&lt;iframe&gt;</a>
</body> </body>
</html> </html>

1
tools/url-editor Submodule

@ -0,0 +1 @@
Subproject commit 7327876db294ffe2febee1f9ef3ba76e92bfe895