Blancer.com Tutorials and projects

At the bottom of https://new.dekoolputten.be/ I have a section with a few images on the left hand side. I prevent the window from scrolling when they reached the bottom of this section. Then you can only scroll further when you scrolled through the images on the left hand side.

This works via the code below, but I want this to go automatically, so when they reach the end of the section the focus should be in the images div and should scroll automatically. Now you have to hover or click on them.

How can I move the focus of the mouse to a scrollable div?

var image_scroll_bottom, image_scroll_top, image_end, scrollPosition;
$(document).ready(function() {
  image_end = false;
  image_scroll_top = $(".image-scroll-section").offset().top;
  image_scroll_bottom = $(".image-scroll-section").offset().top + $(".image-scroll-section").height();
});

function enableScroll() {
  window.onscroll = function() {};
}

$(window).on("scroll", function() {
  scrollPosition = $(window).height() + $(window).scrollTop();

  if (image_scroll_bottom <= scrollPosition) {
    //tried to put the focus on the images div with no succes
    $(".image-scroll-row .et_pb_column-").focus();
    $(".image-scroll-row .et_pb_column-").trigger('click');
    $(".image-scroll-row .et_pb_column-").click();
    if (!image_end) scrollTo(0, image_scroll_top);
  } else {
    //dont prevent scrolling
  }
});

$(".image-scroll-row").on("scroll", function() {
  if ($(window).scrollTop() >= $('.image-scroll-row .et_pb_column').offset().top + $('.image-scroll-row .et_pb_column').outerHeight() - window.innerHeight) {
    console.log('image at end');
    image_end = true;
  } else {
    console.log('image NOT at end');
    image_end = false;
  }
});

I was working with:

https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template

so a free template with NextJS template. When i download it and run it works just fine.
I reorganize the files- just move the files into different folder and refactor.
After moving files, i get:

Error: Invalid declaration: `U as UserConfig, P as Plugin`

./app/dashboard/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/dashboard/globals.css

Error: Invalid declaration: `U as UserConfig, P as Plugin`
    at async Promise.all (index 0)

Heres the folder structure:

    Directory: C:UsersuserDesktopclient-testdashboardclient


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         6/12/2025  10:46 AM                .idea
d-----         6/12/2025  10:47 AM                .next
d-----         6/12/2025  10:46 AM                app
d-----         6/12/2025  10:45 AM                assets
d-----         6/12/2025  10:44 AM                components
d-----         6/12/2025  10:47 AM                node_modules                                                                                                                                                                     
d-----         6/12/2025  10:41 AM                public
d-----         6/12/2025  10:45 AM                shared
-a----         6/12/2025   9:56 AM             43 .eslintrc.json
-a----         6/12/2025   9:56 AM            435 .gitignore
-a----         6/12/2025   9:56 AM        1430718 banner.png                                                                                                                                                                       
-a----         6/12/2025   9:56 AM            409 eslint.config.mjs
-a----         6/12/2025   9:56 AM             97 jsvectormap.d.ts
-a----         6/12/2025   9:56 AM           1087 LICENSE
-a----         6/12/2025  10:42 AM            216 next-env.d.ts
-a----         6/12/2025   9:56 AM            282 next.config.ts
-a----         6/12/2025  10:47 AM         330777 package-lock.json
-a----         6/12/2025   9:56 AM           1680 package.json
-a----         6/12/2025   9:56 AM             77 postcss.config.js
-a----         6/12/2025   9:56 AM             68 prettier.config.js
-a----         6/12/2025   9:56 AM           6480 README.md
-a----         6/12/2025   9:56 AM            241 svg.d.ts                                                                                                                                                                         
-a----         6/12/2025   9:56 AM            629 tsconfig.json

Deleting the cache:

Remove-Item -Recurse -Force .next, node_modules, package-lock.json

Doesnt fix the error.

The error is after moving the files! I didnt change anything in any files. Why i get this error? How to fix it?

I am a JS newbie trying to understand some JS code. To make things easier for me, I have rewritten a variable that is passed to a function. The relevant part of the function is shown below:

