Robin Davies
136 lines
4.1 KiB
HTML
136 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<meta name="color-scheme" content="dark light"/> <!-- uses media queries in web views. -->
|
|
<meta name="description" content="PiPedal Guitar Pedals" />
|
|
<!--
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
|
|
-->
|
|
<link rel="stylesheet" href="/css/roboto.css" />
|
|
|
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
<!--
|
|
manifest.json provides metadata used when your web app is installed on a
|
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
-->
|
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
<!--
|
|
Notice the use of %PUBLIC_URL% in the tags above.
|
|
It will be replaced with the URL of the `public` folder during the build.
|
|
Only files inside the `public` folder can be referenced from the HTML.
|
|
|
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
work correctly both with client-side routing and a non-root public URL.
|
|
Learn how to configure a non-root public URL by running `npm run build`.
|
|
-->
|
|
<title>PiPedal</title>
|
|
<style>
|
|
BODY {
|
|
background: #D0D0D0;
|
|
}
|
|
</style>
|
|
|
|
<style id="bgStyle">
|
|
BODY {
|
|
background: #333; overscroll-behavior: "none"
|
|
}
|
|
</style>
|
|
<script>
|
|
const androidHosted = !!(window.AndroidHost);
|
|
|
|
var colorScheme = localStorage.getItem("colorScheme");
|
|
if (androidHosted)
|
|
{
|
|
var hostColorScheme = window.AndroidHost.getThemePreference();
|
|
switch (hostColorScheme)
|
|
{
|
|
case 0:
|
|
colorScheme = "Light";
|
|
break;
|
|
case 1:
|
|
colorScheme = "Dark";
|
|
break;
|
|
case 2:
|
|
{
|
|
// use the host's interpretation of the current system night mode.
|
|
colorScheme = window.AndroidHost.isDarkTheme() ? "Dark": "Light";
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
if (!colorScheme)
|
|
{
|
|
colorScheme = "Dark";
|
|
}
|
|
var darkMode = false;
|
|
var useSystem = false;
|
|
|
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
switch (colorScheme) {
|
|
case null:
|
|
default:
|
|
darkMode = false;
|
|
break;
|
|
|
|
case "Light":
|
|
darkMode = false;
|
|
break;
|
|
case "Dark":
|
|
darkMode = true;
|
|
break;
|
|
case "System":
|
|
useSystem = true;
|
|
break;
|
|
}
|
|
if (useSystem) {
|
|
darkMode = prefersDark;
|
|
}
|
|
|
|
if (!darkMode) {
|
|
let bgStyle = document.getElementById("bgStyle");
|
|
if (bgStyle) {
|
|
// disable the style block.
|
|
bgStyle.setAttribute('media', "max-width: 1px");
|
|
}
|
|
}
|
|
function removeHashOnLoad() {
|
|
if (window.location.hash) {
|
|
// Store the hash value (without the '#' symbol)
|
|
var hash = window.location.hash.substring(1);
|
|
|
|
// Replace the current URL without the hash
|
|
var newUrl = window.location.href.replace(window.location.hash, '');
|
|
|
|
// Use HTML5 history API to change the URL without reloading the page
|
|
history.replaceState(null, document.title, newUrl);
|
|
|
|
}
|
|
}
|
|
|
|
// Run the function when the window loads
|
|
window.addEventListener('load', removeHashOnLoad);
|
|
</script>
|
|
</head>
|
|
|
|
<body style="overscroll-behavior: none; overflow: hidden">
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
<div id="root" style="height: 100%;position: absolute;left: 0px;right: 0px;top:0px;bottom: 0px"></div>
|
|
<!--
|
|
This HTML file is a template.
|
|
If you open it directly in the browser, you will see an empty page.
|
|
|
|
You can add webfonts, meta tags, or analytics to this file.
|
|
The build step will place the bundled scripts into the <body> tag.
|
|
|
|
To begin the development, run `npm start` or `yarn start`.
|
|
To create a production bundle, use `npm run build` or `yarn build`.
|
|
-->
|
|
</body>
|
|
|
|
</html> |