PHPIndex

This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).

index.html 
wget 'https://lists2.roe3.org/mdrone/Battery-Indicator/index.html'
View Content 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Battery Indicator</title>
<style>
     .custom-popup {
       position: fixed;
       top: 20px;
       right: 20px;
       background-color: #f0f0f0;
       color: #000000;
       padding: 20px;
       border-radius: 8px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       width: 300px;
       opacity: 0;
       visibility: hidden;
     }
     .custom-popup img {
       max-width: 100%;
       border-radius: 4px;
       margin-top: 10px;
     }
     .custom-popup-close {
       position: absolute;
       top: 10px;
       right: 10px;
       background: none;
       border: none;
       font-size: 20px;
       cursor: pointer;
       color: #000000;
</style>
</head>

<body>
<div id="customPopup" class="custom-popup">
<h3>Hey!</h3>
<p>You can download the<br><a href="../battery-indicator.zip">battery-indicator.zip</a><br> for your site or desktop</p>
 </div>
    <section class="battery">
        <div class="Bcard">
            <div class="Bpill">
                <div class="Blevel">
                    <div class="Bliquid"></div>
                </div>
            </div>
            <div class="Bdata">
                <p class="Btext">Battery :</p>
                <h1 class="Bpercentage">20%</h1>
                <p class="Bstatus">
                    <i class="ri-plug-line"></i>
                </p>
            </div>
        </div>
    </section>
    <script src="index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
     <script>
     document.addEventListener('DOMContentLoaded', () => {
       const popup = document.getElementById('customPopup');
       
       const popupSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-software-interface-start-2574.mp3');

       function showPopup() {
           let tl = gsap.timeline();

           switch ('fade') {
               case 'fade':
                tl.to(popup, { opacity: 1, visibility: 'visible', duration: 3.5 });
               break;
               case 'slide':
                tl.fromTo(popup, { x: 50 }, { x: 0, opacity: 1, visibility: 'visible', duration: 3.5 });
               break;
               case 'bounce':
                tl.fromTo(popup, { scale: 0.5, x: 50 }, { scale: 1, x: 0, opacity: 1, visibility: 'visible', duration: 3.5, ease: "bounce.out" });
               break;
           }
           // popupSound.play();
           // Reverse animation after 3 seconds
           setTimeout(() => {
               tl.reverse();
           }, 3000);
       }

       function hidePopup() {
           gsap.to(popup, { opacity: 0, visibility: 'hidden', duration: 3.5 });
       }
       setTimeout(showPopup, 600);
    });
</script>
</body>
</html>
index.js 
wget 'https://lists2.roe3.org/mdrone/Battery-Indicator/index.js'
View Content 
initBattery();

function initBattery() {
    const batteryLiquid = document.querySelector(".Bliquid");
    const batteryStatus = document.querySelector(".Bstatus");
    const Bpercentage = document.querySelector(".Bpercentage");
    navigator.getBattery().then((batt) => {
        updateBattery = () => {
            let level = Math.floor(batt.level * 100);
            Bpercentage.innerHTML = level + "%";
            batteryLiquid.style.height = `${parseInt(batt.level * 100)}%`;
            if (level == 100) {
                batteryStatus.innerHTML = `Battery Full <i class="ri-battery-2-fill green-color"></i>`;
                batteryLiquid.style.height = "103%";
            } else if (level <= 20 & !batt.charging) {
                batteryStatus.innerHTML = `Low Charge <i class="ri-plug-line animated-red animated-red"></i>`;
            } else if (batt.charging) {
                batteryStatus.innerHTML = `Charging ... <i class="ri-flashlight-line animated-green"></i>`;
            } else {
                batteryStatus.innerHTML = "";
            }

            if (level <= 20) {
                batteryLiquid.classList.add("gradient-color-red");
                batteryLiquid.classList.remove("gradient-color-green", "gradient-color-orange", "gradient-color-yellow");
            } else if (level <= 48) {
                batteryLiquid.classList.add("gradient-color-orange");
                batteryLiquid.classList.remove("gradient-color-green", "gradient-color-red", "gradient-color-yellow");
            } else if (level <= 80) {
                batteryLiquid.classList.add("gradient-color-yellow");
                batteryLiquid.classList.remove("gradient-color-green", "gradient-color-orange", "gradient-color-red");
            } else {
                batteryLiquid.classList.add("gradient-color-green");
                batteryLiquid.classList.remove("gradient-color-red", "gradient-color-orange", "gradient-color-yellow");
            }
        }
        updateBattery();
        batt.addEventListener("chargingchange", () => { updateBattery() });
        batt.addEventListener("levelchange", () => { updateBattery });
    })
}
style.css 
wget 'https://lists2.roe3.org/mdrone/Battery-Indicator/style.css'
View Content 
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

*{
    font-family: 'Ubuntu';
    margin: 0;
    padding: 0;
}

:root{
    --gradient-color-red: linear-gradient(90deg, hsl(7, 89%, 46%) 15%, hsl(11, 93%, 68%) 100%);
    --gradient-color-orange : linear-gradient(90deg, hsl(22,89%,46%) 15%,hsl(54,90%,68%)100%);
    --gradient-color-yellow : linear-gradient(90deg,hsl(54,89%,46%) 15%,hsl(92,90%,45%)100%);
    --gradient-color-green : linear-gradient(90deg,hsl(92,89%,46%) 15%,hsl(92,90%,68%)100%);
}

body{
    background: #070707;
    color: #fff;
}

.battery{
    height: 100vh;
    display: grid;
    place-items: center;
    margin: 0 1.5rem;
}

.Bcard{
    position: relative;
    width: 270px;
    height: 240px;
    background: #222;
    padding: 0.5rem 1.5rem;
    border-radius: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

Btext{
    margin-bottom: 0.5rem;
}

.Bpercentage{
    font-size: 2.5rem;
}

.Bstatus{
    position: absolute;
    bottom: 3.5rem;
    display: flex;
    align-items: center;
    column-gap: 0.3rem;
    font-size: 0.8rem;
}

.Bstatus i{
    font-size: 1.25rem;
}

.Bpill{
    position: relative;
    width: 75px;
    height: 180px;
    background-color: #222;
    box-shadow: inset 20px 0 48px hsl(0, 0%, 16%), inset -4px 12px 48px hsl(0, 0%, 56%);
    border-radius: 3rem;
    justify-self: flex-start;
}

.Blevel{
    position: absolute;
    inset: 2px;
    border-radius: 3rem;
    overflow: hidden;
}

.Bliquid{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: var(--gradient-color-red);
    box-shadow: inset -10px 0 12px hsla(0, 0%, 0%, 0.1), inset 12px 0 12px hsla(0, 0%, 0%, 0.15);
    transition: 0.3s;
}

.Bliquid::after{
    content: "";
    position: absolute;
    height: 8px;
    box-shadow: inset 0 -3px 6px hsla(0, 0%, 0%, 0.2);
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -4px;
    border-radius: 50%;
}

.green-color{
    background: var(--gradient-color-green);
}

.animated-green{
    background: var(--gradient-color-green);
    animation: animated-charging 1.2s infinite alternate;
}

.animated-red{
    background: var(--gradient-color-red);
    animation: animated-low 1.2s infinite alternate;
}

.animated-green, .animated-red, .green-color{
    -webkit-background-clip: text;
    color: transparent;
}

@keyframes animated-charging{
    0%{
        text-shadow: none;
    }
    100%{
        text-shadow: 0 0 6px hsl(92, 90%, 68%);
    }
}

@keyframes animated-low{
    0%{
        text-shadow: none;
    }
    100%{
        text-shadow: 0 0 8px hsl(7, 89%, 46%);
    }
}

.gradient-color-red, .green-color-red::after{
    background: var(--gradient-color-red);
}

.gradient-color-green, .green-color-green::after{
    background: var(--gradient-color-green);
}

.gradient-color-orange, .green-color-orange::after{
    background: var(--gradient-color-orange);
}

.gradient-color-yellow, .green-color-yellow::after{
    background: var(--gradient-color-yellow);
}