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>
<html lang="en">
<head>
<? require "../inc/head.inc" ?>
<?php require "../inc/head.inc" ?>
</head>
<body>
<? require "../inc/nav.inc" ?>
<?php require "../inc/nav.inc" ?>
<div id="main-and-sidebar" class="inline-block">
@ -34,7 +34,8 @@
<source type="image/svg+xml" srcset="/assets/icons/matrix.svg">
<img class="icon" src="/assets/icons/matrix.png" alt="">
</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>
<h1>Donate</h1>
@ -72,11 +73,11 @@
</div>
</div><!--
--><? require "../inc/sidebar.inc" ?>
--><?php require "../inc/sidebar.inc" ?>
</div>
<? require "../inc/background.inc" ?>
<?php require "../inc/background.inc" ?>
</body>
</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" />
</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>

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.

6
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) {
document.getElementsByClassName = function(className) {
@ -81,4 +83,6 @@ 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() {
// Get list of inline code elements
@ -89,3 +91,5 @@ function inputDeselect(input) {
if (input.blur) input.blur();
else input.setSelectionRange(0, 0);
}
// @license-end

6
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);
function makeLinksDynamic() {
@ -61,4 +63,6 @@ function loadUrl(href, callback) {
xhr.open("GET", href);
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
var Themes = {
@ -6,8 +8,6 @@ var Themes = {
DARK: "dark"
};
var jsTheme;
window.addEventListener("load", function() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
@ -15,24 +15,24 @@ window.addEventListener("load", function() {
// Add trees
if (!document.querySelector(".tree")) {
for (var x = 0; x < width; x += 240) {
var left = x + Math.floor(Math.random() * 240 / 2);
var bottom = Math.floor(Math.random() * 150);
var img = document.createElement("img");
img.className = "tree";
img.height = 300;
img.alt = "";
img.style.position = "fixed";
img.style.left = left + "px";
img.style.bottom = bottom + "px";
document.body.appendChild(img);
var left = x + Math.floor(Math.random() * 240 / 2);
var bottom = Math.floor(Math.random() * 150);
for (var i = 0; i < 2; i++) {
var theme = ["light", "dark"][i];
var img = document.createElement("img");
img.src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
img.className = theme + " tree";
img.height = 300;
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
var themeBtns = document.getElementsByClassName("theme-btn");
for (var i = 0; i < themeBtns.length; i++) {
@ -53,15 +53,16 @@ window.addEventListener("load", function() {
// Apply theme changes
if (theme === Themes.AUTO) {
document.cookie = "theme=; expires=Tue, 19 Jan 2038 03:14:08 GMT";
applyPreferredTheme(false);
} else {
document.cookie = "theme=" + theme + "; expires=Tue, 19 Jan 2038 03:14:08 GMT"
applyTheme(theme, false);
}
// Set new selected button
deselectThemeButton(document.querySelector(".theme-btn.selected"));
selectThemeButton(target);
// Enable / disable the right stylesheets
var themeStyles = document.getElementsByClassName("theme-style");
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
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);
}
}, false);
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);
// @license-end

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

@ -20,6 +20,15 @@ body {
color: #212121;
}
/* Theme buttons */
#dark-theme .theme-check {
display: inline;
}
#dark-theme .theme-btn {
text-decoration: none;
cursor: default;
}
/* Background */
#grass {
background-color: #265728;
@ -66,4 +75,5 @@ body {
}
.light {
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
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);
/* 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;
}

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

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

23
assets/style/main.css
View File

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

6
background/index.php
View File

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

11
inc/head.inc
View File

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

39
inc/sidebar.inc
View File

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

10
index.php
View File

@ -4,11 +4,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<? require "inc/head.inc" ?>
<?php require "inc/head.inc" ?>
</head>
<body>
<? require "inc/nav.inc" ?>
<?php require "inc/nav.inc" ?>
<div id="main-and-sidebar" dir="rtl" class="inline-block">
@ -44,7 +44,7 @@
<br>
<span>Have a timer or stopwatch in the corner of your screen, directly from within your browser</span>
<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>
@ -80,11 +80,11 @@
</div>
</div><!--
--><? require "inc/sidebar.inc" ?>
--><?php require "inc/sidebar.inc" ?>
</div>
<? require "inc/background.inc" ?>
<?php require "inc/background.inc" ?>
</body>
</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>

41
opener/index.php
View File

@ -18,19 +18,26 @@
<script>
window.onload = function() {
if (window.opener) {
document.getElementById("opener").innerText = window.opener;
document.getElementById("opener").className = "green";
} else {
document.getElementById("opener").innerText = "Null";
}
if (window.opener) {
document.getElementById("opener").innerText = window.opener.location || window.opener;
document.getElementById("opener").className = "green";
} else {
document.getElementById("opener").innerText = "Null";
}
if (window.name) {
document.getElementById("name").innerText = window.name;
document.getElementById("name").className = "green";
} else {
document.getElementById("name").innerText = "Empty String";
}
if (window.name) {
document.getElementById("name").innerText = window.name;
document.getElementById("name").className = "green";
} else {
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>
@ -41,6 +48,14 @@
<h2>JavaScript</h2>
&emsp;window.opener: <span id="opener" class="grey">Enable JavaScript</span>
<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>
<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>
</html>
</html>

1
tools/url-editor Submodule

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