Spaces:

CVNSS
/

Fortress

Running

App Files Files Community

CVNSS commited on Dec 11, 2025

Commit

bdb954a

verified ·

1 Parent(s): 7f901d8

Update index.html

Browse files

Files changed (1) hide show

index.html +118 -103

index.html CHANGED Viewed

@@ -4,7 +4,9 @@
     <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. 70 years of experience applied.">
     <!-- Favicon SVG -->
     <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>">
@@ -22,16 +24,13 @@
                     },
                     animation: {
                         'fade-in': 'fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-                        'slide-up': 'slideUp 0.4s 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' } },
-                        slideUp: { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } }
                     },
                     colors: {
-                        'fortress-bg': '#020617', // Slate 950
-                        'fortress-card': '#0f172a', // Slate 900
                     }
                 }
             }
@@ -45,13 +44,10 @@
     <style>
         body { background-color: #000000; color: #e2e8f0; }
-        /* Custom Scrollbar for the Elite */
         ::-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);
@@ -59,18 +55,24 @@
             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; }
     </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, useCallback, useMemo } = React;
-        // ================== ICONS (SVG Optimized) ==================
         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}
@@ -79,7 +81,6 @@
         const icons = {
             shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>,
-            zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
             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"/>,
@@ -89,7 +90,7 @@
             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"/></>
         };
