<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unicode to KrutiDev Converter — HindiPDF</title>
    <style>
        :root { --main-color: #1d3557; --accent-color: #e63946; --bg-color: #f1f4f9; }
        body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg-color); margin: 0; padding: 20px; }
        .container { max-width: 900px; margin: auto; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: var(--main-color); margin-bottom: 25px; font-size: 24px; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        label { font-weight: bold; color: #444; margin-bottom: 8px; display: block; }
        textarea { 
            width: 100%; height: 300px; padding: 15px; border: 2px solid #ddd; 
            border-radius: 10px; font-size: 18px; box-sizing: border-box; 
            outline: none; transition: border-color 0.3s;
        }
        textarea:focus { border-color: var(--accent-color); }
        #OB { background: #fffdf5; font-family: Courier, monospace; }
        .btn-group { display: flex; gap: 10px; margin-top: 20px; justify-content: center; }
        .btn { 
            padding: 12px 25px; border: none; border-radius: 8px; font-weight: bold; 
            cursor: pointer; transition: 0.3s; font-size: 16px;
        }
        .btn-copy { background: var(--main-color); color: white; }
        .btn-clear { background: #ccc; color: #333; }
        .btn:hover { opacity: 0.9; transform: translateY(-2px); }
        @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }
    </style>
</head>
<body>

<div class="container">
    <h1>Unicode से कृतिदेव कंवर्टर (Auto-Convert)</h1>
    
    <div class="grid">
        <div>
            <label>Unicode / Mangal (यहाँ टाइप करें):</label>
            <textarea id="IB" placeholder="नमस्ते, यहाँ यूनिकोड हिंदी लिखें..." oninput="doConvert()"></textarea>
        </div>
        <div>
            <label>KrutiDev 010 (अपने आप कंवर्ट होगा):</label>
            <textarea id="OB" placeholder="आउटपुट यहाँ आएगा..." readonly></textarea>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-copy" onclick="copyResult()">📋 परिणाम कॉपी करें</button>
        <button class="btn btn-clear" onclick="clearAll()">✕ साफ करें</button>
    </div>
</div>

<script>
function doConvert() {
    var input = document.getElementById("IB").value;
    if (input.trim() == "") {
        document.getElementById("OB").value = "";
        return;
    }
    document.getElementById("OB").value = unicodeToKruti(input);
}

function unicodeToKruti(str) {
    var text = str;

    // 1. मात्रा और विशेष वर्णों की मैपिंग
    var map = [
        ["\u0930\u094d", "Z"], ["\u0915\u094d\u0937", "{k"], ["\u0924\u094d\u0930", "="], ["\u091c\u094d\u091e", "K"], 
        ["\u0936\u094d\u0930", ";kz"], ["\u0905", "v"], ["\u0906", "vk"], ["\u0907", "b"], ["\u0908", "bZ"], 
        ["\u0909", "m"], ["\u090a", "Å"], ["\u090f", "s"], ["\u0910", "S"], ["\u0913", "vks"], ["\u0914", "vkS"],
        ["\u0915", "d"], ["\u0916", "[k"], ["\u0917", "x"], ["\u0918", "?k"], ["\u091a", "p"], ["\u091b", "N"], 
        ["\u091c", "t"], ["\u091d", ">k"], ["\u091f", "V"], ["\u0920", "B"], ["\u0921", "M"], ["\u0922", "<+"], 
        ["\u0924", "r"], ["\u0925", "Fk"], ["\u0926", "n"], ["\u0927", "/k"], ["\u0928", "u"], ["\u092a", "i"], 
        ["\u092b", "Q"], ["\u092c", "c"], ["\u092d", "Hk"], ["\u092e", "e"], ["\u092f", ";"], ["\u0930", "j"], 
        ["\u0932", "y"], ["\u0935", "o"], ["\u0936", "'k"], ["\u0937", "\"k"], ["\u0938", "l"], ["\u0939", "g"],
        ["\u093e", "k"], ["\u093f", "f"], ["\u0940", "h"], ["\u0941", "q"], ["\u0942", "w"], ["\u0947", "s"], 
        ["\u0948", "S"], ["\u094b", "ks"], ["\u094c", "kS"], ["\u0902", "a"], ["\u0964", "A"]
    ];

    // 2. छोटी 'इ' की मात्रा का लॉजिक (यह अक्षर से पहले आनी चाहिए)
    text = text.replace(/([क़-ह]्)*[क़-ह]\u093f/g, function(match) {
        return "f" + match.replace("\u093f", "");
    });

    // 3. लूप के जरिए सभी शब्दों को बदलना
    for (var i = 0; i < map.length; i++) {
        text = text.replace(new RegExp(map[i][0], 'g'), map[i][1]);
    }

    return text;
}

function copyResult() {
    var copyText = document.getElementById("OB");
    if (copyText.value == "") return;
    copyText.select();
    document.execCommand("copy");
    alert("कॉपी हो गया! अब इसे MS Word में पेस्ट करें।");
}

function clearAll() {
    document.getElementById("IB").value = "";
    document.getElementById("OB").value = "";
}
</script>

</body>
</html>