feat: premium UI redesign — glassmorphism, gradient accents, ambient background

components/DeviceCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { Fan, Lightbulb, Tv, Snowflake, Power } from 'lucide-react'
 
 interface DeviceCardProps {
   id: string
@@ -13,6 +14,32 @@ interface DeviceCardProps {
   extraInfo?: string
 }
 
+function getDeviceIcon(id: string, isOn: boolean) {
+  const color = isOn ? '#a5b4fc' : 'rgba(255,255,255,0.35)'
+  const size = 24
+  if (id.includes('air_purifier')) return <Fan size={size} color={color} />
+  if (id.includes('light')) return <Lightbulb size={size} color={isOn ? '#fbbf24' : color} />
+  if (id.includes('tv')) return <Tv size={size} color={color} />
+  if (id.includes('ac')) return <Snowflake size={size} color={isOn ? '#22d3ee' : color} />
+  return <Power size={size} color={color} />
+}
+
+function getDeviceGradient(id: string): string {
+  if (id.includes('air_purifier')) return 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.12))'
+  if (id.includes('light')) return 'linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.1))'
+  if (id.includes('tv')) return 'linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.1))'
+  if (id.includes('ac')) return 'linear-gradient(135deg, rgba(34,211,238,0.18), rgba(6,182,212,0.1))'
+  return 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08))'
+}
+
+function getDeviceBorder(id: string): string {
+  if (id.includes('air_purifier')) return 'rgba(129,140,248,0.25)'
+  if (id.includes('light')) return 'rgba(251,191,36,0.25)'
+  if (id.includes('tv')) return 'rgba(99,102,241,0.25)'
+  if (id.includes('ac')) return 'rgba(34,211,238,0.25)'
+  return 'rgba(129,140,248,0.2)'
+}
+
 export default function DeviceCard({
   id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
 }: DeviceCardProps) {
@@ -20,7 +47,6 @@ export default function DeviceCard({
   const [synced, setSynced] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  // Sync from HA only once — when real data first arrives (not mock default)
   useEffect(() => {
     if (!synced && !isMock) {
       setIsOn(initialState)
@@ -30,7 +56,7 @@ export default function DeviceCard({
 
   const toggle = async () => {
     const next = !isOn
-    setIsOn(next) // optimistic
+    setIsOn(next)
 
     if (!isMock && entityId && domain) {
       setLoading(true)
@@ -52,69 +78,98 @@ export default function DeviceCard({
     }
   }
 
-  const accent = '#00d4ff'
-
   return (
     <div style={{
-      background: isOn ? 'rgba(0,212,255,0.07)' : 'rgba(255,255,255,0.04)',
-      border: isOn ? '1px solid rgba(0,212,255,0.25)' : '1px solid rgba(255,255,255,0.08)',
-      borderRadius: 18,
-      padding: '18px 16px 16px',
-      minHeight: 140,
+      background: isOn ? getDeviceGradient(id) : 'rgba(255,255,255,0.03)',
+      backdropFilter: 'blur(20px)',
+      WebkitBackdropFilter: 'blur(20px)',
+      border: isOn ? `1px solid ${getDeviceBorder(id)}` : '1px solid rgba(255,255,255,0.06)',
+      borderRadius: 22,
+      padding: '20px 18px 18px',
+      minHeight: 150,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
-      transition: 'background 0.25s ease, border-color 0.25s ease',
-      boxShadow: isOn ? '0 0 24px rgba(0,212,255,0.06)' : 'none',
+      transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
+      boxShadow: isOn ? '0 8px 32px rgba(99,102,241,0.1)' : '0 2px 8px rgba(0,0,0,0.1)',
+      position: 'relative',
+      overflow: 'hidden',
     }}>
-      {/* Top: icon + toggle */}
-      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+      {/* Subtle glow effect when on */}
+      {isOn && (
         <div style={{
-          width: 42, height: 42, borderRadius: 12,
-          background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
+          position: 'absolute',
+          top: -30,
+          right: -30,
+          width: 100,
+          height: 100,
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(129,140,248,0.15) 0%, transparent 70%)',
+          pointerEvents: 'none',
+        }} />
+      )}
+
+      {/* Top: icon + toggle */}
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 1 }}>
+        <div style={{
+          width: 48, height: 48, borderRadius: 16,
+          background: isOn ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.05)',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: 20,
-          transition: 'background 0.25s ease',
-          boxShadow: isOn ? '0 0 16px rgba(0,212,255,0.25)' : 'none',
+          transition: 'all 0.3s ease',
+          boxShadow: isOn ? '0 4px 16px rgba(0,0,0,0.1)' : 'none',
         }}>
-          {icon}
+          {getDeviceIcon(id, isOn)}
         </div>
 
         <button
           onClick={toggle}
           disabled={loading}
           style={{
-            width: 52, height: 30, borderRadius: 15,
-            background: isOn ? `linear-gradient(90deg, #00b4d8, #00d4ff)` : 'rgba(255,255,255,0.1)',
+            width: 54, height: 30, borderRadius: 15,
+            background: isOn
+              ? 'linear-gradient(90deg, #6366f1, #8b5cf6)'
+              : 'rgba(255,255,255,0.08)',
             position: 'relative', border: 'none', cursor: 'pointer',
-            flexShrink: 0, touchAction: 'manipulation',
-            WebkitTapHighlightColor: 'transparent',
-            transition: 'background 0.25s ease',
+            flexShrink: 0,
+            transition: 'all 0.3s ease',
             opacity: loading ? 0.6 : 1,
-            boxShadow: isOn ? '0 0 10px rgba(0,212,255,0.4)' : 'none',
+            boxShadow: isOn ? '0 0 16px rgba(99,102,241,0.3)' : 'none',
           }}
         >
           <span style={{
             position: 'absolute', top: 4,
-            left: isOn ? 26 : 4,
+            left: isOn ? 28 : 4,
             width: 22, height: 22, borderRadius: '50%',
             background: '#fff',
-            boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
-            transition: 'left 0.22s ease',
+            boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
+            transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
             display: 'block',
           }} />
         </button>
       </div>
 
       {/* Bottom: name + status */}
-      <div>
+      <div style={{ position: 'relative', zIndex: 1 }}>
         <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
           {name}
         </div>
-        <div style={{ fontSize: 12, color: isOn ? accent : 'var(--text-secondary)', marginTop: 3 }}>
+        <div style={{
+          fontSize: 12,
+          color: isOn ? '#a5b4fc' : 'var(--text-secondary)',
+          marginTop: 4,
+          fontWeight: 500,
+        }}>
           {isOn ? 'Включён' : 'Выключен'}
           {extraInfo && isOn ? ` · ${extraInfo}` : ''}
         </div>
+        {isMock && (
+          <div style={{
+            fontSize: 10,
+            color: 'var(--text-tertiary)',
+            marginTop: 2,
+            fontStyle: 'italic',
+          }}>demo</div>
+        )}
       </div>
     </div>
   )