<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image with Text Overlays Preview</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        .page {
            width: 381mm;
            height: 863.6mm;
            margin: 20px auto;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            position: relative;
            page-break-after: always;
        }

        .page:last-of-type {
            page-break-after: auto;
        }

        .container {
            position: relative;
            width: fit-content;
            margin: 0;
        }
.content {
            
            transition: filter 0.3s ease; /* Smooth transition for blur */
        }
        .blur {
            filter: blur(5px); /* Blur effect */
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 0, 0.8); /* Red overlay */
            z-index: 1000; /* Ensure overlay is above content */
            display: none; /* Hide by default */
            color: white;
            text-align: center;
            padding: 20px;
            border-radius: 8px;
        }

        .image {
            display: block;
            width: 100%;
            height: auto;
            max-width: 100%;
            -webkit-touch-callout: none; /* Prevent image touch actions on mobile */
            -webkit-user-select: none; /* Prevent image selection on mobile */
            user-select: none; /* Prevent image selection */
            pointer-events: none; /* Prevent any mouse events */
        }

        .text {
            position: absolute;
            font-size: 24px;
            font-weight: bold;
        }
body {
            
            transition: filter 0.3s ease; /* Smooth transition for blur */
        }
        .blur {
            filter: blur(5px); /* Blur effect */
        }

        .english-text {
            color: red;
        }

        .odia-text {
            color: blue;
        }

        .prevent-copy {
            user-select: none;
        }

        .page-number {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 12px;
            color: #000;
        }

 body {
            -webkit-user-select: none; /* Safari and Chrome */
            -moz-user-select: none;    /* Firefox */
            -ms-user-select: none;     /* Internet Explorer/Edge */
            user-select: none;         /* Standard, non-prefixed version for modern browsers */
        }

        img {
            pointer-events: none; /* Disable clicking and selecting on images */
        }
.navigation-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px auto;
        width: 90%;
        max-width: 800px;
    }

    .nav-button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .nav-button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    .nav-button:hover:enabled {
        background-color: #45a049;
    }
    </style>
</head>
<body>
<div class="container">
    <img src="https://i.imgur.com/OBzwElD.jpeg" alt="Uploaded Image" class="image" draggable="false">
    
                    <div class="text" style="top: 5%; left: 5%; font-size: 24px;">
                        <span class="english-text prevent-copy" onclick="speakText('ram ')">ram </span>
                    </div>
                
                    <div class="text" style="top: 8%; left: 8%; font-size: 24px;">
                        <span class="english-text prevent-copy" onclick="speakText('hari')">hari</span>
                    </div>
                
                    <div class="text" style="top: 10%; left: 10%; font-size: 24px;">
                        <span class="odia-text prevent-copy" onclick="speakText('ହରି ')">ହରି </span>
                    </div>
                
</div>
<div class="container">    <img src="https://i.imgur.com/OBzwElD.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 90%; left: 38%; color: #ff0000; font-size: 20px;">                    <span class="english-text prevent-copy" onclick="speakText('AUDIO BOOK', 'Microsoft David - English (United States)')">AUDIO BOOK</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ପ୍ରଥମ ଶ୍ରେଣୀ ନିମନ୍ତେ ', 'Microsoft David - English (United States)')">ପ୍ରଥମ ଶ୍ରେଣୀ ନିମନ୍ତେ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/buNN6Ao.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 70px;">                    <span class="english-text prevent-copy" onclick="speakText('A', 'Microsoft Heera - English (India)')">A</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଏ ', 'Microsoft Heera - English (India)')">ଏ </span>                </div>                            <div class="text" style="top: 74%; left: 35%; color: #ff0000; font-size: 70px;">                    <span class="english-text prevent-copy" onclick="speakText('Apple', 'Microsoft Heera - English (India)')">Apple</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ସେଓ ', 'Microsoft Heera - English (India)')">ସେଓ </span>                </div>            </div>

