function MainComponent() { const [beats, setBeats] = useState(""); const [localTime, setLocalTime] = useState(""); const [theme, setTheme] = useState("cyberpunk"); const [showInfo, setShowInfo] = useState(false); useEffect(()=>{ const meta1 = document.createElement("meta"); meta1.name = "apple-mobile-web-app-status-bar-style"; meta1.content = "black-translucent"; const meta2 = document.createElement("meta"); meta2.name = "apple-mobile-web-app-title"; meta2.content = "beats"; const favicon = document.createElement("link"); favicon.rel = "icon"; favicon.type = "image/x-icon"; favicon.href = "https://drive.proton.me/urls/FTB750J2T4#csBGYOHchjdL"; // パスを/publicに変更 document.head.appendChild(meta1); document.head.appendChild(meta2); document.head.appendChild(favicon); return ()=>{ document.head.removeChild(meta1); document.head.removeChild(meta2); document.head.removeChild(favicon); }; }, []); useEffect(()=>{ let animationFrameId; let lastUpdate = 0; const updateTime = (timestamp)=>{ if (!lastUpdate || timestamp - lastUpdate >= 1000) { const now = new Date(); const beat = (((now.getUTCHours() + 1) % 24 * 3600 + now.getUTCMinutes() * 60 + now.getUTCSeconds()) / 86.4).toFixed(2); setBeats(beat); setLocalTime(now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false })); lastUpdate = timestamp; } animationFrameId = requestAnimationFrame(updateTime); }; animationFrameId = requestAnimationFrame(updateTime); return ()=>{ cancelAnimationFrame(animationFrameId); }; }, []); const shareToTwitter = ()=>{ const now = new Date(); const shareLocalTime = now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }); const text = `My local time is ${shareLocalTime}\nBut we're Syncing @\u200B${beats}\u200B.beats\n\nOne Global Rhythm with .beats\u00AE\n@ooooooawe #SwatchBeatsRevival`; window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`); }; const themes = { cyberpunk: { bg: "bg-[#0D001A]", gradient: "from-[#FF00FF20] to-[#00FFFF20]", border: "border-[#FF00FF40]", shadow: "shadow-[0_0_50px_rgba(255,0,255,0.3)]", text: "from-[#FF00FF] to-[#00FFFF]" }, vaporwave: { bg: "bg-[#000033]", gradient: "from-[#FF71CE20] to-[#01CDFE20]", border: "border-[#FF71CE40]", shadow: "shadow-[0_0_50px_rgba(255,113,206,0.3)]", text: "from-[#FF71CE] to-[#01CDFE]" }, y2k: { bg: "bg-[#1A0033]", gradient: "from-[#FF000020] to-[#00FF0020]", border: "border-[#FF000040]", shadow: "shadow-[0_0_50px_rgba(255,0,0,0.3)]", text: "from-[#FF0000] to-[#00FF00]" } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("link", { href: "https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap", rel: "stylesheet", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${themes[theme].bg} flex flex-col justify-between relative overflow-hidden font-["Source_Code_Pro",monospace]`, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute w-full h-full bg-gradient-to-b ${themes[theme].gradient}`, __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 text-sm text-white/60 animate-glow", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, localTime), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 flex gap-2", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, Object.keys(themes).map((t)=>/*#__PURE__*/ React.createElement("button", { key: t, onClick: ()=>setTheme(t), className: `px-3 py-1 rounded-full text-xs capitalize transition-all duration-300 ${theme === t ? "bg-white/20 scale-110" : "bg-white/5 hover:bg-white/10"}`, __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, t))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative bg-black/80 p-4 md:p-16 rounded-2xl backdrop-blur-lg border ${themes[theme].border} ${themes[theme].shadow} w-[95%] md:w-[77%]`, __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 text-sm text-white/60 animate-glow cursor-pointer group z-50 flex items-center gap-2", onMouseEnter: ()=>setShowInfo(true), onMouseLeave: ()=>setShowInfo(false), __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle text-white opacity-90 animate-pulse-glow", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `absolute top-full right-0 mt-2 w-80 bg-black/40 backdrop-blur-md p-4 rounded-lg border border-white/10 transform transition-all duration-300 z-50 ${showInfo ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2 pointer-events-none"}`, __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white/80 text-xs leading-relaxed", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, "Swatch Internet Time is a cool system Swatch came up with in 1998. Instead of messing with time zones, it's all about one universal time based on Swatch's HQ in Switzerland. The idea? Make it super easy to connect across time zones and bring a universal vibe to the internet world."))), /*#__PURE__*/ React.createElement("div", { className: "text-[#FF00FF] text-center mb-2 space-y-4 md:space-y-6", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[0.6rem] sm:text-xs md:text-sm tracking-[0.25em] sm:tracking-[0.3em] md:tracking-[0.4em] lg:tracking-[0.5em]", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, "INTERNET TIME", /*#__PURE__*/ React.createElement("p", { className: "font-bold bg-gradient-to-r from-[#FF00FF] via-[#00FFFF] to-[#FF00FF] text-transparent bg-clip-text animate-gradient tracking-normal lowercase", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, ".beats"), /*#__PURE__*/ React.createElement("span", { className: "tracking-[-0.03em]", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, "We are all synced to one universal time"))), /*#__PURE__*/ React.createElement("div", { className: "text-7xl sm:text-8xl md:text-9xl lg:text-[10rem] my-12 text-center", style: { letterSpacing: "-0.05em" }, __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#CC00CC] via-[#00CCCC] to-[#CC00CC] text-transparent bg-clip-text animate-gradient", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-bold", style: { fontSize: "0.75em" }, __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, "@"), beats)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: shareToTwitter, className: "group relative p-2 text-white/60 hover:text-white hover:scale-105 transition-all duration-300", "aria-label": "Share on X (Twitter)", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt text-lg", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute left-1/2 -translate-x-1/2 -bottom-8 whitespace-nowrap text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, "Share on X"))))), /*#__PURE__*/ React.createElement("footer", { className: "text-[0.6rem] relative text-center p-4 text-[#FF00FF] text-xs tracking-[-0.05em]", __source: { fileName: "", lineNumber: 191, columnNumber: 9 }, __self: this }, "Swatch Internet Time is developed by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.swatch.com/", className: "hover:text-[#FF55FF]", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, "Swatch Inc.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }, ` @keyframes gradient { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } } .animate-gradient { background-size: 200% auto; animation: gradient 4s linear infinite; } .animate-glow { animation: glow 2s ease-in-out infinite; } @keyframes glow { 0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.5) } 50% { text-shadow: 0 0 20px rgba(255,255,255,0.8) } } .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { opacity: 0.4 } 50% { opacity: 0.8 } } `))); }