.. शीर्षक: दशमलव से हेक्स से बाइनरी कनवर्टर
.. स्लग: दशमलव-से-हेक्स-से-बाइनरी
.. दिनांक: 2025-12-26 15:00:00 यूटीसी
.. टैग: नेटवर्किंग, कैलकुलेटर, टूल
.. श्रेणी: कैलकुलेटर
.. लिंक:
.. विवरण: दशमलव, हेक्साडेसिमल और बाइनरी के बीच संख्याओं को परिवर्तित करें। सबनेट मास्क, वीएलएएन आईडी, पैकेट हेक्स डंप और नेटवर्क विश्लेषण में इंटरफ़ेस काउंटर की व्याख्या के लिए उपयोग किया जाता है।
.. प्रकार: पाठ
<style>
    .calc-container {
        max-width: 1000px;
        margin: 20px auto;
        padding: 20px;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    .input-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }

    .input-group {
        display: flex;
        flex-direction: column;
    }

    .input-group label {
        margin-bottom: 8px;
        font-weight: 600;
        font-size: 14px;
    }

    .input-group input {
        padding: 14px;
        font-size: 16px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
    }

    .input-group input:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

    .button-container {
        margin-top: 20px;
        display: flex;
        gap: 10px;
    }

    .calc-button {
        padding: 14px 35px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .calc-button:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .calc-button:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    .calc-button.secondary {
        background: #666;
    }

    .calc-button.secondary:hover {
        background: #555;
    }

    .calc-button.secondary:active {
        background: #444;
    }

    .result-section {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: none;
    }

    .result-section.show {
        display: block;
    }

    .result-section:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .section-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header .icon {
        font-size: 20px;
    }

    .section-content {
        padding: 20px;
        background: #fafafa;
    }

    .data-row {
        display: flex;
        margin: 12px 0;
        padding: 10px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #4CAF50;
    }

    .data-label {
        font-weight: bold;
        color: #555;
        min-width: 180px;
        flex-shrink: 0;
    }

    .data-value {
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-word;
        font-size: 15px;
    }

    .data-value.highlight {
        color: #4CAF50;
        font-weight: bold;
    }

    .help-text {
        margin-top: 15px;
        font-size: 14px;
        color: rgba(255,255,255,0.9);
        background: rgba(0,0,0,0.1);
        padding: 10px 15px;
        border-radius: 4px;
    }

    .help-text strong {
        color: white;
    }

    .error {
        background: #ffebee;
        color: #c62828;
        padding: 15px 20px;
        border-radius: 8px;
        border-left: 4px solid #c62828;
        margin: 20px 0;
        display: none;
    }

    .error.show {
        display: block;
    }

    .results-container {
        margin-top: 30px;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .input-row {
            grid-template-columns: 1fr;
        }

        .button-container {
            flex-direction: column;
        }

        .calc-button {
            width: 100%;
        }

        .data-row {
            flex-direction: column;
        }

        .data-label {
            margin-bottom: 5px;
            min-width: auto;
        }
    }
</style>
<div class="calc-container">
<div class="calc-header">
<h2>दशमलव-हेक्स-बाइनरी कनवर्टर</h2>
<p>दशमलव, हेक्साडेसिमल और बाइनरी प्रारूपों के बीच संख्याओं को परिवर्तित करें। किसी भी प्रारूप में एक मान दर्ज करें और रूपांतरण देखने के लिए सबमिट पर क्लिक करें।</p>
<div class="input-row">
<div class="input-group">
<label for="decnum">दशमलव संख्या</label>
<input id="decnum" placeholder="e.g., 255" type="text" value=""/>
</div>
<div class="input-group">
<label for="hexnum">हेक्साडेसिमल संख्या</label>
<input id="hexnum" placeholder="e.g., FF" type="text" value=""/>
</div>
<div class="input-group">
<label for="binnum">बाइनरी संख्या</label>
<input id="binnum" placeholder="e.g., 11111111" type="text" value=""/>
</div>
</div>
<div class="button-container">
<button class="calc-button" onclick="hexdecbinFunction()" type="submit">जमा करना</button>
<button class="calc-button secondary" onclick="clearInputs()" type="button">स्पष्ट</button>
</div>
<div class="help-text">
<strong>सुझावों:</strong>किसी एक फ़ील्ड में मान दर्ज करें. अन्य फ़ील्ड खाली छोड़ें. रूपांतरण परिणाम नीचे दिखाई देंगे.</div>
</div>
<div class="error" id="errorMessage"></div>
<div class="results-container">
<div class="result-section" id="resultFromDecimal">
<div class="section-header">
<h3><span class="icon">🔢</span>दशमलव से परिवर्तित</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">दशमलव:</div>
<div class="data-value highlight" id="decnumResultdec"></div>
</div>
<div class="data-row">
<div class="data-label">हेक्साडेसिमल:</div>
<div class="data-value" id="hexnumResultdec"></div>
</div>
<div class="data-row">
<div class="data-label">बाइनरी:</div>
<div class="data-value" id="binnumResultdec"></div>
</div>
</div>
</div>
<div class="result-section" id="resultFromHex">
<div class="section-header">
<h3><span class="icon">🔠</span>हेक्साडेसिमल से परिवर्तित</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">हेक्साडेसिमल:</div>
<div class="data-value highlight" id="hexnumResulthex"></div>
</div>
<div class="data-row">
<div class="data-label">दशमलव:</div>
<div class="data-value" id="decnumResulthex"></div>
</div>
<div class="data-row">
<div class="data-label">बाइनरी:</div>
<div class="data-value" id="binnumResulthex"></div>
</div>
</div>
</div>
<div class="result-section" id="resultFromBinary">
<div class="section-header">
<h3><span class="icon">💾</span>बाइनरी से परिवर्तित</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">बाइनरी:</div>
<div class="data-value highlight" id="binnumResultbin"></div>
</div>
<div class="data-row">
<div class="data-label">दशमलव:</div>
<div class="data-value" id="decnumResultbin"></div>
</div>
<div class="data-row">
<div class="data-label">हेक्साडेसिमल:</div>
<div class="data-value" id="hexnumResultbin"></div>
</div>
</div>
</div>
</div>
</div>
<script>
function hexdecbinFunction() {
    // Set variables from input
    var hexnum = document.getElementById("hexnum").value.trim();
    var decnum = document.getElementById("decnum").value.trim();
    var binnum = document.getElementById("binnum").value.trim();

    // Hide all result sections first
    document.getElementById('resultFromDecimal').classList.remove('show');
    document.getElementById('resultFromHex').classList.remove('show');
    document.getElementById('resultFromBinary').classList.remove('show');
    document.getElementById('errorMessage').classList.remove('show');

    // Check if at least one input is provided
    if (!decnum && !hexnum && !binnum) {
        showError('Please enter a value in at least one field');
        return;
    }

    // Clear inputs after getting values
    document.getElementById("hexnum").value = "";
    document.getElementById("decnum").value = "";
    document.getElementById("binnum").value = "";

    try {
        // Input from Decimal
        if (decnum) {
            var decValue = parseInt(decnum, 10);
            if (isNaN(decValue)) {
                throw new Error('Invalid decimal number');
            }
            var hexStringdec = decValue.toString(16).toUpperCase();
            var binStringdec = decValue.toString(2);

            document.getElementById("decnumResultdec").innerHTML = decnum;
            document.getElementById("hexnumResultdec").innerHTML = hexStringdec;
            document.getElementById("binnumResultdec").innerHTML = binStringdec;
            document.getElementById('resultFromDecimal').classList.add('show');
        }

        // Input from Hex
        if (hexnum) {
            var decStringhex = parseInt(hexnum, 16);
            if (isNaN(decStringhex)) {
                throw new Error('Invalid hexadecimal number');
            }
            var binStringhex = decStringhex.toString(2);

            document.getElementById("hexnumResulthex").innerHTML = hexnum.toUpperCase();
            document.getElementById("decnumResulthex").innerHTML = decStringhex.toString(10);
            document.getElementById("binnumResulthex").innerHTML = binStringhex;
            document.getElementById('resultFromHex').classList.add('show');
        }

        // Input from Binary
        if (binnum) {
            var decStringbin = parseInt(binnum, 2);
            if (isNaN(decStringbin)) {
                throw new Error('Invalid binary number');
            }
            var hexStringbin = decStringbin.toString(16).toUpperCase();

            document.getElementById("binnumResultbin").innerHTML = binnum;
            document.getElementById("decnumResultbin").innerHTML = decStringbin.toString(10);
            document.getElementById("hexnumResultbin").innerHTML = hexStringbin;
            document.getElementById('resultFromBinary').classList.add('show');
        }

        // Scroll to results
        document.querySelector('.results-container').scrollIntoView({ behavior: 'smooth', block: 'start' });

    } catch (error) {
        showError(error.message);
    }
}

function clearInputs() {
    document.getElementById("hexnum").value = "";
    document.getElementById("decnum").value = "";
    document.getElementById("binnum").value = "";

    // Hide all result sections
    document.getElementById('resultFromDecimal').classList.remove('show');
    document.getElementById('resultFromHex').classList.remove('show');
    document.getElementById('resultFromBinary').classList.remove('show');
    document.getElementById('errorMessage').classList.remove('show');

    // Focus on first input
    document.getElementById("decnum").focus();
}

function showError(message) {
    const errorDiv = document.getElementById('errorMessage');
    errorDiv.textContent = message;
    errorDiv.classList.add('show');
    errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

// Add enter key support
document.addEventListener('DOMContentLoaded', function() {
    const inputs = ['decnum', 'hexnum', 'binnum'];

    inputs.forEach(function(inputId) {
        document.getElementById(inputId).addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                hexdecbinFunction();
            }
        });
    });

    // Auto-focus first input field
    document.getElementById("decnum").focus();
});
</script>