init

2024-05-28 17:52:13 +05:30
commit b9e2e40f11
36 changed files with 2828 additions and 0 deletions
--- a/hex-to-rgb-generator.php
+++ b/hex-to-rgb-generator.php
@@ -0,0 +1,106 @@
+<div style="padding-bottom: 350px;">
+    <div class="container-dzx">
+        <h1>HEX to RGB Converter</h1>
+        <label for="hex">HEX Color:</label><br>
+        <input onchange="visibleColor();" type="text" id="hex" value="#" pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" required style="background-color: #3d3d3d; width: 150px; padding: 8px; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 10px;">
+        <br>
+        <!-- <div id="hexColor" style="width: 50px; height: 50px;">Code</div> -->
+        <!-- <input type="color" id="hexColor" name="hexColor" > -->
+        <button id="convert-button" class="button-style" onclick="convertHexToRgb()">Convert</button>
+        <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; place-items: center;">
+            <div id="result"></div>
+            <div>
+                <button id="copyButton" style="display: none; padding: 5px 10px 5px 10px; background-color: #7d7d7d; border-radius: 5px;" onclick="copyToClipboard()">Copy</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    function hexToRgb(hex) {
+        hex = hex.replace(/^#/, '');
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        var bigint = parseInt(hex, 16);
+        var r = (bigint >> 16) & 255;
+        var g = (bigint >> 8) & 255;
+        var b = bigint & 255;
+        return [r, g, b];
+    }
+    function visibleColor(){
+        var hexColorCode = document.getElementById('hex').value;
+        document.getElementById('convert-button').style.backgroundColor = hexColorCode;
+    }
+    function convertHexToRgb() {
+        var hexColor = document.getElementById('hex').value;
+        var rgbArray = hexToRgb(hexColor);
+        var red = rgbArray[0];
+        var green = rgbArray[1];
+        var blue = rgbArray[2];
+
+        document.getElementById('result').textContent = "HEX " + hexColor + " is equivalent to RGB(" + red + ", " + green + ", " + blue + ")";
+
+        document.getElementById('copyButton').style.display = 'inline-block';
+    }
+
+    function copyToClipboard() {
+        var rgbText = document.getElementById('result').textContent.split('equivalent to ')[1];
+        var textarea = document.createElement('textarea');
+        textarea.value = rgbText;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+        document.getElementById('copied-notice').style.display = 'block';
+        document.getElementById('copied-notice').innerHTML = 'RGB values copied successfully';
+    }
+</script>
+
+
+<style>
+    .container-dzx {
+        background-color: #3d3d3d;
+        border-radius: 5px;
+        box-shadow: 0px 0px 10px 0px #FFFFFF80;
+        padding: 20px;
+        max-width: 500px;
+        width: 100%;
+        text-align: center;
+        transform: translate(-50%, -70%);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+
+    input[type="number"] {
+        width: 100px;
+        padding: 8px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        margin-bottom: 10px;
+    }
+
+    .button-style{
+        padding: 10px 20px;
+        /* background-color: #7d7d7d; */
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+    .button-style:hover {
+        background-color: #9d9d9d;
+    }
+
+    #result {
+        color: #007bff;
+    }
+</style>