13 CSS Neumorphism & Soft UI Designs
Smart IoT Control Panel
The first dark-neumorphic widget in the collection — deep charcoal with glowing teal accents. Left column: 3-ring embossed power button that glows on activation, a live status readout, and 4 scene presets. Center: full thermostat arc-dial with SVG tick marks in a teal-to-amber gradient, live ± temperature buttons, 4 mode chips (Cool/Heat/Fan/Auto), and 3 interactive sliders (brightness, fan speed, humidity). Right column: 6 device toggle cards with animated pill switches that emit a teal glow when on. Five draggable mini rotary dials along the bottom row. Rajdhani + Share Tech Mono. Best for smart-home hubs, IoT dashboards, building automation.
The code
<section class="nm-iot" aria-label="Smart IoT control panel">
<div class="card">
<div class="left-col">
<div>
<div class="tag">Power Control</div>
<div class="power-stage">
<div class="power-ring on" data-nm-iot-power>
<div class="power-icon" aria-hidden="true">
<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
<path class="power-arc" d="M 22 8 A 16 16 0 1 1 6 22" stroke-dasharray="70 100"/>
<line class="power-line" x1="22" y1="4" x2="22" y2="22"/>
</svg>
</div>
</div>
<div class="power-status on" data-nm-iot-status>SYSTEM ON</div>
</div>
</div>
<div class="status-bar">
<div class="status-row">
<span class="status-key">Hub Status</span>
<span class="status-dot on" aria-hidden="true"></span>
</div>
<div class="status-row">
<span class="status-key">Devices</span>
<span class="status-val">8 / 10</span>
</div>
<div class="status-row">
<span class="status-key">Network</span>
<span class="status-val">5G ▮▮▮▮</span>
</div>
<div class="status-row">
<span class="status-key">Energy</span>
<span class="status-val">2.4 kW</span>
</div>
</div>
<div>
<div class="tag">Scenes</div>
<div class="scene-grid">
<button type="button" class="scene-btn active" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌅</span>Morning</button>
<button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌇</span>Evening</button>
<button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🎬</span>Movie</button>
<button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌙</span>Sleep</button>
</div>
</div>
</div>
<div class="center-col">
<div>
<div class="tag">Climate Control</div>
<div class="thermo-wrap">
<div class="thermo-ring-wrap">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="nm-iot-tg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#00b5b0"/>
<stop offset="100%" stop-color="#fdcb6e"/>
</linearGradient>
<filter id="nm-iot-glow">
<feGaussianBlur stdDeviation="3" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<circle cx="100" cy="100" r="86" fill="none"
stroke="#2e3a48" stroke-width="12" stroke-linecap="round"
stroke-dasharray="360 100" stroke-dashoffset="-50"/>
<circle cx="100" cy="100" r="86" fill="none"
stroke="url(#nm-iot-tg)" stroke-width="12" stroke-linecap="round"
stroke-dasharray="196 264" stroke-dashoffset="-50"
filter="url(#nm-iot-glow)" data-nm-iot-thermo-arc/>
<g data-nm-iot-ticks opacity="0.4"></g>
</svg>
<div class="thermo-center">
<div class="temp-big" data-nm-iot-temp>22<span class="temp-unit">°</span></div>
<div class="temp-label">Living Room</div>
</div>
</div>
<div class="temp-adj">
<button type="button" class="adj" data-nm-iot-temp-adj="-1" aria-label="Decrease temperature">−</button>
<button type="button" class="adj" data-nm-iot-temp-adj="1" aria-label="Increase temperature">+</button>
</div>
<div class="mode-row">
<button type="button" class="mode-chip active" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">❄️</span>Cool</button>
<button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">🔥</span>Heat</button>
<button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">💨</span>Fan</button>
<button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">⚡</span>Auto</button>
</div>
</div>
</div>
<div class="sliders-wrap">
<div class="slider-row">
<div class="slider-header">
<span class="slider-name">☀ Brightness</span>
<span class="slider-value" data-nm-iot-slider-val="bright">78%</span>
</div>
<div class="slider-track">
<div class="slider-fill" style="width:78%" data-nm-iot-slider-fill="bright"><div class="slider-glow"></div></div>
<div class="slider-thumb" data-nm-iot-slider-thumb="bright" style="left:calc(78% - 10px)"></div>
<input type="range" class="hslider" min="0" max="100" value="78" data-nm-iot-slider="bright" data-suffix="%" aria-label="Brightness" />
</div>
</div>
<div class="slider-row">
<div class="slider-header">
<span class="slider-name">🌀 Fan Speed</span>
<span class="slider-value" data-nm-iot-slider-val="fan">3 / 5</span>
</div>
<div class="slider-track">
<div class="slider-fill" style="width:60%" data-nm-iot-slider-fill="fan"><div class="slider-glow"></div></div>
<div class="slider-thumb" data-nm-iot-slider-thumb="fan" style="left:calc(60% - 10px)"></div>
<input type="range" class="hslider" min="1" max="5" value="3" data-nm-iot-slider="fan" data-suffix=" / 5" aria-label="Fan speed" />
</div>
</div>
<div class="slider-row">
<div class="slider-header">
<span class="slider-name">💧 Humidity</span>
<span class="slider-value" data-nm-iot-slider-val="hum">55%</span>
</div>
<div class="slider-track">
<div class="slider-fill" style="width:55%" data-nm-iot-slider-fill="hum"><div class="slider-glow"></div></div>
<div class="slider-thumb" data-nm-iot-slider-thumb="hum" style="left:calc(55% - 10px)"></div>
<input type="range" class="hslider" min="0" max="100" value="55" data-nm-iot-slider="hum" data-suffix="%" aria-label="Humidity" />
</div>
</div>
</div>
</div>
<div class="right-col">
<div class="tag">Devices</div>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">💡</span>
<span class="toggle-info">
<span class="toggle-device">Ceiling Light</span>
<span class="toggle-room">Living Room</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🌡️</span>
<span class="toggle-info">
<span class="toggle-device">Thermostat</span>
<span class="toggle-room">Whole Home</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🔊</span>
<span class="toggle-info">
<span class="toggle-device">Speakers</span>
<span class="toggle-room">Kitchen</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🔒</span>
<span class="toggle-info">
<span class="toggle-device">Front Door</span>
<span class="toggle-room">Entrance</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🌿</span>
<span class="toggle-info">
<span class="toggle-device">Air Purifier</span>
<span class="toggle-room">Bedroom</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">📷</span>
<span class="toggle-info">
<span class="toggle-device">Security Cam</span>
<span class="toggle-room">Garage</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
</div>
<div class="bottom-row" data-nm-iot-dials></div>
</div>
</section> <section class="nm-iot" aria-label="Smart IoT control panel">
<div class="card">
<div class="left-col">
<div>
<div class="tag">Power Control</div>
<div class="power-stage">
<div class="power-ring on" data-nm-iot-power>
<div class="power-icon" aria-hidden="true">
<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
<path class="power-arc" d="M 22 8 A 16 16 0 1 1 6 22" stroke-dasharray="70 100"/>
<line class="power-line" x1="22" y1="4" x2="22" y2="22"/>
</svg>
</div>
</div>
<div class="power-status on" data-nm-iot-status>SYSTEM ON</div>
</div>
</div>
<div class="status-bar">
<div class="status-row">
<span class="status-key">Hub Status</span>
<span class="status-dot on" aria-hidden="true"></span>
</div>
<div class="status-row">
<span class="status-key">Devices</span>
<span class="status-val">8 / 10</span>
</div>
<div class="status-row">
<span class="status-key">Network</span>
<span class="status-val">5G ▮▮▮▮</span>
</div>
<div class="status-row">
<span class="status-key">Energy</span>
<span class="status-val">2.4 kW</span>
</div>
</div>
<div>
<div class="tag">Scenes</div>
<div class="scene-grid">
<button type="button" class="scene-btn active" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌅</span>Morning</button>
<button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌇</span>Evening</button>
<button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🎬</span>Movie</button>
<button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌙</span>Sleep</button>
</div>
</div>
</div>
<div class="center-col">
<div>
<div class="tag">Climate Control</div>
<div class="thermo-wrap">
<div class="thermo-ring-wrap">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="nm-iot-tg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#00b5b0"/>
<stop offset="100%" stop-color="#fdcb6e"/>
</linearGradient>
<filter id="nm-iot-glow">
<feGaussianBlur stdDeviation="3" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<circle cx="100" cy="100" r="86" fill="none"
stroke="#2e3a48" stroke-width="12" stroke-linecap="round"
stroke-dasharray="360 100" stroke-dashoffset="-50"/>
<circle cx="100" cy="100" r="86" fill="none"
stroke="url(#nm-iot-tg)" stroke-width="12" stroke-linecap="round"
stroke-dasharray="196 264" stroke-dashoffset="-50"
filter="url(#nm-iot-glow)" data-nm-iot-thermo-arc/>
<g data-nm-iot-ticks opacity="0.4"></g>
</svg>
<div class="thermo-center">
<div class="temp-big" data-nm-iot-temp>22<span class="temp-unit">°</span></div>
<div class="temp-label">Living Room</div>
</div>
</div>
<div class="temp-adj">
<button type="button" class="adj" data-nm-iot-temp-adj="-1" aria-label="Decrease temperature">−</button>
<button type="button" class="adj" data-nm-iot-temp-adj="1" aria-label="Increase temperature">+</button>
</div>
<div class="mode-row">
<button type="button" class="mode-chip active" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">❄️</span>Cool</button>
<button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">🔥</span>Heat</button>
<button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">💨</span>Fan</button>
<button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">⚡</span>Auto</button>
</div>
</div>
</div>
<div class="sliders-wrap">
<div class="slider-row">
<div class="slider-header">
<span class="slider-name">☀ Brightness</span>
<span class="slider-value" data-nm-iot-slider-val="bright">78%</span>
</div>
<div class="slider-track">
<div class="slider-fill" style="width:78%" data-nm-iot-slider-fill="bright"><div class="slider-glow"></div></div>
<div class="slider-thumb" data-nm-iot-slider-thumb="bright" style="left:calc(78% - 10px)"></div>
<input type="range" class="hslider" min="0" max="100" value="78" data-nm-iot-slider="bright" data-suffix="%" aria-label="Brightness" />
</div>
</div>
<div class="slider-row">
<div class="slider-header">
<span class="slider-name">🌀 Fan Speed</span>
<span class="slider-value" data-nm-iot-slider-val="fan">3 / 5</span>
</div>
<div class="slider-track">
<div class="slider-fill" style="width:60%" data-nm-iot-slider-fill="fan"><div class="slider-glow"></div></div>
<div class="slider-thumb" data-nm-iot-slider-thumb="fan" style="left:calc(60% - 10px)"></div>
<input type="range" class="hslider" min="1" max="5" value="3" data-nm-iot-slider="fan" data-suffix=" / 5" aria-label="Fan speed" />
</div>
</div>
<div class="slider-row">
<div class="slider-header">
<span class="slider-name">💧 Humidity</span>
<span class="slider-value" data-nm-iot-slider-val="hum">55%</span>
</div>
<div class="slider-track">
<div class="slider-fill" style="width:55%" data-nm-iot-slider-fill="hum"><div class="slider-glow"></div></div>
<div class="slider-thumb" data-nm-iot-slider-thumb="hum" style="left:calc(55% - 10px)"></div>
<input type="range" class="hslider" min="0" max="100" value="55" data-nm-iot-slider="hum" data-suffix="%" aria-label="Humidity" />
</div>
</div>
</div>
</div>
<div class="right-col">
<div class="tag">Devices</div>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">💡</span>
<span class="toggle-info">
<span class="toggle-device">Ceiling Light</span>
<span class="toggle-room">Living Room</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🌡️</span>
<span class="toggle-info">
<span class="toggle-device">Thermostat</span>
<span class="toggle-room">Whole Home</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🔊</span>
<span class="toggle-info">
<span class="toggle-device">Speakers</span>
<span class="toggle-room">Kitchen</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🔒</span>
<span class="toggle-info">
<span class="toggle-device">Front Door</span>
<span class="toggle-room">Entrance</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">🌿</span>
<span class="toggle-info">
<span class="toggle-device">Air Purifier</span>
<span class="toggle-room">Bedroom</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
<button type="button" class="toggle-card on" data-nm-iot-device>
<span class="toggle-card-icon" aria-hidden="true">📷</span>
<span class="toggle-info">
<span class="toggle-device">Security Cam</span>
<span class="toggle-room">Garage</span>
</span>
<span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
</button>
</div>
<div class="bottom-row" data-nm-iot-dials></div>
</div>
</section>/* ─── 07 Smart IoT Control Panel — dark teal smart-home hub ──────── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
.nm-iot {
--nm-iot-bg: #1e2530;
--nm-iot-sd: #101520;
--nm-iot-sl: #2e3a48;
--nm-iot-ib: #1a2028;
--nm-iot-t1: #00cec9;
--nm-iot-t2: #00b5b0;
--nm-iot-amb: #fdcb6e;
--nm-iot-grn: #55efc4;
--nm-iot-txt: #7a90a8;
--nm-iot-t2x: #c0d8f0;
--nm-iot-neu: 10px 10px 24px var(--nm-iot-sd), -8px -8px 20px var(--nm-iot-sl);
--nm-iot-neu-in: inset 8px 8px 18px var(--nm-iot-sd), inset -6px -6px 14px var(--nm-iot-sl);
--nm-iot-neu-sm: 6px 6px 14px var(--nm-iot-sd), -5px -5px 12px var(--nm-iot-sl);
--nm-iot-neu-sm-in: inset 5px 5px 10px var(--nm-iot-sd), inset -4px -4px 8px var(--nm-iot-sl);
position: relative;
width: 100%;
min-height: 880px;
background: var(--nm-iot-bg);
font-family: 'Rajdhani', system-ui, sans-serif;
color: var(--nm-iot-txt);
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
overflow: hidden;
box-sizing: border-box;
}
.nm-iot *,
.nm-iot *::before,
.nm-iot *::after { box-sizing: border-box; }
.nm-iot .card {
position: relative;
width: 100%;
max-width: 860px;
background: var(--nm-iot-bg);
border-radius: 40px;
padding: 40px 36px;
box-shadow: 20px 20px 50px var(--nm-iot-sd), -16px -16px 40px var(--nm-iot-sl);
display: grid;
grid-template-columns: 220px 1fr 200px;
grid-template-rows: auto auto;
gap: 24px;
}
.nm-iot .tag {
font-size: 9px;
font-weight: 600;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--nm-iot-txt);
opacity: 0.45;
margin-bottom: 14px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
}
/* Left column */
.nm-iot .left-col {
display: flex;
flex-direction: column;
gap: 20px;
grid-row: 1 / 3;
}
.nm-iot .power-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.nm-iot .power-ring {
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu);
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.3s ease;
border: 0;
padding: 0;
}
.nm-iot .power-ring::before {
content: '';
position: absolute;
inset: 10px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm-in);
}
.nm-iot .power-ring::after {
content: '';
position: absolute;
inset: 20px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
}
.nm-iot .power-icon {
position: relative;
z-index: 10;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.nm-iot .power-icon svg { width: 100%; height: 100%; }
.nm-iot .power-ring.on { box-shadow: var(--nm-iot-neu-in); }
.nm-iot .power-ring.on .power-arc { stroke: var(--nm-iot-t1); filter: drop-shadow(0 0 8px var(--nm-iot-t1)); }
.nm-iot .power-ring.on .power-line { stroke: var(--nm-iot-t1); filter: drop-shadow(0 0 8px var(--nm-iot-t1)); }
.nm-iot .power-arc {
stroke: var(--nm-iot-txt);
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
transition: stroke 0.4s, filter 0.4s;
}
.nm-iot .power-line {
stroke: var(--nm-iot-txt);
stroke-width: 2.5;
stroke-linecap: round;
transition: stroke 0.4s, filter 0.4s;
}
.nm-iot .power-status {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--nm-iot-txt);
transition: color 0.3s;
}
.nm-iot .power-status.on {
color: var(--nm-iot-t1);
text-shadow: 0 0 10px var(--nm-iot-t1);
}
.nm-iot .status-bar {
width: 100%;
background: var(--nm-iot-ib);
border-radius: 12px;
padding: 14px;
box-shadow: var(--nm-iot-neu-in);
display: flex;
flex-direction: column;
gap: 8px;
}
.nm-iot .status-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.nm-iot .status-key { font-size: 11px; color: var(--nm-iot-txt); letter-spacing: 0.5px; }
.nm-iot .status-val {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--nm-iot-t2x);
}
.nm-iot .status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: var(--nm-iot-txt);
}
.nm-iot .status-dot.on {
background: var(--nm-iot-grn);
box-shadow: 0 0 6px var(--nm-iot-grn);
}
.nm-iot .scene-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nm-iot .scene-btn {
background: var(--nm-iot-bg);
border: none;
cursor: pointer;
border-radius: 14px;
padding: 14px 10px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.2s ease;
font-family: 'Rajdhani', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--nm-iot-txt);
text-transform: uppercase;
}
.nm-iot .scene-btn.active {
box-shadow: var(--nm-iot-neu-sm-in);
color: var(--nm-iot-t1);
}
.nm-iot .scene-icon { font-size: 20px; line-height: 1; }
/* Center column */
.nm-iot .center-col {
display: flex;
flex-direction: column;
gap: 22px;
}
.nm-iot .thermo-wrap {
background: var(--nm-iot-bg);
border-radius: 28px;
padding: 26px 20px 20px;
box-shadow: var(--nm-iot-neu);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.nm-iot .thermo-ring-wrap {
position: relative;
width: 200px;
height: 200px;
}
.nm-iot .thermo-ring-wrap svg {
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
.nm-iot .thermo-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
.nm-iot .temp-big {
font-size: 54px;
font-weight: 700;
color: var(--nm-iot-t2x);
line-height: 1;
letter-spacing: -2px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.nm-iot .temp-unit { font-size: 20px; color: var(--nm-iot-t1); }
.nm-iot .temp-label {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--nm-iot-txt);
margin-top: 4px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.nm-iot .temp-adj { display: flex; gap: 14px; }
.nm-iot .adj {
width: 44px;
height: 44px;
background: var(--nm-iot-bg);
border: none;
cursor: pointer;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 300;
color: var(--nm-iot-t2x);
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.15s;
font-family: 'Rajdhani', system-ui, sans-serif;
}
.nm-iot .adj:active {
box-shadow: var(--nm-iot-neu-sm-in);
color: var(--nm-iot-t1);
}
.nm-iot .mode-row { display: flex; gap: 6px; width: 100%; }
.nm-iot .mode-chip {
flex: 1;
background: var(--nm-iot-bg);
border: none;
cursor: pointer;
border-radius: 12px;
padding: 10px 4px;
font-family: 'Rajdhani', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--nm-iot-txt);
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.nm-iot .mode-chip.active {
box-shadow: var(--nm-iot-neu-sm-in);
color: var(--nm-iot-t1);
}
.nm-iot .mode-emoji { font-size: 14px; }
/* Sliders */
.nm-iot .sliders-wrap {
display: flex;
flex-direction: column;
gap: 14px;
}
.nm-iot .slider-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.nm-iot .slider-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.nm-iot .slider-name {
font-size: 12px;
font-weight: 600;
color: var(--nm-iot-t2x);
letter-spacing: 0.5px;
}
.nm-iot .slider-value {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--nm-iot-t1);
}
.nm-iot .slider-track {
width: 100%;
height: 8px;
border-radius: 4px;
background: var(--nm-iot-ib);
box-shadow: var(--nm-iot-neu-sm-in);
position: relative;
cursor: pointer;
}
.nm-iot .slider-fill {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, var(--nm-iot-t2), var(--nm-iot-t1));
position: relative;
}
.nm-iot .slider-glow {
position: absolute;
inset: -3px 0;
border-radius: 6px;
background: inherit;
filter: blur(5px);
opacity: 0.4;
}
.nm-iot .slider-thumb {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
cursor: grab;
}
.nm-iot .slider-thumb::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--nm-iot-t1);
box-shadow: 0 0 6px var(--nm-iot-t1);
}
.nm-iot .hslider {
position: absolute;
inset: -6px 0;
width: 100%;
height: 20px;
opacity: 0;
cursor: pointer;
z-index: 10;
margin: 0;
}
/* Right column */
.nm-iot .right-col {
display: flex;
flex-direction: column;
gap: 12px;
grid-row: 1 / 3;
}
.nm-iot .toggle-card {
background: var(--nm-iot-bg);
border: 0;
border-radius: 20px;
padding: 14px 12px;
box-shadow: var(--nm-iot-neu-sm);
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
text-align: left;
}
.nm-iot .toggle-card.on { box-shadow: var(--nm-iot-neu-sm-in); }
.nm-iot .toggle-card-icon {
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--nm-iot-bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.3s;
flex-shrink: 0;
}
.nm-iot .toggle-card.on .toggle-card-icon {
box-shadow: var(--nm-iot-neu-sm-in);
filter: drop-shadow(0 0 6px var(--nm-iot-t1));
}
.nm-iot .toggle-info {
flex: 1;
display: flex;
flex-direction: column;
}
.nm-iot .toggle-device {
font-size: 13px;
font-weight: 600;
color: var(--nm-iot-t2x);
}
.nm-iot .toggle-room {
font-size: 10px;
color: var(--nm-iot-txt);
margin-top: 2px;
letter-spacing: 0.3px;
}
.nm-iot .pill-sw {
width: 44px;
height: 24px;
border-radius: 12px;
background: var(--nm-iot-ib);
box-shadow: var(--nm-iot-neu-sm-in);
position: relative;
flex-shrink: 0;
transition: all 0.3s;
display: inline-block;
}
.nm-iot .pill-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nm-iot .toggle-card.on .pill-sw { background: rgba(0, 206, 201, 0.12); }
.nm-iot .toggle-card.on .pill-thumb {
left: 23px;
background: var(--nm-iot-t1);
box-shadow: 0 0 8px var(--nm-iot-t1), 3px 3px 6px var(--nm-iot-sd);
}
/* Bottom: mini dials */
.nm-iot .bottom-row {
grid-column: 2 / 3;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.nm-iot .mini-dial-group {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.nm-iot .mini-dial {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
position: relative;
cursor: grab;
user-select: none;
}
.nm-iot .mini-dial:active { cursor: grabbing; }
.nm-iot .mini-dial-inner {
position: absolute;
inset: 10px;
border-radius: 50%;
background: var(--nm-iot-ib);
box-shadow: var(--nm-iot-neu-sm-in);
}
.nm-iot .mini-dial-dot {
position: absolute;
top: 8px;
left: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--nm-iot-t1);
box-shadow: 0 0 6px var(--nm-iot-t1);
transform: translateX(-50%);
transform-origin: 2.5px 24px;
}
.nm-iot .mini-dial-lbl {
font-size: 10px;
font-weight: 600;
color: var(--nm-iot-txt);
letter-spacing: 1px;
text-transform: uppercase;
}
.nm-iot .mini-dial-val {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--nm-iot-t1);
margin-top: -4px;
}
@media (max-width: 880px) {
.nm-iot .card {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.nm-iot .left-col,
.nm-iot .right-col,
.nm-iot .bottom-row { grid-row: auto; grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
.nm-iot .power-ring,
.nm-iot .power-arc,
.nm-iot .power-line,
.nm-iot .pill-thumb,
.nm-iot .toggle-card-icon { transition: none; }
} /* ─── 07 Smart IoT Control Panel — dark teal smart-home hub ──────── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
.nm-iot {
--nm-iot-bg: #1e2530;
--nm-iot-sd: #101520;
--nm-iot-sl: #2e3a48;
--nm-iot-ib: #1a2028;
--nm-iot-t1: #00cec9;
--nm-iot-t2: #00b5b0;
--nm-iot-amb: #fdcb6e;
--nm-iot-grn: #55efc4;
--nm-iot-txt: #7a90a8;
--nm-iot-t2x: #c0d8f0;
--nm-iot-neu: 10px 10px 24px var(--nm-iot-sd), -8px -8px 20px var(--nm-iot-sl);
--nm-iot-neu-in: inset 8px 8px 18px var(--nm-iot-sd), inset -6px -6px 14px var(--nm-iot-sl);
--nm-iot-neu-sm: 6px 6px 14px var(--nm-iot-sd), -5px -5px 12px var(--nm-iot-sl);
--nm-iot-neu-sm-in: inset 5px 5px 10px var(--nm-iot-sd), inset -4px -4px 8px var(--nm-iot-sl);
position: relative;
width: 100%;
min-height: 880px;
background: var(--nm-iot-bg);
font-family: 'Rajdhani', system-ui, sans-serif;
color: var(--nm-iot-txt);
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
overflow: hidden;
box-sizing: border-box;
}
.nm-iot *,
.nm-iot *::before,
.nm-iot *::after { box-sizing: border-box; }
.nm-iot .card {
position: relative;
width: 100%;
max-width: 860px;
background: var(--nm-iot-bg);
border-radius: 40px;
padding: 40px 36px;
box-shadow: 20px 20px 50px var(--nm-iot-sd), -16px -16px 40px var(--nm-iot-sl);
display: grid;
grid-template-columns: 220px 1fr 200px;
grid-template-rows: auto auto;
gap: 24px;
}
.nm-iot .tag {
font-size: 9px;
font-weight: 600;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--nm-iot-txt);
opacity: 0.45;
margin-bottom: 14px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
}
/* Left column */
.nm-iot .left-col {
display: flex;
flex-direction: column;
gap: 20px;
grid-row: 1 / 3;
}
.nm-iot .power-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.nm-iot .power-ring {
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu);
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.3s ease;
border: 0;
padding: 0;
}
.nm-iot .power-ring::before {
content: '';
position: absolute;
inset: 10px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm-in);
}
.nm-iot .power-ring::after {
content: '';
position: absolute;
inset: 20px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
}
.nm-iot .power-icon {
position: relative;
z-index: 10;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.nm-iot .power-icon svg { width: 100%; height: 100%; }
.nm-iot .power-ring.on { box-shadow: var(--nm-iot-neu-in); }
.nm-iot .power-ring.on .power-arc { stroke: var(--nm-iot-t1); filter: drop-shadow(0 0 8px var(--nm-iot-t1)); }
.nm-iot .power-ring.on .power-line { stroke: var(--nm-iot-t1); filter: drop-shadow(0 0 8px var(--nm-iot-t1)); }
.nm-iot .power-arc {
stroke: var(--nm-iot-txt);
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
transition: stroke 0.4s, filter 0.4s;
}
.nm-iot .power-line {
stroke: var(--nm-iot-txt);
stroke-width: 2.5;
stroke-linecap: round;
transition: stroke 0.4s, filter 0.4s;
}
.nm-iot .power-status {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--nm-iot-txt);
transition: color 0.3s;
}
.nm-iot .power-status.on {
color: var(--nm-iot-t1);
text-shadow: 0 0 10px var(--nm-iot-t1);
}
.nm-iot .status-bar {
width: 100%;
background: var(--nm-iot-ib);
border-radius: 12px;
padding: 14px;
box-shadow: var(--nm-iot-neu-in);
display: flex;
flex-direction: column;
gap: 8px;
}
.nm-iot .status-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.nm-iot .status-key { font-size: 11px; color: var(--nm-iot-txt); letter-spacing: 0.5px; }
.nm-iot .status-val {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--nm-iot-t2x);
}
.nm-iot .status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: var(--nm-iot-txt);
}
.nm-iot .status-dot.on {
background: var(--nm-iot-grn);
box-shadow: 0 0 6px var(--nm-iot-grn);
}
.nm-iot .scene-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nm-iot .scene-btn {
background: var(--nm-iot-bg);
border: none;
cursor: pointer;
border-radius: 14px;
padding: 14px 10px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.2s ease;
font-family: 'Rajdhani', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--nm-iot-txt);
text-transform: uppercase;
}
.nm-iot .scene-btn.active {
box-shadow: var(--nm-iot-neu-sm-in);
color: var(--nm-iot-t1);
}
.nm-iot .scene-icon { font-size: 20px; line-height: 1; }
/* Center column */
.nm-iot .center-col {
display: flex;
flex-direction: column;
gap: 22px;
}
.nm-iot .thermo-wrap {
background: var(--nm-iot-bg);
border-radius: 28px;
padding: 26px 20px 20px;
box-shadow: var(--nm-iot-neu);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.nm-iot .thermo-ring-wrap {
position: relative;
width: 200px;
height: 200px;
}
.nm-iot .thermo-ring-wrap svg {
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
.nm-iot .thermo-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
.nm-iot .temp-big {
font-size: 54px;
font-weight: 700;
color: var(--nm-iot-t2x);
line-height: 1;
letter-spacing: -2px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.nm-iot .temp-unit { font-size: 20px; color: var(--nm-iot-t1); }
.nm-iot .temp-label {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--nm-iot-txt);
margin-top: 4px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.nm-iot .temp-adj { display: flex; gap: 14px; }
.nm-iot .adj {
width: 44px;
height: 44px;
background: var(--nm-iot-bg);
border: none;
cursor: pointer;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 300;
color: var(--nm-iot-t2x);
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.15s;
font-family: 'Rajdhani', system-ui, sans-serif;
}
.nm-iot .adj:active {
box-shadow: var(--nm-iot-neu-sm-in);
color: var(--nm-iot-t1);
}
.nm-iot .mode-row { display: flex; gap: 6px; width: 100%; }
.nm-iot .mode-chip {
flex: 1;
background: var(--nm-iot-bg);
border: none;
cursor: pointer;
border-radius: 12px;
padding: 10px 4px;
font-family: 'Rajdhani', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--nm-iot-txt);
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.nm-iot .mode-chip.active {
box-shadow: var(--nm-iot-neu-sm-in);
color: var(--nm-iot-t1);
}
.nm-iot .mode-emoji { font-size: 14px; }
/* Sliders */
.nm-iot .sliders-wrap {
display: flex;
flex-direction: column;
gap: 14px;
}
.nm-iot .slider-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.nm-iot .slider-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.nm-iot .slider-name {
font-size: 12px;
font-weight: 600;
color: var(--nm-iot-t2x);
letter-spacing: 0.5px;
}
.nm-iot .slider-value {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--nm-iot-t1);
}
.nm-iot .slider-track {
width: 100%;
height: 8px;
border-radius: 4px;
background: var(--nm-iot-ib);
box-shadow: var(--nm-iot-neu-sm-in);
position: relative;
cursor: pointer;
}
.nm-iot .slider-fill {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, var(--nm-iot-t2), var(--nm-iot-t1));
position: relative;
}
.nm-iot .slider-glow {
position: absolute;
inset: -3px 0;
border-radius: 6px;
background: inherit;
filter: blur(5px);
opacity: 0.4;
}
.nm-iot .slider-thumb {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
cursor: grab;
}
.nm-iot .slider-thumb::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--nm-iot-t1);
box-shadow: 0 0 6px var(--nm-iot-t1);
}
.nm-iot .hslider {
position: absolute;
inset: -6px 0;
width: 100%;
height: 20px;
opacity: 0;
cursor: pointer;
z-index: 10;
margin: 0;
}
/* Right column */
.nm-iot .right-col {
display: flex;
flex-direction: column;
gap: 12px;
grid-row: 1 / 3;
}
.nm-iot .toggle-card {
background: var(--nm-iot-bg);
border: 0;
border-radius: 20px;
padding: 14px 12px;
box-shadow: var(--nm-iot-neu-sm);
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
text-align: left;
}
.nm-iot .toggle-card.on { box-shadow: var(--nm-iot-neu-sm-in); }
.nm-iot .toggle-card-icon {
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--nm-iot-bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.3s;
flex-shrink: 0;
}
.nm-iot .toggle-card.on .toggle-card-icon {
box-shadow: var(--nm-iot-neu-sm-in);
filter: drop-shadow(0 0 6px var(--nm-iot-t1));
}
.nm-iot .toggle-info {
flex: 1;
display: flex;
flex-direction: column;
}
.nm-iot .toggle-device {
font-size: 13px;
font-weight: 600;
color: var(--nm-iot-t2x);
}
.nm-iot .toggle-room {
font-size: 10px;
color: var(--nm-iot-txt);
margin-top: 2px;
letter-spacing: 0.3px;
}
.nm-iot .pill-sw {
width: 44px;
height: 24px;
border-radius: 12px;
background: var(--nm-iot-ib);
box-shadow: var(--nm-iot-neu-sm-in);
position: relative;
flex-shrink: 0;
transition: all 0.3s;
display: inline-block;
}
.nm-iot .pill-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nm-iot .toggle-card.on .pill-sw { background: rgba(0, 206, 201, 0.12); }
.nm-iot .toggle-card.on .pill-thumb {
left: 23px;
background: var(--nm-iot-t1);
box-shadow: 0 0 8px var(--nm-iot-t1), 3px 3px 6px var(--nm-iot-sd);
}
/* Bottom: mini dials */
.nm-iot .bottom-row {
grid-column: 2 / 3;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.nm-iot .mini-dial-group {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.nm-iot .mini-dial {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--nm-iot-bg);
box-shadow: var(--nm-iot-neu-sm);
position: relative;
cursor: grab;
user-select: none;
}
.nm-iot .mini-dial:active { cursor: grabbing; }
.nm-iot .mini-dial-inner {
position: absolute;
inset: 10px;
border-radius: 50%;
background: var(--nm-iot-ib);
box-shadow: var(--nm-iot-neu-sm-in);
}
.nm-iot .mini-dial-dot {
position: absolute;
top: 8px;
left: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--nm-iot-t1);
box-shadow: 0 0 6px var(--nm-iot-t1);
transform: translateX(-50%);
transform-origin: 2.5px 24px;
}
.nm-iot .mini-dial-lbl {
font-size: 10px;
font-weight: 600;
color: var(--nm-iot-txt);
letter-spacing: 1px;
text-transform: uppercase;
}
.nm-iot .mini-dial-val {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--nm-iot-t1);
margin-top: -4px;
}
@media (max-width: 880px) {
.nm-iot .card {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.nm-iot .left-col,
.nm-iot .right-col,
.nm-iot .bottom-row { grid-row: auto; grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
.nm-iot .power-ring,
.nm-iot .power-arc,
.nm-iot .power-line,
.nm-iot .pill-thumb,
.nm-iot .toggle-card-icon { transition: none; }
}(() => {
const root = document.querySelector('.nm-iot');
if (!root) return;
// Power
const powerRing = root.querySelector('[data-nm-iot-power]');
const status = root.querySelector('[data-nm-iot-status]');
if (powerRing) powerRing.addEventListener('click', () => {
const on = !powerRing.classList.contains('on');
powerRing.classList.toggle('on', on);
status?.classList.toggle('on', on);
if (status) status.textContent = on ? 'SYSTEM ON' : 'STANDBY';
});
// Temp dial
let temp = 22;
const tempEl = root.querySelector('[data-nm-iot-temp]');
const arc = root.querySelector('[data-nm-iot-thermo-arc]');
root.querySelectorAll('[data-nm-iot-temp-adj]').forEach(btn => {
btn.addEventListener('click', () => {
const d = parseInt(btn.dataset.nmIotTempAdj, 10) || 0;
temp = Math.max(16, Math.min(32, temp + d));
if (tempEl) tempEl.innerHTML = temp + '<span class="temp-unit">°</span>';
const pct = (temp - 16) / 16;
if (arc) arc.setAttribute('stroke-dasharray', (pct * 260) + ' 360');
});
});
// Mode chips
root.querySelectorAll('[data-nm-iot-mode]').forEach(chip => {
chip.addEventListener('click', () => {
root.querySelectorAll('[data-nm-iot-mode]').forEach(c => c.classList.remove('active'));
chip.classList.add('active');
});
});
// Scene buttons
root.querySelectorAll('[data-nm-iot-scene]').forEach(btn => {
btn.addEventListener('click', () => {
root.querySelectorAll('[data-nm-iot-scene]').forEach(s => s.classList.remove('active'));
btn.classList.add('active');
});
});
// Sliders
root.querySelectorAll('[data-nm-iot-slider]').forEach(input => {
const key = input.dataset.nmIotSlider;
const suffix = input.dataset.suffix || '';
const fill = root.querySelector('[data-nm-iot-slider-fill="' + key + '"]');
const thumb = root.querySelector('[data-nm-iot-slider-thumb="' + key + '"]');
const val = root.querySelector('[data-nm-iot-slider-val="' + key + '"]');
input.addEventListener('input', () => {
const pct = (input.value - input.min) / (input.max - input.min) * 100;
if (fill) fill.style.width = pct + '%';
if (thumb) thumb.style.left = 'calc(' + pct + '% - 10px)';
if (val) val.textContent = parseInt(input.value, 10) + suffix;
});
});
// Tick marks on thermostat
const ticks = root.querySelector('[data-nm-iot-ticks]');
if (ticks && !ticks.children.length) {
const svgNS = 'http://www.w3.org/2000/svg';
for (let t = 0; t <= 20; t++) {
const a = Math.PI * (-225 + t * 13.5) / 180;
const r1 = 96, r2 = t % 5 === 0 ? 88 : 92;
const line = document.createElementNS(svgNS, 'line');
line.setAttribute('x1', String(100 + r1 * Math.cos(a)));
line.setAttribute('y1', String(100 + r1 * Math.sin(a)));
line.setAttribute('x2', String(100 + r2 * Math.cos(a)));
line.setAttribute('y2', String(100 + r2 * Math.sin(a)));
line.setAttribute('stroke', t / 20 < 0.68 ? '#00cec9' : '#2e3a48');
line.setAttribute('stroke-width', t % 5 === 0 ? '2.5' : '1.5');
line.setAttribute('stroke-linecap', 'round');
ticks.appendChild(line);
}
}
// Device toggles
root.querySelectorAll('[data-nm-iot-device]').forEach(card => {
card.addEventListener('click', () => card.classList.toggle('on'));
});
// Mini dials — render + drag
const dialSpec = [
{ lbl: 'Color Temp', start: -60, min: 2700, max: 6500, unit: 'K' },
{ lbl: 'Ambience', start: 30, min: 0, max: 100, unit: '%' },
{ lbl: 'Eco Limit', start: -10, min: 0, max: 100, unit: '%' },
{ lbl: 'Sleep Delay', start: 80, min: 0, max: 60, unit: 'm' },
{ lbl: 'Noise Gate', start: -90, min: 20, max: 80, unit: 'dB' },
];
const dialsRow = root.querySelector('[data-nm-iot-dials]');
dialSpec.forEach(({ lbl, start, min, max, unit }) => {
const pct = (start + 140) / 280;
const initVal = Math.round(min + pct * (max - min));
const g = document.createElement('div');
g.className = 'mini-dial-group';
g.innerHTML =
'<div class="mini-dial">' +
' <div class="mini-dial-inner"></div>' +
' <div class="mini-dial-dot" style="transform:translateX(-50%) rotate(' + start + 'deg)"></div>' +
'</div>' +
'<div class="mini-dial-lbl">' + lbl + '</div>' +
'<div class="mini-dial-val">' + initVal + unit + '</div>';
dialsRow.appendChild(g);
const dial = g.querySelector('.mini-dial');
const dot = g.querySelector('.mini-dial-dot');
const valEl = g.querySelector('.mini-dial-val');
let angle = start, dragging = false, sy = 0, sa = start;
dial.addEventListener('mousedown', e => {
dragging = true; sy = e.clientY; sa = angle;
document.body.style.cursor = 'grabbing';
e.preventDefault();
});
document.addEventListener('mousemove', e => {
if (!dragging) return;
angle = Math.max(-140, Math.min(140, sa - (e.clientY - sy) * 1.5));
dot.style.transform = 'translateX(-50%) rotate(' + angle + 'deg)';
const p = (angle + 140) / 280;
const v = Math.round(min + p * (max - min));
valEl.textContent = v + unit;
});
document.addEventListener('mouseup', () => {
if (dragging) { dragging = false; document.body.style.cursor = ''; }
});
});
})(); (() => {
const root = document.querySelector('.nm-iot');
if (!root) return;
// Power
const powerRing = root.querySelector('[data-nm-iot-power]');
const status = root.querySelector('[data-nm-iot-status]');
if (powerRing) powerRing.addEventListener('click', () => {
const on = !powerRing.classList.contains('on');
powerRing.classList.toggle('on', on);
status?.classList.toggle('on', on);
if (status) status.textContent = on ? 'SYSTEM ON' : 'STANDBY';
});
// Temp dial
let temp = 22;
const tempEl = root.querySelector('[data-nm-iot-temp]');
const arc = root.querySelector('[data-nm-iot-thermo-arc]');
root.querySelectorAll('[data-nm-iot-temp-adj]').forEach(btn => {
btn.addEventListener('click', () => {
const d = parseInt(btn.dataset.nmIotTempAdj, 10) || 0;
temp = Math.max(16, Math.min(32, temp + d));
if (tempEl) tempEl.innerHTML = temp + '<span class="temp-unit">°</span>';
const pct = (temp - 16) / 16;
if (arc) arc.setAttribute('stroke-dasharray', (pct * 260) + ' 360');
});
});
// Mode chips
root.querySelectorAll('[data-nm-iot-mode]').forEach(chip => {
chip.addEventListener('click', () => {
root.querySelectorAll('[data-nm-iot-mode]').forEach(c => c.classList.remove('active'));
chip.classList.add('active');
});
});
// Scene buttons
root.querySelectorAll('[data-nm-iot-scene]').forEach(btn => {
btn.addEventListener('click', () => {
root.querySelectorAll('[data-nm-iot-scene]').forEach(s => s.classList.remove('active'));
btn.classList.add('active');
});
});
// Sliders
root.querySelectorAll('[data-nm-iot-slider]').forEach(input => {
const key = input.dataset.nmIotSlider;
const suffix = input.dataset.suffix || '';
const fill = root.querySelector('[data-nm-iot-slider-fill="' + key + '"]');
const thumb = root.querySelector('[data-nm-iot-slider-thumb="' + key + '"]');
const val = root.querySelector('[data-nm-iot-slider-val="' + key + '"]');
input.addEventListener('input', () => {
const pct = (input.value - input.min) / (input.max - input.min) * 100;
if (fill) fill.style.width = pct + '%';
if (thumb) thumb.style.left = 'calc(' + pct + '% - 10px)';
if (val) val.textContent = parseInt(input.value, 10) + suffix;
});
});
// Tick marks on thermostat
const ticks = root.querySelector('[data-nm-iot-ticks]');
if (ticks && !ticks.children.length) {
const svgNS = 'http://www.w3.org/2000/svg';
for (let t = 0; t <= 20; t++) {
const a = Math.PI * (-225 + t * 13.5) / 180;
const r1 = 96, r2 = t % 5 === 0 ? 88 : 92;
const line = document.createElementNS(svgNS, 'line');
line.setAttribute('x1', String(100 + r1 * Math.cos(a)));
line.setAttribute('y1', String(100 + r1 * Math.sin(a)));
line.setAttribute('x2', String(100 + r2 * Math.cos(a)));
line.setAttribute('y2', String(100 + r2 * Math.sin(a)));
line.setAttribute('stroke', t / 20 < 0.68 ? '#00cec9' : '#2e3a48');
line.setAttribute('stroke-width', t % 5 === 0 ? '2.5' : '1.5');
line.setAttribute('stroke-linecap', 'round');
ticks.appendChild(line);
}
}
// Device toggles
root.querySelectorAll('[data-nm-iot-device]').forEach(card => {
card.addEventListener('click', () => card.classList.toggle('on'));
});
// Mini dials — render + drag
const dialSpec = [
{ lbl: 'Color Temp', start: -60, min: 2700, max: 6500, unit: 'K' },
{ lbl: 'Ambience', start: 30, min: 0, max: 100, unit: '%' },
{ lbl: 'Eco Limit', start: -10, min: 0, max: 100, unit: '%' },
{ lbl: 'Sleep Delay', start: 80, min: 0, max: 60, unit: 'm' },
{ lbl: 'Noise Gate', start: -90, min: 20, max: 80, unit: 'dB' },
];
const dialsRow = root.querySelector('[data-nm-iot-dials]');
dialSpec.forEach(({ lbl, start, min, max, unit }) => {
const pct = (start + 140) / 280;
const initVal = Math.round(min + pct * (max - min));
const g = document.createElement('div');
g.className = 'mini-dial-group';
g.innerHTML =
'<div class="mini-dial">' +
' <div class="mini-dial-inner"></div>' +
' <div class="mini-dial-dot" style="transform:translateX(-50%) rotate(' + start + 'deg)"></div>' +
'</div>' +
'<div class="mini-dial-lbl">' + lbl + '</div>' +
'<div class="mini-dial-val">' + initVal + unit + '</div>';
dialsRow.appendChild(g);
const dial = g.querySelector('.mini-dial');
const dot = g.querySelector('.mini-dial-dot');
const valEl = g.querySelector('.mini-dial-val');
let angle = start, dragging = false, sy = 0, sa = start;
dial.addEventListener('mousedown', e => {
dragging = true; sy = e.clientY; sa = angle;
document.body.style.cursor = 'grabbing';
e.preventDefault();
});
document.addEventListener('mousemove', e => {
if (!dragging) return;
angle = Math.max(-140, Math.min(140, sa - (e.clientY - sy) * 1.5));
dot.style.transform = 'translateX(-50%) rotate(' + angle + 'deg)';
const p = (angle + 140) / 280;
const v = Math.round(min + p * (max - min));
valEl.textContent = v + unit;
});
document.addEventListener('mouseup', () => {
if (dragging) { dragging = false; document.body.style.cursor = ''; }
});
});
})();