diff --git a/src/app/globals.css b/src/app/globals.css index 13bb78f..8713503 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -36,6 +36,82 @@ h3 { font-size: 1.25rem; line-height: 1.3; } p { font-size: 1rem; line-height: 1.6; color: var(--foreground); } .muted { color: var(--color-muted); } +/* Modal */ +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 200; +} +.modal-dialog { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 201; + max-width: 500px; + width: 90%; + max-height: 80vh; + overflow: auto; +} +.modal-content { + background: #fff; + border-radius: 12px; + padding: 2rem; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); + text-align: center; +} +.modal-title { + font-size: 1.75rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--foreground); +} +.modal-description { + font-size: 1rem; + margin-bottom: 1rem; + color: var(--foreground); +} +.modal-info { + font-size: 0.875rem; + color: var(--color-muted); + margin-bottom: 1.5rem; +} +.modal-button { + display: inline-block; + background: var(--color-green); + color: #fff; + padding: 0.75rem 1.5rem; + border-radius: 999px; + border: none; + font-weight: 600; + cursor: pointer; + transition: opacity 150ms ease, transform 150ms ease; +} +.modal-button:hover, +.modal-button:focus-visible { + opacity: 0.92; + transform: translateY(-2px); +} + +/* Language switcher button */ +.lang-switcher-btn { + background: transparent; + border: none; + font-weight: 700; + color: #fff; + padding: 0.375rem 0.625rem; + border-radius: 999px; + cursor: pointer; + transition: background 150ms ease; +} +.lang-switcher-btn:hover { + background: rgba(255, 255, 255, 0.1); +} +.lang-switcher-btn.current { + background: rgba(255, 255, 255, 0.2); +} + /* Markdown content */ .markdown-content { display: block; diff --git a/src/components/layout/ConstructionModal.tsx b/src/components/layout/ConstructionModal.tsx new file mode 100644 index 0000000..4c2d725 --- /dev/null +++ b/src/components/layout/ConstructionModal.tsx @@ -0,0 +1,59 @@ +"use client"; +import { useEffect, useState } from "react"; + +type ConstructionModalProps = { + isOpen: boolean; + onClose: () => void; +}; + +export function ConstructionModal({ isOpen, onClose }: ConstructionModalProps) { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + useEffect(() => { + if (isOpen) { + document.body.style.overflow = "hidden"; + } else { + document.body.style.overflow = ""; + } + return () => { + document.body.style.overflow = ""; + }; + }, [isOpen]); + + if (!mounted || !isOpen) return null; + + return ( + <> +