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
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 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>
|
||||
|
||||
Reference in New Issue
Block a user