<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub File Link Converter</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 600px;
            margin: 20px auto;
        }
        label {
            display: block;
            margin-top: 10px;
        }
        input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            margin-top: 10px;
            padding: 10px;
            cursor: pointer;
        }
        div {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        p a {
            color: #0366d6;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <h1>GitHub File Link Converter</h1>
    
    <label for="githubLink">GitHub File URL:</label>
    <input type="text" id="githubLink" placeholder="Enter GitHub file URL">

    <button onclick="convertLinks()">Convert Links</button>

    <div id="result">
        <h2>Converted Links:</h2>
        <p id="rawLink">GitHub Raw Link: </p>
        <p id="mediaLink">Modified Media Link: </p>
        <p id="jsdelivrLink">JSdelivr Link: </p>
    </div>

    <script>
        function convertLinks() {
            const githubLink = document.getElementById('githubLink').value.trim();

            if (!githubLink) {
                alert('Please enter a GitHub file URL.');
                return;
            }

            const parts = githubLink.split('/');
            const username = parts[3];
            const repo = parts[4];
            const branch = parts[6];
            const path = parts.slice(7).join('/');

            const rawLink = `https://raw.githubusercontent.com/${username}/${repo}/${branch}/${path}`;
            const mediaLink = `https://media.githubusercontent.com/media/${username}/${repo}/${branch}/${path}`;
            const jsdelivrLink = `https://cdn.jsdelivr.net/gh/${username}/${repo}@${branch}/${path}`;

            document.getElementById('rawLink').innerHTML = `<strong>GitHub Raw Link:</strong> <a href="${rawLink}" target="_blank">${rawLink}</a>`;
            document.getElementById('mediaLink').innerHTML = `<strong>Modified Media Link:</strong> <a href="${mediaLink}" target="_blank">${mediaLink}</a>`;
            document.getElementById('jsdelivrLink').innerHTML = `<strong>JSdelivr Link:</strong> <a href="${jsdelivrLink}" target="_blank">${jsdelivrLink}</a>`;
        }
    </script>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.