redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs
All checks were successful
Deploy to Coolify / deploy (push) Successful in 4s
All checks were successful
Deploy to Coolify / deploy (push) Successful in 4s
This commit is contained in:
Cosmo
115
app/globals.css
115
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 base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg: #0a0a0f;
|
--bg: #090912;
|
||||||
--card-bg: rgba(255, 255, 255, 0.05);
|
--card-bg: rgba(255, 255, 255, 0.04);
|
||||||
--card-border: rgba(255, 255, 255, 0.08);
|
--card-border: rgba(255, 255, 255, 0.08);
|
||||||
--text-primary: rgba(255, 255, 255, 0.95);
|
--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: #6366f1;
|
||||||
--accent-2: #8b5cf6;
|
--accent-2: #8b5cf6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light {
|
.light {
|
||||||
--bg: #f0f0f8;
|
--bg: #f0f0f8;
|
||||||
--card-bg: rgba(255, 255, 255, 0.8);
|
--card-bg: rgba(255, 255, 255, 0.75);
|
||||||
--card-border: rgba(0, 0, 0, 0.08);
|
--card-border: rgba(0, 0, 0, 0.07);
|
||||||
--text-primary: rgba(15, 15, 30, 0.95);
|
--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);
|
border: 1px solid var(--card-border);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
-webkit-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;
|
transition: background 0.3s ease, border-color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -61,34 +61,35 @@ body {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: rgba(99, 102, 241, 0.4);
|
background: rgba(99, 102, 241, 0.35);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom toggle switch */
|
/* Big toggle switch (60×32) */
|
||||||
.toggle-track {
|
.toggle-track {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 52px;
|
width: 60px;
|
||||||
height: 28px;
|
height: 32px;
|
||||||
border-radius: 14px;
|
border-radius: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-thumb {
|
.toggle-thumb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
width: 22px;
|
width: 26px;
|
||||||
height: 22px;
|
height: 26px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: white;
|
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);
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-on .toggle-thumb {
|
.toggle-on .toggle-thumb {
|
||||||
transform: translateX(24px);
|
transform: translateX(28px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom range slider */
|
/* Custom range slider */
|
||||||
@@ -113,9 +114,9 @@ input[type='range']::-webkit-slider-thumb {
|
|||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #6366f1;
|
background: #f59e0b;
|
||||||
cursor: pointer;
|
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;
|
transition: transform 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -127,10 +128,10 @@ input[type='range']::-moz-range-thumb {
|
|||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #6366f1;
|
background: #f59e0b;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
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 */
|
/* Ambient orbs */
|
||||||
@@ -150,48 +151,78 @@ input[type='range']::-moz-range-thumb {
|
|||||||
|
|
||||||
/* Progress bar */
|
/* Progress bar */
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
height: 8px;
|
height: 10px;
|
||||||
border-radius: 4px;
|
border-radius: 5px;
|
||||||
background: rgba(255, 255, 255, 0.08);
|
background: rgba(255, 255, 255, 0.07);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light .progress-bar {
|
.light .progress-bar {
|
||||||
background: rgba(0, 0, 0, 0.08);
|
background: rgba(0, 0, 0, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-fill {
|
.progress-fill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 4px;
|
border-radius: 5px;
|
||||||
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
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 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 {
|
.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 */
|
||||||
.modal-backdrop {
|
.modal-backdrop {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.65);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(10px);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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); }
|
||||||
|
}
|
||||||
|
|||||||
271
app/page.tsx
271
app/page.tsx
@@ -10,8 +10,20 @@ import AirPurifierCard from "@/components/cards/AirPurifierCard";
|
|||||||
import TasksCard from "@/components/cards/TasksCard";
|
import TasksCard from "@/components/cards/TasksCard";
|
||||||
import WeatherCard from "@/components/cards/WeatherCard";
|
import WeatherCard from "@/components/cards/WeatherCard";
|
||||||
import SavingsCard from "@/components/cards/SavingsCard";
|
import SavingsCard from "@/components/cards/SavingsCard";
|
||||||
|
import WeatherSavingsCard from "@/components/cards/WeatherSavingsCard";
|
||||||
import { useHA, useWeather, useTasks, useSavings } from "@/hooks/useHA";
|
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() {
|
export default function Home() {
|
||||||
const [isDark, setIsDark] = useState(true);
|
const [isDark, setIsDark] = useState(true);
|
||||||
const [activeTab, setActiveTab] = useState("home");
|
const [activeTab, setActiveTab] = useState("home");
|
||||||
@@ -54,39 +66,47 @@ export default function Home() {
|
|||||||
>
|
>
|
||||||
{/* Ambient orbs */}
|
{/* Ambient orbs */}
|
||||||
<div
|
<div
|
||||||
className="orb animate-[orbMove1_20s_ease-in-out_infinite]"
|
className="orb"
|
||||||
style={{
|
style={{
|
||||||
width: 400,
|
width: 480,
|
||||||
height: 400,
|
height: 480,
|
||||||
top: "-10%",
|
top: "-12%",
|
||||||
left: "-5%",
|
left: "-8%",
|
||||||
background: isDark
|
background: isDark ? "rgba(245,158,11,0.09)" : "rgba(245,158,11,0.06)",
|
||||||
? "rgba(99,102,241,0.12)"
|
animation: "orbMove1 22s ease-in-out infinite",
|
||||||
: "rgba(99,102,241,0.08)",
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className="orb animate-[orbMove2_25s_ease-in-out_infinite]"
|
className="orb"
|
||||||
style={{
|
style={{
|
||||||
width: 350,
|
width: 420,
|
||||||
height: 350,
|
height: 420,
|
||||||
bottom: "5%",
|
bottom: "0%",
|
||||||
right: "-5%",
|
right: "-8%",
|
||||||
background: isDark
|
background: isDark ? "rgba(139,92,246,0.1)" : "rgba(139,92,246,0.06)",
|
||||||
? "rgba(139,92,246,0.1)"
|
animation: "orbMove2 28s ease-in-out infinite",
|
||||||
: "rgba(139,92,246,0.06)",
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className="orb animate-[orbMove3_30s_ease-in-out_infinite]"
|
className="orb"
|
||||||
style={{
|
style={{
|
||||||
width: 280,
|
width: 360,
|
||||||
height: 280,
|
height: 360,
|
||||||
top: "40%",
|
top: "30%",
|
||||||
left: "40%",
|
left: "35%",
|
||||||
background: isDark
|
background: isDark ? "rgba(59,130,246,0.07)" : "rgba(59,130,246,0.04)",
|
||||||
? "rgba(6,182,212,0.06)"
|
animation: "orbMove3 34s ease-in-out infinite",
|
||||||
: "rgba(6,182,212,0.04)",
|
}}
|
||||||
|
/>
|
||||||
|
<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 }}
|
exit={{ opacity: 0 }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="text-xs px-3 py-1 rounded-full"
|
className="text-xs px-3 py-1 rounded-full font-semibold"
|
||||||
style={{
|
style={{
|
||||||
background: "rgba(245,158,11,0.12)",
|
background: "rgba(245,158,11,0.12)",
|
||||||
color: "#f59e0b",
|
color: "#f59e0b",
|
||||||
@@ -125,102 +145,119 @@ export default function Home() {
|
|||||||
{/* Content area */}
|
{/* Content area */}
|
||||||
<div className="flex-1 overflow-hidden">
|
<div className="flex-1 overflow-hidden">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
|
{/* ═══════════════ HOME TAB ═══════════════ */}
|
||||||
{activeTab === "home" && (
|
{activeTab === "home" && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="home"
|
key="home"
|
||||||
className="h-full grid grid-cols-4 grid-rows-2 gap-3"
|
className="h-full"
|
||||||
initial={{ opacity: 0, x: -20 }}
|
variants={containerVariants}
|
||||||
animate={{ opacity: 1, x: 0 }}
|
initial="hidden"
|
||||||
exit={{ opacity: 0, x: 20 }}
|
animate="visible"
|
||||||
transition={{ duration: 0.25 }}
|
exit={{ opacity: 0 }}
|
||||||
>
|
>
|
||||||
{/* Row 1 */}
|
{/* 3-col grid:
|
||||||
{/* Свет Гостиная */}
|
Row 1: [Свет] [Климат] [Задачи]
|
||||||
<LightCard
|
Row 2: [Воздух ×2] [Погода+Накопления]
|
||||||
entityId="light.living_room"
|
*/}
|
||||||
name="Свет Гостиная"
|
<div
|
||||||
state={livingRoom?.state || "off"}
|
className="h-full grid gap-3"
|
||||||
brightness={livingRoom?.attributes?.brightness}
|
style={{
|
||||||
showSlider={true}
|
gridTemplateColumns: "1fr 1fr 1fr",
|
||||||
onUpdate={handleHAUpdate}
|
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
|
<motion.div variants={cardVariants}>
|
||||||
entityId="light.bedroom"
|
<TemperatureCard
|
||||||
name="Свет Спальня"
|
entityId="climate.thermostat"
|
||||||
state={bedroom?.state || "off"}
|
currentTemp={thermostat?.attributes?.current_temperature}
|
||||||
brightness={bedroom?.attributes?.brightness}
|
targetTemp={thermostat?.attributes?.temperature}
|
||||||
showSlider={false}
|
state={thermostat?.state || "off"}
|
||||||
onUpdate={handleHAUpdate}
|
onUpdate={handleHAUpdate}
|
||||||
/>
|
/>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
{/* Температура */}
|
{/* Задачи */}
|
||||||
<TemperatureCard
|
<motion.div variants={cardVariants}>
|
||||||
entityId="climate.thermostat"
|
<TasksCard tasks={tasks} onUpdate={refreshTasks} />
|
||||||
currentTemp={thermostat?.attributes?.current_temperature}
|
</motion.div>
|
||||||
targetTemp={thermostat?.attributes?.temperature}
|
|
||||||
state={thermostat?.state || "off"}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Очиститель воздуха */}
|
{/* Очиститель воздуха — 2 колонки */}
|
||||||
<AirPurifierCard
|
<motion.div
|
||||||
entityId="fan.air_purifier"
|
variants={cardVariants}
|
||||||
state={airPurifier?.state || "off"}
|
style={{ gridColumn: "span 2" }}
|
||||||
presetMode={airPurifier?.attributes?.preset_mode}
|
>
|
||||||
onUpdate={handleHAUpdate}
|
<AirPurifierCard
|
||||||
/>
|
entityId="fan.air_purifier"
|
||||||
|
state={airPurifier?.state || "off"}
|
||||||
|
presetMode={airPurifier?.attributes?.preset_mode}
|
||||||
|
onUpdate={handleHAUpdate}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
{/* Row 2 */}
|
{/* Погода + Накопления — правый нижний */}
|
||||||
{/* Задачи — 2 колонки */}
|
<motion.div variants={cardVariants}>
|
||||||
<div className="col-span-2">
|
<WeatherSavingsCard weather={weather} savings={savings} />
|
||||||
<TasksCard
|
</motion.div>
|
||||||
tasks={tasks}
|
|
||||||
onUpdate={refreshTasks}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Погода */}
|
|
||||||
<WeatherCard weather={weather} />
|
|
||||||
|
|
||||||
{/* Накопления */}
|
|
||||||
<SavingsCard savings={savings} />
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* ═══════════════ DEVICES TAB ═══════════════ */}
|
||||||
{activeTab === "devices" && (
|
{activeTab === "devices" && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="devices"
|
key="devices"
|
||||||
className="h-full grid grid-cols-3 gap-3"
|
className="h-full grid gap-3"
|
||||||
initial={{ opacity: 0, x: 20 }}
|
style={{
|
||||||
animate={{ opacity: 1, x: 0 }}
|
gridTemplateColumns: "1fr 1fr 1fr",
|
||||||
exit={{ opacity: 0, x: -20 }}
|
gridTemplateRows: "1fr 1fr",
|
||||||
transition={{ duration: 0.25 }}
|
}}
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
>
|
>
|
||||||
<LightCard
|
<motion.div variants={cardVariants}>
|
||||||
entityId="light.living_room"
|
<LightCard
|
||||||
name="Свет Гостиная"
|
entityId="light.living_room"
|
||||||
state={livingRoom?.state || "off"}
|
name="Гостиная"
|
||||||
brightness={livingRoom?.attributes?.brightness}
|
state={livingRoom?.state || "off"}
|
||||||
showSlider={true}
|
brightness={livingRoom?.attributes?.brightness}
|
||||||
onUpdate={handleHAUpdate}
|
showSlider={true}
|
||||||
/>
|
onUpdate={handleHAUpdate}
|
||||||
<LightCard
|
/>
|
||||||
entityId="light.bedroom"
|
</motion.div>
|
||||||
name="Свет Спальня"
|
<motion.div variants={cardVariants}>
|
||||||
state={bedroom?.state || "off"}
|
<LightCard
|
||||||
brightness={bedroom?.attributes?.brightness}
|
entityId="light.bedroom"
|
||||||
showSlider={false}
|
name="Спальня"
|
||||||
onUpdate={handleHAUpdate}
|
state={bedroom?.state || "off"}
|
||||||
/>
|
brightness={bedroom?.attributes?.brightness}
|
||||||
<AirPurifierCard
|
showSlider={false}
|
||||||
entityId="fan.air_purifier"
|
onUpdate={handleHAUpdate}
|
||||||
state={airPurifier?.state || "off"}
|
/>
|
||||||
presetMode={airPurifier?.attributes?.preset_mode}
|
</motion.div>
|
||||||
onUpdate={handleHAUpdate}
|
<motion.div variants={cardVariants}>
|
||||||
/>
|
<AirPurifierCard
|
||||||
<div className="col-span-2">
|
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
|
<TemperatureCard
|
||||||
entityId="climate.thermostat"
|
entityId="climate.thermostat"
|
||||||
currentTemp={thermostat?.attributes?.current_temperature}
|
currentTemp={thermostat?.attributes?.current_temperature}
|
||||||
@@ -228,10 +265,11 @@ export default function Home() {
|
|||||||
state={thermostat?.state || "off"}
|
state={thermostat?.state || "off"}
|
||||||
onUpdate={handleHAUpdate}
|
onUpdate={handleHAUpdate}
|
||||||
/>
|
/>
|
||||||
</div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* ═══════════════ TASKS TAB ═══════════════ */}
|
||||||
{activeTab === "tasks" && (
|
{activeTab === "tasks" && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="tasks"
|
key="tasks"
|
||||||
@@ -245,6 +283,7 @@ export default function Home() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* ═══════════════ SETTINGS TAB ═══════════════ */}
|
||||||
{activeTab === "settings" && (
|
{activeTab === "settings" && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="settings"
|
key="settings"
|
||||||
@@ -271,35 +310,23 @@ export default function Home() {
|
|||||||
|
|
||||||
<div className="space-y-3 text-left">
|
<div className="space-y-3 text-left">
|
||||||
{[
|
{[
|
||||||
{
|
{ label: "HA URL", value: "Настроен" },
|
||||||
label: "HA URL",
|
|
||||||
value:
|
|
||||||
process.env.NEXT_PUBLIC_APP_URL
|
|
||||||
? "Настроен"
|
|
||||||
: "http://192.168.31.110:8123",
|
|
||||||
},
|
|
||||||
{ label: "HA Token", value: isDemo ? "❌ Не настроен" : "✅ Настроен" },
|
{ label: "HA Token", value: isDemo ? "❌ Не настроен" : "✅ Настроен" },
|
||||||
{ label: "Vikunja", value: "✅ Подключён" },
|
{ label: "Vikunja", value: "✅ Подключён" },
|
||||||
{ label: "Pulse API", value: "✅ Подключён" },
|
{ label: "Pulse API", value: "✅ Подключён" },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<div
|
<div
|
||||||
key={item.label}
|
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={{
|
style={{
|
||||||
background: "rgba(255,255,255,0.04)",
|
background: "rgba(255,255,255,0.04)",
|
||||||
border: "1px solid rgba(255,255,255,0.06)",
|
border: "1px solid rgba(255,255,255,0.06)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||||
className="text-sm"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{item.label}
|
{item.label}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
|
||||||
className="text-sm font-medium"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{item.value}
|
{item.value}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,16 +9,17 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const TABS = [
|
const TABS = [
|
||||||
{ id: "home", label: "Главная", icon: Home },
|
{ id: "home", label: "Главная", icon: Home, color: "#6366f1" },
|
||||||
{ id: "devices", label: "Устройства", icon: Cpu },
|
{ id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
|
||||||
{ id: "tasks", label: "Задачи", icon: CheckSquare },
|
{ id: "tasks", label: "Задачи", icon: CheckSquare, color: "#8b5cf6" },
|
||||||
{ id: "settings", label: "Настройки", icon: Settings },
|
{ id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function BottomNav({ active, onChange }: Props) {
|
export default function BottomNav({ active, onChange }: Props) {
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card px-4 py-2 flex items-center justify-around no-select"
|
className="glass-card px-3 py-2 flex items-center justify-around no-select"
|
||||||
|
style={{ borderRadius: "20px" }}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.5 }}
|
transition={{ duration: 0.5 }}
|
||||||
@@ -30,33 +31,29 @@ export default function BottomNav({ active, onChange }: Props) {
|
|||||||
<motion.button
|
<motion.button
|
||||||
key={tab.id}
|
key={tab.id}
|
||||||
onClick={() => onChange(tab.id)}
|
onClick={() => onChange(tab.id)}
|
||||||
className="flex flex-col items-center gap-1 px-6 py-2 rounded-xl relative"
|
className="flex flex-col items-center gap-1.5 px-8 py-2 rounded-2xl relative"
|
||||||
whileTap={{ scale: 0.88 }}
|
whileTap={{ scale: 0.85 }}
|
||||||
style={{
|
|
||||||
background: isActive
|
|
||||||
? "rgba(99,102,241,0.15)"
|
|
||||||
: "transparent",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{isActive && (
|
{isActive && (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="absolute inset-0 rounded-xl"
|
className="absolute inset-0 rounded-2xl"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background: `${tab.color}15`,
|
||||||
"linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1))",
|
border: `1px solid ${tab.color}30`,
|
||||||
border: "1px solid rgba(99,102,241,0.3)",
|
boxShadow: `0 0 16px ${tab.color}20`,
|
||||||
}}
|
}}
|
||||||
layoutId="navActive"
|
layoutId="navActive"
|
||||||
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
transition={{ type: "spring", stiffness: 450, damping: 30 }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Icon
|
<Icon
|
||||||
size={22}
|
size={22}
|
||||||
color={isActive ? "#6366f1" : "var(--text-secondary)"}
|
color={isActive ? tab.color : "var(--text-secondary)"}
|
||||||
|
strokeWidth={isActive ? 2 : 1.5}
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
className="text-xs font-medium"
|
className="text-xs font-semibold"
|
||||||
style={{ color: isActive ? "#6366f1" : "var(--text-secondary)" }}
|
style={{ color: isActive ? tab.color : "var(--text-secondary)" }}
|
||||||
>
|
>
|
||||||
{tab.label}
|
{tab.label}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
|||||||
);
|
);
|
||||||
setDate(
|
setDate(
|
||||||
now.toLocaleDateString("ru-RU", {
|
now.toLocaleDateString("ru-RU", {
|
||||||
weekday: "long",
|
weekday: "short",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
month: "long",
|
month: "long",
|
||||||
})
|
})
|
||||||
@@ -50,6 +50,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
|||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card px-6 py-3 flex items-center justify-between no-select"
|
className="glass-card px-6 py-3 flex items-center justify-between no-select"
|
||||||
|
style={{ borderRadius: "20px" }}
|
||||||
initial={{ opacity: 0, y: -20 }}
|
initial={{ opacity: 0, y: -20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.5 }}
|
transition={{ duration: 0.5 }}
|
||||||
@@ -57,8 +58,8 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
|||||||
{/* Time & Date */}
|
{/* Time & Date */}
|
||||||
<div className="flex items-baseline gap-4">
|
<div className="flex items-baseline gap-4">
|
||||||
<span
|
<span
|
||||||
className="text-5xl font-bold tracking-tight"
|
className="font-black tracking-tight leading-none"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{ fontSize: "42px", color: "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
{time}
|
{time}
|
||||||
</span>
|
</span>
|
||||||
@@ -70,41 +71,35 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Weather */}
|
{/* Weather pill */}
|
||||||
{weather && (
|
{weather && (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="flex items-center gap-3 px-4 py-2 rounded-xl"
|
className="flex items-center gap-3 px-5 py-2 rounded-2xl"
|
||||||
style={{
|
style={{
|
||||||
background: "rgba(99,102,241,0.1)",
|
background: "rgba(59,130,246,0.1)",
|
||||||
border: "1px solid rgba(99,102,241,0.2)",
|
border: "1px solid rgba(59,130,246,0.22)",
|
||||||
}}
|
}}
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
transition={{ delay: 0.3 }}
|
transition={{ delay: 0.3 }}
|
||||||
>
|
>
|
||||||
<span className="text-2xl">
|
<span className="text-2xl leading-none">
|
||||||
{getWeatherEmoji(weather.weatherCode)}
|
{getWeatherEmoji(weather.weatherCode)}
|
||||||
</span>
|
</span>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
className="text-xl font-bold"
|
className="text-xl font-black leading-tight"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{ color: "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
{weather.temp}°C
|
{weather.temp}°C
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="text-xs"
|
className="text-xs leading-tight"
|
||||||
style={{ color: "var(--text-secondary)" }}
|
style={{ color: "var(--text-secondary)" }}
|
||||||
>
|
>
|
||||||
Ощущается {weather.feelsLike}°
|
{weather.desc}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
className="text-xs ml-2 max-w-[80px] text-center leading-tight"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{weather.desc}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -112,7 +107,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
|||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
{weather?.demo && (
|
{weather?.demo && (
|
||||||
<span
|
<span
|
||||||
className="text-xs px-2 py-1 rounded-full"
|
className="text-xs px-2.5 py-1 rounded-full font-semibold"
|
||||||
style={{
|
style={{
|
||||||
background: "rgba(245,158,11,0.15)",
|
background: "rgba(245,158,11,0.15)",
|
||||||
color: "#f59e0b",
|
color: "#f59e0b",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
import { useState, useCallback } from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { Wind } from "lucide-react";
|
import { Wind } from "lucide-react";
|
||||||
import { toggleFan, setFanPreset } from "@/lib/api";
|
import { toggleFan, setFanPreset } from "@/lib/api";
|
||||||
|
|
||||||
@@ -13,9 +13,9 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const MODES = [
|
const MODES = [
|
||||||
{ id: "Auto", label: "Авто", color: "#06b6d4" },
|
{ id: "Auto", label: "Авто", color: "#10b981" },
|
||||||
{ id: "Night", label: "Ночь", color: "#6366f1" },
|
{ id: "Night", label: "Ночь", color: "#6366f1" },
|
||||||
{ id: "High", label: "Макс", color: "#f43f5e" },
|
{ id: "High", label: "Турбо", color: "#f59e0b" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function AirPurifierCard({
|
export default function AirPurifierCard({
|
||||||
@@ -45,102 +45,137 @@ export default function AirPurifierCard({
|
|||||||
[entityId, onUpdate]
|
[entityId, onUpdate]
|
||||||
);
|
);
|
||||||
|
|
||||||
const activeColor =
|
const activeMode = MODES.find((m) => m.id === currentMode) || MODES[0];
|
||||||
MODES.find((m) => m.id === currentMode)?.color || "#06b6d4";
|
const accentColor = isOn ? activeMode.color : "rgba(255,255,255,0.3)";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card p-5 h-full flex flex-col justify-between"
|
className="glass-card p-6 h-full flex flex-col"
|
||||||
style={
|
style={
|
||||||
isOn
|
isOn
|
||||||
? {
|
? {
|
||||||
background: `rgba(6,182,212,0.06)`,
|
background: `${activeMode.color}08`,
|
||||||
border: `1px solid rgba(6,182,212,0.2)`,
|
border: `1px solid ${activeMode.color}25`,
|
||||||
|
boxShadow: `0 0 40px ${activeMode.color}10`,
|
||||||
}
|
}
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.35, delay: 0.14 }}
|
||||||
whileHover={{ scale: 1.01 }}
|
whileHover={{ scale: 1.01 }}
|
||||||
>
|
>
|
||||||
<div className="flex items-start justify-between">
|
{/* Top row: icon + name + toggle */}
|
||||||
<div>
|
<div className="flex items-center gap-4">
|
||||||
<div
|
{/* Animated icon */}
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
|
<div
|
||||||
style={{
|
className="w-16 h-16 rounded-2xl flex items-center justify-center flex-shrink-0"
|
||||||
background: isOn
|
style={{
|
||||||
? "rgba(6,182,212,0.15)"
|
background: isOn ? `${activeMode.color}20` : "rgba(255,255,255,0.06)",
|
||||||
: "rgba(255,255,255,0.06)",
|
boxShadow: isOn ? `0 0 28px ${activeMode.color}40` : "none",
|
||||||
}}
|
}}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
animate={isOn ? { rotate: 360 } : { rotate: 0 }}
|
||||||
|
transition={
|
||||||
|
isOn ? { duration: 4, repeat: Infinity, ease: "linear" } : {}
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<motion.div
|
<Wind
|
||||||
animate={isOn ? { rotate: 360 } : { rotate: 0 }}
|
size={32}
|
||||||
transition={
|
color={isOn ? activeMode.color : "rgba(255,255,255,0.3)"}
|
||||||
isOn
|
strokeWidth={1.5}
|
||||||
? { duration: 3, repeat: Infinity, ease: "linear" }
|
/>
|
||||||
: {}
|
</motion.div>
|
||||||
}
|
</div>
|
||||||
>
|
|
||||||
<Wind
|
<div className="flex-1 min-w-0">
|
||||||
size={20}
|
|
||||||
color={isOn ? "#06b6d4" : "var(--text-secondary)"}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className="text-sm font-semibold"
|
className="text-xl font-bold truncate"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{ color: "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
Очиститель воздуха
|
Очиститель воздуха
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="text-xs mt-0.5"
|
className="text-sm mt-0.5 font-medium"
|
||||||
style={{ color: isOn ? activeColor : "var(--text-secondary)" }}
|
style={{ color: isOn ? activeMode.color : "var(--text-secondary)" }}
|
||||||
>
|
>
|
||||||
{isOn ? currentMode : "Выключен"}
|
{isOn ? activeMode.label : "Выключен"}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Toggle */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className={`toggle-track ${isOn ? "toggle-on" : ""}`}
|
className={`toggle-track ${isOn ? "toggle-on" : ""}`}
|
||||||
style={{ background: isOn ? "#06b6d4" : "rgba(255,255,255,0.1)" }}
|
style={{
|
||||||
|
background: isOn ? activeMode.color : "rgba(255,255,255,0.1)",
|
||||||
|
boxShadow: isOn ? `0 0 16px ${activeMode.color}60` : "none",
|
||||||
|
}}
|
||||||
onClick={handleToggle}
|
onClick={handleToggle}
|
||||||
whileTap={{ scale: 0.9 }}
|
whileTap={{ scale: 0.88 }}
|
||||||
>
|
>
|
||||||
<div className="toggle-thumb" />
|
<div className="toggle-thumb" />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isOn && (
|
{/* Mode buttons */}
|
||||||
<motion.div
|
<AnimatePresence>
|
||||||
className="flex gap-2 mt-4"
|
{isOn && (
|
||||||
initial={{ opacity: 0, y: 5 }}
|
<motion.div
|
||||||
animate={{ opacity: 1, y: 0 }}
|
className="flex gap-3 mt-auto pt-4"
|
||||||
>
|
initial={{ opacity: 0, y: 8 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 8 }}
|
||||||
|
transition={{ duration: 0.22 }}
|
||||||
|
>
|
||||||
|
{MODES.map((mode) => {
|
||||||
|
const isActive = currentMode === mode.id;
|
||||||
|
return (
|
||||||
|
<motion.button
|
||||||
|
key={mode.id}
|
||||||
|
onClick={() => handleMode(mode.id)}
|
||||||
|
className="flex-1 py-2.5 rounded-2xl text-sm font-semibold"
|
||||||
|
style={
|
||||||
|
isActive
|
||||||
|
? {
|
||||||
|
background: `${mode.color}22`,
|
||||||
|
border: `1.5px solid ${mode.color}60`,
|
||||||
|
color: mode.color,
|
||||||
|
boxShadow: `0 0 14px ${mode.color}30`,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
background: "rgba(255,255,255,0.05)",
|
||||||
|
border: "1px solid rgba(255,255,255,0.08)",
|
||||||
|
color: "var(--text-secondary)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
whileTap={{ scale: 0.88 }}
|
||||||
|
>
|
||||||
|
{mode.label}
|
||||||
|
</motion.button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{/* Offline state bottom fill */}
|
||||||
|
{!isOn && (
|
||||||
|
<div className="mt-auto flex gap-3 pt-4">
|
||||||
{MODES.map((mode) => (
|
{MODES.map((mode) => (
|
||||||
<motion.button
|
<div
|
||||||
key={mode.id}
|
key={mode.id}
|
||||||
onClick={() => handleMode(mode.id)}
|
className="flex-1 py-2.5 rounded-2xl text-sm font-semibold text-center"
|
||||||
className="flex-1 py-2 rounded-xl text-xs font-medium"
|
style={{
|
||||||
style={
|
background: "rgba(255,255,255,0.03)",
|
||||||
currentMode === mode.id
|
border: "1px solid rgba(255,255,255,0.05)",
|
||||||
? {
|
color: "rgba(255,255,255,0.15)",
|
||||||
background: `${mode.color}25`,
|
}}
|
||||||
border: `1px solid ${mode.color}60`,
|
|
||||||
color: mode.color,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
background: "rgba(255,255,255,0.06)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.08)",
|
|
||||||
color: "var(--text-secondary)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
>
|
>
|
||||||
{mode.label}
|
{mode.label}
|
||||||
</motion.button>
|
</div>
|
||||||
))}
|
))}
|
||||||
</motion.div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
import { useState, useCallback } from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { Lightbulb } from "lucide-react";
|
import { Lightbulb } from "lucide-react";
|
||||||
import { toggleLight, setLightBrightness } from "@/lib/api";
|
import { toggleLight, setLightBrightness } from "@/lib/api";
|
||||||
import { getBrightnessPct, pctToBrightness } from "@/lib/ha";
|
import { getBrightnessPct, pctToBrightness } from "@/lib/ha";
|
||||||
@@ -47,50 +47,42 @@ export default function LightCard({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card p-5 h-full flex flex-col justify-between"
|
className="glass-card p-6 h-full flex flex-col justify-between"
|
||||||
style={
|
style={
|
||||||
isOn
|
isOn
|
||||||
? {
|
? {
|
||||||
background: "rgba(245,158,11,0.08)",
|
background: "rgba(245,158,11,0.07)",
|
||||||
border: "1px solid rgba(245,158,11,0.2)",
|
border: "1px solid rgba(245,158,11,0.22)",
|
||||||
boxShadow: "0 0 30px rgba(245,158,11,0.1)",
|
boxShadow: "0 0 40px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.1)",
|
||||||
}
|
}
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.3 }}
|
transition={{ duration: 0.35 }}
|
||||||
whileHover={{ scale: 1.01 }}
|
whileHover={{ scale: 1.01 }}
|
||||||
>
|
>
|
||||||
|
{/* Top row: icon + toggle */}
|
||||||
<div className="flex items-start justify-between">
|
<div className="flex items-start justify-between">
|
||||||
<div>
|
{/* Icon */}
|
||||||
<div
|
<motion.div
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
|
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||||
style={{
|
style={{
|
||||||
background: isOn
|
background: isOn
|
||||||
? "rgba(245,158,11,0.2)"
|
? "rgba(245,158,11,0.18)"
|
||||||
: "rgba(255,255,255,0.06)",
|
: "rgba(255,255,255,0.06)",
|
||||||
}}
|
boxShadow: isOn ? "0 0 28px rgba(245,158,11,0.35)" : "none",
|
||||||
>
|
}}
|
||||||
<Lightbulb
|
animate={{ scale: isOn ? 1 : 0.97 }}
|
||||||
size={20}
|
transition={{ duration: 0.3 }}
|
||||||
color={isOn ? "#f59e0b" : "var(--text-secondary)"}
|
>
|
||||||
fill={isOn ? "#f59e0b" : "none"}
|
<Lightbulb
|
||||||
/>
|
size={32}
|
||||||
</div>
|
color={isOn ? "#f59e0b" : "rgba(255,255,255,0.35)"}
|
||||||
<div
|
fill={isOn ? "#f59e0b" : "none"}
|
||||||
className="text-sm font-semibold"
|
strokeWidth={isOn ? 1.5 : 2}
|
||||||
style={{ color: "var(--text-primary)" }}
|
/>
|
||||||
>
|
</motion.div>
|
||||||
{name}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs mt-0.5"
|
|
||||||
style={{ color: isOn ? "#f59e0b" : "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{isOn ? (showSlider ? `${localBrightness}%` : "Включён") : "Выключен"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Toggle */}
|
{/* Toggle */}
|
||||||
<motion.div
|
<motion.div
|
||||||
@@ -99,52 +91,70 @@ export default function LightCard({
|
|||||||
background: isOn
|
background: isOn
|
||||||
? "#f59e0b"
|
? "#f59e0b"
|
||||||
: "rgba(255,255,255,0.1)",
|
: "rgba(255,255,255,0.1)",
|
||||||
|
boxShadow: isOn ? "0 0 16px rgba(245,158,11,0.5)" : "none",
|
||||||
}}
|
}}
|
||||||
onClick={handleToggle}
|
onClick={handleToggle}
|
||||||
whileTap={{ scale: 0.9 }}
|
whileTap={{ scale: 0.88 }}
|
||||||
>
|
>
|
||||||
<div className="toggle-thumb" />
|
<div className="toggle-thumb" />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showSlider && isOn && (
|
{/* Name + state */}
|
||||||
<motion.div
|
<div className="mt-auto">
|
||||||
className="mt-4"
|
<div
|
||||||
initial={{ opacity: 0, y: 5 }}
|
className="text-xl font-bold leading-tight"
|
||||||
animate={{ opacity: 1, y: 0 }}
|
style={{ color: isOn ? "#f59e0b" : "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
<div
|
{name}
|
||||||
className="text-xs mb-2 flex justify-between"
|
</div>
|
||||||
style={{ color: "var(--text-secondary)" }}
|
<div
|
||||||
>
|
className="text-sm mt-1 font-medium"
|
||||||
<span>Яркость</span>
|
style={{ color: isOn ? "rgba(245,158,11,0.7)" : "var(--text-secondary)" }}
|
||||||
<span>{localBrightness}%</span>
|
>
|
||||||
</div>
|
{isOn ? (showSlider ? `Яркость ${localBrightness}%` : "Включён") : "Выключен"}
|
||||||
<div className="relative">
|
</div>
|
||||||
<div
|
|
||||||
className="absolute inset-y-0 left-0 rounded-l-full pointer-events-none"
|
{/* Brightness slider */}
|
||||||
style={{
|
<AnimatePresence>
|
||||||
width: `${localBrightness}%`,
|
{showSlider && isOn && (
|
||||||
background: "linear-gradient(90deg, rgba(245,158,11,0.4), rgba(245,158,11,0.8))",
|
<motion.div
|
||||||
height: "6px",
|
className="mt-4"
|
||||||
top: "50%",
|
initial={{ opacity: 0, height: 0 }}
|
||||||
transform: "translateY(-50%)",
|
animate={{ opacity: 1, height: "auto" }}
|
||||||
}}
|
exit={{ opacity: 0, height: 0 }}
|
||||||
/>
|
transition={{ duration: 0.25 }}
|
||||||
<input
|
>
|
||||||
type="range"
|
<div className="relative pt-1">
|
||||||
min={5}
|
<div
|
||||||
max={100}
|
className="absolute left-0 rounded-full pointer-events-none"
|
||||||
value={localBrightness}
|
style={{
|
||||||
onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
|
width: `${localBrightness}%`,
|
||||||
onMouseUp={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
height: "6px",
|
||||||
onTouchEnd={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
top: "calc(50% + 4px)",
|
||||||
className="w-full relative z-10"
|
background: "linear-gradient(90deg, rgba(245,158,11,0.5), rgba(245,158,11,0.9))",
|
||||||
style={{ background: "transparent" }}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
<input
|
||||||
</motion.div>
|
type="range"
|
||||||
)}
|
min={5}
|
||||||
|
max={100}
|
||||||
|
value={localBrightness}
|
||||||
|
onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
|
||||||
|
onMouseUp={(e) =>
|
||||||
|
handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))
|
||||||
|
}
|
||||||
|
onTouchEnd={(e) =>
|
||||||
|
handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))
|
||||||
|
}
|
||||||
|
className="w-full relative z-10"
|
||||||
|
style={{ background: "transparent" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { PiggyBank } from "lucide-react";
|
import { Target } from "lucide-react";
|
||||||
|
|
||||||
interface Saving {
|
interface Saving {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -17,31 +17,51 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function formatAmount(n: number): string {
|
function formatAmount(n: number): string {
|
||||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}М`;
|
||||||
if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
|
if (n >= 1_000) return `${Math.round(n / 1_000)}К`;
|
||||||
return String(n);
|
return String(n);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const COLORS = ["#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e"];
|
||||||
|
|
||||||
export default function SavingsCard({ savings }: Props) {
|
export default function SavingsCard({ savings }: Props) {
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card p-5 h-full flex flex-col"
|
className="glass-card p-6 h-full flex flex-col"
|
||||||
style={{
|
style={{
|
||||||
background: "rgba(99,102,241,0.04)",
|
background: "rgba(245,158,11,0.04)",
|
||||||
border: "1px solid rgba(99,102,241,0.12)",
|
border: "1px solid rgba(245,158,11,0.15)",
|
||||||
}}
|
}}
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.35, delay: 0.21 }}
|
||||||
whileHover={{ scale: 1.01 }}
|
whileHover={{ scale: 1.01 }}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2 mb-4">
|
{/* Header */}
|
||||||
<PiggyBank size={18} color="#6366f1" />
|
<div className="flex items-center gap-3 mb-5">
|
||||||
<span
|
<div
|
||||||
className="text-sm font-semibold"
|
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{
|
||||||
|
background: "rgba(245,158,11,0.2)",
|
||||||
|
boxShadow: "0 0 16px rgba(245,158,11,0.3)",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Накопления
|
<Target size={20} color="#f59e0b" />
|
||||||
</span>
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="text-base font-bold"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Накопления
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
{savings.length} {savings.length === 1 ? "цель" : "целей"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 space-y-4">
|
<div className="flex-1 space-y-4">
|
||||||
@@ -50,56 +70,57 @@ export default function SavingsCard({ savings }: Props) {
|
|||||||
100,
|
100,
|
||||||
Math.round((s.current_amount / s.target_amount) * 100)
|
Math.round((s.current_amount / s.target_amount) * 100)
|
||||||
);
|
);
|
||||||
const color = s.color || "#6366f1";
|
const color = s.color || COLORS[i % COLORS.length];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={s.id}
|
key={s.id}
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 10 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: i * 0.1 }}
|
transition={{ delay: 0.1 + i * 0.1 }}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="flex items-center justify-between mb-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{s.icon && <span className="text-base">{s.icon}</span>}
|
{s.icon && <span className="text-base">{s.icon}</span>}
|
||||||
<span
|
<span
|
||||||
className="text-xs font-medium"
|
className="text-sm font-semibold"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{ color: "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
{s.name}
|
{s.name}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className="text-xs font-semibold"
|
className="text-sm font-black"
|
||||||
style={{ color }}
|
style={{ color }}
|
||||||
>
|
>
|
||||||
{pct}%
|
{pct}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bar with glow */}
|
||||||
<div className="progress-bar">
|
<div className="progress-bar">
|
||||||
<motion.div
|
<motion.div
|
||||||
className="progress-fill"
|
className="h-full rounded-full"
|
||||||
style={{
|
style={{
|
||||||
background: `linear-gradient(90deg, ${color}aa, ${color})`,
|
background: `linear-gradient(90deg, ${color}80, ${color})`,
|
||||||
width: `${pct}%`,
|
boxShadow: `0 0 12px ${color}60`,
|
||||||
}}
|
}}
|
||||||
initial={{ width: "0%" }}
|
initial={{ width: "0%" }}
|
||||||
animate={{ width: `${pct}%` }}
|
animate={{ width: `${pct}%` }}
|
||||||
transition={{
|
transition={{
|
||||||
duration: 1,
|
duration: 1.2,
|
||||||
delay: i * 0.2,
|
delay: 0.2 + i * 0.15,
|
||||||
ease: "easeOut",
|
ease: "easeOut",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="flex justify-between text-xs mt-1"
|
className="flex justify-between text-xs mt-1.5"
|
||||||
style={{ color: "var(--text-secondary)" }}
|
style={{ color: "var(--text-secondary)" }}
|
||||||
>
|
>
|
||||||
<span>{formatAmount(s.current_amount)} ₽</span>
|
<span>{formatAmount(s.current_amount)} ₽</span>
|
||||||
<span>цель: {formatAmount(s.target_amount)} ₽</span>
|
<span>из {formatAmount(s.target_amount)} ₽</span>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { useState, useCallback } from "react";
|
import { useState, useCallback } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { CheckSquare, Square, Plus } from "lucide-react";
|
import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
|
||||||
import { createTask, toggleTask } from "@/lib/api";
|
import { createTask, toggleTask } from "@/lib/api";
|
||||||
import AddTaskModal from "../AddTaskModal";
|
import AddTaskModal from "../AddTaskModal";
|
||||||
|
|
||||||
@@ -49,57 +49,84 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card p-5 h-full flex flex-col"
|
className="glass-card p-6 h-full flex flex-col"
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.35, delay: 0.14 }}
|
||||||
whileHover={{ scale: 1.005 }}
|
whileHover={{ scale: 1.005 }}
|
||||||
>
|
>
|
||||||
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<div>
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center gap-2">
|
<div
|
||||||
<CheckSquare size={18} color="#6366f1" />
|
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||||
<span
|
style={{
|
||||||
className="text-sm font-semibold"
|
background: "rgba(139,92,246,0.18)",
|
||||||
|
boxShadow: "0 0 18px rgba(139,92,246,0.3)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListTodo size={20} color="#8b5cf6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="text-base font-bold"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{ color: "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
Задачи сегодня
|
Задачи
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
className="text-xs"
|
||||||
className="text-xs mt-0.5"
|
style={{ color: "var(--text-secondary)" }}
|
||||||
style={{ color: "var(--text-secondary)" }}
|
>
|
||||||
>
|
{pending.length > 0
|
||||||
{pending.length} осталось из {localTasks.length}
|
? `${pending.length} из ${localTasks.length} осталось`
|
||||||
|
: "Всё готово!"}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Add button */}
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={() => setModalOpen(true)}
|
onClick={() => setModalOpen(true)}
|
||||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||||
style={{
|
style={{
|
||||||
background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
|
background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
|
||||||
boxShadow: "0 0 12px rgba(99,102,241,0.4)",
|
boxShadow: "0 0 18px rgba(139,92,246,0.45)",
|
||||||
}}
|
}}
|
||||||
whileTap={{ scale: 0.85 }}
|
whileTap={{ scale: 0.82 }}
|
||||||
>
|
>
|
||||||
<Plus size={16} color="white" />
|
<Plus size={20} color="white" strokeWidth={2.5} />
|
||||||
</motion.button>
|
</motion.button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto space-y-2 pr-1">
|
{/* Task list */}
|
||||||
<AnimatePresence>
|
<div className="flex-1 overflow-y-auto space-y-2 pr-0.5">
|
||||||
|
<AnimatePresence initial={false}>
|
||||||
{localTasks.length === 0 && (
|
{localTasks.length === 0 && (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="text-center py-8"
|
className="flex flex-col items-center justify-center h-full py-8 gap-3"
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
>
|
>
|
||||||
<div className="text-3xl mb-2">🎉</div>
|
<div className="text-4xl">🎉</div>
|
||||||
<div
|
<div
|
||||||
className="text-sm"
|
className="text-sm font-medium"
|
||||||
style={{ color: "var(--text-secondary)" }}
|
style={{ color: "var(--text-secondary)" }}
|
||||||
>
|
>
|
||||||
Всё сделано!
|
Всё сделано на сегодня!
|
||||||
</div>
|
</div>
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setModalOpen(true)}
|
||||||
|
className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
|
||||||
|
style={{
|
||||||
|
background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
|
||||||
|
border: "1px solid rgba(139,92,246,0.35)",
|
||||||
|
color: "#8b5cf6",
|
||||||
|
}}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
+ Добавить задачу
|
||||||
|
</motion.button>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -107,32 +134,36 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
|
|||||||
<motion.div
|
<motion.div
|
||||||
key={task.id}
|
key={task.id}
|
||||||
layout
|
layout
|
||||||
initial={{ opacity: 0, x: -10 }}
|
initial={{ opacity: 0, x: -12, height: 0 }}
|
||||||
animate={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, x: 0, height: "auto" }}
|
||||||
exit={{ opacity: 0, x: 10, height: 0 }}
|
exit={{ opacity: 0, x: 12, height: 0 }}
|
||||||
className="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer"
|
transition={{ duration: 0.2 }}
|
||||||
|
className="flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
|
||||||
style={{
|
style={{
|
||||||
background: task.done
|
background: task.done
|
||||||
? "rgba(16,185,129,0.06)"
|
? "rgba(139,92,246,0.05)"
|
||||||
: "rgba(255,255,255,0.04)",
|
: "rgba(255,255,255,0.04)",
|
||||||
border: task.done
|
border: task.done
|
||||||
? "1px solid rgba(16,185,129,0.15)"
|
? "1px solid rgba(139,92,246,0.15)"
|
||||||
: "1px solid rgba(255,255,255,0.06)",
|
: "1px solid rgba(255,255,255,0.06)",
|
||||||
}}
|
}}
|
||||||
onClick={() => handleToggle(task)}
|
onClick={() => handleToggle(task)}
|
||||||
whileTap={{ scale: 0.97 }}
|
whileTap={{ scale: 0.97 }}
|
||||||
>
|
>
|
||||||
{task.done ? (
|
<motion.div
|
||||||
<CheckSquare size={16} color="#10b981" />
|
initial={{ scale: 0.8 }}
|
||||||
) : (
|
animate={{ scale: 1 }}
|
||||||
<Square size={16} color="var(--text-secondary)" />
|
>
|
||||||
)}
|
{task.done ? (
|
||||||
|
<CheckCircle2 size={20} color="#8b5cf6" strokeWidth={2} />
|
||||||
|
) : (
|
||||||
|
<Circle size={20} color="rgba(255,255,255,0.3)" strokeWidth={1.5} />
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
<span
|
<span
|
||||||
className="text-xs font-medium flex-1 leading-snug"
|
className="text-sm font-medium flex-1 leading-snug"
|
||||||
style={{
|
style={{
|
||||||
color: task.done
|
color: task.done ? "var(--text-secondary)" : "var(--text-primary)",
|
||||||
? "var(--text-secondary)"
|
|
||||||
: "var(--text-primary)",
|
|
||||||
textDecoration: task.done ? "line-through" : "none",
|
textDecoration: task.done ? "line-through" : "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ export default function TemperatureCard({
|
|||||||
}: Props) {
|
}: Props) {
|
||||||
const [target, setTarget] = useState(targetTemp || 22);
|
const [target, setTarget] = useState(targetTemp || 22);
|
||||||
const isHeating = state === "heat";
|
const isHeating = state === "heat";
|
||||||
|
const isActive = state !== "off";
|
||||||
|
|
||||||
const adjust = useCallback(
|
const adjust = useCallback(
|
||||||
async (delta: number) => {
|
async (delta: number) => {
|
||||||
@@ -33,97 +34,122 @@ export default function TemperatureCard({
|
|||||||
[target, entityId, onUpdate]
|
[target, entityId, onUpdate]
|
||||||
);
|
);
|
||||||
|
|
||||||
const tempDiff = currentTemp ? currentTemp - target : 0;
|
const accentColor = isHeating ? "#f43f5e" : "#3b82f6";
|
||||||
|
const accentBg = isHeating ? "rgba(244,63,94,0.08)" : "rgba(59,130,246,0.08)";
|
||||||
|
const accentBorder = isHeating ? "rgba(244,63,94,0.2)" : "rgba(59,130,246,0.2)";
|
||||||
|
const accentGlow = isHeating ? "rgba(244,63,94,0.25)" : "rgba(59,130,246,0.2)";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card p-5 h-full flex flex-col justify-between"
|
className="glass-card p-6 h-full flex flex-col justify-between"
|
||||||
style={
|
style={
|
||||||
isHeating
|
isActive
|
||||||
? {
|
? {
|
||||||
background: "rgba(244,63,94,0.06)",
|
background: accentBg,
|
||||||
border: "1px solid rgba(244,63,94,0.15)",
|
border: `1px solid ${accentBorder}`,
|
||||||
|
boxShadow: `0 0 40px ${accentGlow}`,
|
||||||
}
|
}
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.35, delay: 0.07 }}
|
||||||
whileHover={{ scale: 1.01 }}
|
whileHover={{ scale: 1.01 }}
|
||||||
>
|
>
|
||||||
|
{/* Icon row */}
|
||||||
<div className="flex items-start justify-between">
|
<div className="flex items-start justify-between">
|
||||||
<div>
|
<motion.div
|
||||||
<div
|
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
|
style={{
|
||||||
style={{
|
background: isActive ? `${accentColor}22` : "rgba(255,255,255,0.06)",
|
||||||
background: isHeating
|
boxShadow: isActive ? `0 0 28px ${accentGlow}` : "none",
|
||||||
? "rgba(244,63,94,0.15)"
|
}}
|
||||||
: "rgba(255,255,255,0.06)",
|
>
|
||||||
}}
|
<Thermometer
|
||||||
>
|
size={32}
|
||||||
<Thermometer
|
color={isActive ? accentColor : "rgba(255,255,255,0.35)"}
|
||||||
size={20}
|
strokeWidth={1.5}
|
||||||
color={isHeating ? "#f43f5e" : "var(--text-secondary)"}
|
/>
|
||||||
/>
|
</motion.div>
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-sm font-semibold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
Термостат
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs mt-0.5"
|
|
||||||
style={{ color: isHeating ? "#f43f5e" : "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{isHeating ? "Нагрев" : "Ожидание"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-right">
|
{/* Status badge */}
|
||||||
<div
|
<div
|
||||||
className="text-3xl font-bold"
|
className="px-3 py-1 rounded-full text-xs font-semibold"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{
|
||||||
>
|
background: isActive ? `${accentColor}18` : "rgba(255,255,255,0.06)",
|
||||||
{currentTemp?.toFixed(1) ?? "—"}°
|
color: isActive ? accentColor : "var(--text-secondary)",
|
||||||
</div>
|
border: `1px solid ${isActive ? accentColor + "40" : "rgba(255,255,255,0.08)"}`,
|
||||||
<div
|
}}
|
||||||
className="text-xs"
|
>
|
||||||
style={{ color: "var(--text-secondary)" }}
|
{isHeating ? "Нагрев" : isActive ? "Охлаждение" : "Выкл"}
|
||||||
>
|
|
||||||
текущая
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-between mt-4">
|
{/* Current temperature — BIG */}
|
||||||
|
<div className="my-4">
|
||||||
<div
|
<div
|
||||||
className="text-xs"
|
className="font-black leading-none tracking-tight"
|
||||||
|
style={{
|
||||||
|
fontSize: "56px",
|
||||||
|
color: isActive ? accentColor : "var(--text-primary)",
|
||||||
|
textShadow: isActive ? `0 0 40px ${accentColor}60` : "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{currentTemp?.toFixed(1) ?? "—"}°
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-sm mt-1"
|
||||||
style={{ color: "var(--text-secondary)" }}
|
style={{ color: "var(--text-secondary)" }}
|
||||||
>
|
>
|
||||||
Целевая температура
|
текущая температура
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Target temperature controls */}
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between px-4 py-3 rounded-2xl"
|
||||||
|
style={{
|
||||||
|
background: "rgba(255,255,255,0.04)",
|
||||||
|
border: "1px solid rgba(255,255,255,0.07)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="text-sm font-medium"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Цель
|
||||||
|
</span>
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={() => adjust(-0.5)}
|
onClick={() => adjust(-0.5)}
|
||||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||||
style={{ background: "rgba(255,255,255,0.08)" }}
|
style={{
|
||||||
whileTap={{ scale: 0.85 }}
|
background: "rgba(255,255,255,0.08)",
|
||||||
|
border: "1px solid rgba(255,255,255,0.1)",
|
||||||
|
}}
|
||||||
|
whileTap={{ scale: 0.82 }}
|
||||||
>
|
>
|
||||||
<Minus size={14} color="var(--text-primary)" />
|
<Minus size={16} color="var(--text-primary)" />
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className="text-lg font-bold min-w-[48px] text-center"
|
className="text-2xl font-bold min-w-[56px] text-center"
|
||||||
style={{ color: "#6366f1" }}
|
style={{ color: accentColor }}
|
||||||
>
|
>
|
||||||
{target}°
|
{target}°
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={() => adjust(0.5)}
|
onClick={() => adjust(0.5)}
|
||||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||||
style={{ background: "rgba(99,102,241,0.2)" }}
|
style={{
|
||||||
whileTap={{ scale: 0.85 }}
|
background: `${accentColor}22`,
|
||||||
|
border: `1px solid ${accentColor}50`,
|
||||||
|
}}
|
||||||
|
whileTap={{ scale: 0.82 }}
|
||||||
>
|
>
|
||||||
<Plus size={14} color="#6366f1" />
|
<Plus size={16} color={accentColor} />
|
||||||
</motion.button>
|
</motion.button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -30,14 +30,11 @@ export default function WeatherCard({ weather }: Props) {
|
|||||||
if (!weather) {
|
if (!weather) {
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card p-5 h-full flex items-center justify-center"
|
className="glass-card p-6 h-full flex items-center justify-center"
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
>
|
>
|
||||||
<div
|
<div className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||||
className="text-sm"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
Загрузка погоды...
|
Загрузка погоды...
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@@ -46,91 +43,93 @@ export default function WeatherCard({ weather }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="glass-card p-5 h-full flex flex-col"
|
className="glass-card p-6 h-full flex flex-col"
|
||||||
style={{
|
style={{
|
||||||
background: "rgba(6,182,212,0.04)",
|
background: "rgba(59,130,246,0.05)",
|
||||||
border: "1px solid rgba(6,182,212,0.12)",
|
border: "1px solid rgba(59,130,246,0.15)",
|
||||||
}}
|
}}
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.35, delay: 0.21 }}
|
||||||
whileHover={{ scale: 1.01 }}
|
whileHover={{ scale: 1.01 }}
|
||||||
>
|
>
|
||||||
<div className="flex items-start justify-between mb-4">
|
{/* Location */}
|
||||||
|
<div
|
||||||
|
className="text-sm font-medium mb-3"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
📍 Санкт-Петербург
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Current weather */}
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<div className="text-5xl leading-none">
|
||||||
|
{getWeatherEmoji(weather.weatherCode)}
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
className="text-sm font-semibold"
|
className="font-black leading-none"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{ fontSize: "44px", color: "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
🌍 Санкт-Петербург
|
{weather.temp}°
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3 mt-2">
|
<div
|
||||||
<span className="text-3xl font-bold" style={{ color: "var(--text-primary)" }}>
|
className="text-sm mt-1"
|
||||||
{getWeatherEmoji(weather.weatherCode)}
|
style={{ color: "var(--text-secondary)" }}
|
||||||
</span>
|
>
|
||||||
<div>
|
{weather.desc}
|
||||||
<div
|
|
||||||
className="text-2xl font-bold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{weather.temp}°C
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{weather.desc}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right space-y-1">
|
</div>
|
||||||
<div className="flex items-center gap-1 justify-end">
|
|
||||||
<Droplets size={12} color="#06b6d4" />
|
{/* Stats */}
|
||||||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
<div className="flex gap-4 mb-4">
|
||||||
{weather.humidity}%
|
<div className="flex items-center gap-1.5">
|
||||||
</span>
|
<Droplets size={14} color="#3b82f6" />
|
||||||
</div>
|
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||||||
<div className="flex items-center gap-1 justify-end">
|
{weather.humidity}%
|
||||||
<Wind size={12} color="#8b5cf6" />
|
</span>
|
||||||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
</div>
|
||||||
{weather.windSpeed} км/ч
|
<div className="flex items-center gap-1.5">
|
||||||
</span>
|
<Wind size={14} color="#8b5cf6" />
|
||||||
</div>
|
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||||||
|
{weather.windSpeed} км/ч
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Ощущается {weather.feelsLike}°
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Forecast */}
|
{/* Forecast */}
|
||||||
<div className="flex gap-2 mt-auto">
|
<div className="flex gap-2 mt-auto">
|
||||||
{(weather.forecast || []).map((day: any, i: number) => (
|
{(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={day.date}
|
key={day.date}
|
||||||
className="flex-1 rounded-xl p-3 text-center"
|
className="flex-1 rounded-2xl p-2.5 text-center"
|
||||||
style={{
|
style={{
|
||||||
background: i === 0
|
background: i === 0 ? "rgba(59,130,246,0.14)" : "rgba(255,255,255,0.04)",
|
||||||
? "rgba(99,102,241,0.12)"
|
border: i === 0 ? "1px solid rgba(59,130,246,0.28)" : "1px solid rgba(255,255,255,0.06)",
|
||||||
: "rgba(255,255,255,0.04)",
|
|
||||||
border: i === 0
|
|
||||||
? "1px solid rgba(99,102,241,0.25)"
|
|
||||||
: "1px solid rgba(255,255,255,0.06)",
|
|
||||||
}}
|
}}
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 8 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: i * 0.1 }}
|
transition={{ delay: 0.3 + i * 0.08 }}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="text-xs mb-1 font-medium"
|
className="text-xs mb-1 font-medium"
|
||||||
style={{ color: "var(--text-secondary)" }}
|
style={{ color: "var(--text-secondary)" }}
|
||||||
>
|
>
|
||||||
{i === 0 ? "Сегодня" : formatDate(day.date)}
|
{i === 0 ? "Сег." : formatDate(day.date)}
|
||||||
</div>
|
|
||||||
<div className="text-lg mb-1">
|
|
||||||
{getWeatherEmoji(day.weatherCode)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="text-lg mb-1">{getWeatherEmoji(day.weatherCode)}</div>
|
||||||
<div
|
<div
|
||||||
className="text-xs font-semibold"
|
className="text-xs font-bold"
|
||||||
style={{ color: "var(--text-primary)" }}
|
style={{ color: "var(--text-primary)" }}
|
||||||
>
|
>
|
||||||
{day.maxTemp}° / {day.minTemp}°
|
{day.maxTemp}°/{day.minTemp}°
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
85
components/cards/WeatherSavingsCard.tsx
Normal file
85
components/cards/WeatherSavingsCard.tsx
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import WeatherCard from "./WeatherCard";
|
||||||
|
import SavingsCard from "./SavingsCard";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
weather: any;
|
||||||
|
savings: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WeatherSavingsCard({ weather, savings }: Props) {
|
||||||
|
const [view, setView] = useState<"weather" | "savings">("weather");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full flex flex-col gap-2">
|
||||||
|
{/* Toggle pills */}
|
||||||
|
<div
|
||||||
|
className="flex rounded-2xl p-1 gap-1"
|
||||||
|
style={{
|
||||||
|
background: "rgba(255,255,255,0.04)",
|
||||||
|
border: "1px solid rgba(255,255,255,0.07)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[
|
||||||
|
{ id: "weather", label: "🌤 Погода" },
|
||||||
|
{ id: "savings", label: "💰 Цели" },
|
||||||
|
].map((tab) => (
|
||||||
|
<motion.button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setView(tab.id as "weather" | "savings")}
|
||||||
|
className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
|
||||||
|
style={{
|
||||||
|
color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
|
||||||
|
}}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
{view === tab.id && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 rounded-xl"
|
||||||
|
style={{
|
||||||
|
background: "rgba(255,255,255,0.08)",
|
||||||
|
border: "1px solid rgba(255,255,255,0.12)",
|
||||||
|
}}
|
||||||
|
layoutId="wsToggle"
|
||||||
|
transition={{ type: "spring", stiffness: 500, damping: 35 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<span className="relative z-10">{tab.label}</span>
|
||||||
|
</motion.button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 min-h-0">
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
{view === "weather" ? (
|
||||||
|
<motion.div
|
||||||
|
key="weather"
|
||||||
|
className="h-full"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 10 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
<WeatherCard weather={weather} />
|
||||||
|
</motion.div>
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
key="savings"
|
||||||
|
className="h-full"
|
||||||
|
initial={{ opacity: 0, x: 10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -10 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
<SavingsCard savings={savings} />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user