init

2024-05-28 17:52:13 +05:30
commit b9e2e40f11
36 changed files with 2828 additions and 0 deletions
--- a/image-to-base64-converter.php
+++ b/image-to-base64-converter.php
@@ -0,0 +1,75 @@
+<div class="container-dx">
+    <h2 style="text-align: center; font-size: 25px; margin-bottom: 10px;">Convert Image to Base64</h2>
+    <input type="file" class="image-input" accept="image/*">
+    <div class="preview-container" id="preview" style=""></div>
+    <textarea class="base64-textarea" readonly></textarea>
+    <P style="display: none; text-align: center;" id="copied-notice"></P>
+    <button class="copy-button">Copy Base64</button>
+</div>
+
+<script>
+    document.querySelector('.image-input').addEventListener('change', function() {
+        var file = this.files[0];
+        if (file) {
+            var reader = new FileReader();
+            reader.onload = function(e) {
+                var base64 = e.target.result;
+                var img = document.createElement('img');
+                img.src = base64;
+                document.getElementById('preview').innerHTML = '';
+                document.getElementById('preview').appendChild(img);
+                document.querySelector('.base64-textarea').value = base64;
+            };
+            reader.readAsDataURL(file);
+        }
+    });
+
+    document.querySelector('.copy-button').addEventListener('click', function() {
+        var base64TextArea = document.querySelector('.base64-textarea');
+        base64TextArea.select();
+        document.execCommand('copy');
+        document.getElementById('copied-notice').style.display = 'block';
+        document.getElementById('copied-notice').innerHTML = 'Base64 copied to clipboard!';
+    });
+</script>
+<style>
+    .container-dx {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #3d3d3d;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+        margin-top: 100px;
+    }
+    .preview-container {
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .base64-textarea {
+        width: 100%;
+        height: 150px;
+        padding: 8px;
+        resize: none;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        font-size: 14px;
+        box-sizing: border-box;
+        background-color: #7d7d7d;
+    }
+    .copy-button {
+        background-color: #7d7d7d;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: background-color 0.3s;
+    }
+    .copy-button:hover {
+        background-color: #9d9d9d;
+    }
+</style>