| <!DOCTYPE html> |
| <html lang="vi" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>Crypto Intel Fortress — Offline-First & Bulletproof</title> |
| <meta name="description" content="Real-time Crypto Security & On-chain Monitor."> |
| |
| <meta name="referrer" content="no-referrer-when-downgrade"> |
| |
| |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>"> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'system-ui', 'sans-serif'], |
| mono: ['JetBrains Mono', 'monospace'], |
| }, |
| animation: { |
| 'fade-in': 'fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1)', |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| }, |
| keyframes: { |
| fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } } |
| }, |
| colors: { |
| 'fortress-bg': '#020617', |
| } |
| } |
| } |
| } |
| </script> |
|
|
| |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
|
|
| <style> |
| body { background-color: #000000; color: #e2e8f0; } |
| ::-webkit-scrollbar { width: 6px; height: 6px; } |
| ::-webkit-scrollbar-track { background: #020617; } |
| ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } |
| ::-webkit-scrollbar-thumb:hover { background: #475569; } |
| .glass-panel { |
| background: rgba(15, 23, 42, 0.6); |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
| } |
| .no-scrollbar::-webkit-scrollbar { display: none; } |
| .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } |
| |
| |
| .twitter-container iframe { |
| width: 100% !important; |
| height: 100% !important; |
| border-radius: 8px; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-black to-black selection:bg-cyan-500/30 selection:text-cyan-200"> |
| <div id="root"></div> |
|
|
| <script type="text/babel"> |
| const { useState, useEffect, useRef, useMemo } = React; |
| |
| |
| const Icon = ({ children, size = 20, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| {children} |
| </svg> |
| ); |
| |
| const icons = { |
| shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>, |
| search: <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>, |
| trash: <><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>, |
| wifi: <path d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/>, |
| wifiOff: <><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a11 11 0 0 1 7.67-9.77"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><path d="M12 20h.01"/></>, |
| external: <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></>, |
| plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>, |
| alert: <><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></> |
| }; |
| |
| |
| const DEFAULT_ACCOUNTS = [ |
| { handle: "PeckShieldAlert", name: "PeckShield", cat: "Security" }, |
| { handle: "realScamSniffer", name: "Scam Sniffer", cat: "Security" }, |
| { handle: "ZachXBT", name: "ZachXBT", cat: "Security" }, |
| { handle: "CertiKAlert", name: "CertiK", cat: "Security" }, |
| { handle: "lookonchain", name: "Lookonchain", cat: "On-chain" }, |
| { handle: "whale_alert", name: "Whale Alert", cat: "On-chain" }, |
| { handle: "ArkhamIntel", name: "Arkham", cat: "On-chain" }, |
| { handle: "WuBlockchain", name: "Wu Blockchain", cat: "News" }, |
| { handle: "Tier10k", name: "DB (Tier10k)", cat: "News" }, |
| { handle: "DeFiLlama", name: "DeFiLlama", cat: "Data" } |
| ]; |
| |
| const CATEGORIES = ["All", "Security", "On-chain", "News", "Data", "Custom"]; |
| const STORAGE_KEY = 'CRYPTO_FORTRESS_V70'; |
| |
| |
| |
| const Skeleton = () => ( |
| <div className="w-full h-full p-4 flex flex-col gap-4 animate-pulse-slow"> |
| <div className="flex gap-3"> |
| <div className="w-10 h-10 rounded-full bg-slate-800/50"></div> |
| <div className="flex-1 space-y-2"> |
| <div className="h-3 bg-slate-800/50 rounded w-1/3"></div> |
| <div className="h-2 bg-slate-800/30 rounded w-1/4"></div> |
| </div> |
| </div> |
| <div className="flex-1 bg-slate-800/20 rounded-lg border border-slate-800/30"></div> |
| </div> |
| ); |
| |
| |
| const TwitterCard = React.memo(({ account, onRemove, isOnline }) => { |
| const containerRef = useRef(null); |
| const [status, setStatus] = useState('loading'); |
| |
| useEffect(() => { |
| if (!isOnline) { |
| setStatus('offline'); |
| return; |
| } |
| |
| setStatus('loading'); |
| |
| let isMounted = true; |
| const container = containerRef.current; |
| |
| const initWidget = () => { |
| if (!window.twttr || !window.twttr.widgets) { |
| setTimeout(initWidget, 500); |
| return; |
| } |
| |
| if (!container) return; |
| container.innerHTML = ''; |
| |
| |
| window.twttr.widgets.createTimeline( |
| { |
| sourceType: 'profile', |
| screenName: account.handle |
| }, |
| container, |
| { |
| theme: 'dark', |
| height: 400, |
| chrome: 'noheader,nofooter,noborders,transparent,noscrollbar', |
| dnt: true |
| } |
| ).then((el) => { |
| if (isMounted) { |
| if (el) { |
| setStatus('loaded'); |
| } else { |
| |
| setStatus('error'); |
| } |
| } |
| }).catch(() => { |
| if (isMounted) setStatus('error'); |
| }); |
| }; |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| if (entries[0].isIntersecting) { |
| initWidget(); |
| observer.disconnect(); |
| } |
| }, { rootMargin: '100px' }); |
| |
| if (container) observer.observe(container); |
| |
| |
| const timer = setTimeout(() => { |
| if (isMounted && status === 'loading') { |
| setStatus('error'); |
| } |
| }, 4000); |
| |
| return () => { |
| isMounted = false; |
| observer.disconnect(); |
| clearTimeout(timer); |
| }; |
| }, [account.handle, isOnline]); |
| |
| const colorMap = { |
| Security: "text-red-400 border-red-500/30 bg-red-500/10", |
| "On-chain": "text-cyan-400 border-cyan-500/30 bg-cyan-500/10", |
| News: "text-emerald-400 border-emerald-500/30 bg-emerald-500/10", |
| Data: "text-purple-400 border-purple-500/30 bg-purple-500/10", |
| Custom: "text-amber-400 border-amber-500/30 bg-amber-500/10" |
| }; |
| |
| return ( |
| <div className="glass-panel rounded-2xl overflow-hidden flex flex-col h-[450px] group transition-all duration-300 hover:border-slate-600 hover:shadow-2xl hover:shadow-cyan-900/10 animate-fade-in relative"> |
| |
| {/* Card Header */} |
| <div className="p-4 border-b border-white/5 bg-slate-900/50 flex justify-between items-center z-10 shrink-0"> |
| <div className="flex items-center gap-3 overflow-hidden"> |
| <div className={`text-[10px] font-mono font-bold px-2 py-0.5 rounded border uppercase tracking-wider ${colorMap[account.cat] || colorMap.Custom}`}> |
| {account.cat.substring(0, 3)} |
| </div> |
| <div className="flex flex-col min-w-0"> |
| <span className="font-bold text-slate-100 truncate text-sm leading-tight">{account.name}</span> |
| <a href={`https://x.com/${account.handle}`} target="_blank" rel="noopener noreferrer" className="text-[11px] text-slate-500 hover:text-cyan-400 truncate flex items-center gap-1 transition-colors font-mono"> |
| @{account.handle} <Icon size={10}>{icons.external}</Icon> |
| </a> |
| </div> |
| </div> |
| <button onClick={() => onRemove(account.handle)} className="text-slate-600 hover:text-red-400 p-2 rounded-lg hover:bg-white/5 transition-all opacity-0 group-hover:opacity-100 focus:opacity-100" title="Remove Feed"> |
| <Icon size={16}>{icons.trash}</Icon> |
| </button> |
| </div> |
| |
| {/* Card Body */} |
| <div className="flex-1 relative bg-black/20 overflow-hidden"> |
| {/* Twitter Container */} |
| <div ref={containerRef} className={`w-full h-full overflow-y-auto twitter-container scrollbar-thin ${status === 'loaded' ? 'opacity-100' : 'opacity-0'} transition-opacity duration-500`}></div> |
| |
| {status === 'loading' && ( |
| <div className="absolute inset-0 pointer-events-none"> |
| <Skeleton /> |
| </div> |
| )} |
| |
| {(status === 'error' || status === 'offline') && ( |
| <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center bg-slate-900/90 backdrop-blur-sm z-20"> |
| <div className="p-3 bg-slate-800 rounded-full mb-3 text-slate-400"> |
| <Icon size={24}>{status === 'offline' ? icons.wifiOff : icons.alert}</Icon> |
| </div> |
| <span className="text-slate-300 text-sm font-bold mb-1"> |
| {status === 'offline' ? 'Offline' : 'Feed Unavailable'} |
| </span> |
| <p className="text-xs text-slate-500 mb-4 max-w-[200px]"> |
| {status === 'offline' |
| ? 'Reconnect to internet.' |
| : 'Twitter restricts embedding in this environment (HF/AdBlock).'} |
| </p> |
| <a href={`https://x.com/${account.handle}`} target="_blank" rel="noopener noreferrer" className="px-5 py-2 bg-slate-800 hover:bg-cyan-600 hover:text-black text-cyan-400 text-xs font-bold font-mono rounded-lg transition-all border border-cyan-500/30 flex items-center gap-2"> |
| OPEN ON X.COM <Icon size={12}>{icons.external}</Icon> |
| </a> |
| </div> |
| )} |
| </div> |
| </div> |
| ); |
| }); |
| |
| |
| const App = () => { |
| const [accounts, setAccounts] = useState(() => { |
| try { |
| const saved = localStorage.getItem(STORAGE_KEY); |
| return saved ? JSON.parse(saved) : DEFAULT_ACCOUNTS; |
| } catch { return DEFAULT_ACCOUNTS; } |
| }); |
| const [activeCategory, setActiveCategory] = useState("All"); |
| const [input, setInput] = useState(""); |
| const [online, setOnline] = useState(navigator.onLine); |
| |
| useEffect(() => { |
| |
| window.twttr = (function(d, s, id) { |
| var js, fjs = d.getElementsByTagName(s)[0], |
| t = window.twttr || {}; |
| if (d.getElementById(id)) return t; |
| js = d.createElement(s); |
| js.id = id; |
| js.src = "https://platform.twitter.com/widgets.js"; |
| fjs.parentNode.insertBefore(js, fjs); |
| t._e = []; |
| t.ready = function(f) { |
| t._e.push(f); |
| }; |
| return t; |
| }(document, "script", "twitter-wjs")); |
| |
| const updateOnline = () => setOnline(navigator.onLine); |
| window.addEventListener('online', updateOnline); |
| window.addEventListener('offline', updateOnline); |
| return () => { |
| window.removeEventListener('online', updateOnline); |
| window.removeEventListener('offline', updateOnline); |
| }; |
| }, []); |
| |
| useEffect(() => { |
| localStorage.setItem(STORAGE_KEY, JSON.stringify(accounts)); |
| }, [accounts]); |
| |
| const addAccount = (e) => { |
| e.preventDefault(); |
| if (!input.trim()) return; |
| let handle = input.trim(); |
| |
| try { |
| const url = new URL(handle); |
| handle = url.pathname.split('/').filter(Boolean).pop(); |
| } catch (e) {} |
| |
| handle = handle.replace('@', '').replace('?', '').split('/')[0]; |
| |
| if (accounts.some(a => a.handle.toLowerCase() === handle.toLowerCase())) { |
| alert("Target already monitored."); |
| return; |
| } |
| |
| setAccounts([{ handle, name: handle, cat: "Custom" }, ...accounts]); |
| setInput(""); |
| }; |
| |
| const filteredAccounts = useMemo(() => { |
| if (activeCategory === "All") return accounts; |
| return accounts.filter(acc => acc.cat === activeCategory); |
| }, [accounts, activeCategory]); |
| |
| return ( |
| <div className="min-h-screen flex flex-col font-sans pb-10"> |
| {/* HEADER */} |
| <header className="sticky top-0 z-50 glass-panel border-t-0 border-x-0"> |
| <div className="max-w-[1920px] mx-auto"> |
| <div className="px-4 py-4 flex flex-col md:flex-row md:items-center justify-between gap-4"> |
| <div className="flex items-center gap-4"> |
| <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-600 to-blue-700 flex items-center justify-center shadow-lg shadow-cyan-900/20"> |
| <Icon size={24} className="text-white">{icons.shield}</Icon> |
| </div> |
| <div> |
| <h1 className="text-xl font-black tracking-tight text-white uppercase flex items-center gap-2"> |
| Crypto Fortress <span className="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded border border-slate-700">HF-Fixed</span> |
| </h1> |
| <p className="text-xs text-slate-500 font-mono">Real-time Intel Command Center</p> |
| </div> |
| </div> |
| <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-bold font-mono transition-colors ${online ? 'bg-emerald-950/30 border-emerald-500/30 text-emerald-400' : 'bg-red-950/30 border-red-500/30 text-red-400'}`}> |
| <Icon size={14}>{online ? icons.wifi : icons.wifiOff}</Icon> |
| <span>{online ? 'ONLINE' : 'OFFLINE'}</span> |
| </div> |
| </div> |
| |
| <div className="border-t border-white/5 bg-black/20 px-4 py-2 flex flex-col md:flex-row gap-3 justify-between items-center"> |
| <div className="flex gap-2 overflow-x-auto no-scrollbar w-full md:w-auto pb-1 md:pb-0"> |
| {CATEGORIES.map(cat => ( |
| <button |
| key={cat} |
| onClick={() => setActiveCategory(cat)} |
| className={`px-3 py-1.5 rounded-lg text-xs font-bold font-mono transition-all whitespace-nowrap border ${ |
| activeCategory === cat |
| ? 'bg-slate-800 text-cyan-400 border-cyan-500/50' |
| : 'border-transparent text-slate-500 hover:text-slate-300 hover:bg-white/5' |
| }`} |
| > |
| {cat.toUpperCase()} |
| </button> |
| ))} |
| </div> |
| <form onSubmit={addAccount} className="flex w-full md:w-auto relative group"> |
| <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none text-slate-600"> |
| <Icon size={14}>{icons.plus}</Icon> |
| </div> |
| <input |
| type="text" |
| value={input} |
| onChange={(e) => setInput(e.target.value)} |
| placeholder="Add target handle..." |
| className="w-full md:w-64 bg-slate-900/50 border border-slate-700 text-slate-200 text-xs rounded-l-lg pl-9 pr-3 py-2 focus:outline-none focus:border-cyan-500 font-mono transition-all" |
| /> |
| <button className="bg-slate-800 hover:bg-cyan-700 text-white px-4 py-2 rounded-r-lg text-xs font-bold border border-l-0 border-slate-700"> |
| ADD |
| </button> |
| </form> |
| </div> |
| </div> |
| </header> |
| |
| {/* MAIN GRID */} |
| <main className="flex-1 p-4 md:p-6 w-full max-w-[1920px] mx-auto"> |
| {filteredAccounts.length > 0 ? ( |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> |
| {filteredAccounts.map(acc => ( |
| <TwitterCard |
| key={acc.handle} |
| account={acc} |
| onRemove={(h) => setAccounts(accounts.filter(a => a.handle !== h))} |
| isOnline={online} |
| /> |
| ))} |
| </div> |
| ) : ( |
| <div className="flex flex-col items-center justify-center h-[50vh] text-slate-600"> |
| <div className="p-4 bg-slate-900 rounded-full mb-4"> |
| <Icon size={48} className="opacity-50">{icons.search}</Icon> |
| </div> |
| <h2 className="text-xl font-bold text-slate-500">No Intelligence Found</h2> |
| </div> |
| )} |
| </main> |
| </div> |
| ); |
| }; |
| |
| const root = ReactDOM.createRoot(document.getElementById('root')); |
| root.render(<App />); |
| </script> |
| </body> |
| </html> |
