feat: settings (PIN change, city selector, logout), greeting, screensaver, tab animations, HA status

app/api/auth/route.ts

@@ -1,8 +1,27 @@
 import { NextResponse } from 'next/server'
 import * as crypto from 'crypto'
+import * as fs from 'fs'
+import * as path from 'path'
 
 const SECRET = process.env.APP_SECRET || 'smart-home-default-secret-change-me'
-const PIN = process.env.APP_PIN || '1234'
+const CONFIG_PATH = '/tmp/tablet-config.json'
+
+function loadConfig(): { pin: string } {
+  try {
+    if (fs.existsSync(CONFIG_PATH)) {
+      return JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'))
+    }
+  } catch {}
+  return { pin: process.env.APP_PIN || '1234' }
+}
+
+function saveConfig(config: { pin: string }) {
+  fs.writeFileSync(CONFIG_PATH, JSON.stringify(config))
+}
+
+function getPin(): string {
+  return loadConfig().pin
+}
 
 function makeToken(pin: string): string {
   return crypto.createHmac('sha256', SECRET).update(pin).digest('hex')
@@ -19,11 +38,11 @@ export async function GET(req: Request) {
 export async function POST(req: Request) {
   const { pin } = await req.json()
 
-  if (pin !== PIN) {
+  if (pin !== getPin()) {
     return NextResponse.json({ error: 'wrong_pin' }, { status: 401 })
   }
 
-  const token = makeToken(PIN)
+  const token = makeToken(getPin())
   const res = NextResponse.json({ success: true })
 
   res.cookies.set('auth_token', token, {
@@ -37,6 +56,37 @@ export async function POST(req: Request) {
   return res
 }
 
+
+export async function PUT(req: Request) {
+  const { oldPin, newPin } = await req.json()
+
+  if (!oldPin || !newPin) {
+    return NextResponse.json({ error: 'oldPin and newPin required' }, { status: 400 })
+  }
+
+  if (newPin.length < 4 || newPin.length > 8) {
+    return NextResponse.json({ error: 'PIN must be 4-8 digits' }, { status: 400 })
+  }
+
+  if (oldPin !== getPin()) {
+    return NextResponse.json({ error: 'wrong_pin' }, { status: 401 })
+  }
+
+  saveConfig({ pin: newPin })
+
+  // Set new auth cookie
+  const token = makeToken(newPin)
+  const res = NextResponse.json({ success: true })
+  res.cookies.set('auth_token', token, {
+    httpOnly: true,
+    secure: true,
+    sameSite: 'strict',
+    path: '/',
+    maxAge: 60 * 60 * 24 * 365,
+  })
+
+  return res
+}
 export async function DELETE() {
   const res = NextResponse.json({ success: true })
   res.cookies.delete('auth_token')

app/api/weather/route.ts

@@ -36,14 +36,18 @@ function wmoToDesc(wmo: number): string {
   return "Облачно";
 }
 
-export async function GET() {
+export async function GET(req: Request) {
   try {
+    const { searchParams } = new URL(req.url);
+    const lat = searchParams.get("lat") || "59.9343";
+    const lon = searchParams.get("lon") || "30.3351";
+
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 8000);
 
     const url = "https://api.open-meteo.com/v1/forecast?" + new URLSearchParams({
-      latitude: "59.9343",
-      longitude: "30.3351",
+      latitude: lat,
+      longitude: lon,
       current: "temperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10m",
       daily: "weather_code,temperature_2m_max,temperature_2m_min",
       timezone: "Europe/Moscow",

app/page.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
-import { Thermometer, Droplets, Wind, Calendar, Lock, Settings as SettingsIcon, LogOut, Delete } from 'lucide-react'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Thermometer, Droplets, Wind, Calendar, Lock, Settings as SettingsIcon, LogOut, Delete, KeyRound, MapPin, Info, Check, X as XIcon } from 'lucide-react'
 import Sidebar from '@/components/Sidebar'
 import TopBar from '@/components/TopBar'
 import RoomTabs from '@/components/RoomTabs'
@@ -48,13 +49,8 @@ const ROOMS = [
 ]
 
 const DEVICES_BY_ROOM: Record<string, {
-  id: string
-  name: string
-  icon: string
-  entityId?: string
-  domain?: string
-  haKey?: string
-  isMock?: boolean
+  id: string; name: string; icon: string
+  entityId?: string; domain?: string; haKey?: string; isMock?: boolean
 }[]> = {
   living: [
     { id: 'air_purifier', name: 'Очиститель воздуха', icon: '💨', entityId: 'fan.zhimi_rmb1_9528_air_purifier', domain: 'fan', haKey: 'fan.air_purifier', isMock: false },
@@ -69,20 +65,38 @@ const DEVICES_BY_ROOM: Record<string, {
   bathroom: [],
 }
 
+const CITIES = [
+  { id: 'spb', name: 'Санкт-Петербург', lat: '59.9343', lon: '30.3351' },
+  { id: 'msk', name: 'Москва', lat: '55.7558', lon: '37.6173' },
+  { id: 'nsk', name: 'Новосибирск', lat: '55.0084', lon: '82.9357' },
+  { id: 'ekb', name: 'Екатеринбург', lat: '56.8389', lon: '60.6057' },
+  { id: 'kzn', name: 'Казань', lat: '55.7887', lon: '49.1221' },
+  { id: 'sochi', name: 'Сочи', lat: '43.5855', lon: '39.7231' },
+  { id: 'krd', name: 'Краснодар', lat: '45.0355', lon: '38.9753' },
+]
+
 function getWeatherIcon(desc: string): string {
   const d = desc?.toLowerCase() || ''
   if (d.includes('ясно') || d.includes('солнеч')) return '☀️'
-  if (d.includes('облач')) return '⛅'
+  if (d.includes('облач') || d.includes('перем')) return '⛅'
   if (d.includes('пасмурн')) return '☁️'
-  if (d.includes('дождь') || d.includes('морос')) return '🌧️'
-  if (d.includes('снег')) return '❄️'
+  if (d.includes('дождь') || d.includes('морос') || d.includes('ливен')) return '🌧️'
+  if (d.includes('снег')) return '🌨️'
   if (d.includes('гроз')) return '⛈️'
+  if (d.includes('туман')) return '🌫️'
   return '🌤️'
 }
 
 function formatEventTime(iso: string): string {
-  const d = new Date(iso)
-  return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+  return new Date(iso).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+}
+
+function getGreeting(): string {
+  const h = new Date().getHours()
+  if (h >= 5 && h < 12) return 'Доброе утро'
+  if (h >= 12 && h < 17) return 'Добрый день'
+  if (h >= 17 && h < 22) return 'Добрый вечер'
+  return 'Доброй ночи'
 }
 
 function getPm25Level(pm25: number): { label: string; color: string; bg: string } {
@@ -92,6 +106,77 @@ function getPm25Level(pm25: number): { label: string; color: string; bg: string
   return { label: 'Плохо', color: '#f87171', bg: 'rgba(248,113,113,0.12)' }
 }
 
+// ————— Screensaver —————
+function Screensaver({ weather, onDismiss }: { weather: WeatherData | null; onDismiss: () => void }) {
+  const [time, setTime] = useState(new Date())
+
+  useEffect(() => {
+    const t = setInterval(() => setTime(new Date()), 1000)
+    return () => clearInterval(t)
+  }, [])
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.8 }}
+      onClick={onDismiss}
+      onTouchStart={onDismiss}
+      style={{
+        position: 'fixed', inset: 0, zIndex: 200,
+        background: '#050510',
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center',
+        cursor: 'pointer', gap: 24,
+      }}
+    >
+      {/* Subtle ambient */}
+      <div style={{
+        position: 'absolute', width: 400, height: 400, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%)',
+        animation: 'float1 20s ease-in-out infinite',
+      }} />
+
+      {/* Time */}
+      <div style={{
+        fontSize: 120, fontWeight: 800, color: 'rgba(255,255,255,0.9)',
+        letterSpacing: '-6px', fontVariantNumeric: 'tabular-nums',
+        lineHeight: 1, textShadow: '0 0 60px rgba(99,102,241,0.2)',
+      }}>
+        {time.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
+      </div>
+
+      {/* Date */}
+      <div style={{
+        fontSize: 22, color: 'rgba(255,255,255,0.35)',
+        fontWeight: 500, textTransform: 'capitalize',
+      }}>
+        {time.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
+      </div>
+
+      {/* Weather mini */}
+      {weather && (
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 12,
+          marginTop: 16, color: 'rgba(255,255,255,0.3)',
+        }}>
+          <span style={{ fontSize: 28 }}>{getWeatherIcon(weather.desc)}</span>
+          <span style={{ fontSize: 24, fontWeight: 600 }}>{weather.temp}°</span>
+          <span style={{ fontSize: 16 }}>{weather.desc}</span>
+        </div>
+      )}
+
+      <div style={{
+        position: 'absolute', bottom: 40,
+        fontSize: 13, color: 'rgba(255,255,255,0.15)',
+      }}>
+        Коснитесь для разблокировки
+      </div>
+    </motion.div>
+  )
+}
+
 // ————— Lock Screen —————
 function LockScreen({ onUnlock }: { onUnlock: () => void }) {
   const [pin, setPin] = useState('')
@@ -105,141 +190,79 @@ function LockScreen({ onUnlock }: { onUnlock: () => void }) {
   }, [])
 
   const submit = async (fullPin: string) => {
-    setLoading(true)
-    setError(false)
+    setLoading(true); setError(false)
     try {
       const r = await fetch('/api/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ pin: fullPin }),
       })
-      if (r.ok) {
-        onUnlock()
-      } else {
-        setError(true)
-        setPin('')
-        setTimeout(() => setError(false), 1500)
-      }
-    } catch {
-      setError(true)
-      setPin('')
-    } finally {
-      setLoading(false)
-    }
+      if (r.ok) onUnlock()
+      else { setError(true); setPin(''); setTimeout(() => setError(false), 1500) }
+    } catch { setError(true); setPin('') }
+    finally { setLoading(false) }
   }
 
   const handleDigit = (d: string) => {
     if (pin.length >= 6) return
     const next = pin + d
     setPin(next)
-    if (next.length === 4) {
-      submit(next)
-    }
-  }
-
-  const handleDelete = () => {
-    setPin(p => p.slice(0, -1))
+    if (next.length === 4) submit(next)
   }
 
   const digits = ['1','2','3','4','5','6','7','8','9','','0','del']
 
   return (
     <div style={{
-      position: 'fixed', inset: 0, zIndex: 200,
-      background: '#0c0c18',
-      display: 'flex', flexDirection: 'column',
-      alignItems: 'center', justifyContent: 'center',
-      gap: 40,
+      position: 'fixed', inset: 0, zIndex: 200, background: '#0c0c18',
+      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40,
     }}>
-      {/* Ambient orbs */}
       <div className="bg-ambient" />
-
-      {/* Time */}
       <div style={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
-        <div style={{
-          fontSize: 64, fontWeight: 800, color: 'var(--text-primary)',
-          letterSpacing: '-3px', fontVariantNumeric: 'tabular-nums',
-        }}>
+        <div style={{ fontSize: 64, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-3px', fontVariantNumeric: 'tabular-nums' }}>
           {time.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
         </div>
-        <div style={{
-          fontSize: 16, color: 'var(--text-secondary)', marginTop: 4,
-          textTransform: 'capitalize', fontWeight: 500,
-        }}>
+        <div style={{ fontSize: 16, color: 'var(--text-secondary)', marginTop: 4, textTransform: 'capitalize', fontWeight: 500 }}>
           {time.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
         </div>
       </div>
-
-      {/* Lock icon + PIN dots */}
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20, position: 'relative', zIndex: 1 }}>
         <div style={{
           width: 56, height: 56, borderRadius: 18,
-          background: error
-            ? 'rgba(239,68,68,0.15)'
-            : 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))',
-          border: error
-            ? '1px solid rgba(239,68,68,0.3)'
-            : '1px solid rgba(129,140,248,0.25)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          transition: 'all 0.3s ease',
+          background: error ? 'rgba(239,68,68,0.15)' : 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))',
+          border: error ? '1px solid rgba(239,68,68,0.3)' : '1px solid rgba(129,140,248,0.25)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.3s ease',
         }}>
           <Lock size={24} color={error ? '#f87171' : '#a5b4fc'} />
         </div>
-
-        {/* PIN dots */}
         <div style={{ display: 'flex', gap: 14 }}>
           {[0,1,2,3].map(i => (
             <div key={i} style={{
               width: 14, height: 14, borderRadius: '50%',
-              background: i < pin.length
-                ? (error ? '#f87171' : '#a5b4fc')
-                : 'rgba(255,255,255,0.1)',
+              background: i < pin.length ? (error ? '#f87171' : '#a5b4fc') : 'rgba(255,255,255,0.1)',
               border: `1px solid ${i < pin.length ? (error ? 'rgba(239,68,68,0.5)' : 'rgba(165,180,252,0.5)') : 'rgba(255,255,255,0.15)'}`,
-              transition: 'all 0.2s ease',
-              transform: i < pin.length ? 'scale(1.15)' : 'scale(1)',
+              transition: 'all 0.2s ease', transform: i < pin.length ? 'scale(1.15)' : 'scale(1)',
             }} />
           ))}
         </div>
-
-        {error && (
-          <div style={{ fontSize: 13, color: '#f87171', fontWeight: 500 }}>
-            Неверный PIN
-          </div>
-        )}
+        {error && <div style={{ fontSize: 13, color: '#f87171', fontWeight: 500 }}>Неверный PIN</div>}
       </div>
-
-      {/* Numpad */}
-      <div style={{
-        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
-        gap: 12, position: 'relative', zIndex: 1,
-      }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, position: 'relative', zIndex: 1 }}>
         {digits.map((d, i) => {
           if (d === '') return <div key={i} />
-          if (d === 'del') {
-            return (
-              <button key={i} onClick={handleDelete} style={{
-                width: 72, height: 72, borderRadius: 20,
-                background: 'rgba(255,255,255,0.03)',
-                border: '1px solid rgba(255,255,255,0.06)',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                color: 'var(--text-secondary)',
-                transition: 'all 0.15s ease',
-              }}>
-                <Delete size={22} />
-              </button>
-            )
-          }
+          if (d === 'del') return (
+            <button key={i} onClick={() => setPin(p => p.slice(0, -1))} style={{
+              width: 72, height: 72, borderRadius: 20, background: 'rgba(255,255,255,0.03)',
+              border: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              color: 'var(--text-secondary)', transition: 'all 0.15s ease',
+            }}><Delete size={22} /></button>
+          )
           return (
             <button key={i} onClick={() => handleDigit(d)} style={{
-              width: 72, height: 72, borderRadius: 20,
-              background: 'rgba(255,255,255,0.04)',
-              border: '1px solid rgba(255,255,255,0.07)',
-              fontSize: 24, fontWeight: 600,
-              color: 'var(--text-primary)',
-              transition: 'all 0.15s ease',
-            }}>
-              {d}
-            </button>
+              width: 72, height: 72, borderRadius: 20, background: 'rgba(255,255,255,0.04)',
+              border: '1px solid rgba(255,255,255,0.07)', fontSize: 24, fontWeight: 600,
+              color: 'var(--text-primary)', transition: 'all 0.15s ease',
+            }}>{d}</button>
           )
         })}
       </div>
@@ -251,6 +274,7 @@ function LockScreen({ onUnlock }: { onUnlock: () => void }) {
 function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: SensorData | null }) {
   const [todayEvents, setTodayEvents] = useState<CalendarEvent[]>([])
   const [calLoading, setCalLoading] = useState(true)
+  const [greeting, setGreeting] = useState(getGreeting())
 
   useEffect(() => {
     fetch('/api/calendar?range=today')
@@ -260,22 +284,33 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
       .finally(() => setCalLoading(false))
   }, [])
 
+  useEffect(() => {
+    const t = setInterval(() => setGreeting(getGreeting()), 60000)
+    return () => clearInterval(t)
+  }, [])
+
   const pm25Info = sensors ? getPm25Level(sensors.pm25) : null
 
   return (
     <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '20px 24px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* Greeting */}
+      <div style={{ marginBottom: 4 }}>
+        <h1 style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px', margin: 0 }}>
+          {greeting} 👋
+        </h1>
+        <p style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 4, fontWeight: 400 }}>
+          Вот что происходит дома
+        </p>
+      </div>
+
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
         {weather && (
           <div style={{
             background: 'linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.06))',
-            backdropFilter: 'blur(20px)',
-            border: '1px solid rgba(129,140,248,0.12)',
-            borderRadius: 22, padding: '22px 24px',
-            position: 'relative', overflow: 'hidden',
+            backdropFilter: 'blur(20px)', border: '1px solid rgba(129,140,248,0.12)',
+            borderRadius: 22, padding: '22px 24px', position: 'relative', overflow: 'hidden',
           }}>
-            <div style={{ position: 'absolute', top: -20, right: -10, fontSize: 80, opacity: 0.12, pointerEvents: 'none' }}>
-              {getWeatherIcon(weather.desc)}
-            </div>
+            <div style={{ position: 'absolute', top: -20, right: -10, fontSize: 80, opacity: 0.12, pointerEvents: 'none' }}>{getWeatherIcon(weather.desc)}</div>
             <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 16 }}>Погода</div>
             <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18, position: 'relative', zIndex: 1 }}>
               <span style={{ fontSize: 44 }}>{getWeatherIcon(weather.desc)}</span>
@@ -288,10 +323,9 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
               <div style={{ display: 'flex', gap: 8 }}>
                 {weather.forecast.slice(0, 3).map(day => {
                   const d = new Date(day.date)
-                  const label = d.toLocaleDateString('ru-RU', { weekday: 'short' })
                   return (
                     <div key={day.date} style={{ flex: 1, background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '10px 8px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.04)' }}>
-                      <div style={{ fontSize: 10, color: 'var(--text-secondary)', textTransform: 'capitalize', marginBottom: 4, fontWeight: 500 }}>{label}</div>
+                      <div style={{ fontSize: 10, color: 'var(--text-secondary)', textTransform: 'capitalize', marginBottom: 4, fontWeight: 500 }}>{d.toLocaleDateString('ru-RU', { weekday: 'short' })}</div>
                       <div style={{ fontSize: 20, marginBottom: 4 }}>{getWeatherIcon(day.desc)}</div>
                       <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{day.maxTemp}°</div>
                       <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{day.minTemp}°</div>
@@ -302,38 +336,22 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
             )}
           </div>
         )}
-
         {sensors && (
           <div style={{ background: 'rgba(255,255,255,0.03)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 22, padding: '22px 24px' }}>
             <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 16 }}>Климат в квартире</div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
-                <div style={{ width: 48, height: 48, borderRadius: 16, background: 'linear-gradient(135deg, rgba(251,146,60,0.15), rgba(245,158,11,0.08))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                  <Thermometer size={22} color="#fb923c" />
-                </div>
-                <div>
-                  <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.temperature}°C</div>
-                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Температура</div>
-                </div>
+                <div style={{ width: 48, height: 48, borderRadius: 16, background: 'linear-gradient(135deg, rgba(251,146,60,0.15), rgba(245,158,11,0.08))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Thermometer size={22} color="#fb923c" /></div>
+                <div><div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.temperature}°C</div><div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Температура</div></div>
               </div>
               <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
-                <div style={{ width: 48, height: 48, borderRadius: 16, background: 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.08))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                  <Droplets size={22} color="#3b82f6" />
-                </div>
-                <div>
-                  <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.humidity}%</div>
-                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Влажность</div>
-                </div>
+                <div style={{ width: 48, height: 48, borderRadius: 16, background: 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.08))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Droplets size={22} color="#3b82f6" /></div>
+                <div><div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.humidity}%</div><div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Влажность</div></div>
               </div>
               <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
-                <div style={{ width: 48, height: 48, borderRadius: 16, background: pm25Info?.bg || 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                  <Wind size={22} color={pm25Info?.color || '#999'} />
-                </div>
+                <div style={{ width: 48, height: 48, borderRadius: 16, background: pm25Info?.bg || 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Wind size={22} color={pm25Info?.color || '#999'} /></div>
                 <div style={{ flex: 1 }}>
-                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
-                    <span style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.pm25}</span>
-                    <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>µg/m³</span>
-                  </div>
+                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}><span style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.pm25}</span><span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>µg/m³</span></div>
                   <div style={{ fontSize: 12, color: pm25Info?.color, marginTop: 2, fontWeight: 500 }}>PM2.5 · {pm25Info?.label}</div>
                 </div>
               </div>
@@ -372,9 +390,170 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
   )
 }
 
+// ————— Settings Tab —————
+function SettingsTab({ city, onCityChange, onLogout }: { city: string; onCityChange: (id: string) => void; onLogout: () => void }) {
+  const [showPinChange, setShowPinChange] = useState(false)
+  const [oldPin, setOldPin] = useState('')
+  const [newPin, setNewPin] = useState('')
+  const [pinMsg, setPinMsg] = useState<{ text: string; ok: boolean } | null>(null)
+  const [pinSaving, setPinSaving] = useState(false)
+
+  const changePIN = async () => {
+    if (!oldPin || !newPin) { setPinMsg({ text: 'Заполните оба поля', ok: false }); return }
+    if (newPin.length < 4) { setPinMsg({ text: 'Минимум 4 цифры', ok: false }); return }
+    setPinSaving(true); setPinMsg(null)
+    try {
+      const r = await fetch('/api/auth', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ oldPin, newPin }),
+      })
+      const d = await r.json()
+      if (d.error) throw new Error(d.error === 'wrong_pin' ? 'Неверный старый PIN' : d.error)
+      setPinMsg({ text: 'PIN изменён', ok: true })
+      setOldPin(''); setNewPin('')
+      setTimeout(() => { setShowPinChange(false); setPinMsg(null) }, 1500)
+    } catch (e: any) { setPinMsg({ text: e.message, ok: false }) }
+    finally { setPinSaving(false) }
+  }
+
+  const inputStyle: React.CSSProperties = {
+    padding: '14px 18px', borderRadius: 14, width: '100%',
+    background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)',
+    color: 'var(--text-primary)', fontSize: 15, outline: 'none', fontFamily: 'inherit',
+    textAlign: 'center', letterSpacing: '4px',
+  }
+
+  const currentCity = CITIES.find(c => c.id === city) || CITIES[0]
+
+  return (
+    <div style={{ flex: 1, overflowY: 'auto', padding: '24px', display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 560, margin: '0 auto', width: '100%' }}>
+      <h2 style={{ fontSize: 24, fontWeight: 800, color: 'var(--text-primary)', margin: '0 0 8px', letterSpacing: '-0.5px' }}>Настройки</h2>
+
+      {/* City selector */}
+      <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 22, padding: '22px 24px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
+          <MapPin size={18} color="#818cf8" />
+          <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>Город</span>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
+          {CITIES.map(c => {
+            const isActive = city === c.id
+            return (
+              <button key={c.id} onClick={() => onCityChange(c.id)} style={{
+                padding: '12px 16px', borderRadius: 14, textAlign: 'left',
+                background: isActive ? 'rgba(99,102,241,0.12)' : 'rgba(255,255,255,0.02)',
+                border: `1px solid ${isActive ? 'rgba(129,140,248,0.25)' : 'rgba(255,255,255,0.05)'}`,
+                color: isActive ? '#a5b4fc' : 'var(--text-secondary)',
+                fontSize: 14, fontWeight: isActive ? 600 : 500,
+                transition: 'all 0.25s ease',
+                display: 'flex', alignItems: 'center', gap: 8,
+              }}>
+                {isActive && <Check size={14} />}
+                {c.name}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* PIN change */}
+      <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 22, padding: '22px 24px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <KeyRound size={18} color="#818cf8" />
+            <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>PIN-код</span>
+          </div>
+          <button onClick={() => setShowPinChange(v => !v)} style={{
+            padding: '8px 16px', borderRadius: 12,
+            background: showPinChange ? 'rgba(255,255,255,0.04)' : 'rgba(99,102,241,0.1)',
+            border: `1px solid ${showPinChange ? 'rgba(255,255,255,0.06)' : 'rgba(129,140,248,0.2)'}`,
+            color: showPinChange ? 'var(--text-secondary)' : '#a5b4fc',
+            fontSize: 13, fontWeight: 600,
+          }}>
+            {showPinChange ? 'Отмена' : 'Изменить'}
+          </button>
+        </div>
+
+        {showPinChange && (
+          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <input
+              type="password" inputMode="numeric" maxLength={8}
+              value={oldPin} onChange={e => setOldPin(e.target.value.replace(/\D/g, ''))}
+              placeholder="Старый PIN" style={inputStyle}
+            />
+            <input
+              type="password" inputMode="numeric" maxLength={8}
+              value={newPin} onChange={e => setNewPin(e.target.value.replace(/\D/g, ''))}
+              placeholder="Новый PIN" style={inputStyle}
+            />
+            {pinMsg && (
+              <div style={{
+                fontSize: 13, padding: '10px 14px', borderRadius: 12, fontWeight: 500,
+                background: pinMsg.ok ? 'rgba(52,211,153,0.08)' : 'rgba(239,68,68,0.08)',
+                color: pinMsg.ok ? '#34d399' : '#f87171',
+                display: 'flex', alignItems: 'center', gap: 8,
+              }}>
+                {pinMsg.ok ? <Check size={14} /> : <XIcon size={14} />} {pinMsg.text}
+              </div>
+            )}
+            <button onClick={changePIN} disabled={pinSaving} style={{
+              padding: '14px', borderRadius: 14,
+              background: 'linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.2))',
+              border: '1px solid rgba(129,140,248,0.3)',
+              color: '#a5b4fc', fontSize: 14, fontWeight: 600,
+            }}>
+              {pinSaving ? 'Сохранение...' : 'Сохранить PIN'}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Logout */}
+      <button onClick={onLogout} style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
+        padding: '16px', borderRadius: 18,
+        background: 'rgba(239,68,68,0.06)',
+        border: '1px solid rgba(239,68,68,0.15)',
+        color: '#f87171', fontSize: 15, fontWeight: 600,
+        transition: 'all 0.25s ease', marginTop: 8,
+      }}>
+        <LogOut size={18} />
+        Выйти из аккаунта
+      </button>
+
+      {/* Info */}
+      <div style={{ textAlign: 'center', padding: '16px 0', color: 'var(--text-tertiary)', fontSize: 12 }}>
+        Smart Home Dashboard v1.0 · {currentCity.name}
+      </div>
+    </div>
+  )
+}
+
+// ————— Tab animation variants —————
+const tabVariants = {
+  enter: { opacity: 0, y: 12 },
+  center: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -8 },
+}
+
+// ————— Main —————
 function HomePageInner() {
   const [unlocked, setUnlocked] = useState<boolean | null>(null)
+  const [tab, setTab] = useState<Tab>('home')
+  const [activeRoom, setActiveRoom] = useState('living')
+  const [weather, setWeather] = useState<WeatherData | null>(null)
+  const [sensors, setSensors] = useState<SensorData | null>(null)
+  const [haStates, setHaStates] = useState<HaStates>({})
+  const [haConnected, setHaConnected] = useState(false)
+  const [city, setCity] = useState(() => {
+    if (typeof window !== 'undefined') return localStorage.getItem('tablet-city') || 'spb'
+    return 'spb'
+  })
+  const [screensaverActive, setScreensaverActive] = useState(false)
+  const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
+  // Auth check
   useEffect(() => {
     fetch('/api/auth')
       .then(r => r.json())
@@ -382,17 +561,19 @@ function HomePageInner() {
       .catch(() => setUnlocked(false))
   }, [])
 
-  const [tab, setTab] = useState<Tab>('home')
-  const [activeRoom, setActiveRoom] = useState('living')
-  const [weather, setWeather] = useState<WeatherData | null>(null)
-  const [sensors, setSensors] = useState<SensorData | null>(null)
-  const [haStates, setHaStates] = useState<HaStates>({})
+  // City change
+  const handleCityChange = (id: string) => {
+    setCity(id)
+    localStorage.setItem('tablet-city', id)
+  }
 
+  // Weather
   useEffect(() => {
     if (!unlocked) return
+    const c = CITIES.find(x => x.id === city) || CITIES[0]
     const load = async () => {
       try {
-        const r = await fetch('/api/weather')
+        const r = await fetch(`/api/weather?lat=${c.lat}&lon=${c.lon}`)
         const d = await r.json()
         if (d.temp && d.temp !== '—') setWeather(d)
       } catch {}
@@ -400,15 +581,16 @@ function HomePageInner() {
     load()
     const t = setInterval(load, 600_000)
     return () => clearInterval(t)
-  }, [unlocked])
+  }, [unlocked, city])
 
+  // HA
   const loadHA = useCallback(async () => {
     try {
       const r = await fetch('/api/ha')
       const d = await r.json()
-      if (d.states) setHaStates(d.states)
+      if (d.states) { setHaStates(d.states); setHaConnected(true) }
       if (d.sensors) setSensors(d.sensors)
-    } catch {}
+    } catch { setHaConnected(false) }
   }, [])
 
   useEffect(() => {
@@ -418,13 +600,29 @@ function HomePageInner() {
     return () => clearInterval(t)
   }, [loadHA, unlocked])
 
-  const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
+  // Screensaver idle detection
+  const resetIdle = useCallback(() => {
+    if (screensaverActive) { setScreensaverActive(false); return }
+    if (idleTimer.current) clearTimeout(idleTimer.current)
+    idleTimer.current = setTimeout(() => setScreensaverActive(true), 2 * 60 * 1000) // 2 min
+  }, [screensaverActive])
 
+  useEffect(() => {
+    if (!unlocked) return
+    const events = ['mousedown', 'mousemove', 'touchstart', 'keydown', 'scroll']
+    events.forEach(e => window.addEventListener(e, resetIdle, { passive: true }))
+    resetIdle()
+    return () => {
+      events.forEach(e => window.removeEventListener(e, resetIdle))
+      if (idleTimer.current) clearTimeout(idleTimer.current)
+    }
+  }, [unlocked, resetIdle])
+
+  const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
   const getDeviceState = (haKey?: string): boolean => {
     if (!haKey || !haStates[haKey]) return false
     return haStates[haKey].state === 'on'
   }
-
   const getDeviceExtra = (id: string): string | undefined => {
     if (id === 'air_purifier' && sensors) return `PM2.5: ${sensors.pm25}`
     return undefined
@@ -438,89 +636,69 @@ function HomePageInner() {
   if (unlocked === null) {
     return <div style={{ display: 'flex', height: '100dvh', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}><div className="bg-ambient" /></div>
   }
-
   if (!unlocked) {
     return <LockScreen onUnlock={() => setUnlocked(true)} />
   }
 
   return (
-    <div style={{
-      display: 'flex', height: '100dvh', width: '100%',
-      background: 'var(--bg)', overflow: 'hidden', position: 'relative',
-    }}>
+    <div style={{ display: 'flex', height: '100dvh', width: '100%', background: 'var(--bg)', overflow: 'hidden', position: 'relative' }}>
       <div className="bg-ambient" />
+
+      <AnimatePresence>
+        {screensaverActive && (
+          <Screensaver weather={weather} onDismiss={() => setScreensaverActive(false)} />
+        )}
+      </AnimatePresence>
+
       <Sidebar active={tab} onChange={setTab} />
 
       <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}>
-        <TopBar weather={weather} sensors={sensors} />
+        <TopBar weather={weather} sensors={sensors} haConnected={haConnected} />
 
-        {tab === 'home' && <HomeTab weather={weather} sensors={sensors} />}
+        <AnimatePresence mode="wait">
+          {tab === 'home' && (
+            <motion.div key="home" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+              <HomeTab weather={weather} sensors={sensors} />
+            </motion.div>
+          )}
 
-        {tab === 'devices' && (
-          <>
-            <RoomTabs rooms={ROOMS} active={activeRoom} onChange={setActiveRoom} />
-            <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '16px 24px 28px' }}>
-              {devicesInRoom.length === 0 ? (
-                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: 220, color: 'var(--text-secondary)', gap: 12 }}>
-                  <div style={{ width: 64, height: 64, borderRadius: 20, background: 'rgba(255,255,255,0.04)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>🏠</div>
-                  <span style={{ fontSize: 15, fontWeight: 500 }}>Устройства не добавлены</span>
-                </div>
-              ) : (
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
-                  {devicesInRoom.map(device => (
-                    <DeviceCard
-                      key={device.id}
-                      id={device.id}
-                      name={device.name}
-                      icon={device.icon}
-                      entityId={device.entityId}
-                      domain={device.domain}
-                      initialState={getDeviceState(device.haKey)}
-                      isMock={device.isMock}
-                      extraInfo={getDeviceExtra(device.id)}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          </>
-        )}
+          {tab === 'devices' && (
+            <motion.div key="devices" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+              <RoomTabs rooms={ROOMS} active={activeRoom} onChange={setActiveRoom} />
+              <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '16px 24px 28px' }}>
+                {devicesInRoom.length === 0 ? (
+                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: 220, color: 'var(--text-secondary)', gap: 12 }}>
+                    <div style={{ width: 64, height: 64, borderRadius: 20, background: 'rgba(255,255,255,0.04)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>🏠</div>
+                    <span style={{ fontSize: 15, fontWeight: 500 }}>Устройства не добавлены</span>
+                  </div>
+                ) : (
+                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
+                    {devicesInRoom.map(device => (
+                      <DeviceCard key={device.id} id={device.id} name={device.name} icon={device.icon} entityId={device.entityId} domain={device.domain} initialState={getDeviceState(device.haKey)} isMock={device.isMock} extraInfo={getDeviceExtra(device.id)} />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          )}
 
-        {tab === 'calendar' && <CalendarTab />}
+          {tab === 'calendar' && (
+            <motion.div key="calendar" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+              <CalendarTab />
+            </motion.div>
+          )}
 
-        {tab === 'settings' && (
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20, color: 'var(--text-secondary)' }}>
-            <div style={{
-              width: 72, height: 72, borderRadius: 22,
-              background: 'linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08))',
-              border: '1px solid rgba(129,140,248,0.15)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}>
-              <SettingsIcon size={32} color="#818cf8" />
-            </div>
-            <span style={{ fontSize: 18, fontWeight: 600 }}>Настройки</span>
-            <button
-              onClick={handleLogout}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8,
-                padding: '12px 24px', borderRadius: 14,
-                background: 'rgba(239,68,68,0.1)',
-                border: '1px solid rgba(239,68,68,0.2)',
-                color: '#f87171', fontSize: 14, fontWeight: 600,
-                transition: 'all 0.25s ease',
-              }}
-            >
-              <LogOut size={16} />
-              Выйти
-            </button>
-          </div>
-        )}
+          {tab === 'settings' && (
+            <motion.div key="settings" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+              <SettingsTab city={city} onCityChange={handleCityChange} onLogout={handleLogout} />
+            </motion.div>
+          )}
+        </AnimatePresence>
       </main>
     </div>
   )
 }
 
-
 export default function HomePage() {
   return <HomePageInner />
 }