\n \n \n \n\n","main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\n\n// انتخاب عنصر ریشه از DOM\nconst container = document.getElementById(\"root\");\nif (container) {\n // ایجاد ریشه برای React 18\n const root = createRoot(container);\n // نصب کامپوننت اصلی App\n root.render(\n \n \n \n );\n}","App.tsx":"import React from \"react\";\nimport { Home } from \"lucide-react\";\nimport HeroSection from \"./components/HeroSection\";\nimport ProductGallery from \"./components/ProductGallery\";\nimport ProductDescription from \"./components/ProductDescription\";\nimport ContactForm from \"./components/ContactForm\";\n\nconst App: React.FC = () => {\n return (\n

\n \n

\n \n \n \n \n

\n );\n};\n\nexport default App;","components/HeroSection.tsx":"import React from \"react\";\nimport { ArrowRight } from \"lucide-react\";\n\nconst HeroSection: React.FC = () => {\n return (\n

محصولات زیبایی ویژه نوروز

زیبایی خود را با محصولات ویژه نوروز ما تجربه کنید.

\n \n

\n );\n};\n\nexport default HeroSection;","components/ProductGallery.tsx":"import React from \"react\";\\nimport { Zap, Activity } from \"lucide-react\";\\n\\ninterface ProductCardProps {\\n title: string;\\n description: string;\\n icon: React.ReactNode;\\n}\\n\\nconst ProductCard: React.FC = ({ title, description, icon }) => {\\n return (\\n

\\n

{icon}

\\n

{title}

\\n

{description}

\\n

\\n );\\n};\\n\\nconst ProductGallery: React.FC = () => {\\n return (\\n

\\n }\\n />\\n }\\n />\\n

\\n );\\n};\\n\\nexport default ProductGallery;\\n","components/ProductDescription.tsx":"import React from \"react\";\n\nconst ProductDescription: React.FC = () => {\n return (\n

توضیحات محصولات

\n هر محصول دارای ویژگی‌های منحصر به فردی است که زیبایی شما را دوچندان می‌کند. با استفاده از مواد اولیه با کیفیت و طراحی مدرن، این محصولات به شما کمک می‌کنند تا بهترین نسخه از خودتان را به نمایش بگذارید.\n

\n این محصولات با دقت و توجه به جزئیات طراحی شده‌اند تا نیازهای مختلف شما را برآورده کنند و تجربه‌ای بی‌نظیر از زیبایی و کارایی را ارائه دهند.\n

\n );\n};\n\nexport default ProductDescription;","components/ContactForm.tsx":"import React from \"react\";\\nimport { Send } from \"lucide-react\";\\n\\nconst ContactForm: React.FC = () => {\\n return (\\n

\\n \\n نام\\n \\n \\n \\n ایمیل\\n \\n \\n \\n