function inscrutableFxn({ state, view, reducers = {} }) {

    // When I use 'experimentalReducers' execution never enters this for loop
    for (const actionName in reducers) {
        const reducer = reducers[actionName]         
        
    }
}

The original variable that makes the script run smoothly is called “myReducers” and its code is shown below.
My version of the variable is called “experimentalReducers” and it too is given below.

When I feed both names into the typeof() function I get the response “object”.

But, there seems to be a subtle difference between “myReducers” and “experimentalReducers”, that I can’t figure out. Why are these two variables different?

Code for both is given below:

const myReducers = {
    add: (state) => ({count: state.count + 1}),
    sub: (state) => ({count: state.count - 1}),
}

const experimentalReducers = {}
experimentalReducers['add'] = (payload) => {
    const newState = { count: 0 }
    newState.count = payload.count + 1
    return newState
}

experimentalReducers['sub'] = (payload) => {
    const newState = { count: 0 }
    newState.count = payload.count - 1
    return newState
}

console.log("experimentalReducers")
for (const x in experimentalReducers)
    console.log(x)

console.log("myReducers")
for (const x in myReducers)
    console.log(x)

PS: I expect to plug “experimentalReducers” into the function and have the function run just as it does with “myReducers”.

In Odoo 17 I want to create a https://[ip|domain]/path/[hashed-id-of-subsheet].csv url link which will download a specific subsheet of the Odoo Sheets. We will give this URL to some suppliers which will contain specific data from our system

I need to add an option in Odoo Sheet “File > Export > Create CSV link” which will bring a popup wizard & ask me what subsheet do I want to create a csv link for.

A public url link will be generated, anyone on the internet with that link can download the subsheet in a csv format.

Next time I open the same wizard it should show me all the links generated. I can have multiple links per subsheet, and should be able to delete the links as well. So this way I can give different URLs to different suppliers for same subsheet, and delete the links later on if I want to stop access for a supplier.

This spreadsheet is on the document module, I am unable to get any relevant search result to achieve this

also I don’t want to give partner any portal access, I want to send the downloadable link

In Odoo 17 I want to create a https://[ip|domain]/path/[hashed-id-of-subsheet].csv url link which will download a specific subsheet of the Odoo Sheets. We will give this URL to some suppliers which will contain specific data from our system

I need to add an option in Odoo Sheet “File > Export > Create CSV link” which will bring a popup wizard & ask me what subsheet do I want to create a csv link for.

A public url link will be generated, anyone on the internet with that link can download the subsheet in a csv format.

Next time I open the same wizard it should show me all the links generated. I can have multiple links per subsheet, and should be able to delete the links as well. So this way I can give different URLs to different suppliers for same subsheet, and delete the links later on if I want to stop access for a supplier.

Be aware that we can have multiple subsheets across different sheets with same name, so store the links against subsheet IDs. So this way in the future if the subsheet name is also changed then too the link will be valid + if a subsheet is deleted then the link(s) should also get deleted.

This ability to generate public link url should be accessible only via a specific access group, to prevent misuse of internal data.

This spreadsheet is on the document module, I am unable to get any relevant search result to achieve this

I’m using Tone.js in my project to analyse my uploaded audio file where I have played a music piece. With that analysis I want to show a question about audio that is connect to the music theory. When the user answers the question it shows if you have answered right or wrong and explanation.

With some audio files it gives the right explanation, but by some it gives wrong eventhough I know I have answered correctly. Can someone help me?

Here is a code snipped from a function

