DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Power Control Card - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Power Control Card
aartigoyal
Jan 30, 2026
3
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<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>
1
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; }
1
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"); }
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!