Spaces:

Zx444
/

HTML_Beautifier

Running

App Files Files Community

Zx444 commited on Sep 19, 2025

Commit

b80a08f

verified ·

1 Parent(s): 42b7c85

- Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +198 -351

index.html CHANGED Viewed

@@ -1,357 +1,204 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Agi Balaja - Linguistics & Technology Blog</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <style>
-        .gradient-text {
-            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-        }
-        .article-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        }
-        .category-badge {
-            transition: all 0.3s ease;
-        }
-        .category-badge:hover {
-            transform: scale(1.05);
-        }
-    </style>
 </head>
-<body class="bg-gray-50 font-sans">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-sm sticky top-0 z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex items-center">
-                    <a href="#" class="flex items-center">
-                        <i data-feather="book-open" class="text-indigo-600 mr-2"></i>
-                        <span class="text-xl font-bold gradient-text">Agi Balaja</span>
-                    </a>
-                </div>
-                <div class="hidden md:flex items-center space-x-8">
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a>
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Articles</a>
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Categories</a>
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a>
-                </div>
-                <div class="md:hidden flex items-center">
-                    <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
-                        <i data-feather="menu"></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </nav>
-    <!-- Hero Section -->
-    <header class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h1 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">Exploring Linguistics & Technology</h1>
-            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
-                Discover insightful articles about language, technology, and everything in between.
-            </p>
-            <div class="flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200">
-                <a href="#articles" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
-                    Browse Articles
-                </a>
-                <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">
-                    Subscribe
-                </a>
-            </div>
-        </div>
-    </header>
-    <!-- Featured Articles -->
-    <section id="articles" class="py-16 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-gray-900 mb-4" data-aos="fade-up">Featured Articles</h2>
-                <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
-                    Explore our latest and most popular content
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Article 1 -->
-                <article class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300" data-aos="fade-up">
-                    <a href="#">
-                        <img src="http://static.photos/education/1024x576/1" alt="Phonology" class="w-full h-48 object-cover">
-                    </a>
-                    <div class="p-6">
-                        <div class="flex items-center mb-4">
-                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Bahasa</span>
-                            <span class="text-gray-500 text-sm ml-auto">June 30, 2025</span>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3 hover:text-indigo-600 transition">
-                            <a href="#">Memahami Fonologi: Ilmu di Balik Bunyi Bahasa</a>
-                        </h3>
-                        <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>
-                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition">
-                            Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </article>
-                <!-- Article 2 -->
-                <article class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300" data-aos="fade-up" data-aos-delay="100">
-                    <a href="#">
-                        <img src="http://static.photos/technology/1024x576/2" alt="WhatsApp Bot" class="w-full h-48 object-cover">
-                    </a>
-                    <div class="p-6">
-                        <div class="flex items-center mb-4">
-                            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Tutorial</span>
-                            <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3 hover:text-indigo-600 transition">
-                            <a href="#">Membuat Bot Auto Reply WA menggunakan Google App Script</a>
-                        </h3>
-                        <p class="text-gray-600 mb-4">Untuk membuat bot auto reply WhatsApp menggunakan Google Apps Script, Anda perlu mengikuti beberapa langkah penting...</p>
-                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition">
-                            Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </article>
-                <!-- Article 3 -->
-                <article class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300" data-aos="fade-up" data-aos-delay="200">
-                    <a href="#">
-                        <img src="http://static.photos/office/1024x576/3" alt="Microsoft Word" class="w-full h-48 object-cover">
-                    </a>
-                    <div class="p-6">
-                        <div class="flex items-center mb-4">
-                            <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Ms Word</span>
-                            <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3 hover:text-indigo-600 transition">
-                            <a href="#">Cara Menghilangkan Garis Merah di Word</a>
-                        </h3>
-                        <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>
-                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition">
-                            Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </article>
-            </div>
-            <div class="text-center mt-12">
-                <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">
-                    View All Articles
-                    <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
-                </a>
-            </div>
-        </div>
-    </section>
-    <!-- Categories Section -->
-    <section class="py-16 bg-gray-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-gray-900 mb-4" data-aos="fade-up">Explore Categories</h2>
-                <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
-                    Browse articles by category
-                </p>
-            </div>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-                <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center" data-aos="fade-up">
-                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="book" class="text-blue-600 w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-1">Bahasa</h3>
-                    <p class="text-sm text-gray-500">12 Articles</p>
-                </a>
-                <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">
-                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="code" class="text-green-600 w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-1">Tutorial</h3>
-                    <p class="text-sm text-gray-500">8 Articles</p>
-                </a>
-                <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">
-                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="file-text" class="text-purple-600 w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-1">Ms Word</h3>
-                    <p class="text-sm text-gray-500">5 Articles</p>
-                </a>
-                <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">
-                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="info" class="text-yellow-600 w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-1">Pengetahuan</h3>
-                    <p class="text-sm text-gray-500">10 Articles</p>
-                </a>
-            </div>
-        </div>
-    </section>
-    <!-- Recent Articles -->
-    <section class="py-16 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-gray-900 mb-4" data-aos="fade-up">Recent Articles</h2>
-                <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
-                    Stay updated with our latest content
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Article 4 -->
-                <article class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up">
-                    <a href="#">
-                        <img src="http://static.photos/education/1024x576/4" alt="Linguistics" class="w-full h-48 object-cover">
-                    </a>
-                    <div class="p-6">
-                        <div class="flex items-center mb-3">
-                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Bahasa</span>
-                            <span class="text-gray-500 text-sm ml-auto">June 25, 2025</span>
-                        </div>
-                        <h3 class="text-lg font-bold mb-2 hover:text-indigo-600 transition">
-                            <a href="#">Pengertian Linguistik, Ciri, Tatanan, Aliran, Jenis dan Hakikat</a>
-                        </h3>
-                        <p class="text-gray-600 text-sm mb-3">Pengertian Linguistik, Ciri, Tatanan, Aliran, Jenis & Hakikat Pengertian Linguistik Secara umum lingu...</p>
-                        <a href="#" class="text-indigo-600 text-sm font-medium inline-flex items-center hover:text-indigo-800 transition">
-                            Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </article>
-                <!-- Article 5 -->
-                <article class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100">
-                    <a href="#">
-                        <img src="http://static.photos/education/1024x576/5" alt="Language Extinction" class="w-full h-48 object-cover">
-                    </a>
-                    <div class="p-6">
-                        <div class="flex items-center mb-3">
-                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Bahasa</span>
-                            <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
-                        </div>
-                        <h3 class="text-lg font-bold mb-2 hover:text-indigo-600 transition">
-                            <a href="#">Kajian Musnahnya sebuah bahasa</a>
-                        </h3>
-                        <p class="text-gray-600 text-sm mb-3">Kajian Musnahnya sebuah bahasa Musnahnya Sebuah Bahasa Bahasa merupakan aspek penting dalam...</p>
-                        <a href="#" class="text-indigo-600 text-sm font-medium inline-flex items-center hover:text-indigo-800 transition">
-                            Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </article>
-                <!-- Article 6 -->
-                <article class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200">
-                    <a href="#">
-                        <img src="http://static.photos/technology/1024x576/6" alt="Blog Visitors" class="w-full h-48 object-cover">
-                    </a>
-                    <div class="p-6">
-                        <div class="flex items-center mb-3">
-                            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded category-badge">Tutorial</span>
-                            <span class="text-gray-500 text-sm ml-auto">Oct 04, 2023</span>
-                        </div>
-                        <h3 class="text-lg font-bold mb-2 hover:text-indigo-600 transition">
-                            <a href="#">Cara Meningkatkan pengunjung Blog</a>
-                        </h3>
-                        <p class="text-gray-600 text-sm mb-3">Cara Meningkatkan pengunjung Blog Untuk meningkatkan pengunjung blog secara organik, b...</p>
-                        <a href="#" class="text-indigo-600 text-sm font-medium inline-flex items-center hover:text-indigo-800 transition">
-                            Read more <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </article>
-            </div>
-        </div>
-    </section>
-    <!-- Newsletter -->
-    <section class="py-16 bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Stay Updated</h2>
-            <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
-                Subscribe to our newsletter to get the latest articles delivered to your inbox.
-            </p>
-            <form class="max-w-md mx-auto" data-aos="fade-up" data-aos-delay="200">
-                <div class="flex">
-                    <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
-                    <button type="submit" class="bg-indigo-800 hover:bg-indigo-900 px-6 py-3 rounded-r-lg font-medium transition">
-                        Subscribe
-                    </button>
-                </div>
-            </form>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <h3 class="text-lg font-bold mb-4 flex items-center">
-                        <i data-feather="book-open" class="mr-2"></i> Agi Balaja
-                    </h3>
-                    <p class="text-gray-400">
-                        Exploring the intersection of linguistics and technology through insightful articles.
-                    </p>
-                </div>
-                <div>
-                    <h4 class="text-lg font-bold mb-4">Quick Links</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Articles</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Categories</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-lg font-bold mb-4">Categories</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Bahasa</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorial</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Ms Word</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Pengetahuan</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-lg font-bold mb-4">Connect</h4>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i data-feather="facebook"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i data-feather="twitter"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i data-feather="instagram"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i data-feather="linkedin"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2025 Agi Balaja. All rights reserved.</p>
-            </div>
-        </div>
-    </footer>
-    <script>
-        AOS.init({
-            duration: 800,
-            easing: 'ease-in-out',
-            once: true
         });
