<?php 
include('../includes/config.php');

if (isset($_GET['id'])) { 
    $searchid = mysqli_real_escape_string($conn, base64_decode($_GET['id']));
    mysqli_set_charset($conn, "utf8");

    $a = mysqli_query($conn, "SELECT * FROM mobile WHERE id='$searchid'");

    if(!$a){
        die("Query failed: " . mysqli_error($conn));
    }

    $data = mysqli_fetch_array($a);

    if(!$data){
        die("No data found for this ID.");
    }

    // Extract data
    $c_nm = $data['name'];
    $aadhaar_no = $data['aadhaar_no']; // Add this line
    $mobile_no = $data['mobile_no'];   // Add this line

    $nm_string = str_replace(' ', '', $c_nm);

} else {
    die("Missing ID parameter.");
}

// FALLBACK IMAGE PATHS
for($i=1;$i<=5;$i++){
    if(empty($data['finger'.$i])){
        $data['finger'.$i] = 'default.png';
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>

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

<link rel="icon" href="https://privacymode.in/assets/images/favicon-32x32.png" type="image/png">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>

<style>



:root {
    --fp-bright: 1;
    --fp-con: 1;
}

#finalPreview, .your-target-element {
    filter: brightness(var(--fp-bright)) contrast(var(--fp-con));
    transition: filter 0s linear !important; /* instant apply */
}




.finger-area img {
    transform: scaleX(-1) scale(var(--fp-zoom)) !important;
}






:root{
    --fp-size: 180px;
    --fp-zoom: 1;
    --fp-bright: 1;
    --fp-con: 1;
    --fp-filter: grayscale(1) contrast(1.6);
    --bg: #000;
    --text: #fff;
}

body{
    width:auto;
   
}

.light{
    --bg:#fff;
    --text:#000;
}


.editor-box{
    width:100%;
    height:auto;
    min-height:700px;
    background:var(--bg);
    border-radius:25px;
    overflow:hidden;
    position:relative;
}


/* TOP BAR */
.top-bar{
    display:flex;
    gap:10px;
    overflow-x:auto;
    background:#f6f6f6;
    padding:8px;
}
.top-bar button{
    background:#ddd;
    border:none;
    padding:6px 15px;
    border-radius:8px;
    cursor:pointer;
    white-space:nowrap;
}
#themeBtn{ background:#0099ff; color:#fff; }

/* TOP CONTROLS */
.top-controls{
    background:#eee;
    padding:7px;
    display:flex;
    gap:20px;
    justify-content:center;
}

/* SIDE SLIDERS */
.left-slider, .right-slider{
    position:absolute;
    top:35%;
    width:50px;
    height:45%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
}
.left-slider{ left:0; }
.right-slider{ right:0; }

.left-slider input,
.right-slider input{
    transform:rotate(-90deg);
    width:230px;
}







.bottom-bar {
    position: fixed;            /* स्क्रीन पर फिक्स */
    bottom: 0;                  /* नीचे चिपकाई */
    left: 0;
    width: 100%;                /* पूरी चौड़ाई मोबाइल की */
    background: #000000cc;      /* हल्का transparent black */
    padding: 8px 5px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    z-index: 999999;            /* सबके ऊपर */
    backdrop-filter: blur(8px); /* प्रो लुक */
}

/* thumbnails */
.bottom-bar .thumb {
    min-width: 60px;
    height: 75px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #444;
    flex-shrink: 0;
}

.bottom-bar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.f-title {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 10px;
    padding: 1px 3px;
    border-radius: 3px;
}




.top-controls {
    color: #222 !important;  /* TEXT ALWAYS VISIBLE */
    font-weight: bold;
    font-size: 14px;
}










/* % TEXT BELOW VERTICAL SLIDERS */
.slider-val{
    position: absolute;
    bottom: -25px;      /* SLIDER के नीचे */
    font-size: 13px;
    color: var(--text);
    font-weight: bold;
    width: 100%;
    text-align: center;
    pointer-events: none;
}














/* Top control bar ke upar finger images kabhi nahi aa sakte */
.top-controls {
    position: relative;
    z-index: 10;          /* हमेशा ऊपर रहेगा */
    background: #e5e5e5 !important;  /* पक्का background */
}

.finger-area { display: flex; gap: 0; /* columns के बीच कोई gap नहीं */ justify-content: flex-start; /* left align */ align-items: flex-start; /* top align */ padding: 0; margin: 0; } .finger-column { display: flex; flex-direction: column; gap: 1px; /* fingers के बीच सिर्फ 1px */ padding: 0; margin: 0; } .finger-column img { width: var(--fp-size); height: var(--fp-size); display: block; margin: 0; padding: 0; } .finger-area { display: flex; gap: 0; /* columns के बीच कोई gap नहीं */ justify-content: flex-start; /* left align */ align-items: flex-start; /* top align */ padding: 0; margin: 0; } .finger-column { display: flex; flex-direction: column; gap: 1px; /* fingers के बीच सिर्फ 1px */ padding: 0; margin: 0; } .finger-column img { width: var(--fp-size); height: var(--fp-size); display: block; margin: 0; padding: 0; }

/* ====================== CLEAN FIXED TOP CONTROLS ======================= */

.top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e5e5e5;
    padding: 6px 8px;        /* छोटी padding */
    border-radius: 6px;
    gap: 12px;               /* कम gap ताकि जगह बचे */
    margin-bottom: 6px;
}