\\n );\\n};\\n\\nexport default ContactForm;\\n","src/index.css":"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\\n\\n/* فونت‌های سفارشی */\\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap');\\n\\n/* تنظیمات پایه */\\nbody {\\n font-family: 'Inter', sans-serif;\\n}\\n\\n/* رنگ‌های سفارشی */\\n:root {\\n --color-primary: #e63946;\\n --color-secondary: #f1faee;\\n --color-accent: #a8dadc;\\n --color-neutral-50: #f8fafc;\\n --color-neutral-900: #1d3557;\\n --color-success: #2a9d8f;\\n --color-warning: #e9c46a;\\n --color-error: #f4a261;\\n}\\n\\n/* استایل‌های سفارشی */\\n.bg-primary {\\n background-color: var(--color-primary);\\n}\\n\\n.bg-secondary {\\n background-color: var(--color-secondary);\\n}\\n\\n.bg-accent {\\n background-color: var(--color-accent);\\n}\\n\\n.text-primary {\\n color: var(--color-primary);\\n}\\n\\n.text-secondary {\\n color: var(--color-secondary);\\n}\\n\\n.text-accent {\\n color: var(--color-accent);\\n}\\n\\n/* سایه‌ها */\\n.shadow-subtle {\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);\\n}\\n\\n/* حاشیه‌ها */\\n.border-crisp {\\n border-width: 1px;\\n border-color: var(--color-neutral-900);\\n}\\n\\n/* استایل‌های دکمه */\\n.button-primary {\\n background-color: var(--color-primary);\\n color: var(--color-secondary);\\n padding: 0.5rem 1rem;\\n border-radius: 0.375rem;\\n transition: background-color 0.3s ease;\\n}\\n\\n.button-primary:hover {\\n background-color: var(--color-secondary);\\n color: var(--color-primary);\\n}\\n\\n/* استایل‌های متن */\\n.text-heading {\\n font-size: 4rem;\\n line-height: 1.1;\\n font-weight: 800;\\n}\\n\\n.text-body {\\n font-size: 1rem;\\n line-height: 1.5;\\n}\\n\\n/* تنظیمات تایپوگرافی جدید */\\nh1 {\\n font-size: 4rem;\\n line-height: 1.1;\\n font-weight: 800;\\n}\\n\\np {\\n font-size: 1rem;\\n line-height: 1.5;\\n}\\n\\n/* تنظیمات رنگ‌های پس‌زمینه و متن */\\n.bg-neutral-50 {\\n background-color: var(--color-neutral-50);\\n}\\n\\n.text-neutral-900 {\\n color: var(--color-neutral-900);\\n}\\n\\n/* استایل‌های فرم تماس */\\n.contact-form {\\n background-color: var(--color-neutral-50);\\n padding: 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\n}\\n\\n.contact-form label {\\n font-weight: 700;\\n color: var(--color-neutral-900);\\n}\\n\\n.contact-form input {\\n border: 1px solid var(--color-neutral-900);\\n padding: 0.5rem;\\n border-radius: 0.375rem;\\n transition: border-color 0.3s ease;\\n}\\n\\n.contact-form input:focus {\\n border-color: var(--color-primary);\\n outline: none;\\n box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.3);\\n}\\n\\n.contact-form button {\\n background-color: var(--color-primary);\\n color: var(--color-secondary);\\n padding: 0.5rem 1rem;\\n border-radius: 0.375rem;\\n transition: background-color 0.3s ease;\\n}\\n\\n.contact-form button:hover {\\n background-color: var(--color-secondary);\\n color: var(--color-primary);\\n}\\n"}; // Raw source code files function normalizePath(path) { return path.replace(/\.\//g, '').replace(/^\//, ''); // Remove leading ./ and / } function resolvePath(base, relative) { if (!relative.startsWith('.')) { // Absolute or bare module import (e.g., 'react', 'App') const possibleRelativeToFile = normalizePath(relative); if (window.__SOURCES__[possibleRelativeToFile]) return possibleRelativeToFile; return relative; // Assume it's an external bare module } const stack = base.split('/'); stack.pop(); // Remove current file name const parts = relative.split('/'); for (let i = 0; i < parts.length; i++) { if (parts[i] === '.') continue; if (parts[i] === '..') stack.pop(); else stack.push(parts[i]); } return stack.join('/'); } function getFileContent(path) { const cleanPath = normalizePath(path); if (window.__SOURCES__[cleanPath]) return { content: window.__SOURCES__[cleanPath], finalPath: cleanPath }; const extensions = ['.tsx', '.ts', '.jsx', '.js', '.css', '.json']; for (let ext of extensions) { if (window.__SOURCES__[cleanPath + ext]) return { content: window.__SOURCES__[cleanPath + ext], finalPath: cleanPath + ext }; } // Try '/index' for directory imports (e.g., import 'components/Button' -> 'components/Button/index.tsx') for (let ext of extensions) { if (window.__SOURCES__[cleanPath + '/index' + ext]) return { content: window.__SOURCES__[cleanPath + '/index' + ext], finalPath: cleanPath + '/index' + ext }; } return null; } // The core 'require' function that transpiles and evaluates modules window.require = function(path, base = '') { // --- BUILT-INS (ALIASES TO GLOBALS) --- if (path === 'react') return window.React; if (path === 'react-dom') return window.ReactDOM; if (path === 'react-dom/client') { const dom = window.ReactDOM; return { __esModule: true, default: dom, createRoot: dom?.createRoot || ((c) => createSafeProxy({}, 'ReactDOM.createRoot')), // Fallback hydrateRoot: dom?.hydrateRoot || ((c) => createSafeProxy({}, 'ReactDOM.hydrateRoot')), }; } if (path === '@supabase/supabase-js') return window.supabase || createSafeProxy({}, '@supabase/supabase-js'); if (path === 'lucide-react') return window.lucideReact || createSafeProxy({}, 'lucide-react'); if (path === 'react-router-dom' || path === 'react-router') { const rrd = window.ReactRouterDOM; if (rrd) { return { ...rrd, BrowserRouter: rrd.HashRouter, // Force HashRouter for iframe srcdoc compatibility Routes: rrd.Routes, Route: rrd.Route, Link: rrd.Link, useNavigate: rrd.useNavigate, useLocation: rrd.useLocation, useParams: rrd.useParams, }; } return createSafeProxy({}, path); } const resolvedPath = resolvePath(base, path); const fileInfo = getFileContent(resolvedPath); if (!fileInfo) { console.warn('Module not found:', path, 'Resolved:', resolvedPath, 'Base:', base); return createSafeProxy({}, path); } const { content, finalPath } = fileInfo; if (window.__MODULES__[finalPath]) return window.__MODULES__[finalPath].exports; if (finalPath.endsWith('.css')) { const style = document.createElement('style'); style.textContent = content; document.head.appendChild(style); window.__MODULES__[finalPath] = { exports: {} }; return {}; } if (finalPath.endsWith('.json')) { try { const json = JSON.parse(content); window.__MODULES__[finalPath] = { exports: json }; return json; } catch(e) { console.error('JSON Parse Error in ' + finalPath, e); return createSafeProxy({}, finalPath); } } const module = { exports: {} }; window.__MODULES__[finalPath] = module; try { const presets = [['env', { modules: 'commonjs' }], 'react']; if (finalPath.endsWith('.ts') || finalPath.endsWith('.tsx')) { presets.push('typescript'); } const transformed = Babel.transform(content, { presets, filename: finalPath }).code; const wrapper = new Function('module', 'exports', 'require', transformed); wrapper(module, module.exports, (p) => window.require(p, finalPath)); return module.exports; } catch (e) { console.error('Compilation or Execution Error in ' + finalPath, e); const ErrorComponent = () => window.React.createElement('div', { style: { color: 'red', padding: 10, background: '#fee2e2', border: '1px solid red', margin: '10px', borderRadius: '5px', fontFamily: 'monospace', whiteSpace: 'pre-wrap' } }, 'Error in ' + finalPath + ':\n' + (e.message || String(e))); window.__MODULES__[finalPath].exports = { default: ErrorComponent, ErrorComponent }; return window.__MODULES__[finalPath].exports; } }; // --- APPLICATION BOOTSTRAP (runs after DOM is ready) --- (function() { document.addEventListener('DOMContentLoaded', function() { console.info('[Rafiei Builder] DOMContentLoaded fired. Bootstrapping preview...'); try { const rootEl = document.getElementById('root'); if (!rootEl) { throw new Error("Bootstrap failed: #root element not found in the preview document."); } // If it's a static HTML site (no main JS entry point), do not attempt React bootstrap. if (false) { console.info('[Rafiei Builder] Static HTML site detected. No JS bootstrap needed.'); return; // The HTML is already rendered } const entry = "main.tsx"; // e.g., 'App.tsx' or 'index.tsx' if (entry && window.__SOURCES__[entry]) { console.info('[Rafiei Builder] Executing entry file: ' + entry); const AppModule = window.require(entry); const App = AppModule.default || AppModule; // Get default export or the module itself if (typeof window.ReactDOM !== 'undefined' && typeof window.ReactDOM.createRoot === 'function' && typeof App === 'function') { window.ReactDOM.createRoot(rootEl).render(window.React.createElement(App)); console.info('[Rafiei Builder] React App rendered successfully.'); } else { rootEl.innerHTML = '

Error: React or ReactDOM not available, or App is not a valid component.

'; console.error('[Rafiei Builder] React/ReactDOM or App component issue.', {ReactDOM: typeof window.ReactDOM, createRoot: typeof window.ReactDOM?.createRoot, AppType: typeof App}); } } else { console.warn('[Rafiei Builder] No valid JS/TS entry file found to execute. Entry path: "' + entry + '"'); rootEl.innerHTML = '

Preview boot failed: No executable entry file found.

'; } } catch (e) { console.error('[Rafiei Builder] Bootstrap Error:', e); const overlay = document.getElementById('error-overlay'); if(overlay) { overlay.style.display = 'block'; overlay.innerHTML = '

Bootstrap Error

' + '

' + (e.message || String(e)) + '

'; } } }); })();