<div class="container">    <img src="https://i.imgur.com/5lvZo4I.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 46%; left: 15%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Aeroplane ', 'Microsoft Heera - English (India)')">Aeroplane </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଉଡାଜାହାଜ ', 'Microsoft Heera - English (India)')">ଉଡାଜାହାଜ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/TuN7xBZ.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 4%; left: 42%; color: #ff0000; font-size: 69px;">                    <span class="english-text prevent-copy" onclick="speakText('B', 'Microsoft Heera - English (India)')">B</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବି ', 'Microsoft Heera - English (India)')">ବି </span>                </div>                            <div class="text" style="top: 67%; left: 37%; color: #ff0000; font-size: 69px;">                    <span class="english-text prevent-copy" onclick="speakText('Ball ', 'Microsoft Heera - English (India)')">Ball </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବଲ ', 'Microsoft Heera - English (India)')">ବଲ୍  </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/JsEDd8O.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 52%; left: 27%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Bag ', 'Microsoft Heera - English (India)')">Bag </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବ୍ୟାଗ ', 'Microsoft Heera - English (India)')">ବ୍ୟାଗ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/8GokJcA.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 2%; left: 47%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('C', 'Microsoft Heera - English (India)')">C</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ସି ', 'Microsoft Heera - English (India)')">ସି </span>                </div>                            <div class="text" style="top: 63%; left: 30%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Cat ', 'Microsoft Heera - English (India)')">Cat </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବିଲେଇ ', 'Microsoft Heera - English (India)')">ବିଲେଇ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/WTOMTly.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 47%; left: 43%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Cup', 'Microsoft Heera - English (India)')">Cup</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କପ୍ ', 'Microsoft Heera - English (India)')">କପ୍ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/W169d8S.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 5%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('D', 'Microsoft Heera - English (India)')">D</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଡି ', 'Microsoft Heera - English (India)')">ଡି </span>                </div>                            <div class="text" style="top: 63%; left: 34%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Dog ', 'Microsoft Heera - English (India)')">Dog </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କୁକୁର ', 'Microsoft Heera - English (India)')">କୁକୁର </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/wxL68fD.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 50%; left: 32%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Doll ', 'Microsoft Heera - English (India)')">Doll </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଖେଳଣା ', 'Microsoft Heera - English (India)')">ଖେଳଣା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/yIou0Dj.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 7%; left: 43%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('E', 'Microsoft Heera - English (India)')">E</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଇ ', 'Microsoft Heera - English (India)')">ଇ </span>                </div>                            <div class="text" style="top: 58%; left: 15%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Elephant', 'Microsoft Heera - English (India)')">Elephant</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ହାତୀ ', 'Microsoft Heera - English (India)')">ହାତୀ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/18ZFmGQ.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 65%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Egg ', 'Microsoft Heera - English (India)')">Egg </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଅଣ୍ଡା ', 'Microsoft Heera - English (India)')">ଅଣ୍ଡା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/LHSJmTn.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 7%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('F', 'Microsoft Heera - English (India)')">F</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଏଫ ', 'Microsoft Heera - English (India)')">ଏଫ </span>                </div>                            <div class="text" style="top: 71%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Fan', 'Microsoft Heera - English (India)')">Fan</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ପଙ୍ଖା ', 'Microsoft Heera - English (India)')">ପଙ୍ଖା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/Cc3mJc2.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 50%; left: 25%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Flower', 'Microsoft Heera - English (India)')">Flower</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଫୁଲ ', 'Microsoft Heera - English (India)')">ଫୁଲ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/TScLoL2.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 5%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('G', 'Microsoft Heera - English (India)')">G</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଜି ', 'Microsoft Heera - English (India)')">ଜି </span>                </div>                            <div class="text" style="top: 64%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Glass', 'Microsoft Heera - English (India)')">Glass</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଗ୍ଳାସ ', 'Microsoft Heera - English (India)')">ଗ୍ଳାସ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/lZGKPi5.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 50%; left: 30%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Goat', 'Microsoft Heera - English (India)')">Goat</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଛେଳି ', 'Microsoft Heera - English (India)')">ଛେଳି </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/trSNFgE.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 58%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Hen', 'Microsoft Heera - English (India)')">Hen</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କୁକୁଡ଼ା ', 'Microsoft Heera - English (India)')">କୁକୁଡ଼ା </span>                </div>                            <div class="text" style="top: 5%; left: 44%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('H', 'Microsoft Heera - English (India)')">H</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଏଚ ', 'Microsoft Heera - English (India)')">ଏଚ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/QLVJL5z.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 50%; left: 29%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('House', 'Microsoft Heera - English (India)')">House</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଘର ', 'Microsoft Heera - English (India)')">ଘର </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/lnqBrv7.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 60%; left: 29%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Iron', 'Microsoft Heera - English (India)')">Iron</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଆଇରନ ', 'Microsoft Heera - English (India)')">ଆଇରନ </span>                </div>                            <div class="text" style="top: 5%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('I', 'Microsoft Heera - English (India)')">I</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଆଇ ', 'Microsoft Heera - English (India)')">ଆଇ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/hdlZ2WZ.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 63%; left: 18%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Ice Cream', 'Microsoft Heera - English (India)')">Ice Cream</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଆଇସ୍  କ୍ରିମ ', 'Microsoft Heera - English (India)')">ଆଇସ୍  କ୍ରିମ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/uauCGA4.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 6%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('J', 'Microsoft Heera - English (India)')">J</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଜେ ', 'Microsoft Heera - English (India)')">ଜେ </span>                </div>                            <div class="text" style="top: 63%; left: 32%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Jug ', 'Microsoft Heera - English (India)')">Jug </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଜଗ୍ ', 'Microsoft Heera - English (India)')">ଜଗ୍ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/jVoTkeZ.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 52%; left: 30%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Jacket', 'Microsoft Heera - English (India)')">Jacket</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଜାକେଟ ', 'Microsoft Heera - English (India)')">ଜାକେଟ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/EG9Uw6F.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 3%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('K', 'Microsoft Heera - English (India)')">K</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କେ ', 'Microsoft Heera - English (India)')">କେ </span>                </div>                            <div class="text" style="top: 67%; left: 40%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Kite', 'Microsoft Heera - English (India)')">Kite</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଗୁଡ଼ି ', 'Microsoft Heera - English (India)')">ଗୁଡ଼ି </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/h9Hejlp.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 54%; left: 37%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Kettle', 'Microsoft Heera - English (India)')">Kettle</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କେଟଲି ', 'Microsoft Heera - English (India)')">କେଟଲି </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/uVnl6Ao.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 5%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('L', 'Microsoft Ravi - English (India)')">L</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଏଲ ', 'Microsoft Ravi - English (India)')">ଏଲ </span>                </div>                            <div class="text" style="top: 70%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Lion', 'Microsoft Ravi - English (India)')">Lion</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ସିଂହ ', 'Microsoft Ravi - English (India)')">ସିଂହ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/0z2Ydbo.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 50%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Leg', 'Microsoft Heera - English (India)')">Leg</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଗୋଡ ', 'Microsoft Heera - English (India)')">ଗୋଡ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/yrWTaLG.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 7%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('M', 'Microsoft Heera - English (India)')">M</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଏମ ', 'Microsoft Heera - English (India)')">ଏମ </span>                </div>                            <div class="text" style="top: 72%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Mango', 'Microsoft Heera - English (India)')">Mango</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଆମ୍ବ ', 'Microsoft Heera - English (India)')">ଆମ୍ବ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/KUY8zAV.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 60%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Monkey', 'Microsoft Heera - English (India)')">Monkey</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ମାଙ୍କଡ ', 'Microsoft Heera - English (India)')">ମାଙ୍କଡ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/nbBQQa9.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 13%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('N', 'Microsoft Heera - English (India)')">N</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଏନ୍  ', 'Microsoft Heera - English (India)')">ଏନ୍  </span>                </div>                            <div class="text" style="top: 72%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Nose', 'Microsoft Heera - English (India)')">Nose</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ନାକ ', 'Microsoft Heera - English (India)')">ନାକ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/e1JAnkp.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 60%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Nest', 'Microsoft Heera - English (India)')">Nest</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବସା ', 'Microsoft Heera - English (India)')">ବସା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/72cuubO.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('O', 'Microsoft Heera - English (India)')">O</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଓ ', 'Microsoft Heera - English (India)')">ଓ </span>                </div>                            <div class="text" style="top: 68%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Orange', 'Microsoft Heera - English (India)')">Orange</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କମଳା ', 'Microsoft Heera - English (India)')">କମଳା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/7oHER7p.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 60%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Onion', 'Microsoft Heera - English (India)')">Onion</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ପିଆଜ ', 'Microsoft Heera - English (India)')">ପିଆଜ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/Va4lwKH.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('P', 'Microsoft Heera - English (India)')">P</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ପି ', 'Microsoft Heera - English (India)')">ପି </span>                </div>                            <div class="text" style="top: 70%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Pen', 'Microsoft Heera - English (India)')">Pen</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କଲମ ', 'Microsoft Heera - English (India)')">କଲମ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/8ME47x9.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 60%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Pencil', 'Microsoft Heera - English (India)')">Pencil</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ପେନସିଲ ', 'Microsoft Heera - English (India)')">ପେନସିଲ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/c7bWNQg.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Q', 'Microsoft Heera - English (India)')">Q</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କିଉ ', 'Microsoft Heera - English (India)')">କିଉ </span>                </div>                            <div class="text" style="top: 70%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Quill', 'Microsoft Heera - English (India)')">Quill</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ପର ', 'Microsoft Heera - English (India)')">ପର </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/XuDqM0T.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 60%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Queen', 'Microsoft Heera - English (India)')">Queen</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ରାଣୀ ', 'Microsoft Heera - English (India)')">ରାଣୀ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/RxgPi0C.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('R', 'Microsoft Heera - English (India)')">R</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଆର ', 'Microsoft Heera - English (India)')">ଆର </span>                </div>                            <div class="text" style="top: 70%; left: 37%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Rat', 'Microsoft Heera - English (India)')">Rat</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ମୂଷା ', 'Microsoft Heera - English (India)')">ମୂଷା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/gJ9PuGb.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 64%; left: 35%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Rose', 'Microsoft Heera - English (India)')">Rose</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଗୋଲାପ ଫୁଲ ', 'Microsoft Heera - English (India)')">ଗୋଲାପ ଫୁଲ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/lmOmFzZ.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('S', 'Microsoft Heera - English (India)')">S</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଏସ ', 'Microsoft Heera - English (India)')">ଏସ </span>                </div>                            <div class="text" style="top: 70%; left: 30%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Snake', 'Microsoft Heera - English (India)')">Snake</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ସାପ ', 'Microsoft Heera - English (India)')">ସାପ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/1fLw4R0.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 64%; left: 37%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Star', 'Microsoft Heera - English (India)')">Star</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ତାରା ', 'Microsoft Heera - English (India)')">ତାରା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/fYDfOeG.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('T', 'Microsoft Ravi - English (India)')">T</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଟି ', 'Microsoft Ravi - English (India)')">ଟି </span>                </div>                            <div class="text" style="top: 70%; left: 25%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Tiger', 'Microsoft Ravi - English (India)')">Tiger</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବାଘ ', 'Microsoft Ravi - English (India)')">ବାଘ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/wMUfNMA.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 54%; left: 40%; color: #ff0000; font-size: 70px;">                    <span class="english-text prevent-copy" onclick="speakText('Table', 'Microsoft Heera - English (India)')">Table</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଟେବୁଲ ', 'Microsoft Heera - English (India)')">ଟେବୁଲ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/qIkr4fp.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 9%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('U', 'Microsoft Ravi - English (India)')">U</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ୟୁ ', 'Microsoft Ravi - English (India)')">ୟୁ </span>                </div>                            <div class="text" style="top: 70%; left: 30%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Umbrella', 'Microsoft Ravi - English (India)')">Umbrella</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଛତା ', 'Microsoft Ravi - English (India)')">ଛତା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/pHFS0oZ.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 54%; left: 40%; color: #ff0000; font-size: 70px;">                    <span class="english-text prevent-copy" onclick="speakText('Utensils', 'Microsoft Heera - English (India)')">Utensils</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବାସନ ', 'Microsoft Heera - English (India)')">ବାସନ </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/F58Nq2X.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 7%; left: 45%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('V', 'Microsoft Ravi - English (India)')">V</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଭି ', 'Microsoft Ravi - English (India)')">ଭି </span>                </div>                            <div class="text" style="top: 74%; left: 27%; color: #ff0000; font-size: 65px;">                    <span class="english-text prevent-copy" onclick="speakText('Violin ', 'Microsoft Ravi - English (India)')">Violin </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ବୀଣା ', 'Microsoft Ravi - English (India)')">ବୀଣା </span>                </div>            </div>
<div class="container">    <img src="https://i.imgur.com/IRMlx2V.jpeg" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 54%; left: 40%; color: #ff0000; font-size: 70px;">                    <span class="english-text prevent-copy" onclick="speakText('Van ', 'Microsoft Heera - English (India)')">Van </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ମଟର ଗାଡି ', 'Microsoft Heera - English (India)')">ମଟର ଗାଡି </span>                </div>            </div>
<div class="container">    <img src="blob:null/6c8210ed-0ff0-4562-a2bf-4db775e6965e" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 5%; left: 5%; color: #ff0000; font-size: 24px;">                    <span class="english-text prevent-copy" onclick="speakText('ji', 'Microsoft David - English (United States)')">ji</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('gygy', 'Microsoft David - English (United States)')">gygy</span>                </div>            </div>
<div class="container">    <img src="blob:null/6e375d1f-c9ca-47b8-b351-6604c69fa71b" alt="Uploaded Image" class="image" draggable="false">                    <div class="text" style="top: 5%; left: 5%; color: #ff0000; font-size: 24px;">                    <span class="english-text prevent-copy" onclick="speakText('hhh', 'Microsoft David - English (United States)')">hhh</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ଚକ ', 'Microsoft David - English (United States)')">ଚକ </span>                </div>                            <div class="text" style="top: 9%; left: 5%; color: #ff0000; font-size: 24px;">                    <span class="english-text prevent-copy" onclick="speakText('m', 'Microsoft David - English (United States)')">m</span><br>                    <span class="odia-text prevent-copy" onclick="speakText('କଳ ', 'Microsoft David - English (United States)')">କଳ </span>                </div>                            <div class="text" style="top: 16%; left: 5%; color: #ff0000; font-size: 24px;">                    <span class="english-text prevent-copy" onclick="speakText('ନଖ ', 'Microsoft David - English (United States)')">ନଖ </span><br>                    <span class="odia-text prevent-copy" onclick="speakText('ନଖ ', 'Microsoft David - English (United States)')">ନଖ </span>                </div>            </div>
<script>
    function speakText(text, lang) {
        const speech = new SpeechSynthesisUtterance(text);
        speech.lang = lang;
        window.speechSynthesis.speak(speech);
    }

    // Prevent right-click and image download
    document.querySelectorAll('.image').forEach(img => {
        img.addEventListener('contextmenu', (e) => e.preventDefault());
    });
