<div id="phonewrap">
  <div id="phone"></div> 
  <div id="phonescreen"></div>
  <div id="wallpaper"></div>
  <div id="wallpaper2"></div>
  <div id="homebtn"></div>
  <div id="switch"></div>
  <div id="volumedown"></div>
  <div id="volumeup"></div>
  <div id="brand">moto</div>
  <div id="cam"></div>
  <div id="innercam"></div>
  <div id="flash"></div>
  <div id="mic"></div>
  <div id="notification"></div>
  <div id="sensor"></div>
  <div id="speaker"></div>
</div>
  

body {
  background:#325;
}

#phonewrap {
  border:none;
  background:none;
  width:440px;
  height:575px;
  margin-left:150px;
  
}

#phone {
  background:black;
  border:4px ridge #555;
  border-radius:34px;
  width:250px;
  height:450px;
  margin-left:85px;
  margin-top:50px;
  padding-top:10px;
  box-shadow:3px 3px 35px 4px #25003f;
}

#phonescreen { 
  position:relative;
  z-index:100;
  border:none;
  width:230px; 
  height:355px;
  margin-left:98px; 
  margin-top:-415px;
  background:none;
  background-image: repeating-linear-gradient(132deg, transparent 20.5%, transparent 55%, rgba(153, 153, 153,.135) 65%, transparent 87%);
} 

#wallpaper {
  position:relative;
  z-index:0;
  border:none;
  width:230px;
  height:360px;
  margin-left:98px;
  margin-top:-360px;
  background-image: url(https://i.ibb.co/rpZryC2/20200612-1652551-2d44cb19f4177dfd4b16104664340653-1024-1024.jpg);
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:0;
}

#wallpaper2 {
  position:relative;
  z-index:0;
  border:none;
  width:230px;
  height:360px;
  margin-left:98px;
  margin-top:-360px;
  background-image: url(https://i.ibb.co/4Kr8HQZ/Screenshot-2022-05-08-at-18-14-05-A-Pen-by-Ladan.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:0;
}

#homebtn {
  border:2px inset #333;
  border-radius:1em;
  width:45px;
  height:30px; 
  margin-left:189px;
  margin-top:10px;
  background:#000;
  cursor: pointer;

}

#switch {
  width:5px;
  height:15px;
  margin-left:340px;
  margin-top:-310px;
  background:#555;
  border-right:1px solid black;

}

#volumedown {
  border:none;
  width:5px;
  height:15px;
  margin-left:340px;
  margin-top:-54px;
  background:#555;
  border-right:1px solid black;

}

#volumeup {
  border:none;
  width:5px;
  height:15px;
  margin-left:340px;
  margin-top:-45px;
  background:#555;
  border-right:1px solid black;

}

#brand { 
  color:#222;
  font-family:Electromagnetic Lungs, Verdana, Segoe UI;
  font-size:14px;
  text-align:center;
  margin-top:-60px;
  margin-left:-15px;
}

#cam {
  border:0px solid #333;
  border-radius:50px;
  width:10px;
  height:10px;
  margin-left:280px;
  margin-top:-25px;
  background:rgba(125,125,125,0.3);

}

#innercam {
  border:none;
  border-radius:50px;
  width:4px;
  height:4px;
  margin-left:283px;
  margin-top:-7px;
  background:#000;

}

#flash {
  border:none;
  border-radius:14px;
  width:15px;
  height:8px;
  margin-left:120px;
  margin-top:-10px;
  background:#faebd7;
  opacity:.4;

}

#flash:hover {
  border:none;
  border-radius:14px;
  width:15px;
  height:8px;
  margin-left:120px;
  margin-top:-10px;
  background:#fff;
  box-shadow:0px 0px 12px white, 0px 0px 12px white, 0px 0px 12px white, 0px 0px 12px white, 0px 0px 12px white, 0px 0px 12px white, 0px 0px 12px white, 0px 0px 12px white, 0px 0px 12px white;
  opacity:1;

}

#mic {
  border:2px inset #333;
  border-radius:50px;
  width:2px;
  height:2px;
  margin-left:154px;
  margin-top:418px;
  background:rgba(115,115,115,0);

}

#notification {
  border:none;
  border-radius:none;
  width:12px;
  height:7px;
  margin-left:203px;
  margin-top:-450px;
  background:rgba(40,40,40,1);

}

#sensor {
  border:none;
  border-radius:none;
  width:30px;
  height:4px;
  margin-left:198px;
  margin-top:460px;
  background:rgba(40,40,40,1);
}

#speaker {
  border:2px inset #222;
  border-radius:14px;
  width:45px;
  height:8px;
  margin-left:187px;
  margin-top:-453px;
  background:#000;

}

var screenTimer = null;

$('#homebtn').click(screenTurnOn);

function screenTurnOn(){ 
  if(screenTimer){ 
    clearTimeout(screenTimer); 
  } 
  $('#wallpaper').fadeTo(0,1);  
 $('#wallpaper').fadeTo(500,1);
  $('#wallpaper2').fadeTo(500,1);
  $('#wallpaper').fadeTo(250,1);
  
  screenTimer = setTimeout(screenTurnOff,12500);
  }

function screenTurnOff(){
  $('#wallpaper').fadeTo(500,0);
}