Open service 2a00:1450:400a:1009::79:80 · harmio.beetlebox.dev
2026-01-23 10:51
HTTP/1.1 302 Found location: https://harmio.beetlebox.dev/ x-cloud-trace-context: 703e546d8346ab652f2173a21fa2dbf1 date: Fri, 23 Jan 2026 10:52:23 GMT content-type: text/html server: Google Frontend Content-Length: 0 Connection: close
Open service 192.178.170.121:443 · harmio.beetlebox.dev
2026-01-23 10:51
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
x-cloud-trace-context: 39d5b16ba605f7f122bd89b5ef4f1dad
date: Fri, 23 Jan 2026 10:51:54 GMT
server: Google Frontend
Content-Length: 6118
Connection: close
Page title: HARMio | Melody Harmonizer
<!DOCTYPE html>
<html>
<!-- (c) 2022 Johnathan Pennington | All rights reserved. -->
<head>
<meta charset="utf-8">
<title>HARMio | Melody Harmonizer</title>
<meta name="HARMio" content="Automated real-time harmonizer." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<style>
body {
margin: 0;
/* Minimum window height with vertical center. */
display: flex;
min-height: 100dvh;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
#body-container {
transition: transform 0.3s ease-out;
box-sizing: border-box;
margin: 0;
}
div.white-key, div.black-key, div.non-key {
box-sizing: border-box;
margin: 0;
border-style: solid;
padding: 0;
}
div.black-key, div.non-key {
grid-row: 1 / span 2;
}
div.white-key {
grid-row: 3 / span 2;
}
#keyboard {
display: grid;
grid-template-columns: repeat(34, 1fr) repeat(29, 2fr);
grid-template-rows: repeat(4, auto);
width: 100%;
}
#keyboard, #keyboard div, div#harmony-direction-bright, div#harmony-direction-dark {
touch-action: none;
user-select: none;
}
div#panel {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
div#harmony-direction {
display: inline;
}
div#harmony-direction-bright, div#harmony-direction-dark {
font-family: Futura, "Century Gothic", sans-serif;
text-align: center;
}
.chord-symbol {
font-family: Futura, "Century Gothic", sans-serif;
text-align: center;
}
.chord-symbol h1 {
margin: 0;
}
.chord-symbol-b, .chord-symbol-c {
font-weight: normal;
}
.chord-symbol-c {
vertical-align: 25%;
}
#rotate-button {
right: 0;
opacity: 50%;
}
#rotate-button:hover {
opacity: 100%;
}
</style>
</head>
<body>
<div id="body-container"><div id="main-container">
<div id="keyboard" draggable="false">
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key triggerable"></div>
Open service 2a00:1450:400a:1009::79:443 · harmio.beetlebox.dev
2026-01-23 10:51
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
x-cloud-trace-context: 53644849efab9db64f736c1e659de9a6
date: Fri, 23 Jan 2026 10:51:53 GMT
server: Google Frontend
Content-Length: 6118
Connection: close
Page title: HARMio | Melody Harmonizer
<!DOCTYPE html>
<html>
<!-- (c) 2022 Johnathan Pennington | All rights reserved. -->
<head>
<meta charset="utf-8">
<title>HARMio | Melody Harmonizer</title>
<meta name="HARMio" content="Automated real-time harmonizer." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<style>
body {
margin: 0;
/* Minimum window height with vertical center. */
display: flex;
min-height: 100dvh;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
#body-container {
transition: transform 0.3s ease-out;
box-sizing: border-box;
margin: 0;
}
div.white-key, div.black-key, div.non-key {
box-sizing: border-box;
margin: 0;
border-style: solid;
padding: 0;
}
div.black-key, div.non-key {
grid-row: 1 / span 2;
}
div.white-key {
grid-row: 3 / span 2;
}
#keyboard {
display: grid;
grid-template-columns: repeat(34, 1fr) repeat(29, 2fr);
grid-template-rows: repeat(4, auto);
width: 100%;
}
#keyboard, #keyboard div, div#harmony-direction-bright, div#harmony-direction-dark {
touch-action: none;
user-select: none;
}
div#panel {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
div#harmony-direction {
display: inline;
}
div#harmony-direction-bright, div#harmony-direction-dark {
font-family: Futura, "Century Gothic", sans-serif;
text-align: center;
}
.chord-symbol {
font-family: Futura, "Century Gothic", sans-serif;
text-align: center;
}
.chord-symbol h1 {
margin: 0;
}
.chord-symbol-b, .chord-symbol-c {
font-weight: normal;
}
.chord-symbol-c {
vertical-align: 25%;
}
#rotate-button {
right: 0;
opacity: 50%;
}
#rotate-button:hover {
opacity: 100%;
}
</style>
</head>
<body>
<div id="body-container"><div id="main-container">
<div id="keyboard" draggable="false">
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="black-key"></div>
<div class="white-key"></div>
<div class="non-key"></div>
<div class="white-key"></div>
<div class="black-key triggerable"></div>
Open service 192.178.170.121:80 · harmio.beetlebox.dev
2026-01-23 10:51
HTTP/1.1 302 Found location: https://harmio.beetlebox.dev/ x-cloud-trace-context: 6ca1f090c3d199b2d7093e9ae4d261f8 date: Fri, 23 Jan 2026 10:52:22 GMT content-type: text/html server: Google Frontend Content-Length: 0 Connection: close