</script>
<script>
        document.addEventListener('contextmenu', function(event) {
            event.preventDefault();
        });

        document.addEventListener('touchstart', function(event) {
            if (event.touches.length > 1) {
                event.preventDefault();  // Prevent multi-touch actions
            }
        });
    </script>
<script>
document.addEventListener("keydown", e => {
  // USE THIS TO DISABLE CONTROL AND ALL FUNCTION KEYS
  // if (e.ctrlKey || (e.keyCode>=112 && e.keyCode<=123)) {
  // THIS WILL ONLY DISABLE CONTROL AND F12
  if (e.ctrlKey || e.keyCode==123) {
    e.stopPropagation();
    e.preventDefault();
  }
});
</script>
<script>document.addEventListener('keydown', function(event) { if (event.ctrlKey && event.key === 'u') { event.preventDefault(); alert('Ctrl+U is disabled.'); } }); </script>



</body>
</html>
 <script>
        // Function to blur content
        function blurContent() {
            const content = document.getElementById('content');
            const overlay = document.getElementById('overlay');

            // Apply blur effect and show overlay
            content.classList.add('blur');
            overlay.style.display = 'block';
        }

        // Function to unblur content
        function unblurContent() {
            const content = document.getElementById('content');
            const overlay = document.getElementById('overlay');

            // Remove blur effect and hide overlay
            content.classList.remove('blur');
            overlay.style.display = 'none';
        }

        // Listen for touch events to detect long-press
        let longPressTimeout;

        document.addEventListener('touchstart', (event) => {
            longPressTimeout = setTimeout(() => {
                blurContent(); // Blur on long-press
            }, 500); // 500 ms for long-press
        });

        document.addEventListener('touchend', () => {
            clearTimeout(longPressTimeout); // Clear timeout on touch end
            unblurContent(); // Optionally unblur when touch ends
        });

        // Optionally listen for click events to unblur
        document.addEventListener('click', unblurContent);
    </script>
<script>
        // Disable right-click on the page
        document.addEventListener('contextmenu', event => event.preventDefault());

        // Disable text selection and copying
        document.addEventListener('copy', function(event) {
            event.preventDefault();
            alert('Copying content is disabled.');
        });
    </script>
  
