Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>URL to Business - AI Business Creation Tool</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .dashboard-card { | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e0e0e0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%); | |
| transition: width 0.5s ease; | |
| } | |
| .task-item { | |
| border-left: 4px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .task-item:hover { | |
| border-left-color: #6e8efb; | |
| background-color: #f8f9fa; | |
| } | |
| .task-item.completed { | |
| border-left-color: #4caf50; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| background: rgba(0,0,0,0.8); | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .language-selector { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .language-dropdown { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| background-color: white; | |
| min-width: 120px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border-radius: 4px; | |
| } | |
| .language-selector:hover .language-dropdown { | |
| display: block; | |
| } | |
| .language-option { | |
| color: black; | |
| padding: 8px 16px; | |
| text-decoration: none; | |
| display: block; | |
| cursor: pointer; | |
| } | |
| .language-option:hover { | |
| background-color: #f1f1f1; | |
| } | |
| .mobile-menu { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background-color: white; | |
| min-width: 200px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border-radius: 4px; | |
| } | |
| .mobile-menu.show { | |
| display: block; | |
| } | |
| .mobile-menu-item { | |
| color: black; | |
| padding: 12px 16px; | |
| text-decoration: none; | |
| display: block; | |
| } | |
| .mobile-menu-item:hover { | |
| background-color: #f1f1f1; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg relative"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-rocket text-2xl"></i> | |
| <span class="text-xl font-bold">URL to Business</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 nav-link" data-page="dashboard">Dashboard</a> | |
| <a href="#" class="hover:text-gray-200 nav-link" data-page="projects">Projects</a> | |
| <a href="#" class="hover:text-gray-200 nav-link" data-page="analytics">Analytics</a> | |
| <a href="#" class="hover:text-gray-200 nav-link" data-page="settings">Settings</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="language-selector"> | |
| <button class="flex items-center space-x-1"> | |
| <i class="fas fa-globe"></i> | |
| <span id="current-language">EN</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="language-dropdown"> | |
| <div class="language-option" data-lang="en">English</div> | |
| <div class="language-option" data-lang="fr">Français</div> | |
| </div> | |
| </div> | |
| <button class="md:hidden text-white" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-xl cursor-pointer" id="notifications-button"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> | |
| <div class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg py-1 z-50" id="notifications-dropdown"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="notification1">New task completed by AI</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="notification2">Marketing report ready</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="notification3">New update available</a> | |
| </div> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-purple-600 font-bold cursor-pointer" id="profile-button"> | |
| U | |
| </div> | |
| <div class="hidden absolute right-4 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50" id="profile-dropdown"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="profile">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 nav-link" data-page="settings">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="logout">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="mobile-menu" id="mobile-menu"> | |
| <a href="#" class="mobile-menu-item nav-link" data-page="dashboard" data-i18n="dashboard">Dashboard</a> | |
| <a href="#" class="mobile-menu-item nav-link" data-page="projects" data-i18n="projects">Projects</a> | |
| <a href="#" class="mobile-menu-item nav-link" data-page="analytics" data-i18n="analytics">Analytics</a> | |
| <a href="#" class="mobile-menu-item nav-link" data-page="settings" data-i18n="settings">Settings</a> | |
| <div class="border-t border-gray-200"></div> | |
| <a href="#" class="mobile-menu-item" data-i18n="profile">Profile</a> | |
| <a href="#" class="mobile-menu-item" data-i18n="logout">Logout</a> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Page --> | |
| <div id="dashboard-page" class="page active"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:w-1/4"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="newProject">New Business Project</h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="youtube-url" data-i18n="youtubeUrl"> | |
| YouTube Video URL | |
| </label> | |
| <div class="flex"> | |
| <input type="text" id="youtube-url" class="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="https://www.youtube.com/watch?v=..."> | |
| <button id="analyze-btn" class="bg-purple-600 text-white px-4 py-2 rounded-r-md hover:bg-purple-700 transition"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="business-name" data-i18n="businessName"> | |
| Business Name | |
| </label> | |
| <input type="text" id="business-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="My Awesome Business"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="business-type" data-i18n="businessType"> | |
| Business Type | |
| </label> | |
| <select id="business-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="" data-i18n="selectType">Select business type</option> | |
| <option value="ecommerce" data-i18n="ecommerce">E-commerce</option> | |
| <option value="saas" data-i18n="saas">SaaS</option> | |
| <option value="consulting" data-i18n="consulting">Consulting</option> | |
| <option value="physical" data-i18n="physical">Physical Product</option> | |
| <option value="digital" data-i18n="digital">Digital Product</option> | |
| <option value="service" data-i18n="service">Service Business</option> | |
| </select> | |
| </div> | |
| <button id="create-project-btn" class="w-full gradient-bg text-white py-2 rounded-md hover:opacity-90 transition flex items-center justify-center"> | |
| <i class="fas fa-plus-circle mr-2"></i> <span data-i18n="createProject">Create Project</span> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="aiAgents">AI Agents</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="research"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <span data-i18n="researchAgent">Research Agent</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="content"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-pen-fancy"></i> | |
| </div> | |
| <span data-i18n="contentAgent">Content Agent</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="marketing"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bullhorn"></i> | |
| </div> | |
| <span data-i18n="marketingAgent">Marketing Agent</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="finance"> | |
| <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <span data-i18n="financeAgent">Finance Agent</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="logistics"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <span data-i18n="logisticsAgent">Logistics Agent</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard --> | |
| <div class="lg:w-3/4"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800" data-i18n="businessDashboard">Business Dashboard</h1> | |
| <div class="flex space-x-2"> | |
| <button id="export-btn" class="px-3 py-1 bg-gray-100 rounded-md text-gray-700 hover:bg-gray-200"> | |
| <i class="fas fa-download mr-1"></i> <span data-i18n="export">Export</span> | |
| </button> | |
| <button id="settings-btn" class="px-3 py-1 bg-gray-100 rounded-md text-gray-700 hover:bg-gray-200 nav-link" data-page="settings"> | |
| <i class="fas fa-cog mr-1"></i> <span data-i18n="settings">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm" data-i18n="totalTasks">Total Tasks</p> | |
| <h3 class="text-2xl font-bold text-gray-800">24</h3> | |
| </div> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-tasks"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1" data-i18n="completedTasks">13 completed</p> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm" data-i18n="aiAgents">AI Agents</p> | |
| <h3 class="text-2xl font-bold text-gray-800">5</h3> | |
| </div> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 80%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1" data-i18n="activeAgents">4 active</p> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm" data-i18n="documents">Documents</p> | |
| <h3 class="text-2xl font-bold text-gray-800">8</h3> | |
| </div> | |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 50%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1" data-i18n="generatedDocs">4 generated</p> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm" data-i18n="daysLeft">Days Left</p> | |
| <h3 class="text-2xl font-bold text-gray-800">14</h3> | |
| </div> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-calendar-day"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 30%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1" data-i18n="launchDeadline">Launch deadline</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Analysis Section --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-video mr-2 text-purple-600"></i> <span data-i18n="videoAnalysis">Video Analysis</span> | |
| </h2> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="md:w-1/3"> | |
| <div class="bg-black aspect-video rounded-md overflow-hidden relative"> | |
| <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-4xl opacity-80"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="font-medium text-lg mb-2" data-i18n="videoTitle">How to Start a Dropshipping Business in 2023</h3> | |
| <p class="text-gray-600 text-sm mb-3" data-i18n="videoSource">Extracted from YouTube video by Business Expert</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full" data-i18n="ecommerceTag">E-commerce</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full" data-i18n="dropshippingTag">Dropshipping</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full" data-i18n="marketingTag">Marketing</span> | |
| </div> | |
| <p class="text-gray-700 mb-3" data-i18n="videoSummary">The video outlines a 7-step process to start a profitable dropshipping business with minimal upfront investment, focusing on product research, store setup, and marketing strategies.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span data-i18n="videoDuration">12:34 duration</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-chart-bar mr-1"></i> | |
| <span data-i18n="videoRelevance">87% relevance</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Actions Section --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-list-check mr-2 text-purple-600"></i> <span data-i18n="keyActions">Key Actions</span> | |
| </h2> | |
| <div class="bg-white border border-gray-200 rounded-lg overflow-hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-200"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-bolt text-yellow-500 mr-2"></i> <span data-i18n="immediateActions">Immediate Actions</span> | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task1">Register business name</span> | |
| </li> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task2">Choose dropshipping niche</span> | |
| </li> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task3">Research 10 potential products</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-calendar-alt text-blue-500 mr-2"></i> <span data-i18n="shortTerm">Short-term</span> | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task4">Set up Shopify store</span> | |
| </li> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task5">Create product pages</span> | |
| </li> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task6">Design logo and branding</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-chart-line text-green-500 mr-2"></i> <span data-i18n="longTerm">Long-term</span> | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task7">Launch Facebook ads campaign</span> | |
| </li> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task8">Optimize conversion funnel</span> | |
| </li> | |
| <li class="task-item p-2 rounded flex items-center"> | |
| <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500"> | |
| <span data-i18n="task9">Scale to 3 additional markets</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documents Section --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-file-alt mr-2 text-purple-600"></i> <span data-i18n="generatedDocs">Generated Documents</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-start mb-3"> | |
| <div class="p-2 bg-blue-100 text-blue-600 rounded-md mr-3"> | |
| <i class="fas fa-file-invoice"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium" data-i18n="businessPlan">Business Plan</h3> | |
| <p class="text-sm text-gray-500" data-i18n="businessPlanDesc">Complete roadmap for your business</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500" data-i18n="generatedToday">Generated: Today</span> | |
| <button class="text-purple-600 hover:text-purple-800 doc-download" data-doc="business-plan"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-start mb-3"> | |
| <div class="p-2 bg-green-100 text-green-600 rounded-md mr-3"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium" data-i18n="marketAnalysis">Market Analysis</h3> | |
| <p class="text-sm text-gray-500" data-i18n="marketAnalysisDesc">Competitor and target audience research</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500" data-i18n="generatedToday">Generated: Today</span> | |
| <button class="text-purple-600 hover:text-purple-800 doc-download" data-doc="market-analysis"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-start mb-3"> | |
| <div class="p-2 bg-purple-100 text-purple-600 rounded-md mr-3"> | |
| <i class="fas fa-ad"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium" data-i18n="marketingStrategy">Marketing Strategy</h3> | |
| <p class="text-sm text-gray-500" data-i18n="marketingStrategyDesc">Complete digital marketing plan</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500" data-i18n="pendingGeneration">Pending generation</span> | |
| <button class="text-gray-400 cursor-not-allowed"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analytics Section --> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2 text-purple-600"></i> <span data-i18n="businessAnalytics">Business Analytics</span> | |
| </h2> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="chart-container"> | |
| <canvas id="businessChart"></canvas> | |
| <div class="tooltip" id="chartTooltip"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Page --> | |
| <div id="projects-page" class="page"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800" data-i18n="projects">Projects</h1> | |
| <button class="px-3 py-1 bg-purple-600 text-white rounded-md hover:bg-purple-700 nav-link" data-page="dashboard"> | |
| <i class="fas fa-plus mr-1"></i> <span data-i18n="newProject">New Project</span> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-start mb-3"> | |
| <div class="p-2 bg-blue-100 text-blue-600 rounded-md mr-3"> | |
| <i class="fas fa-store"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Dropshipping Empire</h3> | |
| <p class="text-sm text-gray-500">E-commerce</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500">Created: 2 days ago</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-start mb-3"> | |
| <div class="p-2 bg-green-100 text-green-600 rounded-md mr-3"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">App Startup</h3> | |
| <p class="text-sm text-gray-500">SaaS</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500">Created: 1 week ago</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-start mb-3"> | |
| <div class="p-2 bg-yellow-100 text-yellow-600 rounded-md mr-3"> | |
| <i class="fas fa-chalkboard-teacher"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Consulting Firm</h3> | |
| <p class="text-sm text-gray-500">Consulting</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500">Created: 3 weeks ago</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analytics Page --> | |
| <div id="analytics-page" class="page"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800" data-i18n="analytics">Analytics</h1> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="performanceMetrics">Performance Metrics</h2> | |
| <div class="chart-container"> | |
| <canvas id="performanceChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="taskCompletion">Task Completion</h2> | |
| <div class="chart-container"> | |
| <canvas id="taskChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="agentActivity">AI Agent Activity</h2> | |
| <div class="chart-container"> | |
| <canvas id="agentChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Page --> | |
| <div id="settings-page" class="page"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800" data-i18n="settings">Settings</h1> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="accountSettings">Account Settings</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="username" data-i18n="username">Username</label> | |
| <input type="text" id="username" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" value="user123"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="email" data-i18n="email">Email</label> | |
| <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" value="[email protected]"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="notificationSettings">Notification Settings</h2> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="email-notifications" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked> | |
| <label for="email-notifications" class="ml-2 block text-sm text-gray-700" data-i18n="emailNotifications">Email notifications</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="push-notifications" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked> | |
| <label for="push-notifications" class="ml-2 block text-sm text-gray-700" data-i18n="pushNotifications">Push notifications</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <h2 class="text-lg font-semibold mb-4" data-i18n="appSettings">App Settings</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="export-format" data-i18n="exportFormat">Export Format</label> | |
| <select id="export-format" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="pdf" data-i18n="pdf">PDF</option> | |
| <option value="docx" data-i18n="word">Word</option> | |
| <option value="csv" data-i18n="csv">CSV</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" data-i18n="theme">Theme</label> | |
| <div class="flex space-x-4"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="light-theme" name="theme" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300" checked> | |
| <label for="light-theme" class="ml-2 block text-sm text-gray-700" data-i18n="light">Light</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="dark-theme" name="theme" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300"> | |
| <label for="dark-theme" class="ml-2 block text-sm text-gray-700" data-i18n="dark">Dark</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button id="save-settings-btn" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700" data-i18n="saveChanges">Save Changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-rocket text-2xl"></i> | |
| <span class="text-xl font-bold">URL to Business</span> | |
| </div> | |
| <p class="text-sm mt-2" data-i18n="footerTagline">Turn YouTube videos into complete businesses with AI</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200" data-i18n="terms">Terms</a> | |
| <a href="#" class="hover:text-gray-200" data-i18n="privacy">Privacy</a> | |
| <a href="#" class="hover:text-gray-200" data-i18n="contact">Contact</a> | |
| <a href="#" class="hover:text-gray-200" data-i18n="help">Help</a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-700 text-center text-sm"> | |
| <p data-i18n="copyright">© 2023 URL to Business. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Language translations | |
| const translations = { | |
| en: { | |
| dashboard: "Dashboard", | |
| projects: "Projects", | |
| analytics: "Analytics", | |
| settings: "Settings", | |
| profile: "Profile", | |
| logout: "Logout", | |
| notification1: "New task completed by AI", | |
| notification2: "Marketing report ready", | |
| notification3: "New update available", | |
| newProject: "New Business Project", | |
| youtubeUrl: "YouTube Video URL", | |
| businessName: "Business Name", | |
| businessType: "Business Type", | |
| selectType: "Select business type", | |
| ecommerce: "E-commerce", | |
| saas: "SaaS", | |
| consulting: "Consulting", | |
| physical: "Physical Product", | |
| digital: "Digital Product", | |
| service: "Service Business", | |
| createProject: "Create Project", | |
| aiAgents: "AI Agents", | |
| researchAgent: "Research Agent", | |
| contentAgent: "Content Agent", | |
| marketingAgent: "Marketing Agent", | |
| financeAgent: "Finance Agent", | |
| logisticsAgent: "Logistics Agent", | |
| businessDashboard: "Business Dashboard", | |
| export: "Export", | |
| totalTasks: "Total Tasks", | |
| completedTasks: "13 completed", | |
| activeAgents: "4 active", | |
| documents: "Documents", | |
| generatedDocs: "4 generated", | |
| daysLeft: "Days Left", | |
| launchDeadline: "Launch deadline", | |
| videoAnalysis: "Video Analysis", | |
| videoTitle: "How to Start a Dropshipping Business in 2023", | |
| videoSource: "Extracted from YouTube video by Business Expert", | |
| ecommerceTag: "E-commerce", | |
| dropshippingTag: "Dropshipping", | |
| marketingTag: "Marketing", | |
| videoSummary: "The video outlines a 7-step process to start a profitable dropshipping business with minimal upfront investment, focusing on product research, store setup, and marketing strategies.", | |
| videoDuration: "12:34 duration", | |
| videoRelevance: "87% relevance", | |
| keyActions: "Key Actions", | |
| immediateActions: "Immediate Actions", | |
| task1: "Register business name", | |
| task2: "Choose dropshipping niche", | |
| task3: "Research 10 potential products", | |
| shortTerm: "Short-term", | |
| task4: "Set up Shopify store", | |
| task5: "Create product pages", | |
| task6: "Design logo and branding", | |
| longTerm: "Long-term", | |
| task7: "Launch Facebook ads campaign", | |
| task8: "Optimize conversion funnel", | |
| task9: "Scale to 3 additional markets", | |
| generatedDocs: "Generated Documents", | |
| businessPlan: "Business Plan", | |
| businessPlanDesc: "Complete roadmap for your business", | |
| generatedToday: "Generated: Today", | |
| marketAnalysis: "Market Analysis", | |
| marketAnalysisDesc: "Competitor and target audience research", | |
| marketingStrategy: "Marketing Strategy", | |
| marketingStrategyDesc: "Complete digital marketing plan", | |
| pendingGeneration: "Pending generation", | |
| businessAnalytics: "Business Analytics", | |
| footerTagline: "Turn YouTube videos into complete businesses with AI", | |
| terms: "Terms", | |
| privacy: "Privacy", | |
| contact: "Contact", | |
| help: "Help", | |
| copyright: "© 2023 URL to Business. All rights reserved.", | |
| notificationSettings: "Notification Settings", | |
| emailNotifications: "Email notifications", | |
| pushNotifications: "Push notifications", | |
| exportFormat: "Export Format", | |
| pdf: "PDF", | |
| word: "Word", | |
| csv: "CSV", | |
| theme: "Theme", | |
| light: "Light", | |
| dark: "Dark", | |
| cancel: "Cancel", | |
| save: "Save", | |
| performanceMetrics: "Performance Metrics", | |
| taskCompletion: "Task Completion", | |
| agentActivity: "AI Agent Activity", | |
| accountSettings: "Account Settings", | |
| username: "Username", | |
| email: "Email", | |
| appSettings: "App Settings", | |
| saveChanges: "Save Changes" | |
| }, | |
| fr: { | |
| dashboard: "Tableau de bord", | |
| projects: "Projets", | |
| analytics: "Analytique", | |
| settings: "Paramètres", | |
| profile: "Profil", | |
| logout: "Déconnexion", | |
| notification1: "Nouvelle tâche terminée par l'IA", | |
| notification2: "Rapport marketing prêt", | |
| notification3: "Nouvelle mise à jour disponible", | |
| newProject: "Nouveau Projet Commercial", | |
| youtubeUrl: "URL de la vidéo YouTube", | |
| businessName: "Nom de l'entreprise", | |
| businessType: "Type d'entreprise", | |
| selectType: "Sélectionnez le type d'entreprise", | |
| ecommerce: "Commerce électronique", | |
| saas: "Logiciel en tant que service", | |
| consulting: "Consulting", | |
| physical: "Produit physique", | |
| digital: "Produit numérique", | |
| service: "Entreprise de services", | |
| createProject: "Créer un projet", | |
| aiAgents: "Agents IA", | |
| researchAgent: "Agent de recherche", | |
| contentAgent: "Agent de contenu", | |
| marketingAgent: "Agent marketing", | |
| financeAgent: "Agent financier", | |
| logisticsAgent: "Agent logistique", | |
| businessDashboard: "Tableau de bord commercial", | |
| export: "Exporter", | |
| totalTasks: "Tâches totales", | |
| completedTasks: "13 terminées", | |
| activeAgents: "4 actifs", | |
| documents: "Documents", | |
| generatedDocs: "4 générés", | |
| daysLeft: "Jours restants", | |
| launchDeadline: "Date limite de lancement", | |
| videoAnalysis: "Analyse vidéo", | |
| videoTitle: "Comment démarrer une entreprise de dropshipping en 2023", | |
| videoSource: "Extrait de la vidéo YouTube par Business Expert", | |
| ecommerceTag: "E-commerce", | |
| dropshippingTag: "Dropshipping", | |
| marketingTag: "Marketing", | |
| videoSummary: "La vidéo décrit un processus en 7 étapes pour démarrer une entreprise de dropshipping rentable avec un investissement initial minimal, en se concentrant sur la recherche de produits, la configuration du magasin et les stratégies de marketing.", | |
| videoDuration: "Durée : 12:34", | |
| videoRelevance: "Pertinence : 87%", | |
| keyActions: "Actions clés", | |
| immediateActions: "Actions immédiates", | |
| task1: "Enregistrer le nom de l'entreprise", | |
| task2: "Choisir une niche de dropshipping", | |
| task3: "Rechercher 10 produits potentiels", | |
| shortTerm: "Court terme", | |
| task4: "Configurer une boutique Shopify", | |
| task5: "Créer des pages de produits", | |
| task6: "Concevoir un logo et une identité", | |
| longTerm: "Long terme", | |
| task7: "Lancer une campagne de publicité Facebook", | |
| task8: "Optimiser le tunnel de conversion", | |
| task9: "Étendre à 3 marchés supplémentaires", | |
| generatedDocs: "Documents générés", | |
| businessPlan: "Plan d'affaires", | |
| businessPlanDesc: "Feuille de route complète pour votre entreprise", | |
| generatedToday: "Généré : Aujourd'hui", | |
| marketAnalysis: "Analyse de marché", | |
| marketAnalysisDesc: "Recherche sur les concurrents et le public cible", | |
| marketingStrategy: "Stratégie marketing", | |
| marketingStrategyDesc: "Plan de marketing numérique complet", | |
| pendingGeneration: "Génération en attente", | |
| businessAnalytics: "Analytique commerciale", | |
| footerTagline: "Transformez des vidéos YouTube en entreprises complètes avec l'IA", | |
| terms: "Conditions", | |
| privacy: "Confidentialité", | |
| contact: "Contact", | |
| help: "Aide", | |
| copyright: "© 2023 URL to Business. Tous droits réservés.", | |
| notificationSettings: "Paramètres de notification", | |
| emailNotifications: "Notifications par e-mail", | |
| pushNotifications: "Notifications push", | |
| exportFormat: "Format d'exportation", | |
| pdf: "PDF", | |
| word: "Word", | |
| csv: "CSV", | |
| theme: "Thème", | |
| light: "Clair", | |
| dark: "Sombre", | |
| cancel: "Annuler", | |
| save: "Enregistrer", | |
| performanceMetrics: "Métriques de performance", | |
| taskCompletion: "Tâches complétées", | |
| agentActivity: "Activité des agents IA", | |
| accountSettings: "Paramètres du compte", | |
| username: "Nom d'utilisateur", | |
| email: "Email", | |
| appSettings: "Paramètres de l'application", | |
| saveChanges: "Enregistrer les modifications" | |
| } | |
| }; | |
| // Current language | |
| let currentLanguage = 'en'; | |
| // Function to change language | |
| function changeLanguage(lang) { | |
| currentLanguage = lang; | |
| document.getElementById('current-language').textContent = lang.toUpperCase(); | |
| // Update all elements with data-i18n attribute | |
| document.querySelectorAll('[data-i18n]').forEach(element => { | |
| const key = element.getAttribute('data-i18n'); | |
| if (translations[lang][key]) { | |
| if (element.tagName === 'INPUT' && element.type === 'text') { | |
| element.placeholder = translations[lang][key]; | |
| } else if (element.tagName === 'OPTION') { | |
| element.textContent = translations[lang][key]; | |
| } else { | |
| element.textContent = translations[lang][key]; | |
| } | |
| } | |
| }); | |
| // Update charts with translated labels | |
| updateCharts(); | |
| } | |
| // Function to update charts with translated labels | |
| function updateCharts() { | |
| if (window.businessChart) { | |
| window.businessChart.data.labels = currentLanguage === 'en' | |
| ? ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'] | |
| : ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4', 'Semaine 5', 'Semaine 6']; | |
| window.businessChart.data.datasets[0].label = currentLanguage === 'en' ? 'Tasks Completed' : 'Tâches terminées'; | |
| window.businessChart.data.datasets[1].label = currentLanguage === 'en' ? 'Revenue Projection ($)' : 'Projection de revenus ($)'; | |
| window.businessChart.update(); | |
| } | |
| if (window.performanceChart) { | |
| window.performanceChart.data.labels = currentLanguage === 'en' | |
| ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] | |
| : ['Janv', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin']; | |
| window.performanceChart.data.datasets[0].label = currentLanguage === 'en' ? 'Performance Score' : 'Score de performance'; | |
| window.performanceChart.update(); | |
| } | |
| if (window.taskChart) { | |
| window.taskChart.data.labels = currentLanguage === 'en' | |
| ? ['Completed', 'In Progress', 'Pending'] | |
| : ['Terminées', 'En cours', 'En attente']; | |
| window.taskChart.update(); | |
| } | |
| if (window.agentChart) { | |
| window.agentChart.data.labels = currentLanguage === 'en' | |
| ? ['Research', 'Content', 'Marketing', 'Finance', 'Logistics'] | |
| : ['Recherche', 'Contenu', 'Marketing', 'Finance', 'Logistique']; | |
| window.agentChart.data.datasets[0].label = currentLanguage === 'en' ? 'Activity Level' : "Niveau d'activité"; | |
| window.agentChart.update(); | |
| } | |
| } | |
| // Navigation functionality | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const pageId = this.getAttribute('data-page') + '-page'; | |
| // Hide all pages | |
| document.querySelectorAll('.page').forEach(page => { | |
| page.classList.remove('active'); | |
| }); | |
| // Show selected page | |
| document.getElementById(pageId).classList.add('active'); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.remove('show'); | |
| }); | |
| }); | |
| // Simulate video analysis | |
| document.getElementById('analyze-btn').addEventListener('click', function() { | |
| const urlInput = document.getElementById('youtube-url'); | |
| if (urlInput.value.trim() === '') { | |
| alert(currentLanguage === 'en' ? 'Please enter a YouTube URL' : 'Veuillez entrer une URL YouTube'); | |
| return; | |
| } | |
| // Show loading state | |
| const btn = this; | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + (currentLanguage === 'en' ? 'Analyzing...' : 'Analyse en cours...'); | |
| btn.disabled = true; | |
| // Simulate API call | |
| setTimeout(function() { | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| // Update UI with mock data | |
| document.getElementById('business-name').value = currentLanguage === 'en' ? 'Dropshipping Empire' : 'Empire de Dropshipping'; | |
| document.getElementById('business-type').value = 'ecommerce'; | |
| // Show success message | |
| alert(currentLanguage === 'en' ? 'Video analysis complete! Business plan has been generated.' : 'Analyse vidéo terminée ! Le plan d\'affaires a été généré.'); | |
| }, 2000); | |
| }); | |
| // Simulate project creation | |
| document.getElementById('create-project-btn').addEventListener('click', function() { | |
| const businessName = document.getElementById('business-name').value; | |
| const businessType = document.getElementById('business-type').value; | |
| if (!businessName || !businessType) { | |
| alert(currentLanguage === 'en' ? 'Please complete all fields' : 'Veuillez remplir tous les champs'); | |
| return; | |
| } | |
| // Show loading state | |
| const btn = this; | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + (currentLanguage === 'en' ? 'Creating...' : 'Création en cours...'); | |
| btn.disabled = true; | |
| // Simulate API call | |
| setTimeout(function() { | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| // Show success message and redirect to projects page | |
| alert((currentLanguage === 'en' ? 'Project "' : 'Projet "') + businessName + (currentLanguage === 'en' ? '" created successfully!' : '" créé avec succès !')); | |
| // Navigate to projects page | |
| document.querySelectorAll('.page').forEach(page => { | |
| page.classList.remove('active'); | |
| }); | |
| document.getElementById('projects-page').classList.add('active'); | |
| }, 1500); | |
| }); | |
| // Language selector | |
| document.querySelectorAll('.language-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| const lang = this.getAttribute('data-lang'); | |
| changeLanguage(lang); | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('show'); | |
| }); | |
| // Notifications dropdown | |
| document.getElementById('notifications-button').addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| document.getElementById('notifications-dropdown').classList.toggle('hidden'); | |
| }); | |
| // Profile dropdown | |
| document.getElementById('profile-button').addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| document.getElementById('profile-dropdown').classList.toggle('hidden'); | |
| }); | |
| // Close dropdowns when clicking outside | |
| document.addEventListener('click', function() { | |
| document.getElementById('notifications-dropdown').classList.add('hidden'); | |
| document.getElementById('profile-dropdown').classList.add('hidden'); | |
| }); | |
| // Export functionality | |
| document.getElementById('export-btn').addEventListener('click', function() { | |
| // Show loading state | |
| const btn = this; | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + (currentLanguage === 'en' ? 'Exporting...' : 'Exportation en cours...'); | |
| btn.disabled = true; | |
| // Simulate export process | |
| setTimeout(function() { | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| // Show success message | |
| alert(currentLanguage === 'en' ? 'Export completed successfully! Check your downloads folder.' : 'Exportation terminée avec succès ! Vérifiez votre dossier de téléchargements.'); | |
| }, 1500); | |
| }); | |
| // Document download buttons | |
| document.querySelectorAll('.doc-download').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const docType = this.getAttribute('data-doc'); | |
| alert((currentLanguage === 'en' ? 'Downloading ' : 'Téléchargement de ') + docType + (currentLanguage === 'en' ? ' document...' : ' document...')); | |
| }); | |
| }); | |
| // AI Agent click functionality | |
| document.querySelectorAll('.agent-item').forEach(agent => { | |
| agent.addEventListener('click', function() { | |
| const agentType = this.getAttribute('data-agent'); | |
| alert((currentLanguage === 'en' ? 'Opening ' : 'Ouverture de ') + agentType + (currentLanguage === 'en' ? ' agent dashboard...' : ' tableau de bord de l\'agent...')); | |
| }); | |
| }); | |
| // Task completion toggle | |
| document.querySelectorAll('.task-item input[type="checkbox"]').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const taskItem = this.closest('.task-item'); | |
| if (this.checked) { | |
| taskItem.classList.add('completed'); | |
| } else { | |
| taskItem.classList.remove('completed'); | |
| } | |
| }); | |
| }); | |
| // Save settings | |
| document.getElementById('save-settings-btn').addEventListener('click', function() { | |
| alert(currentLanguage === 'en' ? 'Settings saved successfully!' : 'Paramètres enregistrés avec succès !'); | |
| }); | |
| // Initialize Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Business Chart | |
| const businessCtx = document.getElementById('businessChart').getContext('2d'); | |
| window.businessChart = new Chart(businessCtx, { | |
| type: 'line', | |
| data: { | |
| labels: currentLanguage === 'en' | |
| ? ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'] | |
| : ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4', 'Semaine 5', 'Semaine 6'], | |
| datasets: [ | |
| { | |
| label: currentLanguage === 'en' ? 'Tasks Completed' : 'Tâches terminées', | |
| data: [5, 10, 15, 20, 25, 30], | |
| backgroundColor: 'rgba(110, 142, 251, 0.5)', | |
| borderColor: 'rgba(110, 142, 251, 1)', | |
| borderWidth: 2, | |
| tension: 0.4 | |
| }, | |
| { | |
| label: currentLanguage === 'en' ? 'Revenue Projection ($)' : 'Projection de revenus ($)', | |
| data: [0, 200, 500, 1000, 2000, 3500], | |
| backgroundColor: 'rgba(167, 119, 227, 0.5)', | |
| borderColor: 'rgba(167, 119, 227, 1)', | |
| borderWidth: 2, | |
| tension: 0.4 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| enabled: false, | |
| external: function(context) { | |
| const tooltip = document.getElementById('chartTooltip'); | |
| if (context.tooltip.opacity === 0) { | |
| tooltip.style.opacity = 0; | |
| return; | |
| } | |
| const dataIndex = context.tooltip.dataPoints[0].dataIndex; | |
| const datasetIndex = context.tooltip.dataPoints[0].datasetIndex; | |
| const value = context.tooltip.dataPoints[0].raw; | |
| const label = context.chart.data.labels[dataIndex]; | |
| tooltip.innerHTML = ` | |
| <div>${label}</div> | |
| <div><strong>${context.chart.data.datasets[datasetIndex].label}:</strong> ${value}</div> | |
| `; | |
| const chartRect = context.chart.canvas.getBoundingClientRect(); | |
| tooltip.style.left = chartRect.left + context.tooltip.caretX + 'px'; | |
| tooltip.style.top = chartRect.top + context.tooltip.caretY + 'px'; | |
| tooltip.style.opacity = 1; | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Performance Chart (on Analytics page) | |
| const performanceCtx = document.getElementById('performanceChart')?.getContext('2d'); | |
| if (performanceCtx) { | |
| window.performanceChart = new Chart(performanceCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: currentLanguage === 'en' | |
| ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] | |
| : ['Janv', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin'], | |
| datasets: [{ | |
| label: currentLanguage === 'en' ? 'Performance Score' : 'Score de performance', | |
| data: [65, 59, 80, 81, 56, 55], | |
| backgroundColor: 'rgba(54, 162, 235, 0.5)', | |
| borderColor: 'rgba(54, 162, 235, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Task Chart (on Analytics page) | |
| const taskCtx = document.getElementById('taskChart')?.getContext('2d'); | |
| if (taskCtx) { | |
| window.taskChart = new Chart(taskCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: currentLanguage === 'en' | |
| ? ['Completed', 'In Progress', 'Pending'] | |
| : ['Terminées', 'En cours', 'En attente'], | |
| datasets: [{ | |
| data: [13, 7, 4], | |
| backgroundColor: [ | |
| 'rgba(75, 192, 192, 0.5)', | |
| 'rgba(255, 206, 86, 0.5)', | |
| 'rgba(255, 99, 132, 0.5)' | |
| ], | |
| borderColor: [ | |
| 'rgba(75, 192, 192, 1)', | |
| 'rgba(255, 206, 86, 1)', | |
| 'rgba(255, 99, 132, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false | |
| } | |
| }); | |
| } | |
| // Agent Chart (on Analytics page) | |
| const agentCtx = document.getElementById('agentChart')?.getContext('2d'); | |
| if (agentCtx) { | |
| window.agentChart = new Chart(agentCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: currentLanguage === 'en' | |
| ? ['Research', 'Content', 'Marketing', 'Finance', 'Logistics'] | |
| : ['Recherche', 'Contenu', 'Marketing', 'Finance', 'Logistique'], | |
| datasets: [{ | |
| label: currentLanguage === 'en' ? 'Activity Level' : "Niveau d'activité", | |
| data: [65, 59, 90, 81, 56], | |
| backgroundColor: 'rgba(153, 102, 255, 0.5)', | |
| borderColor: 'rgba(153, 102, 255, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 100 | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Maiga2000/digital-holding" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |