JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!--<div class="agGEAR-asset-scanner">
  <div class="agGEAR-options notfound">
    <div>
      <p class="response">Asset Not Found</p>
      <ul>
        <li class="add-as-item"><label>+ Add<br />as item</label></li><li><label class="assign-to-item">&larr; Assign<br />to item</label></li>
      </ul>
    </div>
  </div>
</div>-->

CSS

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;600&family=Roboto+Condensed:wght@300&display=swap');

.agGEAR-asset-scanner{
  position: fixed;
  z-index: 999;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.8);
  font-family: 'Roboto Condensed', sans-serif;
}
.agGEAR-asset-scanner > .agGEAR-options{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  text-align: center;
  background-color: #111;
  width: 300px;
  height: 300px;
  border: solid 2px #555;
}
.agGEAR-asset-scanner > .agGEAR-options > div{
  height: 100%;
  position: relative;
}
.agGEAR-asset-scanner > .agGEAR-options.found{
  border-color: #399845;
}
.agGEAR-asset-scanner > .agGEAR-options.notfound{
  border-color: tomato;
}
.agGEAR-asset-scanner > .agGEAR-options.notfound > div > p{
  text-align: center;
  margin-top: 40px;
  font-size: 15px;
}
.agGEAR-asset-scanner > .agGEAR-options.notfound > div > p.response{
  color: tomato;
}
.agGEAR-asset-scanner > .agGEAR-options.found > div > p.response{
  color: #399845;
}
.agGEAR-asset-scanner > .agGEAR-options.notfound > div > ul{
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: block;
  margin-top: 30px;
  color: #fff;
}
.agGEAR-asset-scanner > .agGEAR-options.notfound > div > ul > li{
  width: 90px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
  border: solid 1px #fff;
  height: 90px;
  border-radius: 50%;
  position: relative;
  transition: all 0.2s;
  cursor: pointer;
}
.agGEAR-asset-scanner > .agGEAR-options.notfound > div > ul > li:hover{
  color: #000;
  background-color: #fff;
}
.agGEAR-asset-scanner > .agGEAR-options.notfound > div > ul > li > label{
  position: absolute;
  font-size: 13px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
}
.agGEAR-asset-scanner > .agGEAR-options > div > button{
  background-color: tomato;
  color: #fff;
 ...

JavaScript

function notFoundUI(){

	var ui = $('<div class="agGEAR-asset-scanner"> <div class="agGEAR-options notfound"> <div> <p class="response">Asset Not Found</p><ul> <li class="add-as-item"><label>+ Add<br/>as item</label></li><li><label class="assign-to-item">&larr; Assign<br/>to item</label></li></ul><button>CANCEL</button></div></div></div>');
  
  ui.find('.add-as-item').click(function(){
  
  	var subui = $('<div class="agGEAR-subui"><h2>Adding New Asset: </h2><span class="required"><input type="text" name="name" placeholder="Enter item name.." /></span><input type="text" name="model" placeholder="Enter the model.." /><input type="text" name="serial_number" placeholder="Enter the serial number.." /><button><span>+</span> Add Item to agGEAR</button></div>');
    
    subui.find('button').click(function(){
    
    	// add the item to database
    
    });
    
    $('body').append(subui);
  
  });
  
  ui.find('.assign-to-item').click(function(){
  
  	
  
  });
  
  ui.find('button').click(function(){
  
  	window.location.href = 'https://agrisphere-portal.com/agGear/scanner/';
  
  });
  
  $('body').append(ui);

}

notFoundUI();