<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


    <style>
        .bg-navyblue {
            background-color: red;
        }

        .text-navyblue {
            color: red;
        }

        .form-container {
            width: 60%;
            margin: auto;
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
           
        }
    </style>

    <title>Warranty Register</title>
</head>

<body>
    <div class="container-fluid bg-navyblue text-white text-center py-5">
        <h1 class="mb-4">Warrenty Register</h1>
       <div class="container">
  <form>
    
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="first">Name</label>
          <input type="text" class="form-control" placeholder="" id="first">
        </div>
      </div>
      <!--  col-md-6   -->

    
      <div class="col-md-6">

        <div class="form-group">
          <label for="phone">Phone Number</label>
          <input type="tel" class="form-control" id="phone" placeholder="phone">
        </div>
      </div>
      <!--  col-md-6   -->
    </div>
    <!--  row   -->


    <div class="row">
      <div class="col-md-6">

        <div class="form-group">
          <label for="email">Serial Number</label>
          <input type="text" class="form-control" id="email" placeholder="Serial Number">
        </div>
      </div>
      <!--  col-md-6   -->

 
    </div>
    <!--  row   -->
    
    <div class="row">
      <div class="col-md-6">

        <div class="form-group">
          <label for="email">Bill Picture</label>
          <input type="file" class="form-control" id="email" placeholder="Serial Picture">
        </div>
      </div>
      <!--  col-md-6   -->

 
    </div>
    
     <div class="row">
      <div class="col-md-6">

        <div class="form-group">
          <label for="email">MRP Sticker Picture</label>
          <input type="file" class="form-control" id="email" placeholder="MRP Sticker Picture">
        </div>
      </div>
      <!--  col-md-6   -->

 
    </div>


   

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

        <script>
            document.addEventListener("DOMContentLoaded", function () {
                const form = document.querySelector("form");

                form.addEventListener("submit", function (event) {
                    event.preventDefault();
                    // Process form data here

                    // Show a simple message dialog using window.alert
                    window.alert("Thank you! Your data has been submitted successfully.");
                });
            });
        </script>



        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
            crossorigin="anonymous"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
</body>

</html>