/* TC Box = एक range का container */
.tc-box {
    display: flex;
    flex-direction: column;  /* label ऊपर, input नीचे */
    align-items: center;
    width: 50%;              /* एक लाइन में 2 box = 50% + 50% */
}

/* Label / Value */
.tc-box label,
.tc-box span {
    font-size: 11px;
    font-weight: bold;
    color: #000;
    margin-bottom: 1px;
}

/* Slider */
.tc-box input[type="range"] {
    width: 100%;
    height: 6px;
}




.left-slider { left: 0; }
.right-slider { right: 0; }

/* % bottom of slider */
.slider-val{
    position: absolute;
    bottom: -25px;
    font-size: 12px;
    font-weight: bold;
    color: var(--text);
    text-align: center;
    width: 100%;
}

/* vertical slider rotation */
.left-slider input,
.right-slider input{
    transform: rotate(-90deg);
    width: 230px;
}















.tc-box input[type="range"] {
    width: 90px;
}

.tc-box span {
    font-size: 12px;
    font-weight: bold;
    color: #000;
}






.f-title {
    position:absolute;
    bottom:3px;
    left:3px;
    background:rgba(0,0,0,0.45);
    color:#fff;
    font-size:9px;
    padding:1px 3px;
    border-radius:3px;
}
.thumb {
    position:relative; /* Required for overlay */
}














.finger-area {
    margin-top: 0px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 1px; /* images के बीच का distance */
    justify-items: center;
    padding: 0px;
}

/* सभी images */
.finger-area img {
    width: var(--fp-size);
    height: var(--fp-size);
    transform: scale(var(--fp-zoom));
    border-radius: 0px;
    padding: 0;
    filter: 
        brightness(var(--fp-bright)) 
        contrast(var(--fp-con)) 
        var(--fp-filter);
    transition: 0.15s;
    touch-action: none;
}

/* अगर दूसरी row में कम images हैं, उन्हें center करना */
.finger-area img:nth-child(n+4) {
    justify-self: center;
}




:root{
    --bg-dark:#020617;
    --bg-light:#f8fafc;
    --text-dark:#e5e7eb;
    --text-light:#020617;
}

/* DEFAULT DARK */
body{
    background:var(--bg-dark);
    color:var(--text-dark);
    transition:all .3s ease;
}

/* LIGHT THEME */
body.light{
    background:var(--bg-light);
    color:var(--text-light);
}

/* THEME BUTTON */
.thumb{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    padding:6px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
}
.thumb img{
    width:26px;
    height:26px;
}
.f-title{
    font-size:12px;
}

</style>
</head>


<body class="light">

<div class="editor-box">

   <!-- TOP BAR -->
<div class="top-controls" style="
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 16px;
    background:#e5e5e5;
    border-radius:12px;
    flex-wrap:wrap;
">

    <!-- ✔ APPLY BUTTON -->
    <button class="btn btn-primary" onclick="applySharpenToAll()"
        style="padding:6px 16px;font-size:22px;">✔</button>

    <!-- AADHAAR NUMBER -->
  <div class="user-info" style="padding:10px 15px; margin-bottom:10px; background:#f0f0f0; border-radius:12px; display:flex; flex-direction:column; gap:5px;">
    <div><strong>Name:</strong> <?php echo htmlspecialchars($c_nm); ?></div>
    <div><strong>Aadhaar No:</strong> <?php echo htmlspecialchars($aadhaar_no); ?></div>
    <div><strong>Mobile No:</strong> <?php echo htmlspecialchars($mobile_no); ?></div>
