izfsk-ium/demo

## demo
<!DOCTYPE html>
<html>

<head>
    <title>My Website</title>
    <style>
        html {
            background-image: url(https://w.wallhaven.cc/full/we/wallhaven-wex3l7.jpg);
            background-size: cover;
        }

        h1 {
            color: white;
            text-align: center;
            text-shadow: 0 0 10px black;
        }
    </style>
</head>

<body>


    <h1>右上角有亮度控制条
        <br>
        油猴脚本下载地址：
        <a href="https://openuserjs.org/scripts/kasusa/night_bar ">openuserjs</a>
    </h1>
</body>


<script>

    document.addEventListener('DOMContentLoaded', function () {
        const a = document.body.appendChild(document.createElement("div"));
        a.innerHTML =
            `
        <style>
            #brightness-cover {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0);
                z-index: 999;
                opacity: 0;
                pointer-events:none;
            }
            #brightness-controlbox{
                position: fixed;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 0 0  0 10px;
                padding: 5px;
                top: 0px;
                right: 0px;
                z-index: 1000;
                opacity: .0;
                transform: translateY(-90%);
            }
            #brightness-controlbox:hover{
                opacity: 1;
                transform: translateY(0%);
            }
    </style>
    <div id="brightness-cover">
    </div>
    <div id="brightness-controlbox" >
        <input type="range" min="0" max="65" value="0" class="slider" id="brightness-Range">
    </div>
`
        let slider = document.getElementById("brightness-Range");
        let output = document.getElementById("demo");
        slider.oninput = function () {
            document.querySelector("#brightness-cover").style = "opacity: " + this.value + "%";
            localStorage.setItem(`Config-${location.href}`, this.value ?? 0);
        }

        const siteConfigure = localStorage.getItem(`Config-${location.href}`);
        let siteConfiguredValue = 0;
        if (siteConfigure != null) {
            siteConfiguredValue = parseInt(siteConfigure) ?? 0;
        }
        document.querySelector("#brightness-cover").style = "opacity: " + siteConfiguredValue + "%";
    });
</script>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>My Website</title>
	<style>
	html {
	background-image: url(https://w.wallhaven.cc/full/we/wallhaven-wex3l7.jpg);
	background-size: cover;
	}

	h1 {
	color: white;
	text-align: center;
	text-shadow: 0 0 10px black;
	}
	</style>
	</head>

	<body>


	<h1>右上角有亮度控制条
	<br>
	油猴脚本下载地址：
	<a href="https://openuserjs.org/scripts/kasusa/night_bar ">openuserjs</a>
	</h1>
	</body>


	<script>

	document.addEventListener('DOMContentLoaded', function () {
	const a = document.body.appendChild(document.createElement("div"));
	a.innerHTML =
	`
	<style>
	#brightness-cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0);
	z-index: 999;
	opacity: 0;
	pointer-events:none;
	}
	#brightness-controlbox{
	position: fixed;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0 0 0 10px;
	padding: 5px;
	top: 0px;
	right: 0px;
	z-index: 1000;
	opacity: .0;
	transform: translateY(-90%);
	}
	#brightness-controlbox:hover{
	opacity: 1;
	transform: translateY(0%);
	}
	</style>
	<div id="brightness-cover">
	</div>
	<div id="brightness-controlbox" >
	<input type="range" min="0" max="65" value="0" class="slider" id="brightness-Range">
	</div>
	`
	let slider = document.getElementById("brightness-Range");
	let output = document.getElementById("demo");
	slider.oninput = function () {
	document.querySelector("#brightness-cover").style = "opacity: " + this.value + "%";
	localStorage.setItem(`Config-${location.href}`, this.value ?? 0);
	}

	const siteConfigure = localStorage.getItem(`Config-${location.href}`);
	let siteConfiguredValue = 0;
	if (siteConfigure != null) {
	siteConfiguredValue = parseInt(siteConfigure) ?? 0;
	}
	document.querySelector("#brightness-cover").style = "opacity: " + siteConfiguredValue + "%";
	});
	</script>

	</html>