mirror of
https://github.com/Macrame-App/Macrame
synced 2025-12-29 07:19:26 +00:00
Elite Dangerous test panel.
This commit is contained in:
Jesse Malotaux
parent
374b03f2d1
commit
8f2b7edf42
7 changed files with 2909 additions and 0 deletions
913
panels/Elite_Dangerous/index.html
Normal file
913
panels/Elite_Dangerous/index.html
Normal file
|
|
@ -0,0 +1,913 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./output.css" />
|
||||
</head>
|
||||
<body id="panel-html__body" class="relative m-0">
|
||||
<div
|
||||
class="absolute inset-0 bg-slate-950 size-full grid grid-cols-[1fr_2fr_1fr] gap-2 p-2"
|
||||
>
|
||||
<div class="group-left">
|
||||
<div id="menu-spacer" class="size-16"></div>
|
||||
|
||||
<div id="maps" class="ed-panel pnl__blue">
|
||||
<h3>Maps</h3>
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
class="ed-button btn__yellow btn__vertical"
|
||||
id="System__map"
|
||||
mcrm__button
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g style="fill: currentColor">
|
||||
<circle cx="21.6" cy="17.1" r="0.9" />
|
||||
<circle cx="21.6" cy="14.6" r="0.9" />
|
||||
<circle cx="21.6" cy="12" r="0.9" />
|
||||
<circle cx="15.4" cy="12" r="0.9" />
|
||||
<circle cx="15.4" cy="7.9" r="1.9" />
|
||||
<circle cx="21.6" cy="7.9" r="1.9" />
|
||||
<circle cx="5.9" cy="7.6" r="5.4" />
|
||||
<circle cx="5.9" cy="19.2" r="2.6" />
|
||||
</g>
|
||||
</svg>
|
||||
System
|
||||
</div>
|
||||
<div
|
||||
class="ed-button btn__orange btn__vertical"
|
||||
id="Galaxy__map"
|
||||
mcrm__button
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
style="fill: currentColor"
|
||||
d="M22.1,8.9c-0.3,0-0.6,0.1-0.9,0.3L17,4.9c0.2-0.4,0.3-0.8,0.3-1.3c0-1.6-1.3-2.8-2.8-2.8S11.7,2,11.7,3.6
|
||||
c0,0.8,0.4,1.6,0.9,2.1l-5.5,7.9c-0.5-0.2-1.1-0.3-1.7-0.3c-2.7,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5c0-1.6-0.7-3-1.9-3.9l4.8-8.2
|
||||
c0.3,0.2,0.7,0.2,1.1,0.2c0.6,0,1.1-0.2,1.5-0.5l4.7,3.8c-0.1,0.2-0.1,0.4-0.1,0.6c0,0.8,0.6,1.4,1.4,1.4s1.4-0.6,1.4-1.4
|
||||
C23.5,9.6,22.9,8.9,22.1,8.9z"
|
||||
/>
|
||||
</svg>
|
||||
Galaxy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fsd" class="ed-panel pnl__yellow">
|
||||
<h3>Frame Shift Drive</h3>
|
||||
|
||||
<div
|
||||
id="FSD__toggle"
|
||||
class="ed-button btn__blue !rounded-b-none"
|
||||
mcrm__button
|
||||
>
|
||||
Toggle FSD
|
||||
</div>
|
||||
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
id="Super__Cruise"
|
||||
class="!rounded-tl-none ed-button btn__yellow"
|
||||
mcrm__button
|
||||
>
|
||||
Super Cruise
|
||||
</div>
|
||||
<div
|
||||
id="Hyper__Space"
|
||||
class="!rounded-tr-none ed-button btn__orange"
|
||||
mcrm__button
|
||||
>
|
||||
Hyper Space
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div
|
||||
id="mode-switch"
|
||||
class="grid gap-2 justify-items-center ed-panel pnl__white"
|
||||
>
|
||||
<h4>Mode</h4>
|
||||
<span>Analysis</span>
|
||||
<div
|
||||
id="Mode__toggle"
|
||||
class="ed-toggle toggle__vertical"
|
||||
inactive-wrapper="border-sky-600 bg-sky-400/30"
|
||||
inactive-indicator="bg-sky-400"
|
||||
active-wrapper="border-red-600 bg-red-400/30"
|
||||
active-indicator="bg-red-400"
|
||||
mcrm__button
|
||||
toggle__button
|
||||
>
|
||||
<div class="toggle__wrapper">
|
||||
<div class="toggle__indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Combat</span>
|
||||
</div>
|
||||
<div
|
||||
id="mode-switch"
|
||||
class="grid gap-2 justify-items-center ed-panel pnl__red"
|
||||
>
|
||||
<h4>Hardpoints</h4>
|
||||
<span>Retract</span>
|
||||
<div
|
||||
id="Hardpoints__toggle"
|
||||
class="ed-toggle toggle__vertical"
|
||||
inactive-wrapper="border-sky-600 bg-sky-400/30"
|
||||
inactive-indicator="bg-sky-400"
|
||||
active-wrapper="border-red-600 bg-red-400/30"
|
||||
active-indicator="bg-red-400"
|
||||
mcrm__button
|
||||
toggle__button
|
||||
>
|
||||
<div class="toggle__wrapper">
|
||||
<div class="toggle__indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Deploy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-middle">
|
||||
<div id="ship-panels" class="ed-panel pnl__blue">
|
||||
<h3>Panels</h3>
|
||||
<div class="grid-cols-4 ed-button-group__horizontal">
|
||||
<div
|
||||
class="ed-button btn__orange"
|
||||
id="External__panel"
|
||||
mcrm__button
|
||||
>
|
||||
External
|
||||
</div>
|
||||
<div class="ed-button btn__yellow" id="Comms__panel" mcrm__button>
|
||||
Comms
|
||||
</div>
|
||||
<div class="ed-button btn__yellow" id="Roles__panel" mcrm__button>
|
||||
Roles
|
||||
</div>
|
||||
<div
|
||||
class="ed-button btn__orange"
|
||||
id="Internal__panel"
|
||||
mcrm__button
|
||||
>
|
||||
Internal
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[3fr_1fr_1fr] gap-2">
|
||||
<div class="ed-panel pnl__blue">
|
||||
<h3>Scanner</h3>
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
id="Scanner__FSS"
|
||||
class="ed-button btn__blue btn__filled"
|
||||
mcrm__button
|
||||
>
|
||||
FSS
|
||||
</div>
|
||||
<div
|
||||
id="Scanner__DiscScan"
|
||||
class="ed-button btn__blue"
|
||||
mcrm__button
|
||||
>
|
||||
Discovery
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="Route__NextSystem"
|
||||
class="ed-button btn__yellow !px-2"
|
||||
mcrm__button
|
||||
>
|
||||
<div>
|
||||
<span class="text-base opacity-80">Route:</span>
|
||||
<strong>Next System</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="Speed_0percent"
|
||||
class="ed-button btn__white !px-2"
|
||||
mcrm__button
|
||||
>
|
||||
<div>
|
||||
<span class="text-base opacity-80">Speed:</span>
|
||||
<strong>0%</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ed-panel pnl__red">
|
||||
<h3>Fighters</h3>
|
||||
<div class="grid grid-cols-[2fr_1fr] gap-2">
|
||||
<div class="grid gap-2">
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
class="!justify-start ed-button btn__red btn__filled btn__vertical"
|
||||
id="Fighter_attack"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style="fill: currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M12,1.5C6.5,1.5,2,8,2,11.5s1.5,4.1,1.6,5.6c0.1,1,0.9,1.7,1.8,1.6c0.1,0-0.1-0.1,0.1-0.1v-2h1.2v1.9v2.1
|
||||
c0,1,0.8,1.8,1.8,1.8H12h3.5c1,0,1.8-0.8,1.8-1.8v-2.1v-1.9h1.2v2c0.2,0-0.1,0.1,0.1,0.1c0.9,0.1,1.7-0.6,1.8-1.6
|
||||
c0.2-1.5,1.6-2.1,1.6-5.6S17.5,1.5,12,1.5z M10.4,11.5c-0.6,1.4-2.3,2-3.7,1.4s-2-2.3-1.4-3.7C6,7.9,7.7,9.3,9.1,10
|
||||
S11,10.2,10.4,11.5z M13,15.6c-0.3,0-0.7-0.3-0.8-0.6c-0.1-0.3-0.3-0.3-0.4,0c-0.1,0.3-0.5,0.6-0.8,0.6s-0.3-0.9,0.1-1.9l0.3-0.8
|
||||
c0.4-1,0.9-1,1.3,0l0.3,0.8C13.3,14.7,13.3,15.6,13,15.6z M17.3,12.9c-1.4,0.6-3,0-3.7-1.4c-0.6-1.4-0.1-1,1.3-1.6s3.1-2.1,3.7-0.7
|
||||
C19.3,10.7,18.7,12.3,17.3,12.9z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
Attack
|
||||
</div>
|
||||
<div
|
||||
class="!justify-start text-red-400 ed-button btn__red btn__vertical"
|
||||
id="Fighter__engage"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
style="fill: currentColor"
|
||||
>
|
||||
<path
|
||||
d="M14,4.3c2.8,0.7,5,2.9,5.7,5.7h2.1C21,6.1,17.9,3,14,2.2V4.3z"
|
||||
/>
|
||||
<path
|
||||
d="M4.3,10C5,7.2,7.2,5,10,4.3V2.2C6.1,3,3,6.1,2.2,10H4.3z"
|
||||
/>
|
||||
<path
|
||||
d="M10,19.7C7.2,19,5,16.8,4.3,14H2.2c0.8,3.9,3.9,7,7.8,7.8V19.7z"
|
||||
/>
|
||||
<path
|
||||
d="M19.7,14c-0.7,2.8-2.9,5-5.7,5.7v2.1c3.9-0.8,7-3.9,7.8-7.8H19.7z"
|
||||
/>
|
||||
|
||||
<polygon points="13,1 11,1 11,6.5 13,6.5 13,1 " />
|
||||
<polygon points="6.5,11 1,11 1,13 6.5,13 6.5,11 " />
|
||||
<polygon points="23,11 17.5,11 17.5,13 23,13 23,11 " />
|
||||
<polygon points="13,17.5 11,17.5 11,23 13,23 13,17.5 " />
|
||||
</svg>
|
||||
|
||||
Engage
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
class="!justify-start ed-button btn__orange btn__filled btn__vertical"
|
||||
id="Fighter_defend"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
style="fill: currentColor"
|
||||
>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M12,2.4l0.3,0.1l7.2,2.6l0.6,0.2l0,0.7c0,0.5,0.6,12.6-7.9,15.4L12,21.6l-0.3-0.1C3.2,18.6,3.8,6.6,3.8,6.1l0-0.7l0.6-0.2
|
||||
l7.2-2.6L12,2.4 M12,0.3l-1,0.4L3.8,3.3L1.9,4l-0.1,2c0,0.6-0.7,14.1,9.2,17.4l0.9,0.3l0.9-0.3c9.9-3.3,9.3-16.8,9.2-17.4l-0.1-2
|
||||
l-1.9-0.7L13,0.7L12,0.3L12,0.3z"
|
||||
/>
|
||||
<path
|
||||
d="M19.2,6.1L12,3.5L4.8,6.1c0,0-0.7,11.8,7.2,14.4C19.8,17.9,19.2,6.1,19.2,6.1z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
Defend
|
||||
</div>
|
||||
<div
|
||||
class="!justify-start text-red-400 ed-button btn__orange btn__vertical"
|
||||
id="Fighter__hold"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
style="fill: currentColor"
|
||||
>
|
||||
<polygon
|
||||
style="opacity: 0.8"
|
||||
points="13,1 11,1 11,6.5 13,6.5 13,1 "
|
||||
/>
|
||||
<polygon
|
||||
style="opacity: 0.8"
|
||||
points="6.5,11 1,11 1,13 6.5,13 6.5,11 "
|
||||
/>
|
||||
<polygon
|
||||
style="opacity: 0.8"
|
||||
points="23,11 17.5,11 17.5,13 23,13 23,11 "
|
||||
/>
|
||||
<polygon
|
||||
style="opacity: 0.8"
|
||||
points="13,17.5 11,17.5 11,23 13,23 13,17.5 "
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M6.1,20c1.1,0.8,2.5,1.5,3.9,1.8v-2.1c-0.9-0.2-1.7-0.6-2.5-1.1L6.1,20z"
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M4.3,14H2.2c0.3,1.4,0.9,2.8,1.8,3.9l1.5-1.5C4.9,15.7,4.5,14.9,4.3,14z"
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M7.5,5.4C8.3,4.9,9.1,4.5,10,4.3V2.2C8.6,2.5,7.2,3.1,6.1,4L7.5,5.4z"
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M5.4,7.5L4,6.1C3.1,7.2,2.5,8.6,2.2,10h2.1C4.5,9.1,4.9,8.3,5.4,7.5z"
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M18.6,7.5c0.5,0.7,0.9,1.6,1.1,2.5h2.1c-0.3-1.4-0.9-2.8-1.8-3.9L18.6,7.5z"
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M17.9,4c-1.1-0.8-2.5-1.5-3.9-1.8v2.1c0.9,0.2,1.7,0.6,2.5,1.1L17.9,4z"
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M18.6,16.5l1.5,1.5c0.8-1.1,1.5-2.5,1.8-3.9h-2.1C19.5,14.9,19.1,15.7,18.6,16.5z"
|
||||
/>
|
||||
<path
|
||||
style="opacity: 0.8"
|
||||
d="M16.5,18.6c-0.7,0.5-1.6,0.9-2.5,1.1v2.1c1.4-0.3,2.8-0.9,3.9-1.8L16.5,18.6z"
|
||||
/>
|
||||
<polygon
|
||||
points="21.2,19.8 13.4,12 21.2,4.2 19.8,2.8 12,10.6 4.2,2.8 2.8,4.2 10.6,12 2.8,19.8 4.2,21.2 12,13.4 19.8,21.2 "
|
||||
/>
|
||||
</svg>
|
||||
|
||||
Hold
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
class="!justify-start ed-button btn__blue btn__filled btn__vertical"
|
||||
id="Fighter_follow"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
style="fill: currentColor"
|
||||
>
|
||||
<polygon
|
||||
points="11,13 2.5,13 4.5,15 0.3,19.2 4.8,23.7 9,19.5 11,21.5 "
|
||||
/>
|
||||
<polygon
|
||||
points="11,11 11,2.5 9,4.5 4.8,0.3 0.3,4.8 4.5,9 2.5,11 "
|
||||
/>
|
||||
<polygon
|
||||
points="13,11 21.5,11 19.5,9 23.7,4.8 19.2,0.3 15,4.5 13,2.5 "
|
||||
/>
|
||||
<polygon
|
||||
points="13,13 13,21.5 15,19.5 19.2,23.7 23.7,19.2 19.5,15 21.5,13 "
|
||||
/>
|
||||
</svg>
|
||||
Follow
|
||||
</div>
|
||||
<div
|
||||
class="!justify-start text-red-400 ed-button btn__blue btn__vertical"
|
||||
id="Fighter__recall"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
style="fill: currentColor"
|
||||
>
|
||||
<path
|
||||
d="M12,1C5.9,1,1,5.9,1,12s4.9,11,11,11s11-4.9,11-11S18.1,1,12,1z M12,20c-4.4,0-8-3.6-8-8c0-3,1.6-5.5,4-6.9V10H5l7,7l7-7
|
||||
h-3V5.1c2.4,1.4,4,4,4,6.9C20,16.4,16.4,20,12,20z"
|
||||
/>
|
||||
</svg>
|
||||
Recall
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="h-full grid-rows-3 ed-button-group__vertical">
|
||||
<div
|
||||
id="Fighter__wingman1"
|
||||
class="ed-button btn__yellow btn__vertical"
|
||||
mcrm__button
|
||||
>
|
||||
<span class="text-base opacity-80">Wingman</span>
|
||||
<strong>#1</strong>
|
||||
</div>
|
||||
<div
|
||||
id="Fighter__wingman2"
|
||||
class="ed-button btn__yellow btn__vertical"
|
||||
mcrm__button
|
||||
>
|
||||
<span class="text-base opacity-80">Wingman</span>
|
||||
<strong>#2</strong>
|
||||
</div>
|
||||
<div
|
||||
id="Fighter__wingman3"
|
||||
class="ed-button btn__yellow btn__vertical"
|
||||
mcrm__button
|
||||
>
|
||||
<span class="text-base opacity-80">Wingman</span>
|
||||
<strong>#3</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ed-panel pnl__red">
|
||||
<h3>Counter Measures</h3>
|
||||
<div class="grid-cols-4 ed-button-group__horizontal">
|
||||
<div id="CM__Heatsink" class="ed-button btn__red" mcrm__button>
|
||||
Heatsink
|
||||
</div>
|
||||
<div
|
||||
id="CM__Chaff"
|
||||
class="ed-button btn__red btn__filled"
|
||||
mcrm__button
|
||||
>
|
||||
Chaff
|
||||
</div>
|
||||
<div
|
||||
id="CM__ECM"
|
||||
class="ed-button btn__red btn__filled"
|
||||
mcrm__button
|
||||
>
|
||||
ECM
|
||||
</div>
|
||||
<div id="CM__Shieldcell" class="ed-button btn__red" mcrm__button>
|
||||
Shieldcell
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group-right">
|
||||
<div class="ed-panel pnl__white">
|
||||
<h3>Flight Assist</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="grid gap-2 justify-items-center">
|
||||
<div
|
||||
id="FlightAssist__toggle"
|
||||
class="ed-toggle toggle__horizontal"
|
||||
inactive-wrapper="border-red-600 bg-red-400/30"
|
||||
inactive-indicator="bg-red-400"
|
||||
active-wrapper="border-lime-600 bg-lime-400/30"
|
||||
active-indicator="bg-lime-400"
|
||||
mcrm__button
|
||||
toggle__button
|
||||
active="true"
|
||||
>
|
||||
<div class="toggle__wrapper">
|
||||
<div class="toggle__indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-full">
|
||||
<span>Off</span>
|
||||
<span>On</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="Rotational__Correction"
|
||||
class="!px-2 ed-button btn__blue w-fit"
|
||||
mcrm__button
|
||||
>
|
||||
<span class="text-xs">Rotational Correction</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 divide-x ed-panel pnl__white divider-white !p-0"
|
||||
>
|
||||
<div id="light-switch" class="grid gap-2 p-2 justify-items-center">
|
||||
<h4>Lights</h4>
|
||||
<div
|
||||
id="Lights__toggle"
|
||||
class="ed-toggle toggle__horizontal"
|
||||
inactive-wrapper="border-white bg-white/30"
|
||||
inactive-indicator="bg-white"
|
||||
active-wrapper="border-sky-600 bg-sky-400/30"
|
||||
active-indicator="bg-sky-400"
|
||||
mcrm__button
|
||||
toggle__button
|
||||
>
|
||||
<div class="toggle__wrapper">
|
||||
<div class="toggle__indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-full">
|
||||
<span>Off</span>
|
||||
<span>On</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="light-switch" class="grid gap-2 p-2 justify-items-center">
|
||||
<h4>Night Vis.</h4>
|
||||
<div
|
||||
id="NightVis__toggle"
|
||||
class="ed-toggle toggle__horizontal"
|
||||
inactive-wrapper="border-white bg-white/30"
|
||||
inactive-indicator="bg-white"
|
||||
active-wrapper="border-lime-600 bg-lime-400/30"
|
||||
active-indicator="bg-lime-400"
|
||||
mcrm__button
|
||||
toggle__button
|
||||
>
|
||||
<div class="toggle__wrapper">
|
||||
<div class="toggle__indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-full">
|
||||
<span>Off</span>
|
||||
<span>On</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="grid gap-2 text-center ed-panel pnl__orange">
|
||||
<h4>Silent Running</h4>
|
||||
<div
|
||||
id="SilentRunning__toggle"
|
||||
class="ed-toggle toggle__horizontal"
|
||||
inactive-wrapper="border-white bg-white/30"
|
||||
inactive-indicator="bg-white"
|
||||
active-wrapper="border-red-600 bg-red-400/30"
|
||||
active-indicator="bg-red-400"
|
||||
mcrm__button
|
||||
toggle__button
|
||||
>
|
||||
<div class="toggle__wrapper">
|
||||
<div class="toggle__indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-full">
|
||||
<span>Off</span>
|
||||
<span>On</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
id="Jettison__Cargo"
|
||||
class="flex flex-col items-center justify-center gap-2 text-center text-white border-red-500 rounded-full border-3 bg-red-500/80 aspect-square"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"
|
||||
/>
|
||||
</svg>
|
||||
<span> JETTISON CARGO </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div
|
||||
class="ed-button btn__blue btn__vertical"
|
||||
dialog-trigger="#camera-dialog"
|
||||
mcrm__dialog-trigger
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
style="fill: currentColor"
|
||||
>
|
||||
<path
|
||||
d="M22.6,9.1c-0.1-0.5-0.3-1-0.5-1.6c-1.5,0-5.3,0-6.8,0c2.3,2.3,5.1,5.1,7.3,7.3C23.1,13.1,23.1,10.9,22.6,9.1z"
|
||||
/>
|
||||
<path
|
||||
d="M6.6,12.8c0-3.2,0-7.2,0-10.4C4.4,3.7,2.6,5.7,1.7,8C2.3,8.6,6.6,12.8,6.6,12.8z"
|
||||
/>
|
||||
<path
|
||||
d="M12.8,17.4c-3.2,0-7.2,0-10.4,0c1.2,2.2,3.2,3.9,5.6,4.8C8.6,21.7,12.8,17.4,12.8,17.4z"
|
||||
/>
|
||||
<path
|
||||
d="M17.4,11.2c0,3.2,0,7.2,0,10.4c2.2-1.2,3.9-3.2,4.8-5.6C21.7,15.4,17.4,11.2,17.4,11.2z"
|
||||
/>
|
||||
<path
|
||||
d="M11.2,6.6c3.2,0,7.2,0,10.4,0c-1.2-2.2-3.2-3.9-5.6-4.8C15.4,2.3,11.2,6.6,11.2,6.6z"
|
||||
/>
|
||||
<path
|
||||
d="M7.6,16.4h1.2c-2.3-2.3-5.1-5.1-7.3-7.3c-0.7,2.4-0.5,5.1,0.5,7.3C2.7,16.4,6.9,16.4,7.6,16.4z"
|
||||
/>
|
||||
<path
|
||||
d="M14.3,17.4c-1.3,1.3-3.8,3.8-5.2,5.2c2.4,0.7,5.1,0.5,7.3-0.5c0-1.5,0-5.3,0-6.8C15.9,15.8,14.8,16.9,14.3,17.4z"
|
||||
/>
|
||||
<path
|
||||
d="M14.9,1.4c-2.4-0.7-5.1-0.5-7.3,0.5c0,1.5,0,5.3,0,6.8C8.1,8.2,13.5,2.8,14.9,1.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span> CAMERA </span>
|
||||
</div>
|
||||
<dialog id="camera-dialog" mcrm__dialog>
|
||||
<div
|
||||
class="dialog__content ed-panel pnl__blue !w-fit !bg-sky-900 relative !p-4"
|
||||
>
|
||||
<div class="dialog__close">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="size-8"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M18 6l-12 12" />
|
||||
<path d="M6 6l12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Camera</h4>
|
||||
<div class="grid grid-cols-[1fr_2fr] gap-2 mt-4">
|
||||
<div
|
||||
id="Camera__Suite"
|
||||
class="ed-button btn__orange btn__filled btn__vertical !text-gray-800"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-gradienter"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M3.227 14c.917 4 4.497 7 8.773 7c4.277 0 7.858 -3 8.773 -7"
|
||||
/>
|
||||
<path
|
||||
d="M20.78 10a9 9 0 0 0 -8.78 -7a8.985 8.985 0 0 0 -8.782 7"
|
||||
/>
|
||||
<path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
|
||||
</svg>
|
||||
<span>Camera Suite</span>
|
||||
</div>
|
||||
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
id="Previous__Camera"
|
||||
class="ed-button btn__yellow !text-gray-800 btn__filled !pt-8"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M20.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z"
|
||||
/>
|
||||
<path
|
||||
d="M9.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z"
|
||||
/>
|
||||
</svg>
|
||||
<div class="relative text-right w-28">
|
||||
<span
|
||||
class="absolute right-0 text-base opacity-90 bottom-full"
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
<strong>Camera</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="Next__Camera"
|
||||
class="!pt-8 ed-button btn__yellow"
|
||||
mcrm__button
|
||||
>
|
||||
<div class="relative text-left w-28">
|
||||
<span class="absolute text-base opacity-80 bottom-full">
|
||||
Next
|
||||
</span>
|
||||
<strong>Camera</strong>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M2 5v14c0 .86 1.012 1.318 1.659 .753l8 -7a1 1 0 0 0 0 -1.506l-8 -7c-.647 -.565 -1.659 -.106 -1.659 .753z"
|
||||
/>
|
||||
<path
|
||||
d="M13 5v14c0 .86 1.012 1.318 1.659 .753l8 -7a1 1 0 0 0 0 -1.506l-8 -7c-.647 -.565 -1.659 -.106 -1.659 .753z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="Free__Camera"
|
||||
class="ed-button btn__orange btn__vertical"
|
||||
mcrm__button
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M18 9l3 3l-3 3" />
|
||||
<path d="M15 12h6" />
|
||||
<path d="M6 9l-3 3l3 3" />
|
||||
<path d="M3 12h6" />
|
||||
<path d="M9 18l3 3l3 -3" />
|
||||
<path d="M12 15v6" />
|
||||
<path d="M15 6l-3 -3l-3 3" />
|
||||
<path d="M12 3v6" />
|
||||
</svg>
|
||||
<span>Free Camera</span>
|
||||
</div>
|
||||
<div class="grid-cols-2 ed-button-group__horizontal">
|
||||
<div
|
||||
id="Camera__Pos1"
|
||||
class="ed-button btn__yellow !text-gray-800 btn__filled btn__vertical"
|
||||
mcrm__button
|
||||
>
|
||||
<span class="text-base opacity-80">Position</span>
|
||||
<strong>#1</strong>
|
||||
</div>
|
||||
<div
|
||||
id="Camera__Pos2"
|
||||
class="ed-button btn__yellow btn__vertical"
|
||||
mcrm__button
|
||||
>
|
||||
<span class="text-base opacity-80">Position</span>
|
||||
<strong>#2</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
<div class="flex items-end justify-end h-28">
|
||||
<div id="clock">
|
||||
<div class="hours-minutes"></div>
|
||||
<sup class="seconds"></sup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function onPanelLoaded() {
|
||||
document
|
||||
.querySelectorAll("#panel-html__body [toggle__button]")
|
||||
.forEach((toggleButton) => {
|
||||
if (toggleButton.getAttribute("active")) {
|
||||
toggleClasses(toggleButton, true);
|
||||
} else {
|
||||
toggleClasses(toggleButton, false);
|
||||
}
|
||||
|
||||
toggleButton.addEventListener("click", (e) => {
|
||||
if (!toggleButton.getAttribute("active")) {
|
||||
toggleButton.setAttribute("active", true);
|
||||
|
||||
toggleClasses(toggleButton, true);
|
||||
} else {
|
||||
toggleButton.removeAttribute("active");
|
||||
|
||||
toggleClasses(toggleButton, false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function toggleClasses(toggleButton, active) {
|
||||
const wrapper = toggleButton.querySelector(".toggle__wrapper");
|
||||
const indicator = toggleButton.querySelector(".toggle__indicator");
|
||||
|
||||
const stateClasses = getStateClasses(toggleButton);
|
||||
|
||||
if (active) {
|
||||
wrapper.classList.remove(...stateClasses.wrapper.inactive);
|
||||
wrapper.classList.add(...stateClasses.wrapper.active);
|
||||
|
||||
indicator.classList.remove(...stateClasses.indicator.inactive);
|
||||
indicator.classList.add(...stateClasses.indicator.active);
|
||||
} else {
|
||||
wrapper.classList.remove(...stateClasses.wrapper.active);
|
||||
wrapper.classList.add(...stateClasses.wrapper.inactive);
|
||||
|
||||
indicator.classList.remove(...stateClasses.indicator.active);
|
||||
indicator.classList.add(...stateClasses.indicator.inactive);
|
||||
}
|
||||
}
|
||||
|
||||
function getStateClasses(toggleButton) {
|
||||
return {
|
||||
wrapper: {
|
||||
active: mapClasses(toggleButton.getAttribute("active-wrapper")),
|
||||
inactive: mapClasses(
|
||||
toggleButton.getAttribute("inactive-wrapper")
|
||||
),
|
||||
},
|
||||
indicator: {
|
||||
active: mapClasses(toggleButton.getAttribute("active-indicator")),
|
||||
inactive: mapClasses(
|
||||
toggleButton.getAttribute("inactive-indicator")
|
||||
),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function mapClasses(classStr) {
|
||||
return classStr.split(" ").map((c) => c.trim());
|
||||
}
|
||||
|
||||
// document
|
||||
// .querySelectorAll("[dialog-trigger]")
|
||||
// .forEach((dialogTrigger) => {
|
||||
// dialogTrigger.addEventListener("click", (e) => {
|
||||
// document
|
||||
// .querySelector(dialogTrigger.getAttribute("dialog-trigger"))
|
||||
// .showModal();
|
||||
// });
|
||||
// });
|
||||
|
||||
// document
|
||||
// .querySelectorAll("dialog, dialog .dialog__close")
|
||||
// .forEach((dialogClose) => {
|
||||
// const dialog = dialogClose.closest("dialog");
|
||||
|
||||
// dialogClose.addEventListener("click", (e) => {
|
||||
// if (
|
||||
// e.target.classList.contains("dialog__close") ||
|
||||
// e.target.closest(".dialog__close") ||
|
||||
// e.target.tagName == "DIALOG"
|
||||
// ) {
|
||||
// dialog.close();
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
setInterval(() => {
|
||||
const clockEl = document.querySelector("#clock");
|
||||
const hoursMins = clockEl.querySelector(".hours-minutes");
|
||||
const seconds = clockEl.querySelector(".seconds");
|
||||
|
||||
const now = new Date();
|
||||
const hours = now.getHours();
|
||||
const minutes = now.getMinutes();
|
||||
const secondsStr = now.getSeconds();
|
||||
|
||||
hoursMins.innerHTML = formatTimeToHTML(
|
||||
`${hours.toString().padStart(2, "0")}:${minutes
|
||||
.toString()
|
||||
.padStart(2, "0")}`
|
||||
);
|
||||
seconds.innerHTML = formatTimeToHTML(
|
||||
secondsStr.toString().padStart(2, "0")
|
||||
);
|
||||
}, 1000);
|
||||
|
||||
function formatTimeToHTML(timeStr) {
|
||||
let htmlStr = "";
|
||||
|
||||
timeStr.split("").forEach((char) => {
|
||||
if (char === ":") htmlStr += "<i>:</i>";
|
||||
else htmlStr += "<span>" + char + "</span>";
|
||||
});
|
||||
|
||||
return htmlStr;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script no-compile>
|
||||
onPanelLoaded();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue