All Prompts
All Prompts
uitailwinddashboardeditoranimatedinteractive3ddark
3D Editor UI Preview Panel
Анимированная панель предпросмотра UI 3D-редактора с сайдбарами, тулбарами и viewport'ом. Идеально для превью приложений.
Prompt
<div
class="group [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] w-full h-[720px] max-w-[1600px] mt-8 mr-auto ml-auto relative perspective-[2000px]"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2)">
<!-- 3D wrapper -->
<div
class="transform-style-preserve-3d hover:rotate-x-0 hover:rotate-y-6 transition-transform duration-700 ease-out w-full h-full relative rotate-x-4 rotate-y-12"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1)">
<!-- Main Window -->
<div
class="overflow-hidden flex select-none bg-[#050505] w-full h-full max-w-[1600px] border-white/10 border rounded-3xl relative shadow-2xl"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)">
<!-- LEFT SIDEBAR -->
<div class="absolute left-4 top-4 bottom-4 w-[260px] z-20 flex flex-col gap-3 hidden md:flex pointer-events-none">
<div class="bg-[#0F0F11] border border-white/5 rounded-2xl p-3 shadow-xl pointer-events-auto backdrop-blur-sm">
<div class="flex items-center justify-between">
<div class="flex gap-x-3 gap-y-3 items-center">
<!-- Avatar (letters removed) -->
<div
class="w-8 h-8 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ec73f0-6fd3-4d0c-922c-fcc592c983df_320w.webp)] bg-cover bg-center rounded-full ring-[#121214] ring-2">
</div>
<!-- Name + Team badge -->
<div class="">
<div class="text-xs font-semibold text-gray-200 font-geist">Jasmin Morgan</div>
<div
class="text-[10px] font-medium text-blue-400 bg-blue-500/10 px-1.5 py-0.5 rounded border border-blue-500/20 w-fit mt-1.5 font-geist">
Team Plan
</div>
</div>
</div>
<button class="hover:text-white transition-colors text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold-duotone" class="iconify text-lg iconify--solar">
<path fill="currentColor" d="m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z" class="">
</path>
<path fill="currentColor" d="M11.293 8H5.57c-.528 0-.771.79-.37 1.205l2.406 2.481z" opacity=".5" class=""></path>
</svg>
</button>
</div>
<div class="relative mb-3 group">
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-500"></i>
<input type="text" placeholder="Search layers..." class="text-[11px] focus:outline-none transition-colors font-medium bg-[#1A1A1C] w-full border-white/5 border rounded-lg my-2 pt-2 pr-8 pb-2 pl-9 focus:border-blue-500/50 placeholder:text-gray-600 text-gray-300">
<button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-white/10 rounded">
<i data-lucide="plus" class="w-3.5 h-3.5 text-gray-500"></i>
</button>
</div>
<div class="space-y-0.5">
<div
class="flex items-center justify-between px-2 py-1.5 hover:bg-white/5 rounded cursor-pointer group mb-1">
<div class="flex items-center gap-2 text-xs font-medium font-geist text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
style="color: rgb(107, 114, 128); width: 14px; height: 14px"
class="w-3.5 h-3.5 text-gray-500 w-[14px] h-[14px]" data-solar="layers-bold-duotone"
data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<path fill="#6b7280"
d="M4.979 9.685C2.993 8.891 2 8.494 2 8s.993-.89 2.979-1.685l2.808-1.123C9.773 4.397 10.767 4 12 4s2.227.397 4.213 1.192l2.808 1.123C21.007 7.109 22 7.506 22 8s-.993.89-2.979 1.685l-2.808 1.124C14.227 11.603 13.233 12 12 12s-2.227-.397-4.213-1.191z"
class=""></path>
<path fill="#6b7280" fill-rule="evenodd"
d="M2 8c0 .494.993.89 2.979 1.685l2.808 1.124C9.773 11.603 10.767 12 12 12s2.227-.397 4.213-1.191l2.808-1.124C21.007 8.891 22 8.494 22 8s-.993-.89-2.979-1.685l-2.808-1.123C14.227 4.397 13.233 4 12 4s-2.227.397-4.213 1.192L4.98 6.315C2.993 7.109 2 7.506 2 8"
clip-rule="evenodd" class=""></path>
<path fill="#6b7280"
d="m5.766 10l-.787.315C2.993 11.109 2 11.507 2 12s.993.89 2.979 1.685l2.808 1.124C9.773 15.603 10.767 16 12 16s2.227-.397 4.213-1.191l2.808-1.124C21.007 12.891 22 12.493 22 12s-.993-.89-2.979-1.685L18.234 10l-2.021.809C14.227 11.603 13.233 12 12 12s-2.227-.397-4.213-1.191z"
opacity=".7" class=""></path>
<path fill="#6b7280"
d="m5.766 14l-.787.315C2.993 15.109 2 15.507 2 16s.993.89 2.979 1.685l2.808 1.124C9.773 19.603 10.767 20 12 20s2.227-.397 4.213-1.192l2.808-1.123C21.007 16.891 22 16.494 22 16c0-.493-.993-.89-2.979-1.685L18.234 14l-2.021.809C14.227 15.603 13.233 16 12 16s-2.227-.397-4.213-1.191z"
opacity=".4" class=""></path>
</svg>
Solids
</div>
<i data-lucide="chevron-down" class="w-3.5 h-3.5 text-gray-500"></i>
</div>
<div class="pl-2 space-y-0.5">
<div class="flex items-center justify-between px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer group">
<div
class="flex items-center gap-2.5 text-[11px] group-hover:text-white transition-colors font-geist text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
style="color: rgb(255, 255, 255); width: 12px; height: 12px" class="w-[12px] h-[12px]"
data-solar="three-squares-bold-duotone" data-icon-set="solar" data-icon-replaced="true"
stroke-width="2">
<rect width="10" height="10" x="12" y="2" fill="#ffffff" rx="2" class=""></rect>
<path fill="#ffffff"
d="M12 7h-1c-1.886 0-2.828 0-3.414.586S7 9.114 7 11v2c0 1.886 0 2.828.586 3.414S9.114 17 11 17h2c1.886 0 2.828 0 3.414-.586S17 14.886 17 13v-1h-1c-1.886 0-2.828 0-3.414-.586S12 9.886 12 8z"
opacity=".7" class=""></path>
<path fill="#ffffff"
d="M7 12v1c0 1.886 0 2.828.586 3.414S9.114 17 11 17h1v1c0 1.886 0 2.828-.586 3.414S9.886 22 8 22H6c-1.886 0-2.828 0-3.414-.586S2 19.886 2 18v-2c0-1.886 0-2.828.586-3.414S4.114 12 6 12z"
opacity=".4" class=""></path>
</svg>
Upper part
</div>
<div class="w-2 h-2 rounded-full border border-gray-700 group-hover:border-gray-500"></div>
</div>
<div class="flex items-center justify-between px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer group">
<div
class="flex items-center gap-2.5 text-[11px] group-hover:text-white transition-colors font-geist text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
style="color: rgb(255, 255, 255); width: 12px; height: 12px" class="w-[12px] h-[12px]"
data-solar="radial-blur-bold-duotone" data-icon-set="solar" data-icon-replaced="true"
stroke-width="2">
<circle cx="12" cy="12" r="10" fill="#ffffff" opacity=".5" class=""></circle>
<path fill="#ffffff"
d="M15.5 9.75a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m-4.5 0a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M5.75 9a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m4.75-3.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m4.5 0a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m4 4a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0m0 4.5a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0m-3.5 0a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M9.75 15.5a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5m-4-2a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m4.75 4.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m3.75.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5"
class=""></path>
</svg>
Face
</div>
<div class="w-2 h-2 rounded-full border border-gray-700 group-hover:border-gray-500"></div>
</div>
<div class="flex items-center justify-between px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer group">
<div
class="flex items-center gap-2.5 text-[11px] group-hover:text-white transition-colors font-geist text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
style="color: rgb(255, 255, 255); width: 12px; height: 12px" class="w-[12px] h-[12px]"
data-solar="align-vertical-spacing-bold-duotone" data-icon-set="solar" data-icon-replaced="true"
stroke-width="2">
<path fill="#ffffff" fill-rule="evenodd"
d="M1.25 21a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75m0-18A.75.75 0 0 1 2 2.25h20a.75.75 0 0 1 0 1.5H2A.75.75 0 0 1 1.25 3"
clip-rule="evenodd" opacity=".5" class=""></path>
<path fill="#ffffff"
d="M4 12c0 1.886 0 2.828.586 3.414S6.114 16 8 16h8c1.886 0 2.828 0 3.414-.586S20 13.886 20 12s0-2.828-.586-3.414S17.886 8 16 8H8c-1.886 0-2.828 0-3.414.586S4 10.114 4 12"
class=""></path>
</svg>
Lower part
</div>
<div class="w-2 h-2 rounded-full border border-gray-700 group-hover:border-gray-500"></div>
</div>
</div>
</div>
</div>
<div
class="flex-1 overflow-y-auto custom-scrollbar pointer-events-auto bg-[#121214]/80 border-white/10 border rounded-2xl pt-2 pr-2 pb-2 pl-2 shadow-2xl backdrop-blur-xl">
<div
class="flex hover:bg-white/5 cursor-pointer group transition-colors rounded-lg mb-1 pt-2 pr-2 pb-2 pl-2 items-center justify-between">
<div class="flex items-center gap-2 text-xs font-semibold font-geist text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:layers-minimalistic-bold-duotone" class="w-[16px] h-[16px]"
stroke-width="2" data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(212, 212, 216);">
<path fill="currentColor"
d="M7.624 4.449C9.501 3.698 10.621 3.25 12 3.25s2.499.448 4.376 1.199l2.97 1.188c.954.382 1.727.69 2.258.969c.268.14.528.3.729.493c.206.198.417.498.417.901s-.21.703-.417.901c-.2.193-.46.352-.73.493c-.53.278-1.303.587-2.258.97l-2.97 1.187C14.5 12.302 13.38 12.75 12 12.75s-2.499-.448-4.376-1.199l-2.969-1.188c-.955-.382-1.728-.69-2.259-.969a3.2 3.2 0 0 1-.729-.493C1.461 8.703 1.25 8.403 1.25 8s.21-.703.417-.901c.2-.193.46-.352.73-.493c.53-.278 1.303-.587 2.258-.97z"
class="">
</path>
<path fill="currentColor"
d="M2.502 11.443L2.5 11.44a.75.75 0 0 0-1 1.119L2 12l-.5.559l.002.002l.005.004l.014.012l.045.039q.057.047.161.129c.14.108.343.256.61.429c.533.346 1.32.79 2.363 1.207l2.809 1.124l.115.046c1.877.751 2.997 1.199 4.376 1.199s2.499-.448 4.375-1.199l.116-.046L19.3 14.38a13.7 13.7 0 0 0 2.363-1.207a9 9 0 0 0 .771-.558l.045-.039l.014-.012l.005-.004l.001-.002h.002a.75.75 0 0 0-1-1.119l-.002.002l-.002.001l-.024.021l-.118.094a8 8 0 0 1-.508.357c-.46.299-1.161.697-2.105 1.074l-2.808 1.123c-2.025.81-2.874 1.138-3.934 1.138s-1.91-.328-3.934-1.138L5.257 12.99a12 12 0 0 1-2.104-1.074a8 8 0 0 1-.65-.472"
opacity=".7" class=""></path>
<path fill="currentColor"
d="M2.499 15.5a.75.75 0 0 0-1 1.118H1.5l.002.002l.005.004l.014.012l.045.039l.161.13c.14.107.343.255.61.428c.533.346 1.32.79 2.363 1.207l2.809 1.124l.115.046c1.877.751 2.997 1.2 4.376 1.2s2.499-.449 4.375-1.2l.116-.046L19.3 18.44a13.7 13.7 0 0 0 2.363-1.208a9 9 0 0 0 .771-.558l.045-.039l.014-.012l.005-.004l.001-.001l.002-.002a.75.75 0 0 0-1-1.118l-.002.002l-.002.001l-.024.021l-.118.094a8 8 0 0 1-.508.357c-.46.299-1.161.697-2.105 1.074l-2.808 1.123c-2.025.81-2.874 1.138-3.934 1.138s-1.91-.328-3.934-1.138l-2.809-1.123a12 12 0 0 1-2.104-1.073a8 8 0 0 1-.626-.452l-.025-.02z"
opacity=".4" class=""></path>
</svg>
Scene Collection
</div>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold-duotone"
class="iconify iconify--solar w-[16px] h-[16px] group-hover:text-gray-300" stroke-width="2"
data-icon-replaced="true" style="color: rgb(212, 212, 216); width: 16px; height: 16px">
<path fill="currentColor"
d="m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z"
class=""></path>
<path fill="currentColor" d="M11.293 8H5.57c-.528 0-.771.79-.37 1.205l2.406 2.481z" opacity=".5" class="">
</path>
</svg>
</div>
<div class="pl-2 space-y-0.5">
<!-- Active Item -->
<div
class="flex items-center justify-between px-2 py-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 cursor-pointer group">
<div
class="flex gap-2.5 text-[11px] font-medium text-blue-100 font-geist gap-x-2.5 gap-y-2.5 items-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:box-bold-duotone" class="w-[16px] h-[16px]" stroke-width="2"
data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(59, 130, 246);">
<path fill="currentColor"
d="M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z"
class="">
</path>
<path fill="currentColor"
d="m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641"
opacity=".7" class=""></path>
<path fill="CurrentColor"
d="m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802"
opacity=".5" class=""></path>
<path fill="currentColor"
d="m6.323 4.484l.1-.052l1.493-.784l9.1 5.005l4.025-2.011q.205.232.362.498c.15.254.262.524.346.825L17.75 9.964V13a.75.75 0 0 1-1.5 0v-2.286l-3.5 1.75v9.44A3 3 0 0 1 12 22c-.248 0-.493-.032-.75-.096v-9.44l-8.998-4.5c.084-.3.196-.57.346-.824q.156-.266.362-.498l9.04 4.52l3.387-1.693z"
class=""></path>
</svg>
Main Chassis
</div>
<div class="w-1.5 h-1.5 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.8)]"></div>
</div>
<!-- Items -->
<div
class="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/5 cursor-pointer group transition-colors">
<div
class="flex gap-2.5 text-[11px] font-medium text-gray-400 group-hover:text-gray-200 font-geist gap-x-2.5 gap-y-2.5 items-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:box-bold-duotone"
class="iconify iconify--solar w-[16px] h-[16px]" stroke-width="2" data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(212, 212, 216)">
<path fill="currentColor"
d="M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z"
class="">
</path>
<path fill="currentColor"
d="m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641"
opacity=".7" class=""></path>
<path fill="currentColor"
d="m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802"
opacity=".5" class=""></path>
<path fill="currentColor"
d="m6.323 4.484l.1-.052l1.493-.784l9.1 5.005l4.025-2.011q.205.232.362.498c.15.254.262.524.346.825L17.75 9.964V13a.75.75 0 0 1-1.5 0v-2.286l-3.5 1.75v9.44A3 3 0 0 1 12 22c-.248 0-.493-.032-.75-.096v-9.44l-8.998-4.5c.084-.3.196-.57.346-.824q.156-.266.362-.498l9.04 4.52l3.387-1.693z"
class=""></path>
</svg>
Rotor Housing
</div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-800 group-hover:bg-gray-600"></div>
</div>
<div
class="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/5 cursor-pointer group transition-colors">
<div
class="flex gap-2.5 text-[11px] font-medium text-gray-400 group-hover:text-gray-200 font-geist gap-x-2.5 gap-y-2.5 items-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:box-bold-duotone"
class="iconify iconify--solar w-[16px] h-[16px]" stroke-width="2" data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(212, 212, 216)">
<path fill="currentColor"
d="M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z"
class="">
</path>
<path fill="currentColor"
d="m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641"
opacity=".7" class=""></path>
<path fill="currentColor"
d="m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802"
opacity=".5" class=""></path>
<path fill="currentColor"
d="m6.323 4.484l.1-.052l1.493-.784l9.1 5.005l4.025-2.011q.205.232.362.498c.15.254.262.524.346.825L17.75 9.964V13a.75.75 0 0 1-1.5 0v-2.286l-3.5 1.75v9.44A3 3 0 0 1 12 22c-.248 0-.493-.032-.75-.096v-9.44l-8.998-4.5c.084-.3.196-.57.346-.824q.156-.266.362-.498l9.04 4.52l3.387-1.693z"
class=""></path>
</svg>
Sensor Array
</div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-800 group-hover:bg-gray-600"></div>
</div>
<div
class="flex items-center justify-between px-2 py-2 mt-2 mb-1 rounded-lg hover:bg-white/5 cursor-pointer group transition-colors">
<div class="flex items-center gap-2 text-xs font-semibold font-geist text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:ruler-pen-bold-duotone" class="w-[16px] h-[16px]"
stroke-width="2" data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(212, 212, 216);">
<path fill="currentColor"
d="M16 22c-1.886 0-2.828 0-3.414-.586c-.503-.502-.574-1.267-.584-2.664L12 17.25V6.75l.002-1.5c.01-1.397.081-2.162.584-2.664C13.172 2 14.114 2 16 2h2c1.886 0 2.828 0 3.414.586S22 4.114 22 6v12c0 1.886 0 2.828-.586 3.414S19.886 22 18 22z"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M15 8.25h-3v1.5h3a.75.75 0 0 0 0-1.5m-1-3h-1.998L12 6.75h2a.75.75 0 0 0 0-1.5m0 6h-2v1.5h2a.75.75 0 0 0 0-1.5m1 3h-3v1.5h3a.75.75 0 0 0 0-1.5m-1 3h-2l.002 1.5H14a.75.75 0 0 0 0-1.5m-6-2.27V7a7.9 7.9 0 0 1-3 .59A7.9 7.9 0 0 1 2 7v7.98c0 .622 0 .934.038 1.24a5 5 0 0 0 .25 1.056c.102.29.241.569.52 1.126l1.468 2.937a.809.809 0 0 0 1.448 0l1.468-2.937c.279-.557.418-.835.52-1.126a5 5 0 0 0 .25-1.057C8 15.914 8 15.602 8 14.98"
class=""></path>
<path fill="currentColor"
d="M5 2a3 3 0 0 1 3 3v2a7.9 7.9 0 0 1-3 .589A7.9 7.9 0 0 1 2 7V5a3 3 0 0 1 3-3" opacity=".5"
class=""></path>
</svg>
Vectors
</div>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold-duotone"
class="iconify iconify--solar text-gray-500 group-hover:text-gray-300">
<path fill="currentColor"
d="m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z"
class=""></path>
<path fill="currentColor" d="M11.293 8H5.57c-.528 0-.771.79-.37 1.205l2.406 2.481z" opacity=".5"
class=""></path>
</svg>
</div>
<div class="pl-2 space-y-0.5">
<div
class="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/5 cursor-pointer group transition-colors">
<div
class="flex items-center gap-2.5 text-[11px] font-medium font-geist text-gray-400 group-hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:graph-new-bold-duotone" class="w-[16px] h-[16px]"
stroke-width="2" data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(228, 228, 231)">
<path fill="currentColor"
d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M17.576 10.48a.75.75 0 0 0-1.152-.96l-1.797 2.156c-.37.445-.599.716-.786.885a.8.8 0 0 1-.163.122l-.011.005l-.008-.004l-.003-.001a.8.8 0 0 1-.164-.122c-.187-.17-.415-.44-.786-.885l-.292-.35c-.328-.395-.625-.75-.901-1c-.301-.272-.68-.514-1.18-.514s-.878.242-1.18.514c-.276.25-.572.605-.9 1l-1.83 2.194a.75.75 0 0 0 1.153.96l1.797-2.156c.37-.445.599-.716.786-.885a.8.8 0 0 1 .163-.122l.007-.003l.004-.001q.004 0 .011.004a.8.8 0 0 1 .164.122c.187.17.415.44.786.885l.292.35c.329.395.625.75.901 1c.301.272.68.514 1.18.514s.878-.242 1.18-.514c.276-.25.572-.605.9-1zM22 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0"
class="">
</path>
</svg>
Path A-102
</div>
</div>
<div
class="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/5 cursor-pointer group transition-colors">
<div
class="flex items-center gap-2.5 text-[11px] font-medium font-geist text-gray-400 group-hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:link-circle-bold-duotone" class="w-[16px] h-[16px]"
stroke-width="2" data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(228, 228, 231)">
<path fill="currentColor"
d="M3.464 20.536C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M9.5 8.75A3.25 3.25 0 1 0 12.75 12a.75.75 0 0 1 1.5 0A4.75 4.75 0 1 1 9.5 7.25a.75.75 0 0 1 0 1.5"
class="">
</path>
<path fill="currentColor"
d="M17.75 12a3.25 3.25 0 0 1-3.25 3.25a.75.75 0 0 0 0 1.5A4.75 4.75 0 1 0 9.75 12a.75.75 0 0 0 1.5 0a3.25 3.25 0 0 1 6.5 0"
class="">
</path>
</svg>
Connector
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TOP CENTER TOOLBAR -->
<div
class="-translate-x-1/2 z-30 flex gap-4 bg-[#121214]/80 border-white/10 border rounded-2xl pt-1.5 pr-3 pb-1.5 pl-3 absolute top-6 left-1/2 shadow-2xl backdrop-blur-xl gap-x-4 gap-y-4 items-center">
<div class="flex items-center gap-1">
<button class="p-2 hover:bg-white/10 rounded-xl hover:text-white transition-colors text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:hamburger-menu-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255)">
<path fill="currentColor" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22" opacity=".5" class=""></path>
<path fill="currentColor" d="M18.75 8a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75m0 4a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75m0 4a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75" class=""></path>
</svg>
</button>
<button class="p-2 hover:bg-white/10 rounded-xl hover:text-white transition-colors text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:folder-with-files-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255)">
<path fill="currentColor" d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77q.119.105.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14z" opacity=".5" class=""></path>
<path fill="currentColor" d="M20 6.238c0-.298-.005-.475-.025-.63a3 3 0 0 0-2.583-2.582C17.197 3 16.965 3 16.5 3H9.988c.116.104.247.234.462.45L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .849.352C14.098 6 14.675 6 15.829 6h.373c1.78 0 2.957 0 3.798.238" class=""></path>
<path fill="currentColor" fill-rule="evenodd" d="M12.25 10a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75" clip-rule="evenodd" class=""></path>
</svg>
</button>
</div>
<div class="w-[1px] h-5 bg-white/10"></div>
<div class="flex items-center gap-1">
<button class="p-2 hover:bg-white/10 rounded-xl hover:text-white transition-colors text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:box-bold-duotone" class="iconify iconify--solar text-lg w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255)">
<path fill="currentColor" d="M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z" class=""></path>
<path fill="currentColor" d="m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641" opacity=".7" class=""></path>
<path fill="currentColor" d="m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802" opacity=".5" class=""></path>
<path fill="currentColor" d="m6.323 4.484l.1-.052l1.493-.784l9.1 5.005l4.025-2.011q.205.232.362.498c.15.254.262.524.346.825L17.75 9.964V13a.75.75 0 0 1-1.5 0v-2.286l-3.5 1.75v9.44A3 3 0 0 1 12 22c-.248 0-.493-.032-.75-.096v-9.44l-8.998-4.5c.084-.3.196-.57.346-.824q.156-.266.362-.498l9.04 4.52l3.387-1.693z" class=""></path>
</svg>
</button>
<button class="p-2 hover:bg-white/10 rounded-xl hover:text-white transition-colors text-gray-400">
<span class="iconify text-lg" data-icon="solar:sphere-bold-duotone"></span>
</button>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:widget-2-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2"
data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255)">
<path fill="currentColor" fill-rule="evenodd"
d="M2 6.634a4.634 4.634 0 1 1 9.268 0a4.634 4.634 0 0 1-9.268 0" clip-rule="evenodd" class=""></path>
<path fill="currentColor" fill-rule="evenodd"
d="M12.732 17.366a4.634 4.634 0 1 1 9.269 0a4.634 4.634 0 0 1-9.269 0" clip-rule="evenodd" opacity=".5"
class=""></path>
<path fill="currentColor"
d="M2 17.5c0-2.121 0-3.182.659-3.841S4.379 13 6.5 13s3.182 0 3.841.659S11 15.379 11 17.5s0 3.182-.659 3.841S8.621 22 6.5 22s-3.182 0-3.841-.659S2 19.621 2 17.5"
class=""></path>
<path fill="currentColor"
d="M13 6.5c0-2.121 0-3.182.659-3.841S15.379 2 17.5 2s3.182 0 3.841.659S22 4.379 22 6.5s0 3.182-.659 3.841S19.621 11 17.5 11s-3.182 0-3.841-.659S13 8.621 13 6.5"
opacity=".5" class=""></path>
</svg>
</div>
<div class="w-[1px] h-5 bg-white/10"></div>
<div
class="flex items-center gap-2 px-3 py-1.5 hover:bg-white/5 rounded-xl cursor-pointer border border-transparent hover:border-white/5 transition-all group">
<div class="flex flex-col items-start">
<span class="text-[10px] font-semibold uppercase tracking-wider font-geist text-gray-500 group-hover:text-gray-400">
Project
</span>
<span class="text-xs font-semibold group-hover:text-white font-geist text-gray-200">
Drone_Prototype_v4
</span>
</div>
</div>
</div>
<!-- CENTER 3D OBJECT -->
<div class="flex-1 flex w-full h-full relative perspective-[1000px] items-center justify-center"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3)">
<div class="group transition-transform duration-500 ease-out hover:scale-105 w-64 h-64 relative">
<div
class="absolute inset-0 rounded-full bg-gradient-to-br shadow-[inset_-20px_-20px_60px_rgba(0,0,0,0.9),0_30px_60px_rgba(0,0,0,0.6)] z-10 from-gray-200 via-gray-500 to-gray-900">
<div
class="absolute top-[30%] left-[15%] w-20 h-20 rounded-full bg-[#050505] border-[6px] shadow-[inset_0_0_25px_black] flex items-center justify-center overflow-hidden border-gray-600">
<div class="w-8 h-8 rounded-full bg-red-900/80 shadow-[0_0_15px_red] relative">
<div class="absolute top-2 left-2 w-2 h-2 bg-white rounded-full blur-[1px]"></div>
</div>
<div class="absolute inset-0 bg-gradient-to-tr from-transparent via-transparent to-white/20 rounded-full">
</div>
</div>
</div>
<div
class="-right-[180px] flex flex-col gap-0.5 z-40 hidden md:flex animate-in fade-in slide-in-from-left-4 duration-300 bg-[#0F0F11]/90 w-[160px] border-white/10 border rounded-xl pt-1 pr-1 pb-1 pl-1 absolute top-[10%] shadow-2xl backdrop-blur-md gap-x-0.5 gap-y-0.5">
<div class="flex items-center justify-between px-2.5 py-1.5 rounded hover:bg-white/10 cursor-pointer group">
<span class="text-[11px] font-geist text-gray-300">
Slice
</span>
<span class="text-[9px] font-mono bg-white/5 px-1.5 py-0.5 rounded border border-white/5 font-geist text-gray-500">
Shift + Q
</span>
</div>
<div class="flex items-center justify-between px-2.5 py-1.5 rounded hover:bg-white/10 cursor-pointer group">
<span class="text-[11px] font-geist text-gray-300">
Union
</span>
<span class="text-[9px] font-mono bg-white/5 px-1.5 py-0.5 rounded border border-white/5 font-geist text-gray-500">
Q
</span>
</div>
<div class="flex items-center justify-between px-2.5 py-1.5 rounded hover:bg-white/10 cursor-pointer group">
<span class="text-[11px] font-geist text-gray-300">
Difference
</span>
<span class="text-[9px] font-mono bg-white/5 px-1.5 py-0.5 rounded border border-white/5 font-geist text-gray-500">
Shift + E
</span>
</div>
<div class="h-[1px] bg-white/5 my-0.5"></div>
<div class="flex items-center justify-between px-2.5 py-1.5 rounded hover:bg-white/10 cursor-pointer group">
<span class="text-[11px] font-geist text-gray-300">
Radius
</span>
<span class="text-[9px] font-mono bg-white/5 px-1.5 py-0.5 rounded border border-white/5 font-geist text-gray-500">
D
</span>
</div>
</div>
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-40 h-40 pointer-events-none opacity-90">
<div class="absolute top-0 left-1/2 h-1/2 w-[2px] bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></div>
<div
class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-b-[8px] border-b-green-500">
</div>
<div class="absolute top-1/2 right-0 w-1/2 h-[2px] bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]"></div>
<div
class="absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2 w-0 h-0 border-t-[4px] border-t-transparent border-b-[4px] border-b-transparent border-l-[8px] border-l-red-500">
</div>
<div
class="absolute top-1/2 left-1/2 w-[60%] h-[2px] bg-blue-500 origin-left transform rotate-[135deg] shadow-[0_0_8px_rgba(59,130,246,0.6)]">
</div>
<div
class="absolute top-1/2 left-1/2 w-3 h-3 bg-white rounded-full -translate-x-1/2 -translate-y-1/2 shadow-[0_0_10px_white] z-50 ring-4 ring-black/20">
</div>
</div>
</div>
</div>
<!-- BOTTOM CENTER HUD -->
<div
class="absolute bottom-6 left-1/2 -translate-x-1/2 z-30 flex flex-col items-center gap-3 w-full max-w-2xl pointer-events-none px-4">
<div class="z-10 w-12 h-12 pointer-events-auto">
<div
class="flex bg-[#1A1A1C]/50 w-full h-full border-white/10 border rounded-full relative shadow-2xl backdrop-blur-md items-center justify-center">
<div
class="w-3 h-0.5 bg-green-500 absolute top-1/2 left-1/2 translate-x-1 shadow-[0_0_8px_rgba(34,197,94,0.8)]">
</div>
<div
class="w-0.5 h-3 bg-red-500 absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-3 shadow-[0_0_8px_rgba(239,68,68,0.8)]">
</div>
<div class="w-2 h-2 bg-blue-500 rounded-full absolute z-10 shadow-[0_0_8px_rgba(59,130,246,0.8)]"></div>
<span class="absolute -top-2 text-[9px] font-semibold text-white px-1 rounded font-geist bg-gray-800">
Y
</span>
<span class="absolute -right-1 text-[9px] font-semibold text-white px-1 rounded font-geist bg-gray-800">
X
</span>
</div>
</div>
<div
class="flex gap-2 pointer-events-auto bg-[#121214]/80 border-white/10 border rounded-full pt-2.5 pr-4 pb-2.5 pl-4 shadow-2xl backdrop-blur-xl gap-x-2 gap-y-2 items-center">
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-white/10 text-white border border-white/10 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:cursor-bold-duotone" class="iconify iconify--solar text-xl w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="color: rgb(255, 255, 255); width: 20px; height: 20px">
<path fill="currentColor" fill-rule="evenodd" d="m11.433 16.464l1.203-1.202l2.626-2.626l1.202-1.203c1.232-1.23 1.847-1.846 1.702-2.508s-.963-.963-2.596-1.565l-5.45-2.007C6.861 4.152 5.232 3.55 4.392 4.39s-.24 2.47.962 5.73l2.006 5.45c.602 1.633.903 2.45 1.565 2.596s1.277-.47 2.508-1.702" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="m12.636 15.262l3.938 3.938c.408.408.612.612.84.706c.302.126.643.126.946 0c.228-.094.432-.298.84-.706c.407-.408.611-.612.706-.84a1.24 1.24 0 0 0 0-.946c-.095-.228-.299-.432-.706-.84l-3.939-3.938z" opacity=".5" class=""></path>
</svg>
</button>
<button class="flex hover:bg-white/5 hover:text-white transition-colors w-10 h-10 rounded-full items-center justify-center text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:pen-new-square-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);">
<path fill="currentColor" d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12" opacity=".5" class=""></path>
<path fill="currentColor" d="M13.926 14.302c.245-.191.467-.413.912-.858l5.54-5.54c.134-.134.073-.365-.106-.427a6.1 6.1 0 0 1-2.3-1.449a6.1 6.1 0 0 1-1.45-2.3c-.061-.18-.292-.24-.426-.106l-5.54 5.54c-.445.444-.667.667-.858.912a5 5 0 0 0-.577.932c-.133.28-.233.579-.431 1.175l-.257.77l-.409 1.226l-.382 1.148a.817.817 0 0 0 1.032 1.033l1.15-.383l1.224-.408l.77-.257c.597-.199.895-.298 1.175-.432q.498-.237.933-.576m8.187-8.132a3.028 3.028 0 0 0-4.282-4.283l-.179.178a.73.73 0 0 0-.206.651c.027.15.077.37.168.633a4.9 4.9 0 0 0 1.174 1.863a4.9 4.9 0 0 0 1.862 1.174c.263.09.483.141.633.168c.24.043.48-.035.652-.207z" class=""></path>
</svg>
</button>
<button class="flex hover:bg-white/5 hover:text-white transition-colors w-10 h-10 rounded-full items-center justify-center text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="width: 20px; height: 20px; color: rgb(255, 255, 255);" class="w-[20px] h-[20px]" aria-hidden="true" role="img" data-icon="solar:pen-new-square-bold-duotone" data-solar="palette-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<path fill="#ffffff" d="M7.75 19a.75.75 0 0 1-.75.75H5a.75.75 0 0 1 0-1.5h2a.75.75 0 0 1 .75.75" class=""></path>
<path fill="#ffffff" d="M10 18V6c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.093C8.1 2 7.4 2 6 2s-2.1 0-2.635.272a2.5 2.5 0 0 0-1.093 1.093C2 3.9 2 4.6 2 6v12c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092C3.9 22 4.6 22 6 22s2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092C10 20.1 10 19.4 10 18" opacity=".4" class=""></path>
<path fill="#ffffff" d="M10 8.243V18c0 .919 0 1.536-.077 2.003l3.299-3.299l5.838-6.09c.973-1.003 1.46-1.505 1.636-2.08a2.5 2.5 0 0 0-.011-1.503C20.5 6.458 20 5.958 19 4.959c-.9-.886-1.352-1.33-1.88-1.514a2.5 2.5 0 0 0-1.353-.085c-.547.118-1.049.502-2.053 1.27L13 5.243zm-1.997 13.68H8v.003z" opacity=".7" class=""></path>
<path fill="#ffffff" d="M15.814 14H17.9c1.4 0 2.1 0 2.635.273a2.5 2.5 0 0 1 1.093 1.092C21.9 15.9 21.9 16.6 21.9 18s0 2.1-.272 2.635a2.5 2.5 0 0 1-1.093 1.092C20 22 19.3 22 17.9 22H6c.917 0 1.534 0 2-.077v.003l.003-.003c.245-.04.448-.102.632-.195a2.5 2.5 0 0 0 1.093-1.093c.093-.184.155-.387.195-.632l3.299-3.299z" class=""></path>
</svg>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/5 hover:text-white transition-colors text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:box-minimalistic-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);">
<path fill="currentColor" d="M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z" class=""></path>
<path fill="currentColor" d="m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641" opacity=".7" class=""></path>
<path fill="currentColor" d="m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802" opacity=".5" class=""></path>
</svg>
</button>
<div class="w-[1px] h-6 bg-white/10 mx-1"></div>
<button class="flex hover:bg-white/5 hover:text-white transition-colors w-10 h-10 rounded-full items-center justify-center text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:pen-new-square-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);">
<path fill="currentColor" d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12" opacity=".5" class=""></path>
<path fill="currentColor" d="M13.926 14.302c.245-.191.467-.413.912-.858l5.54-5.54c.134-.134.073-.365-.106-.427a6.1 6.1 0 0 1-2.3-1.449a6.1 6.1 0 0 1-1.45-2.3c-.061-.18-.292-.24-.426-.106l-5.54 5.54c-.445.444-.667.667-.858.912a5 5 0 0 0-.577.932c-.133.28-.233.579-.431 1.175l-.257.77l-.409 1.226l-.382 1.148a.817.817 0 0 0 1.032 1.033l1.15-.383l1.224-.408l.77-.257c.597-.199.895-.298 1.175-.432q.498-.237.933-.576m8.187-8.132a3.028 3.028 0 0 0-4.282-4.283l-.179.178a.73.73 0 0 0-.206.651c.027.15.077.37.168.633a4.9 4.9 0 0 0 1.174 1.863a4.9 4.9 0 0 0 1.862 1.174c.263.09.483.141.633.168c.24.043.48-.035.652-.207z" class=""></path>
</svg>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/5 hover:text-white transition-colors text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:maximize-square-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);">
<path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".5" class=""></path>
<path fill="currentColor" fill-rule="evenodd" d="M13.25 6.25a.75.75 0 0 0 0 1.5h1.94l-3.72 3.72l-3.72 3.72v-1.94a.75.75 0 0 0-1.5 0V17c0 .414.336.75.75.75h3.75a.75.75 0 0 0 0-1.5H8.81l3.72-3.72l3.72-3.72v1.94a.75.75 0 0 0 1.5 0V7a.75.75 0 0 0-.75-.75z" clip-rule="evenodd" class=""></path>
</svg>
</button>
<div class="w-[1px] h-6 bg-white/10 mx-1"></div>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/5 hover:text-white transition-colors text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:bolt-bold-duotone" class="w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);">
<path fill="currentColor" fill-rule="evenodd" d="M8.732 5.771L5.67 9.914c-1.285 1.739-1.928 2.608-1.574 3.291l.018.034c.375.673 1.485.673 3.704.673c1.233 0 1.85 0 2.236.363l.02.02l3.872-4.57l-.02-.02c-.379-.371-.379-.963-.379-2.148v-.31c0-3.285 0-4.927-.923-5.21s-1.913 1.056-3.892 3.734" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M10.453 16.443v.31c0 3.284 0 4.927.923 5.21s1.913-1.056 3.893-3.734l3.062-4.143c1.284-1.739 1.927-2.608 1.573-3.291l-.018-.034c-.375-.673-1.485-.673-3.704-.673c-1.233 0-1.85 0-2.236-.363l-3.872 4.57c.379.371.379.963.379 2.148" opacity=".5" class=""></path>
</svg>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/5 hover:text-white transition-colors text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:magic-stick-3-bold-duotone" class="iconify iconify--solar w-[20px] h-[20px]" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);">
<path fill="currentColor" d="M3.845 3.845a2.883 2.883 0 0 0 0 4.077L5.432 9.51c.012-.014.555.503.568.49l4-4c.013-.013-.504-.556-.49-.568L7.922 3.845a2.883 2.883 0 0 0-4.077 0m1.288 11.462a.483.483 0 0 1 .9 0l.157.4a.48.48 0 0 0 .272.273l.398.157a.486.486 0 0 1 0 .903l-.398.158a.48.48 0 0 0-.272.273l-.157.4a.483.483 0 0 1-.9 0l-.157-.4a.48.48 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.903l.398-.157a.48.48 0 0 0 .272-.274z" opacity=".5" class=""></path>
<path fill="currentColor" d="M19.967 9.13a.483.483 0 0 1 .9 0l.156.399c.05.125.148.224.273.273l.398.158a.486.486 0 0 1 0 .902l-.398.158a.5.5 0 0 0-.273.273l-.156.4a.483.483 0 0 1-.9 0l-.157-.4a.5.5 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.902l.398-.158a.5.5 0 0 0 .272-.273z" opacity=".2" class=""></path>
<path fill="currentColor" d="M16.1 2.307a.483.483 0 0 1 .9 0l.43 1.095a.48.48 0 0 0 .272.274l1.091.432a.486.486 0 0 1 0 .903l-1.09.432a.5.5 0 0 0-.273.273L17 6.81a.483.483 0 0 1-.9 0l-.43-1.095a.5.5 0 0 0-.273-.273l-1.09-.432a.486.486 0 0 1 0-.903l1.09-.432a.5.5 0 0 0 .273-.274z" opacity=".7" class=""></path>
<path fill="currentColor" d="M10.568 6.49c-.012.014-.555-.503-.568-.49l-4 4c-.013.013.504.556.49.568l9.588 9.587a2.883 2.883 0 1 0 4.078-4.077z" class=""></path>
</svg>
</button>
</div>
</div>
<!-- BOTTOM LEFT -->
<div class="absolute bottom-6 left-4 z-30 flex flex-col gap-3 hidden md:flex">
<div class="flex items-center gap-2">
<div class="flex bg-[#0F0F11] rounded-lg border border-white/10 p-0.5 shadow-lg"></div>
</div>
</div>
<!-- RIGHT SIDEBAR -->
<div class="absolute right-4 top-4 bottom-4 w-[260px] z-20 pointer-events-none hidden lg:block">
<div
class="pointer-events-auto flex flex-col gap-5 no-scrollbar overflow-y-auto bg-[#121214]/80 h-full border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 shadow-2xl backdrop-blur-xl gap-x-5 gap-y-5">
<!-- Zoom + Share / Export -->
<div class="flex border-b border-white/5 mb-0 px-1 pb-3 items-center justify-between">
<!-- Left: Zoom -->
<div class="flex items-center gap-3">
<button class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-[#141416] border border-white/5 text-[11px] hover:border-white/20 hover:bg-white/5 transition-colors text-gray-300">
<span class="font-geist">100%</span>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" class="w-5 h-5 text-gray-500">
<path fill="#71717a" d="m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z" class=""></path>
<path fill="#71717a" d="M11.293 8H5.57c-.528 0-.771.79-.37 1.205l2.406 2.481z" opacity=".5" class=""></path>
</svg>
</button>
</div>
<!-- Right: Share + Export -->
<div class="flex items-center gap-2">
<button class="text-[11px] hover:bg-white/10 hover:border-white/30 transition-colors font-medium bg-[#1E1F23] border border-white/10 rounded-lg py-1.5 px-3 shadow-sm font-geist text-gray-200">
Share
</button>
<button class="px-3 py-1.5 rounded-lg bg-[#1E1F23] border border-white/10 text-[11px] font-medium hover:bg-white/10 hover:border-white/30 transition-colors shadow-sm font-geist text-gray-200">
Export
</button>
</div>
</div>
<!-- Tabs -->
<div class="flex gap-1 bg-black/30 border border-white/5 rounded-lg p-1">
<button class="flex-1 py-1.5 rounded text-xs font-medium transition-colors font-geist text-gray-500 hover:text-gray-300">
Display
</button>
<button class="flex-1 py-1.5 rounded text-xs font-medium bg-[#1A1A1C] text-white shadow-sm border border-white/10 font-geist">
Properties
</button>
</div>
<!-- Location Panel -->
<div class="">
<div class="text-[10px] uppercase font-medium tracking-wider mb-2 px-1 font-geist text-gray-500">
Location
</div>
<div class="space-y-1.5">
<!-- X -->
<div class="flex items-center gap-2">
<span class="text-[10px] w-3 font-medium font-geist text-gray-500">
X
</span>
<div
class="flex-1 bg-[#141416] border border-white/5 rounded flex items-center justify-between px-2.5 py-1.5 hover:border-white/20 transition-colors group">
<span class="text-[11px] font-mono font-geist text-gray-300">
9896 cm
</span>
<i data-lucide="lock" class="w-3 h-3 text-gray-700 group-hover:text-gray-500"></i>
</div>
</div>
<!-- Y -->
<div class="flex items-center gap-2">
<span class="text-[10px] w-3 font-medium font-geist text-gray-500">
Y
</span>
<div
class="flex-1 bg-[#141416] border border-white/5 rounded flex items-center justify-between px-2.5 py-1.5 hover:border-white/20 transition-colors group">
<span class="text-[11px] font-mono font-geist text-gray-300">
9896 cm
</span>
<i data-lucide="lock" class="w-3 h-3 text-gray-700 group-hover:text-gray-500"></i>
</div>
</div>
<!-- Z -->
<div class="flex items-center gap-2">
<span class="text-[10px] w-3 font-medium font-geist text-gray-500">
Z
</span>
<div
class="flex-1 bg-[#141416] border border-white/5 rounded flex items-center justify-between px-2.5 py-1.5 hover:border-white/20 transition-colors group">
<span class="text-[11px] font-mono font-geist text-gray-300">
9896 cm
</span>
<i data-lucide="lock" class="w-3 h-3 text-gray-700 group-hover:text-gray-500"></i>
</div>
</div>
</div>
</div>
<!-- Rotation Panel -->
<div class="">
<div class="text-[10px] uppercase tracking-wider mb-2 font-medium px-1 font-geist text-gray-500">
Rotation
</div>
<div class="space-y-1.5">
<!-- X -->
<div class="flex items-center gap-2">
<span class="text-[10px] w-3 font-medium font-geist text-gray-500">
X
</span>
<div
class="flex-1 bg-[#141416] border border-white/5 rounded flex items-center justify-between px-2.5 py-1.5 hover:border-white/20 transition-colors group">
<span class="text-[11px] font-mono font-geist text-gray-300">
9896 cm
</span>
<i data-lucide="lock" class="w-3 h-3 text-gray-700 group-hover:text-gray-500"></i>
</div>
</div>
<!-- Y -->
<div class="flex items-center gap-2">
<span class="text-[10px] w-3 font-medium font-geist text-gray-500">
Y
</span>
<div
class="flex-1 bg-[#141416] border border-white/5 rounded flex items-center justify-between px-2.5 py-1.5 hover:border-white/20 transition-colors group">
<span class="text-[11px] font-mono font-geist text-gray-300">
9896 cm
</span>
<i data-lucide="lock" class="w-3 h-3 text-gray-700 group-hover:text-gray-500"></i>
</div>
</div>
<!-- Z -->
<div class="flex items-center gap-2">
<span class="text-[10px] w-3 font-medium font-geist text-gray-500">
Z
</span>
<div
class="flex-1 bg-[#141416] border border-white/5 rounded flex items-center justify-between px-2.5 py-1.5 hover:border-white/20 transition-colors group">
<span class="text-[11px] font-mono font-geist text-gray-300">
9896 cm
</span>
<i data-lucide="lock" class="w-3 h-3 text-gray-700 group-hover:text-gray-500"></i>
</div>
</div>
</div>
</div>
<!-- Construction Planes -->
<div class="border-t border-white/5 pt-4 mt-2">
<div class="text-[10px] uppercase tracking-wider mb-2 font-medium px-1 font-geist text-gray-500">
Construction Planes
</div>
<div class="grid grid-cols-3 gap-2 mb-3 gap-x-2 gap-y-2">
<button class="py-2 rounded bg-[#141416] hover:bg-white/10 border border-white/5 text-[10px] flex items-center justify-center gap-1 transition-colors font-geist text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="color: rgb(161, 161, 170); width: 12px; height: 12px;" class="w-[12px] h-[12px]" data-solar="align-top-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#a1a1aa" d="M7.5 7.75c-.935 0-1.402 0-1.75.201a1.5 1.5 0 0 0-.549.549C5 8.848 5 9.315 5 10.25v9c0 .935 0 1.402.201 1.75a1.5 1.5 0 0 0 .549.549c.348.201.815.201 1.75.201s1.402 0 1.75-.201A1.5 1.5 0 0 0 9.799 21c.201-.348.201-.815.201-1.75v-9c0-.935 0-1.402-.201-1.75a1.5 1.5 0 0 0-.549-.549c-.348-.201-.815-.201-1.75-.201m9 0c-.935 0-1.402 0-1.75.201a1.5 1.5 0 0 0-.549.549C14 8.848 14 9.315 14 10.25v6c0 .935 0 1.402.201 1.75a1.5 1.5 0 0 0 .549.549c.348.201.815.201 1.75.201s1.402 0 1.75-.201a1.5 1.5 0 0 0 .549-.549c.201-.348.201-.815.201-1.75v-6c0-.935 0-1.402-.201-1.75a1.5 1.5 0 0 0-.549-.549c-.348-.201-.815-.201-1.75-.201" class=""></path><path fill="#a1a1aa" fill-rule="evenodd" d="M22.75 3.75a.75.75 0 0 1-.75.75H2A.75.75 0 1 1 2 3h20a.75.75 0 0 1 .75.75" clip-rule="evenodd" opacity=".5" class=""></path></svg>
XY
</button>
<button class="hover:bg-white/10 text-[10px] flex gap-1 transition-colors text-gray-400 font-geist bg-[#141416] border-white/5 border rounded pt-2 pb-2 gap-x-1 gap-y-1 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="color: rgb(156, 163, 175); width: 12px; height: 12px;" class="w-[12px] h-[12px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="mirror-left-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#9ca3af" d="M3.25 12.75v-2c0-3.771 0-5.657 1.172-6.828C5.514 2.829 8.098 2.755 11.5 2.75a.75.75 0 0 1 1.5 0v18a.75.75 0 0 1-1.5 0c-3.402-.005-5.986-.079-7.078-1.172C3.25 18.407 3.25 16.521 3.25 12.75" class=""></path><path fill="#9ca3af" fill-rule="evenodd" d="M13.59 2.75c0 .414.337.75.75.75h.91q.653 0 1.202.003a.75.75 0 0 0 .013-1.5Q15.902 2 15.252 2h-.911a.75.75 0 0 0-.75.75m0 18c0 .414.337.75.75.75h.912q.65 0 1.213-.003a.75.75 0 0 0-.013-1.5q-.55.004-1.202.003h-.91a.75.75 0 0 0-.75.75m5.031-17.945a.75.75 0 0 0 .494.938c.32.1.544.235.726.416s.316.405.415.726a.75.75 0 0 0 1.433-.445a3.2 3.2 0 0 0-.787-1.342a3.2 3.2 0 0 0-1.342-.787a.75.75 0 0 0-.939.494m0 17.89a.75.75 0 0 0 .939.494c.515-.16.962-.408 1.342-.787s.627-.827.787-1.342a.75.75 0 1 0-1.433-.445c-.1.321-.234.545-.415.726a1.7 1.7 0 0 1-.726.416a.75.75 0 0 0-.494.938m2.62-13.904a.75.75 0 0 0-.744.757q.004.55.003 1.202v1.364a.75.75 0 0 0 1.5 0V8.748q0-.652-.003-1.213a.75.75 0 0 0-.757-.744m0 9.918a.75.75 0 0 0 .756-.744q.004-.562.003-1.213v-1.366a.75.75 0 0 0-1.5 0v1.364q0 .653-.003 1.202a.75.75 0 0 0 .743.757" clip-rule="evenodd" opacity=".5" class=""></path></svg>
YZ
</button>
<button class="py-2 rounded bg-[#141416] hover:bg-white/10 border border-white/5 text-[10px] flex items-center justify-center gap-1 transition-colors font-geist text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="color: rgb(156, 163, 175); width: 12px; height: 12px;" class="w-[12px] h-[12px]" data-solar="mirror-right-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#9ca3af" d="M22 12.75v-2c0-3.771 0-5.657-1.172-6.828c-1.092-1.093-3.676-1.167-7.078-1.172a.75.75 0 0 0-1.5 0v18a.75.75 0 0 0 1.5 0c3.402-.005 5.986-.079 7.078-1.172C22 18.407 22 16.521 22 12.75" class=""></path><path fill="#9ca3af" fill-rule="evenodd" d="M11.66 2.75a.75.75 0 0 1-.75.75H10q-.653 0-1.202.003a.75.75 0 0 1-.013-1.5Q9.346 2 9.998 2h.911a.75.75 0 0 1 .75.75m0 18a.75.75 0 0 1-.75.75h-.912q-.652 0-1.213-.003a.75.75 0 0 1 .013-1.5Q9.348 20 10 20h.91a.75.75 0 0 1 .75.75M6.628 2.805a.75.75 0 0 1-.494.938c-.321.1-.545.235-.726.416s-.316.405-.416.726A.75.75 0 0 1 3.56 4.44c.16-.515.408-.962.787-1.342s.827-.627 1.342-.787a.75.75 0 0 1 .939.494m0 17.89a.75.75 0 0 1-.939.494a3.2 3.2 0 0 1-1.342-.787a3.2 3.2 0 0 1-.787-1.342a.75.75 0 1 1 1.432-.445c.1.321.235.545.416.726s.405.316.726.416a.75.75 0 0 1 .494.938M4.009 6.791a.75.75 0 0 1 .744.757q-.004.55-.003 1.202v1.364a.75.75 0 0 1-1.5 0V8.748q0-.652.003-1.213a.75.75 0 0 1 .757-.744m0 9.918a.75.75 0 0 1-.756-.744q-.004-.562-.003-1.213v-1.366a.75.75 0 0 1 1.5 0v1.364q0 .653.003 1.202a.75.75 0 0 1-.743.757" clip-rule="evenodd" opacity=".5" class=""></path></svg>
XZ
</button>
</div>
<button class="w-full py-2 rounded bg-[#141416] hover:bg-white/10 border border-white/5 text-[11px] mb-2 transition-colors font-geist text-gray-400">
Plan from selection
</button>
<button class="w-full py-2 rounded bg-[#141416] hover:bg-white/10 border border-white/5 text-[11px] transition-colors font-geist text-gray-400">
Plan from camera
</button>
</div>
</div>
</div>
<!-- /RIGHT SIDEBAR -->
</div>
<!-- /Main Window -->
</div>
</div>