redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs

app/globals.css

@@ -1,24 +1,24 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-  --bg: #0a0a0f;
-  --card-bg: rgba(255, 255, 255, 0.05);
+  --bg: #090912;
+  --card-bg: rgba(255, 255, 255, 0.04);
   --card-border: rgba(255, 255, 255, 0.08);
   --text-primary: rgba(255, 255, 255, 0.95);
-  --text-secondary: rgba(255, 255, 255, 0.5);
+  --text-secondary: rgba(255, 255, 255, 0.45);
   --accent: #6366f1;
   --accent-2: #8b5cf6;
 }
 
 .light {
   --bg: #f0f0f8;
-  --card-bg: rgba(255, 255, 255, 0.8);
-  --card-border: rgba(0, 0, 0, 0.08);
+  --card-bg: rgba(255, 255, 255, 0.75);
+  --card-border: rgba(0, 0, 0, 0.07);
   --text-primary: rgba(15, 15, 30, 0.95);
-  --text-secondary: rgba(15, 15, 30, 0.5);
+  --text-secondary: rgba(15, 15, 30, 0.45);
 }
 
 * {
@@ -49,7 +49,7 @@ body {
   border: 1px solid var(--card-border);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border-radius: 20px;
+  border-radius: 24px;
   transition: background 0.3s ease, border-color 0.3s ease;
 }
 
@@ -61,34 +61,35 @@ body {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: rgba(99, 102, 241, 0.4);
+  background: rgba(99, 102, 241, 0.35);
   border-radius: 2px;
 }
 
-/* Custom toggle switch */
+/* Big toggle switch (60×32) */
 .toggle-track {
   position: relative;
-  width: 52px;
-  height: 28px;
-  border-radius: 14px;
+  width: 60px;
+  height: 32px;
+  border-radius: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
+  flex-shrink: 0;
 }
 
 .toggle-thumb {
   position: absolute;
   top: 3px;
   left: 3px;
-  width: 22px;
-  height: 22px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
   background: white;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .toggle-on .toggle-thumb {
-  transform: translateX(24px);
+  transform: translateX(28px);
 }
 
 /* Custom range slider */
@@ -113,9 +114,9 @@ input[type='range']::-webkit-slider-thumb {
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: #6366f1;
+  background: #f59e0b;
   cursor: pointer;
-  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
   transition: transform 0.15s ease;
 }
 
@@ -127,10 +128,10 @@ input[type='range']::-moz-range-thumb {
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: #6366f1;
+  background: #f59e0b;
   cursor: pointer;
   border: none;
-  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
 }
 
 /* Ambient orbs */
@@ -150,48 +151,78 @@ input[type='range']::-moz-range-thumb {
 
 /* Progress bar */
 .progress-bar {
-  height: 8px;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.08);
+  height: 10px;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.07);
   overflow: hidden;
 }
 
 .light .progress-bar {
-  background: rgba(0, 0, 0, 0.08);
+  background: rgba(0, 0, 0, 0.07);
 }
 
 .progress-fill {
   height: 100%;
-  border-radius: 4px;
+  border-radius: 5px;
   background: linear-gradient(90deg, #6366f1, #8b5cf6);
-  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 /* Glow effects */
-.glow-indigo {
-  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
-}
-
-.glow-emerald {
-  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
-}
-
-.glow-rose {
-  box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
-}
-
 .glow-amber {
-  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
+  box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
+}
+
+.glow-blue {
+  box-shadow: 0 0 24px rgba(59, 130, 246, 0.4);
+}
+
+.glow-green {
+  box-shadow: 0 0 24px rgba(16, 185, 129, 0.4);
+}
+
+.glow-purple {
+  box-shadow: 0 0 24px rgba(139, 92, 246, 0.4);
 }
 
 /* Modal backdrop */
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(10px);
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+/* Spin animation for air purifier */
+@keyframes spin-slow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.spin-slow {
+  animation: spin-slow 4s linear infinite;
+}
+
+/* Orb animations */
+@keyframes orbMove1 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(40px, -30px) scale(1.05); }
+  66% { transform: translate(-20px, 20px) scale(0.97); }
+}
+@keyframes orbMove2 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(-50px, 30px) scale(1.08); }
+  66% { transform: translate(30px, -20px) scale(0.95); }
+}
+@keyframes orbMove3 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(20px, 40px) scale(1.04); }
+}
+@keyframes orbMove4 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(-30px, -20px) scale(1.06); }
+}

