Power Control Card

aartigoyal
Jan 30, 2026 3
Live Preview

Live Editor

<div class="card">
  <!-- LEFT -->
  <div class="left">
    <h2>Power</h2>

    <div class="dropdown">
      <div class="select" onclick="toggleMenu()">
        <span id="current">Exclusive</span>
        ▼
      </div>

      <div class="menu" id="menu">
        <div class="option" onclick="selectPower('Strong',60)">
          <div class="dot"></div> Strong
        </div>
        <div class="option" onclick="selectPower('Moderate',0)">
          <div class="dot"></div> Moderate
        </div>
        <div class="option" onclick="selectPower('Weak',-60)">
          <div class="dot"></div> Weak
        </div>

        <div class="confirm" onclick="confirmPower()">Select to confirm</div>
      </div>
    </div>
  </div>

  <!-- RIGHT -->
  <div class="knob-wrap">
    <!-- SVG KNOB -->
    <svg viewBox="0 0 100 100">
      <!-- outer ring -->
      <circle cx="50" cy="50" r="46" fill="#e5dacb"/>
      <circle cx="50" cy="50" r="42" fill="#f3eadc"/>

      <!-- rotating knob -->
      <g id="knob">
        <circle cx="50" cy="50" r="34" fill="#f1e7da"
          stroke="#d6c7b3" stroke-width="4"/>
        <!-- indicator -->
        <rect x="48" y="10" width="4" height="14" rx="2" fill="#333"/>
        <!-- text -->
        <text x="50" y="55" text-anchor="middle"
          font-size="10" fill="#555" font-weight="600">POWER</text>
      </g>
    </svg>

    <div class="label" id="level">Moderate</div>
  </div>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#1a1a1a;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* card */
.card{
  width:300px;
  height:280px;
  padding:22px;
  border-radius:28px;
  background:#e9dfd2;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  display:grid;
  grid-template-columns:1fr 160px;
  gap:18px;
}

/* left */
.left h2{
  margin:0 0 10px;
  font-size:28px;
}
.dropdown{
  background:#f3eadc;
  border-radius:18px;
  padding:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.select{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-weight:500;
}
.menu{
  margin-top:10px;
  background:#ffe777;
  border-radius:16px;
  padding:12px;
  display:none;
}
.menu.active{display:block}

.option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:10px;
  cursor:pointer;
}
.option:hover{background:rgba(255,255,255,.5)}
.dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#333;
}
.confirm{
  margin-top:10px;
  padding:8px;
  border-radius:999px;
  background:#fff3a6;
  text-align:center;
  cursor:pointer;
  font-size:14px;
}

/* right */
.knob-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
svg{
  width:130px;
  height:130px;
}
#knob{
  transform-origin:50% 50%;
  transition:transform .4s ease;
}
.label{
  margin-top:10px;
  opacity:.6;
}
const menu = document.getElementById("menu");
const knob = document.getElementById("knob");
const level = document.getElementById("level");
const current = document.getElementById("current");

let selected = {name:"Moderate", angle:0};

function toggleMenu(){
  menu.classList.toggle("active");
}

function selectPower(name, angle){
  selected = {name, angle};
  level.textContent = name;
}

function confirmPower(){
  current.textContent = selected.name;
  knob.style.transform = `rotate(${selected.angle}deg)`;
  menu.classList.remove("active");
}
Categories

Power Control Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
