function MainComponent() { const [time, setTime] = useState(new Date()); const [isDarkMode, setIsDarkMode] = useState(false); const [zoom, setZoom] = useState(100); const [isFullscreen, setIsFullscreen] = useState(false); const [clockPreferences, setClockPreferences] = useState({ timeFormat: "12h", dateFormat: "FULL_US" }); const [showSettingsModal, setShowSettingsModal] = useState(false); const weekDays = [ "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT" ]; const currentDay = time.getDay(); const formattedTime = useMemo(()=>{ if (!time) return ""; try { return new Intl.DateTimeFormat("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: clockPreferences.timeFormat === "12h" }).format(time); } catch (error) { console.error("Erro ao formatar hora:", error); return time.toLocaleTimeString(); } }, [ time, clockPreferences.timeFormat ]); const getFormattedDate = (date)=>{ const d = new Date(date); switch(clockPreferences.dateFormat){ case "DD/MM/YYYY": return d.toLocaleDateString("pt-BR"); case "MM/DD/YYYY": return d.toLocaleDateString("en-US"); case "YYYY-MM-DD": return d.toLocaleDateString("en-CA"); case "FULL_US": default: return d.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" }); case "FULL_BR": return d.toLocaleDateString("pt-BR", { weekday: "long", year: "numeric", month: "long", day: "numeric" }); case "SHORT_US": return d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }); case "SHORT_BR": return d.toLocaleDateString("pt-BR", { weekday: "short", month: "short", day: "numeric" }); } }; const formattedDate = getFormattedDate(time); const isAM = time.getHours() < 12; const toggleDarkMode = ()=>setIsDarkMode(!isDarkMode); const handleZoom = ()=>{ const newZoom = zoom === 100 ? 150 : 100; setZoom(newZoom); }; const containerStyle = { transform: `scale(${zoom / 100})`, transition: "transform 0.3s ease" }; const toggleFullscreen = ()=>{ if (!document.fullscreenElement) { document.documentElement.requestFullscreen().catch((e)=>{ console.error(`Erro ao entrar em fullscreen: ${e.message}`); }); } else { if (document.exitFullscreen) { document.exitFullscreen(); } } }; useEffect(()=>{ const timer = setInterval(()=>{ setTime(new Date()); }, 1000); return ()=>clearInterval(timer); }, []); useEffect(()=>{ const handleFullscreenChange = ()=>{ setIsFullscreen(!!document.fullscreenElement); }; document.addEventListener("fullscreenchange", handleFullscreenChange); return ()=>{ document.removeEventListener("fullscreenchange", handleFullscreenChange); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${isDarkMode ? "bg-[#121212]" : "bg-[#f0f0f0]"} flex items-center justify-center font-roboto transition-colors duration-300 p-4`, __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 flex gap-6", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: "text-gray-400 hover:text-[#4ade80] transition-colors", "aria-label": "Toggle dark mode", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isDarkMode ? "fa-sun" : "fa-moon"} w-8 h-8 text-2xl`, __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleZoom, className: "text-gray-400 hover:text-[#4ade80] transition-colors", "aria-label": "Toggle zoom", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${zoom === 100 ? "fa-search-plus" : "fa-search-minus"} w-8 h-8 text-2xl`, __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: toggleFullscreen, className: "text-gray-400 hover:text-[#4ade80] transition-colors", "aria-label": "Toggle fullscreen", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isFullscreen ? "fa-compress" : "fa-expand"} w-8 h-8 text-2xl`, __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettingsModal(true), className: "text-gray-400 hover:text-[#4ade80] transition-colors", "aria-label": "Settings", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog w-8 h-8 text-2xl", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-inter mb-8 bg-gradient-to-br from-[#4ade80] to-[#2a6350] text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, "Time Now"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full lg:w-[500px]", style: containerStyle, __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative h-[300px] ${isDarkMode ? "bg-gradient-to-br from-[#1a472a] to-[#0d253f]" : "bg-gradient-to-br from-[#4ade80] to-[#2a6350]"} rounded-3xl flex flex-col items-center justify-center shadow-2xl`, __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute top-0 left-0 w-full h-full rounded-3xl border-4 ${isDarkMode ? "border-[#2a6350]" : "border-[#4ade80]"} opacity-20`, __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-8 overflow-x-auto px-4 w-full justify-center", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, weekDays.map((day, index)=>/*#__PURE__*/ React.createElement("span", { key: day, className: `text-xs md:text-sm whitespace-nowrap ${index === currentDay ? "text-[#4ade80] font-bold" : isDarkMode ? "text-gray-400" : "text-white"}`, __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, day))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-4xl md:text-6xl font-bold ${isDarkMode ? "text-white" : "text-white"} mb-2`, __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, formattedTime), clockPreferences.timeFormat === "12h" && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col text-sm font-bold", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: isAM ? "text-[#4ade80]" : isDarkMode ? "text-gray-400" : "text-white", __source: { fileName: "", lineNumber: 185, columnNumber: 19 }, __self: this }, "AM"), /*#__PURE__*/ React.createElement("span", { className: !isAM ? "text-[#4ade80]" : isDarkMode ? "text-gray-400" : "text-white", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, "PM"))), /*#__PURE__*/ React.createElement("div", { className: `${isDarkMode ? "text-gray-400" : "text-white"} text-base md:text-lg`, __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, formattedDate), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-8 w-[80%] h-2 bg-white/10 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-white/50 rounded-full transition-all duration-300 ease-linear", style: { width: `${time.getMinutes() / 60 * 100}%` }, __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this })))), showSettingsModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isDarkMode ? "bg-[#1a1a1a]" : "bg-white"} rounded-xl p-6 w-96`, __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `${isDarkMode ? "text-white" : "text-gray-800"} text-xl font-bold`, __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettingsModal(false), className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"} block mb-2`, __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, "Time Format"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 254, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "timeFormat", value: "12h", checked: clockPreferences.timeFormat === "12h", onChange: (e)=>setClockPreferences({ ...clockPreferences, timeFormat: e.target.value }), className: "mr-2", __source: { fileName: "", lineNumber: 255, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 268, columnNumber: 23 }, __self: this }, "12 hours")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 274, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "timeFormat", value: "24h", checked: clockPreferences.timeFormat === "24h", onChange: (e)=>setClockPreferences({ ...clockPreferences, timeFormat: e.target.value }), className: "mr-2", __source: { fileName: "", lineNumber: 275, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 288, columnNumber: 23 }, __self: this }, "24 hours")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"} block mb-2`, __source: { fileName: "", lineNumber: 298, columnNumber: 19 }, __self: this }, "Date Format"), /*#__PURE__*/ React.createElement("select", { value: clockPreferences.dateFormat, onChange: (e)=>setClockPreferences({ ...clockPreferences, dateFormat: e.target.value }), className: `${isDarkMode ? "bg-[#2a2a2a] text-white" : "bg-gray-100 text-gray-800"} rounded-lg px-4 py-2 w-full`, __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "YYYY-MM-DD", __source: { fileName: "", lineNumber: 313, columnNumber: 21 }, __self: this }, "2024-01-31"), /*#__PURE__*/ React.createElement("option", { value: "DD/MM/YYYY", __source: { fileName: "", lineNumber: 314, columnNumber: 21 }, __self: this }, "31/01/2024"), /*#__PURE__*/ React.createElement("option", { value: "MM/DD/YYYY", __source: { fileName: "", lineNumber: 315, columnNumber: 21 }, __self: this }, "01/31/2024"), /*#__PURE__*/ React.createElement("option", { value: "FULL_US", __source: { fileName: "", lineNumber: 316, columnNumber: 21 }, __self: this }, "Wednesday, January 31, 2024"), /*#__PURE__*/ React.createElement("option", { value: "FULL_BR", __source: { fileName: "", lineNumber: 317, columnNumber: 21 }, __self: this }, "Quarta-feira, 31 de Janeiro de 2024"), /*#__PURE__*/ React.createElement("option", { value: "SHORT_US", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }, "Wed, Jan 31"), /*#__PURE__*/ React.createElement("option", { value: "SHORT_BR", __source: { fileName: "", lineNumber: 321, columnNumber: 21 }, __self: this }, "Qua, 31 de Jan")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-6", __source: { fileName: "", lineNumber: 325, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettingsModal(false), className: "px-4 py-2 bg-[#4ade80] text-white rounded-lg hover:bg-[#3aa866]", __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }, "Save")))))); }