6ff041d2a8
- Add Frontend Dockerfile with Next.js standalone build - Add docker-compose.yml for production deployment - Add docker-compose.dev.yml for development with hot-reload - Configure Frontend next.config.js with standalone output - Add .dockerignore files for both backend and frontend - Add comprehensive README-DOCKER.md documentation - Update .gitignore to exclude node_modules and build artifacts - Remove obsolete component files (CycleCalculator.tsx, PHDiagram.tsx) - Backend and Frontend communicate via Docker network - Healthchecks configured for both services - Environment variables configured for API URL
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import PHDiagramModern from "@/components/PHDiagramModern";
|
|
import CycleCalculatorModern from "@/components/CycleCalculatorModern";
|
|
|
|
export default function Home() {
|
|
const [activeView, setActiveView] = useState<'calculator' | 'diagram'>('diagram');
|
|
|
|
return (
|
|
<div style={{ position: 'relative' }}>
|
|
<div style={{
|
|
position: 'fixed',
|
|
top: '2rem',
|
|
right: '2rem',
|
|
zIndex: 1000,
|
|
display: 'flex',
|
|
gap: '0.75rem',
|
|
background: 'rgba(30, 58, 95, 0.95)',
|
|
backdropFilter: 'blur(10px)',
|
|
padding: '0.5rem',
|
|
borderRadius: '16px',
|
|
boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
|
|
border: '1px solid rgba(255,255,255,0.1)'
|
|
}}>
|
|
<button
|
|
onClick={() => setActiveView('diagram')}
|
|
style={{
|
|
padding: '0.75rem 1.5rem',
|
|
background: activeView === 'diagram' ? 'linear-gradient(135deg, #38b2ac 0%, #2c7a7b 100%)' : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '12px',
|
|
color: '#ffffff',
|
|
fontSize: '0.9rem',
|
|
fontWeight: '700',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s',
|
|
boxShadow: activeView === 'diagram' ? '0 4px 12px rgba(56, 178, 172, 0.4)' : 'none',
|
|
letterSpacing: '0.3px'
|
|
}}
|
|
>
|
|
📊 P-h Diagram
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveView('calculator')}
|
|
style={{
|
|
padding: '0.75rem 1.5rem',
|
|
background: activeView === 'calculator' ? 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '12px',
|
|
color: '#ffffff',
|
|
fontSize: '0.9rem',
|
|
fontWeight: '700',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s',
|
|
boxShadow: activeView === 'calculator' ? '0 4px 12px rgba(59, 130, 246, 0.4)' : 'none',
|
|
letterSpacing: '0.3px'
|
|
}}
|
|
>
|
|
🧮 Cycle Calculator
|
|
</button>
|
|
</div>
|
|
{activeView === 'diagram' && <PHDiagramModern />}
|
|
{activeView === 'calculator' && <CycleCalculatorModern />}
|
|
</div>
|
|
);
|
|
}
|