HTML Scripts
ChatBox
Have an account? Log in
(charging state unknown)
Your Current Battery Level:
(battery level unknown)
Your Current Battery Discharge Level:
(discharging time unknown)
additions/improvement by @JcMartin__
<!DOCTYPE HTML> <html> <input type="checkbox" id="checkbox"> <label for="checkbox" class="switch"> <div class="powersign"></div> </label> </html> <style type="text/css"> #checkbox { display: none; } .switch { position: relative; width: 70px; height: 70px; background-color: rgb(99, 99, 99); border-radius: 50%; z-index: 1; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 2px solid rgb(126, 126, 126); -webkit-box-shadow: 0px 0px 3px rgb(2, 2, 2) inset; box-shadow: 0px 0px 3px rgb(2, 2, 2) inset; } .powersign { position: relative; width: 30%; height: 30%; border: 4px solid rgb(48, 48, 48); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .powersign::before { content: ""; width: 8px; height: 100%; background-color: rgb(99, 99, 99); position: absolute; top: -60%; z-index: 2; } .powersign::after { content: ""; width: 4px; height: 100%; background-color: rgb(48, 48, 48); position: absolute; top: -60%; z-index: 3; } #checkbox:checked + .switch .powersign { border: 4px solid rgb(255, 255, 255); -webkit-box-shadow: 0px 0px 10px rgb(151, 243, 255), 0px 0px 5px rgb(151, 243, 255) inset; box-shadow: 0px 0px 10px rgb(151, 243, 255), 0px 0px 5px rgb(151, 243, 255) inset; } #checkbox:checked + .switch .powersign::after { background-color: rgb(255, 255, 255); -webkit-box-shadow: 0px 0px 5px rgb(151, 243, 255); box-shadow: 0px 0px 5px rgb(151, 243, 255); } #checkbox:checked + .switch { -webkit-box-shadow: 0px 0px 1px rgb(151, 243, 255) inset, 0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset, 0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255), 0px 0px 5px rgb(151, 243, 255); box-shadow: 0px 0px 1px rgb(151, 243, 255) inset, 0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset, 0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255), 0px 0px 5px rgb(151, 243, 255); border: 2px solid rgb(255, 255, 255); background-color:rgb(146, 180, 184) ; } #checkbox:checked + .switch .powersign::before{ background-color:rgb(146, 180, 184) ; } </style>
additions/improvement by @JcMartin__
<!DOCTYPE HTML> <html> <div class="card"> <div class="chat-header">Chat</div> <div class="chat-window"> <ul class="message-list"></ul> </div> <div class="chat-input"> <input type="text" class="message-input" placeholder="Type your message here"> <button class="send-button">Send</button> </div> </div> <style type="text/css"> .card { width: 260px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); } .chat-header { background-color: #333; color: #fff; padding: 10px; font-size: 18px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .chat-window { height: 220px; overflow-y: scroll; } .message-list { list-style: none; margin: 0; padding: 0; } .chat-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; border-top: 1px solid #ccc; } .message-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 5px; font-size: 14px; } .send-button { border: none; outline: none; background-color: #333; color: #fff; font-size: 14px; padding: 5px 10px; cursor: pointer; } .send-button:hover { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); -webkit-box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25); } </style> </html>
Have an account? Log in
additions/improvement by @JcMartin__
<!DOCTYPE HTML> <html> <div class="form-box"> <form class="form"> <span class="title">Signup</span> <span class="subtitle">Create a free account with your email.</span> <div class="form-container"> <input type="text" class="input" placeholder="Full Name"> <input type="email" class="input" placeholder="Email"> <input type="password" class="input" placeholder="Password"> </div> <button>Sign up</button> </form> <div class="form-section"> <p>Have an account? <a href="">Log in</a> </p> </div> </div> <style type="text/css"> .form-box { max-width: 300px; background: #f1f7fe; overflow: hidden; border-radius: 16px; color: #010101; } .form { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 32px 24px 24px; gap: 16px; text-align: center; } /*Form text*/ .title { font-weight: bold; font-size: 1.6rem; } .subtitle { font-size: 1rem; color: #666; } /*Inputs box*/ .form-container { overflow: hidden; border-radius: 8px; background-color: #fff; margin: 1rem 0 .5rem; width: 100%; } .input { background: none; border: 0; outline: 0; height: 40px; width: 100%; border-bottom: 1px solid #eee; font-size: .9rem; padding: 8px 15px; } .form-section { padding: 16px; font-size: .85rem; background-color: #e0ecfb; -webkit-box-shadow: rgb(0 0 0 / 8%) 0 -1px; box-shadow: rgb(0 0 0 / 8%) 0 -1px; } .form-section a { font-weight: bold; color: #0066ff; -webkit-transition: color .3s ease; transition: color .3s ease; } .form-section a:hover { color: #005ce6; text-decoration: underline; } /*Button*/ .form button { background-color: #0066ff; color: #fff; border: 0; border-radius: 24px; padding: 10px 16px; font-size: 1rem; font-weight: 600; cursor: pointer; -webkit-transition: background-color .3s ease; transition: background-color .3s ease; } .form button:hover { background-color: #005ce6; } </style> </html>
made by @JcMartin__
<!DOCTYPE HTML> <html> <title>VideoBox</title> <iframe src="https://www.youtube.com/embed/itnqEauWQZM" width="240" height="320" border-color="000000" frameborder="0" allow="fullscreen"></iframe> </html>
additions/improvement by @JcMartin__
<!DOCTYPE html>
<html>
<title>Battery Status API</title>
<b style="color: deepskyblue">BatteryCheck by "YOU"</b><p></p><p></p>
<script>
window.onload = function () {
function updateBatteryStatus(battery) {
document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
document.querySelector('#level').textContent = battery.level;
document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
}
navigator.getBattery().then(function(battery) {
// Update the battery status initially when the promise resolves ...
updateBatteryStatus(battery);
// .. and for any subsequent updates.
battery.onchargingchange = function () {
updateBatteryStatus(battery);
};
battery.onlevelchange = function () {
updateBatteryStatus(battery);
};
battery.ondischargingtimechange = function () {
updateBatteryStatus(battery);
};
});
};
</script><b>Your Devices' Battery is:</b>
<div id="charging">(charging state unknown)</div><b>Your Current Battery Level:</b>
<div id="level">(battery level unknown)</div><b>Your Current Battery Discharge Level:</b>
<div id="dischargingTime">(discharging time unknown)</div>
</html>
additions/improvement by @JcMartin__
<!DOCTYPE html>
<html>
<title>Brightness Range Slider</title>
<link rel="stylesheet" href="style.css">
<div id="container">
<div class="main">
<input type="range" id="brightness-range" min="10" max="100" value="100" onchange="fun(this)">
</div>
</div>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container {
display: flex;
align-items: center;
justify-content: center;
height: 360px;
background: #00a1ff;
}
.main {
width: 360px;
background: #000000;
border-radius: 10px;
padding: 40px;
}
#brightness-range {
width: 100%;
-webkit-appearance: none;
background: #peachpuff;
height: 10px;
outline: none;
cursor: pointer;
}
#brightness-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
background: #00a1ff;<BatteryCheck;
}</style>
<script>
function fun(e)
{
var container = document.getElementById('container');
var val = e.value;
container.setAttribute("style", "filter: brightness("+val+"%);");
}
</script>
</html>