</div>



    
    <!-- ZOOM -->
    <div style="display:flex;align-items:center;gap:8px;font-weight:bold;">
        <button id="zoomMinus" style="font-size:22px;">-</button>
        <span id="zoomVal">52%</span>
        <button id="zoomPlus" style="font-size:22px;">+</button>
    </div>

    <!-- APPLY -->
    <button id="removeSelectBtn"
        style="
        margin-left:auto;
        padding:6px 12px;
        background:#16a34a;
        color:#fff;
        border:none;
        border-radius:6px;
        font-size:12px;
        font-weight:600;">
        Apply
    </button>

    
    <!-- 🔥 BLINK BUTTONS (BR LINE) -->
    <div style="display:flex; gap:8px; margin-top:8px;">
        <button id="blinkFast">FAST</button>
        <button id="blinkNormal">NORMAL</button>
        <button id="blinkSlow">SLOW</button>
    </div>
    
    
    
    <div style="margin-top:6px; display:flex; gap:6px;">
    <button id="op90">90%</button>
    <button id="op80">80%</button>
    <button id="op70">70%</button>
</div>


</div>









    <!-- LEFT BRIGHTNESS -->
    <div class="left-slider">
        <input id="bright" type="range" min="-200" max="400" value="400">
        <span id="brightVal" class="slider-val">0%</span>
    </div>

    <!-- RIGHT CONTRAST -->
    <div class="right-slider">
        <input id="contrast" type="range" min="-170" max="400" value="400">
        <span id="contrastVal" class="slider-val">0%</span>

    </div> 



 

    <!-- FINGER PRINTS -->
  <div class="finger-area">
    <div class="finger-column">
        <img src="<?php echo $data['finger1'] ?>">
        <img src="<?php echo $data['finger2'] ?>">
        <img src="<?php echo $data['finger3'] ?>">
    </div>
    <div class="finger-column">
        <img src="<?php echo $data['finger4'] ?>">
        <img src="<?php echo $data['finger5'] ?>">
    </div>
</div>



<!-- FILTER PREVIEWS -->
<div class="bottom-bar">

    <div class="thumb" onclick="setFilter('bw')">
	<img src="<?php echo $data['finger1'] ?>">
        <span class="f-title">B&W</span>
    </div>

    <div class="thumb" onclick="setFilter('invert')">
	<img src="<?php echo $data['finger2'] ?>">
        <span class="f-title">Invert</span>
    </div>

    <div class="thumb" onclick="setFilter('bw2')">
	<img src="<?php echo $data['finger3'] ?>">
        <span class="f-title">B&W2</span>
    </div>

   <div class="thumb" id="themeBtn" onclick="toggleTheme()">
   <img src="<?php echo $data['finger4'] ?>">
    <span class="f-title">Theme</span>
</div>


</div>

</div>



























<script>
document.addEventListener('DOMContentLoaded', function () {

    let selectionLocked = true;
    let skipGuard = false;

    const btn  = document.getElementById('removeSelectBtn');
    const area = document.querySelector('.finger-area');

    if (!btn || !area) return;

    function selectFingerArea() {
        const sel = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(area);
        sel.removeAllRanges();
        sel.addRange(range);
    }

    /* ===== INITIAL AUTO APPLY ===== */
    selectFingerArea();
    btn.innerText = 'Remove';
    btn.style.background = '#dc2626';

    /* ===== TOGGLE BUTTON ===== */
    btn.addEventListener('click', function () {

        if (selectionLocked) {
            // ---- REMOVE ----
            selectionLocked = false;
            skipGuard = true;

            window.getSelection().removeAllRanges();

            btn.innerText = 'Apply';
            btn.style.background = '#16a34a';

            setTimeout(() => skipGuard = false, 50);

        } else {
            // ---- APPLY ----
            selectionLocked = true;
            selectFingerArea();

            btn.innerText = 'Remove';
            btn.style.background = '#dc2626';
        }
    });

    /* ===== SELECTION GUARD ===== */
    document.addEventListener('selectionchange', function () {
        if (!selectionLocked || skipGuard) return;

        const sel = window.getSelection();
        if (!sel.rangeCount) {
            selectFingerArea();
            return;
        }

        const range = sel.getRangeAt(0);
        if (!area.contains(range.commonAncestorContainer)) {
            selectFingerArea();
        }
    });

});
</script>



