automatic article format tool code

 इस कोड में जैसे ही यूजर कोई भी सादा आर्टिकल (Plain Text) पेस्ट करेगा, यह टूल ऑटोमैटिक रूप से:

पहली लाइन को Main Heading (<h1>) बना देगा।

छोटे और महत्वपूर्ण टाइटल्स को Subheading (<h2>) या Normal Heading (<h3>) में बदल देगा।

बाकी पूरे टेक्स्ट को व्यवस्थित Normal Paragraphs (<p>) में बदल देगा।

साथ ही Live Preview और Copy HTML Code का बटन भी देगा ताकि आप इसे सीधे ब्लॉगर पोस्ट में इस्तेमाल कर सकें।

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Article Auto Formatter Tool</title> <style> * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .tool-container { max-width: 900px; margin: 20px auto; padding: 25px; background: #ffffff; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); border: 1px solid #e1e8ed; } .tool-header { text-align: center; margin-bottom: 25px; } .tool-header h2 { color: #1a73e8; margin-bottom: 8px; } .tool-header p { color: #666; font-size: 14px; } .input-section, .output-section { margin-bottom: 20px; } label { font-weight: 600; display: block; margin-bottom: 8px; color: #333; } textarea { width: 100%; height: 180px; padding: 12px; border: 1px solid #ccc; border-radius: 8px; resize: vertical; font-size: 15px; outline: none; transition: 0.3s; } textarea:focus { border-color: #1a73e8; box-shadow: 0 0 5px rgba(26,115,232,0.3); } .btn-group { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } button { padding: 10px 20px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.2s; } .btn-copy { background-color: #1a73e8; color: white; } .btn-copy:hover { background-color: #1557b0; } .btn-clear { background-color: #ea4335; color: white; } .btn-clear:hover { background-color: #c5221f; } .preview-box { border: 1px solid #e1e8ed; padding: 20px; border-radius: 8px; background: #fafafa; min-height: 150px; } /* Formatted Output Styling */ .preview-box h1 { color: #111; font-size: 26px; border-bottom: 2px solid #1a73e8; padding-bottom: 8px; margin-top: 0; } .preview-box h2 { color: #222; font-size: 21px; margin-top: 20px; color: #1a73e8; } .preview-box h3 { color: #333; font-size: 18px; margin-top: 15px; } .preview-box p { color: #444; line-height: 1.7; font-size: 15px; margin-bottom: 12px; } </style> </head> <body> <div class="tool-container"> <div class="tool-header"> <h2>Automatic Article Formatter Tool</h2> <p>अपना सादा आर्टिकल नीचे पेस्ट करें, यह अपने आप Headings और Paragraphs सेट कर देगा।</p> </div> <div class="input-section"> <label for="rawInput">अपना आर्टिकल यहाँ पेस्ट करें (Paste Article):</label> <textarea id="rawInput" placeholder="यहाँ आर्टिकल पेस्ट या टाइप करें...">

Formatted Output (Live Preview):

आपका फॉर्मेटेड आर्टिकल यहाँ दिखेगा...