app/page.tsx

@@ -10,8 +10,20 @@ import AirPurifierCard from "@/components/cards/AirPurifierCard";
 import TasksCard from "@/components/cards/TasksCard";
 import WeatherCard from "@/components/cards/WeatherCard";
 import SavingsCard from "@/components/cards/SavingsCard";
+import WeatherSavingsCard from "@/components/cards/WeatherSavingsCard";
 import { useHA, useWeather, useTasks, useSavings } from "@/hooks/useHA";
 
+// Stagger container variants
+const containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.07 } },
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
+};
+
 export default function Home() {
   const [isDark, setIsDark] = useState(true);
   const [activeTab, setActiveTab] = useState("home");
@@ -54,39 +66,47 @@ export default function Home() {
     >
       {/* Ambient orbs */}
       <div
-        className="orb animate-[orbMove1_20s_ease-in-out_infinite]"
+        className="orb"
         style={{
-          width: 400,
-          height: 400,
-          top: "-10%",
-          left: "-5%",
-          background: isDark
-            ? "rgba(99,102,241,0.12)"
-            : "rgba(99,102,241,0.08)",
+          width: 480,
+          height: 480,
+          top: "-12%",
+          left: "-8%",
+          background: isDark ? "rgba(245,158,11,0.09)" : "rgba(245,158,11,0.06)",
+          animation: "orbMove1 22s ease-in-out infinite",
         }}
       />
       <div
-        className="orb animate-[orbMove2_25s_ease-in-out_infinite]"
+        className="orb"
         style={{
-          width: 350,
-          height: 350,
-          bottom: "5%",
-          right: "-5%",
-          background: isDark
-            ? "rgba(139,92,246,0.1)"
-            : "rgba(139,92,246,0.06)",
+          width: 420,
+          height: 420,
+          bottom: "0%",
+          right: "-8%",
+          background: isDark ? "rgba(139,92,246,0.1)" : "rgba(139,92,246,0.06)",
+          animation: "orbMove2 28s ease-in-out infinite",
         }}
       />
       <div
-        className="orb animate-[orbMove3_30s_ease-in-out_infinite]"
+        className="orb"
         style={{
-          width: 280,
-          height: 280,
-          top: "40%",
-          left: "40%",
-          background: isDark
-            ? "rgba(6,182,212,0.06)"
-            : "rgba(6,182,212,0.04)",
+          width: 360,
+          height: 360,
+          top: "30%",
+          left: "35%",
+          background: isDark ? "rgba(59,130,246,0.07)" : "rgba(59,130,246,0.04)",
+          animation: "orbMove3 34s ease-in-out infinite",
+        }}
+      />
+      <div
+        className="orb"
+        style={{
+          width: 300,
+          height: 300,
+          top: "55%",
+          right: "25%",
+          background: isDark ? "rgba(16,185,129,0.06)" : "rgba(16,185,129,0.04)",
+          animation: "orbMove4 26s ease-in-out infinite",
         }}
       />
 
@@ -109,7 +129,7 @@ export default function Home() {
               exit={{ opacity: 0 }}
             >
               <span
-                className="text-xs px-3 py-1 rounded-full"
+                className="text-xs px-3 py-1 rounded-full font-semibold"
                 style={{
                   background: "rgba(245,158,11,0.12)",
                   color: "#f59e0b",
@@ -125,102 +145,119 @@ export default function Home() {
         {/* Content area */}
         <div className="flex-1 overflow-hidden">
           <AnimatePresence mode="wait">
+            {/* ═══════════════ HOME TAB ═══════════════ */}
             {activeTab === "home" && (
               <motion.div
                 key="home"
-                className="h-full grid grid-cols-4 grid-rows-2 gap-3"
-                initial={{ opacity: 0, x: -20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: 20 }}
-                transition={{ duration: 0.25 }}
+                className="h-full"
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+                exit={{ opacity: 0 }}
               >
-                {/* Row 1 */}
-                {/* Свет Гостиная */}
-                <LightCard
-                  entityId="light.living_room"
-                  name="Свет Гостиная"
-                  state={livingRoom?.state || "off"}
-                  brightness={livingRoom?.attributes?.brightness}
-                  showSlider={true}
-                  onUpdate={handleHAUpdate}
-                />
+                {/* 3-col grid:
+                    Row 1: [Свет] [Климат] [Задачи]
+                    Row 2: [Воздух ×2] [Погода+Накопления]
+                */}
+                <div
+                  className="h-full grid gap-3"
+                  style={{
+                    gridTemplateColumns: "1fr 1fr 1fr",
+                    gridTemplateRows: "1fr 1fr",
+                  }}
+                >
+                  {/* Свет Гостиная */}
+                  <motion.div variants={cardVariants}>
+                    <LightCard
+                      entityId="light.living_room"
+                      name="Гостиная"
+                      state={livingRoom?.state || "off"}
+                      brightness={livingRoom?.attributes?.brightness}
+                      showSlider={true}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
 
-                {/* Свет Спальня */}
-                <LightCard
-                  entityId="light.bedroom"
-                  name="Свет Спальня"
-                  state={bedroom?.state || "off"}
-                  brightness={bedroom?.attributes?.brightness}
-                  showSlider={false}
-                  onUpdate={handleHAUpdate}
-                />
+                  {/* Термостат */}
+                  <motion.div variants={cardVariants}>
+                    <TemperatureCard
+                      entityId="climate.thermostat"
+                      currentTemp={thermostat?.attributes?.current_temperature}
+                      targetTemp={thermostat?.attributes?.temperature}
+                      state={thermostat?.state || "off"}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
 
-                {/* Температура */}
-                <TemperatureCard
-                  entityId="climate.thermostat"
-                  currentTemp={thermostat?.attributes?.current_temperature}
-                  targetTemp={thermostat?.attributes?.temperature}
-                  state={thermostat?.state || "off"}
-                  onUpdate={handleHAUpdate}
-                />
+                  {/* Задачи */}
+                  <motion.div variants={cardVariants}>
+                    <TasksCard tasks={tasks} onUpdate={refreshTasks} />
+                  </motion.div>
 
-                {/* Очиститель воздуха */}
-                <AirPurifierCard
-                  entityId="fan.air_purifier"
-                  state={airPurifier?.state || "off"}
-                  presetMode={airPurifier?.attributes?.preset_mode}
-                  onUpdate={handleHAUpdate}
-                />
+                  {/* Очиститель воздуха — 2 колонки */}
+                  <motion.div
+                    variants={cardVariants}
+                    style={{ gridColumn: "span 2" }}
+                  >
+                    <AirPurifierCard
+                      entityId="fan.air_purifier"
+                      state={airPurifier?.state || "off"}
+                      presetMode={airPurifier?.attributes?.preset_mode}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
 
-                {/* Row 2 */}
-                {/* Задачи — 2 колонки */}
-                <div className="col-span-2">
-                  <TasksCard
-                    tasks={tasks}
-                    onUpdate={refreshTasks}
-                  />
+                  {/* Погода + Накопления — правый нижний */}
+                  <motion.div variants={cardVariants}>
+                    <WeatherSavingsCard weather={weather} savings={savings} />
+                  </motion.div>
                 </div>
-
-                {/* Погода */}
-                <WeatherCard weather={weather} />
-
-                {/* Накопления */}
-                <SavingsCard savings={savings} />
               </motion.div>
             )}
 
+            {/* ═══════════════ DEVICES TAB ═══════════════ */}
             {activeTab === "devices" && (
               <motion.div
                 key="devices"
-                className="h-full grid grid-cols-3 gap-3"
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -20 }}
-                transition={{ duration: 0.25 }}
+                className="h-full grid gap-3"
+                style={{
+                  gridTemplateColumns: "1fr 1fr 1fr",
+                  gridTemplateRows: "1fr 1fr",
+                }}
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+                exit={{ opacity: 0 }}
               >
-                <LightCard
-                  entityId="light.living_room"
-                  name="Свет Гостиная"
-                  state={livingRoom?.state || "off"}
-                  brightness={livingRoom?.attributes?.brightness}
-                  showSlider={true}
-                  onUpdate={handleHAUpdate}
-                />
-                <LightCard
-                  entityId="light.bedroom"
-                  name="Свет Спальня"
-                  state={bedroom?.state || "off"}
-                  brightness={bedroom?.attributes?.brightness}
-                  showSlider={false}
-                  onUpdate={handleHAUpdate}
-                />
-                <AirPurifierCard
-                  entityId="fan.air_purifier"
-                  state={airPurifier?.state || "off"}
-                  presetMode={airPurifier?.attributes?.preset_mode}
-                  onUpdate={handleHAUpdate}
-                />
-                <div className="col-span-2">
+                <motion.div variants={cardVariants}>
+                  <LightCard
+                    entityId="light.living_room"
+                    name="Гостиная"
+                    state={livingRoom?.state || "off"}
+                    brightness={livingRoom?.attributes?.brightness}
+                    showSlider={true}
+                    onUpdate={handleHAUpdate}
+                  />
+                </motion.div>
+                <motion.div variants={cardVariants}>
+                  <LightCard
+                    entityId="light.bedroom"
+                    name="Спальня"
+                    state={bedroom?.state || "off"}
+                    brightness={bedroom?.attributes?.brightness}
+                    showSlider={false}
+                    onUpdate={handleHAUpdate}
+                  />
+                </motion.div>
+                <motion.div variants={cardVariants}>
+                  <AirPurifierCard
+                    entityId="fan.air_purifier"
+                    state={airPurifier?.state || "off"}
+                    presetMode={airPurifier?.attributes?.preset_mode}
+                    onUpdate={handleHAUpdate}
+                  />
+                </motion.div>
+                <motion.div variants={cardVariants} style={{ gridColumn: "span 2" }}>
                   <TemperatureCard
                     entityId="climate.thermostat"
                     currentTemp={thermostat?.attributes?.current_temperature}
@@ -228,10 +265,11 @@ export default function Home() {
                     state={thermostat?.state || "off"}
                     onUpdate={handleHAUpdate}
                   />
-                </div>
+                </motion.div>
               </motion.div>
             )}
 
+            {/* ═══════════════ TASKS TAB ═══════════════ */}
             {activeTab === "tasks" && (
               <motion.div
                 key="tasks"
@@ -245,6 +283,7 @@ export default function Home() {
               </motion.div>
             )}
 
+            {/* ═══════════════ SETTINGS TAB ═══════════════ */}
             {activeTab === "settings" && (
               <motion.div
                 key="settings"
@@ -271,35 +310,23 @@ export default function Home() {
 
                   <div className="space-y-3 text-left">
                     {[
-                      {
-                        label: "HA URL",
-                        value:
-                          process.env.NEXT_PUBLIC_APP_URL
-                            ? "Настроен"
-                            : "http://192.168.31.110:8123",
-                      },
+                      { label: "HA URL", value: "Настроен" },
                       { label: "HA Token", value: isDemo ? "❌ Не настроен" : "✅ Настроен" },
                       { label: "Vikunja", value: "✅ Подключён" },
                       { label: "Pulse API", value: "✅ Подключён" },
                     ].map((item) => (
                       <div
                         key={item.label}
-                        className="flex justify-between items-center px-4 py-3 rounded-xl"
+                        className="flex justify-between items-center px-4 py-3 rounded-2xl"
                         style={{
                           background: "rgba(255,255,255,0.04)",
                           border: "1px solid rgba(255,255,255,0.06)",
                         }}
                       >
-                        <span
-                          className="text-sm"
-                          style={{ color: "var(--text-secondary)" }}
-                        >
+                        <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
                           {item.label}
                         </span>
-                        <span
-                          className="text-sm font-medium"
-                          style={{ color: "var(--text-primary)" }}
-                        >
+                        <span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                           {item.value}
                         </span>
                       </div>