Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LinkedIn Profile Dashboard - CAN in BN Company Search</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'blue-50': '#eff6ff', | |
| 'blue-600': '#2563eb', | |
| 'indigo-100': '#e0e7ff', | |
| 'gray-50': '#f9fafb', | |
| 'gray-100': '#f3f4f6', | |
| 'gray-200': '#e5e7eb', | |
| 'gray-500': '#6b7280', | |
| 'gray-600': '#4b5563', | |
| 'gray-700': '#374151', | |
| 'gray-900': '#111827', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| #root { | |
| min-height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <!-- React and ReactDOM --> | |
| <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> | |
| <!-- PropTypes - Required by Recharts --> | |
| <script src="https://unpkg.com/[email protected]/prop-types.min.js"></script> | |
| <!-- Babel Standalone for JSX transformation --> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <!-- Recharts --> | |
| <script src="https://unpkg.com/[email protected]/umd/Recharts.js"></script> | |
| <!-- Setup globals and load app --> | |
| <script> | |
| // Wait for all dependencies to load | |
| function initApp() { | |
| // Check if all dependencies are ready | |
| if (typeof React === 'undefined' || | |
| typeof ReactDOM === 'undefined' || | |
| typeof PropTypes === 'undefined' || | |
| typeof Babel === 'undefined' || | |
| typeof Recharts === 'undefined') { | |
| setTimeout(initApp, 100); | |
| return; | |
| } | |
| // Make everything available globally | |
| window.React = React; | |
| window.ReactDOM = ReactDOM; | |
| window.PropTypes = PropTypes; | |
| window.Recharts = Recharts; | |
| // Create icon components | |
| const createIcon = (name, path) => { | |
| return ({ size = 24, className = '' }) => { | |
| return React.createElement('svg', { | |
| width: size, | |
| height: size, | |
| viewBox: '0 0 24 24', | |
| fill: 'none', | |
| stroke: 'currentColor', | |
| strokeWidth: 2, | |
| strokeLinecap: 'round', | |
| strokeLinejoin: 'round', | |
| className: className | |
| }, React.createElement('path', { d: path })); | |
| }; | |
| }; | |
| window.Search = createIcon('Search', 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'); | |
| window.Users = createIcon('Users', 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M23 21v-2a4 4 0 00-3-3.87 M16 3.13a4 4 0 010 7.75'); | |
| window.Building2 = createIcon('Building2', 'M6 22V4a2 2 0 012-2h8a2 2 0 012 2v18z M6 12h12 M6 12V6h12v6 M6 12h12 M10 6h4 M10 10h4 M10 14h4 M10 18h4'); | |
| window.ArrowLeft = createIcon('ArrowLeft', 'M19 12H5M12 19l-7-7 7-7'); | |
| window.ExternalLink = createIcon('ExternalLink', 'M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6 M15 3h6v6 M10 14L21 3'); | |
| // Load and initialize the app | |
| loadApp(); | |
| } | |
| async function loadApp() { | |
| try { | |
| console.log('Loading JSX file...'); | |
| const response = await fetch('linkedin_visualization.jsx'); | |
| if (!response.ok) { | |
| throw new Error(`Failed to load JSX: ${response.status}`); | |
| } | |
| const jsxCode = await response.text(); | |
| console.log('JSX loaded, transforming...'); | |
| // Transform JSX | |
| const transformedCode = Babel.transform(jsxCode, { | |
| presets: ['react'] | |
| }).code; | |
| // Execute | |
| eval(transformedCode); | |
| // Render | |
| if (typeof LinkedInProfileDashboard !== 'undefined') { | |
| const { createRoot } = ReactDOM; | |
| const root = createRoot(document.getElementById('root')); | |
| root.render(React.createElement(LinkedInProfileDashboard)); | |
| console.log('App rendered successfully!'); | |
| } else { | |
| throw new Error('LinkedInProfileDashboard component not found'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| document.getElementById('root').innerHTML = | |
| '<div style="padding: 20px; text-align: center;">' + | |
| '<h2>Error loading application</h2>' + | |
| '<p>' + error.message + '</p>' + | |
| '<p>Check the browser console for details.</p>' + | |
| '</div>'; | |
| } | |
| } | |
| // Start initialization | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', initApp); | |
| } else { | |
| initApp(); | |
| } | |
| </script> | |
| </body> | |
| </html> | |