-        // ================== DATA & CONFIG ==================
         const DEFAULT_ACCOUNTS = [
             { handle: "PeckShieldAlert", name: "PeckShield", cat: "Security" },
             { handle: "realScamSniffer", name: "Scam Sniffer", cat: "Security" },
@@ -108,7 +109,6 @@
         // ================== COMPONENTS ==================
-        // 1. Skeleton Loading (Fortress Style)
         const Skeleton = () => (
             <div className="w-full h-full p-4 flex flex-col gap-4 animate-pulse-slow">
                 <div className="flex gap-3">
@@ -122,7 +122,7 @@
             </div>
         );
-        // 2. Twitter Card (The Core Logic)
         const TwitterCard = React.memo(({ account, onRemove, isOnline }) => {
             const containerRef = useRef(null);
             const [status, setStatus] = useState('loading'); // loading | loaded | error | offline
@@ -135,47 +135,68 @@
                 setStatus('loading');
-                // Observer for lazy loading (Performance Optimization)
                 const observer = new IntersectionObserver((entries) => {
                     if (entries[0].isIntersecting) {
-                        loadWidget();
                         observer.disconnect();
                     }
-                }, { rootMargin: '50px' });
-                if (containerRef.current) observer.observe(containerRef.current);
-                return () => observer.disconnect();
-            }, [account.handle, isOnline]);
-            const loadWidget = () => {
-                if (!window.twttr) {
-                    // Retry if script not ready
-                    setTimeout(loadWidget, 1000);
-                    return;
-                }
-                // Clear container
-                const container = containerRef.current;
-                if (!container) return;
-                container.innerHTML = '';
-                // Create link for widget
-                const link = document.createElement('a');
-                link.className = 'twitter-timeline';
-                link.href = `https://twitter.com/${account.handle}?ref_src=twsrc%5Etfw`;
-                link.setAttribute('data-theme', 'dark');
-                link.setAttribute('data-chrome', 'noheader,nofooter,noborders,transparent,noscrollbar');
-                link.setAttribute('data-height', '400');
-                link.textContent = `Tweets by ${account.name}`;
-                container.appendChild(link);
-                // Initialize Widget
-                window.twttr.widgets.load(container).then((el) => {
-                    if (el) setStatus('loaded');
-                    else setStatus('error');
-                });
-            };
             const colorMap = {
                 Security: "text-red-400 border-red-500/30 bg-red-500/10",
@@ -189,14 +210,14 @@
                 <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">
                         <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" 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>
@@ -207,28 +228,31 @@
                     </div>
                     {/* Card Body */}
-                    <div className="flex-1 relative bg-black/20">
-                        <div ref={containerRef} className={`w-full h-full overflow-y-auto scrollbar-thin ${status !== 'loaded' ? 'hidden' : 'block'}`}></div>
                         {status === 'loading' && (
-                            <div className="absolute inset-0">
                                 <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/80 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 Mode' : 'Widget Blocked'}
                                 </span>
                                 <p className="text-xs text-slate-500 mb-4 max-w-[200px]">
-                                    {status === 'offline' ? 'Reconnect to view live intel.' : 'Browser privacy settings or local file restrictions.'}
                                 </p>
-                                <a href={`https://x.com/${account.handle}`} target="_blank" 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">
-                                    OPEN X.COM
                                 </a>
                             </div>
                         )}
@@ -249,18 +273,23 @@
             const [input, setInput] = useState("");
             const [online, setOnline] = useState(navigator.onLine);
-            // Init
             useEffect(() => {
-                // Twitter Script Inject
-                if (!document.getElementById('twitter-wjs')) {
-                    const script = document.createElement("script");
-                    script.id = 'twitter-wjs';
-                    script.src = "https://platform.twitter.com/widgets.js";
-                    script.async = true;
-                    document.body.appendChild(script);
-                }
-                // Listeners
                 const updateOnline = () => setOnline(navigator.onLine);
                 window.addEventListener('online', updateOnline);
                 window.addEventListener('offline', updateOnline);
@@ -270,7 +299,6 @@
                 };
             }, []);
-            // Persistence
             useEffect(() => {
                 localStorage.setItem(STORAGE_KEY, JSON.stringify(accounts));
             }, [accounts]);
@@ -279,8 +307,13 @@
                 e.preventDefault();
                 if (!input.trim()) return;
                 let handle = input.trim();
-                if (handle.includes('/')) handle = handle.split('/').pop().split('?')[0];
-                handle = handle.replace('@', '');
                 if (accounts.some(a => a.handle.toLowerCase() === handle.toLowerCase())) {
                     alert("Target already monitored.");
@@ -297,12 +330,10 @@
             }, [accounts, activeCategory]);
             return (
-                <div className="min-h-screen flex flex-col font-sans">
-                    {/* TOP BAR / HEADER */}
                     <header className="sticky top-0 z-50 glass-panel border-t-0 border-x-0">
                         <div className="max-w-[1920px] mx-auto">
-                            {/* Logo & Status Area */}
                             <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">
@@ -310,31 +341,26 @@
                                     </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">v2.0</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-3">
-                                    <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 ? 'SYSTEM ONLINE' : 'DISCONNECTED'}</span>
-                                    </div>
                                 </div>
                             </div>
-                            {/* Controls Area */}
                             <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">
