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

\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 const footerSlideContainers = document.querySelectorAll(\"#footerSlideContainer\");\n const footerSlideIntervalTime = 3000;\n let currentFooterSlideIndex = 0;\n let footerSlideInterval = null;\n\n function showNextFooterSlide() {\n footerSlideContainers.forEach((container) => {\n const slides = container.querySelectorAll(\".footer-slide\");\n if (slides.length <= 1) return;\n\n const outgoingSlide = slides[currentFooterSlideIndex];\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 });\n\n currentFooterSlideIndex = (currentFooterSlideIndex + 1) % footerSlides.length;\n\n setTimeout(() => {\n footerSlideContainers.forEach((container) => {\n const outgoingSlide = container.querySelector(\".outgoing-slide\");\n if (outgoingSlide) {\n outgoingSlide.classList.remove(\"outgoing-slide\");\n }\n });\n }, 500);\n }\n\n if (footerSlides.length > 1) {\n footerSlideContainers.forEach((container) => {\n const slides = container.querySelectorAll(\".footer-slide\");\n slides.forEach((slide) => slide.classList.remove(\"active-slide\", \"outgoing-slide\"));\n slides[0].classList.add(\"active-slide\");\n });\n currentFooterSlideIndex = 0;\n footerSlideInterval = setInterval(showNextFooterSlide, footerSlideIntervalTime);\n }\n\n return () => {\n if (footerSlideInterval) {\n clearInterval(footerSlideInterval);\n }\n };\n }, [footerSlides]);\n\n return (\n <>\n

{title}

{subtitle}

৳ {amount}

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

\n {step}
\n ৳\n

\n ))}\n

\n 🔊\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 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() {\n return (\n \n );\n}\n\nfunction LoadingOverlay() {\n const [message, setMessage] = useState(\"\");\n const [showTryLater, setShowTryLater] = useState(true);\n\n useEffect(() => {\n const initialDelay = 30 * 1000; // 30 seconds\n const intervalTime = 10 * 1000; // 10 seconds\n const messageVisibleDuration = 2 * 1000; // 2 seconds\n\n let intervalId;\n let messageTimeoutId;\n\n const showMessageAndSetInterval = () => {\n if (messageTimeoutId) {\n clearTimeout(messageTimeoutId);\n }\n\n const currentMessageText = showTryLater ? \"Try again later\" : \"Try again in 24 hours\";\n setMessage(currentMessageText);\n\n messageTimeoutId = setTimeout(() => {\n setMessage(\"\");\n }, messageVisibleDuration);\n\n setShowTryLater(!showTryLater);\n };\n\n const initialTimeoutId = setTimeout(() => {\n showMessageAndSetInterval();\n intervalId = setInterval(showMessageAndSetInterval, intervalTime);\n }, initialDelay);\n\n return () => {\n clearTimeout(initialTimeoutId);\n clearTimeout(messageTimeoutId);\n clearInterval(intervalId);\n };\n }, []);\n\n return (\n

{message}

\n );\n}\n\nfunction App() {\n const [showOverlay, setShowOverlay] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setShowOverlay(true);\n }, 1000); // Changed from 3000 to 1000 (1 second)\n\n return () => clearTimeout(timer);\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 Languages\n ▼\n

\n $\"Taka$ \n 4.54\n

\n Withdrawal\n