-        feather.replace();
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="id">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Beautify HTML - Versi Gabungan</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.9/beautify-html.min.js"></script>
 </head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6 font-sans">
+  <div class="w-full max-w-6xl bg-white rounded-xl shadow-xl border border-gray-200">
+    <!-- Header -->
+    <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-4 rounded-t-xl">
+      <h1 class="text-2xl font-bold">🤖 HTML Beautifier & Cleaner</h1>
+      <p class="text-sm opacity-90">Versi gabungan Tailwind + gaya ala BeautifyTools</p>
+    </div>
+    <!-- Tombol aksi -->
+    <div class="p-4 flex flex-wrap gap-3 border-b border-gray-200 bg-gray-50">
+      <button onclick="perbaikiHtml()"
+              class="px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
+        Perbaiki
+      </button>
+      <button onclick="beautifyHtml()"
+              class="px-4 py-2 bg-purple-600 text-white rounded-lg shadow hover:bg-purple-700 transition">
+        Beautify
+      </button>
+      <button onclick="copyOutput()"
+              class="px-4 py-2 bg-green-600 text-white rounded-lg shadow hover:bg-green-700 transition">
+        Copy
+      </button>
+      <button onclick="reviewOutput()"
+              class="px-4 py-2 bg-yellow-500 text-white rounded-lg shadow hover:bg-yellow-600 transition">
+        Preview
+      </button>
+      <button onclick="clearInput()"
+              class="px-4 py-2 bg-red-600 text-white rounded-lg shadow hover:bg-red-700 transition">
+        Clear
+      </button>
+    </div>
+    <!-- Tabs -->
+    <div class="px-6 pt-4">
+      <div class="flex space-x-2 border-b border-gray-200">
+        <button id="tab-input"
+                class="tab-btn px-4 py-2 font-medium border-b-2 border-blue-600 text-blue-600 bg-white rounded-t-lg">
+          Input
+        </button>
+        <button id="tab-output"
+                class="tab-btn px-4 py-2 font-medium border-b-2 border-transparent text-gray-600 hover:text-blue-600">
+          Hasil Script
+        </button>
+        <button id="tab-preview"
+                class="tab-btn px-4 py-2 font-medium border-b-2 border-transparent text-gray-600 hover:text-blue-600">
+          Live Preview
+        </button>
+      </div>
+    </div>
+    <!-- Panels -->
+    <div class="p-6">
+      <!-- Input -->
+      <div id="panel-input" class="tab-panel">
+        <textarea id="inputHtml"
+                  class="w-full h-72 p-3 border rounded-lg shadow-inner font-mono text-sm focus:ring focus:ring-blue-300"
+                  placeholder="<h1>Halo Dunia"></textarea>
+      </div>
+      <!-- Output -->
+      <div id="panel-output" class="tab-panel hidden">
+        <textarea id="outputHtml"
+                  class="w-full h-96 p-3 border rounded-lg shadow-inner bg-gray-50 font-mono text-sm"
+                  readonly></textarea>
+      </div>
+      <!-- Preview -->
+      <div id="panel-preview" class="tab-panel hidden">
+        <iframe id="previewFrame"
+                class="w-full h-96 border rounded-lg shadow bg-white"></iframe>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Tab system
+    const tabs = ["input", "output", "preview"];
+    function switchTab(name) {
+      tabs.forEach(t => {
+        const btn = document.getElementById(`tab-${t}`);
+        const panel = document.getElementById(`panel-${t}`);
+        if (t === name) {
+          btn.classList.add("border-blue-600","text-blue-600","bg-white","rounded-t-lg");
+          btn.classList.remove("border-transparent","text-gray-600");
+          panel.classList.remove("hidden");
+        } else {
+          btn.classList.remove("border-blue-600","text-blue-600","bg-white","rounded-t-lg");
+          btn.classList.add("border-transparent","text-gray-600");
+          panel.classList.add("hidden");
+        }
+      });
+    }
+    switchTab("input");
+    document.getElementById("tab-input").addEventListener("click", () => switchTab("input"));
+    document.getElementById("tab-output").addEventListener("click", () => switchTab("output"));
+    document.getElementById("tab-preview").addEventListener("click", () => { ensurePreview(); switchTab("preview"); });
+    // Logic utama
+    function perbaikiHtml() {
+      const input = document.getElementById("inputHtml").value.trim();
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(input || "<!DOCTYPE html><html><head></head><body></body></html>", "text/html");
+      let cleaned = "<!DOCTYPE html>\n" + doc.documentElement.outerHTML;
+      const needs = [];
+      if (!doc.querySelector("meta[charset]")) needs.push("  <meta charset='UTF-8'>");
+      if (!doc.querySelector("meta[name='viewport']")) needs.push("  <meta name='viewport' content='width=device-width, initial-scale=1.0'>");
+      if (!doc.querySelector("title")) needs.push("  <title>DokumenBaru</title>");
+      if (needs.length) cleaned = cleaned.replace("</head>", needs.join("\n") + "\n</head>");
+      document.getElementById("outputHtml").value = html_beautify(cleaned, {
+        indent_size: 2,
+        wrap_line_length: 100,
+        preserve_newlines: true
+      });
+      switchTab("output");
+    }
+    function beautifyHtml() {
+      const output = document.getElementById("outputHtml");
+      if (!output.value.trim()) {
+        alert("⚠️ Tidak ada hasil untuk Beautify. Klik Perbaiki dulu!");
+        return;
+      }
+      const beautified = html_beautify(output.value, {
+        indent_size: 2,
+        wrap_line_length: 100,
+        preserve_newlines: true
+      });
+      output.value = beautified;
+      switchTab("output");
+    }
+    function copyOutput() {
+      const output = document.getElementById("outputHtml");
+      if (!output.value.trim()) {
+        alert("⚠️ Tidak ada hasil untuk dicopy. Klik Perbaiki dulu!");
+        return;
+      }
+      navigator.clipboard.writeText(output.value)
+        .then(() => alert("✅ Script HTML berhasil dicopy!"))
+        .catch(() => {
+          output.select();
+          document.execCommand("copy");
+          alert("✅ Script HTML berhasil dicopy (fallback)!");
         });
+    }
+    function ensurePreview() {
+      const output = document.getElementById("outputHtml").value.trim();
+      const iframe = document.getElementById("previewFrame");
+      if (output) {
+        iframe.srcdoc = output;
+      } else {
+        const raw = document.getElementById("inputHtml").value.trim();
+        iframe.srcdoc = raw || "<h3 style='font-family:sans-serif'>Tidak ada konten untuk dipreview</h3>";
+      }
+    }
+    function reviewOutput() {
+      ensurePreview();
+      switchTab("preview");
+    }
+    function clearInput() {
+      document.getElementById("inputHtml").value = "";
+      document.getElementById("outputHtml").value = "";
+      switchTab("input");
+    }
+    function downloadOutput() {
+      const output = document.getElementById("outputHtml").value;
+      if (!output.trim()) {
+        alert("⚠️ Tidak ada hasil untuk diunduh.");
+        return;
+      }
+      const blob = new Blob([output], { type: "text/html" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "hasil.html";
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+    // Auto focus ke textarea input saat load
+    window.onload = () => document.getElementById("inputHtml").focus();
+  </script>
 </body>
 </html>