Hugging Face's logo

Spaces:
Zx444
/
HTML_Beautifier
Running

App Files Community
Zx444 commited on
Commit
927c5e0
·
verified ·
1 Parent(s): 663b536

- Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +356 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Agibalaja
3
- emoji: 💻
4
- colorFrom: indigo
5
- colorTo: yellow
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: agibalaja
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: blue
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,357 @@
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>Agi Balaja - Linguistics & Technology Blog</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ .article-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ .category-badge {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .category-badge:hover {
27
+ transform: scale(1.05);
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 font-sans">
32
+ <!-- Navigation -->
33
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-16">
36
+ <div class="flex items-center">
37
+ <a href="#" class="flex items-center">
38
+ <i data-feather="book-open" class="text-indigo-600 mr-2"></i>
39
+ <span class="text-xl font-bold gradient-text">Agi Balaja</span>
40
+ </a>
41
+ </div>
42
+ <div class="hidden md:flex items-center space-x-8">
43
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a>
44
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Articles</a>
45
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Categories</a>
46
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a>
47
+ </div>
48
+ <div class="md:hidden flex items-center">
49
+ <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
50
+ <i data-feather="menu"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </nav>
56
+
57
+ <!-- Hero Section -->
58
+ <header class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
60
+ <h1 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">Exploring Linguistics & Technology</h1>
61
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
62
+ Discover insightful articles about language, technology, and everything in between.
63
+ </p>
64
+ <div class="flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200">
65
+ <a href="#articles" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
66
+ Browse Articles
67
+ </a>
68
+ <a href="#" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">
69
+ Subscribe
70
+ </a>
71
+ </div>
72
+ </div>
73
+ </header>
74
+
75
+ <!-- Featured Articles -->
76
+ <section id="articles" class="py-16 bg-white">
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
78
+ <div class="text-center mb-12">
79
+ <h2 class="text-3xl font-bold text-gray-900 mb-4" data-aos="fade-up">Featured Articles</h2>
80
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
81
+ Explore our latest and most popular content
82
+ </p>
83
+ </div>
84
+
85
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
86
+ <!-- Article 1 -->
87
+ <article class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300" data-aos="fade-up">
88
+ <a href="#">
89
+ <img src="http://static.photos/education/1024x576/1" alt="Phonology" class="w-full h-48 object-cover">
90
+ </a>
91
+ <div class="p-6">
92
+ <div class="flex items-center mb-4">
93
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Bahasa</span>
94
+ <span class="text-gray-500 text-sm ml-auto">June 30, 2025</span>
95
+ </div>
96
+ <h3 class="text-xl font-bold mb-3 hover:text-indigo-600 transition">
97
+ <a href="#">Memahami Fonologi: Ilmu di Balik Bunyi Bahasa</a>
98
+ </h3>
99
+ <p class="text-gray-600 mb-4">Memahami Fonologi: Ilmu di Balik Bunyi Bahasa Bahasa adalah salah satu aspek paling menakjubkan dari kehidupan manusia...</p>
100
+ <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition">
101
+ Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
102
+ </a>
103
+ </div>
104
+ </article>
105
+
106
+ <!-- Article 2 -->
107
+ <article class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300" data-aos="fade-up" data-aos-delay="100">
108
+ <a href="#">
109
+ <img src="http://static.photos/technology/1024x576/2" alt="WhatsApp Bot" class="w-full h-48 object-cover">
110
+ </a>
111
+ <div class="p-6">
112
+ <div class="flex items-center mb-4">
113
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Tutorial</span>
114
+ <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
115
+ </div>
116
+ <h3 class="text-xl font-bold mb-3 hover:text-indigo-600 transition">
117
+ <a href="#">Membuat Bot Auto Reply WA menggunakan Google App Script</a>
118
+ </h3>
119
+ <p class="text-gray-600 mb-4">Untuk membuat bot auto reply WhatsApp menggunakan Google Apps Script, Anda perlu mengikuti beberapa langkah penting...</p>
120
+ <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition">
121
+ Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
122
+ </a>
123
+ </div>
124
+ </article>
125
+
126
+ <!-- Article 3 -->
127
+ <article class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300" data-aos="fade-up" data-aos-delay="200">
128
+ <a href="#">
129
+ <img src="http://static.photos/office/1024x576/3" alt="Microsoft Word" class="w-full h-48 object-cover">
130
+ </a>
131
+ <div class="p-6">
132
+ <div class="flex items-center mb-4">
133
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Ms Word</span>
134
+ <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
135
+ </div>
136
+ <h3 class="text-xl font-bold mb-3 hover:text-indigo-600 transition">
137
+ <a href="#">Cara Menghilangkan Garis Merah di Word</a>
138
+ </h3>
139
+ <p class="text-gray-600 mb-4">Cara Menghilangkan Garis Merah di Word, Tak Sampai Semenit. Garis merah di Microsoft Word biasanya muncul sebagai...</p>
140
+ <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition">
141
+ Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
142
+ </a>
143
+ </div>
144
+ </article>
145
+ </div>
146
+
147
+ <div class="text-center mt-12">
148
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition">
149
+ View All Articles
150
+ <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
151
+ </a>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- Categories Section -->
157
+ <section class="py-16 bg-gray-50">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="text-center mb-12">
160
+ <h2 class="text-3xl font-bold text-gray-900 mb-4" data-aos="fade-up">Explore Categories</h2>
161
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
162
+ Browse articles by category
163
+ </p>
164
+ </div>
165
+
166
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
167
+ <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center" data-aos="fade-up">
168
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
169
+ <i data-feather="book" class="text-blue-600 w-8 h-8"></i>
170
+ </div>
171
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Bahasa</h3>
172
+ <p class="text-sm text-gray-500">12 Articles</p>
173
+ </a>
174
+
175
+ <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center" data-aos="fade-up" data-aos-delay="100">
176
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
177
+ <i data-feather="code" class="text-green-600 w-8 h-8"></i>
178
+ </div>
179
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Tutorial</h3>
180
+ <p class="text-sm text-gray-500">8 Articles</p>
181
+ </a>
182
+
183
+ <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center" data-aos="fade-up" data-aos-delay="200">
184
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
185
+ <i data-feather="file-text" class="text-purple-600 w-8 h-8"></i>
186
+ </div>
187
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Ms Word</h3>
188
+ <p class="text-sm text-gray-500">5 Articles</p>
189
+ </a>
190
+
191
+ <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center" data-aos="fade-up" data-aos-delay="300">
192
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
193
+ <i data-feather="info" class="text-yellow-600 w-8 h-8"></i>
194
+ </div>
195
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Pengetahuan</h3>
196
+ <p class="text-sm text-gray-500">10 Articles</p>
197
+ </a>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Recent Articles -->
203
+ <section class="py-16 bg-white">
204
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
205
+ <div class="text-center mb-12">
206
+ <h2 class="text-3xl font-bold text-gray-900 mb-4" data-aos="fade-up">Recent Articles</h2>
207
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
208
+ Stay updated with our latest content
209
+ </p>
210
+ </div>
211
+
212
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
213
+ <!-- Article 4 -->
214
+ <article class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up">
215
+ <a href="#">
216
+ <img src="http://static.photos/education/1024x576/4" alt="Linguistics" class="w-full h-48 object-cover">
217
+ </a>
218
+ <div class="p-6">
219
+ <div class="flex items-center mb-3">
220
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Bahasa</span>
221
+ <span class="text-gray-500 text-sm ml-auto">June 25, 2025</span>
222
+ </div>
223
+ <h3 class="text-lg font-bold mb-2 hover:text-indigo-600 transition">
224
+ <a href="#">Pengertian Linguistik, Ciri, Tatanan, Aliran, Jenis dan Hakikat</a>
225
+ </h3>
226
+ <p class="text-gray-600 text-sm mb-3">Pengertian Linguistik, Ciri, Tatanan, Aliran, Jenis & Hakikat Pengertian Linguistik Secara umum lingu...</p>
227
+ <a href="#" class="text-indigo-600 text-sm font-medium inline-flex items-center hover:text-indigo-800 transition">
228
+ Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
229
+ </a>
230
+ </div>
231
+ </article>
232
+
233
+ <!-- Article 5 -->
234
+ <article class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100">
235
+ <a href="#">
236
+ <img src="http://static.photos/education/1024x576/5" alt="Language Extinction" class="w-full h-48 object-cover">
237
+ </a>
238
+ <div class="p-6">
239
+ <div class="flex items-center mb-3">
240
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Bahasa</span>
241
+ <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
242
+ </div>
243
+ <h3 class="text-lg font-bold mb-2 hover:text-indigo-600 transition">
244
+ <a href="#">Kajian Musnahnya sebuah bahasa</a>
245
+ </h3>
246
+ <p class="text-gray-600 text-sm mb-3">Kajian Musnahnya sebuah bahasa Musnahnya Sebuah Bahasa Bahasa merupakan aspek penting dalam...</p>
247
+ <a href="#" class="text-indigo-600 text-sm font-medium inline-flex items-center hover:text-indigo-800 transition">
248
+ Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
249
+ </a>
250
+ </div>
251
+ </article>
252
+
253
+ <!-- Article 6 -->
254
+ <article class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200">
255
+ <a href="#">
256
+ <img src="http://static.photos/technology/1024x576/6" alt="Blog Visitors" class="w-full h-48 object-cover">
257
+ </a>
258
+ <div class="p-6">
259
+ <div class="flex items-center mb-3">
260
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Tutorial</span>
261
+ <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
262
+ </div>
263
+ <h3 class="text-lg font-bold mb-2 hover:text-indigo-600 transition">
264
+ <a href="#">Cara Meningkatkan pengunjung Blog</a>
265
+ </h3>
266
+ <p class="text-gray-600 text-sm mb-3">Cara Meningkatkan pengunjung Blog Untuk meningkatkan pengunjung blog secara organik, b...</p>
267
+ <a href="#" class="text-indigo-600 text-sm font-medium inline-flex items-center hover:text-indigo-800 transition">
268
+ Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
269
+ </a>
270
+ </div>
271
+ </article>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Newsletter -->
277
+ <section class="py-16 bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
278
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
279
+ <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Stay Updated</h2>
280
+ <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
281
+ Subscribe to our newsletter to get the latest articles delivered to your inbox.
282
+ </p>
283
+ <form class="max-w-md mx-auto" data-aos="fade-up" data-aos-delay="200">
284
+ <div class="flex">
285
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
286
+ <button type="submit" class="bg-indigo-800 hover:bg-indigo-900 px-6 py-3 rounded-r-lg font-medium transition">
287
+ Subscribe
288
+ </button>
289
+ </div>
290
+ </form>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Footer -->
295
+ <footer class="bg-gray-900 text-white py-12">
296
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
297
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
298
+ <div>
299
+ <h3 class="text-lg font-bold mb-4 flex items-center">
300
+ <i data-feather="book-open" class="mr-2"></i> Agi Balaja
301
+ </h3>
302
+ <p class="text-gray-400">
303
+ Exploring the intersection of linguistics and technology through insightful articles.
304
+ </p>
305
+ </div>
306
+ <div>
307
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
308
+ <ul class="space-y-2">
309
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
310
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Articles</a></li>
311
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Categories</a></li>
312
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
313
+ </ul>
314
+ </div>
315
+ <div>
316
+ <h4 class="text-lg font-bold mb-4">Categories</h4>
317
+ <ul class="space-y-2">
318
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Bahasa</a></li>
319
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorial</a></li>
320
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Ms Word</a></li>
321
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pengetahuan</a></li>
322
+ </ul>
323
+ </div>
324
+ <div>
325
+ <h4 class="text-lg font-bold mb-4">Connect</h4>
326
+ <div class="flex space-x-4">
327
+ <a href="#" class="text-gray-400 hover:text-white transition">
328
+ <i data-feather="facebook"></i>
329
+ </a>
330
+ <a href="#" class="text-gray-400 hover:text-white transition">
331
+ <i data-feather="twitter"></i>
332
+ </a>
333
+ <a href="#" class="text-gray-400 hover:text-white transition">
334
+ <i data-feather="instagram"></i>
335
+ </a>
336
+ <a href="#" class="text-gray-400 hover:text-white transition">
337
+ <i data-feather="linkedin"></i>
338
+ </a>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
343
+ <p>&copy; 2025 Agi Balaja. All rights reserved.</p>
344
+ </div>
345
+ </div>
346
+ </footer>
347
+
348
+ <script>
349
+ AOS.init({
350
+ duration: 800,
351
+ easing: 'ease-in-out',
352
+ once: true
353
+ });
354
+ feather.replace();
355
+ </script>
356
+ </body>
357
  </html>
prompts.txt ADDED
File without changes