<script>
// =================== ZOOM CONTROL ===================
(function(){
    const root = document.documentElement;
    const slider = document.getElementById("zoomSlider");
    const output = document.getElementById("zoomVal");

    if(!slider || !output) return;

    function apply(){
        const v = slider.value;
        root.style.setProperty("--fp-zoom", v/100);
        output.innerText = v + "%";
    }

    slider.addEventListener("input", apply);
    apply();
})();
</script>
<script>
// =================== ZOOM CONTROL (BUTTON ONLY) ===================
(function(){
    const root = document.documentElement;
    const slider = document.getElementById("zoomSlider");
    const output = document.getElementById("zoomVal");

    if(!slider || !output) return;

    function apply(){
        const v = slider.value;
        root.style.setProperty("--fp-zoom", v/100);
        output.innerText = v + "%";
    }

    slider.addEventListener("input", apply);
    apply();
})();
</script>
<script>
// =================== ZOOM CONTROL (BUTTON ONLY) ===================
(function(){

    const root   = document.documentElement;
    const output = document.getElementById("zoomVal");
    const btnPlus  = document.getElementById("zoomPlus");
    const btnMinus = document.getElementById("zoomMinus");

    let zoom = 52;        // ✅ AUTO APPLY 52%
    const min = 30;
    const max = 200;

    function apply(){
        output.innerText = zoom + "%";
        root.style.setProperty("--fp-zoom", zoom / 100);
    }

    btnPlus.addEventListener("click", () => {
        if (zoom < max) {
            zoom += 5;
            apply();
        }
    });

    btnMinus.addEventListener("click", () => {
        if (zoom > min) {
            zoom -= 5;
            apply();
        }
    });

    // ✅ page load par hi 52% apply
    apply();

})();
</script>







<script>
document.addEventListener("DOMContentLoaded", function () {

    // ======================
    // DEFAULT BLACK THEME
    // ======================
    document.documentElement.classList.add("dark-theme");

    // अगर आपके toggleTheme() class को add/remove करता है,
    // तो हम ensure कर देते हैं कि black theme active रहे
    if (typeof toggleTheme === "function") {
        toggleTheme();   // यदि theme default white है तो इसे black कर देगा
    }

    // ======================
    // DEFAULT INVERT FILTER
    // ======================
    if (typeof setFilter === "function") {
        setFilter("invert");  // page load होते ही invert apply
    }

});
</script>


<script>
let area = document.querySelector(".finger-area");
let images = document.querySelectorAll(".finger-area img");

let blockDrag = false;
let imgDrag = false;

// Variables for block
let b_startX = 0, b_startY = 0;
let b_moveX = 0, b_moveY = 0;

// Variables for single image
let i_startX = 0, i_startY = 0;

// --------------------------------------------
// 1️⃣ BLOCK DRAG (Your old system)
// --------------------------------------------
area.addEventListener("pointerdown", e => {

    // If clicked on an image, do NOT start block drag
    if (e.target.tagName === "IMG") return;

    blockDrag = true;
    area.setPointerCapture(e.pointerId);

    b_startX = e.clientX - b_moveX;
    b_startY = e.clientY - b_moveY;

    area.style.transition = "0s";
});

area.addEventListener("pointermove", e => {
    if (!blockDrag) return;

    b_moveX = e.clientX - b_startX;
    b_moveY = e.clientY - b_startY;

    area.style.transform = `translate(${b_moveX}px, ${b_moveY}px)`;
});

area.addEventListener("pointerup", e => {
    blockDrag = false;
    area.style.transition = "0.2s";
});

// --------------------------------------------
// 2️⃣ SINGLE FINGER DRAG
// --------------------------------------------
images.forEach(img => {

    let moveX = 0, moveY = 0;

    img.addEventListener("pointerdown", e => {
        imgDrag = true;
        img.setPointerCapture(e.pointerId);

        i_startX = e.clientX - moveX;
        i_startY = e.clientY - moveY;

        img.style.transition = "0s";

        e.stopPropagation();   // stops block drag
    });

    img.addEventListener("pointermove", e => {
        if (!imgDrag) return;

        moveX = e.clientX - i_startX;
        moveY = e.clientY - i_startY;

        img.style.transform =
           `translate(${moveX}px, ${moveY}px) scale(var(--fp-zoom))`;
    });

    img.addEventListener("pointerup", e => {
        imgDrag = false;
        img.style.transition = "0.2s";
    });
});
</script>


<script>
let intensity = 1.0;    
let radius = 5;
let originalSources = [];

