#myInput { background-position: 5px 10px; background-size:40px; background-repeat: no-repeat; width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; }

#myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; }

#myTable th, #myTable td { text-align: left; padding: 12px; }

#myTable tr { border-bottom: 1px solid #ddd; }

#myTable tr:hover{ background-color: #f1f1f1; } tr.header{ background-color: #7B7B7B; } #bar{ width: calc(100vw - 5px); background-color: #B0B0B0; } #barEnd { width: calc(100vw - 1px); background-color: #B0B0B0; max-height: 100px; } #logo { border-radius: 100%; } </style>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Muslim Plateform

Qalam

<input type="text" id="myInput" onkeyup="myFunction()" placeholder= "Search by Options Title or Discription...."

title="Type in a name">

 <td>
<a>   <div class="card">
<h1>Custom theme</h1>
<p>edit the theme of Website </p>

<label for="colorInput">Choose a color:</label>
<br>
<br> 
<input type="color" id="colorInput" oninput="addtheme()">
<h3 id="default" onclick="defaultTheme()">Tap me for resetting to default </h3>
 </div></a>
</td>

function myFunction() { var input, filter, table, tr, td, i; input=document.getElementById("myInput");

filter=input.value.toUpperCase();

table=document.getElementById("myTable");

tr=table.getElementsByTagName("tr");

for (i = 0; i < tr.length; i++) { // td = tr[i].getElementsByTagName("td")[1]; td = td = tr[i].getElementsByTagName("td")[0]; //+ tr[i].getElementsByTagName("td")[1]; if (td) { if (td.innerHTML.toUpperCase() .indexOf(filter) > -1) {

 tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";

  }
}

}

}

// Custom Theme code //select theme function addtheme(){ applyCSS(generateTheme(document.getElementById('colorInput').value)) localStorage.setItem('Qalam-CustomTheme',document.getElementById('colorInput').value)
console.log('working') } //Default theme function defaultTheme(){ localStorage.removeItem('Qalam-CustomTheme') location.reload(true); }

// Add theme var ThemeColor = localStorage.getItem('Qalam-CustomTheme') if (!ThemeColor){ ThemeColor = NaN }else if(ThemeColor){ applyCSS(generateTheme(ThemeColor)) }else{ alert('Error - You may tell Devlopers '+Error("Unknown Color can't define please check broswer"))

} //Function library function generateTheme(color) { let cssCode = ` .card-container { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 10px; }

.card { width: 300px; flex-shrink: 0; margin-right: 10px; background-color: ${shadeColor("#f6f6f6", -10)}; border: 1px solid ${shadeColor("#f6f6f6", -20)}; padding: 20px; scroll-snap-align: center; text-align: center; transition: all 0.5s ease-out; cursor: pointer; position: relative; }

.card:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom right, ${shadeColor("#bde5fc", -10)}, #fff); opacity: 0.5; z-index: -1; transform: scaleX(-1); transition: all 0.5s ease-out; }

.card:hover:before { opacity: 0.8; }

.card:hover { transform: scale(1.1); }

.card h1 { margin-top: 0; }

.card p { margin-bottom: 0; }

a { text-decoration: none; color: black; }

#myInput { background-position: 5px 10px; background-size:40px; background-repeat: no-repeat; width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; }

#myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; }

#myTable th, #myTable td { text-align: left; padding: 12px; }

#myTable tr { border-bottom: 1px solid #ddd; }

#myTable tr:hover{ background-colo