-                                {/* Categories */}
-                                <div className="flex gap-2 overflow-x-auto no-scrollbar w-full md:w-auto mask-linear-fade 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 shadow-[0_0_15px_rgba(6,182,212,0.15)]'
                                                 : 'border-transparent text-slate-500 hover:text-slate-300 hover:bg-white/5'
                                             }`}
                                         >
@@ -342,10 +368,8 @@
                                         </button>
                                     ))}
                                 </div>
-                                {/* Add Input */}
                                 <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 group-focus-within:text-cyan-500 transition-colors">
                                         <Icon size={14}>{icons.plus}</Icon>
                                     </div>
                                     <input
@@ -353,9 +377,9 @@
                                         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 focus:ring-1 focus:ring-cyan-500 placeholder-slate-600 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 hover:border-cyan-600 transition-all">
                                         ADD
                                     </button>
                                 </form>
@@ -378,22 +402,13 @@
                             </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 animate-pulse-slow">
                                     <Icon size={48} className="opacity-50">{icons.search}</Icon>
                                 </div>
                                 <h2 className="text-xl font-bold text-slate-500">No Intelligence Found</h2>
-                                <p className="text-sm">Select a different sector or add a new target.</p>
                             </div>
                         )}
                     </main>
-                    {/* FOOTER */}
-                    <footer className="border-t border-slate-800/50 bg-black py-4 text-center">
-                        <p className="text-[10px] text-slate-600 font-mono uppercase tracking-widest">
-                            Secure Environment • Encrypted Storage • No Tracking
-                        </p>
-                    </footer>
                 </div>
             );
         };

     <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.">
+    <!-- Fix referrer policy for Twitter Widgets -->
+    <meta name="referrer" content="no-referrer-when-downgrade">
     <!-- Favicon SVG -->
     <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>">
                     },
                     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',
                     }
                 }
             }
     <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);
             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; }
+        /* Force twitter widget container height */
+        .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;
+        // ================== ICONS ==================
         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}
         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"/>,
             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"/></>
         };
+        // ================== DATA ==================
         const DEFAULT_ACCOUNTS = [
             { handle: "PeckShieldAlert", name: "PeckShield", cat: "Security" },
             { handle: "realScamSniffer", name: "Scam Sniffer", cat: "Security" },
         // ================== COMPONENTS ==================
         const Skeleton = () => (
             <div className="w-full h-full p-4 flex flex-col gap-4 animate-pulse-slow">
                 <div className="flex gap-3">
             </div>
         );
+        // Improved Twitter Card specifically for Hugging Face / Strict Environments
         const TwitterCard = React.memo(({ account, onRemove, isOnline }) => {
             const containerRef = useRef(null);
             const [status, setStatus] = useState('loading'); // loading | loaded | error | offline
                 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 = ''; // Clean up
+                    // Use createTimeline instead of scanning DOM (More reliable for React/SPA)
+                    window.twttr.widgets.createTimeline(
+                        {
+                            sourceType: 'profile',
+                            screenName: account.handle
+                        },
+                        container,
+                        {
+                            theme: 'dark',
+                            height: 400,
+                            chrome: 'noheader,nofooter,noborders,transparent,noscrollbar',
+                            dnt: true // Do Not Track - helps with privacy blockers
+                        }
+                    ).then((el) => {
+                        if (isMounted) {
+                            if (el) {
+                                setStatus('loaded');
+                            } else {
+                                // Widget returned null (Blocked or handle invalid)
+                                setStatus('error');
+                            }
+                        }
+                    }).catch(() => {
+                        if (isMounted) setStatus('error');
+                    });
+                };
+                // Observer for lazy loading
                 const observer = new IntersectionObserver((entries) => {
                     if (entries[0].isIntersecting) {
+                        initWidget();
                         observer.disconnect();
                     }
+                }, { rootMargin: '100px' });
+                if (container) observer.observe(container);
+                // Timeout Safety: If widget takes too long (e.g. Hugging Face blocks it), show error/link
+                const timer = setTimeout(() => {
+                    if (isMounted && status === 'loading') {
+                        setStatus('error');
+                    }
+                }, 4000); // 4 seconds timeout
+                return () => {
+                    isMounted = false;
+                    observer.disconnect();
+                    clearTimeout(timer);
+                };
+            }, [account.handle, isOnline]);
             const colorMap = {
                 Security: "text-red-400 border-red-500/30 bg-red-500/10",
                 <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>
                     {/* 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>
                         )}
             const [input, setInput] = useState("");
             const [online, setOnline] = useState(navigator.onLine);
             useEffect(() => {
+                // Initialize Twitter Widget Script Globally
+                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);
                 };
             }, []);
             useEffect(() => {
                 localStorage.setItem(STORAGE_KEY, JSON.stringify(accounts));
             }, [accounts]);
                 e.preventDefault();
                 if (!input.trim()) return;
                 let handle = input.trim();
+                // Clean URL inputs
+                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.");
             }, [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">
                                     </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'
                                             }`}
                                         >
                                         </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
                                         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 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>
             );
         };