async function analyzeAudio() {
const fileInput = document.getElementById("audioUpload").files[0];
if (!fileInput) {
    alert(currentLanguage === "en" ? "Upload an audio file!" : "Upload een audio-bestand!");
    return;
}

//Upload audio file from your files
const audioPlayer = document.getElementById("audioPlayer");
audioPlayer.src = URL.createObjectURL(fileInput);
audioPlayer.style.display = "block";
audioPlayer.load();

//Read and analyze the uploaded audio
const reader = new FileReader();
reader.readAsArrayBuffer(fileInput);
reader.onload = async () => {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    audioBuffer = await audioContext.decodeAudioData(reader.result);

    const offlineContext = new OfflineAudioContext(1, audioBuffer.length, audioBuffer.sampleRate);
    const source = offlineContext.createBufferSource();
    source.buffer = audioBuffer;

    const analyser = offlineContext.createAnalyser();
    analyser.fftSize = 2048;
    const dataArray = new Uint8Array(analyser.frequencyBinCount);

    // console.log(dataArray)

    source.connect(analyser);
    analyser.connect(offlineContext.destination);
    source.start();

    await offlineContext.startRendering();

    analyser.getByteFrequencyData(dataArray);
    generateQuestion(dataArray);
};

}

Edit:
Here is a snipped for when analyzing the scale of my uploaded audio

function analyzeScale(dataArray) {
let oddHarmonics = 0, evenHarmonics = 0;

for (let i = 1; i < dataArray.length; i += 2) {
    oddHarmonics += dataArray[i];
}
for (let i = 2; i < dataArray.length; i += 2) {
    evenHarmonics += dataArray[i];
}

if (oddHarmonics > evenHarmonics) {
    correctAnswer = "minor";
    explanation = "This music contains relatively many odd harmonics, which suggests a minor scale with a darker sound.";
} else {
    correctAnswer = "major";
    explanation = "This music contains relatively many even harmonics, which is characteristic of a major scale with a brighter sound.";
}

document.getElementById("question").innerText = "Is this music in a major or minor key?";

}

And answer check

function checkAnswer() {
const userAnswer = document.getElementById("answer").value.toLowerCase();
const feedback = document.getElementById("feedback");

if (userAnswer === correctAnswer) {
    feedback.innerHTML = `Correct! ${explanation}`;
    questionIndex++; // Move to the next question
    setTimeout(askNextQuestion, 3000);
} else {
    feedback.innerHTML = `Incorrect. ${explanation} Try again!`;
}

}

After I upload my audio, on the page it shows the question: Is this music in a major or minor key?

For example I answer minor key and get it right. I will get the explanation: This music contains relatively many odd harmonics, which suggests a minor scale with a darker sound.

But with another audio which I know is also played in minor key and answer it. I somehow get that I have answered wrong eventhough I now for sure it’s right

I’ve modal and copy it from another modal which has been removed because of no need.
The problem is that Modal popup not showing after copy / paste from the parent Modal.

        <div class="modal fade" id="modalRegistrationForm" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        <label style="color:black">&nbsp; &nbsp;<i class="bi bi-book">&nbsp; &nbsp; &nbsp; &nbsp;</i>Nadeem Learning Center - Online 
                        </label>
                    </h1>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="hideRegModal()"><span aria-hidden="true">&times;</span>
                     </button>
                </div>
                <div style="font-size:10px; color:black">
                    <center><br>
                     <h4><i class="fa fa-user-o" aria-hidden="true"  style="color:green"></i> Sign Up </h4>
                     <i class="fa fa-school"></i>
                     <i class="fa-solid fa-person-chalkboard"></i>
                    </center>
                </div>
                <div class="man">
                    <div class="form-group">
                        <span class="fa fa-user form-control-icon"></span>
                        <input type="name" class="form-control validate" placeholder="Name" id="reg_name">
                        <span style="color:red" id="name-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-envelope form-control-icon"></span>
                        <input type="email" class="form-control validate" placeholder="Email" id="reg_email">
                        <span style="color:red" id="email-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-lock form-control-icon"></span>
                        <input type="password" class="form-control validate" placeholder="password" id="reg_pass">
                        <span style="color:red" id="password-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-phone form-control-icon"></span>
                        <input type="phone" class="form-control validate" placeholder="phone" id="reg_phone" onkeypress='validate(event)'>
                        <span style="color:red" id="phone-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-check form-control-icon"></span>
                        <button type="button" class="btn btn-success form-control" onclick="validateRegForm();">SignUp</button>
                    </div>
                    <div style="font-size:12px; color:black">
                        <center><label> By clicking Sign Up, you agree to our 
                                <a data-target="#termscondition" data-toggle="modal" href="javascript:justLoadMe2()">Terms and Condition </a> 
                                and <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:justLoadMe3()"> Privacy Policy.</a>
                            </label>
                        </center>
                    </div>
                    <div class="form-group">
                        <span style="color:red" id="save_status" class="error-message"></span>
                    </div>
                </div>
            <div>
        </div>
    </div>

