Quartz 4

Rover sidebars

3 min read

Related to Sidebar

Removing these from activity/deploy/roover/page.tsx because the file size is getting too large, and I’m not sure when or if these are going to be placed back.

{/* Left Panel: Rover Mission Info */}
        {/* <div className="flex flex-col justify-between bg-zinc-900/80 rounded-2xl shadow-xl border border-zinc-800 p-6 w-[320px] min-w-[260px] max-w-[340px] h-full text-white">
          <div>
            <h2 className="text-xl font-bold text-[#ff3c1a] mb-2">Current Mission</h2>
            <div className="mb-4">
              <div className="flex items-center gap-2 text-sm font-semibold text-[#ff3c1a]">
                <span className="rounded-full w-2 h-2 bg-[#ff3c1a] inline-block" /> priority
              </div>
              <div className="mt-2 space-y-2">
                <div className="bg-zinc-800/80 rounded-lg p-2 flex flex-col gap-1">
                  <span className="font-bold text-[#ff3c1a]">tech. works <span className="ml-1 text-xs bg-[#ff3c1a] text-white rounded px-2">1</span></span>
                  <span className="text-xs text-zinc-300">5h left</span>
                </div>
                <div className="bg-zinc-800/80 rounded-lg p-2 flex flex-col gap-1">
                  <span className="font-bold text-[#ff3c1a]">change <span className="ml-1 text-xs bg-[#ff3c1a] text-white rounded px-2">5</span></span>
                  <span className="text-xs text-zinc-300">45min left</span>
                </div>
              </div>
            </div>
            <div className="mb-4">
              <h3 className="text-sm font-semibold text-yellow-400 mb-1">System performance</h3>
              <div className="bg-zinc-800/80 rounded-lg p-2 text-xs text-yellow-300">Attention, high energy consumption, complete research to recharge your battery!</div>
            </div>
            <div className="mb-4">
              <h3 className="text-sm font-semibold text-[#18dda1] mb-1">Notification</h3>
              <div className="bg-zinc-800/80 rounded-lg p-2 text-xs text-zinc-200">No dust storm is forecast for the next day.</div>
            </div>
          </div>
          <div className="mt-4">
            <div className="bg-zinc-800/80 rounded-lg p-2 flex items-center gap-2 text-xs text-zinc-400">
              <span>Gallery</span>
              <span className="ml-auto">🖼️</span>
            </div>
            <div className="bg-zinc-800/80 rounded-lg p-2 flex items-center gap-2 text-xs text-zinc-400 mt-2">
              <span>Data from devices</span>
              <span className="ml-auto">🔬</span>
            </div>
          </div>
        </div> */}
        {/* Center Panel: Rover Map */}
 
 
 
{/* Right Panel: Rover Stats */}
 
{/* <div className="flex flex-col justify-between bg-zinc-900/80 rounded-2xl shadow-xl border border-zinc-800 p-6 w-[320px] min-w-[260px] max-w-[340px] h-full text-white">
 
<div>
 
<h2 className="text-xl font-bold text-[#18dda1] mb-2">Rover Stats</h2>
 
<div className="mb-4 grid grid-cols-2 gap-4">
 
<div className="bg-zinc-800/80 rounded-lg p-3 flex flex-col items-center">
 
<span className="text-2xl font-bold text-[#18dda1]">-60°C</span>
 
<span className="text-xs text-zinc-300">Temperature</span>
 
</div>
 
<div className="bg-zinc-800/80 rounded-lg p-3 flex flex-col items-center">
 
<span className="text-2xl font-bold text-yellow-400">0.6%</span>
 
<span className="text-xs text-zinc-300">Battery</span>
 
</div>
 
<div className="bg-zinc-800/80 rounded-lg p-3 flex flex-col items-center">
 
<span className="text-2xl font-bold text-[#18dda1]">100 KM/H</span>
 
<span className="text-xs text-zinc-300">Speed</span>
 
</div>
 
<div className="bg-zinc-800/80 rounded-lg p-3 flex flex-col items-center">
 
<span className="text-2xl font-bold text-[#18dda1]">11 m</span>
 
<span className="text-xs text-zinc-300">Radio Signal</span>
 
</div>
 
</div>
 
<div className="mb-4">
 
<h3 className="text-sm font-semibold text-yellow-400 mb-1">Energy Consumption</h3>
 
<div className="bg-zinc-800/80 rounded-lg p-2 text-xs text-yellow-300">51% solar, 49% consumption</div>
 
</div>
 
{/* <div className="mb-4">
 
<h3 className="text-sm font-semibold text-[#18dda1] mb-1">Set the Coordinates</h3>
 
<div className="bg-zinc-800/80 rounded-lg p-2 text-xs text-zinc-200">12.20°N 104.23°E</div>
 
</div>
 
</div>
 
<div className="mt-4 flex flex-col gap-2">
 
<button className="bg-[#ff3c1a] text-white rounded-lg py-2 font-bold shadow hover:bg-[#ff5c3c] transition">STOP</button>
 
<div className="flex items-center justify-center gap-2 mt-2">
 
<button className="bg-zinc-800/80 rounded-full w-10 h-10 flex items-center justify-center text-white text-xl shadow">↑</button>
 
<button className="bg-zinc-800/80 rounded-full w-10 h-10 flex items-center justify-center text-white text-xl shadow">↓</button>
 
<button className="bg-zinc-800/80 rounded-full w-10 h-10 flex items-center justify-center text-white text-xl shadow">←</button>
 
<button className="bg-zinc-800/80 rounded-full w-10 h-10 flex items-center justify-center text-white text-xl shadow">→</button>
 
</div>
 
</div>
 
</div> */}

Graph View