Making A tab with working google
Showing your battery percentage too:
<!DOCTYPE html>
<html>
<head>
<title>sahi phone</title>
<style>
body {
height:99vh;
width:99vw;
}
#outer1
{
height:91vh;
width:92vw;
background-color:#fff;
border-radius:2%;
display:flex;
margin-top:0vh;
margin-left:1.2vw;
margin-right:01vw;
margin-bottom:1vh;
}
#outer2
{
height:99vh;
width:95vw;
background-color:#000;
border-radius:3%;
margin-top:-5vh;
}
#cam
{
height:3vh;
width:5vw;
background-color:white;
border:1px groove grey;
margin-top:7vh;
border-radius:50%;
margin-left:30vw;
}
#sound {
height:2vh;
width:15vw;
background-color:#ccc;
border:3px groove grey;
margin-top:-3.3vh;
border-radius:25% 25% 25% 25%;
margin-left:41vw;
}
iframe
{
height:91vh;
width:100%;
margin:auto ;
}
em
{
margin-left:43vw;
text-align:center ;
padding:auto;
animation:Roshan 3s linear infinite ;
}
@keyframes Roshan
{
from{color:#fff;}
to{ color:#f0f;}
}
p{
color:#f0f;
font-size:25px;
margin-top:-81vh;
margin-left:;
animation: charge 5s linear infinite ;
}
@keyframes charge
{
from{ margin-left:111vw;}
to{ margin-left:-15vw;}
}
</style>
</head>
<body>
<div id="outer2">
<div id="cam"></div>
<div id="sound"></div>
<div id="outer1">
<iframe src="https://www.google.com/search?igu=1">
</iframe>
</div>
<section><em>Roshan</em></section>
<p id="ok"></p>
</div>
<script>
window.onload = function(){ charge(); }
function charge(){ navigator.getBattery().then(function (battery)
{
var level = battery.level;
level = level*100+"%" + " " + "Charged";
document.getElementById('ok').innerHTML = level;
});
}
</script>
<br />
<div>
hope you like this .
I welcome you on my blog .
special thanks to ShriRoshanKumar which helped in "Sahi Phone Blog"
</div>
</body>
</html>