
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

    <title>Hello, world!</title>
</head>
<body>

<div class="container">
    <div class="col-lg-6 col-sm-6 col-md-6 mx-auto my-auto" style="">
        <div class="card">
            <div class="card-header" style="padding:20px;">
                
                <div class="div_header text-center" style="">
                    <div class="div_top_left" style="">
                        <p class="first">Invite Code</p>
                       
                     
                    </div>
                    
                  
                  
                   
                </div>


         
                <div class="div_after_header mb-5" style="">
                   
                    
                    <div class="mb-5">
                       
                        
                        <input type="text" class="form-control" placeholder="0" style="background-color: #16202d; color: white;" value="{{Auth::guard('user_login')->user()->Refer_id}}" id="myInput" readonly>
                        <i class="fas fa-copy mt-3 text-white" onclick="copyToClipboard('myInput')" style="cursor:pointer;"></i>
                        <div id="copyAlert" class="alert alert-primary" role="alert" style="display:none;">
                            Text copied to clipboard!
                        </div>
                    </div>
                    
                  
                  

                 
                 
                </div>
             
                 
                
              
                
            </div>
        </div>
    </div>

   
</div>
@include('user.script')

<!-- Bootstrap JS and Popper.js scripts -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function copyToClipboard(elementId) {
        // Create a new input element and set its value to the text you want to copy
        var inputElement = document.createElement('input');
        inputElement.value = document.getElementById(elementId).value;

        // Append the input element to the document
        document.body.appendChild(inputElement);

        // Select the text inside the input
        inputElement.select();
        inputElement.setSelectionRange(0, 99999); // For mobile devices

        // Copy the selected text to the clipboard
        document.execCommand('copy');

        // Remove the input element from the document
        document.body.removeChild(inputElement);

        // Optionally, provide some feedback to the user (you can customize this part)
        // alert('Text copied to clipboard: ' + inputElement.value);

        document.getElementById('copyAlert').style.display = 'block';

// Optionally, you can hide the alert after a certain time
setTimeout(function () {
    document.getElementById('copyAlert').style.display = 'none';
}, 3000); // Hide after 3 seconds (adjust as needed)
    }
</script>
</body>
</html>

<style>
      input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"] {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
    body {
        margin: 0;
        padding: 0;
        box-sizing:border-box;
        background: #181a20;
    }

    .container {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: #181a20;
    }
  
   

    .div_header .div_top_right{
          display: flex;
          flex-direction: row;
          justify-content: center;
          gap:5px;
    }
    .div_header .div_top_right .right_div p{
        color:#96abb5;
       font-size: 14px;
       font-weight:400;
      letter-spacing: 1px;
    }
   
    a{
        text-decoration: none;
    }
.div_header .div_top_left{
    display: flex;
    flex-direction: column;
  line-height: 10px;
  padding-top:15px;
    
    
}

.div_header .div_top_left .first{
  color:white;
  font-size: 19px;
  font-weight:700;
  letter-spacing: 1px;
}
.div_header .div_top_left .second{
  color:#96abb5;
  font-size: 14px;
  font-weight:400;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
       
       .div_header .div_top_right{
         display: flex;
         flex-direction: row;
        
        
         gap:5px;
   }
       .div_header .div_top_right .right_div p{
       color:#96abb5;
      font-size: 12px;
      font-weight:400;
     letter-spacing: 1px;
   }
   
   .div_header .div_top_left .first{
 color:white;
 font-size: 12px;
 font-weight:700;
 letter-spacing: 1px;
}
.div_header .div_top_left .second{
  color:#96abb5;
  font-size: 10px;
  font-weight:400;
  letter-spacing: 1px;
}
   }
    .col-lg-6 {
        position: absolute;
        top: 30%;
        left: 30%;
        transform: translate(-30%, -30%);
        width:100%;
        background: #181a20;
        height:51%;
    }

    .card {
        width:70%;
        margin: 0 auto;
        background:#16202d;
    }

    .div_after_header .div_af_img img {
        width:26%;
    }

    .div_header h4 {
        font-size:25px;
        font-weight:300;
    }

    p {
        font-size:18px;color:#96abb5;font-weight:400;
    }

    .before_button {
        background: #1f2e3d;
    }

    .before_button .bbb {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        background: #1f2e3d;
        height:30px;
    }

    @media (max-width: 768px) {
        .div_header h4 {
            font-size:16px;
            font-weight:300;
        }

        .div_after_header .div_of_p p {
            font-size: 14px;
        }

        .div_after_header .div_af_img img {
            width:36%;
            object-fit: cover;
        }
    }

    @media (max-width: 600px) {
        .div_header h4 {
            font-size:15px;
            font-weight:300;
        }
    }

    /* Fix for modal backdrop visibility */
    .modal {
        z-index: 1050;
    }
    .custom-modal.show .modal-backdrop {
        z-index: 1050; /* Adjust the value as needed */
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the background color and transparency as needed */
    }
</style>


    
<script>
    // JavaScript to handle the click event and show the modal
    document.getElementById('openModalIcon').addEventListener('click', function () {
        var myModal = new bootstrap.Modal(document.getElementById('myModals'));
        myModal.show();
    });
</script>