I should've just pasted my HTML, haha.
Here it is currently, please be advised that it's still quite WiP. Right now I'm just trying to get any variable to return something, so stuff is half-implemented .
<html>
<head>
<style>
body {
color: #fff;
padding: 16px;
font-family: "SF Pro Text", Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0 0 2px 0;
background: transparent;
background: rgba(55, 55, 55, .7);
-webkit-backdrop-filter: blur(20px) saturate(200%);
display: flex;
-webkit-user-select: none;
overflow: hidden;
}
.sidebar {
border-bottom-left-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-right: none;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
.tablink {
margin: 0 0 -1px 0;
padding: 16px 12px 16px 24px;
width: 204px;
position: relative;
}
.tablink::after {
content: " ";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
background: rgba(255,255,255,.15);
}
.tablink.active {
background: rgba(255,255,255,.2);
}
.tablink:last-of-type {
position: absolute;
bottom: 0;
}
.tablink:last-of-type::after {
display: none;
}
.content {
background: rgba(70, 68, 67, 1);
border-bottom-right-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-left: 1px solid rgba(3, 3, 3, 1);
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
}
.tabcontent {
padding-top: 66px;
display: none;
position: relative;
}
.tabcontent .active {
display: block;
}
header {
position: fixed;
top: 1px;
left: 242px;
right: 1px;
background: rgba(70, 68, 67, .7);
-webkit-backdrop-filter: blur(20px);
}
header h1 {
font-family: "SF Pro Display", Helvetica, sans-serif;
font-weight: 600;
margin: 0;
padding: 16px 17px;
}
section {
background: rgba(75, 74, 73, 1);
border: 1px solid rgba(95, 94, 93, 1);
border-radius: 4px;
padding: 16px;
margin: 0 16px 16px 16px;
}
section h3 {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
letter-spacing: .5px;
}
section h3:first-of-type {
margin-top: 0;
}
section a:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
section a:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
a {
display: inline-block;
color: #fff;
text-decoration: none;
font-size: 15px;
background: rgba(118, 115, 114, 1);
margin: 0 0 1px -3px;
padding: 6px 8px;
}
a:active {
background: rgba(128, 125, 124, 1);
}
p {
margin: 12px 0;
}
p:first-of-type {
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
#about {
margin-top: -64px;
}
#about a {
background: none;
display: inline;
font-size: 13px;
color: rgba(67, 126, 163, 1);
}
</style>
<script>
// this function is called everyime you open the menu in BTT
function BTTInitialize() {
}
// this function is called everytime you close the menu
function BTTWillCloseWindow() {
}
</script>
</head>
<body>
<div class="sidebar">
<ul>
<li id="default" class="tablink" onclick="openTab(event, 'general')">General</li>
<li class="tablink" onclick="openTab(event, 'home-strip')">Home Strip</li>
<li class="tablink" onclick="openTab(event, 'menu-bar')">Menu Bar</li>
<li class="tablink" onclick="openTab(event, 'dock-badges')">Dock Badges</li>
<li class="tablink" onclick="openTab(event, 'about')">About GoldenChaos-BTT</li>
</ul>
</div>
<div class="content">
<div class="content-inner">
<div id="general" class="tabcontent">
<header>
<h1>GoldenChaos-BTT Settings</h1>
</header>
<section>
<h3>Presets</h3>
<a href="btt://trigger_named/?trigger_name=Default Settings">Default</a>
<a href="btt://trigger_named/?trigger_name=GC's GC-BTT">GC'S GC-BTT</a><br />
</section>
<section>
<h3>Escape Key Style</h3>
<a href="btt://trigger_named/?trigger_name=Use Combo Esc Key" class="window.BTT.callback('escKeyStyle')">Combo</a>
<a href="btt://trigger_named/?trigger_name=Use Normal Esc Key">Normal</a>
</section>
<section>
<h3>Calendar App</h3>
<a href="btt://trigger_named/?trigger_name=Use Fantastical">Fantastical</a>
<a href="btt://trigger_named/?trigger_name=Use Calendar">Apple Calendar</a>
</section>
<a href="btt://trigger_named/?trigger_name=Check All Settings" style="background:rgba(67, 126, 163, 1);display:block;text-align:center;border-radius:4px;margin: 0 16px;">Reapply All Settings</a>
</div>
<div id="home-strip" class="tabcontent">
<header>
<h1>Home Strip</h1>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Back/Forward Keys">Back/Forward</a>
<a href="btt://trigger_named/?trigger_name=Toggle Refresh Key">Refresh</a>
<a href="btt://trigger_named/?trigger_name=Toggle New Tab Key">New Tab</a>
</section>
</div>
<div id="menu-bar" class="tabcontent">
<header>
<h1>Menu Bar</h1>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Collapse Menu Bar">Collapse Menu Bar</a>
<a href="btt://trigger_named/?trigger_name=Toggle GC-BTT Settings">GC-BTT Settings</a>
<a href="btt://trigger_named/?trigger_name=Toggle Browser Tabs">Browser Tabs</a>
<a href="btt://trigger_named/?trigger_name=Toggle Emoji Picker">Emoji</a>
<a href="btt://trigger_named/?trigger_name=Toggle Current Language">Language</a>
<a href="btt://trigger_named/?trigger_name=Toggle App Switcher">App Switcher</a>
<a href="btt://trigger_named/?trigger_name=Toggle Caffeinate">Caffeinate</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Gamepad">Gamepad</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Airpods">AirPods</a>
<a href="btt://trigger_named/?trigger_name=Toggle Bluetooth Toggle">Bluetooth</a>
<a href="btt://trigger_named/?trigger_name=Toggle Wi-Fi Toggle">Wi-Fi</a>
<a href="btt://trigger_named/?trigger_name=Toggle Microphone Mute">Microphone Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Mute">Volume Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Down">Volume Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Up">Volume Up</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Down">Brightness Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Up">Brightness Up</a>
</section>
<section>
<h3>Date Format</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Date/Time Format">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Use Large Date/Time Format">Large</a>
<a href="btt://trigger_named/?trigger_name=Use Medium Date/Time Format">Medium</a>
<a href="btt://trigger_named/?trigger_name=Use Small Date/Time Format">Small</a>
</section>
<section>
<h3>Time Format</h3>
<a href="btt://trigger_named/?trigger_name=Use 12-Hour Time">12-Hour</a>
<a href="btt://trigger_named/?trigger_name=Use 24-Hour Time">24-Hour</a>
</section>
<section>
<h3>Weather</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Weather Widget">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Weather Widget">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Weather Widget">Never</a>
</section>
<section>
<h3>Spotlight Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Spotlight Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Spotlight Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Spotlight Key">Never</a>
</section>
<section>
<h3>Siri Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Siri Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Siri Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Siri Key">Never</a>
</section>
<section>
<h3>Notification Center Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Notification Center Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Notification Center Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Notification Center Key">Never</a>
</section>
</div>
<div id="dock-badges" class="tabcontent">
<header>
<h1>Dock Badges</h1>
</header>
<section>
<a href="#">Safari</a>
<a href="#">Safari Preview</a>
<a href="#">Google Chrome</a>
<a href="#">Chrome Canary</a>
<a href="#">Firefox</a>
<a href="#">FaceTime</a>
<a href="#">iMessage</a>
<a href="#">WhatsApp</a>
<a href="#">Telegram</a>
<a href="#">Franz</a>
<a href="#">Skype</a>
<a href="#">Skype Business</a>
<a href="#">YakYak</a>
<a href="#">Chatty</a>
<a href="#">Caprine</a>
<a href="#">Goofy</a>
<a href="#">Apple Mail</a>
<a href="#">Never</a>
<a href="#">Dynamic</a>
<a href="#">Always</a>
<a href="#">Never</a>
<a href="#">Dynamic</a>
<a href="#">Always</a>
<a href="#">Never</a>
<a href="#">Dynamic</a>
<a href="#">Always</a>
<a href="#">Never</a>
<a href="#">Dynamic</a>
<a href="#">Always</a>
<a href="#">Never</a>
<a href="#">Dynamic</a>
<a href="#">Always</a>
<a href="#">Never</a>
<a href="#">Dynamic</a>
<a href="#">Always</a>
<a href="#">Never</a>
</section>
</div>
<div id="about" class="tabcontent">
<img style="width:100%;height:auto;margin-bottom:16px;z-index:2;position:relative;top:-2px;" src="https://community.folivora.ai/uploads/default/original/2X/8/8d34c57bd923769bff6ed3ff65b1bbe69cddced9.jpeg" alt="" />
<section>
<p>Thanks for installing GoldenChaos-BTT! This is the result of many hours of work to make the Touch Bar something worth using. If you enjoy GoldenChaos-BTT, please spread the word! :)</p>
<p>Main release thread (subscribe for updates): <a href="https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281" target="_blank">https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281</a>
<p>Support and feedback thread: <a href="https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196" target="_blank">https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196</a>
<p>Want to buy me a coffee? You can donate here: <a href="https://paypal.me/GoldenChaos" target="_blank">https://paypal.me/GoldenChaos</a></p>
<p>Thinking of buying BetterTouchTool because of this preset?<br />
Use this link and I'll get 40% :) <a href="https://a.paddle.com/v2/click/30842/34667?link=1061" target="_blank">https://a.paddle.com/v2/click/30842/34667?link=1061</a></p>
<p>I make other cool things, too! Check them out: <a href="https://goldenchaos.net" target="_blank">https://goldenchaos.net</a></p>
<p>Cheers,<br />
Jason Rappaport aka GoldenChaos</p>
</section>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Select the General tab by default
document.getElementById("default").click();
// Get persistent variables from BetterTouchTool
window.BTT.callHandler('get_persistent_string_variable', {variableName: 'escKeyStyle'},
function callback(currentVariableValue) {
console.log(currentVariableValue);
}
)
</script>
</body>
</html>