Add calendar compact mode, Tetris login animation, maintenance rental support
- BookingCalendar: sort rooms by category, compact row height toggle - LoginPage: Tetris tile animation after delay (module names fall & stack) - MaintenancePage: rental objects support with filter tab and icons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { Navigate, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Hotel, Eye, EyeOff, Sun, Moon, AlertCircle,
|
||||
@@ -14,6 +14,151 @@ const DEMO_EMAILS = [
|
||||
'admin@hotelsync.io',
|
||||
]
|
||||
|
||||
// ── Tetris overlay ─────────────────────────────────────────────────────────────
|
||||
const TETRIS_LABELS = [
|
||||
'Шахматка', 'Бронирования', 'Гости', 'Номера', 'Уборка',
|
||||
'Каналы', 'Отчёты', 'Веб-сайт', 'Виджет', 'Касса',
|
||||
'Отзывы', 'Сервис', 'Аренда', 'Тарифы', 'Скидки',
|
||||
'Лояльность', 'Тех.перерывы', 'Цены', 'Документы', 'Модули',
|
||||
]
|
||||
const TETRIS_COLORS = [
|
||||
'#1e3a8a', '#14532d', '#713f12', '#3b0764', '#0f172a',
|
||||
'#134e4a', '#4a044e', '#1c1917', '#7f1d1d', '#0c4a6e',
|
||||
]
|
||||
|
||||
function roundRectPath(
|
||||
ctx: CanvasRenderingContext2D,
|
||||
x: number, y: number, w: number, h: number, r: number,
|
||||
) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + r, y)
|
||||
ctx.lineTo(x + w - r, y)
|
||||
ctx.arcTo(x + w, y, x + w, y + r, r)
|
||||
ctx.lineTo(x + w, y + h - r)
|
||||
ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
|
||||
ctx.lineTo(x + r, y + h)
|
||||
ctx.arcTo(x, y + h, x, y + h - r, r)
|
||||
ctx.lineTo(x, y + r)
|
||||
ctx.arcTo(x, y, x + r, y, r)
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
function TetrisOverlay() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let rafId = 0
|
||||
|
||||
const delay = setTimeout(() => {
|
||||
const canvas = canvasRef.current
|
||||
console.log('[Tetris] canvas ref:', canvas)
|
||||
if (!canvas) return
|
||||
const parent = canvas.parentElement
|
||||
console.log('[Tetris] parent:', parent, 'size:', parent?.clientWidth, 'x', parent?.clientHeight)
|
||||
if (!parent) return
|
||||
|
||||
const W = parent.clientWidth
|
||||
const H = parent.clientHeight
|
||||
canvas.width = W
|
||||
canvas.height = H
|
||||
console.log('[Tetris] started, canvas size:', W, 'x', H)
|
||||
|
||||
const TILE_W = 84
|
||||
const TILE_H = 252 // 3× ratio
|
||||
const GAP = 6
|
||||
const cols = Math.max(1, Math.floor(W / (TILE_W + GAP)))
|
||||
const offsetX = (W - cols * (TILE_W + GAP) + GAP) / 2
|
||||
const colX = (i: number) => offsetX + i * (TILE_W + GAP)
|
||||
|
||||
// Tracks bottom y of the topmost settled tile per column (starts at canvas bottom)
|
||||
const colFloor = new Array<number>(cols).fill(H)
|
||||
|
||||
interface Tile { col: number; y: number; vy: number; label: string; color: string }
|
||||
const falling: Tile[] = []
|
||||
const settled: Tile[] = []
|
||||
|
||||
let spawnIn = 300
|
||||
let last = performance.now()
|
||||
|
||||
const ctx = canvas.getContext('2d')!
|
||||
|
||||
const drawTile = (x: number, y: number, label: string, color: string) => {
|
||||
roundRectPath(ctx, x, y, TILE_W, TILE_H, 10)
|
||||
ctx.fillStyle = color
|
||||
ctx.fill()
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.28)'
|
||||
ctx.lineWidth = 1.5
|
||||
ctx.stroke()
|
||||
|
||||
// Text rotated 90° so it reads along the long axis
|
||||
ctx.save()
|
||||
ctx.translate(x + TILE_W / 2, y + TILE_H / 2)
|
||||
ctx.rotate(-Math.PI / 2)
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.92)'
|
||||
ctx.font = 'bold 13px system-ui,sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText(label, 0, 0)
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
const tick = (now: number) => {
|
||||
const dt = Math.min(now - last, 50)
|
||||
last = now
|
||||
spawnIn -= dt
|
||||
|
||||
ctx.clearRect(0, 0, W, H)
|
||||
|
||||
// Spawn
|
||||
if (spawnIn <= 0 && falling.length < 4) {
|
||||
const free = Array.from({ length: cols }, (_, i) => i).filter(i => colFloor[i] > TILE_H)
|
||||
if (free.length > 0) {
|
||||
const col = free[Math.floor(Math.random() * free.length)]
|
||||
const label = TETRIS_LABELS[Math.floor(Math.random() * TETRIS_LABELS.length)]
|
||||
const color = TETRIS_COLORS[Math.floor(Math.random() * TETRIS_COLORS.length)]
|
||||
falling.push({ col, y: -TILE_H, vy: 1.4 + Math.random() * 0.8, label, color })
|
||||
}
|
||||
spawnIn = 500 + Math.random() * 500
|
||||
}
|
||||
|
||||
// Draw settled
|
||||
for (const t of settled) drawTile(colX(t.col), t.y, t.label, t.color)
|
||||
|
||||
// Update + draw falling
|
||||
for (let i = falling.length - 1; i >= 0; i--) {
|
||||
const t = falling[i]
|
||||
t.y += t.vy * dt / 16
|
||||
const land = colFloor[t.col] - TILE_H
|
||||
if (t.y >= land) {
|
||||
t.y = land
|
||||
colFloor[t.col] = land
|
||||
settled.push({ ...t })
|
||||
falling.splice(i, 1)
|
||||
} else {
|
||||
drawTile(colX(t.col), t.y, t.label, t.color)
|
||||
}
|
||||
}
|
||||
|
||||
rafId = requestAnimationFrame(tick)
|
||||
}
|
||||
|
||||
rafId = requestAnimationFrame(tick)
|
||||
}, 500)
|
||||
|
||||
return () => {
|
||||
clearTimeout(delay)
|
||||
cancelAnimationFrame(rafId)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 pointer-events-none z-10"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
type LegalType = 'ooo' | 'ip' | 'ao' | 'pao' | 'other'
|
||||
|
||||
const LEGAL_TYPES: { id: LegalType; label: string }[] = [
|
||||
@@ -476,15 +621,16 @@ export function LoginPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-brand-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-900 dark:to-brand-950 flex">
|
||||
{/* Left panel — branding */}
|
||||
<div className="hidden lg:flex flex-col justify-between w-1/2 bg-brand-600 dark:bg-brand-800 p-12">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="hidden lg:flex flex-col justify-between w-1/2 bg-brand-600 dark:bg-brand-800 p-12 relative overflow-hidden">
|
||||
<TetrisOverlay />
|
||||
<div className="relative z-20 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
|
||||
<Hotel size={22} className="text-white" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-white">HotelSync</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="relative z-20">
|
||||
<h1 className="text-4xl font-bold text-white leading-tight mb-4">
|
||||
Современная PMS система<br />для вашего отеля
|
||||
</h1>
|
||||
@@ -523,7 +669,7 @@ export function LoginPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-brand-200 text-sm">© 2026 HotelSync · SaaS PMS Platform</p>
|
||||
<p className="relative z-20 text-brand-200 text-sm">© 2026 HotelSync · SaaS PMS Platform</p>
|
||||
</div>
|
||||
|
||||
{/* Right panel */}
|
||||
|
||||
Reference in New Issue
Block a user