• IN GOD WE TRUST
  • SOLAR SYSTEMS NETWORK
  • SOLAR SYSTEMS TECHNOLOGY
  • CREATED BY SATOSHI NAKAMOTO
  • DEVELOPED BY JC MARTIN

HTML Scripts


PowerButton Code

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>

Power Button
Plain text – 2.8 KB 246 downloads

ChatBox

    ChatBox Code

    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>

    Chat Box
    Plain text – 1.9 KB 267 downloads

    Signup Create a free account with your email.

    Have an account? Log in

    SignUpBox Code

    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>

    Sign Up Box
    Plain text – 2.4 KB 271 downloads

    VideoBox

    VideoBox Code

    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>

    Video Box
    Plain text – 204.0 B 265 downloads

    Battery Status API BatteryCheck by "YOU"

    Your Devices' Battery is:
    (charging state unknown)
    Your Current Battery Level:
    (battery level unknown)
    Your Current Battery Discharge Level:
    (discharging time unknown)

    BatteryCheck Code

    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>

    Battery Check By You
    Plain text – 1.3 KB 263 downloads

    Brightness Range Slider

    Brightness Range Slider

    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>

    Brightness Range Slider
    Plain text – 1.1 KB 259 downloads