I am using like this to show up the modal.

function RegistrationForm(){
        alert("is showing up");
        modal_var = document.getElementsByClassName('modal')[3];
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

alert is showing up but no modal.
How to find the exact number of modal by ClassName?

Code Updated

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Nadeem Learning Center - Online</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <!-- Favicons -->
    <link href="favicon.png" rel="icon">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <!-- Vendor CSS Files -->
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/aos/aos.css" rel="stylesheet">
    <!-- Template Main CSS File -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link id="bootstrap-css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="font/css/font-awesome.min.css">
    <link href="assets/css/main.css" rel="stylesheet">
    
    <style>
        div.modal-content {
            top: 10px;
            background: #9fafff;
        }

        div.modal-dialog{
            overflow-y: initial !important
        }

        div.modal-content_1 {
            top: 100px;
            background-image: url("Modal_BG.jpg");
        }

        .man {
            width: 80%;
            margin: 50px auto;
        }

        .form-group .form-control {
            padding-left: 2.375rem;
        }

        .form-group .form-control-icon {
            position: absolute;
            z-index: 2;
            display: block;
            width: 2.375rem;
            height: 2.375rem;
            line-height: 2.375rem;
            text-align: center;
            pointer-events: none;
            color: #aaa;
        }
    </style>
</head>

<body onload="myfunction();">
    <!-- ======= Header ======= -->
    <header id="header" class="header d-flex align-items-center fixed-top">
        <div class="container-fluid d-flex align-items-center justify-content-between">
            <a href="index.php" class="logo d-flex align-items-center  me-auto me-lg-0">
                <i class="bi bi-book"></i>
                <img src="images/logo.jpg">
            </a>

            <nav id="navbar" class="navbar">
                <ul>
                    <li> <a href="javascript:RegistrationForm();"> <i class="bi bi-patch-check" style="font-size:26px; color:orange"></i>&nbsp; Learning</a></li>   
                    <li> <a href="javascript:RegistrationForm();"><i class="bi bi-pencil-square" style="font-size:26px; color:orange"></i>&nbsp; Teaching</a></li>
                </ul>
            </nav>

            <!-- ################   navbar ################# -->
            <div class="header-social-links ">
                <!--<button type="button" class="btn btn-dark btn-sm"><i class="bi bi-door-open"></i>&nbsp; LogIn</button>-->
                <!-- <button type="button" name="login" class="btn btn-dark btn-sm" onclick="logmein()"> <i class="bi bi-door-open"></i>&nbsp; Sign In </button> -->
            </div>
                <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
                <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
        </div>
    </header>   <!-- End Header -->

    <!--#################### Set Cookie Model for new User  [0] -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom-color: #1c0f21;">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                    <label><i class="bi bi-book">&nbsp;</i>&nbsp;Nadeem Learning Center - Online </label>
                    </h1>
                </div>
                
                <div class="modal-body">
                    <p style="text-align:center"> <label style="color:black; font-size:24px"><i class="bi bi-cookie"></i>&nbsp; Respect Your Privacy </label></p>
                    <p style="text-align:center"> <label style="color:black">This website uses cookies for improving the user experience.</label></p>
                    <!-- Modal Form-->
                     <form action="javascript:void(0);" method="post">
                        <div class="mb-3">
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="agree_Check" disabled="disabled" checked="checked" style="display:none">
                            <label class="form-check-label" for="exampleCheck1" style="display:none">I agreed <b>"to the terms and conditions"</b></label>
                        </div> &nbsp; &nbsp; &nbsp;
                        <div class="modal-footer" style="border-bottom-color: #1c0f21;">
                            <p style="text-align:center">
                                <button type="button" class="btn btn_custom" onclick="hideModal()" onmousedown="clr_chng()">
                                    <i class="bi bi-check"></i>Accept
                                </button> &nbsp; &nbsp; 
                                <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:readMore()">
                                    <p style="text-align:center"><i class="fa fa-book" style="color:blue"></i> Read More</p>
                                </a>
                                <button type="button" class="btn btn_custom" onclick="hideModal()"><i class="bi bi-cross"></i>Cancel</button>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
       </div>
    </div>

    <!-- #################### Privacy Policy  [1] -->
    <div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                    <label style="color:black">&nbsp; &nbsp;<i class="bi bi-book">&nbsp; &nbsp; &nbsp; &nbsp;</i>Nadeem Learning Center - Online </label>
                    </h1>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="Thanks()"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <p style="text-align:center"> 
                    <label style="color:black; font-size:24px"><i class="bi bi-clipboard-check"></i>&nbsp; Privacy Policy </label></p>
                    <form action="javascript:void(0);" method="post">
                        <div class="mb-3">
                            
                        </div>
                        <div class="modal-footer" style="border-bottom-color: #1c0f21;">
                            <button type="button" class="btn btn_custom" onclick="Thanks()"><i class="bi bi-arrow-left-circle"></i>&nbsp;Go Back</button>
                            <a data-target="#termscondition" data-toggle="modal" href="javascript:termsCondition()">
                                <p><i class="bi bi-clipboard-data">&nbsp;</i>Terms and Condition. </p>
                            </a> 
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- #################### Terms & Conditions    [2] -->
    <div class="modal fade" id="termscondition" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom-color: #1c0f21;">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel"> <label><i class="bi bi-book">&nbsp;</i>&nbsp;Nadeem Learning Center - Online </label>
                    </h1> 
                </div>
            <div class="modal-body">
                <p style="text-align:center"> <label style="color:black; font-size:24px"><i class="bi bi-clipboard-check"></i>&nbsp; Terms & Conditions </label></p>
                <!-- Modal Form style="color:blue;text-align:center;" -->
                <form action="javascript:void(0);" method="post">
                    <div class="mb-3"> 
                        
                    </div>
                    <div class="modal-footer" style="border-bottom-color: #1c0f21;">
                        <button type="button" class="btn btn_custom" onclick="chupaChoro()"><i class="bi bi-cross"></i>&nbsp;Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- #################### Registration ###############  [3] -->
    <div class="modal fade" id="modalRegistrationForm" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        <label style="color:black">&nbsp; &nbsp;<i class="bi bi-book">&nbsp; &nbsp; &nbsp; &nbsp;</i>Nadeem Learning Center - Online 
                        </label>
                    </h1>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="hideRegModal()"><span aria-hidden="true">&times;</span>
                     </button>
                </div>
                <div style="font-size:10px; color:black">
                    <center><br>
                     <h4><i class="fa fa-user-o" aria-hidden="true"  style="color:green"></i> Sign Up </h4>
                     <i class="fa fa-school"></i>
                     <i class="fa-solid fa-person-chalkboard"></i>
                    </center>
                </div>
                <div class="man">
                    <div class="form-group">
                        <span class="fa fa-user form-control-icon"></span>
                        <input type="name" class="form-control validate" placeholder="Name" id="reg_name">
                        <span style="color:red" id="name-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-envelope form-control-icon"></span>
                        <input type="email" class="form-control validate" placeholder="Email" id="reg_email">
                        <span style="color:red" id="email-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-lock form-control-icon"></span>
                        <input type="password" class="form-control validate" placeholder="password" id="reg_pass">
                        <span style="color:red" id="password-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-phone form-control-icon"></span>
                        <input type="phone" class="form-control validate" placeholder="phone" id="reg_phone" onkeypress='validate(event)'>
                        <span style="color:red" id="phone-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-check form-control-icon"></span>
                        <button type="button" class="btn btn-success form-control" onclick="validateRegForm();">SignUp</button>
                    </div>
                    <div style="font-size:12px; color:black">
                        <center><label> By clicking Sign Up, you agree to our 
                                <a data-target="#termscondition" data-toggle="modal" href="javascript:justLoadMe2()">Terms and Condition </a> 
                                and <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:justLoadMe3()"> Privacy Policy.</a>
                            </label>
                        </center>
                    </div>
                    <div class="form-group">
                        <span style="color:red" id="save_status" class="error-message"></span>
                    </div>
                </div>
            <div>
        </div>
    </div>
<!--    THis one is extra. After removing the whole design not work -->
</div></div></div>





<!--#################   -->
<section id="hero" class="hero" data-aos="fade" data-aos-delay="1500">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center">
                <h2 style="font-size:36px; color:red"><br><br>Resource <span>for Learners</span> </h2>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="wrap">
                <div class="search">
                    <input type="text" class="searchTerm glowing-border" placeholder="What are you looking for?">
                    <button type="submit" class="searchButton glowing-border">
                    <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>
        <br>
    </div>
</section>

<main id="main" data-aos="fade" data-aos-delay="1500">
    <section id="gallery" class="gallery">
        <div class="container-fluid">
            <div class="row gy-4 justify-content-center">
                <?php
                 while ($row = $result->fetch_assoc()) 
                 {
                    echo '<div class="col-xl-3 col-lg-4 col-md-6">';
                    echo '<div class="gallery-item h-100">';
                    echo '<img src="' . $row['url_src'] . '" class="img-fluid" alt="404 Not Found">';
                    echo '<div class="gallery-links d-flex align-items-center justify-content-center">';
                    // #OLD CODE 29-May-2025# echo '<a href="'. $row['url_video'] . '" title="Education" class="glightbox preview-link" data-glightbox="title: <h5>'.$row['Description'].'</h5>; description: <p>'.$row['descriptionLong'].' <br><br> <a href='.$row['url_tar'].'>Read more...</p></a><br><br> '.$row['Para1'].' <br><br> '.$row['Para2'].'</p>; descPosition: right;"> <i class="bi bi-arrows-angle-expand"> </i></a>';
                    echo '<a href="'. $row['url_video'] . '" title="Education" class="glightbox preview-link" data-glightbox="title: <h5>'.$row['Description'].'</h5>; description: <p>'.$row['descriptionLong'].' <br><br> <a target='."_blank".' href='."mailto:[email protected]".'>[email protected]...</p></a><br><br> '.$row['Para1'].' <br><br> '.$row['Para2'].'</p>; descPosition: right;"> <i class="bi bi-arrows-angle-expand"> </i></a>';
                    echo '<a href=# onclick="javascript:loadpage(id)" id="'. $row['Name'] . '" class="details-link" ><i class="bi bi-link-45deg"></i></a>';
                echo '</div>';
            echo '</div>';
        echo '</div>';
      }
    ?>     
</main> 

<footer id="footer" class="footer">
    <div class="container">
        <div class="copyright">
            
            <br>
            <span style="color:white;">The Nadeem Learning Center - ONLINE is not responsible for the content of external sites. 
                 Read about our approach to <a>external linking.</a></span>
                 <div class="header-social-links ">
                    <a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
                    <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="instagram"><i class="bi bi-instagram"></i></a> 
                    <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
                    <a href="#" class="youtube"><i class="bi bi-youtube"></i></i></a>
                </div>
        </div>
        <div class="credits">
            A Project of <a href="#" onMouseOver="this.style.color='white'" onMouseOut="this.style.color='green'">Learning & Teaching.</a> 
            <br>
            <a href="mailto: [email protected]" onMouseOver="this.style.color='white'" onMouseOut="this.style.color='green'">[email protected]</a>
        </div>
    </div>
</footer>
<!-- End Footer -->

<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<div id="preloader">
    <div class="line"></div>
</div>

<!-- Vendor JS Files -->
 <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
 <script src="assets/vendor/php-email-form/validate.js"></script>
 <!-- Template Main JS File -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <!--<script src="assets/js/program.js"></script>
 <script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/bundles/4.20.0/compiled.min.js"></script>-->
 <script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/search-v4/search.min.js"></script>
 <!--<script src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/main.min.js"></script>-->



<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event){
        });
