Hugging Face's logo

Spaces:
yeiayel
/
contentforge
Running

App Files Community
yeiayel commited on
Commit
08cbe4b
·
verified ·
1 Parent(s): e30b656

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +759 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Contentforge
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: red
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: contentforge
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,759 @@
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>SEO AutoBlog AI - Create SEO-Optimized Content in Minutes</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
+ .hero-gradient {
14
+ background: linear-gradient(135deg, rgba(110, 142, 251, 0.9) 0%, rgba(167, 119, 227, 0.9) 100%);
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .loading-dots:after {
21
+ content: '.';
22
+ animation: dots 1.5s steps(5, end) infinite;
23
+ }
24
+ @keyframes dots {
25
+ 0%, 20% { content: '.'; }
26
+ 40% { content: '..'; }
27
+ 60% { content: '...'; }
28
+ 80%, 100% { content: ''; }
29
+ }
30
+ .fade-in {
31
+ animation: fadeIn 0.5s ease-in-out;
32
+ }
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; transform: translateY(10px); }
35
+ to { opacity: 1; transform: translateY(0); }
36
+ }
37
+ .sidebar {
38
+ transition: all 0.3s ease;
39
+ }
40
+ .sidebar-closed {
41
+ transform: translateX(-100%);
42
+ }
43
+ .sidebar-open {
44
+ transform: translateX(0);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-50 font-sans">
49
+ <!-- Mobile Sidebar Toggle -->
50
+ <div class="md:hidden fixed top-4 left-4 z-50">
51
+ <button id="sidebarToggle" class="p-2 rounded-lg bg-white shadow-md text-purple-600">
52
+ <i class="fas fa-bars"></i>
53
+ </button>
54
+ </div>
55
+
56
+ <!-- Sidebar -->
57
+ <div id="sidebar" class="sidebar sidebar-closed md:sidebar-open fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-40 md:translate-x-0">
58
+ <div class="p-4 flex items-center justify-between border-b">
59
+ <div class="flex items-center space-x-2">
60
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold">SA</div>
61
+ <span class="font-bold text-gray-800">SEO AutoBlog</span>
62
+ </div>
63
+ <button id="closeSidebar" class="md:hidden p-1 rounded-full hover:bg-gray-100">
64
+ <i class="fas fa-times text-gray-500"></i>
65
+ </button>
66
+ </div>
67
+ <nav class="p-4">
68
+ <ul class="space-y-2">
69
+ <li>
70
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-purple-50 text-purple-600">
71
+ <i class="fas fa-home"></i>
72
+ <span>Dashboard</span>
73
+ </a>
74
+ </li>
75
+ <li>
76
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
77
+ <i class="fas fa-file-alt"></i>
78
+ <span>My Articles</span>
79
+ </a>
80
+ </li>
81
+ <li>
82
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
83
+ <i class="fas fa-chart-line"></i>
84
+ <span>Analytics</span>
85
+ </a>
86
+ </li>
87
+ <li>
88
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
89
+ <i class="fas fa-key"></i>
90
+ <span>Keywords</span>
91
+ </a>
92
+ </li>
93
+ <li>
94
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
95
+ <i class="fas fa-cog"></i>
96
+ <span>Settings</span>
97
+ </a>
98
+ </li>
99
+ </ul>
100
+ </nav>
101
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
102
+ <div class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700 cursor-pointer">
103
+ <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
104
+ <i class="fas fa-user text-gray-600"></i>
105
+ </div>
106
+ <span>Account</span>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Main Content -->
112
+ <div class="md:ml-64 min-h-screen">
113
+ <!-- Header -->
114
+ <header class="bg-white shadow-sm">
115
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
116
+ <h1 class="text-2xl font-bold text-gray-900">Create New Article</h1>
117
+ <div class="flex items-center space-x-4">
118
+ <div class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded-full">
119
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
120
+ <span class="text-sm font-medium">5 credits left</span>
121
+ </div>
122
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
123
+ Upgrade Plan
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </header>
128
+
129
+ <!-- Main Content Area -->
130
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
131
+ <!-- Step Progress -->
132
+ <div class="mb-8">
133
+ <div class="flex justify-between mb-2">
134
+ <div class="flex-1 text-center">
135
+ <div class="w-8 h-8 mx-auto rounded-full bg-purple-600 text-white flex items-center justify-center">1</div>
136
+ <p class="mt-2 text-sm font-medium text-purple-600">Topic & Keywords</p>
137
+ </div>
138
+ <div class="flex-1 text-center">
139
+ <div class="w-8 h-8 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">2</div>
140
+ <p class="mt-2 text-sm font-medium text-gray-600">Title & Outline</p>
141
+ </div>
142
+ <div class="flex-1 text-center">
143
+ <div class="w-8 h-8 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">3</div>
144
+ <p class="mt-2 text-sm font-medium text-gray-600">Generate Content</p>
145
+ </div>
146
+ <div class="flex-1 text-center">
147
+ <div class="w-8 h-8 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">4</div>
148
+ <p class="mt-2 text-sm font-medium text-gray-600">Review & Publish</p>
149
+ </div>
150
+ </div>
151
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
152
+ <div class="bg-purple-600 h-1.5 rounded-full" style="width: 25%"></div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Step 1: Topic & Keywords -->
157
+ <div id="step1" class="fade-in">
158
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
159
+ <div class="p-6">
160
+ <h2 class="text-xl font-bold text-gray-800 mb-4">What's your article about?</h2>
161
+ <p class="text-gray-600 mb-6">Enter your topic or idea below. Our AI will analyze it and suggest the best SEO keywords to help your content rank higher.</p>
162
+
163
+ <div class="mb-6">
164
+ <label for="topic" class="block text-sm font-medium text-gray-700 mb-2">Article Topic</label>
165
+ <textarea id="topic" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600" placeholder="Example: How to start a successful blog in 2024"></textarea>
166
+ </div>
167
+
168
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
169
+ <div>
170
+ <label for="tone" class="block text-sm font-medium text-gray-700 mb-2">Tone</label>
171
+ <select id="tone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600">
172
+ <option value="professional">Professional</option>
173
+ <option value="friendly">Friendly</option>
174
+ <option value="casual">Casual</option>
175
+ <option value="authoritative">Authoritative</option>
176
+ <option value="humorous">Humorous</option>
177
+ </select>
178
+ </div>
179
+ <div>
180
+ <label for="length" class="block text-sm font-medium text-gray-700 mb-2">Article Length</label>
181
+ <select id="length" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600">
182
+ <option value="short">Short (300-500 words)</option>
183
+ <option value="medium" selected>Medium (650-1500 words)</option>
184
+ <option value="long">Long (2000+ words)</option>
185
+ </select>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
190
+ <div>
191
+ <label for="language" class="block text-sm font-medium text-gray-700 mb-2">Language</label>
192
+ <select id="language" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600">
193
+ <option value="english" selected>English</option>
194
+ <option value="spanish">Spanish</option>
195
+ <option value="french">French</option>
196
+ <option value="german">German</option>
197
+ </select>
198
+ </div>
199
+ <div>
200
+ <label for="aiModel" class="block text-sm font-medium text-gray-700 mb-2">AI Model</label>
201
+ <select id="aiModel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600">
202
+ <option value="gemini" selected>Gemini Pro</option>
203
+ <option value="deepseek">Deepseek</option>
204
+ </select>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="flex justify-end">
209
+ <button id="generateKeywordsBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2">
210
+ <span>Generate Keywords</span>
211
+ <i class="fas fa-arrow-right"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Step 2: Keywords Suggestions (Hidden Initially) -->
219
+ <div id="step2" class="hidden fade-in">
220
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
221
+ <div class="p-6">
222
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Keyword Suggestions</h2>
223
+ <p class="text-gray-600 mb-6">Our AI analyzed your topic and found these high-potential keywords. Select the ones you want to target in your article.</p>
224
+
225
+ <div class="mb-6">
226
+ <h3 class="font-medium text-gray-700 mb-3">Primary Keyword</h3>
227
+ <div class="flex flex-wrap gap-3 mb-6">
228
+ <div class="keyword-chip bg-purple-100 text-purple-800 px-4 py-2 rounded-full flex items-center">
229
+ <span>how to start a blog</span>
230
+ <div class="ml-2 text-xs bg-purple-600 text-white px-2 py-1 rounded-full">High Volume</div>
231
+ </div>
232
+ </div>
233
+
234
+ <h3 class="font-medium text-gray-700 mb-3">Secondary Keywords</h3>
235
+ <div class="flex flex-wrap gap-3 mb-6">
236
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
237
+ <span>blogging for beginners</span>
238
+ <div class="ml-2 text-xs bg-green-600 text-white px-2 py-1 rounded-full">Low Comp</div>
239
+ </div>
240
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
241
+ <span>how to create a blog</span>
242
+ <div class="ml-2 text-xs bg-green-600 text-white px-2 py-1 rounded-full">Low Comp</div>
243
+ </div>
244
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
245
+ <span>blog setup guide</span>
246
+ <div class="ml-2 text-xs bg-yellow-600 text-white px-2 py-1 rounded-full">Med Comp</div>
247
+ </div>
248
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
249
+ <span>best blogging platforms</span>
250
+ <div class="ml-2 text-xs bg-green-600 text-white px-2 py-1 rounded-full">Low Comp</div>
251
+ </div>
252
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
253
+ <span>blog niche ideas</span>
254
+ <div class="ml-2 text-xs bg-green-600 text-white px-2 py-1 rounded-full">Low Comp</div>
255
+ </div>
256
+ </div>
257
+
258
+ <h3 class="font-medium text-gray-700 mb-3">Related Keyphrases</h3>
259
+ <div class="flex flex-wrap gap-3">
260
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
261
+ <span>how to make money blogging</span>
262
+ <div class="ml-2 text-xs bg-yellow-600 text-white px-2 py-1 rounded-full">Med Comp</div>
263
+ </div>
264
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
265
+ <span>blog content ideas</span>
266
+ <div class="ml-2 text-xs bg-green-600 text-white px-2 py-1 rounded-full">Low Comp</div>
267
+ </div>
268
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
269
+ <span>blog promotion strategies</span>
270
+ <div class="ml-2 text-xs bg-green-600 text-white px-2 py-1 rounded-full">Low Comp</div>
271
+ </div>
272
+ <div class="keyword-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full flex items-center cursor-pointer hover:bg-gray-200">
273
+ <span>wordpress vs blogger</span>
274
+ <div class="ml-2 text-xs bg-yellow-600 text-white px-2 py-1 rounded-full">Med Comp</div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="flex justify-between">
280
+ <button id="backToStep1" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
281
+ <i class="fas fa-arrow-left mr-2"></i>
282
+ Back
283
+ </button>
284
+ <button id="generateTitlesBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2">
285
+ <span>Generate Titles & Outline</span>
286
+ <i class="fas fa-arrow-right"></i>
287
+ </button>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Step 3: Title & Outline (Hidden Initially) -->
294
+ <div id="step3" class="hidden fade-in">
295
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
296
+ <div class="p-6">
297
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Title Suggestions</h2>
298
+ <p class="text-gray-600 mb-6">Choose the title that best fits your article. Our AI will create an outline based on your selection.</p>
299
+
300
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
301
+ <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
302
+ <div class="flex items-start">
303
+ <div class="mr-3 mt-1">
304
+ <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
305
+ </div>
306
+ <div>
307
+ <h3 class="font-medium text-gray-800">The Ultimate Guide to Starting a Blog in 2024: Step-by-Step for Beginners</h3>
308
+ <p class="text-sm text-gray-500 mt-1">SEO Score: 92/100</p>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
313
+ <div class="flex items-start">
314
+ <div class="mr-3 mt-1">
315
+ <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
316
+ </div>
317
+ <div>
318
+ <h3 class="font-medium text-gray-800">How to Start a Successful Blog: A Complete Beginner's Guide</h3>
319
+ <p class="text-sm text-gray-500 mt-1">SEO Score: 89/100</p>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
324
+ <div class="flex items-start">
325
+ <div class="mr-3 mt-1">
326
+ <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
327
+ </div>
328
+ <div>
329
+ <h3 class="font-medium text-gray-800">Blogging 101: Everything You Need to Know to Start Your First Blog</h3>
330
+ <p class="text-sm text-gray-500 mt-1">SEO Score: 87/100</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
335
+ <div class="flex items-start">
336
+ <div class="mr-3 mt-1">
337
+ <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
338
+ </div>
339
+ <div>
340
+ <h3 class="font-medium text-gray-800">From Idea to Launch: The Step-by-Step Process to Start a Blog That Grows</h3>
341
+ <p class="text-sm text-gray-500 mt-1">SEO Score: 85/100</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="mb-6">
348
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Article Outline</h2>
349
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
350
+ <div class="outline-section mb-4">
351
+ <h3 class="font-medium text-gray-800 mb-2 flex items-center">
352
+ <i class="fas fa-circle text-purple-500 mr-2 text-xs"></i>
353
+ Introduction
354
+ </h3>
355
+ <ul class="ml-6 text-gray-600 space-y-1">
356
+ <li>• Why starting a blog is still relevant in 2024</li>
357
+ <li>• Benefits of blogging for personal and business growth</li>
358
+ <li>• Overview of what the guide will cover</li>
359
+ </ul>
360
+ </div>
361
+ <div class="outline-section mb-4">
362
+ <h3 class="font-medium text-gray-800 mb-2 flex items-center">
363
+ <i class="fas fa-circle text-purple-500 mr-2 text-xs"></i>
364
+ Choosing Your Blog Niche
365
+ </h3>
366
+ <ul class="ml-6 text-gray-600 space-y-1">
367
+ <li>• How to identify profitable blog niches</li>
368
+ <li>• Passion vs. profitability: finding the balance</li>
369
+ <li>• Research tools to validate your niche idea</li>
370
+ </ul>
371
+ </div>
372
+ <div class="outline-section mb-4">
373
+ <h3 class="font-medium text-gray-800 mb-2 flex items-center">
374
+ <i class="fas fa-circle text-purple-500 mr-2 text-xs"></i>
375
+ Selecting a Blogging Platform
376
+ </h3>
377
+ <ul class="ml-6 text-gray-600 space-y-1">
378
+ <li>• Comparison of popular platforms (WordPress, Blogger, Wix, etc.)</li>
379
+ <li>• Pros and cons of self-hosted vs. free platforms</li>
380
+ <li>• Step-by-step setup guide for WordPress</li>
381
+ </ul>
382
+ </div>
383
+ <div class="outline-section mb-4">
384
+ <h3 class="font-medium text-gray-800 mb-2 flex items-center">
385
+ <i class="fas fa-circle text-purple-500 mr-2 text-xs"></i>
386
+ Creating Your First Content
387
+ </h3>
388
+ <ul class="ml-6 text-gray-600 space-y-1">
389
+ <li>• How to structure blog posts for maximum engagement</li>
390
+ <li>• SEO best practices for beginners</li>
391
+ <li>• Tools to help with writing and editing</li>
392
+ </ul>
393
+ </div>
394
+ <div class="outline-section">
395
+ <h3 class="font-medium text-gray-800 mb-2 flex items-center">
396
+ <i class="fas fa-circle text-purple-500 mr-2 text-xs"></i>
397
+ Promoting Your Blog
398
+ </h3>
399
+ <ul class="ml-6 text-gray-600 space-y-1">
400
+ <li>• Social media strategies for new bloggers</li>
401
+ <li>• Basic SEO techniques to get started</li>
402
+ <li>• Building an email list from day one</li>
403
+ </ul>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex justify-between">
409
+ <button id="backToStep2" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
410
+ <i class="fas fa-arrow-left mr-2"></i>
411
+ Back
412
+ </button>
413
+ <button id="generateContentBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2">
414
+ <span>Generate Full Article</span>
415
+ <i class="fas fa-magic"></i>
416
+ </button>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Step 4: Generated Content (Hidden Initially) -->
423
+ <div id="step4" class="hidden fade-in">
424
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
425
+ <div class="p-6">
426
+ <div class="flex justify-between items-center mb-6">
427
+ <h2 class="text-xl font-bold text-gray-800">Generated Article</h2>
428
+ <div class="flex space-x-3">
429
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium flex items-center">
430
+ <i class="fas fa-download mr-2"></i>
431
+ Export
432
+ </button>
433
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium flex items-center">
434
+ <i class="fas fa-edit mr-2"></i>
435
+ Edit
436
+ </button>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="mb-6">
441
+ <h1 class="text-3xl font-bold text-gray-900 mb-4">The Ultimate Guide to Starting a Blog in 2024: Step-by-Step for Beginners</h1>
442
+ <div class="flex items-center text-sm text-gray-500 space-x-4 mb-6">
443
+ <span><i class="fas fa-clock mr-1"></i> 12 min read</span>
444
+ <span><i class="fas fa-chart-line mr-1"></i> SEO Score: 92/100</span>
445
+ <span><i class="fas fa-ruler-combined mr-1"></i> 1,450 words</span>
446
+ </div>
447
+
448
+ <div class="mb-8">
449
+ <img src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg" alt="Person typing on laptop" class="w-full h-auto rounded-lg">
450
+ <p class="text-sm text-gray-500 mt-2 text-center">Credit: Pexels</p>
451
+ </div>
452
+
453
+ <div class="prose max-w-none">
454
+ <h2>Introduction</h2>
455
+ <p>Starting a blog in 2024 might seem daunting with all the competition out there, but the truth is, there's never been a better time to share your voice online. Whether you're looking to build a personal brand, share your expertise, or even create an additional income stream, blogging remains one of the most effective ways to establish your online presence.</p>
456
+
457
+ <p>In this comprehensive guide, we'll walk you through every step of the process—from choosing your niche to publishing your first post and promoting it effectively. By the end, you'll have all the tools and knowledge needed to launch a successful blog that stands out in today's crowded digital landscape.</p>
458
+
459
+ <h2>Choosing Your Blog Niche</h2>
460
+ <p>One of the most critical decisions you'll make is selecting your blog's focus. Your niche should be:</p>
461
+ <ul>
462
+ <li>Something you're passionate about (you'll be writing a lot about it!)</li>
463
+ <li>Specific enough to stand out but broad enough to have an audience</li>
464
+ <li>Potentially profitable if monetization is a goal</li>
465
+ </ul>
466
+
467
+ <p>Popular niche categories include:</p>
468
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
469
+ <div class="bg-gray-50 p-3 rounded-lg">
470
+ <h3 class="font-medium mb-2">Lifestyle</h3>
471
+ <p class="text-sm text-gray-600">Travel, food, parenting, personal finance</p>
472
+ </div>
473
+ <div class="bg-gray-50 p-3 rounded-lg">
474
+ <h3 class="font-medium mb-2">Business</h3>
475
+ <p class="text-sm text-gray-600">Marketing, entrepreneurship, remote work</p>
476
+ </div>
477
+ <div class="bg-gray-50 p-3 rounded-lg">
478
+ <h3 class="font-medium mb-2">Hobbies</h3>
479
+ <p class="text-sm text-gray-600">Photography, gaming, DIY crafts</p>
480
+ </div>
481
+ </div>
482
+
483
+ <h2>Selecting a Blogging Platform</h2>
484
+ <p>For most beginners, we recommend starting with WordPress.org (not to be confused with WordPress.com). Here's why:</p>
485
+ <ul>
486
+ <li>Complete control over your site</li>
487
+ <li>Access to thousands of themes and plugins</li>
488
+ <li>Better monetization options</li>
489
+ <li>Strong SEO capabilities</li>
490
+ </ul>
491
+
492
+ <div class="bg-blue-50 p-4 rounded-lg my-4">
493
+ <h3 class="font-medium text-blue-800 mb-2">Pro Tip:</h3>
494
+ <p class="text-blue-700">While WordPress has a steeper learning curve than platforms like Wix or Squarespace, the long-term benefits far outweigh the initial setup complexity. Invest time in learning it—you won't regret it!</p>
495
+ </div>
496
+
497
+ <h2>Creating Your First Content</h2>
498
+ <p>Quality content is the backbone of any successful blog. Follow these guidelines for your first posts:</p>
499
+ <ol>
500
+ <li>Solve a specific problem for your readers</li>
501
+ <li>Use headings and subheadings to improve readability</li>
502
+ <li>Include images and multimedia where appropriate</li>
503
+ <li>Write in a conversational, engaging tone</li>
504
+ <li>Optimize for SEO (but write for humans first)</li>
505
+ </ol>
506
+
507
+ <div class="my-6">
508
+ <div class="aspect-w-16 aspect-h-9">
509
+ <iframe class="w-full h-96 rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
510
+ </div>
511
+ <p class="text-sm text-gray-500 mt-2 text-center">Video Tutorial: Blog Setup Walkthrough</p>
512
+ </div>
513
+
514
+ <h2>FAQs</h2>
515
+ <div class="space-y-4 mb-6">
516
+ <div class="border-b pb-4">
517
+ <h3 class="font-medium text-lg">How much does it cost to start a blog?</h3>
518
+ <p class="text-gray-600 mt-1">You can start a basic blog for under $100/year (domain + hosting). Premium themes and plugins may add to this cost, but they're not necessary when starting.</p>
519
+ </div>
520
+ <div class="border-b pb-4">
521
+ <h3 class="font-medium text-lg">How often should I publish new posts?</h3>
522
+ <p class="text-gray-600 mt-1">Consistency matters more than frequency. Start with 1-2 quality posts per month rather than daily posts that lack depth.</p>
523
+ </div>
524
+ <div>
525
+ <h3 class="font-medium text-lg">How long before my blog makes money?</h3>
526
+ <p class="text-gray-600 mt-1">Most blogs take 6-12 months to generate meaningful income. Focus on building an audience first—monetization will follow.</p>
527
+ </div>
528
+ </div>
529
+
530
+ <h2>Conclusion</h2>
531
+ <p>Starting a blog in 2024 is an exciting journey that combines creativity with technical skills. While the process may seem overwhelming at first, breaking it down into manageable steps (as we've done in this guide) makes it approachable for anyone.</p>
532
+
533
+ <p>Remember, every successful blogger started exactly where you are now. The key is to begin, stay consistent, and continuously learn and adapt. Your future self will thank you for taking that first step today!</p>
534
+
535
+ <div class="bg-purple-50 p-4 rounded-lg mt-6">
536
+ <h3 class="font-medium text-purple-800 mb-2">Next Steps:</h3>
537
+ <ul class="list-disc pl-5 text-purple-700 space-y-1">
538
+ <li>Register your domain name</li>
539
+ <li>Set up hosting and install WordPress</li>
540
+ <li>Write and publish your first post</li>
541
+ <li>Start promoting on social media</li>
542
+ </ul>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="flex justify-between">
548
+ <button id="backToStep3" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
549
+ <i class="fas fa-arrow-left mr-2"></i>
550
+ Back
551
+ </button>
552
+ <div class="flex space-x-3">
553
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
554
+ <i class="fas fa-redo mr-2"></i>
555
+ Regenerate
556
+ </button>
557
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium">
558
+ <i class="fas fa-save mr-2"></i>
559
+ Save & Publish
560
+ </button>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </main>
567
+ </div>
568
+
569
+ <!-- Loading Modal -->
570
+ <div id="loadingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
571
+ <div class="bg-white rounded-xl p-8 max-w-md w-full text-center">
572
+ <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-purple-100 flex items-center justify-center">
573
+ <i class="fas fa-spinner fa-spin text-purple-600 text-2xl"></i>
574
+ </div>
575
+ <h3 class="text-xl font-medium text-gray-800 mb-2">Generating Content</h3>
576
+ <p class="text-gray-600 mb-4">Our AI is crafting your perfect article. This may take a minute...</p>
577
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
578
+ <div id="progressBar" class="bg-purple-600 h-1.5 rounded-full" style="width: 0%"></div>
579
+ </div>
580
+ <p id="progressText" class="text-sm text-gray-500 mt-2">Initializing AI models...</p>
581
+ </div>
582
+ </div>
583
+
584
+ <script>
585
+ // DOM Elements
586
+ const sidebar = document.getElementById('sidebar');
587
+ const sidebarToggle = document.getElementById('sidebarToggle');
588
+ const closeSidebar = document.getElementById('closeSidebar');
589
+ const generateKeywordsBtn = document.getElementById('generateKeywordsBtn');
590
+ const generateTitlesBtn = document.getElementById('generateTitlesBtn');
591
+ const generateContentBtn = document.getElementById('generateContentBtn');
592
+ const backToStep1 = document.getElementById('backToStep1');
593
+ const backToStep2 = document.getElementById('backToStep2');
594
+ const backToStep3 = document.getElementById('backToStep3');
595
+ const step1 = document.getElementById('step1');
596
+ const step2 = document.getElementById('step2');
597
+ const step3 = document.getElementById('step3');
598
+ const step4 = document.getElementById('step4');
599
+ const loadingModal = document.getElementById('loadingModal');
600
+ const progressBar = document.getElementById('progressBar');
601
+ const progressText = document.getElementById('progressText');
602
+ const titleOptions = document.querySelectorAll('.title-option');
603
+
604
+ // Toggle sidebar on mobile
605
+ sidebarToggle.addEventListener('click', () => {
606
+ sidebar.classList.toggle('sidebar-closed');
607
+ sidebar.classList.toggle('sidebar-open');
608
+ });
609
+
610
+ closeSidebar.addEventListener('click', () => {
611
+ sidebar.classList.add('sidebar-closed');
612
+ sidebar.classList.remove('sidebar-open');
613
+ });
614
+
615
+ // Navigation between steps
616
+ generateKeywordsBtn.addEventListener('click', () => {
617
+ showLoadingModal();
618
+ setTimeout(() => {
619
+ hideLoadingModal();
620
+ step1.classList.add('hidden');
621
+ step2.classList.remove('hidden');
622
+ // Update progress bar
623
+ document.querySelector('.h-1.5.bg-purple-600').style.width = '50%';
624
+ document.querySelectorAll('.flex-1.text-center div')[1].classList.remove('bg-gray-200');
625
+ document.querySelectorAll('.flex-1.text-center div')[1].classList.add('bg-purple-600', 'text-white');
626
+ document.querySelectorAll('.flex-1.text-center p')[1].classList.remove('text-gray-600');
627
+ document.querySelectorAll('.flex-1.text-center p')[1].classList.add('text-purple-600');
628
+ }, 2500);
629
+ });
630
+
631
+ generateTitlesBtn.addEventListener('click', () => {
632
+ showLoadingModal();
633
+ setTimeout(() => {
634
+ hideLoadingModal();
635
+ step2.classList.add('hidden');
636
+ step3.classList.remove('hidden');
637
+ // Update progress bar
638
+ document.querySelector('.h-1.5.bg-purple-600').style.width = '75%';
639
+ document.querySelectorAll('.flex-1.text-center div')[2].classList.remove('bg-gray-200');
640
+ document.querySelectorAll('.flex-1.text-center div')[2].classList.add('bg-purple-600', 'text-white');
641
+ document.querySelectorAll('.flex-1.text-center p')[2].classList.remove('text-gray-600');
642
+ document.querySelectorAll('.flex-1.text-center p')[2].classList.add('text-purple-600');
643
+ }, 2500);
644
+ });
645
+
646
+ generateContentBtn.addEventListener('click', () => {
647
+ showLoadingModal();
648
+ simulateProgress();
649
+ setTimeout(() => {
650
+ hideLoadingModal();
651
+ step3.classList.add('hidden');
652
+ step4.classList.remove('hidden');
653
+ // Update progress bar
654
+ document.querySelector('.h-1.5.bg-purple-600').style.width = '100%';
655
+ document.querySelectorAll('.flex-1.text-center div')[3].classList.remove('bg-gray-200');
656
+ document.querySelectorAll('.flex-1.text-center div')[3].classList.add('bg-purple-600', 'text-white');
657
+ document.querySelectorAll('.flex-1.text-center p')[3].classList.remove('text-gray-600');
658
+ document.querySelectorAll('.flex-1.text-center p')[3].classList.add('text-purple-600');
659
+ }, 8000);
660
+ });
661
+
662
+ backToStep1.addEventListener('click', () => {
663
+ step2.classList.add('hidden');
664
+ step1.classList.remove('hidden');
665
+ // Update progress bar
666
+ document.querySelector('.h-1.5.bg-purple-600').style.width = '25%';
667
+ document.querySelectorAll('.flex-1.text-center div')[1].classList.remove('bg-purple-600', 'text-white');
668
+ document.querySelectorAll('.flex-1.text-center div')[1].classList.add('bg-gray-200');
669
+ document.querySelectorAll('.flex-1.text-center p')[1].classList.remove('text-purple-600');
670
+ document.querySelectorAll('.flex-1.text-center p')[1].classList.add('text-gray-600');
671
+ });
672
+
673
+ backToStep2.addEventListener('click', () => {
674
+ step3.classList.add('hidden');
675
+ step2.classList.remove('hidden');
676
+ // Update progress bar
677
+ document.querySelector('.h-1.5.bg-purple-600').style.width = '50%';
678
+ document.querySelectorAll('.flex-1.text-center div')[2].classList.remove('bg-purple-600', 'text-white');
679
+ document.querySelectorAll('.flex-1.text-center div')[2].classList.add('bg-gray-200');
680
+ document.querySelectorAll('.flex-1.text-center p')[2].classList.remove('text-purple-600');
681
+ document.querySelectorAll('.flex-1.text-center p')[2].classList.add('text-gray-600');
682
+ });
683
+
684
+ backToStep3.addEventListener('click', () => {
685
+ step4.classList.add('hidden');
686
+ step3.classList.remove('hidden');
687
+ // Update progress bar
688
+ document.querySelector('.h-1.5.bg-purple-600').style.width = '75%';
689
+ document.querySelectorAll('.flex-1.text-center div')[3].classList.remove('bg-purple-600', 'text-white');
690
+ document.querySelectorAll('.flex-1.text-center div')[3].classList.add('bg-gray-200');
691
+ document.querySelectorAll('.flex-1.text-center p')[3].classList.remove('text-purple-600');
692
+ document.querySelectorAll('.flex-1.text-center p')[3].classList.add('text-gray-600');
693
+ });
694
+
695
+ // Title selection
696
+ titleOptions.forEach(option => {
697
+ option.addEventListener('click', function() {
698
+ // Remove selected class from all options
699
+ titleOptions.forEach(opt => {
700
+ opt.classList.remove('border-purple-600', 'bg-purple-50');
701
+ opt.querySelector('input[type="radio"]').checked = false;
702
+ });
703
+
704
+ // Add selected class to clicked option
705
+ this.classList.add('border-purple-600', 'bg-purple-50');
706
+ this.querySelector('input[type="radio"]').checked = true;
707
+ });
708
+ });
709
+
710
+ // Keyword chip selection
711
+ document.querySelectorAll('.keyword-chip').forEach(chip => {
712
+ chip.addEventListener('click', function() {
713
+ if (this.classList.contains('bg-gray-100')) {
714
+ this.classList.remove('bg-gray-100', 'hover:bg-gray-200');
715
+ this.classList.add('bg-purple-100', 'text-purple-800');
716
+ } else {
717
+ this.classList.remove('bg-purple-100', 'text-purple-800');
718
+ this.classList.add('bg-gray-100', 'hover:bg-gray-200');
719
+ }
720
+ });
721
+ });
722
+
723
+ // Loading modal functions
724
+ function showLoadingModal() {
725
+ loadingModal.classList.remove('hidden');
726
+ progressBar.style.width = '0%';
727
+ progressText.textContent = 'Initializing AI models...';
728
+ }
729
+
730
+ function hideLoadingModal() {
731
+ loadingModal.classList.add('hidden');
732
+ }
733
+
734
+ function simulateProgress() {
735
+ let progress = 0;
736
+ const interval = setInterval(() => {
737
+ progress += 5;
738
+ progressBar.style.width = `${progress}%`;
739
+
740
+ if (progress <= 20) {
741
+ progressText.textContent = 'Analyzing keywords...';
742
+ } else if (progress <= 40) {
743
+ progressText.textContent = 'Researching topic...';
744
+ } else if (progress <= 60) {
745
+ progressText.textContent = 'Generating outline...';
746
+ } else if (progress <= 80) {
747
+ progressText.textContent = 'Writing content...';
748
+ } else {
749
+ progressText.textContent = 'Finalizing article...';
750
+ }
751
+
752
+ if (progress >= 100) {
753
+ clearInterval(interval);
754
+ }
755
+ }, 300);
756
+ }
757
+ </script>
758
+ <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=yeiayel/contentforge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
759
+ </html>