dwd/tools
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s2

Browse Source
This commit is contained in:
Suvodip
2024-07-06 21:19:02 +05:30
parent b9e2e40f11
commit d368213568
23 changed files with 879 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
hex-to-rgb-generator.php
View File

@@ -1,17 +1,13 @@
<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;">
<div class="diZContainer diZmxAuto">
<h1 class="diZBorderBottom">HEX to RGB Converter</h1>
<div class="diZMaxW600 diZmxAuto toolsSection diZmy20 diZPadding15px">
<label for="hex">HEX Color:</label><br><br>
<input style="width: 96%;" onchange="visibleColor();" type="text" id="hex" value="#" pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" required ><br>
<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 id="result"></div><br>
<button id="convert-button" onclick="convertHexToRgb()">Convert</button>
<button id="copyButton" onclick="copyToClipboard()">Copy</button>
<div>
</div>
</div>
</div>
@@ -56,51 +52,3 @@
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>