init
Kar l5
commit
b9e2e40f11
|
|
@ -0,0 +1,102 @@
|
|||
<?php
|
||||
require_once('.hta_config/siliconpin_sp.php');
|
||||
require_once('.htac_header.php');
|
||||
?>
|
||||
|
||||
<section class="container-zz mx-auto">
|
||||
<h1 class="grid-container" style="font-size: 30px; font-weight: bold; padding-top: 20px; padding-bottom: 10px; border-bottom: 4px solid #FFF; margin-bottom: 20px;">SiliconPin - Tools</h1>
|
||||
<div class="grid-container" style="display: flex; flex-direction: row; overflow-x: auto; margin-bottom: 20px;">
|
||||
<a href="/tools/type/?type=image" class="choosen-button">Image</a>
|
||||
<a href="/tools/type/?type=text" class="choosen-button">Text</a>
|
||||
<a href="/tools/type/?type=html" class="choosen-button">HTML</a>
|
||||
<a href="/tools/type/?type=color" class="choosen-button">Color</a>
|
||||
<a href="/tools/type/?type=info" class="choosen-button">Info</a>
|
||||
<a href="/tools/type/?type=encrypt-decrypt" class="choosen-button">Encrypt / Decrypt</a>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
<?php
|
||||
try {
|
||||
$conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
|
||||
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
$stmt = $conn->prepare("SELECT * FROM api_tools");
|
||||
$stmt->execute();
|
||||
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
// var_dump($rows);
|
||||
foreach($rows as $row){
|
||||
// echo $row['name'].'<br>';
|
||||
if($row['status']==1){
|
||||
$link_button = '<a href="/tools/'.$row['slug'].'" ><p class="choosen-button">'.$row['name'].'</p></a>';
|
||||
} else{
|
||||
$link_button = '<h2><p class="choosen-button">'.$row['name'].'</p></h2>';
|
||||
}
|
||||
echo '
|
||||
<div class="grid-item blog-style">
|
||||
<p class="line-clamp-2" style="text-align: justify;" >'.$row['description'].'</p>
|
||||
'.$link_button.'
|
||||
</div>';
|
||||
}
|
||||
} catch (PDOException $e) {
|
||||
$in_page_message = "<p class='text-danger'>Error: " . $e->getMessage() . "</p>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto;
|
||||
padding: 10px;
|
||||
}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
/* Mobile (up to 600px) */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.grid-container {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium (601px - 1024px) */
|
||||
@media only screen and (min-width: 601px) and (max-width: 1024px) {
|
||||
.grid-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Large (1025px and above) */
|
||||
@media only screen and (min-width: 1025px) {
|
||||
.grid-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
#dynamicContent > img{
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<?php
|
||||
require_once('.hta_config/siliconpin_sp.php');
|
||||
|
||||
if($_SERVER['REQUEST_METHOD']=='POST' && strlen($_POST['name']>3)){
|
||||
$slugText = $_POST['name'];
|
||||
$slugText = preg_replace('~[^\p{L}\p{N}_-]+~u', '-', $slugText);
|
||||
$slugText = strtolower($slugText);
|
||||
$slugText = preg_replace('~-+~', '-', $slugText);
|
||||
$slugText = trim($slugText, '-');
|
||||
|
||||
$time=time();
|
||||
$sid=rand(100,360).$time.rand(100,999);// $id='360000'.$time; //360000 concatineted with 1704215388 produces 10 width base_convert with 36
|
||||
$siliconid = base_convert($sid,10,36);
|
||||
|
||||
try {
|
||||
$conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
|
||||
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
|
||||
$stmt = $conn->prepare("INSERT INTO api_tools (siliconid, name, title, description, slug, status) VALUES (:siliconid, :name, :title, :description, :slug, 0)");
|
||||
$stmt->bindParam(':siliconid', $siliconid);
|
||||
$stmt->bindParam(':name', $_POST['name']);
|
||||
$stmt->bindParam(':title', $_POST['title']);
|
||||
$stmt->bindParam(':description', $_POST['description']);
|
||||
$stmt->bindParam(':slug', $slugText);
|
||||
$stmt->execute();
|
||||
// echo '<script>window.location.href="/cart/code-base"</script>';
|
||||
// $in_page_message = "<p class='text-green' style='text-align: center;' >Thank you! Your Query has been submitted.</p>";
|
||||
} catch (PDOException $e) {
|
||||
$in_page_message= "<p class='text-danger'>Error: " . $e->getMessage() . "</p>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="container-zz mx-auto my-20">
|
||||
<p>Add New Tool</p>
|
||||
<form method="post" enctype="multipart/form-data" >
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<label for="tools-name">Tools Name:</label>
|
||||
<input type="text" name="name" id="tools-name" style="" required/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<label for="title">Title:</label>
|
||||
<input type="text" name="title" id="title" style="" required/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<label for="description">Description:</label>
|
||||
<input type="text" name="description" id="description" style="" required/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<input type="submit" name="submit" id="submit" value="Save" style=""/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,107 @@
|
|||
<div class="container-ddz">
|
||||
<h2 style="text-align: center; font-size: 25px; margin-bottom: 10px;">Convert Base64 to Image</h2>
|
||||
<textarea class="base64-textarea" placeholder="Enter base64 encoded image data"></textarea>
|
||||
<p id="no-select-message" style="display: none; color: red;"></p>
|
||||
<button class="convert-button">Convert to Image</button>
|
||||
<div class="preview-container" id="preview"></div>
|
||||
<div id="download-options" style="display: none; display: flex; flex-direction: column; justify-content: center; ">
|
||||
<p>Choose Image Format & Download:</p>
|
||||
<div>
|
||||
<button class="format-button" data-format="png">PNG</button>
|
||||
<button class="format-button" data-format="jpeg">JPEG</button>
|
||||
<button class="format-button" data-format="webp">WebP</button>
|
||||
<button id="download-button" style="display: none;">Download Image</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelector('.convert-button').addEventListener('click', function() {
|
||||
var base64Data = document.querySelector('.base64-textarea').value.trim();
|
||||
if (base64Data !== '') {
|
||||
var img = document.createElement('img');
|
||||
img.src = base64Data;
|
||||
img.style.maxWidth = '100%';
|
||||
img.style.height = 'auto';
|
||||
document.getElementById('preview').innerHTML = '';
|
||||
document.getElementById('preview').appendChild(img);
|
||||
document.getElementById('download-options').style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('no-select-message').innerHTML = 'Please enter base64 encoded image data.';
|
||||
document.getElementById('no-select-message').style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
// Add event listeners to format buttons
|
||||
var formatButtons = document.querySelectorAll('.format-button');
|
||||
formatButtons.forEach(function(button) {
|
||||
button.addEventListener('click', function() {
|
||||
var imageFormat = this.getAttribute('data-format');
|
||||
downloadImage(imageFormat);
|
||||
});
|
||||
});
|
||||
|
||||
function downloadImage(imageFormat) {
|
||||
var base64Data = document.querySelector('.base64-textarea').value.trim();
|
||||
var downloadLink = document.createElement('a');
|
||||
downloadLink.href = base64Data;
|
||||
downloadLink.download = 'image.' + imageFormat;
|
||||
downloadLink.click();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container-ddz {
|
||||
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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.convert-button {
|
||||
width: 100%;
|
||||
background-color: #7d7d7d;
|
||||
color: white;
|
||||
padding: 6px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.convert-button:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
.format-button {
|
||||
display: inline-block;
|
||||
background-color: #7d7d7d;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.format-button:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<div class="color-shades-container">
|
||||
<div class="color-shades-generator">
|
||||
<h1>Color Shades Generator</h1>
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<label for="colorInput" style="color: #000;">Choose Color</label>
|
||||
<input type="color" id="colorInput" class="color-input" value="#ff0000" />
|
||||
</div>
|
||||
<div id="colorShades" class="color-shades"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function generateShades(hex) {
|
||||
const shades = [];
|
||||
for (let i = 0; i <= 90; i += 10) { // Adjust the increment value here
|
||||
const shade = lightenDarkenColor(hex, -i);
|
||||
shades.push(shade);
|
||||
}
|
||||
return shades;
|
||||
}
|
||||
|
||||
// Function to lighten or darken a color
|
||||
function lightenDarkenColor(col, amt) {
|
||||
let usePound = false;
|
||||
if (col[0] === "#") {
|
||||
col = col.slice(1);
|
||||
usePound = true;
|
||||
}
|
||||
const num = parseInt(col, 16);
|
||||
let r = (num >> 16) + amt;
|
||||
if (r > 255) r = 255;
|
||||
else if (r < 0) r = 0;
|
||||
let b = ((num >> 8) & 0x00FF) + amt;
|
||||
if (b > 255) b = 255;
|
||||
else if (b < 0) b = 0;
|
||||
let g = (num & 0x0000FF) + amt;
|
||||
if (g > 255) g = 255;
|
||||
else if (g < 0) g = 0;
|
||||
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
|
||||
}
|
||||
|
||||
// Function to display color shades
|
||||
function displayColorShades(hex) {
|
||||
const colorShadesDiv = document.getElementById("colorShades");
|
||||
colorShadesDiv.innerHTML = "";
|
||||
const shades = generateShades(hex);
|
||||
shades.forEach(shade => {
|
||||
const colorBox = document.createElement("div");
|
||||
colorBox.style.backgroundColor = shade;
|
||||
colorBox.classList.add("color-box");
|
||||
const hexCode = document.createElement("p");
|
||||
hexCode.textContent = `HEX: ${shade}`;
|
||||
const copyHexButton = createCopyButton(shade);
|
||||
colorBox.appendChild(hexCode);
|
||||
colorBox.appendChild(copyHexButton);
|
||||
colorShadesDiv.appendChild(colorBox);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to create a copy button
|
||||
function createCopyButton(text) {
|
||||
const button = document.createElement('button');
|
||||
button.classList.add('copy-button');
|
||||
button.textContent = 'Copy HEX';
|
||||
button.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(text);
|
||||
button.textContent = 'Copied';
|
||||
setTimeout(() => {
|
||||
button.textContent = 'Copy HEX';
|
||||
}, 2000); // Reset button text after 2 seconds
|
||||
});
|
||||
return button;
|
||||
}
|
||||
|
||||
// Event listener for input change
|
||||
const colorInput = document.getElementById("colorInput");
|
||||
colorInput.addEventListener("input", function() {
|
||||
const hex = this.value;
|
||||
displayColorShades(hex);
|
||||
});
|
||||
|
||||
// Initial display
|
||||
const initialColor = colorInput.value;
|
||||
displayColorShades(initialColor);
|
||||
</script>
|
||||
<style>
|
||||
.color-shades-container {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
/* background-color: #f4f4f4; */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
/* height: 100vh; */
|
||||
}
|
||||
.color-shades-generator {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.color-shades-generator h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.color-input {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
/* padding: 10px; */
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.color-shades {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.color-box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.color-box .copy-button {
|
||||
position: absolute;
|
||||
color: #000;
|
||||
top: 60px;
|
||||
right: 18px;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.color-info {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<?php
|
||||
// Function to generate a random name
|
||||
function generateRandomName($length = 6) {
|
||||
$vowels = array('a', 'e', 'i', 'o', 'u');
|
||||
$consonants = array('b', 'c', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'r', 's', 't', 'v', 'w', 'x', 'y', 'z');
|
||||
|
||||
$name = '';
|
||||
$is_vowel = mt_rand(0, 1);
|
||||
for ($i = 0; $i < $length; $i++) {
|
||||
$source = $is_vowel ? $vowels : $consonants;
|
||||
$name .= $source[mt_rand(0, count($source) - 1)];
|
||||
$is_vowel = !$is_vowel;
|
||||
}
|
||||
return ucfirst($name);
|
||||
}
|
||||
|
||||
$randomFirstName = generateRandomName(mt_rand(4, 8));
|
||||
$randomLastName = generateRandomName(mt_rand(4, 8));
|
||||
?>
|
||||
<div class="container-zz mx-auto my-20">
|
||||
<h2 style="font-size: 25px; text-align: center;">Get a Random Name</h2>
|
||||
<p style="font-size: 25px;">First Name: <?php echo $randomFirstName; ?> </p>
|
||||
<p style="font-size: 25px;">Last Name: <?php echo $randomLastName; ?> </p>
|
||||
</div>
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<?php
|
||||
function generateRandomUniqueNumber($length = 10) {
|
||||
$randomNumber = '';
|
||||
|
||||
// Generate a random string of digits
|
||||
for ($i = 0; $i < $length; $i++) {
|
||||
$randomNumber .= mt_rand(0, 9);
|
||||
}
|
||||
|
||||
// Append a unique identifier (based on microtime)
|
||||
$uniqueId = uniqid();
|
||||
$randomUniqueNumber = $randomNumber . $uniqueId;
|
||||
|
||||
return $randomUniqueNumber;
|
||||
}
|
||||
|
||||
// Usage
|
||||
$randomUniqueNumber = generateRandomUniqueNumber();
|
||||
echo $randomUniqueNumber;
|
||||
?>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
|
||||
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700"> -->
|
||||
<div class="google-fonts-container">
|
||||
<h1 class="google-fonts-heading">Google Fonts Pair Finder</h1>
|
||||
<label for="selectedFont" class="google-fonts-label">Select a Font:</label>
|
||||
<select id="selectedFont" class="google-fonts-select">
|
||||
<!-- Options will be populated dynamically -->
|
||||
</select>
|
||||
|
||||
<div class="google-fonts-preview">
|
||||
<h2>Preview:</h2>
|
||||
<p id="previewText">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Function to fetch all Google Fonts and populate dropdown
|
||||
function fetchGoogleFonts() {
|
||||
fetch('https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyAssce4aiUByEQGByr49fHVn3TSzdBkQQE')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const fonts = data.items.map(item => item.family);
|
||||
const fontSelect = document.getElementById('selectedFont');
|
||||
fonts.forEach(font => {
|
||||
const option = document.createElement('option');
|
||||
option.value = font;
|
||||
option.textContent = font;
|
||||
fontSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching Google Fonts:', error));
|
||||
}
|
||||
|
||||
// Function to update font preview
|
||||
function updatePreview() {
|
||||
const selectedFont = document.getElementById('selectedFont').value;
|
||||
const previewText = document.getElementById('previewText');
|
||||
previewText.style.fontFamily = selectedFont;
|
||||
}
|
||||
|
||||
// Add event listener to font dropdown
|
||||
document.getElementById('selectedFont').addEventListener('change', updatePreview);
|
||||
|
||||
// Call function to fetch and populate Google Fonts
|
||||
fetchGoogleFonts();
|
||||
|
||||
// Initial call to update preview
|
||||
updatePreview();
|
||||
</script>
|
||||
<style>
|
||||
.google-fonts-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: #3d3d3d;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.google-fonts-heading {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.google-fonts-select {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
|
||||
.google-fonts-preview {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 25px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<div class="page-container">
|
||||
<div class="container-dxc">
|
||||
<h1 style="text-align: center; font-size: 25px;">HTML Remover</h1>
|
||||
<label for="htmlInput">Input Text with HTML:</label>
|
||||
<textarea class="cleanhtml-textarea" id="htmlInput" placeholder="Paste your text with html here..."></textarea>
|
||||
<button class="button-style" onclick="cleanHTML()" style="width: 100%;">Remove</button>
|
||||
|
||||
<label for="cleanedHTML">Cleaned Text:</label>
|
||||
<textarea class="cleanhtml-textarea" id="cleanedHTML" readonly placeholder="Cleaned Text will appear here..."></textarea>
|
||||
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
||||
<button class="button-style" onclick="copyToClipboard()" style="width: 100%;">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function cleanHTML() {
|
||||
const inputHTML = document.getElementById("htmlInput").value;
|
||||
|
||||
// Create a temporary element to hold the input HTML
|
||||
const tempDiv = document.createElement("div");
|
||||
tempDiv.innerHTML = inputHTML;
|
||||
|
||||
// Remove all HTML tags
|
||||
const plainText = tempDiv.textContent || tempDiv.innerText || "";
|
||||
|
||||
document.getElementById("cleanedHTML").value = plainText;
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
const cleanedHTML = document.getElementById("cleanedHTML").value;
|
||||
navigator.clipboard.writeText(cleanedHTML)
|
||||
.then(() => {
|
||||
document.getElementById('copied-notice').style.display = 'block';
|
||||
document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.page-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* background-color: #f4f4f4; */
|
||||
}
|
||||
|
||||
.container-dxc {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
background-color: #3d3d3d;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.cleanhtml-textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
resize: vertical;
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
padding: 10px 20px;
|
||||
background-color: #7d7d7d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<div class="containezx" style="padding: 10px;">
|
||||
<h1 style="font-size: 20px;">Image Compression Tool</h1>
|
||||
<input type="file" id="imageInput" accept="image/*">
|
||||
<br>
|
||||
<label for="qualityInput">Compression Quality:</label>
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<input type="range" id="qualityInput" min="1" max="100" step="1" value="10" />
|
||||
<span id="qualityValue" style="margin-top: -8px; font-size: 20px;">10%</span>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="image-preview">
|
||||
<img id="preview" src="" alt="" />
|
||||
</div>
|
||||
<span id="imageSize" class="image-size"></span>
|
||||
<br>
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<button class="comp-button" onclick="compressImage()">Compress Image</button>
|
||||
<a class="comp-button" id="downloadLink" href="#" download="compressed_image.jpg" style="display: none; margin-left: 20px;">Download Compressed Image</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function compressImage() {
|
||||
const fileInput = document.getElementById('imageInput');
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (!file) {
|
||||
alert('Please select an image file.');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(event) {
|
||||
const image = new Image();
|
||||
image.src = event.target.result;
|
||||
|
||||
image.onload = function() {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = image.width;
|
||||
canvas.height = image.height;
|
||||
console.log(image.width)
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
const qualityInput = document.getElementById('qualityInput');
|
||||
const qualityValue = parseFloat(qualityInput.value) / 100; // Normalize quality value to range 0-1
|
||||
|
||||
canvas.toBlob(function(blob) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const preview = document.getElementById('preview');
|
||||
const downloadLink = document.getElementById('downloadLink');
|
||||
|
||||
preview.src = url;
|
||||
downloadLink.href = url;
|
||||
downloadLink.style.display = 'block';
|
||||
|
||||
const imageSizeSpan = document.getElementById('imageSize');
|
||||
const compressedSize = (blob.size / 1024).toFixed(2); // Convert bytes to kilobytes and round to 2 decimal places
|
||||
imageSizeSpan.textContent = `Compressed Image Size: ${compressedSize} KB`;
|
||||
}, 'image/jpeg', qualityValue); // Pass normalized quality value to toBlob
|
||||
};
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
document.getElementById('qualityInput').addEventListener('input', function() {
|
||||
document.getElementById('qualityValue').textContent = this.value + "%";
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.containezx {
|
||||
margin-top: 100px;
|
||||
max-width: 600px;
|
||||
margin: 100px auto;
|
||||
background-color: #3d3d3d;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 5px #ffffff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#preview {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.image-size {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.comp-button{
|
||||
background-color: #6d6d6d;
|
||||
padding: 10px 20px 10px 20px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.comp-button:hover{
|
||||
background-color: #8d8d8d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<div class="container-cc">
|
||||
<div class="content-cc">
|
||||
<h2 class="title-cc">Case Converter</h2>
|
||||
<form class="form-cc">
|
||||
<label class="label-cc" for="inputString">Input Text:</label>
|
||||
<textarea id="inputString" class="textarea-cc" name="inputString" rows="4" cols="50" oninput="convertCase()"></textarea>
|
||||
|
||||
<div class="case-options-cc">
|
||||
<div class="case-option-cc" onclick="setActive(this)" data-case="uppercase">Uppercase</div>
|
||||
<div class="case-option-cc" onclick="setActive(this)" data-case="lowercase">Lowercase</div>
|
||||
<div class="case-option-cc" onclick="setActive(this)" data-case="titlecase">Titlecase</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result" class="result-cc"></div>
|
||||
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
||||
<button type="button" class="copy-button-cc" onclick="copyToClipboard()" style="background-color: #7d7d7d; width: 100%; margin-top: 10px;">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function convertCase() {
|
||||
var inputString = document.getElementById("inputString").value;
|
||||
var targetCase = document.querySelector('.case-option-cc.active').getAttribute('data-case');
|
||||
var result = document.getElementById("result");
|
||||
|
||||
if (inputString.trim() === "") {
|
||||
result.innerHTML = "Please enter a string.";
|
||||
return;
|
||||
}
|
||||
|
||||
if (targetCase === 'uppercase') {
|
||||
result.innerHTML = inputString.toUpperCase();
|
||||
} else if (targetCase === 'lowercase') {
|
||||
result.innerHTML = inputString.toLowerCase();
|
||||
} else if (targetCase === 'titlecase') {
|
||||
result.innerHTML = inputString.replace(/\w\S*/g, function (txt) {
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
} else {
|
||||
result.innerHTML = "Invalid target case specified.";
|
||||
}
|
||||
}
|
||||
|
||||
function setActive(button) {
|
||||
var buttons = document.querySelectorAll('.case-option-cc');
|
||||
buttons.forEach(function(btn) {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
button.classList.add('active');
|
||||
|
||||
convertCase();
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
var result = document.getElementById("result");
|
||||
var range = document.createRange();
|
||||
range.selectNode(result);
|
||||
window.getSelection().removeAllRanges();
|
||||
window.getSelection().addRange(range);
|
||||
document.execCommand("copy");
|
||||
window.getSelection().removeAllRanges();
|
||||
// alert("Copied to clipboard!");
|
||||
document.getElementById('copied-notice').style.display = 'block';
|
||||
document.getElementById('copied-notice').innerHTML = 'Copied to clipboard!';
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.container-cc {
|
||||
font-family: Arial, sans-serif;
|
||||
/* background-color: #3d3d3d; */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 30px;
|
||||
/* padding-bottom: 30px; */
|
||||
}
|
||||
|
||||
.content-cc {
|
||||
/* background-color: #7d7d7d; */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
width: 500px;
|
||||
}
|
||||
.content-cc {
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.content-cc {
|
||||
width: 800px; /* Width for large screens */
|
||||
}
|
||||
}
|
||||
|
||||
.title-cc {
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-cc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label-cc {
|
||||
margin-bottom: 5px;
|
||||
/* color: #555; */
|
||||
}
|
||||
|
||||
.textarea-cc {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
resize: none;
|
||||
margin-bottom: 15px;
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
|
||||
.case-options-cc {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.case-option-cc {
|
||||
flex-grow: 1;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border: 1px solid #007bff;
|
||||
color: #FFF;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.case-option-cc:hover {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.result-cc {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
min-height: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.copy-button-cc {
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.copy-button-cc:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.active{
|
||||
background-color: #05b3a4;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<style>
|
||||
/* body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
} */
|
||||
|
||||
.container-dyz {
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.table-container {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.textarea-text {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
resize: vertical;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 16px;
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
span {
|
||||
color: #007bff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.content-table th, .content-table td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
.content-table .table-head {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
<div class="container-dyz">
|
||||
<h1>Text Counter</h1>
|
||||
<label for="inputText">Enter your text:</label><br>
|
||||
<textarea class="textarea-text" id="inputText" placeholder="Type your text here..." oninput="countTextMetrics()"></textarea>
|
||||
<p>Total letters: <span id="letterCount">0</span></p>
|
||||
<p>Total words: <span id="wordCount">0</span></p>
|
||||
<p>Total sentences: <span id="sentenceCount">0</span></p>
|
||||
<p>Total paragraphs: <span id="paragraphCount">0</span></p>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<h2 style="text-align: center; font-size: 25px; font-weight: bold;">Content Limitations</h2>
|
||||
<table class="content-table">
|
||||
<tr>
|
||||
<th class="name">Name</th>
|
||||
<th class="min-max">Min/Max</th>
|
||||
<th class="limit">Limit</th>
|
||||
<th class="type">Type</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Meta Title</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">55</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Meta Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">160</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Google Ideal Post Content</td>
|
||||
<td class="min-max">Min</td>
|
||||
<td class="limit">300</td>
|
||||
<td class="type">Word</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Instagram Captions/Comments</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">2200</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Twitter Post</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">280</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Twitter Username</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">20</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Wall Post (Truncation)</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">477</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Wall Post (All)</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">63206</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Comment</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">8000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Page Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">255</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Username</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">50</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Messenger Message</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">20000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">YouTube Video Title</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">70</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">YouTube Video Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">5000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Snapchat Caption</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">250</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Pinterest Pin Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">500</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function countTextMetrics() {
|
||||
const text = document.getElementById('inputText').value;
|
||||
|
||||
// Count letters
|
||||
const letterCount = text.replace(/[^a-zA-Z]/g, '').length;
|
||||
document.getElementById('letterCount').textContent = letterCount;
|
||||
|
||||
// Count words
|
||||
const words = text.split(/\s+/).filter(word => word.length > 0);
|
||||
const wordCount = words.length;
|
||||
document.getElementById('wordCount').textContent = wordCount;
|
||||
|
||||
// Count sentences
|
||||
const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0);
|
||||
const sentenceCount = sentences.length;
|
||||
document.getElementById('sentenceCount').textContent = sentenceCount;
|
||||
|
||||
// Count paragraphs
|
||||
const paragraphs = text.split(/\n\n+/).filter(paragraph => paragraph.trim().length > 0);
|
||||
const paragraphCount = paragraphs.length;
|
||||
document.getElementById('paragraphCount').textContent = paragraphCount;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
echo 'Current Location';
|
||||
?>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<style>
|
||||
.button-style-md5{
|
||||
padding: 20px 20px;
|
||||
background-color: #7d7d7d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
.button-style-md5:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
|
||||
.custom-container {
|
||||
max-width: 500px;
|
||||
margin: 50px auto;
|
||||
background-color: #3d3d3d;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.1);
|
||||
}
|
||||
.custom-heading {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
}
|
||||
.custom-label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.custom-submit {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.custom-submit:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
<?php require_once ('.hta_config/siliconpin_sp.php'); ?>
|
||||
<?php
|
||||
|
||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||
try {
|
||||
$db = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
|
||||
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
$stmt = $db->prepare("SELECT * FROM md5_data WHERE md5 = :md5");
|
||||
$stmt->bindParam(':md5', $_POST["md5-hash"]);
|
||||
$stmt->execute();
|
||||
$result = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
|
||||
if ($result) {
|
||||
echo '<div style="display: flex; justify-content: center;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center;">
|
||||
<p style="text-align: center; font-size: 25px; ">Given MD5 Vlue: </p>
|
||||
<p style="display: none; text-align: center;" id="copied-notice"></p>
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<input id="output" type="text" readonly value="'.$result['value'].'" style="color: #fff; padding: 10px 10px 10px 10px; font-size: 25px; outline: none;" />
|
||||
<button class="button-style-md5" id="copyButton" onclick="copyOutputText()">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>';
|
||||
echo '
|
||||
<script>
|
||||
function copyOutputText() {
|
||||
const outputText = document.getElementById(\'output\').value;
|
||||
const textarea = document.createElement(\'textarea\');
|
||||
textarea.value = outputText;
|
||||
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 = \'MD5 value copied to clipboard!\';
|
||||
}
|
||||
</script>
|
||||
';
|
||||
} else {
|
||||
echo '<div style="display: flex; justify-content: center;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center;">
|
||||
<p style="text-align: center; font-size: 25px; ">No data found for the given MD5 hash </p>
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<button class="button-style-md5" id="" onclick="tryAgain()">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>';
|
||||
echo ' <script>
|
||||
function tryAgain() {
|
||||
window.location.href="/tools/md5-decryption";
|
||||
}
|
||||
</script>' ;
|
||||
// echo json_encode(array('success' => false, 'message' => 'No data found for the given MD5 hash'));
|
||||
}
|
||||
exit();
|
||||
} catch (PDOException $e) {
|
||||
echo json_encode(array('success' => false, 'message' => 'Database error: ' . $e->getMessage()));
|
||||
exit();
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="custom-container">
|
||||
<h2 class="custom-heading">MD5 Decryption</h2>
|
||||
<form method="post" action="">
|
||||
<label for="md5-hash" class="custom-label">Enter Text:</label><br>
|
||||
<input type="text" id="md5-hash" name="md5-hash" class="custom-input"><br><br>
|
||||
<input type="submit" value="Generate MD5 Hash" class="custom-submit" style="background-color: #7d7d7d;">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<style>
|
||||
.button-style-md5{
|
||||
padding: 20px 20px;
|
||||
background-color: #7d7d7d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
.button-style-md5:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
.custom-container {
|
||||
max-width: 500px;
|
||||
margin: 50px auto;
|
||||
background-color: #3d3d3d;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.1);
|
||||
}
|
||||
.custom-heading {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
/* color: #333; */
|
||||
}
|
||||
.custom-label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.custom-submit {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.custom-submit:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
<?php
|
||||
require_once ('.hta_config/siliconpin_sp.php');
|
||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||
|
||||
$md5_hash = md5($_POST["md5-text"]);
|
||||
try {
|
||||
$db = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
|
||||
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
$stmt = $db->prepare("INSERT INTO md5_data (md5, value) VALUES (:md5, :value)");
|
||||
$stmt->bindParam(':md5', $md5_hash);
|
||||
$stmt->bindParam(':value', $_POST["md5-text"]);
|
||||
$stmt->execute();
|
||||
echo '<div style="display: flex; justify-content: center;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center;">
|
||||
<p style="text-align: center; font-size: 25px; ">Converted MD5: </p>
|
||||
<p style="display: none; text-align: center;" id="copied-notice"></p>
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<input id="output" type="text" readonly value="'.$md5_hash.'" style="color: #fff; padding: 10px 10px 10px 10px; font-size: 25px; outline: none;" />
|
||||
<button class="button-style-md5" id="copyButton" onclick="copyOutputText()">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>';
|
||||
echo '
|
||||
<script>
|
||||
function copyOutputText() {
|
||||
const outputText = document.getElementById(\'output\').value;
|
||||
const textarea = document.createElement(\'textarea\');
|
||||
textarea.value = outputText;
|
||||
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 = \'MD5 copied to clipboard!\';
|
||||
}
|
||||
</script>
|
||||
';
|
||||
// echo json_encode(array('success' => true, 'message' => 'Data inserted successfully'));
|
||||
// echo '<script>window.location.href="/admin/add-content";</script>';
|
||||
exit();
|
||||
} catch (PDOException $e) {
|
||||
echo json_encode(array('success' => false, 'message' => 'Database error: ' . $e->getMessage()));
|
||||
exit();
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="custom-container">
|
||||
<h2 class="custom-heading">Generate MD5 Hash</h2>
|
||||
<form method="post">
|
||||
<label for="md5-text" class="custom-label">Enter Text:</label><br>
|
||||
<input type="text" id="md5-text" name="md5-text" class="custom-input"><br><br>
|
||||
<input type="submit" value="Generate MD5 Hash" class="custom-submit" style="background-color: #7d7d7d;">
|
||||
</form>
|
||||
</div>
|
||||
<!-- <script>
|
||||
function copyOutputText() {
|
||||
const outputText = document.getElementById('output').value;
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = outputText;
|
||||
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 = 'Output text copied to clipboard!';
|
||||
}
|
||||
</script> -->
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<div style="padding-bottom: 350px;">
|
||||
<div class="container-dxu">
|
||||
<h2 style="text-align: center; font-size: 25px; padding-bottom: 10px;">Remove Multiple Whitespace</h2>
|
||||
<textarea class="textarea-text" id="textInput" rows="4" cols="50" placeholder="Enter text here..."></textarea>
|
||||
<button class="button-style" onclick="processText()">Remove</button>
|
||||
<div style="display: none;" id="after-procces">
|
||||
<div id="output"></div>
|
||||
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
||||
<button class="button-style" id="copyButton" onclick="copyOutputText()">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function removeMultipleWhitespace(text) {
|
||||
return text.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
|
||||
function processText() {
|
||||
const inputText = document.getElementById('textInput').value;
|
||||
const cleanedText = removeMultipleWhitespace(inputText);
|
||||
document.getElementById('output').innerText = cleanedText;
|
||||
document.getElementById('after-procces').style.display='block';
|
||||
}
|
||||
|
||||
function copyOutputText() {
|
||||
const outputText = document.getElementById('output').innerText;
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = outputText;
|
||||
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 = 'Output text copied to clipboard!';
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.container-dxu {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #3d3d3d;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.textarea-text {
|
||||
width: calc(100% );
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
.button-style{
|
||||
padding: 10px 20px;
|
||||
background-color: #7d7d7d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
#output {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background-color: #3d3d3d;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
<div class="meta-container">
|
||||
<h1 class="og-title">Open Graph Meta Generator</h1>
|
||||
<form class="form" id="metaForm">
|
||||
<label for="ogTitle" class="form-label">Title:</label>
|
||||
<input type="text" id="ogTitle" name="ogTitle" class="form-input" required>
|
||||
|
||||
<label for="ogDescription" class="form-label">Description:</label>
|
||||
<textarea id="ogDescription" name="ogDescription" class="form-input form-textarea" rows="4" required></textarea>
|
||||
|
||||
<label for="ogImage" class="form-label">Image URL:</label>
|
||||
<input type="url" id="ogImage" name="ogImage" class="form-input" required>
|
||||
|
||||
<label for="ogUrl" class="form-label">URL:</label>
|
||||
<input type="url" id="ogUrl" name="ogUrl" class="form-input" required>
|
||||
|
||||
<label for="author" class="form-label">Author:</label>
|
||||
<input type="text" id="author" name="author" class="form-input" required>
|
||||
|
||||
<label for="keywords" class="form-label">Keywords:</label>
|
||||
<input type="text" id="keywords" name="keywords" class="form-input" required>
|
||||
|
||||
<label for="twitterTitle" class="form-label">Twitter Title:</label>
|
||||
<input type="text" id="twitterTitle" name="twitterTitle" class="form-input" required>
|
||||
|
||||
<label for="twitterDescription" class="form-label">Twitter Description:</label>
|
||||
<textarea id="twitterDescription" name="twitterDescription" class="form-input form-textarea" rows="4" required></textarea>
|
||||
|
||||
<label for="twitterImage" class="form-label">Twitter Image URL:</label>
|
||||
<input type="url" id="twitterImage" name="twitterImage" class="form-input" required>
|
||||
|
||||
<label for="twitterCard" class="form-label">Twitter Card Type:</label>
|
||||
<select id="twitterCard" name="twitterCard" class="form-input" required>
|
||||
<option value="summary">Summary</option>
|
||||
<option value="summary_large_image">Summary Large Image</option>
|
||||
</select>
|
||||
|
||||
<button type="submit" class="button-style" style="width: 100%; background-color: #7d7d7d;">Generate</button>
|
||||
</form>
|
||||
|
||||
<div style="display: none;" class="generated-meta-tags" id="generatedMetaTags"></div>
|
||||
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
||||
<button id="copyButton" class="button-style" onclick="copyToClipboard()">Copy</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<h2 style="text-align: center; font-size: 25px; font-weight: bold;">Content Limitations</h2>
|
||||
<table class="content-table">
|
||||
<tr>
|
||||
<th class="name">Name</th>
|
||||
<th class="min-max">Min/Max</th>
|
||||
<th class="limit">Limit</th>
|
||||
<th class="type">Type</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Meta Title</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">55</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Meta Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">160</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Google Ideal Post Content</td>
|
||||
<td class="min-max">Min</td>
|
||||
<td class="limit">300</td>
|
||||
<td class="type">Word</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Instagram Captions/Comments</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">2200</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Twitter Post</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">280</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Twitter Username</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">20</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Wall Post (Truncation)</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">477</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Wall Post (All)</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">63206</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Comment</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">8000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Page Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">255</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Username</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">50</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Messenger Message</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">20000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">YouTube Video Title</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">70</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">YouTube Video Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">5000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Snapchat Caption</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">250</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Pinterest Pin Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">500</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('metaForm');
|
||||
const generatedMetaTags = document.getElementById('generatedMetaTags');
|
||||
|
||||
form.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const ogTitle = document.getElementById('ogTitle').value.trim();
|
||||
const ogDescription = document.getElementById('ogDescription').value.trim();
|
||||
const ogImage = document.getElementById('ogImage').value.trim();
|
||||
const ogUrl = document.getElementById('ogUrl').value.trim();
|
||||
const author = document.getElementById('author').value.trim();
|
||||
const keywords = document.getElementById('keywords').value.trim();
|
||||
const twitterTitle = document.getElementById('twitterTitle').value.trim();
|
||||
const twitterDescription = document.getElementById('twitterDescription').value.trim();
|
||||
const twitterImage = document.getElementById('twitterImage').value.trim();
|
||||
const twitterCard = document.getElementById('twitterCard').value.trim();
|
||||
|
||||
const metaTags = `
|
||||
<title>${ogTitle}</title>
|
||||
<meta name="description" content="${ogDescription}">
|
||||
<meta name="keywords" content="${keywords}">
|
||||
<meta name="author" content="${author}">
|
||||
<meta property="og:title" content="${ogTitle}">
|
||||
<meta property="og:description" content="${ogDescription}">
|
||||
<meta property="og:image" content="${ogImage}">
|
||||
<meta property="og:url" content="${ogUrl}">
|
||||
<meta name="twitter:title" content="${twitterTitle}">
|
||||
<meta name="twitter:description" content="${twitterDescription}">
|
||||
<meta name="twitter:image" content="${twitterImage}">
|
||||
<meta name="twitter:card" content="${twitterCard}">
|
||||
`;
|
||||
if(metaTags.length>20){
|
||||
document.getElementById('generatedMetaTags').style.display= "block";
|
||||
}
|
||||
generatedMetaTags.innerText = `${metaTags}`;
|
||||
|
||||
});
|
||||
function copyToClipboard() {
|
||||
const metaTags = document.getElementById('generatedMetaTags');
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = metaTags.innerText;
|
||||
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 = 'Meta tags copied to clipboard!';
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.meta-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 700px;
|
||||
margin: 20px auto; /* Added to center horizontally */
|
||||
padding: 20px;
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.og-title {
|
||||
margin-top: 0;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
|
||||
/* Generated Meta Tags Styles */
|
||||
.generated-meta-tags {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.generated-meta-tags {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #3d3d3d;
|
||||
width: 100%; /* Ensure the width spans the container */
|
||||
box-sizing: border-box; /* Include padding and border in the width */
|
||||
overflow: auto; /* Enable scrolling if content overflows */
|
||||
}
|
||||
.table-container {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.content-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.content-table th, .content-table td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
.content-table .table-head {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>PDF to Image Converter</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>PDF to Image Converter</h1>
|
||||
<?php
|
||||
// Check if form is submitted
|
||||
if (isset($_POST['submit'])) {
|
||||
// Check if file is uploaded without errors
|
||||
if ($_FILES['pdfFile']['error'] === UPLOAD_ERR_OK) {
|
||||
$pdfPath = $_FILES['pdfFile']['tmp_name']; // Temporary path of the uploaded file
|
||||
$outputFolder = 'output_images'; // Output folder for converted images
|
||||
|
||||
// Convert PDF to images
|
||||
pdf_to_images($pdfPath, $outputFolder);
|
||||
} else {
|
||||
echo "Error uploading file.";
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input type="file" name="pdfFile" accept=".pdf">
|
||||
<button type="submit" name="submit">Upload PDF</button>
|
||||
</form>
|
||||
|
||||
<?php
|
||||
// Function to convert PDF to images
|
||||
function pdf_to_images($pdfPath, $outputFolder) {
|
||||
// Check if output folder exists, create it if not
|
||||
if (!file_exists($outputFolder)) {
|
||||
mkdir($outputFolder, 0777, true);
|
||||
}
|
||||
|
||||
// Command to convert PDF to images (using ImageMagick)
|
||||
$command = "convert {$pdfPath} {$outputFolder}/output.jpg";
|
||||
|
||||
// Execute the command
|
||||
exec($command, $output, $returnCode);
|
||||
|
||||
// Check if command execution was successful
|
||||
if ($returnCode === 0) {
|
||||
echo "PDF converted to images successfully!";
|
||||
} else {
|
||||
echo "Error converting PDF to images.";
|
||||
}
|
||||
}
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,30 @@
|
|||
<?php
|
||||
$time=time();
|
||||
$gen_pass=rand(100,360).$time.rand(100,999);
|
||||
$rand_pass = base_convert($gen_pass,10,36);
|
||||
?>
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px;">
|
||||
<h1 style="font-size: 25px;">Get a random password</h1>
|
||||
<div style="display: flex; flex-direction: row; margin-top: 20px;">
|
||||
<p style="border: 2px solid #ddd; border-radius: 6px; padding: 5px;">Password: <span id="randPassword"> <?php echo $rand_pass; ?></span></p> <button id="copyButton" style="background-color: #7d7d7d; border-radius: 6px; padding: 0px 10px 0px 10px;">Copy</button>
|
||||
</div>
|
||||
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
||||
</div>
|
||||
<!-- <div id="copyText">This text will be copied when clicked.</div> -->
|
||||
|
||||
<script>
|
||||
document.getElementById("copyButton").addEventListener("click", function() {
|
||||
// Select the text
|
||||
var copyText = document.getElementById("randPassword");
|
||||
var selection = window.getSelection();
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(copyText);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
|
||||
// Copy to clipboard
|
||||
document.execCommand("copy");
|
||||
document.getElementById('copied-notice').style.display = 'block';
|
||||
document.getElementById('copied-notice').innerHTML = 'Text copied to clipboard!';
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<div style="padding-bottom: 350px;">
|
||||
<div class="container-dzx">
|
||||
<h1>RGB to HEX Converter</h1>
|
||||
<label for="red">Red:</label><br>
|
||||
<input type="number" id="red" min="0" max="255" required>
|
||||
<br>
|
||||
<label for="green">Green:</label><br>
|
||||
<input type="number" id="green" min="0" max="255" required>
|
||||
<br>
|
||||
<label for="blue">Blue:</label><br>
|
||||
<input type="number" id="blue" min="0" max="255" required>
|
||||
<br>
|
||||
<button class="button-style" onclick="convert()">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>
|
||||
<span style="display: none;" id="copied-notice"></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function rgbToHex(r, g, b) {
|
||||
r = Math.max(0, Math.min(255, r));
|
||||
g = Math.max(0, Math.min(255, g));
|
||||
b = Math.max(0, Math.min(255, b));
|
||||
|
||||
var hex = "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2);
|
||||
|
||||
return hex.toUpperCase();
|
||||
}
|
||||
|
||||
function convert() {
|
||||
var red = parseInt(document.getElementById('red').value);
|
||||
var green = parseInt(document.getElementById('green').value);
|
||||
var blue = parseInt(document.getElementById('blue').value);
|
||||
|
||||
var hexColor = rgbToHex(red, green, blue);
|
||||
document.getElementById('result').textContent = "RGB(" + red + ", " + green + ", " + blue + ") is equivalent to " + hexColor;
|
||||
|
||||
document.getElementById('copyButton').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
var hexColor = document.getElementById('result').textContent.split('equivalent to ')[1];
|
||||
var textarea = document.createElement('textarea');
|
||||
textarea.value = hexColor;
|
||||
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 = 'HEX color code 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>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<div class="container-dxe">
|
||||
<h1 style="text-align: center; font-size: 25px; padding-bottom: 6px;">Slug Generator</h1>
|
||||
<input class="slug-input" type="text" id="inputText" placeholder="Enter text">
|
||||
<button class="button-style" onclick="generateSlug()">Generate Slug</button>
|
||||
<div id="slugOutput" style="border: 2px solid #ddd; display: none; padding: 6px; border-radius: 6px; margin-top: 10px;"></div>
|
||||
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
||||
<button class="button-style" style="margin-top: 10px; width: 100%; display: none;" id="copyBtn" onclick="copyToClipboard()">Copy Slug</button>
|
||||
</div>
|
||||
<script>
|
||||
function generateSlug() {
|
||||
const inputText = document.getElementById('inputText').value;
|
||||
const slugOutput = document.getElementById('slugOutput');
|
||||
|
||||
// Generate slug
|
||||
const slug = inputText.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
|
||||
// console.log(slug.length)
|
||||
// Update output
|
||||
if(slug.length > 0){
|
||||
document.getElementById('copyBtn').style.display = 'block';
|
||||
document.getElementById('slugOutput').style.display = 'block';
|
||||
}
|
||||
slugOutput.textContent = slug;
|
||||
|
||||
}
|
||||
function copyToClipboard() {
|
||||
const slugOutput = document.getElementById('slugOutput');
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = slugOutput.textContent;
|
||||
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 = 'Slug copied to clipboard!';
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.container-dxe {
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.slug-input {
|
||||
width: calc(100%);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
padding: 10px 20px;
|
||||
background-color: #7d7d7d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Internet Speed Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Internet Speed Test</h1>
|
||||
<button onclick="runSpeedTest()">Run Speed Test</button>
|
||||
<div id="result"></div>
|
||||
|
||||
<script>
|
||||
function runSpeedTest() {
|
||||
var startTime = new Date().getTime();
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '<?php echo $_SERVER['PHP_SELF']; ?>?action=speedtest');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
var endTime = new Date().getTime();
|
||||
var fileSize = parseInt(xhr.getResponseHeader('Content-Length'));
|
||||
var downloadTime = (endTime - startTime) / 1000; // in seconds
|
||||
var downloadSpeed = (fileSize / downloadTime / 1024).toFixed(2); // in KB/s
|
||||
document.getElementById('result').innerHTML = 'Download Speed: ' + downloadSpeed + ' KB/s';
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php
|
||||
if ($_GET['action'] == 'speedtest') {
|
||||
$fileUrl = 'https://videos.pexels.com/video-files/5532774/5532774-uhd_4096_2160_25fps.mp4?action=speedtest'; // URL to a sample file to download for the test
|
||||
$fileSize = filesize($fileUrl);
|
||||
header('Content-Type: application/octet-stream');
|
||||
header('Content-Disposition: attachment; filename="samplefile.bin"');
|
||||
header('Content-Length: ' . $fileSize);
|
||||
readfile($fileUrl);
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<?php
|
||||
require_once('.hta_config/siliconpin_sp.php');
|
||||
require_once('.htac_header.php');
|
||||
?>
|
||||
|
||||
<section class="container-zz mx-auto">
|
||||
<h1 class="grid-container" style="font-size: 30px; font-weight: bold; padding-top: 20px; padding-bottom: 10px; border-bottom: 4px solid #FFF; margin-bottom: 20px;">SiliconPin - Tools</h1>
|
||||
<div class="grid-container" style="display: flex; flex-direction: row; overflow-x: auto; margin-bottom: 20px;">
|
||||
<a href="/tools/type/?type=image" class="type-button">Image</a>
|
||||
<a href="/tools/type/?type=text" class="type-button">Text</a>
|
||||
<a href="/tools/type/?type=html" class="type-button">HTML</a>
|
||||
<a href="/tools/type/?type=color" class="type-button">Color</a>
|
||||
<a href="/tools/type/?type=info" class="type-button">Info</a>
|
||||
<a href="/tools/type/?type=encrypt-decrypt" class="type-button">Encrypt / Decrypt</a>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
<?php
|
||||
try {
|
||||
$conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
|
||||
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
$stmt = $conn->prepare("SELECT * FROM api_tools WHERE `type` = :type");
|
||||
$stmt->bindParam(':type', $_GET['type'], PDO::PARAM_STR);
|
||||
$stmt->execute();
|
||||
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
// var_dump($rows);
|
||||
foreach($rows as $row){
|
||||
// echo $row['name'].'<br>';
|
||||
if($row['status']==1){
|
||||
$link_button = '<a href="/tools/'.$row['slug'].'" ><p style="background-color: #6d6d6d; padding: 6px 0px 6px 0px; border-radius: 10px;">'.$row['name'].'</p></a>';
|
||||
} else{
|
||||
$link_button = '<h2><p style="background-color: #6d6d6d; padding: 6px 0px 6px 0px; border-radius: 10px;">'.$row['name'].'</p></h2>';
|
||||
}
|
||||
echo '
|
||||
<div class="grid-item">
|
||||
<p class="line-clamp-2" style="text-align: justify;" >'.$row['description'].'</p>
|
||||
'.$link_button.'
|
||||
</div>';
|
||||
}
|
||||
} catch (PDOException $e) {
|
||||
$in_page_message = "<p class='text-danger'>Error: " . $e->getMessage() . "</p>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.type-button{
|
||||
background-color: #3d3d3d;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto;
|
||||
padding: 10px;
|
||||
}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #3d3d3d;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
/* Mobile (up to 600px) */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.grid-container {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium (601px - 1024px) */
|
||||
@media only screen and (min-width: 601px) and (max-width: 1024px) {
|
||||
.grid-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Large (1025px and above) */
|
||||
@media only screen and (min-width: 1025px) {
|
||||
.grid-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
#dynamicContent > img{
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
$encodedUrl='';
|
||||
$decodeddUrl='';
|
||||
if(isset($_POST['encode']) && isset($_POST['url_to_encode']) ) $encodedUrl=urlencode($_POST['url_to_encode']);
|
||||
if(isset($_POST['decode']) && isset($_POST['url_to_decode']) ) $decodeddUrl=urldecode($_POST['url_to_decode']);
|
||||
?>
|
||||
<br>
|
||||
|
||||
<form method="post">
|
||||
<input type="text" name="url_to_encode" >
|
||||
<input type="submit" name="encode" value="Encode">
|
||||
<span><?php echo $encodedUrl; ?></span>
|
||||
</form>
|
||||
<br>
|
||||
<form method="post">
|
||||
<input type="text" name="url_to_decode" >
|
||||
<input type="submit" name="decode" value="Decode">
|
||||
<span><?php echo $decodeddUrl; ?></span>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<?php
|
||||
echo 'Weather Report';
|
||||
?>
|
||||
<section>
|
||||
<div>
|
||||
<form id="cityForm" method="post" enctype="multipart/form-data">
|
||||
<input name="date" id="date" type="date">
|
||||
<!-- <select onchange="getWeatherReport()" name="city" id="city" style="background-color: #000;">
|
||||
<option value="London">London</option>
|
||||
<option value="Kolkata">Kolkata</option>
|
||||
<option value="Delhi">Delhi</option>
|
||||
</select> -->
|
||||
<button type="submit" name="submit" onsubmit="getCity();">Click</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
function getWeatherReport(){
|
||||
let formContent = document.getElementById('cityForm');
|
||||
let formData = new FormData(formContent)
|
||||
let url = 'https://apisp.dev2.cicdhosting.com/upload_file/v2/upload-weather.php';
|
||||
fetch(url,{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<?php
|
||||
$user_agent = $_SERVER['HTTP_USER_AGENT'];
|
||||
|
||||
// Function to extract browser version from user agent string
|
||||
function get_browser_version($user_agent, $browser)
|
||||
{
|
||||
$pattern = '/' . $browser . '\/([^\s]+)/';
|
||||
if (preg_match($pattern, $user_agent, $matches)) {
|
||||
return $matches[1];
|
||||
}
|
||||
return 'Unknown';
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="container-zz mx-auto">
|
||||
<div style="padding: 10px;">
|
||||
<!-- <h2 style="font-size: 25px;">Your User Agent is:</h2> -->
|
||||
<p style="font-size: 20px;">You are Using</p>
|
||||
|
||||
<?php
|
||||
// Additional description text based on common user agent patterns
|
||||
if (strpos($user_agent, 'Firefox') !== false) {
|
||||
echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/firefox.svg' alt='' /> <p> Mozilla Firefox " . get_browser_version($user_agent, 'Firefox') . ".</p></div>";
|
||||
} elseif (strpos($user_agent, 'Chrome') !== false) {
|
||||
echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/chrome.svg' alt='' /> <p> Google Chrome " . get_browser_version($user_agent, 'Chrome') . ".</p></div>";
|
||||
} elseif (strpos($user_agent, 'Safari') !== false) {
|
||||
echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/safari.svg' alt='' /> <p> Apple Safari " . get_browser_version($user_agent, 'Version') . ".</p></div>";
|
||||
} elseif (strpos($user_agent, 'Opera') !== false) {
|
||||
echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/opera.svg' alt='' /> <p> Opera " . get_browser_version($user_agent, 'OPR') . ".</p></div>";
|
||||
} elseif (strpos($user_agent, 'Edge') !== false) {
|
||||
echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/edge.svg' alt='' /> <p> Microsoft Edge " . get_browser_version($user_agent, 'Edge') . ".</p></div>";
|
||||
} elseif (strpos($user_agent, 'Trident') !== false) {
|
||||
echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/internet-exp.svg' alt='' /> <p> Internet Explorer " . get_browser_version($user_agent, 'rv') . ".</p></div>";
|
||||
} else {
|
||||
echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/no-br.svg' alt='' /> <p>We couldn't determine your browser from the user agent string.</p></div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<?php
|
||||
|
||||
function is_mobile_device() {
|
||||
$user_agent = $_SERVER['HTTP_USER_AGENT'];
|
||||
$mobile_keywords = array('android', 'iphone', 'ipod', 'blackberry', 'opera mini', 'windows phone', 'iemobile');
|
||||
|
||||
foreach ($mobile_keywords as $keyword) {
|
||||
if (stripos($user_agent, $keyword) !== false) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (is_mobile_device()) {
|
||||
$device_name = "You're accessing from a mobile device.";
|
||||
} else {
|
||||
$device_name = "You're accessing from a desktop device.";
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
<section class="container-zz mx-auto my-20">
|
||||
<div style="font-size: 25px;">
|
||||
<p>Your Device System:</p>
|
||||
<h3><?php echo $device_name; ?></h3>
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
$host_name = $_SERVER['HTTP_HOST'];
|
||||
|
||||
?>
|
||||
|
||||
<div class="container-zz mx-auto">
|
||||
<p>Hosting Name:</p>
|
||||
<p><?php echo $host_name; ?></p>
|
||||
</div>
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<?php
|
||||
require_once('.hta_config/siliconpin_sp.php');
|
||||
$publicIPv4 = file_get_contents('https://ipv4.icanhazip.com/');
|
||||
$publicIPv6 = @file_get_contents('https://ipv6.icanhazip.com/');
|
||||
$userIP = $_SERVER['REMOTE_ADDR'];
|
||||
$ipLocation = 'Unknown';
|
||||
$isp = 'Unknown';
|
||||
$ipLocationData = @file_get_contents("http://ip-api.com/json/$userIP");
|
||||
// $ipLocationData = @file_get_contents("http://ip-api.com/json/$userIP?fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,offset,currency,isp,org,as,asname,reverse,mobile,proxy,hosting,query");
|
||||
if ($ipLocationData !== false) {
|
||||
$ipLocationData = json_decode($ipLocationData, true);
|
||||
if (isset($ipLocationData['status']) && $ipLocationData['status'] == 'success') {
|
||||
$ipLocation = isset($ipLocationData['city']) ? $ipLocationData['city'] . ', ' . $ipLocationData['country'] : 'Unknown';
|
||||
$isp = isset($ipLocationData['isp']) ? $ipLocationData['isp'] : 'Unknown';
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
<?php
|
||||
$web_page_title = 'Your IP Address - siliconpin.com';
|
||||
$web_page_meta_description = 'Find out your current IP address';
|
||||
$web_page_meta_keywords = 'IP address, internet, network';
|
||||
$web_page_author = 'Your Name';
|
||||
$web_page_meta_og_title = $web_page_title;
|
||||
$web_page_meta_og_description = $web_page_meta_description;
|
||||
$web_page_meta_og_image = ''; // Add URL to an image if desired
|
||||
$web_page_meta_og_url = 'http://siliconpin.com/what-is-my-ip'; // Update URL
|
||||
$web_page_meta_twitter_title = $web_page_title;
|
||||
$web_page_meta_twitter_description = $web_page_meta_description;
|
||||
$web_page_meta_twitter_image = ''; // Add URL to an image if desired
|
||||
$web_page_meta_twitter_card = 'summary'; // or 'summary_large_image' if you have a large image
|
||||
require_once('.htac_header.php');
|
||||
require_once('.htac_nav.php');
|
||||
?>
|
||||
<section class="container mx-auto custom-container" style="margin-top: 100px; margin-bottom: 10px;">
|
||||
<p><?php echo "My Public IPv4: $publicIPv4 <br>"; ?></p>
|
||||
<p><?php echo "My Public IPv6: " . ($publicIPv6 ? $publicIPv6 : 'IPv6 not supported or unavailable') . "<br>"; ?></p>
|
||||
<p><?php echo "My IP Location: $ipLocation <br>"; ?></p>
|
||||
<p><?php echo "My ISP: $isp"; ?></p>
|
||||
</section>
|
||||
<?php
|
||||
?>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
// Get the IPv4 address of the client
|
||||
// echo $_SERVER['REMOTE_ADDR'];
|
||||
$ipv4 = $_SERVER['REMOTE_ADDR'];
|
||||
|
||||
// Get the IPv6 address of the client if available
|
||||
$ipv6 = $_SERVER['REMOTE_ADDR'];
|
||||
if (strpos($ipv6, ":") !== false) {
|
||||
// IPv6 address detected
|
||||
$ipv6 = explode("%", $ipv6)[0]; // Remove interface suffix, if any
|
||||
} else {
|
||||
// No IPv6 address detected
|
||||
$ipv6 = "IPv6 not available";
|
||||
}
|
||||
|
||||
// Display IPv4 and IPv6 addresses
|
||||
echo "IPv4 Address: " . $ipv4 . "<br>";
|
||||
echo "IPv6 Address: " . $ipv6 . "<br>";
|
||||
?>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
<section class="container-zz mx-auto my-20">
|
||||
<div style="font-size: 25px;">
|
||||
<p>Your Operating System:</p>
|
||||
<h3><?php echo php_uname(); ?></h3>
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<div class="container-zz mx-auto my-20">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items:center;">
|
||||
<h2 style="font-size: 25px;">Your Screen Resolution:</h2>
|
||||
<p style="font-size: 25px; text-align: center;" id="resolution"></p>
|
||||
<p style="font-size: 25px; text-align: center;" id="innerRes"></p>
|
||||
<!-- <p style="font-size: 25px; text-align: center;" id="asperatio"></p> -->
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var screenWidth = window.screen.width;
|
||||
var screenHeight = window.screen.height;
|
||||
document.getElementById('resolution').innerHTML = "This is widescreen resolution - " + "Width: " + screenWidth + " x " + "Height: " + screenHeight + " Pixels";
|
||||
|
||||
|
||||
var inner_width = window.innerWidth;
|
||||
var inner_height = window.innerHeight;
|
||||
document.getElementById('innerRes').innerHTML = "This is browser's inner resolution - " + "Width: " + inner_width + " x " + "Height: " + inner_height + " Pixels";
|
||||
|
||||
function getAspectRatio() {
|
||||
const width = screen.width;
|
||||
const height = screen.height;
|
||||
|
||||
// Calculate the greatest common divisor (GCD) for cleaner ratio representation
|
||||
function gcd(a, b) {
|
||||
return (b === 0) ? a : gcd(b, a % b);
|
||||
}
|
||||
const divisor = gcd(width, height);
|
||||
|
||||
// Simplify width and height by dividing with GCD
|
||||
const simplifiedWidth = width / divisor;
|
||||
const simplifiedHeight = height / divisor;
|
||||
|
||||
return `${simplifiedWidth}:${simplifiedHeight}`;
|
||||
}
|
||||
|
||||
// Example usage
|
||||
const aspectRatio = getAspectRatio();
|
||||
// document.getElementById('asperatio').innerHTML = aspectRatio;
|
||||
// console.log("Screen aspect ratio:", aspectRatio);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?php
|
||||
$user_agent = $_SERVER['HTTP_USER_AGENT'];
|
||||
?>
|
||||
|
||||
<div class="container-zz mx-auto">
|
||||
<div style="padding: 10px;">
|
||||
<h2 style="font-size: 25px;">Your User Agent is:</h2>
|
||||
<p style="font-size: 25px;"><?php echo $user_agent; ?></p>
|
||||
|
||||
<?php
|
||||
// Additional description text based on common user agent patterns
|
||||
if (strpos($user_agent, 'Firefox') !== false) {
|
||||
echo "<p style='font-size: 20px;'>Used Browser Mozilla Firefox.</p>";
|
||||
} elseif (strpos($user_agent, 'Chrome') !== false) {
|
||||
echo "<p style='font-size: 20px;'>Used Browser Google Chrome.</p>";
|
||||
} elseif (strpos($user_agent, 'Safari') !== false) {
|
||||
echo "<p style='font-size: 20px;'>Used Browser Apple Safari.</p>";
|
||||
} elseif (strpos($user_agent, 'Opera') !== false) {
|
||||
echo "<p style='font-size: 20px;'>Used Browser Opera.</p>";
|
||||
} elseif (strpos($user_agent, 'Edge') !== false) {
|
||||
echo "<p style='font-size: 20px;'>Used Browser Microsoft Edge.</p>";
|
||||
} elseif (strpos($user_agent, 'Trident') !== false) {
|
||||
echo "<p style='font-size: 20px;'>Used Browser Internet Explorer.</p>";
|
||||
} else {
|
||||
echo "<p style='font-size: 20px;'>We couldn't determine your browser from the user agent string.</p>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.my-20{margin-top:5rem;margin-bottom:5rem}
|
||||
</style>
|
||||
Loading…
Reference in New Issue