// ---------------------------
// UPDATE INTENSITY (UI ONLY)
// ---------------------------
document.getElementById("sharpIntensity").addEventListener("input", () => {
    intensity = Number(document.getElementById("sharpIntensity").value);
    document.getElementById("sharpIntVal").innerText = intensity.toFixed(1);
});

// ---------------------------
// UPDATE RADIUS (UI ONLY)
// ---------------------------
document.getElementById("sharpRadius").addEventListener("input", () => {
    radius = Number(document.getElementById("sharpRadius").value);
    document.getElementById("sharpRadVal").innerText = radius;
});

// ---------------------------
// SAVE ORIGINAL IMAGES
// ---------------------------
window.onload = function () {
    const imgs = document.querySelectorAll(".finger-area img");
    imgs.forEach(img => originalSources.push(img.src));
};

// ---------------------------
// RESET (optional)
// ---------------------------
function resetImage(){
    const imgs = document.querySelectorAll(".finger-area img");
    imgs.forEach((img, i) => {
        img.src = originalSources[i];
    });
}

// ---------------------------
// APPLY SHARPEN TO ALL IMAGES
// ---------------------------
function applySharpenToAll() {

    const imgs = document.querySelectorAll(".finger-area img");

    imgs.forEach(img => {

        let c = document.createElement("canvas");
        let ctx = c.getContext("2d");

        c.width = img.naturalWidth;
        c.height = img.naturalHeight;

        ctx.drawImage(img, 0, 0);

        let imgData = ctx.getImageData(0, 0, c.width, c.height);
        let d = imgData.data;
        let copy = new Uint8ClampedArray(d);

        let r = radius;

        // ---------- SHARPEN LOOP ----------
        for (let y = r; y < c.height - r; y++) {
            for (let x = r; x < c.width - r; x++) {

                let i = (y * c.width + x) * 4;

                for (let k = 0; k < 3; k++) {

                    let val =
                        copy[i + k] * (1 + intensity * 4)
                        - copy[((y - r) * c.width + x) * 4 + k] * intensity
                        - copy[((y + r) * c.width + x) * 4 + k] * intensity
                        - copy[(y * c.width + (x - r)) * 4 + k] * intensity
                        - copy[(y * c.width + (x + r)) * 4 + k] * intensity;

                    d[i + k] = Math.max(0, Math.min(255, val));
                }
            }
        }

        ctx.putImageData(imgData, 0, 0);
        img.src = c.toDataURL();
    });

    // NO ALERT — silent apply
}
</script>







<script>
// =================== THEME SWITCHER ===================
(function(){
    const btn = document.getElementById("themeBtn");
    if(!btn) return;

    // ✅ Default = DARK
    document.body.classList.remove("light");

    btn.addEventListener("click", () => {
        document.body.classList.toggle("light");
    });
})();
</script>

 
<script>
// =================== FILTER ENGINE ===================
(function(){

    const root = document.documentElement;

    const FILTERS = {
        bw:      "grayscale(1) contrast(1.6)",
        bw2:     "grayscale(1) contrast(2) brightness(.9)",
        invert:  "invert(1)",
        light:   "brightness(1.28) contrast(1.1)",
        spark:   "brightness(1.1) contrast(1.7) saturate(1.3)",
        polish:  "contrast(1.6) brightness(1.1)",
        none:    "brightness(1) contrast(1)"
    };

    window.setFilter = function(type){
        if(!FILTERS[type]) return;
        root.style.setProperty("--fp-filter", FILTERS[type]);
    };

})();
</script>



<script>
(function UltraBrightness(){

    const root = document.documentElement;

    function init() {
        const slider = document.getElementById("bright");
        const output = document.getElementById("brightVal");
        if(!slider || !output){ return setTimeout(init, 50); }

        let lastValue = null;

        function apply(v){
            root.style.setProperty("--fp-bright", v/100);
            output.textContent = v + "%";
        }

        // REALTIME FRAME ENGINE (60 FPS)
        function loop(){
            const v = slider.value;
            if(v !== lastValue){
                lastValue = v;
                apply(v);
            }
            requestAnimationFrame(loop);
        }

        // MULTI-EVENT REDUNDANCY
        slider.addEventListener("input", ()=>apply(slider.value));
        slider.addEventListener("change", ()=>apply(slider.value));
        slider.addEventListener("mousemove", ()=>apply(slider.value));
        slider.addEventListener("touchmove", ()=>apply(slider.value));

        // FORCE-APPLY ENGINE (backup)
        setInterval(()=>apply(slider.value), 150);

        apply(slider.value);
        loop();
    }
    init();

})();
</script>
<script>
    
