Hugging Face's logo

Spaces:
Maiga2000
/
digital-holding
Running

App Files Community
Maiga2000 commited on
Commit
8321118
·
verified ·
1 Parent(s): fd4872e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1321 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Digital Holding
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: digital-holding
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1321 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>URL to Business - AI Business Creation Tool</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .dashboard-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .dashboard-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
19
+ }
20
+ .progress-bar {
21
+ height: 8px;
22
+ border-radius: 4px;
23
+ background-color: #e0e0e0;
24
+ }
25
+ .progress-fill {
26
+ height: 100%;
27
+ border-radius: 4px;
28
+ background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
29
+ transition: width 0.5s ease;
30
+ }
31
+ .task-item {
32
+ border-left: 4px solid transparent;
33
+ transition: all 0.3s ease;
34
+ }
35
+ .task-item:hover {
36
+ border-left-color: #6e8efb;
37
+ background-color: #f8f9fa;
38
+ }
39
+ .task-item.completed {
40
+ border-left-color: #4caf50;
41
+ }
42
+ .chart-container {
43
+ position: relative;
44
+ height: 300px;
45
+ width: 100%;
46
+ }
47
+ .tooltip {
48
+ position: absolute;
49
+ background: rgba(0,0,0,0.8);
50
+ color: white;
51
+ padding: 5px 10px;
52
+ border-radius: 4px;
53
+ font-size: 12px;
54
+ pointer-events: none;
55
+ opacity: 0;
56
+ transition: opacity 0.3s;
57
+ }
58
+ .language-selector {
59
+ position: relative;
60
+ display: inline-block;
61
+ }
62
+ .language-dropdown {
63
+ display: none;
64
+ position: absolute;
65
+ right: 0;
66
+ background-color: white;
67
+ min-width: 120px;
68
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
69
+ z-index: 1;
70
+ border-radius: 4px;
71
+ }
72
+ .language-selector:hover .language-dropdown {
73
+ display: block;
74
+ }
75
+ .language-option {
76
+ color: black;
77
+ padding: 8px 16px;
78
+ text-decoration: none;
79
+ display: block;
80
+ cursor: pointer;
81
+ }
82
+ .language-option:hover {
83
+ background-color: #f1f1f1;
84
+ }
85
+ .mobile-menu {
86
+ display: none;
87
+ position: absolute;
88
+ top: 100%;
89
+ right: 0;
90
+ background-color: white;
91
+ min-width: 200px;
92
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
93
+ z-index: 1;
94
+ border-radius: 4px;
95
+ }
96
+ .mobile-menu.show {
97
+ display: block;
98
+ }
99
+ .mobile-menu-item {
100
+ color: black;
101
+ padding: 12px 16px;
102
+ text-decoration: none;
103
+ display: block;
104
+ }
105
+ .mobile-menu-item:hover {
106
+ background-color: #f1f1f1;
107
+ }
108
+ .page {
109
+ display: none;
110
+ }
111
+ .page.active {
112
+ display: block;
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="bg-gray-50 font-sans">
117
+ <!-- Navigation -->
118
+ <nav class="gradient-bg text-white shadow-lg relative">
119
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
120
+ <div class="flex items-center space-x-2">
121
+ <i class="fas fa-rocket text-2xl"></i>
122
+ <span class="text-xl font-bold">URL to Business</span>
123
+ </div>
124
+ <div class="hidden md:flex space-x-6">
125
+ <a href="#" class="hover:text-gray-200 nav-link" data-page="dashboard">Dashboard</a>
126
+ <a href="#" class="hover:text-gray-200 nav-link" data-page="projects">Projects</a>
127
+ <a href="#" class="hover:text-gray-200 nav-link" data-page="analytics">Analytics</a>
128
+ <a href="#" class="hover:text-gray-200 nav-link" data-page="settings">Settings</a>
129
+ </div>
130
+ <div class="flex items-center space-x-4">
131
+ <div class="language-selector">
132
+ <button class="flex items-center space-x-1">
133
+ <i class="fas fa-globe"></i>
134
+ <span id="current-language">EN</span>
135
+ <i class="fas fa-chevron-down text-xs"></i>
136
+ </button>
137
+ <div class="language-dropdown">
138
+ <div class="language-option" data-lang="en">English</div>
139
+ <div class="language-option" data-lang="fr">Français</div>
140
+ </div>
141
+ </div>
142
+ <button class="md:hidden text-white" id="mobile-menu-button">
143
+ <i class="fas fa-bars text-xl"></i>
144
+ </button>
145
+ <div class="relative">
146
+ <i class="fas fa-bell text-xl cursor-pointer" id="notifications-button"></i>
147
+ <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>
148
+ <div class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg py-1 z-50" id="notifications-dropdown">
149
+ <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>
150
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="notification2">Marketing report ready</a>
151
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="notification3">New update available</a>
152
+ </div>
153
+ </div>
154
+ <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">
155
+ U
156
+ </div>
157
+ <div class="hidden absolute right-4 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50" id="profile-dropdown">
158
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="profile">Profile</a>
159
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 nav-link" data-page="settings">Settings</a>
160
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="logout">Logout</a>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <!-- Mobile menu -->
165
+ <div class="mobile-menu" id="mobile-menu">
166
+ <a href="#" class="mobile-menu-item nav-link" data-page="dashboard" data-i18n="dashboard">Dashboard</a>
167
+ <a href="#" class="mobile-menu-item nav-link" data-page="projects" data-i18n="projects">Projects</a>
168
+ <a href="#" class="mobile-menu-item nav-link" data-page="analytics" data-i18n="analytics">Analytics</a>
169
+ <a href="#" class="mobile-menu-item nav-link" data-page="settings" data-i18n="settings">Settings</a>
170
+ <div class="border-t border-gray-200"></div>
171
+ <a href="#" class="mobile-menu-item" data-i18n="profile">Profile</a>
172
+ <a href="#" class="mobile-menu-item" data-i18n="logout">Logout</a>
173
+ </div>
174
+ </nav>
175
+
176
+ <!-- Main Content -->
177
+ <div class="container mx-auto px-4 py-8">
178
+ <!-- Dashboard Page -->
179
+ <div id="dashboard-page" class="page active">
180
+ <div class="flex flex-col lg:flex-row gap-8">
181
+ <!-- Left Sidebar -->
182
+ <div class="lg:w-1/4">
183
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
184
+ <h2 class="text-lg font-semibold mb-4" data-i18n="newProject">New Business Project</h2>
185
+ <div class="mb-4">
186
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="youtube-url" data-i18n="youtubeUrl">
187
+ YouTube Video URL
188
+ </label>
189
+ <div class="flex">
190
+ <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=...">
191
+ <button id="analyze-btn" class="bg-purple-600 text-white px-4 py-2 rounded-r-md hover:bg-purple-700 transition">
192
+ <i class="fas fa-play"></i>
193
+ </button>
194
+ </div>
195
+ </div>
196
+ <div class="mb-4">
197
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="business-name" data-i18n="businessName">
198
+ Business Name
199
+ </label>
200
+ <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">
201
+ </div>
202
+ <div class="mb-4">
203
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="business-type" data-i18n="businessType">
204
+ Business Type
205
+ </label>
206
+ <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">
207
+ <option value="" data-i18n="selectType">Select business type</option>
208
+ <option value="ecommerce" data-i18n="ecommerce">E-commerce</option>
209
+ <option value="saas" data-i18n="saas">SaaS</option>
210
+ <option value="consulting" data-i18n="consulting">Consulting</option>
211
+ <option value="physical" data-i18n="physical">Physical Product</option>
212
+ <option value="digital" data-i18n="digital">Digital Product</option>
213
+ <option value="service" data-i18n="service">Service Business</option>
214
+ </select>
215
+ </div>
216
+ <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">
217
+ <i class="fas fa-plus-circle mr-2"></i> <span data-i18n="createProject">Create Project</span>
218
+ </button>
219
+ </div>
220
+
221
+ <div class="bg-white rounded-lg shadow-md p-6">
222
+ <h2 class="text-lg font-semibold mb-4" data-i18n="aiAgents">AI Agents</h2>
223
+ <div class="space-y-3">
224
+ <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="research">
225
+ <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
226
+ <i class="fas fa-search"></i>
227
+ </div>
228
+ <span data-i18n="researchAgent">Research Agent</span>
229
+ </div>
230
+ <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="content">
231
+ <div class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
232
+ <i class="fas fa-pen-fancy"></i>
233
+ </div>
234
+ <span data-i18n="contentAgent">Content Agent</span>
235
+ </div>
236
+ <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="marketing">
237
+ <div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-3">
238
+ <i class="fas fa-bullhorn"></i>
239
+ </div>
240
+ <span data-i18n="marketingAgent">Marketing Agent</span>
241
+ </div>
242
+ <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="finance">
243
+ <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3">
244
+ <i class="fas fa-chart-line"></i>
245
+ </div>
246
+ <span data-i18n="financeAgent">Finance Agent</span>
247
+ </div>
248
+ <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer agent-item" data-agent="logistics">
249
+ <div class="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3">
250
+ <i class="fas fa-truck"></i>
251
+ </div>
252
+ <span data-i18n="logisticsAgent">Logistics Agent</span>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Main Dashboard -->
259
+ <div class="lg:w-3/4">
260
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
261
+ <div class="flex justify-between items-center mb-6">
262
+ <h1 class="text-2xl font-bold text-gray-800" data-i18n="businessDashboard">Business Dashboard</h1>
263
+ <div class="flex space-x-2">
264
+ <button id="export-btn" class="px-3 py-1 bg-gray-100 rounded-md text-gray-700 hover:bg-gray-200">
265
+ <i class="fas fa-download mr-1"></i> <span data-i18n="export">Export</span>
266
+ </button>
267
+ <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">
268
+ <i class="fas fa-cog mr-1"></i> <span data-i18n="settings">Settings</span>
269
+ </button>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Stats Cards -->
274
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
275
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
276
+ <div class="flex justify-between items-start">
277
+ <div>
278
+ <p class="text-gray-500 text-sm" data-i18n="totalTasks">Total Tasks</p>
279
+ <h3 class="text-2xl font-bold text-gray-800">24</h3>
280
+ </div>
281
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
282
+ <i class="fas fa-tasks"></i>
283
+ </div>
284
+ </div>
285
+ <div class="mt-2">
286
+ <div class="progress-bar">
287
+ <div class="progress-fill" style="width: 65%"></div>
288
+ </div>
289
+ <p class="text-xs text-gray-500 mt-1" data-i18n="completedTasks">13 completed</p>
290
+ </div>
291
+ </div>
292
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
293
+ <div class="flex justify-between items-start">
294
+ <div>
295
+ <p class="text-gray-500 text-sm" data-i18n="aiAgents">AI Agents</p>
296
+ <h3 class="text-2xl font-bold text-gray-800">5</h3>
297
+ </div>
298
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
299
+ <i class="fas fa-robot"></i>
300
+ </div>
301
+ </div>
302
+ <div class="mt-2">
303
+ <div class="progress-bar">
304
+ <div class="progress-fill" style="width: 80%"></div>
305
+ </div>
306
+ <p class="text-xs text-gray-500 mt-1" data-i18n="activeAgents">4 active</p>
307
+ </div>
308
+ </div>
309
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
310
+ <div class="flex justify-between items-start">
311
+ <div>
312
+ <p class="text-gray-500 text-sm" data-i18n="documents">Documents</p>
313
+ <h3 class="text-2xl font-bold text-gray-800">8</h3>
314
+ </div>
315
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
316
+ <i class="fas fa-file-alt"></i>
317
+ </div>
318
+ </div>
319
+ <div class="mt-2">
320
+ <div class="progress-bar">
321
+ <div class="progress-fill" style="width: 50%"></div>
322
+ </div>
323
+ <p class="text-xs text-gray-500 mt-1" data-i18n="generatedDocs">4 generated</p>
324
+ </div>
325
+ </div>
326
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
327
+ <div class="flex justify-between items-start">
328
+ <div>
329
+ <p class="text-gray-500 text-sm" data-i18n="daysLeft">Days Left</p>
330
+ <h3 class="text-2xl font-bold text-gray-800">14</h3>
331
+ </div>
332
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
333
+ <i class="fas fa-calendar-day"></i>
334
+ </div>
335
+ </div>
336
+ <div class="mt-2">
337
+ <div class="progress-bar">
338
+ <div class="progress-fill" style="width: 30%"></div>
339
+ </div>
340
+ <p class="text-xs text-gray-500 mt-1" data-i18n="launchDeadline">Launch deadline</p>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Video Analysis Section -->
346
+ <div class="mb-8">
347
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
348
+ <i class="fas fa-video mr-2 text-purple-600"></i> <span data-i18n="videoAnalysis">Video Analysis</span>
349
+ </h2>
350
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
351
+ <div class="flex flex-col md:flex-row gap-4">
352
+ <div class="md:w-1/3">
353
+ <div class="bg-black aspect-video rounded-md overflow-hidden relative">
354
+ <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover">
355
+ <div class="absolute inset-0 flex items-center justify-center">
356
+ <i class="fas fa-play text-white text-4xl opacity-80"></i>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ <div class="md:w-2/3">
361
+ <h3 class="font-medium text-lg mb-2" data-i18n="videoTitle">How to Start a Dropshipping Business in 2023</h3>
362
+ <p class="text-gray-600 text-sm mb-3" data-i18n="videoSource">Extracted from YouTube video by Business Expert</p>
363
+ <div class="flex flex-wrap gap-2 mb-3">
364
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full" data-i18n="ecommerceTag">E-commerce</span>
365
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full" data-i18n="dropshippingTag">Dropshipping</span>
366
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full" data-i18n="marketingTag">Marketing</span>
367
+ </div>
368
+ <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>
369
+ <div class="flex items-center text-sm text-gray-500">
370
+ <i class="fas fa-clock mr-1"></i>
371
+ <span data-i18n="videoDuration">12:34 duration</span>
372
+ <span class="mx-2">•</span>
373
+ <i class="fas fa-chart-bar mr-1"></i>
374
+ <span data-i18n="videoRelevance">87% relevance</span>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Key Actions Section -->
382
+ <div class="mb-8">
383
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
384
+ <i class="fas fa-list-check mr-2 text-purple-600"></i> <span data-i18n="keyActions">Key Actions</span>
385
+ </h2>
386
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
387
+ <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-200">
388
+ <div class="p-4">
389
+ <h3 class="font-medium text-gray-800 mb-3 flex items-center">
390
+ <i class="fas fa-bolt text-yellow-500 mr-2"></i> <span data-i18n="immediateActions">Immediate Actions</span>
391
+ </h3>
392
+ <ul class="space-y-2">
393
+ <li class="task-item p-2 rounded flex items-center">
394
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
395
+ <span data-i18n="task1">Register business name</span>
396
+ </li>
397
+ <li class="task-item p-2 rounded flex items-center">
398
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
399
+ <span data-i18n="task2">Choose dropshipping niche</span>
400
+ </li>
401
+ <li class="task-item p-2 rounded flex items-center">
402
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
403
+ <span data-i18n="task3">Research 10 potential products</span>
404
+ </li>
405
+ </ul>
406
+ </div>
407
+ <div class="p-4">
408
+ <h3 class="font-medium text-gray-800 mb-3 flex items-center">
409
+ <i class="fas fa-calendar-alt text-blue-500 mr-2"></i> <span data-i18n="shortTerm">Short-term</span>
410
+ </h3>
411
+ <ul class="space-y-2">
412
+ <li class="task-item p-2 rounded flex items-center">
413
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
414
+ <span data-i18n="task4">Set up Shopify store</span>
415
+ </li>
416
+ <li class="task-item p-2 rounded flex items-center">
417
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
418
+ <span data-i18n="task5">Create product pages</span>
419
+ </li>
420
+ <li class="task-item p-2 rounded flex items-center">
421
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
422
+ <span data-i18n="task6">Design logo and branding</span>
423
+ </li>
424
+ </ul>
425
+ </div>
426
+ <div class="p-4">
427
+ <h3 class="font-medium text-gray-800 mb-3 flex items-center">
428
+ <i class="fas fa-chart-line text-green-500 mr-2"></i> <span data-i18n="longTerm">Long-term</span>
429
+ </h3>
430
+ <ul class="space-y-2">
431
+ <li class="task-item p-2 rounded flex items-center">
432
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
433
+ <span data-i18n="task7">Launch Facebook ads campaign</span>
434
+ </li>
435
+ <li class="task-item p-2 rounded flex items-center">
436
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
437
+ <span data-i18n="task8">Optimize conversion funnel</span>
438
+ </li>
439
+ <li class="task-item p-2 rounded flex items-center">
440
+ <input type="checkbox" class="mr-2 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
441
+ <span data-i18n="task9">Scale to 3 additional markets</span>
442
+ </li>
443
+ </ul>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Documents Section -->
450
+ <div class="mb-8">
451
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
452
+ <i class="fas fa-file-alt mr-2 text-purple-600"></i> <span data-i18n="generatedDocs">Generated Documents</span>
453
+ </h2>
454
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
455
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition">
456
+ <div class="flex items-start mb-3">
457
+ <div class="p-2 bg-blue-100 text-blue-600 rounded-md mr-3">
458
+ <i class="fas fa-file-invoice"></i>
459
+ </div>
460
+ <div>
461
+ <h3 class="font-medium" data-i18n="businessPlan">Business Plan</h3>
462
+ <p class="text-sm text-gray-500" data-i18n="businessPlanDesc">Complete roadmap for your business</p>
463
+ </div>
464
+ </div>
465
+ <div class="flex justify-between items-center text-sm">
466
+ <span class="text-gray-500" data-i18n="generatedToday">Generated: Today</span>
467
+ <button class="text-purple-600 hover:text-purple-800 doc-download" data-doc="business-plan">
468
+ <i class="fas fa-download"></i>
469
+ </button>
470
+ </div>
471
+ </div>
472
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition">
473
+ <div class="flex items-start mb-3">
474
+ <div class="p-2 bg-green-100 text-green-600 rounded-md mr-3">
475
+ <i class="fas fa-chart-pie"></i>
476
+ </div>
477
+ <div>
478
+ <h3 class="font-medium" data-i18n="marketAnalysis">Market Analysis</h3>
479
+ <p class="text-sm text-gray-500" data-i18n="marketAnalysisDesc">Competitor and target audience research</p>
480
+ </div>
481
+ </div>
482
+ <div class="flex justify-between items-center text-sm">
483
+ <span class="text-gray-500" data-i18n="generatedToday">Generated: Today</span>
484
+ <button class="text-purple-600 hover:text-purple-800 doc-download" data-doc="market-analysis">
485
+ <i class="fas fa-download"></i>
486
+ </button>
487
+ </div>
488
+ </div>
489
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition">
490
+ <div class="flex items-start mb-3">
491
+ <div class="p-2 bg-purple-100 text-purple-600 rounded-md mr-3">
492
+ <i class="fas fa-ad"></i>
493
+ </div>
494
+ <div>
495
+ <h3 class="font-medium" data-i18n="marketingStrategy">Marketing Strategy</h3>
496
+ <p class="text-sm text-gray-500" data-i18n="marketingStrategyDesc">Complete digital marketing plan</p>
497
+ </div>
498
+ </div>
499
+ <div class="flex justify-between items-center text-sm">
500
+ <span class="text-gray-500" data-i18n="pendingGeneration">Pending generation</span>
501
+ <button class="text-gray-400 cursor-not-allowed">
502
+ <i class="fas fa-download"></i>
503
+ </button>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Analytics Section -->
510
+ <div>
511
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
512
+ <i class="fas fa-chart-bar mr-2 text-purple-600"></i> <span data-i18n="businessAnalytics">Business Analytics</span>
513
+ </h2>
514
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
515
+ <div class="chart-container">
516
+ <canvas id="businessChart"></canvas>
517
+ <div class="tooltip" id="chartTooltip"></div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- Projects Page -->
527
+ <div id="projects-page" class="page">
528
+ <div class="bg-white rounded-lg shadow-md p-6">
529
+ <div class="flex justify-between items-center mb-6">
530
+ <h1 class="text-2xl font-bold text-gray-800" data-i18n="projects">Projects</h1>
531
+ <button class="px-3 py-1 bg-purple-600 text-white rounded-md hover:bg-purple-700 nav-link" data-page="dashboard">
532
+ <i class="fas fa-plus mr-1"></i> <span data-i18n="newProject">New Project</span>
533
+ </button>
534
+ </div>
535
+
536
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
537
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition">
538
+ <div class="flex items-start mb-3">
539
+ <div class="p-2 bg-blue-100 text-blue-600 rounded-md mr-3">
540
+ <i class="fas fa-store"></i>
541
+ </div>
542
+ <div>
543
+ <h3 class="font-medium">Dropshipping Empire</h3>
544
+ <p class="text-sm text-gray-500">E-commerce</p>
545
+ </div>
546
+ </div>
547
+ <div class="flex justify-between items-center text-sm">
548
+ <span class="text-gray-500">Created: 2 days ago</span>
549
+ <div class="flex space-x-2">
550
+ <button class="text-purple-600 hover:text-purple-800">
551
+ <i class="fas fa-eye"></i>
552
+ </button>
553
+ <button class="text-gray-500 hover:text-gray-700">
554
+ <i class="fas fa-ellipsis-v"></i>
555
+ </button>
556
+ </div>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition">
561
+ <div class="flex items-start mb-3">
562
+ <div class="p-2 bg-green-100 text-green-600 rounded-md mr-3">
563
+ <i class="fas fa-mobile-alt"></i>
564
+ </div>
565
+ <div>
566
+ <h3 class="font-medium">App Startup</h3>
567
+ <p class="text-sm text-gray-500">SaaS</p>
568
+ </div>
569
+ </div>
570
+ <div class="flex justify-between items-center text-sm">
571
+ <span class="text-gray-500">Created: 1 week ago</span>
572
+ <div class="flex space-x-2">
573
+ <button class="text-purple-600 hover:text-purple-800">
574
+ <i class="fas fa-eye"></i>
575
+ </button>
576
+ <button class="text-gray-500 hover:text-gray-700">
577
+ <i class="fas fa-ellipsis-v"></i>
578
+ </button>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="dashboard-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition">
584
+ <div class="flex items-start mb-3">
585
+ <div class="p-2 bg-yellow-100 text-yellow-600 rounded-md mr-3">
586
+ <i class="fas fa-chalkboard-teacher"></i>
587
+ </div>
588
+ <div>
589
+ <h3 class="font-medium">Consulting Firm</h3>
590
+ <p class="text-sm text-gray-500">Consulting</p>
591
+ </div>
592
+ </div>
593
+ <div class="flex justify-between items-center text-sm">
594
+ <span class="text-gray-500">Created: 3 weeks ago</span>
595
+ <div class="flex space-x-2">
596
+ <button class="text-purple-600 hover:text-purple-800">
597
+ <i class="fas fa-eye"></i>
598
+ </button>
599
+ <button class="text-gray-500 hover:text-gray-700">
600
+ <i class="fas fa-ellipsis-v"></i>
601
+ </button>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- Analytics Page -->
610
+ <div id="analytics-page" class="page">
611
+ <div class="bg-white rounded-lg shadow-md p-6">
612
+ <div class="flex justify-between items-center mb-6">
613
+ <h1 class="text-2xl font-bold text-gray-800" data-i18n="analytics">Analytics</h1>
614
+ </div>
615
+
616
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
617
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
618
+ <h2 class="text-lg font-semibold mb-4" data-i18n="performanceMetrics">Performance Metrics</h2>
619
+ <div class="chart-container">
620
+ <canvas id="performanceChart"></canvas>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
625
+ <h2 class="text-lg font-semibold mb-4" data-i18n="taskCompletion">Task Completion</h2>
626
+ <div class="chart-container">
627
+ <canvas id="taskChart"></canvas>
628
+ </div>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
633
+ <h2 class="text-lg font-semibold mb-4" data-i18n="agentActivity">AI Agent Activity</h2>
634
+ <div class="chart-container">
635
+ <canvas id="agentChart"></canvas>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+
641
+ <!-- Settings Page -->
642
+ <div id="settings-page" class="page">
643
+ <div class="bg-white rounded-lg shadow-md p-6">
644
+ <div class="flex justify-between items-center mb-6">
645
+ <h1 class="text-2xl font-bold text-gray-800" data-i18n="settings">Settings</h1>
646
+ </div>
647
+
648
+ <div class="space-y-6">
649
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
650
+ <h2 class="text-lg font-semibold mb-4" data-i18n="accountSettings">Account Settings</h2>
651
+ <div class="space-y-4">
652
+ <div>
653
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="username" data-i18n="username">Username</label>
654
+ <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">
655
+ </div>
656
+ <div>
657
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="email" data-i18n="email">Email</label>
658
+ <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]">
659
+ </div>
660
+ </div>
661
+ </div>
662
+
663
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
664
+ <h2 class="text-lg font-semibold mb-4" data-i18n="notificationSettings">Notification Settings</h2>
665
+ <div class="space-y-2">
666
+ <div class="flex items-center">
667
+ <input type="checkbox" id="email-notifications" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
668
+ <label for="email-notifications" class="ml-2 block text-sm text-gray-700" data-i18n="emailNotifications">Email notifications</label>
669
+ </div>
670
+ <div class="flex items-center">
671
+ <input type="checkbox" id="push-notifications" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
672
+ <label for="push-notifications" class="ml-2 block text-sm text-gray-700" data-i18n="pushNotifications">Push notifications</label>
673
+ </div>
674
+ </div>
675
+ </div>
676
+
677
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
678
+ <h2 class="text-lg font-semibold mb-4" data-i18n="appSettings">App Settings</h2>
679
+ <div class="space-y-4">
680
+ <div>
681
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="export-format" data-i18n="exportFormat">Export Format</label>
682
+ <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">
683
+ <option value="pdf" data-i18n="pdf">PDF</option>
684
+ <option value="docx" data-i18n="word">Word</option>
685
+ <option value="csv" data-i18n="csv">CSV</option>
686
+ </select>
687
+ </div>
688
+ <div>
689
+ <label class="block text-gray-700 text-sm font-medium mb-2" data-i18n="theme">Theme</label>
690
+ <div class="flex space-x-4">
691
+ <div class="flex items-center">
692
+ <input type="radio" id="light-theme" name="theme" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300" checked>
693
+ <label for="light-theme" class="ml-2 block text-sm text-gray-700" data-i18n="light">Light</label>
694
+ </div>
695
+ <div class="flex items-center">
696
+ <input type="radio" id="dark-theme" name="theme" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300">
697
+ <label for="dark-theme" class="ml-2 block text-sm text-gray-700" data-i18n="dark">Dark</label>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+
704
+ <div class="flex justify-end">
705
+ <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>
706
+ </div>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+
712
+ <!-- Footer -->
713
+ <footer class="gradient-bg text-white py-6">
714
+ <div class="container mx-auto px-4">
715
+ <div class="flex flex-col md:flex-row justify-between items-center">
716
+ <div class="mb-4 md:mb-0">
717
+ <div class="flex items-center space-x-2">
718
+ <i class="fas fa-rocket text-2xl"></i>
719
+ <span class="text-xl font-bold">URL to Business</span>
720
+ </div>
721
+ <p class="text-sm mt-2" data-i18n="footerTagline">Turn YouTube videos into complete businesses with AI</p>
722
+ </div>
723
+ <div class="flex space-x-6">
724
+ <a href="#" class="hover:text-gray-200" data-i18n="terms">Terms</a>
725
+ <a href="#" class="hover:text-gray-200" data-i18n="privacy">Privacy</a>
726
+ <a href="#" class="hover:text-gray-200" data-i18n="contact">Contact</a>
727
+ <a href="#" class="hover:text-gray-200" data-i18n="help">Help</a>
728
+ </div>
729
+ </div>
730
+ <div class="mt-6 pt-6 border-t border-gray-700 text-center text-sm">
731
+ <p data-i18n="copyright">&copy; 2023 URL to Business. All rights reserved.</p>
732
+ </div>
733
+ </div>
734
+ </footer>
735
+
736
+ <script>
737
+ // Language translations
738
+ const translations = {
739
+ en: {
740
+ dashboard: "Dashboard",
741
+ projects: "Projects",
742
+ analytics: "Analytics",
743
+ settings: "Settings",
744
+ profile: "Profile",
745
+ logout: "Logout",
746
+ notification1: "New task completed by AI",
747
+ notification2: "Marketing report ready",
748
+ notification3: "New update available",
749
+ newProject: "New Business Project",
750
+ youtubeUrl: "YouTube Video URL",
751
+ businessName: "Business Name",
752
+ businessType: "Business Type",
753
+ selectType: "Select business type",
754
+ ecommerce: "E-commerce",
755
+ saas: "SaaS",
756
+ consulting: "Consulting",
757
+ physical: "Physical Product",
758
+ digital: "Digital Product",
759
+ service: "Service Business",
760
+ createProject: "Create Project",
761
+ aiAgents: "AI Agents",
762
+ researchAgent: "Research Agent",
763
+ contentAgent: "Content Agent",
764
+ marketingAgent: "Marketing Agent",
765
+ financeAgent: "Finance Agent",
766
+ logisticsAgent: "Logistics Agent",
767
+ businessDashboard: "Business Dashboard",
768
+ export: "Export",
769
+ totalTasks: "Total Tasks",
770
+ completedTasks: "13 completed",
771
+ activeAgents: "4 active",
772
+ documents: "Documents",
773
+ generatedDocs: "4 generated",
774
+ daysLeft: "Days Left",
775
+ launchDeadline: "Launch deadline",
776
+ videoAnalysis: "Video Analysis",
777
+ videoTitle: "How to Start a Dropshipping Business in 2023",
778
+ videoSource: "Extracted from YouTube video by Business Expert",
779
+ ecommerceTag: "E-commerce",
780
+ dropshippingTag: "Dropshipping",
781
+ marketingTag: "Marketing",
782
+ 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.",
783
+ videoDuration: "12:34 duration",
784
+ videoRelevance: "87% relevance",
785
+ keyActions: "Key Actions",
786
+ immediateActions: "Immediate Actions",
787
+ task1: "Register business name",
788
+ task2: "Choose dropshipping niche",
789
+ task3: "Research 10 potential products",
790
+ shortTerm: "Short-term",
791
+ task4: "Set up Shopify store",
792
+ task5: "Create product pages",
793
+ task6: "Design logo and branding",
794
+ longTerm: "Long-term",
795
+ task7: "Launch Facebook ads campaign",
796
+ task8: "Optimize conversion funnel",
797
+ task9: "Scale to 3 additional markets",
798
+ generatedDocs: "Generated Documents",
799
+ businessPlan: "Business Plan",
800
+ businessPlanDesc: "Complete roadmap for your business",
801
+ generatedToday: "Generated: Today",
802
+ marketAnalysis: "Market Analysis",
803
+ marketAnalysisDesc: "Competitor and target audience research",
804
+ marketingStrategy: "Marketing Strategy",
805
+ marketingStrategyDesc: "Complete digital marketing plan",
806
+ pendingGeneration: "Pending generation",
807
+ businessAnalytics: "Business Analytics",
808
+ footerTagline: "Turn YouTube videos into complete businesses with AI",
809
+ terms: "Terms",
810
+ privacy: "Privacy",
811
+ contact: "Contact",
812
+ help: "Help",
813
+ copyright: "© 2023 URL to Business. All rights reserved.",
814
+ notificationSettings: "Notification Settings",
815
+ emailNotifications: "Email notifications",
816
+ pushNotifications: "Push notifications",
817
+ exportFormat: "Export Format",
818
+ pdf: "PDF",
819
+ word: "Word",
820
+ csv: "CSV",
821
+ theme: "Theme",
822
+ light: "Light",
823
+ dark: "Dark",
824
+ cancel: "Cancel",
825
+ save: "Save",
826
+ performanceMetrics: "Performance Metrics",
827
+ taskCompletion: "Task Completion",
828
+ agentActivity: "AI Agent Activity",
829
+ accountSettings: "Account Settings",
830
+ username: "Username",
831
+ email: "Email",
832
+ appSettings: "App Settings",
833
+ saveChanges: "Save Changes"
834
+ },
835
+ fr: {
836
+ dashboard: "Tableau de bord",
837
+ projects: "Projets",
838
+ analytics: "Analytique",
839
+ settings: "Paramètres",
840
+ profile: "Profil",
841
+ logout: "Déconnexion",
842
+ notification1: "Nouvelle tâche terminée par l'IA",
843
+ notification2: "Rapport marketing prêt",
844
+ notification3: "Nouvelle mise à jour disponible",
845
+ newProject: "Nouveau Projet Commercial",
846
+ youtubeUrl: "URL de la vidéo YouTube",
847
+ businessName: "Nom de l'entreprise",
848
+ businessType: "Type d'entreprise",
849
+ selectType: "Sélectionnez le type d'entreprise",
850
+ ecommerce: "Commerce électronique",
851
+ saas: "Logiciel en tant que service",
852
+ consulting: "Consulting",
853
+ physical: "Produit physique",
854
+ digital: "Produit numérique",
855
+ service: "Entreprise de services",
856
+ createProject: "Créer un projet",
857
+ aiAgents: "Agents IA",
858
+ researchAgent: "Agent de recherche",
859
+ contentAgent: "Agent de contenu",
860
+ marketingAgent: "Agent marketing",
861
+ financeAgent: "Agent financier",
862
+ logisticsAgent: "Agent logistique",
863
+ businessDashboard: "Tableau de bord commercial",
864
+ export: "Exporter",
865
+ totalTasks: "Tâches totales",
866
+ completedTasks: "13 terminées",
867
+ activeAgents: "4 actifs",
868
+ documents: "Documents",
869
+ generatedDocs: "4 générés",
870
+ daysLeft: "Jours restants",
871
+ launchDeadline: "Date limite de lancement",
872
+ videoAnalysis: "Analyse vidéo",
873
+ videoTitle: "Comment démarrer une entreprise de dropshipping en 2023",
874
+ videoSource: "Extrait de la vidéo YouTube par Business Expert",
875
+ ecommerceTag: "E-commerce",
876
+ dropshippingTag: "Dropshipping",
877
+ marketingTag: "Marketing",
878
+ 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.",
879
+ videoDuration: "Durée : 12:34",
880
+ videoRelevance: "Pertinence : 87%",
881
+ keyActions: "Actions clés",
882
+ immediateActions: "Actions immédiates",
883
+ task1: "Enregistrer le nom de l'entreprise",
884
+ task2: "Choisir une niche de dropshipping",
885
+ task3: "Rechercher 10 produits potentiels",
886
+ shortTerm: "Court terme",
887
+ task4: "Configurer une boutique Shopify",
888
+ task5: "Créer des pages de produits",
889
+ task6: "Concevoir un logo et une identité",
890
+ longTerm: "Long terme",
891
+ task7: "Lancer une campagne de publicité Facebook",
892
+ task8: "Optimiser le tunnel de conversion",
893
+ task9: "Étendre à 3 marchés supplémentaires",
894
+ generatedDocs: "Documents générés",
895
+ businessPlan: "Plan d'affaires",
896
+ businessPlanDesc: "Feuille de route complète pour votre entreprise",
897
+ generatedToday: "Généré : Aujourd'hui",
898
+ marketAnalysis: "Analyse de marché",
899
+ marketAnalysisDesc: "Recherche sur les concurrents et le public cible",
900
+ marketingStrategy: "Stratégie marketing",
901
+ marketingStrategyDesc: "Plan de marketing numérique complet",
902
+ pendingGeneration: "Génération en attente",
903
+ businessAnalytics: "Analytique commerciale",
904
+ footerTagline: "Transformez des vidéos YouTube en entreprises complètes avec l'IA",
905
+ terms: "Conditions",
906
+ privacy: "Confidentialité",
907
+ contact: "Contact",
908
+ help: "Aide",
909
+ copyright: "© 2023 URL to Business. Tous droits réservés.",
910
+ notificationSettings: "Paramètres de notification",
911
+ emailNotifications: "Notifications par e-mail",
912
+ pushNotifications: "Notifications push",
913
+ exportFormat: "Format d'exportation",
914
+ pdf: "PDF",
915
+ word: "Word",
916
+ csv: "CSV",
917
+ theme: "Thème",
918
+ light: "Clair",
919
+ dark: "Sombre",
920
+ cancel: "Annuler",
921
+ save: "Enregistrer",
922
+ performanceMetrics: "Métriques de performance",
923
+ taskCompletion: "Tâches complétées",
924
+ agentActivity: "Activité des agents IA",
925
+ accountSettings: "Paramètres du compte",
926
+ username: "Nom d'utilisateur",
927
+ email: "Email",
928
+ appSettings: "Paramètres de l'application",
929
+ saveChanges: "Enregistrer les modifications"
930
+ }
931
+ };
932
+
933
+ // Current language
934
+ let currentLanguage = 'en';
935
+
936
+ // Function to change language
937
+ function changeLanguage(lang) {
938
+ currentLanguage = lang;
939
+ document.getElementById('current-language').textContent = lang.toUpperCase();
940
+
941
+ // Update all elements with data-i18n attribute
942
+ document.querySelectorAll('[data-i18n]').forEach(element => {
943
+ const key = element.getAttribute('data-i18n');
944
+ if (translations[lang][key]) {
945
+ if (element.tagName === 'INPUT' && element.type === 'text') {
946
+ element.placeholder = translations[lang][key];
947
+ } else if (element.tagName === 'OPTION') {
948
+ element.textContent = translations[lang][key];
949
+ } else {
950
+ element.textContent = translations[lang][key];
951
+ }
952
+ }
953
+ });
954
+
955
+ // Update charts with translated labels
956
+ updateCharts();
957
+ }
958
+
959
+ // Function to update charts with translated labels
960
+ function updateCharts() {
961
+ if (window.businessChart) {
962
+ window.businessChart.data.labels = currentLanguage === 'en'
963
+ ? ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6']
964
+ : ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4', 'Semaine 5', 'Semaine 6'];
965
+ window.businessChart.data.datasets[0].label = currentLanguage === 'en' ? 'Tasks Completed' : 'Tâches terminées';
966
+ window.businessChart.data.datasets[1].label = currentLanguage === 'en' ? 'Revenue Projection ($)' : 'Projection de revenus ($)';
967
+ window.businessChart.update();
968
+ }
969
+
970
+ if (window.performanceChart) {
971
+ window.performanceChart.data.labels = currentLanguage === 'en'
972
+ ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
973
+ : ['Janv', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin'];
974
+ window.performanceChart.data.datasets[0].label = currentLanguage === 'en' ? 'Performance Score' : 'Score de performance';
975
+ window.performanceChart.update();
976
+ }
977
+
978
+ if (window.taskChart) {
979
+ window.taskChart.data.labels = currentLanguage === 'en'
980
+ ? ['Completed', 'In Progress', 'Pending']
981
+ : ['Terminées', 'En cours', 'En attente'];
982
+ window.taskChart.update();
983
+ }
984
+
985
+ if (window.agentChart) {
986
+ window.agentChart.data.labels = currentLanguage === 'en'
987
+ ? ['Research', 'Content', 'Marketing', 'Finance', 'Logistics']
988
+ : ['Recherche', 'Contenu', 'Marketing', 'Finance', 'Logistique'];
989
+ window.agentChart.data.datasets[0].label = currentLanguage === 'en' ? 'Activity Level' : "Niveau d'activité";
990
+ window.agentChart.update();
991
+ }
992
+ }
993
+
994
+ // Navigation functionality
995
+ document.querySelectorAll('.nav-link').forEach(link => {
996
+ link.addEventListener('click', function(e) {
997
+ e.preventDefault();
998
+ const pageId = this.getAttribute('data-page') + '-page';
999
+
1000
+ // Hide all pages
1001
+ document.querySelectorAll('.page').forEach(page => {
1002
+ page.classList.remove('active');
1003
+ });
1004
+
1005
+ // Show selected page
1006
+ document.getElementById(pageId).classList.add('active');
1007
+
1008
+ // Close mobile menu if open
1009
+ document.getElementById('mobile-menu').classList.remove('show');
1010
+ });
1011
+ });
1012
+
1013
+ // Simulate video analysis
1014
+ document.getElementById('analyze-btn').addEventListener('click', function() {
1015
+ const urlInput = document.getElementById('youtube-url');
1016
+ if (urlInput.value.trim() === '') {
1017
+ alert(currentLanguage === 'en' ? 'Please enter a YouTube URL' : 'Veuillez entrer une URL YouTube');
1018
+ return;
1019
+ }
1020
+
1021
+ // Show loading state
1022
+ const btn = this;
1023
+ const originalText = btn.innerHTML;
1024
+ btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + (currentLanguage === 'en' ? 'Analyzing...' : 'Analyse en cours...');
1025
+ btn.disabled = true;
1026
+
1027
+ // Simulate API call
1028
+ setTimeout(function() {
1029
+ btn.innerHTML = originalText;
1030
+ btn.disabled = false;
1031
+
1032
+ // Update UI with mock data
1033
+ document.getElementById('business-name').value = currentLanguage === 'en' ? 'Dropshipping Empire' : 'Empire de Dropshipping';
1034
+ document.getElementById('business-type').value = 'ecommerce';
1035
+
1036
+ // Show success message
1037
+ 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é.');
1038
+ }, 2000);
1039
+ });
1040
+
1041
+ // Simulate project creation
1042
+ document.getElementById('create-project-btn').addEventListener('click', function() {
1043
+ const businessName = document.getElementById('business-name').value;
1044
+ const businessType = document.getElementById('business-type').value;
1045
+
1046
+ if (!businessName || !businessType) {
1047
+ alert(currentLanguage === 'en' ? 'Please complete all fields' : 'Veuillez remplir tous les champs');
1048
+ return;
1049
+ }
1050
+
1051
+ // Show loading state
1052
+ const btn = this;
1053
+ const originalText = btn.innerHTML;
1054
+ btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + (currentLanguage === 'en' ? 'Creating...' : 'Création en cours...');
1055
+ btn.disabled = true;
1056
+
1057
+ // Simulate API call
1058
+ setTimeout(function() {
1059
+ btn.innerHTML = originalText;
1060
+ btn.disabled = false;
1061
+
1062
+ // Show success message and redirect to projects page
1063
+ alert((currentLanguage === 'en' ? 'Project "' : 'Projet "') + businessName + (currentLanguage === 'en' ? '" created successfully!' : '" créé avec succès !'));
1064
+
1065
+ // Navigate to projects page
1066
+ document.querySelectorAll('.page').forEach(page => {
1067
+ page.classList.remove('active');
1068
+ });
1069
+ document.getElementById('projects-page').classList.add('active');
1070
+ }, 1500);
1071
+ });
1072
+
1073
+ // Language selector
1074
+ document.querySelectorAll('.language-option').forEach(option => {
1075
+ option.addEventListener('click', function() {
1076
+ const lang = this.getAttribute('data-lang');
1077
+ changeLanguage(lang);
1078
+ });
1079
+ });
1080
+
1081
+ // Mobile menu toggle
1082
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
1083
+ document.getElementById('mobile-menu').classList.toggle('show');
1084
+ });
1085
+
1086
+ // Notifications dropdown
1087
+ document.getElementById('notifications-button').addEventListener('click', function(e) {
1088
+ e.stopPropagation();
1089
+ document.getElementById('notifications-dropdown').classList.toggle('hidden');
1090
+ });
1091
+
1092
+ // Profile dropdown
1093
+ document.getElementById('profile-button').addEventListener('click', function(e) {
1094
+ e.stopPropagation();
1095
+ document.getElementById('profile-dropdown').classList.toggle('hidden');
1096
+ });
1097
+
1098
+ // Close dropdowns when clicking outside
1099
+ document.addEventListener('click', function() {
1100
+ document.getElementById('notifications-dropdown').classList.add('hidden');
1101
+ document.getElementById('profile-dropdown').classList.add('hidden');
1102
+ });
1103
+
1104
+ // Export functionality
1105
+ document.getElementById('export-btn').addEventListener('click', function() {
1106
+ // Show loading state
1107
+ const btn = this;
1108
+ const originalText = btn.innerHTML;
1109
+ btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + (currentLanguage === 'en' ? 'Exporting...' : 'Exportation en cours...');
1110
+ btn.disabled = true;
1111
+
1112
+ // Simulate export process
1113
+ setTimeout(function() {
1114
+ btn.innerHTML = originalText;
1115
+ btn.disabled = false;
1116
+
1117
+ // Show success message
1118
+ alert(currentLanguage === 'en' ? 'Export completed successfully! Check your downloads folder.' : 'Exportation terminée avec succès ! Vérifiez votre dossier de téléchargements.');
1119
+ }, 1500);
1120
+ });
1121
+
1122
+ // Document download buttons
1123
+ document.querySelectorAll('.doc-download').forEach(btn => {
1124
+ btn.addEventListener('click', function() {
1125
+ const docType = this.getAttribute('data-doc');
1126
+ alert((currentLanguage === 'en' ? 'Downloading ' : 'Téléchargement de ') + docType + (currentLanguage === 'en' ? ' document...' : ' document...'));
1127
+ });
1128
+ });
1129
+
1130
+ // AI Agent click functionality
1131
+ document.querySelectorAll('.agent-item').forEach(agent => {
1132
+ agent.addEventListener('click', function() {
1133
+ const agentType = this.getAttribute('data-agent');
1134
+ alert((currentLanguage === 'en' ? 'Opening ' : 'Ouverture de ') + agentType + (currentLanguage === 'en' ? ' agent dashboard...' : ' tableau de bord de l\'agent...'));
1135
+ });
1136
+ });
1137
+
1138
+ // Task completion toggle
1139
+ document.querySelectorAll('.task-item input[type="checkbox"]').forEach(checkbox => {
1140
+ checkbox.addEventListener('change', function() {
1141
+ const taskItem = this.closest('.task-item');
1142
+ if (this.checked) {
1143
+ taskItem.classList.add('completed');
1144
+ } else {
1145
+ taskItem.classList.remove('completed');
1146
+ }
1147
+ });
1148
+ });
1149
+
1150
+ // Save settings
1151
+ document.getElementById('save-settings-btn').addEventListener('click', function() {
1152
+ alert(currentLanguage === 'en' ? 'Settings saved successfully!' : 'Paramètres enregistrés avec succès !');
1153
+ });
1154
+
1155
+ // Initialize Charts
1156
+ document.addEventListener('DOMContentLoaded', function() {
1157
+ // Business Chart
1158
+ const businessCtx = document.getElementById('businessChart').getContext('2d');
1159
+ window.businessChart = new Chart(businessCtx, {
1160
+ type: 'line',
1161
+ data: {
1162
+ labels: currentLanguage === 'en'
1163
+ ? ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6']
1164
+ : ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4', 'Semaine 5', 'Semaine 6'],
1165
+ datasets: [
1166
+ {
1167
+ label: currentLanguage === 'en' ? 'Tasks Completed' : 'Tâches terminées',
1168
+ data: [5, 10, 15, 20, 25, 30],
1169
+ backgroundColor: 'rgba(110, 142, 251, 0.5)',
1170
+ borderColor: 'rgba(110, 142, 251, 1)',
1171
+ borderWidth: 2,
1172
+ tension: 0.4
1173
+ },
1174
+ {
1175
+ label: currentLanguage === 'en' ? 'Revenue Projection ($)' : 'Projection de revenus ($)',
1176
+ data: [0, 200, 500, 1000, 2000, 3500],
1177
+ backgroundColor: 'rgba(167, 119, 227, 0.5)',
1178
+ borderColor: 'rgba(167, 119, 227, 1)',
1179
+ borderWidth: 2,
1180
+ tension: 0.4
1181
+ }
1182
+ ]
1183
+ },
1184
+ options: {
1185
+ responsive: true,
1186
+ maintainAspectRatio: false,
1187
+ plugins: {
1188
+ legend: {
1189
+ position: 'top',
1190
+ },
1191
+ tooltip: {
1192
+ enabled: false,
1193
+ external: function(context) {
1194
+ const tooltip = document.getElementById('chartTooltip');
1195
+ if (context.tooltip.opacity === 0) {
1196
+ tooltip.style.opacity = 0;
1197
+ return;
1198
+ }
1199
+
1200
+ const dataIndex = context.tooltip.dataPoints[0].dataIndex;
1201
+ const datasetIndex = context.tooltip.dataPoints[0].datasetIndex;
1202
+ const value = context.tooltip.dataPoints[0].raw;
1203
+ const label = context.chart.data.labels[dataIndex];
1204
+
1205
+ tooltip.innerHTML = `
1206
+ <div>${label}</div>
1207
+ <div><strong>${context.chart.data.datasets[datasetIndex].label}:</strong> ${value}</div>
1208
+ `;
1209
+
1210
+ const chartRect = context.chart.canvas.getBoundingClientRect();
1211
+ tooltip.style.left = chartRect.left + context.tooltip.caretX + 'px';
1212
+ tooltip.style.top = chartRect.top + context.tooltip.caretY + 'px';
1213
+ tooltip.style.opacity = 1;
1214
+ }
1215
+ }
1216
+ },
1217
+ scales: {
1218
+ y: {
1219
+ beginAtZero: true
1220
+ }
1221
+ }
1222
+ }
1223
+ });
1224
+
1225
+ // Performance Chart (on Analytics page)
1226
+ const performanceCtx = document.getElementById('performanceChart')?.getContext('2d');
1227
+ if (performanceCtx) {
1228
+ window.performanceChart = new Chart(performanceCtx, {
1229
+ type: 'bar',
1230
+ data: {
1231
+ labels: currentLanguage === 'en'
1232
+ ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
1233
+ : ['Janv', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin'],
1234
+ datasets: [{
1235
+ label: currentLanguage === 'en' ? 'Performance Score' : 'Score de performance',
1236
+ data: [65, 59, 80, 81, 56, 55],
1237
+ backgroundColor: 'rgba(54, 162, 235, 0.5)',
1238
+ borderColor: 'rgba(54, 162, 235, 1)',
1239
+ borderWidth: 1
1240
+ }]
1241
+ },
1242
+ options: {
1243
+ responsive: true,
1244
+ maintainAspectRatio: false,
1245
+ scales: {
1246
+ y: {
1247
+ beginAtZero: true
1248
+ }
1249
+ }
1250
+ }
1251
+ });
1252
+ }
1253
+
1254
+ // Task Chart (on Analytics page)
1255
+ const taskCtx = document.getElementById('taskChart')?.getContext('2d');
1256
+ if (taskCtx) {
1257
+ window.taskChart = new Chart(taskCtx, {
1258
+ type: 'doughnut',
1259
+ data: {
1260
+ labels: currentLanguage === 'en'
1261
+ ? ['Completed', 'In Progress', 'Pending']
1262
+ : ['Terminées', 'En cours', 'En attente'],
1263
+ datasets: [{
1264
+ data: [13, 7, 4],
1265
+ backgroundColor: [
1266
+ 'rgba(75, 192, 192, 0.5)',
1267
+ 'rgba(255, 206, 86, 0.5)',
1268
+ 'rgba(255, 99, 132, 0.5)'
1269
+ ],
1270
+ borderColor: [
1271
+ 'rgba(75, 192, 192, 1)',
1272
+ 'rgba(255, 206, 86, 1)',
1273
+ 'rgba(255, 99, 132, 1)'
1274
+ ],
1275
+ borderWidth: 1
1276
+ }]
1277
+ },
1278
+ options: {
1279
+ responsive: true,
1280
+ maintainAspectRatio: false
1281
+ }
1282
+ });
1283
+ }
1284
+
1285
+ // Agent Chart (on Analytics page)
1286
+ const agentCtx = document.getElementById('agentChart')?.getContext('2d');
1287
+ if (agentCtx) {
1288
+ window.agentChart = new Chart(agentCtx, {
1289
+ type: 'radar',
1290
+ data: {
1291
+ labels: currentLanguage === 'en'
1292
+ ? ['Research', 'Content', 'Marketing', 'Finance', 'Logistics']
1293
+ : ['Recherche', 'Contenu', 'Marketing', 'Finance', 'Logistique'],
1294
+ datasets: [{
1295
+ label: currentLanguage === 'en' ? 'Activity Level' : "Niveau d'activité",
1296
+ data: [65, 59, 90, 81, 56],
1297
+ backgroundColor: 'rgba(153, 102, 255, 0.5)',
1298
+ borderColor: 'rgba(153, 102, 255, 1)',
1299
+ borderWidth: 1
1300
+ }]
1301
+ },
1302
+ options: {
1303
+ responsive: true,
1304
+ maintainAspectRatio: false,
1305
+ scales: {
1306
+ r: {
1307
+ angleLines: {
1308
+ display: true
1309
+ },
1310
+ suggestedMin: 0,
1311
+ suggestedMax: 100
1312
+ }
1313
+ }
1314
+ }
1315
+ });
1316
+ }
1317
+ });
1318
+ </script>
1319
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1320
+ <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>
1321
+ </html>