Just refined it yet again!
- Back to using gridgaps as borders, they now pop with some background color
- Highlights are less of a 'Punch through' and more of a 'white overlay'
- Back to 1px grid borders
I think this one is pretty perfect, except for one thing:
When viewing on a white or near-white surface, you can't see the representation for some reason. I need help with this as I tried for so long to fix it, but couldn't get it done.
Images of the white issue
Monitor Snapping
I've also got the very very crude basics of the monitor snapping up!
If the video doesn't work, try safari.
Examples of Bad Quality:
- Nothing works properly.
- The left grid doesn't shrink the main grid,
- All grids don't highlight the correct grid,
- The use of transform scale may result in pixelation??
- I'm a beginner so the way I implemented it this far is probably way off from best practice
-- - The borders for the side grids are wrecked
Unimplemented:
- I imagine that when a side grid is not expanded, it would just be a small rounded square with an icon (like a button) in the middle, but when hovered, the grid expands from behind the icon while the icon still shows. The main grid shrinks into the same 'button' look while that happens.
Code
Main Grid Only (for it's visual improvements)
<!--
VISUAL WINDOW SNAPPING by panda modified by Jerosh.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863
This one was refined by GoldenChaos, then refined further by me, yyuuiko!
-->
<html>
<head>
<style>
.grid-container { /* The MAIN BACKGROUND of the pallete */
display: grid;
height: 150px;
width: 150px;
margin: 40px;
/**/ padding: 0px;
background-color: rgba(255,255,255,0.5);
-webkit-backdrop-filter: blur(20px);
border-radius: 38px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0px 0px;
grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
overflow: hidden;
/**/ border: 1.5px solid rgba(255,255,255,0.7);
}
.highlighted { /* -------------------------------FADE (Representation)------------------------------------ */
-webkit-backdrop-filter: brightness(100%) saturate(200%);
background-color: rgba(255,255,255,.4);
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
.highlightCell {
/* -webkit-backdrop-filter: brightness(120%); */
background-color: rgba(255,255,255,.4);
-webkit-backdrop-filter: brightness(100%) saturate(200%);
-webkit-transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.72, 1);
-webkit-transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
transition: background-color 300ms cubic-bezier(0.19, 1, 0.72, 1);
}
.cell {
/**/ /* border: solid rgba(255,255,255,0); */
/* background-color: rgba(0,0,0,.4); */
-webkit-backdrop-filter: saturate(180%) brightness(50%);
-webkit-background-clip: padding-box;
background-clip: padding-box;
mix-blend-mode: multiply
}
.TopLeft {
display: grid;
grid-area: TopLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;
grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
border-top-left-radius: 36px;
}
.TopLeftTopLeft {
grid-area: TopLeftTopLeft;
border-top-left-radius: 36px;
/* border-width: 0px 1px 1px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.TopLeftBottomLeft {
grid-area: TopLeftBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.TopLeftTopRight {
grid-area: TopLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.TopLeftBottomRight {
grid-area: TopLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
.TopRight {
display: grid;
grid-area: TopRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
border-top-right-radius: 36px;
}
.TopRightTopLeft {
grid-area: TopRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.TopRightTopRight {
grid-area: TopRightTopRight;
border-top-right-radius: 36px;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.TopRightBottomLeft {
grid-area: TopRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
*/
}
.TopRightBottomRight {
grid-area: TopRightBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
.BottomLeft {
display: grid;
grid-area: BottomLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
border-bottom-left-radius: 36px;
}
.BottomLeftTopLeft {
grid-area: BottomLeftTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.BottomLeftTopRight {
grid-area: BottomLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.BottomLeftBottomLeft {
grid-area: BottomLeftBottomLeft;
border-bottom-left-radius: 36px;
/* border-width: 1px 1px 0px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.BottomLeftBottomRight {
grid-area: BottomLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
.BottomRight {
display: grid;
grid-area: BottomRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-bottom-right-radius: 36px;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
}
.BottomRightTopLeft {
grid-area: BottomRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.BottomRightTopRight {
grid-area: BottomRightTopRight;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.BottomRightBottomLeft {
grid-area: BottomRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.BottomRightBottomRight {
grid-area: BottomRightBottomRight;
border-bottom-right-radius: 36px;
/* border-width: 1px 0px 0px 1px; */
}
</style>
<script>
window.currentlyHighlighted = [];
//████████████████████████████- Add Highlight FX for Representation-██████████████
function addHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted.push(classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
}
}
//████████████████████████████- Remove Highlight FX for Representation -██████████████
function removeHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
//document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
}
}
//████████████████████████████- Add Highlight FX for Button -██████████████
function addCellHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted.push(classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
}
}
//████████████████████████████- Remove Highlight FX for Button-██████████████
function removeCellHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
//document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
}
}
function uniq(a) {
var prims = {
"boolean": {},
"number": {},
"string": {}
},
objs = [];
return a.filter(function(item) {
var type = typeof item;
if (type in prims)
return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
else
return objs.indexOf(item) >= 0 ? false : objs.push(item);
});
}
function performAction() {
console.log(uniq(window.currentlyHighlighted));
var trigger = '';
if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'maximize';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'tophalf';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomhalf';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'lefthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'righthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'topright';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
trigger = 'topleft';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'bottomleft';
} else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomright';
}
console.log('trigger', trigger);
window.BTT.callHandler('trigger_named', {
trigger_name: trigger,
closeFloatingHTMLMenu: 1
})
}
</script>
</head>
<body>
<div class="grid-container" onclick="performAction()">
<div class="TopLeft" onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
<div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
<div class="TopLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="TopLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopLeftBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
</div>
<div class="TopRight" onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
<div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopRightTopRight cell" onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
<div class="TopRightBottomLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="TopRightBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
</div>
<div class="BottomLeft" onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
<div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="BottomLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
<div class="BottomLeftBottomRight cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
</div>
<div class="BottomRight" onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
<div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomRightTopRight cell" onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
<div class="BottomRightBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
<div class="BottomRightBottomRight cell" onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
</div>
</div>
</body>
</html>With Crude Monitor Switching (help please)
<!--
VISUAL WINDOW SNAPPING by panda modified by Jerosh.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863
This one was refined by GoldenChaos, then refined further by me, yyuuiko!
-->
<html>
<head>
<style>
.main-container { /* MAIN WRAPPER */
margin: 40px;
left: calc(50% - 17.3em);
position: fixed;
overflow: visible;
/* margin-left:; */
}
.grid-container { /* MAIN GRID */
display: grid;
height: 150px;
width: 150px;
/* margin: 40px; */
/**/ padding: 0px;
background-color: rgba(255,255,255,0.5);
-webkit-backdrop-filter: blur(20px);
border-radius: 38px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0px 0px;
grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
overflow: hidden;
/**/ border: 1.5px solid rgba(255,255,255,0.7);
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ Desktop Switchers ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
.monitor {
/* height: 50px;
width: 50px;
margin-top: 50px;
z-index: 1;
position: relative;
overflow: hidden;
border-radius: 38px;
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.2) 0 5px 10px;
border: 1.5px solid rgba(255,255,255,0.7);
background-color: rgba(255,255,255,0.1);
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(50%);
-webkit-background-clip: border-box;
background-clip: border-box; */
display: grid;
height: 150px;
width: 150px;
transform: scale(.4,.4);
/* margin: 40px; */
/**/ padding: 0px;
background-color: rgba(255,255,255,0.5);
-webkit-backdrop-filter: blur(20px);
border-radius: 38px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0px 0px;
grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
overflow: hidden;
/**/ border: 1.5px solid rgba(255,255,255,0.7);
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
.monitor-left {
float: left;
margin-right: -30px;
}
.monitor-right{
float: right;
margin-left: -30px;
}
/* -- animations -- */
.monitor-left:hover, .monitor-right:hover { /* Show the Left Grid */
transform: scale(1,1);
border-radius: 30%;
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
.monitor-left:hover + .grid-container, .monitor-right:hover + .grid-container { /* LEFT and RIGHT's effect on the main grid */
transform: scale(.4,.4);
/* opacity: 0; */
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ CELL HIGHLIGHTS ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
.highlighted { /* REPRESENTATION Style */
-webkit-backdrop-filter: brightness(100%) saturate(180%);
background-color: rgba(255,255,255,.45);
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
.highlightCell { /* BUTTON Style */
/* -webkit-backdrop-filter: brightness(120%); */
background-color: rgba(255,255,255,.4);
-webkit-backdrop-filter: brightness(100%) saturate(200%);
-webkit-transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.72, 1);
-webkit-transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
transition: background-color 300ms cubic-bezier(0.19, 1, 0.72, 1);
}
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ FADE (Representation) ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
.cell {
/**/ /* border: solid rgba(255,255,255,0); */
/* background-color: rgba(0,0,0,.4); */
-webkit-backdrop-filter: saturate(180%) brightness(50%);
-webkit-background-clip: padding-box;
background-clip: padding-box;
mix-blend-mode: multiply;
}
.TopLeft {
display: grid;
grid-area: TopLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;
grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
border-top-left-radius: 36px;
}
.TopLeftTopLeft {
grid-area: TopLeftTopLeft;
border-top-left-radius: 36px;
/* border-width: 0px 1px 1px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.TopLeftBottomLeft {
grid-area: TopLeftBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.TopLeftTopRight {
grid-area: TopLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.TopLeftBottomRight {
grid-area: TopLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
.TopRight {
display: grid;
grid-area: TopRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
border-top-right-radius: 36px;
}
.TopRightTopLeft {
grid-area: TopRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.TopRightTopRight {
grid-area: TopRightTopRight;
border-top-right-radius: 36px;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.TopRightBottomLeft {
grid-area: TopRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
*/
}
.TopRightBottomRight {
grid-area: TopRightBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
.BottomLeft {
display: grid;
grid-area: BottomLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
border-bottom-left-radius: 36px;
}
.BottomLeftTopLeft {
grid-area: BottomLeftTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.BottomLeftTopRight {
grid-area: BottomLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.BottomLeftBottomLeft {
grid-area: BottomLeftBottomLeft;
border-bottom-left-radius: 36px;
/* border-width: 1px 1px 0px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.BottomLeftBottomRight {
grid-area: BottomLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
.BottomRight {
display: grid;
grid-area: BottomRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-bottom-right-radius: 36px;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
}
.BottomRightTopLeft {
grid-area: BottomRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.BottomRightTopRight {
grid-area: BottomRightTopRight;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.BottomRightBottomLeft {
grid-area: BottomRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.BottomRightBottomRight {
grid-area: BottomRightBottomRight;
border-bottom-right-radius: 36px;
/* border-width: 1px 0px 0px 1px; */
}
</style>
<script>
window.currentlyHighlighted = [];
//████████████████████████████- Add Highlight FX for Representation-██████████████
function addHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted.push(classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
}
}
//████████████████████████████- Remove Highlight FX for Representation -██████████████
function removeHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
//document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
}
}
//████████████████████████████- Add Highlight FX for Button -██████████████
function addCellHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted.push(classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
}
}
//████████████████████████████- Remove Highlight FX for Button-██████████████
function removeCellHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
//document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
}
}
function uniq(a) {
var prims = {
"boolean": {},
"number": {},
"string": {}
},
objs = [];
return a.filter(function(item) {
var type = typeof item;
if (type in prims)
return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
else
return objs.indexOf(item) >= 0 ? false : objs.push(item);
});
}
function performAction() {
console.log(uniq(window.currentlyHighlighted));
var trigger = '';
if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'maximize';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'tophalf';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomhalf';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'lefthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'righthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'topright';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
trigger = 'topleft';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'bottomleft';
} else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomright';
}
console.log('trigger', trigger);
window.BTT.callHandler('trigger_named', {
trigger_name: trigger,
closeFloatingHTMLMenu: 1
})
}
</script>
</head>
<body>
<div class="main-container">
<!-- <div class="monitor monitor-right">
<p style="text-align:center; color: rgba(255,255,255,0.8);"> -> </p>
</div> -->
<!-- <div class="monitor monitor-left">
<p style="text-align:center; color: rgba(255,255,255,0.8);"> <- </p>
</div> -->
<div class="monitor monitor-left" onclick="performAction()">
<div class="TopLeft" onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
<div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
<div class="TopLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="TopLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopLeftBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
</div>
<div class="TopRight" onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
<div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopRightTopRight cell" onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
<div class="TopRightBottomLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="TopRightBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
</div>
<div class="BottomLeft" onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
<div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="BottomLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
<div class="BottomLeftBottomRight cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
</div>
<div class="BottomRight" onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
<div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomRightTopRight cell" onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
<div class="BottomRightBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
<div class="BottomRightBottomRight cell" onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
</div>
</div>
<div class="monitor monitor-right" onclick="performAction()">
<div class="TopLeft" onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
<div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
<div class="TopLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="TopLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopLeftBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
</div>
<div class="TopRight" onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
<div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopRightTopRight cell" onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
<div class="TopRightBottomLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="TopRightBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
</div>
<div class="BottomLeft" onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
<div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="BottomLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
<div class="BottomLeftBottomRight cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
</div>
<div class="BottomRight" onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
<div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomRightTopRight cell" onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
<div class="BottomRightBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
<div class="BottomRightBottomRight cell" onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
</div>
</div>
<div class="grid-container" onclick="performAction()">
<div class="TopLeft" onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
<div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
<div class="TopLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="TopLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopLeftBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
</div>
<div class="TopRight" onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
<div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopRightTopRight cell" onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
<div class="TopRightBottomLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="TopRightBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
</div>
<div class="BottomLeft" onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
<div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="BottomLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
<div class="BottomLeftBottomRight cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
</div>
<div class="BottomRight" onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
<div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomRightTopRight cell" onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
<div class="BottomRightBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
<div class="BottomRightBottomRight cell" onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
</div>
</div>
</div>
</body>
</html>