forked from samm-git/marantz-rc-esp32
-
Notifications
You must be signed in to change notification settings - Fork 0
/
html.h
108 lines (108 loc) · 17.6 KB
/
html.h
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Marantz RC</title>
<script>
// using here old "onclick" instead of dom events to support my old
// ios9 ipad
function presButton(button) {
var xmlHttp = new XMLHttpRequest();
// adding timestamp to avoid any caching
xmlHttp.open("GET", "/update?button=" + button + "&t=" + (new Date()).getTime() , false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}
</script>
<style media="screen">
body {
background: linear-gradient(90deg, rgb(1, 0, 14) 0%, rgb(59, 57, 101) 100%, rgb(170, 170, 186) 100%);
color: #dfe4e8;
touch-action: pan-x pan-y;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background: linear-gradient(90deg, rgb(20, 18, 57) 0%, rgb(71, 69, 104) 100%, rgb(198, 198, 227) 100%);
border-radius: 20px;
}
h1,
h2 {
/* disable select */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 2em;
margin-left: 15px;
}
.flex-container>div {
background-image: linear-gradient(to right, #4c587d 0%, #a6bec6 51%, #485479 100%);
box-shadow: 0 0 15px rgb(19, 19, 29);
margin: 10px;
padding: 10px;
text-align: center;
color: black;
font-weight: bold;
font-size: 1em;
border-radius: 40px;
flex: 1;
/* disable select */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
transition: all 0.10s ;
}
.flex-container>div:active {
color: rgb(105, 89, 210);
filter: brightness(0.8);
box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);
}
#logo {margin: 20px 5px 15px 15px}
</style>
</head>
<body>
<img id="logo" alt="Marantz" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjU1IiB3aWR0aD0iNTQyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibTcwMy45MzkgNTE5LjgxNmg2MS4wNjF2LTQ1My4yODNoLTYxLjA2MXoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0ibTAgMTIyNGg3OTJ2LTEyMjRoLTc5MnoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYyI+PHBhdGggZD0ibTAgMTIyNC4wNmg3OTJ2LTEyMjRoLTc5MnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgdHJhbnNmb3JtPSJtYXRyaXgoMCAtMS4yNSAtMS4yNSAwIDY0NS4wNTM3MiA5NDQuODI1MDAxKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2IpIj48ZyBjbGlwLXBhdGg9InVybCgjYykiIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im03NDQuNTI5IDE1My42MzNoNC45NzJ2NC4xNDNoNi4xMzN2MjAuNzE3aC02LjEzM3Y0LjE0M2gtNC45NzJ2LTQuMTUyaC0yMS4zOTRsLS4wMTEtLjAxMWMtNC44NDkgMC04Ljc3OS0zLjkzMy04Ljc3OS04Ljc4IDAtLjA0LjAwNi0uMDc3LjAwNi0uMTE0di0xNS45NDZoNC45NzJ2MS44NzljLjAzMSAxLjI0OSAxLjA0MiAyLjI1MyAyLjI5NSAyLjI2NGgyMi45MTF6Ii8+PHBhdGggZD0ibTcyMC4yMDkgMjU1LjUyNGgxNy41MjJjMi43MjkgMCA1LjQ0OCAxLjAwNCA3LjUyNCAyLjc3MiAyLjA3NyAxLjc3MSAzLjQ5NiA0LjI5NyAzLjkyOCA2Ljk5MiAxLjU5NCA5LjkzOC45ODMgMjAuMjIzLTEuNzczIDI5LjktLjI1OC45MDgtLjI0MyAxLjg5MS4wNDIgMi43ODkuMjg0Ljg5OC44MzcgMS43MTEgMS41NyAyLjMwNHYxLjY1N2gtNy4zNjJjMS40NjktNC44NTkgMi40NDMtOS44NiAzLjA1LTE0Ljg5NS4zMjUtMi43MS0uMDYzLTUuNTc1LTEuNjYtNy45NTEtMS4zNDMtMS45OTktMy42OTctMi44NTEtNS41OTctMi44NTF2MTMuNzU2YzAgMTAuMzM4LTQuNzM4IDE3LjQtMTEuNjEzIDE3LjQtNi45MzUgMC0xMS42MTYtNy4wNzMtMTEuNjE2LTE3LjQgMC01Ljg3NSAxLjUxOC0xMC42OTEgNC4xMDEtMTMuNzU2aC0zLjk4di0yMy4yMDFoMS42NmMuODMgMS40NzUgMi4zOTIgMi40ODQgNC4yMDQgMi40ODR6bTMuNTA2IDIwLjcxN2MtMS42MTkgMS4wNDMtMi42OTMgMi44Ni0yLjY5MyA0LjkzIDAgMy4yNDIgMi42MjYgNS44NzIgNS44NjkgNS44NzIgMy4yNCAwIDUuODctMi42MyA1Ljg3LTUuODcydi00LjkzeiIvPjxwYXRoIGQ9Im03MjAuMjA5IDM3MC44N2gxNy41MjJjMi43MjkgMCA1LjQ0OCAxLjAwMiA3LjUyNCAyLjc3MiAyLjA3NyAxLjc3IDMuNDk2IDQuMjk1IDMuOTI4IDYuOTkyIDEuNTk0IDkuOTM2Ljk4MyAyMC4yMjEtMS43NzMgMjkuOS0uMjU4LjkwNi0uMjQzIDEuODg5LjA0MiAyLjc4Ny4yODQuOS44MzcgMS43MTEgMS41NyAyLjMwNHYxLjY1OGgtNy4zNjJjMS40NjktNC44NTkgMi40NDMtOS44NTkgMy4wNS0xNC44OTYuMzI1LTIuNzA4LS4wNjMtNS41NzUtMS42Ni03Ljk0OS0xLjM0My0yLTMuNjk3LTIuODUxLTUuNTk3LTIuODUxdjEzLjc1NWMwIDEwLjMzNy00LjczOCAxNy4zOTktMTEuNjEzIDE3LjM5OS02LjkzNSAwLTExLjYxNi03LjA3My0xMS42MTYtMTcuMzk5IDAtNS44NzUgMS41MTgtMTAuNjkgNC4xMDEtMTMuNzU1aC0zLjk4di0yMy4yMDJoMS42NmMuODMgMS40NzQgMi4zOTIgMi40ODMgNC4yMDQgMi40ODV6bTMuNTA2IDIwLjcxN2MtMS42MTkgMS4wNDMtMi42OTMgMi44Ni0yLjY5MyA0LjkzIDAgMy4yNDIgMi42MjYgNS44NyA1Ljg2OSA1Ljg3IDMuMjQgMCA1Ljg3LTIuNjI4IDUuODctNS44N3YtNC45M3oiLz48cGF0aCBkPSJtNzQ5LjgzMyAzMjEuMzljMCA2LjI5Ni0yLjgyNiAxMS45NDItNy4yNzQgMTUuNzQ1aDYuOTQzdjIzLjJoLTEuNjZjLS44MTItMS40NDUtMi4zMjgtMi40MzctNC4wOTMtMi40NzhsLS4wMTQtLjAwOWgtMjMuNTE2bC0uMDAxLjAwMmMtMS44MTUgMC0zLjM3NiAxLjAwOS00LjIwNiAyLjQ4NWgtMS42NmwtLjAwNy0yNS42ODhoMS42NjFjLjgyOSAxLjQ3NSAyLjM5IDIuNDgyIDQuMjAxIDIuNDg1bC4wMDUuMDAzaDkuNzM0YzQuMTQyIDAgNy4zNDYtMS42MDMgOS41NjYtNC4yMTktLjQyMS4wNDctLjg0Ny4wNzQtMS4yNzkuMDc0LTYuNDA4IDAtMTEuNi01LjE5My0xMS42LTExLjYgMC02LjQwOSA1LjE5Mi0xMS42MDIgMTEuNi0xMS42MDIgNi40MDYgMCAxMS42IDUuMTkzIDExLjYgMTEuNjAyIi8+PHBhdGggZD0ibTcyMC4yMTEgMTkxLjMxNmgxNy43ODljNi40MDguMDAzIDExLjYgNS4xOTYgMTEuNiAxMS42djkuMTE3YzAgNC4xMDgtMS45NDMgNy43MzUtNC45MTQgOS45NDNoNC45MTR2MjMuMmgtMS42NTljLS44My0xLjQ3Ny0yLjM5My0yLjQ4Ny00LjIwNi0yLjQ4N3YuMDA2bC0yMy43OTktLjAwNi0uMDM1LjAyM2MtMS42NzkuMTA4LTMuMTE0IDEuMDcyLTMuODk1IDIuNDY0aC0xLjY2MXYtMjMuMmgyMC4zODZjNC4wOTIgMCA3LjQxLTIuNDc2IDcuNDEtNS41MjcgMC0yLjQzNy0yLjIyNi00LjQxNi00Ljk3Mi00LjQxNmgtMjIuODI0di0yMy4yMDNoMS42NjFjLjgzIDEuNDc3IDIuMzkxIDIuNDgzIDQuMjA1IDIuNDg2Ii8+PHBhdGggZD0ibTcyMS44MDIgMTAzLjg0NGMtMS40NzYuODMtMi40ODQgMi4zOTItMi40ODQgNC4yMDZ2MTAuMTA3bDMwLjE4NC0xNS45NzN2MzcuMThjMCAxLjgxMyAxLjAxIDMuMzc2IDIuNDg1IDQuMjA2djEuNjU2aC05Ljk0M3YtMS42NTZsLjAwMS0uMDAzdi4wMDNjMS40NzYtLjgzIDIuNDg1LTIuMzkzIDIuNDg1LTQuMjA2di0xMC4wMzhsLTMwLjE4NSAxNS45di0zNy4xNzZjMC0xLjgxNC0xLjAwOC0zLjM3Ni0yLjQ4NS00LjIwNnYtMS42Nmg5Ljk0M3YxLjY1N3oiLz48cGF0aCBkPSJtNzIwLjIxMSA0MzEuNTI0LjAwMS4wMDFoMTcuNzg4YzYuNDA4LjAwMiAxMS42IDUuMTk1IDExLjYgMTEuNjAxdjkuMTE1YzAgNC44OTctMi41MSA5LjE0NS02LjE5MiAxMS4yODMgMy42ODIgMS45NDUgNi4xOTIgNS44MDYgNi4xOTIgMTAuMjU5djkuMTE1YzAgNC4xMS0xLjk0MyA3LjczOC00LjkxNCA5Ljk0M2g0LjkxNHYyMy4yMDJoLTEuNjU5Yy0uODMtMS40NzctMi4zOTMtMi40ODUtNC4yMDYtMi40ODV2LjAwNGwtMjMuNTIzLS4wMDYtLjAwMS4wMDJjLTEuODE0IDAtMy4zNzUgMS4wMDgtNC4yMDUgMi40ODVoLTEuNjYxdi0yMy4yMDJoMjAuMzg2YzQuMDkyIDAgNy40MS0yLjQ3MiA3LjQxLTUuNTIzIDAtMi40NDEtMi4yMjYtNC40Mi00Ljk3Mi00LjQyaC0yMi44MjR2LTIwLjcxNGwyMC40MDktLjAwMWM0LjA4LS4wMDkgNy4zODctMi40NzggNy4zODctNS41MjMgMC0yLjQ0LTIuMjI2LTQuNDE5LTQuOTcyLTQuNDE5aC0yMi44MjR2LTIzLjIwMmgxLjY2MWMuODMgMS40NzYgMi4zOTEgMi40ODQgNC4yMDUgMi40ODUiLz48cGF0aCBkPSJtNzQ5LjUwMiA4OC4yNTRjMCAzLjA3NC0yLjQ5MiA1LjU2Ni01LjU2NiA1LjU2NnMtNS41NjYtMi40OTItNS41NjYtNS41NjYgMi40OTItNS41NjYgNS41NjYtNS41NjYgNS41NjYgMi40OTIgNS41NjYgNS41NjZ6bS05Ljg2MSAwYzAgMi4zNzMgMS45MjUgNC4yOTUgNC4yOTUgNC4yOTUgMi4zNzIgMCA0LjI5NC0xLjkyMiA0LjI5NC00LjI5NSAwLTIuMzY5LTEuOTIyLTQuMjk0LTQuMjk0LTQuMjk0LTIuMzcgMC00LjI5NSAxLjkyNS00LjI5NSA0LjI5NCIvPjxwYXRoIGQ9Im03NDQuMDE2IDg2LjQxMmguMDE0Yy4xODgtLjU3OSAxLjAzNS0uNjE2IDEuNDExLS42MDEuMzAzLjAwOCAxLjU0My0uMDcyIDEuNTU1IDEuNTIydjMuMTYzaC02LjAwOXYtMS41NTdsMi40NDEuMDExdi0uNzdjLjAwMy0uNjY0LS4xMjUtLjY1LS44MTgtLjgxNS0uMzItLjA3NC0xLjY1MS0uMzE0LTEuNjIzLS4yOTd2LTEuNDZjLjAxMi0uMDE0IDIuMzUuNDExIDIuMzUuNDExLjM3Ni4wMi42ODQuMTgyLjY3OS4zOTN6bS41MTkgMi4wNDV2LjQ5M2gxLjM0di0uODM1Yy4wMDYtLjcyMi0uMjk3LS43NzktLjY4NS0uNzY4LS42MDQuMDE4LS42NTUuNjc5LS42NTUgMS4xMSIvPjwvZz48L2c+PC9nPjwvc3ZnPg==" height="20x§">
<div class="flex-container">
<div id="standby" onclick="presButton(event.currentTarget.id);"><img height="40" alt="Standby"
src="data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMC4xNDMgMzAuMTQzIiB2aWV3Qm94PSIwIDAgMzAuMTQzIDMwLjE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDMwMTA0Ij48cGF0aCBkPSJtMjAuMDM0IDIuMzU3djMuODI0YzMuNDgyIDEuNzk4IDUuODY5IDUuNDI3IDUuODY5IDkuNjE5IDAgNS45OC00Ljg0OCAxMC44My0xMC44MjggMTAuODMtNS45ODIgMC0xMC44MzItNC44NS0xMC44MzItMTAuODMgMC0zLjg0NCAyLjAxMi03LjIxNSA1LjAyOS05LjEzNnYtMy45NzVjLTUuMDI3IDIuMjI5LTguNTQxIDcuMjU2LTguNTQxIDEzLjExMiAwIDcuOTIxIDYuNDIgMTQuMzQyIDE0LjM0IDE0LjM0MiA3LjkyNCAwIDE0LjM0Mi02LjQyMSAxNC4zNDItMTQuMzQyLS4wMDEtNi4xNzctMy45MTItMTEuNDIyLTkuMzc5LTEzLjQ0NHoiLz48cGF0aCBkPSJtMTQuNzk1IDE3LjY1MmMxLjU3NiAwIDEuNzM2LS45MzEgMS43MzYtMi4wNzZ2LTEzLjQ5NmMwLTEuMTQ4LS4xNi0yLjA4LTEuNzM2LTIuMDgtMS41NyAwLTEuNzMyLjkzMi0xLjczMiAyLjA4djEzLjQ5NmMtLjAwMSAxLjE0Ni4xNjIgMi4wNzYgMS43MzIgMi4wNzZ6Ii8+PC9nPjwvc3ZnPg==" />
</div>
</div>
<h2>Inputs</h2>
<div class="flex-container">
<div onclick="presButton(event.currentTarget.id);" id="network"><img alt="Projector" height="40"
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTAgMGgxNHYxNGgtMTR6IiBmaWxsPSJub25lIiB2aXNpYmlsaXR5PSJoaWRkZW4iLz48cGF0aCBkPSJtMSAxYy0uNTU0IDAtMSAuNDQ2LTEgMXYxMWMwIC41NTQuNDQ2IDEgMSAxaDEyYy41NTQgMCAxLS40NDYgMS0xdi0xMWMwLS41NTQtLjQ0Ni0xLTEtMXptLjI1IDFoLjVjLjEzODUgMCAuMjUuMTExNS4yNS4yNXYuNWMwIC4xMzg1LS4xMTE1LjI1LS4yNS4yNWgtLjVjLS4xMzg1IDAtLjI1LS4xMTE1LS4yNS0uMjV2LS41YzAtLjEzODUuMTExNS0uMjUuMjUtLjI1em0zLjc1IDMgNCAyLjUtNCAyLjV6bTcuMjUtM2guNWMuMTM4NSAwIC4yNS4xMTE1LjI1LjI1di41YzAgLjEzODUtLjExMTUuMjUtLjI1LjI1aC0uNWMtLjEzODUgMC0uMjUtLjExMTUtLjI1LS4yNXYtLjVjMC0uMTM4NS4xMTE1LS4yNS4yNS0uMjV6bS0xMSAyaC41Yy4xMzg1IDAgLjI1LjExMTUuMjUuMjV2LjVjMCAuMTM4NS0uMTExNS4yNS0uMjUuMjVoLS41Yy0uMTM4NSAwLS4yNS0uMTExNS0uMjUtLjI1di0uNWMwLS4xMzg1LjExMTUtLjI1LjI1LS4yNXptMTEgMGguNWMuMTM4NSAwIC4yNS4xMTE1LjI1LjI1di41YzAgLjEzODUtLjExMTUuMjUtLjI1LjI1aC0uNWMtLjEzODUgMC0uMjUtLjExMTUtLjI1LS4yNXYtLjVjMC0uMTM4NS4xMTE1LS4yNS4yNS0uMjV6bS0xMSAyaC41Yy4xMzg1IDAgLjI1LjExMTUuMjUuMjV2LjVjMCAuMTM4NS0uMTExNS4yNS0uMjUuMjVoLS41Yy0uMTM4NSAwLS4yNS0uMTExNS0uMjUtLjI1di0uNWMwLS4xMzg1LjExMTUtLjI1LjI1LS4yNXptMTEgMGguNWMuMTM4NSAwIC4yNS4xMTE1LjI1LjI1di41YzAgLjEzODUtLjExMTUuMjUtLjI1LjI1aC0uNWMtLjEzODUgMC0uMjUtLjExMTUtLjI1LS4yNXYtLjVjMC0uMTM4NS4xMTE1LS4yNS4yNS0uMjV6bS0xMSAyaC41Yy4xMzg1IDAgLjI1LjExMTUuMjUuMjV2LjVjMCAuMTM4NS0uMTExNS4yNS0uMjUuMjVoLS41Yy0uMTM4NSAwLS4yNS0uMTExNS0uMjUtLjI1di0uNWMwLS4xMzg1LjExMTUtLjI1LjI1LS4yNXptMTEgMGguNWMuMTM4NSAwIC4yNS4xMTE1LjI1LjI1di41YzAgLjEzODUtLjExMTUuMjUtLjI1LjI1aC0uNWMtLjEzODUgMC0uMjUtLjExMTUtLjI1LS4yNXYtLjVjMC0uMTM4NS4xMTE1LS4yNS4yNS0uMjV6bS0xMSAyaC41Yy4xMzg1IDAgLjI1LjExMTUuMjUuMjV2LjVjMCAuMTM4NS0uMTExNS4yNS0uMjUuMjVoLS41Yy0uMTM4NSAwLS4yNS0uMTExNS0uMjUtLjI1di0uNWMwLS4xMzg1LjExMTUtLjI1LjI1LS4yNXptMTEgMGguNWMuMTM4NSAwIC4yNS4xMTE1LjI1LjI1di41YzAgLjEzODUtLjExMTUuMjUtLjI1LjI1aC0uNWMtLjEzODUgMC0uMjUtLjExMTUtLjI1LS4yNXYtLjVjMC0uMTM4NS4xMTE1LS4yNS4yNS0uMjV6bS0xMSAyaC41Yy4xMzg1IDAgLjI1LjExMTUuMjUuMjV2LjVjMCAuMTM4NS0uMTExNS4yNS0uMjUuMjVoLS41Yy0uMTM4NSAwLS4yNS0uMTExNS0uMjUtLjI1di0uNWMwLS4xMzg1LjExMTUtLjI1LjI1LS4yNXptMTEgMGguNWMuMTM4NSAwIC4yNS4xMTE1LjI1LjI1di41YzAgLjEzODUtLjExMTUuMjUtLjI1LjI1aC0uNWMtLjEzODUgMC0uMjUtLjExMTUtLjI1LS4yNXYtLjVjMC0uMTM4NS4xMTE1LS4yNS4yNS0uMjV6Ii8+PC9zdmc+">
</div>
<div onclick="presButton(event.currentTarget.id);" id="tuner"><img alt="Radio" height="40"
src="data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MDIgNTAyIiB2aWV3Qm94PSIwIDAgNTAyIDUwMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNDE5IDQ4MS0zNTMtNGMtNi42IDAtNTktNzIuNC01OS03OWwtMS0xNTFjMC02LjYgMzMtNzkgNjcuOS04MC41bDM1My4xLTIuNWM4IDEwIDY1IDU2LjQgNjUgNjNsNSAxODBjMCA2LjYtNzEuNCA3NC03OCA3NHoiLz48cGF0aCBkPSJtMzkzIDE1MWgtMjE0LjNjLTEtMy44LTIuNS03LjQtNC41LTEwLjdsMjEyLTc0YzUuMi0xLjggOC03LjUgNi4xLTEyLjctMS44LTUuMi03LjUtOC0xMi43LTYuMWwtMjIyIDc3LjVjLTUuNS0yLjgtMTEuNy00LjQtMTguMi00LjQtMTkgMC0zNSAxMy4yLTM5LjMgMzAuOS01NS45IDQuNC0xMDAuMSA1MS40LTEwMC4xIDEwOC41djEyMGMwIDYwLjEgNDguOSAxMDkgMTA5IDEwOWgyODRjNjAuMSAwIDEwOS00OC45IDEwOS0xMDl2LTEyMGMwLTYwLjEtNDguOS0xMDktMTA5LTEwOXptLTI1My41LTEwLjVjNy43IDAgMTQuNCA0LjIgMTcuOSAxMC41aC0zNS44YzMuNS02LjMgMTAuMi0xMC41IDE3LjktMTAuNXptMzQyLjUgMjM5LjVjMCA0OS4xLTM5LjkgODktODkgODloLTI4NGMtNDkuMSAwLTg5LTM5LjktODktODl2LTEyMGMwLTQ5LjEgMzkuOS04OSA4OS04OWgyODRjNDkuMSAwIDg5IDM5LjkgODkgODl6Ii8+PHBhdGggZD0ibTQyOC41IDY4YzE1LjIgMCAyNy41LTEyLjMgMjcuNS0yNy41cy0xMi4zLTI3LjUtMjcuNS0yNy41LTI3LjUgMTIuMy0yNy41IDI3LjUgMTIuMyAyNy41IDI3LjUgMjcuNXptMC0zNWM0LjEgMCA3LjUgMy40IDcuNSA3LjVzLTMuNCA3LjUtNy41IDcuNS03LjUtMy40LTcuNS03LjUgMy40LTcuNSA3LjUtNy41eiIvPjxnIGZpbGw9IiNhNmJlYzYiPjxwYXRoIGQ9Im0zMjAuNSAxOTRjLTcwLjYgMC0xMjggNTcuNC0xMjggMTI4czU3LjQgMTI4IDEyOCAxMjggMTI4LTU3LjQgMTI4LTEyOC01Ny40LTEyOC0xMjgtMTI4em0wIDIzNmMtMzMuMyAwLTYzLjItMTUuMi04My0zOWgxNjZjLTE5LjggMjMuOC00OS43IDM5LTgzIDM5em05Ni4yLTU5aC0xOTIuNGMtNi4yLTEyLjItMTAuMi0yNS43LTExLjQtNDBoMTg4LjZjNS41IDAgMTAtNC41IDEwLTEwcy00LjUtMTAtMTAtMTBoLTE4OC40YzEuNS0xNC4zIDUuNy0yNy45IDEyLjMtNDBoMTA3LjJjNS41IDAgMTAtNC41IDEwLTEwcy00LjUtMTAtMTAtMTBoLTkzLjNjMTkuOC0yMi43IDQ4LjktMzcgODEuMy0zNyA1OS42IDAgMTA4IDQ4LjQgMTA4IDEwOC0uMSAxNy42LTQuMyAzNC4zLTExLjkgNDl6Ii8+PHBhdGggZD0ibTM3NC41IDI1MWgtN2MtNS41IDAtMTAgNC41LTEwIDEwczQuNSAxMCAxMCAxMGg3YzUuNSAwIDEwLTQuNSAxMC0xMHMtNC41LTEwLTEwLTEweiIvPjxwYXRoIGQ9Im04NiAyNDJjLTE3LjkgMC0zMi41IDE0LjYtMzIuNSAzMi41czE0LjYgMzIuNSAzMi41IDMyLjUgMzIuNS0xNC42IDMyLjUtMzIuNS0xNC42LTMyLjUtMzIuNS0zMi41em0wIDQ1Yy02LjkgMC0xMi41LTUuNi0xMi41LTEyLjVzNS42LTEyLjUgMTIuNS0xMi41IDEyLjUgNS42IDEyLjUgMTIuNS01LjYgMTIuNS0xMi41IDEyLjV6Ii8+PHBhdGggZD0ibTg2IDMzN2MtMTcuOSAwLTMyLjUgMTQuNi0zMi41IDMyLjVzMTQuNiAzMi41IDMyLjUgMzIuNSAzMi41LTE0LjYgMzIuNS0zMi41LTE0LjYtMzIuNS0zMi41LTMyLjV6bTAgNDVjLTYuOSAwLTEyLjUtNS42LTEyLjUtMTIuNXM1LjYtMTIuNSAxMi41LTEyLjUgMTIuNSA1LjYgMTIuNSAxMi41LTUuNiAxMi41LTEyLjUgMTIuNXoiLz48L2c+PC9zdmc+">
</div>
<div onclick="presButton(event.currentTarget.id);" id="phono"><img alt="Turntable" height="40"
src="data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMzAwIiB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtLS41IDE1djI3MWgzMDB2LTI3MXoiLz48ZyBmaWxsPSIjYTZiZWM2Ij48cGF0aCBkPSJtMTM1LjUgMzMuOWMtNjQgMC0xMTYuMSA1Mi4xLTExNi4xIDExNi4xczUyLjEgMTE2LjEgMTE2LjEgMTE2LjEgMTE2LjEtNTIuMSAxMTYuMS0xMTYuMS01Mi4xLTExNi4xLTExNi4xLTExNi4xem0wIDIyMi42Yy01OC43IDAtMTA2LjUtNDcuOC0xMDYuNS0xMDYuNXM0Ny44LTEwNi41IDEwNi41LTEwNi41IDEwNi41IDQ3LjggMTA2LjUgMTA2LjUtNDcuOCAxMDYuNS0xMDYuNSAxMDYuNXoiLz48cGF0aCBkPSJtMTY5LjQgMTUwYzAtMTguNy0xNS4yLTMzLjktMzMuOS0zMy45cy0zMy45IDE1LjItMzMuOSAzMy45IDE1LjIgMzMuOSAzMy45IDMzLjkgMzMuOS0xNS4yIDMzLjktMzMuOXptLTU4LjEgMGMwLTEzLjMgMTAuOS0yNC4yIDI0LjItMjQuMnMyNC4yIDEwLjkgMjQuMiAyNC4yLTEwLjkgMjQuMi0yNC4yIDI0LjItMjQuMi0xMC45LTI0LjItMjQuMnoiLz48Y2lyY2xlIGN4PSIxMzUuNSIgY3k9IjE1MCIgcj0iNC44Ii8+PHBhdGggZD0ibTIxNy43IDE1MGMwIDQ1LjQtMzYuOSA4Mi4zLTgyLjMgODIuM3Y5LjdjNTAuNyAwIDkxLjktNDEuMiA5MS45LTkxLjloLTkuNnoiLz48cGF0aCBkPSJtMjUxLjYgNzIuNmg5Ljd2MTM4LjhjMCA4LjktMy40IDE3LjMtOS43IDIzLjdsLTEuNC0xLjRjLTQuNC00LjQtMTIuMS00LjQtMTYuNSAwbC00LjggNC44Yy00LjUgNC42LTQuNSAxMiAwIDE2LjUgMi4yIDIuMiA1LjEgMy40IDguMyAzLjRzNi4xLTEuMiA4LjMtMy40bDEyLjktMTIuOWM4LjItOC4yIDEyLjgtMTkuMiAxMi44LTMwLjh2LTEzOC43aDkuN3YtMzguN2gtMjl6bS0xMy4xIDE3NS42Yy0xIDEtMS44IDEtMi44IDAtLjgtLjgtLjgtMi4xIDAtMi44bDQuOC00LjhjLjUtLjUgMS4xLS42IDEuNC0uNnMuOS4xIDEuNC42bDEuNCAxLjR6bTIyLjgtMjA0LjdoOS43djE5LjRoLTkuN3oiLz48cGF0aCBkPSJtMzMuOSAyMzcuMWgtOS43djQuOGgtNC44djkuN2g0Ljh2MTQuNWg5Ljd2LTE0LjVoNC44di05LjdoLTQuOHoiLz48L2c+PC9zdmc+">
</div>
<div onclick="presButton(event.currentTarget.id);" id="optical"><img alt="Optical 1/2" height="40"
src="data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMTUuMzI3IDMxNS4zMjciIGhlaWdodD0iMzE1LjMyNyIgdmlld0JveD0iMCAwIDMxNS4zMjcgMzE1LjMyNyIgd2lkdGg9IjMxNS4zMjciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI1My40MzMgODQuMjQzLTM5Ljk3NSAzOS45NzUgMTguMDU2IDE4LjA1MS05NS40MjIgOTUuNDIyLTM4LjY4NiAxOC4wNDYtLjMyMy0uMzIxLTI1LjQ2OSAyNS40NjctOS4yOS05LjI5LTQyLjU1MSA0Mi44MjMtMTkuNzczLTE5Ljc3MSA0Mi41NTEtNDIuODE3LTkuNDA2LTkuNDA5IDI1Ljc2NC0yNS43NTYgMTcuODY1LTM4LjI3NiA5NS40Mi05NS40MyAxOS44MjcgMTkuODI1IDM5Ljk3NS0zOS45NzZ6bS0xOC44NTQtMjQuMDE5IDIxLjQzOCAyMS40MzggMjkuNjU1LTI5LjY1NS0yMS40MzgtMjEuNDM4em0zMy4wNDctMzMuMDM5IDIxLjQzOCAyMS40MzggNC45OTEtNC45OTQtMjEuNDM4LTIxLjQzOHptNDUuMjA1LTIzLjc3NS0yMS44NDItMi40OTgtMTAuMTU0IDIwLjQ2OCAxNC4wMjcgMTQuMDIyIDIwLjQ2NS0xMC4xNTR6Ii8+PC9zdmc+">
</div>
</div>
<h2>Volume</h2>
<div class="flex-container">
<div onclick="presButton(event.currentTarget.id);" id="volume_down"><img alt="Volume -" height="40"
src="data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMiAzMiIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yMiAxNWgxMHYyaC0xMHoiLz48cGF0aCBkPSJtMTggMzBjLS4zIDAtLjUtLjEtLjctLjNsLTcuNi03LjdoLTYuN2MtLjYgMC0xLS40LTEtMXYtMTBjMC0uNi40LTEgMS0xaDYuN2w3LjYtNy43Yy40LS40IDEtLjQgMS40IDAgLjIuMi4zLjQuMy43djI2YzAgLjYtLjQgMS0xIDF6Ii8+PHBhdGggZD0ibTAgMGgzMnYzMmgtMzJ6IiBmaWxsPSJub25lIi8+PC9zdmc+">
</div>
<div onclick="presButton(event.currentTarget.id);" id="volume_up"><img alt="Volume +" height="40"
src="data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMiAzMiIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0zMiAxNWgtNHYtNGgtMnY0aC00djJoNHY0aDJ2LTRoNHoiLz48cGF0aCBkPSJtMTggMzBjLS4zIDAtLjUtLjEtLjctLjNsLTcuNi03LjdoLTYuN2MtLjYgMC0xLS40LTEtMXYtMTBjMC0uNi40LTEgMS0xaDYuN2w3LjYtNy43Yy40LS40IDEtLjQgMS40IDAgLjIuMi4zLjQuMy43djI2YzAgLjYtLjQgMS0xIDF6Ii8+PHBhdGggZD0ibTAgMGgzMnYzMmgtMzJ6IiBmaWxsPSJub25lIi8+PC9zdmc+">
</div>
</div>
</body>
</html>
)rawliteral";