\n \n \n \n \n \n {showOverlay && }\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 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 },\n },\n );\n}\n\nconst css = `\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #f5f6f3;\n padding-bottom: 90px;\n }\n .page-container {\n transition: filter 0.3s ease-in-out;\n }\n .page-container.disabled {\n filter: blur(5px);\n pointer-events: none;\n user-select: none;\n }\n .top-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px 20px;\n background-color: #fff;\n }\n .language-selector {\n display: flex;\n align-items: center;\n font-size: 18px;\n color: #333;\n cursor: pointer;\n }\n .language-selector span {\n margin-right: 8px;\n }\n .dropdown-arrow {\n font-size: 12px;\n margin-left: 5px;\n }\n .withdrawal {\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 14px;\n color: #f26522;\n cursor: pointer;\n }\n .balance {\n display: flex;\n align-items: center;\n background-color: white;\n padding: 3px 8px;\n border-radius: 20px;\n font-size: 16px;\n margin-bottom: 3px;\n border: 2px solid #ff9e00;\n background: linear-gradient(to right, #fba504, #f26522);\n color: white;\n }\n .balance img {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n margin-right: 6px;\n background-color: white;\n }\n .slideshow-container {\n max-width: 400px;\n position: relative;\n margin: 20px 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: 12px;\n padding: 12px;\n max-width: 320px;\n width: 100%;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n overflow: hidden;\n margin: 15px 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: 32px;\n height: 32px;\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: 1px solid #eee;\n overflow: hidden;\n }\n .icon-tg img, .icon-container img {\n width: 80%;\n height: 80%;\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: 14px;\n font-weight: 600;\n color: #333;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .header-text p {\n margin: 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: 15px;\n padding: 8px 0;\n min-height: 40px;\n }\n .progress-line, .progress-line-bg, .progress-line-fill {\n position: absolute;\n height: 2px;\n background-color: #e0e0e0;\n width: calc(100% - 40px);\n top: 24px;\n left: 20px;\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 10px;\n }\n .progress-step {\n display: flex;\n justify-content: center;\n text-align: center;\n width: auto;\n }\n .step-circle {\n width: 34px;\n height: 34px;\n background-color: #e0e0e0;\n border-radius: 50%;\n padding-top: 4px;\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.1;\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: 8px;\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 #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: 15px;\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: 20px;\n border-radius: 10px;\n max-width: 300px;\n width: 90%;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n text-align: center;\n }\n .modal-header h2 {\n margin-top: 0;\n margin-bottom: 12px;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n }\n .modal-body {\n margin-bottom: 12px;\n text-align: center;\n }\n .modal-body p {\n margin: 6px 0;\n font-size: 13px;\n color: #555;\n line-height: 1.4;\n }\n .modal-footer {\n display: flex;\n border-top: 1px solid #eee;\n margin-top: 15px;\n padding-top: 12px;\n }\n .modal-footer button {\n flex: 1;\n padding: 8px;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 14px;\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(3) .card-footer {\n background-color: #ffebee;\n }\n .card:nth-child(3) .footer-button {\n border-color: #e74c3c;\n color: #e74c3c;\n }\n .card:nth-child(3) .footer-button:hover {\n background-color: #e74c3c;\n color: #fff;\n }\n .invite-card {\n background-color: #ffffff;\n border-radius: 12px;\n padding: 12px;\n max-width: 320px;\n width: 100%;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n overflow: hidden;\n margin: 15px 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 3px;\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: 20px;\n border-top-right-radius: 20px;\n box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08);\n padding: 10px 0;\n z-index: 1000;\n box-sizing: border-box;\n }\n .nav-icons {\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative;\n min-height: 45px;\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: 26px;\n height: 26px;\n object-fit: contain;\n }\n .nav-item-center {\n flex: none;\n position: absolute;\n left: 50%;\n bottom: 8px;\n transform: translateX(-50%);\n width: 68px;\n height: 68px;\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: 24px;\n height: 24px;\n }\n .nav-item-center {\n width: 60px;\n height: 60px;\n bottom: 10px;\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.8);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n }\n .loader-box {\n background-color: rgba(255, 255, 255, 0.1);\n padding: 30px;\n border-radius: 15px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n min-width: 180px;\n min-height: 120px;\n text-align: center;\n }\n .loader {\n border: 6px solid #ffffff;\n border-top: 6px solid #3498db;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n .message {\n color: white;\n font-size: 16px;\n margin-top: 20px;\n min-height: 24px;\n font-weight: bold;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/wahobd/untitled-6323/code/new-file-8750.tsx","extension","actionData","errors"]