html-css-js/html/color/1.html at master · denisde4ev/html-css-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en"
	onclick="
		if (!(  event.target == this || event.target == document.body) ) return;

		document.body.classList.toggle('_uggkc_hide')
	"
>
<head>


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colors</title>
<style>

*, *::before, *::after { margin: 0; padding: 0; }

/*
:root:not(#_#_#_)
>
body._uggkc_hide ._uggkc_hidden { display: none; }
*/
:root:not(#_#_#_)
>
body._uggkc_hide > * { display: none; }


</style>


</head>
<body>

<!-- TODO: dark theme based on pref -->
<div class=wrap style="padding: 10px; background: white">

<button
	style="
		position: absolute;
		top: 10px;
		right: 10px;
		background-color: #0074D9;
		color: white;
		border: none;
		padding: 10px;
		cursor: pointer;
	"
	onclick="
		if (document.fullscreenElement) {
			document.exitFullscreen();
			return;
		}

		var elem = document.documentElement;
		if (elem.requestFullscreen) {
			elem.requestFullscreen();
		} else if (elem.webkitRequestFullscreen) {
			elem.webkitRequestFullscreen(); // Safari
		} else if (elem.msRequestFullscreen) {
			elem.msRequestFullscreen(); // IE11
		}
	"
>Toggle Fullscreen</button>


<center>(click anywhere to hide)</center>


<br>
<hr>


 <label for="favcolor">Select your favorite color:</label>
	<input
		for="null"
		type="color"
		value="#"
		oninput="
			var selectedColor = this.value;
			document.documentElement.style.backgroundColor = selectedColor;
		"
	>


</body>
</html>