</script>

<script type="text/javascript"> 
    function loadpage(a){
        document.location.href = '/I_detail.php?p_id=' + encodeURIComponent(a);
    }

    

    function myfunction(){
        //################------------Set or Retrieve Cookie Message------################----document load function------######
    }


    function hideModal(){
        //###############-----------Used to hide the Cookie Modal---------
                modal_var = document.getElementsByClassName('modal')[0];
                modal_var.removeAttribute("style");
                modal_var.removeAttribute("aria-modal");
                modal_var.removeAttribute("role");
                modal_var.classList.remove("show");
                modal_var.setAttribute("style", "display: none");
                modal_var.setAttribute("aria-hidden", "true");
            }
        console.log('hide MOdel Message');
    }


    function RegistrationForm(){
        alert("is showing up");
        
        modal_var = document.getElementById("modalRegistrationForm");
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }


    function readMore(){
        //#############-----1. Close the Modal[0] , ######--2. Open the modal Privacy Policy [1]
        hideModal();
        modal_var = document.getElementsByClassName('modal')[1];
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

    function Thanks() {
        // #############----- close the modal[1] privacy modal 
        modal_var = document.getElementsByClassName('modal')[1];
        modal_var.removeAttribute("style");
        modal_var.removeAttribute("aria-modal");
        modal_var.removeAttribute("role");
        modal_var.classList.remove("show");
        modal_var.setAttribute("style", "display: none");
        modal_var.setAttribute("aria-hidden", "true");
    }

    function Thanks2() {
        // #############----- close the modal[2] Terms and Condition 
        modal_var = document.getElementsByClassName('modal')[2];
        modal_var.removeAttribute("style");
        modal_var.removeAttribute("aria-modal");
        modal_var.removeAttribute("role");
        modal_var.classList.remove("show");
        modal_var.setAttribute("style", "display: none");
        modal_var.setAttribute("aria-hidden", "true");
        hideModal();
    }

    function chupaChoro(){
        // #############----- close the modal[2] Terms and Condition
        modal_var = document.getElementById('termscondition');
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: none');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

    function termsCondition(){
        Thanks();
        modal_var = document.getElementById('termscondition');
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

    
    function hideRegModal(){
        modal_var = document.getElementsByClassName('modal')[3];
        modal_var.removeAttribute("style");
        modal_var.removeAttribute("aria-modal");
        modal_var.removeAttribute("role");
        modal_var.classList.remove("show");
        modal_var.setAttribute("style", "display: none");
        modal_var.setAttribute("aria-hidden", "true");
    }


</script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

I am using summernote editor and saving content to database using PHP & MySql. I Firefox Mozilla clear formatting (document.execCommand) working fine after saving content to database but not in Google Chrome and other web browsers.

Sample Result text is given below:-

Kindly revert back for any queries. Thanking you.<>

<>

<>

Best Regards,<>

<>

<>

<>

<>

I’d like to know if there is a way to transcribe audio using OpenAi’s Whisper model while using Tone.js to make the audio. Also does Whisper use the audio form Tone.js directly?

I’m using pdfMake in a Next.js project to generate PDFs with Japanese text using NotoSansJP fonts. The fonts are loaded via fetch, encoded in Base64, and assigned to the virtual file system (vfs). The generated PDF renders Japanese characters correctly in all browsers visually.

However:
In Chrome, the Japanese text is not searchable, and When copying the text, it becomes garbled (e.g., 89:;, rst}~).
In Safari and Edge, everything works as expected — text is copyable and searchable.
Curiously, “支援等記録” is searchable in Chrome only if bold: true is set.

What I’ve tried
Embedding .ttf and .otf versions of NotoSansJP.
Setting the font using font style at both defaultStyle and per text level.
Verified fonts are correctly fetched, base64-encoded, and loaded in vfs.

Has anyone resolved this issue with pdfMake and Japanese fonts in Chrome?
Is there a way to fix text encoding so it’s searchable?
Does this require specific font format settings?
Or is this a limitation of Chrome’s PDF renderer?

        let isPdfMakeReady = false;
        
        async function fetchFontBase64(url: string): Promise<string> {
          const res = await fetch(url);
          const blob = await res.blob();
        
          return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => {
              const result = reader.result as string;
              resolve(result.split(',')[1]); // remove "data:application/x-font-otf;base64,"
            };
            reader.onerror = reject;
            reader.readAsDataURL(blob);
          });
        }
        
        export async function initFonts() {
          if (isPdfMakeReady || typeof window === 'undefined') return pdfMake;
        
          const [regular, bold] = await Promise.all([
            fetchFontBase64('/fonts/NotoSansJP-Regular.ttf'),
            fetchFontBase64('/fonts/NotoSansJP-Bold.ttf'),
          ]);
        
          pdfMake.vfs = {
            'NotoSansJP-Regular.otf': regular,
            'NotoSansJP-Bold.otf': bold,
          };
        
          pdfMake.fonts = {
            NotoSansJP: {
              normal: 'NotoSansJP-Regular.otf',
              bold: 'NotoSansJP-Bold.otf',
              italics: 'NotoSansJP-Regular.otf',
              bolditalics: 'NotoSansJP-Bold.otf',
            }
          };
        
          isPdfMakeReady = true;
        }
        
        initFonts();
    
      let definition: TDocumentDefinitions = {
        pageSize: "A4",
        pageOrientation: pageOrientation,
        pageMargins: pageOrientation === "portrait" ? [0, 20, 0, 90] : [30, 20, 30, 90],
        content:     {
      text: '支援等記録', style: {
        font: "NotoSansJP",
        fontSize: 18,
        bold: false,
      }
    },
    {
      marginLeft: 20,
      marginRight: 28,
      columns: [
        {
          width: "*",
          stack: [
            {
              table: {
                widths: ["*", "*", '*'],
                body: [
                  [
                    { text: groupHome.name, bold: true },
                    "",
                    { text: '', alignment: "right", bold: true }
                  ],
                  [
                    { text: `${customer.name} 様`, style: "text" },
                    "",
                    { text: "", alignment: "right" }
                  ]
                ]
              },
              layout: 'noBorders'
            },
            {
              marginTop: 10,
              table: {
                widths: [100, 100],
                body: [
                  ['日付', getDisplayDate(date)],
                  ['水分合計量', getWaterAmountTotal(dailyRecordGroup.records).toString() + "ml"]
                ]
              },
            },
          ]
        },
        {
          width: 50,
          table: {
            widths: [50],
            heights: [10, 50],
            body: [
              [{ text: '利用者確認印', alignment: "center" }],
              [(stampSetting && stampSetting[RECORD_PDF_STAMP_TYPES.CUSTOMER as keyof RecordPdfStampSetting] && stampImage) ? {
                image: stampImage,
                width: 50,
                height: 50
              } : ""]
            ]
          },
        }
      ]
    }
],
        footer: function (currentPage, pageCount) {
          return [
            {
              text: `${currentPage.toString()} / ${pageCount}`,
              marginLeft: 560,
              marginTop: 60
            }
          ];
        },
        defaultStyle: {
          font: 'NotoSansJP',
          fontSize: 8,
          lineHeight: 0.9
        },
        styles: {
          title: {
            fontSize: 18,
            bold: true,
            alignment: "center",
            marginBottom: 20
          },
          subheader: {
            fontSize: 12,
            bold: true,
            margin: [0, 10, 0, 5]
          },
          text: {
            fontSize: 8,
            bold: false,
          },
          tableExample: {
            margin: [0, 5, 0, 15]
          }
        },
      };