বামদিকে স্লাইডিং ইমেজ শো (বিকল্প পদ্ধতি)

\n $\"No$ \n

\n No internet connection\n
\n Check your connection and try again\n

\n \n

\n );\n}\n\nfunction Slideshow({ images }) {\n useEffect(() => {\n let currentSlideIndex = 0;\n const slides = document.querySelectorAll(\".mySlides\");\n const totalSlides = slides.length;\n const slideInterval = 3000; // 3 seconds\n const transitionDuration = 800; // 0.8 seconds (must match CSS)\n\n function showNextSlide() {\n if (totalSlides <= 1) return;\n\n const outgoingSlide = slides[currentSlideIndex];\n const nextSlideIndex = (currentSlideIndex + 1) % totalSlides;\n const incomingSlide = slides[nextSlideIndex];\n\n incomingSlide.style.transition = \"none\";\n incomingSlide.style.left = \"100%\";\n incomingSlide.classList.add(\"visible\");\n\n incomingSlide.offsetHeight; // Force reflow\n\n incomingSlide.style.transition = \"left 0.8s ease-in-out\";\n outgoingSlide.style.transition = \"left 0.8s ease-in-out\";\n\n incomingSlide.style.left = \"0%\";\n outgoingSlide.style.left = \"-100%\";\n\n currentSlideIndex = nextSlideIndex;\n\n setTimeout(() => {\n outgoingSlide.classList.remove(\"visible\");\n outgoingSlide.style.transition = \"none\";\n outgoingSlide.style.left = \"0%\";\n outgoingSlide.offsetHeight;\n outgoingSlide.style.transition = \"left 0.8s ease-in-out\";\n }, transitionDuration);\n }\n\n if (totalSlides > 1) {\n for (let i = 1; i < totalSlides; i++) {\n slides[i].style.left = \"100%\";\n }\n slides[0].classList.add(\"visible\");\n slides[0].style.left = \"0%\";\n\n setInterval(showNextSlide, slideInterval);\n } else if (totalSlides === 1) {\n slides[0].classList.add(\"visible\");\n slides[0].style.left = \"0%\";\n }\n }, []); // images dependency removed to run once, assuming images don't change post-mount\n\n return (\n

\n {images.map((src, index) => (\n {`Slide

\n ))}\n

\n );\n}\n\nfunction Card({ title, subtitle, amount, steps, footerSlides, buttonText, modalTitle, modalContent }) {\n const [isModalActive, setIsModalActive] = useState(false);\n\n useEffect(() => {\n // Ensure this effect targets a unique container for each card instance\n // This example assumes a unique ID or ref is managed by the parent or Card itself.\n // For simplicity, the original logic structure is kept, but be mindful of ID uniqueness.\n const cardSpecificFooterSlideContainer = document.getElementById(\n `footerSlideContainer-${title.replace(/\\s+/g, \"-\")}`,\n ); // Example of generating a unique ID\n if (!cardSpecificFooterSlideContainer) return;\n\n const footerSlideIntervalTime = 3000;\n let currentFooterSlideIndex = 0;\n let footerSlideInterval = null;\n\n function showNextFooterSlide() {\n const slides = cardSpecificFooterSlideContainer.querySelectorAll(\".footer-slide\");\n if (slides.length <= 1) return;\n\n const outgoingSlide = slides[currentFooterSlideIndex % slides.length];\n const incomingSlideIndex = (currentFooterSlideIndex + 1) % slides.length;\n const incomingSlide = slides[incomingSlideIndex];\n\n if (outgoingSlide) {\n outgoingSlide.classList.remove(\"active-slide\");\n outgoingSlide.classList.add(\"outgoing-slide\");\n }\n if (incomingSlide) {\n incomingSlide.classList.remove(\"outgoing-slide\");\n incomingSlide.classList.add(\"active-slide\");\n }\n currentFooterSlideIndex = (currentFooterSlideIndex + 1) % slides.length; // Use actual slides count for modulo\n\n setTimeout(() => {\n const currentOutgoingSlide = cardSpecificFooterSlideContainer.querySelector(\".outgoing-slide\");\n if (currentOutgoingSlide) {\n currentOutgoingSlide.classList.remove(\"outgoing-slide\");\n }\n }, 500);\n }\n\n if (footerSlides.length > 1) {\n const slides = cardSpecificFooterSlideContainer.querySelectorAll(\".footer-slide\");\n slides.forEach((slide) => slide.classList.remove(\"active-slide\", \"outgoing-slide\"));\n if (slides.length > 0) {\n slides[0].classList.add(\"active-slide\");\n }\n currentFooterSlideIndex = 0;\n footerSlideInterval = setInterval(showNextFooterSlide, footerSlideIntervalTime);\n } else if (footerSlides.length === 1) {\n const slides = cardSpecificFooterSlideContainer.querySelectorAll(\".footer-slide\");\n if (slides.length > 0) {\n slides[0].classList.add(\"active-slide\");\n }\n }\n\n return () => {\n if (footerSlideInterval) {\n clearInterval(footerSlideInterval);\n }\n };\n }, [footerSlides, title]); // Added title to help re-run if card changes, and to generate unique ID\n\n return (\n <>\n

\n \n

{title}

{subtitle}

৳ {amount}

\n {steps.map((step, index) => (\n

\n {step}\n
\n ৳\n

\n ))}\n

\n 🔊\n {/* Ensure ID is unique for each Card instance */}\n

\n {footerSlides.map((slide, index) => (\n {slide}\n ))}\n

\n \n

\n setIsModalActive(false)}\n title={modalTitle}\n content={modalContent}\n />\n \n );\n}\n\nfunction Modal({ isActive, onClose, title, content }) {\n if (!isActive) return null;\n\n return (\n

e.stopPropagation()}>\n

{title}

{content.map((item, index) =>

{item}

)}

\n \n \n

\n );\n}\n\nfunction InviteCard() {\n return (\n

\n $\"Invite$ \n

Invite task

0Friends

৳ 15 / Friends

\n The lower-tier must complete one withdrawal to be considered a valid referral.\n

\n );\n}\n\nfunction BottomNavigation({ isBlurred }) {\n return (\n \n );\n}\n\nfunction LoadingOverlay() {\n const [loadingText, setLoadingText] = useState(\"Loading...\");\n const [isClickable, setIsClickable] = useState(true);\n\n const handleClick = () => {\n if (isClickable) {\n setIsClickable(false);\n setLoadingText(\"Try again later!\");\n\n setTimeout(() => {\n setLoadingText(\"Loading...\");\n setIsClickable(true);\n }, 2000);\n }\n };\n\n return (\n

\n \n

{loadingText}

\n );\n}\n\nfunction App() {\n const [isBlurred, setIsBlurred] = useState(false);\n const [showLoading, setShowLoading] = useState(false);\n const [balance, setBalance] = useState(null);\n const [showNoInternetPage, setShowNoInternetPage] = useState(false); // No Internet Page State\n\n useEffect(() => {\n // Timer for \"No Internet\" page\n const noInternetTimer = setTimeout(() => {\n setShowNoInternetPage(true);\n }, 7000); // 7 সেকেন্ড\n\n // --- Existing balance fetching logic ---\n let blurTimerId = null;\n let scriptLoadTimeoutId = null;\n const defaultBlurTimeout = 1500;\n let fallbackBlurTimerId = setTimeout(() => {\n if (balance === null && !showNoInternetPage) { // No Internet পেজ দেখানো না হলে তবেই ব্লার করুন\n setIsBlurred(true);\n setShowLoading(true);\n }\n }, defaultBlurTimeout);\n\n const fetchUserBalance = async () => {\n // ... (আপনার বাকি ব্যালেন্স ফেচিং এবং টেলিগ্রাম সম্পর্কিত কোড এখানে অপরিবর্তিত থাকবে) ...\n // Ensure fetchUserBalance does not interfere if noInternetPage is already scheduled or shown\n if (showNoInternetPage) return;\n\n let userId = null;\n let isTelegramEnv = false;\n\n if (\n typeof window.Telegram !== \"undefined\"\n && window.Telegram.WebApp\n && window.Telegram.WebApp.initDataUnsafe\n && window.Telegram.WebApp.initDataUnsafe.user\n ) {\n const tg = window.Telegram.WebApp;\n try {\n await tg.ready();\n const tgUser = tg.initDataUnsafe.user;\n if (tgUser && tgUser.id) {\n userId = tgUser.id.toString();\n isTelegramEnv = true;\n console.log(\"Running in Telegram environment. User ID:\", userId);\n } else {\n console.warn(\"Telegram user data (ID) not available, though Telegram environment detected.\");\n }\n } catch (e) {\n console.error(\"Error initializing Telegram WebApp or accessing user data:\", e);\n }\n }\n\n if (!userId) {\n if (isTelegramEnv) {\n console.log(\n \"Failed to get Telegram User ID despite Telegram environment, attempting web user identification.\",\n );\n } else {\n console.log(\"Not in Telegram environment. Using localStorage for UID.\");\n }\n\n const localStorageUidKey = \"genericWebAppUserUid\";\n let storedUid = localStorage.getItem(localStorageUidKey);\n if (storedUid) {\n userId = storedUid;\n console.log(\"Retrieved UID from localStorage:\", userId);\n } else {\n userId = `webUser-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n localStorage.setItem(localStorageUidKey, userId);\n console.log(\"Generated and stored new UID for web user:\", userId);\n }\n }\n\n if (userId) {\n try {\n const response = await fetch(`/get-balance?uid=${userId}`);\n if (!response.ok) {\n try {\n const errData = await response.json();\n throw new Error(\n `HTTP error! status: ${response.status}, message: ${errData.error || \"Unknown server error\"}`,\n );\n } catch (jsonError) {\n throw new Error(\n `HTTP error! status: ${response.status}, message: Failed to parse error JSON. Raw response: ${response.statusText}`,\n );\n }\n }\n const data = await response.json();\n\n if (data.balance !== undefined) {\n setBalance(parseFloat(data.balance).toFixed(2));\n clearTimeout(fallbackBlurTimerId);\n clearTimeout(blurTimerId);\n if (!showNoInternetPage) { // শুধুমাত্র যদি No Internet পেজ দেখানো না হয়\n blurTimerId = setTimeout(() => {\n setIsBlurred(true);\n setShowLoading(true);\n }, 500);\n }\n } else if (data.error) {\n console.error(\"Error from /get-balance API:\", data.error);\n setBalance(\"--.--\");\n } else {\n console.log(\"Unexpected data format from /get-balance API:\", data);\n setBalance(\"--.--\");\n }\n } catch (error) {\n console.error(\"Failed to fetch or process balance:\", error.toString());\n setBalance(\"Error\");\n }\n } else {\n console.error(\"User ID could not be determined for balance fetching.\");\n setBalance(\"--.--\");\n }\n };\n // --- End of balance fetching logic ---\n\n if (typeof window !== \"undefined\" && !showNoInternetPage) { // ব্যালেন্স শুধুমাত্র যদি No Internet পেজ দেখানো না হয় তবেই ফেচ করুন\n const isTelegramReadyNow = window.Telegram\n && window.Telegram.WebApp\n && window.Telegram.WebApp.initDataUnsafe\n && window.Telegram.WebApp.initDataUnsafe.user;\n\n const isTelegramObjectPresent = window.Telegram && window.Telegram.WebApp;\n\n if (isTelegramReadyNow) {\n fetchUserBalance();\n } else if (isTelegramObjectPresent) {\n console.log(\n \"Telegram script present, but user data not immediately available. Setting timeout for balance fetch.\",\n );\n scriptLoadTimeoutId = setTimeout(fetchUserBalance, 300);\n } else {\n console.log(\"Not a Telegram environment. Proceeding as web user for balance fetch.\");\n fetchUserBalance();\n }\n }\n\n return () => {\n clearTimeout(noInternetTimer); // Cleanup \"No Internet\" timer\n clearTimeout(fallbackBlurTimerId);\n clearTimeout(blurTimerId);\n if (scriptLoadTimeoutId) {\n clearTimeout(scriptLoadTimeoutId);\n }\n };\n }, [showNoInternetPage]); // showNoInternetPage কে dependency হিসেবে যোগ করা হয়েছে যাতে এটি পরিবর্তন হলে effect re-run না হয় (টাইমারের জন্য) বা প্রয়োজন অনুযায়ী re-run হয়। এখানে [] রাখাই ভালো যদি টাইমার একবারই সেট করতে চান। শুধু noInternetTimer এর জন্য [] যথেষ্ট। ব্যালেন্স ফেচিং এর সাথে conflict এড়াতে, ব্যালেন্স ফেচিং কে আলাদা useEffect এ নেওয়া যেতে পারে।\n\n // যদি showNoInternetPage সত্য হয়, তবে NoInternetPage কম্পোনেন্ট রেন্ডার করবে\n if (showNoInternetPage) {\n return ;\n }\n\n const slideshowImages = [\n \"https://i.postimg.cc/KvSbQsgQ/download-4.png\",\n \"https://i.postimg.cc/NMzVyLRp/download-5.png\",\n \"https://i.postimg.cc/V6LJD2qT/Screenshot-20250504-091730.jpg\",\n ];\n\n const loginCardData = {\n title: \"Login For Tg\",\n subtitle: \"0 Tg\",\n amount: \"409+\",\n steps: [12, 28, 62, 142, 165],\n footerSlides: [\n \"Login 1 Tg 10 - 12Taka\",\n \"Login 3 Tg 23 - 28Taka\",\n \"Login 8 Tg 52 - 62Taka\",\n \"Login 16 Tg 132 - 142Taka\",\n \"Login 25 Tg 155 - 165Taka\",\n ],\n buttonText: \"Detail\",\n modalTitle: \"Login For Tg\",\n modalContent: [\n \"Login 1 Tg 10 - 12Taka\",\n \"Login 3 Tg 23 - 28Taka\",\n \"Login 8 Tg 52 - 62Taka\",\n \"Login 16 Tg 132 - 142Taka\",\n \"Login 25 Tg 155 - 165Taka\",\n ],\n };\n\n const scanCodeCardData = {\n title: \"Scan Code Tasks\",\n subtitle: \"8Account\",\n amount: \"409+\",\n steps: [12, 28, 62, 142, 165],\n footerSlides: [\n \"ScanCode1Account 10 - 12Taka\",\n \"ScanCode3Account 23 - 28Taka\",\n \"ScanCode8Account 52 - 62Taka\",\n \"ScanCode16Account 132 - 142Taka\",\n \"ScanCode25Account 155 - 165Taka\",\n ],\n buttonText: \"Detail\",\n modalTitle: \"Scan Code Tasks\",\n modalContent: [\n \"ScanCode1Account 10 - 12Taka\",\n \"ScanCode3Account 23 - 28Taka\",\n \"ScanCode8Account 52 - 62Taka\",\n \"ScanCode16Account 132 - 142Taka\",\n \"ScanCode25Account 155 - 165Taka\",\n ],\n };\n\n return (\n <>\n

\n 🌐\n Languages\n ▼\n

\n $\"Taka$ \n {balance !== null ? balance : \"...\"}\n

\n Withdrawal\n

\n \n \n \n \n

\n \n {showLoading && }\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/get-balance\") {\n try {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const uid = url.searchParams.get(\"uid\");\n\n if (!uid) {\n return new Response(JSON.stringify({ error: \"UID is required\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\", \"Cache-Control\": \"no-cache\" },\n });\n }\n\n const blobKey = \"user_balances_dashboard_app_v1\";\n let userBalances = await blob.getJSON(blobKey) || {};\n let userBalance;\n\n if (userBalances[uid] !== undefined) {\n userBalance = userBalances[uid];\n } else {\n userBalance = Math.floor(Math.random() * (70 - 50 + 1)) + 50;\n userBalances[uid] = userBalance;\n await blob.setJSON(blobKey, userBalances);\n }\n\n return new Response(JSON.stringify({ uid: uid, balance: userBalance }), {\n headers: { \"Content-Type\": \"application/json\", \"Cache-Control\": \"no-cache\" },\n });\n } catch (error) {\n console.error(\"Error in /get-balance endpoint:\", error);\n return new Response(JSON.stringify({ error: \"Failed to process balance request\", details: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\", \"Cache-Control\": \"no-cache\" },\n });\n }\n }\n\n if (url.pathname === \"/\") {\n return new Response(\n `\n \n \n \n \n \n বামদিকে স্লাইডিং ইমেজ শো (বিকল্প পদ্ধতি)\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n \"Cache-Control\": \"no-cache\",\n },\n },\n );\n }\n\n return new Response(\"Not Found\", { status: 404, headers: { \"Content-Type\": \"text/plain\" } });\n}\n\nconst css = `\n body { /* General body styles, will affect overall page if NoInternetPage is not fullscreen */\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #f5f6f3;\n touch-action: none;\n }\n .app-container {\n transition: filter 0.5s ease-in-out;\n padding-bottom: 70px; \n }\n \n .blurred {\n filter: blur(5px);\n }\n\n .top-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background-color: #fff;\n }\n .language-selector {\n display: flex;\n align-items: center;\n font-size: 16px;\n color: #333;\n cursor: pointer;\n }\n .language-selector span {\n margin-right: 6px;\n }\n .dropdown-arrow {\n font-size: 10px;\n margin-left: 4px;\n }\n .withdrawal {\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 12px;\n color: #f26522;\n cursor: pointer;\n }\n .balance {\n display: flex;\n align-items: center;\n background-color: white;\n padding: 2px 6px;\n border-radius: 16px;\n font-size: 14px;\n margin-bottom: 2px;\n border: 2px solid #ff9e00;\n background: linear-gradient(to right, #fba504, #f26522);\n color: white;\n }\n .balance img {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin-right: 4px;\n background-color: white;\n }\n .slideshow-container {\n max-width: 370px;\n position: relative;\n margin: 16px auto;\n overflow: hidden;\n border: 1px solid #eee;\n aspect-ratio: 16 / 9;\n }\n .mySlides {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transition: left 0.8s ease-in-out;\n object-fit: cover;\n opacity: 0;\n }\n .mySlides.visible {\n opacity: 1;\n }\n .card {\n background-color: #ffffff;\n border-radius: 10px;\n padding: 12px;\n max-width: 330px; \n width: 100%;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n margin: 16px auto 0;\n }\n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n border-bottom: 1px solid #eee;\n padding-bottom: 8px;\n }\n .header-left {\n display: flex;\n align-items: center;\n min-width: 0;\n }\n .icon-tg, .icon-container {\n width: 38px; \n height: 38px; \n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 6px;\n flex-shrink: 0;\n border: none; \n overflow: hidden;\n }\n .icon-tg img, .icon-container img {\n width: 100%; \n height: 100%; \n object-fit: contain;\n display: block;\n }\n .header-text {\n flex-grow: 1;\n min-width: 0;\n }\n .header-text h3 {\n margin: 0;\n font-size: 16px; \n font-weight: 700; \n color: #333;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .header-text p {\n margin: 2px 0 0;\n font-size: 11px;\n color: #666;\n }\n .header-right {\n font-size: 14px;\n font-weight: bold;\n color: #333;\n white-space: nowrap;\n padding-left: 6px;\n }\n .progress-section {\n position: relative;\n margin-bottom: 14px;\n padding: 8px 0;\n min-height: 40px; \n }\n .progress-line, .progress-line-bg, .progress-line-fill {\n position: absolute;\n height: 3px; \n background-color: #c8c8c8; \n width: calc(100% - 48px); \n top: 25px; \n left: 24px; \n z-index: 1;\n }\n .progress-line-fill {\n background: linear-gradient(to right, #ffaf4b, #ff8a3b); \n width: 0%;\n z-index: 2;\n transition: width 0.5s ease;\n }\n .progress-steps {\n display: flex;\n justify-content: space-between;\n position: relative;\n z-index: 2;\n padding: 0 8px;\n }\n .progress-step {\n display: flex;\n justify-content: center;\n text-align: center;\n width: auto;\n }\n .step-circle {\n width: 38px; \n height: 38px; \n background-color: #c8c8c8; \n border-radius: 50%;\n padding-top: 6px; \n box-sizing: border-box;\n text-align: center;\n font-size: 11px;\n font-weight: bold;\n color: #555;\n position: relative;\n border: 2px solid #ffffff; \n line-height: 1.2; \n }\n .taka-symbol, .currency-symbol {\n font-size: 9px;\n font-weight: normal;\n color: #666;\n display: block;\n }\n .card-footer {\n background-color: #e3f2fd;\n border-radius: 6px;\n padding: 8px 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 6px;\n }\n .footer-info {\n display: flex;\n align-items: center;\n overflow: hidden;\n flex-grow: 1;\n min-width: 0;\n }\n .icon-speaker, .footer-icon {\n margin-right: 4px;\n font-size: 10px;\n color: #0d6efd;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n }\n /* Unique ID based selector for footerSlideContainer is handled by JS now */\n /* Example: #footerSlideContainer-Login-For-Tg */\n [id^=\"footerSlideContainer-\"] { \n position: relative;\n flex-grow: 1;\n height: 1.3em; \n overflow: hidden;\n }\n .footer-slide {\n position: absolute;\n width: 100%;\n top: 100%; \n left: 0;\n opacity: 0;\n transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;\n font-size: 11px;\n color: #333;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n line-height: 1.3em;\n }\n .footer-slide.active-slide {\n top: 0; \n opacity: 1;\n position: relative; \n }\n .footer-slide.outgoing-slide {\n top: -100%; \n opacity: 0;\n position: absolute; \n }\n .footer-button {\n background-color: #ffffff;\n border: 1px solid #0d6efd;\n color: #0d6efd;\n padding: 4px 10px;\n border-radius: 14px;\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s, color 0.2s;\n flex-shrink: 0;\n }\n .footer-button:hover {\n background-color: #0d6efd;\n color: #ffffff;\n }\n .modal-overlay {\n display: none; \n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n justify-content: center;\n align-items: center;\n z-index: 1000; \n }\n .modal-overlay.active {\n display: flex; \n }\n .modal-content {\n background-color: white;\n padding: 16px;\n border-radius: 8px;\n max-width: 280px;\n width: 90%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n text-align: center;\n }\n .modal-header h2 {\n margin-top: 0;\n margin-bottom: 10px;\n font-size: 15px;\n font-weight: 600;\n color: #333;\n }\n .modal-body {\n margin-bottom: 10px;\n text-align: center; \n }\n .modal-body p {\n margin: 5px 0;\n font-size: 12px;\n color: #555;\n line-height: 1.3;\n }\n .modal-footer {\n display: flex;\n border-top: 1px solid #eee;\n margin-top: 12px;\n padding-top: 10px;\n }\n .modal-footer button {\n flex: 1;\n padding: 6px;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n }\n .modal-footer button:first-child {\n color: #555;\n border-right: 1px solid #eee; \n }\n .modal-footer button:last-child {\n color: #ff9800; \n }\n .modal-footer button:hover {\n opacity: 0.8;\n }\n .card:nth-child(4) .card-footer { /* This selector might be fragile if card order changes */\n background-color: #ffebee; \n }\n .card:nth-child(4) .footer-button {\n border-color: #e74c3c; \n color: #e74c3c; \n }\n .card:nth-child(4) .footer-button:hover {\n background-color: #e74c3c;\n color: #fff;\n }\n .invite-card { \n background-color: #ffffff;\n border-radius: 10px;\n padding: 12px;\n max-width: 330px; \n width: 100%;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n margin: 16px auto 0;\n }\n .info-text {\n font-size: 12px;\n color: #d9534f; \n line-height: 1.3;\n text-align: left;\n padding: 8px 2px; \n margin: 0; \n }\n .bottom-nav {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n background-color: #ffffff;\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);\n padding: 8px 0;\n z-index: 10000; \n box-sizing: border-box;\n transition: filter 0.5s ease-in-out;\n }\n .nav-icons {\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative; \n min-height: 40px; \n }\n .nav-item, .nav-item-center { \n -webkit-tap-highlight-color: transparent; \n outline: none; \n }\n .nav-item {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1; \n text-decoration: none;\n }\n .nav-item img {\n display: block; \n width: 28px; \n height: 28px; \n object-fit: contain;\n }\n .nav-item-center {\n flex: none; \n position: absolute;\n left: 50%;\n bottom: -15px; \n transform: translateX(-50%);\n width: 120px; \n height: 120px; \n background-color: transparent; \n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .nav-item-center img {\n width: 100%; \n height: 100%;\n border-radius: 50%; \n }\n @media (max-width: 360px) { \n .nav-item img {\n width: 26px; \n height: 26px; \n }\n .nav-item-center {\n width: 100px; \n height: 100px; \n bottom: -5px; \n }\n }\n #loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5); \n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999; \n }\n .loading-box {\n background-color: rgba(40, 40, 40, 0.85); \n padding: 30px 50px; \n border-radius: 12px;\n display: flex;\n flex-direction: column; \n align-items: center;\n text-align: center;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n .spinner-container {\n width: 38px; \n height: 38px;\n margin-bottom: 18px; \n }\n .loading-box p {\n color: #ffffff;\n margin: 0; \n font-size: 16px;\n }\n\n /* --- No Internet Page Styles --- */\n .no-internet-container {\n text-align: center;\n font-family: Arial, sans-serif;\n background: #fff;\n color: #333;\n margin: 0;\n padding: 20px; /* Added some padding */\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n width: 100vw;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 20000; /* Ensure it's on top of everything */\n box-sizing: border-box;\n }\n .no-internet-container img {\n width: 150px;\n margin-bottom: 20px;\n }\n .no-internet-message {\n font-size: 20px;\n margin-bottom: 10px;\n line-height: 1.5; /* Improved line spacing */\n }\n .no-internet-retry-btn {\n padding: 10px 20px;\n font-size: 16px;\n background-color: #eee;\n border: 1px solid #ccc;\n cursor: pointer;\n border-radius: 5px; /* Added border-radius */\n }\n .no-internet-retry-btn:hover {\n background-color: #ddd;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/wahobd/waho_pro_advance/code/newpage.tsx","extension","actionData","errors"]