HTML - Other

OTP Input UI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTP Input UI</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Centering the container and styling the inputs */
        .otp-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }


        .otp-input {
            width: 50px;
            height: 50px;
            font-size: 24px;
            text-align: center;
            border: 2px solid #ced4da;
            border-radius: 5px;
            margin: 0 8px;
            outline: none;
            transition: border-color 0.3s ease-in-out;
        }


        .otp-input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }


        .container {
            max-width: 500px;
            margin: auto;
        }


        .btn-primary {
            font-size: 18px;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">Enter OTP</h2>
        <p class="text-center text-muted">Enter the 6-digit code sent to your registered number</p>
        <div class="otp-container">
            <input type="text" maxlength="1" class="form-control otp-input" data-index="0" />
            <input type="text" maxlength="1" class="form-control otp-input" data-index="1" />
            <input type="text" maxlength="1" class="form-control otp-input" data-index="2" />
            <input type="text" maxlength="1" class="form-control otp-input" data-index="3" />
            <input type="text" maxlength="1" class="form-control otp-input" data-index="4" />
            <input type="text" maxlength="1" class="form-control otp-input" data-index="5" />
        </div>
        <div class="text-center mt-4">
            <button class="btn btn-primary" id="submitOtp">Submit OTP</button>
        </div>
    </div>


    <!-- Bootstrap JS and jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function () {
            // Move to the next input and select its value
            $(".otp-input").on("input", function () {
                const input = $(this);
                const index = parseInt(input.data("index"));
                const value = input.val();


                // Automatically focus and select the next input field
                if (value.length === 1) {
                    const nextInput = $(`.otp-input[data-index='${index + 1}']`);
                    if (nextInput.length) {
                        nextInput.focus().select();
                    }
                }
            });


            // Handle backspace to move to the previous input and select its value
            $(".otp-input").on("keydown", function (e) {
                const input = $(this);
                const index = parseInt(input.data("index"));


                if (e.key === "Backspace" && input.val() === "") {
                    const prevInput = $(`.otp-input[data-index='${index - 1}']`);
                    if (prevInput.length) {
                        prevInput.focus().select();
                    }
                }
            });


            // Gather OTP and submit
            $("#submitOtp").on("click", function () {
                const otp = $(".otp-input")
                    .map(function () {
                        return $(this).val();
                    })
                    .get()
                    .join("");
                alert(`Entered OTP: ${otp}`);
            });
        });
    </script>
</body>
</html>

Responsive Images with srcset and sizes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Example</title>
    <style>
        .responsive-image {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

<h2>Responsive Image Example with srcset and sizes</h2>

<img 
    src="images/medium.jpg" 
    srcset="
        images/small.jpg 480w,
        images/medium.jpg 800w,
        images/large.jpg 1200w
    " 
    sizes="
        (max-width: 600px) 480px,
        (max-width: 900px) 800px,
        1200px
    " 
    alt="A beautiful landscape" 
    class="responsive-image">

<p>This image will adjust its resolution based on the screen width.</p>

</body>
</html>

Speech Recognition

CSS Styles

<style>
  .speech {
    border: 1px solid #ddd;
    width: 300px;
    padding: 0;
    margin: 0;
  }

  .speech input {
    border: 0;
    width: 240px;
    display: inline-block;
    height: 30px;
  }

  .speech img {
    float: right;
    width: 40px;
  }
</style>

Search Form

<form id="labnol" method="get" action="https://www.google.com/search">
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

HTML5 Speech Recognition API

<script>
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = 'en-US';
      recognition.start();

      recognition.onresult = function (e) {
        document.getElementById('transcript').value = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };

      recognition.onerror = function (e) {
        recognition.stop();
      };
    }
  }
</script>