(function UltraContrast(){

    const root = document.documentElement;

    function init() {
        const slider = document.getElementById("contrast");
        const output = document.getElementById("contrastVal");
        if(!slider || !output){ return setTimeout(init, 50); }

        let lastValue = null;

        function apply(v){
            root.style.setProperty("--fp-con", v/100);
            output.textContent = v + "%";
        }

        // REALTIME FRAME ENGINE (Smooth 60 FPS)
        function loop(){
            const v = slider.value;
            if(v !== lastValue){
                lastValue = v;
                apply(v);
            }
            requestAnimationFrame(loop);
        }

        // MULTI-EVENT REDUNDANCY
        slider.addEventListener("input", ()=>apply(slider.value));
        slider.addEventListener("change", ()=>apply(slider.value));
        slider.addEventListener("mousemove", ()=>apply(slider.value));
        slider.addEventListener("touchmove", ()=>apply(slider.value));

        // BACKUP ENGINE (never stops)
        setInterval(()=>apply(slider.value), 150);

        apply(slider.value);
        loop();
    }
    init();

})();
</script>













<script>
(function BlinkFingerArea(){

    let intervalId = null;
    let speed = 250;        // blink speed
    let lowOpacity = 0.9;  // default blink depth
    let high = true;

    function startBlink(imgs, slider){
        if(intervalId) clearInterval(intervalId);

        intervalId = setInterval(() => {
            const v = Number(slider.value);

            if(v >= 300 && v <= 400){
                high = !high;
                imgs.forEach(img => {
                    img.style.opacity = high ? "1" : String(lowOpacity);
                });
            } else {
                imgs.forEach(img => {
                    img.style.opacity = "1";
                });
            }

        }, speed);
    }

    function init(){
        const imgs   = document.querySelectorAll(".finger-area img");
        const slider = document.getElementById("contrast");

        if(!imgs.length || !slider){
            return setTimeout(init, 50);
        }

        startBlink(imgs, slider);

        // SPEED buttons (already existing)
        document.getElementById("blinkFast")?.addEventListener("click", () => {
            speed = 120; startBlink(imgs, slider);
        });
        document.getElementById("blinkNormal")?.addEventListener("click", () => {
            speed = 250; startBlink(imgs, slider);
        });
        document.getElementById("blinkSlow")?.addEventListener("click", () => {
            speed = 400; startBlink(imgs, slider);
        });

        // 🔥 OPACITY buttons
        document.getElementById("op90")?.addEventListener("click", () => {
            lowOpacity = 0.9;
        });
        document.getElementById("op80")?.addEventListener("click", () => {
            lowOpacity = 0.8;
        });
        document.getElementById("op70")?.addEventListener("click", () => {
            lowOpacity = 0.7;
        });
    }

    init();

})();
</script>


<script>
(function () {

  /* ========= Right Click ========= */
  document.addEventListener("contextmenu", e => e.preventDefault(), true);

  /* ========= Keyboard Block ========= */
  document.addEventListener("keydown", e => {
    const k = e.keyCode;

    // F12
    if (k === 123) return block(e);

    // Ctrl + C / V / X / U / S / A
    if (e.ctrlKey && [67,86,88,85,83,65].includes(k)) {
      return block(e);
    }

    // Ctrl + Shift + I / J / C / K
    if (e.ctrlKey && e.shiftKey && [73,74,67,75].includes(k)) {
      return block(e);
    }
  }, true);

  /* ========= Copy / Paste ========= */
  ["copy","cut","paste","selectstart"].forEach(ev => {
    document.addEventListener(ev, e => block(e), true);
  });


<script>
document.addEventListener("keydown", function(e) {

  // Alt + F4  (Window Close)
  if (e.altKey && e.keyCode === 115) {
    e.preventDefault();
    return false;
  }

  // Ctrl + W / Ctrl + F4 (Tab Close)
  if (e.ctrlKey && (e.keyCode === 87 || e.keyCode === 115)) {
    e.preventDefault();
    return false;
  }

  // Ctrl + Shift + W
  if (e.ctrlKey && e.shiftKey && e.keyCode === 87) {
    e.preventDefault();
    return false;
  }

  // ESC key (optional)
  if (e.keyCode === 27) {
    e.preventDefault();
    return false;
  }

});
</script>





</body>
</html>