HEAVYPAYLOAD/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>materialize</title>
  </head>

  <body>
    <div class="container">
      <nav style="background-color:#1976d2">
        <div class="nav-wrapper">
          <a style="position:relative; top: -18px" href="#!" class="brand-logo"><img width="100" src="googlelogo.png"/></a>
          <ul class="right hide-on-med-and-down">
            <li>
              <a href="index.html"><i class="material-icons">refresh</i></a>
            </li>
          </ul>
        </div>
      </nav>

      <br />

      <div class="row center-align">
        <p style="position:relative; top: -9px; right: -78px" class="input-field z-depth-3 col s8">enter URL here</p>
        <button id="analyze"style="position:relative; right: -90px" class="btn waves-effect btn-med blue darken-2 col s2">analyze</button>
      </div>

      <div class="center-align"><img width="300" src="analytics.png" /></div>


    </div id="spinner">
      <div class="center-align"><div class="preloader-wrapper big active">
          <div class="spinner-layer spinner-blue-only"><div class="circle-clipper left"><div class="circle"></div></div>
          <div class="gap-patch"><div class="circle"></div></div>
          <div class="circle-clipper right"><div class="circle"></div></div>
    </div>


  <h6 id="calculation"font color="#a6a6a6">
  Calculating site rating
  </h6>

  <h4 id="rank">
  Site rank: 2/100
  </h4>

    <!--keep-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

<!-- <img class="responsive-img" width="150" src="googlelogo.png" /> -->


## main.js
$(function)(){

    $("#calculation").hide()
    $("#spinner").hide()
    $("#rank").hide()


}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>materialize</title>
	</head>

	<body>
	<div class="container">
	<nav style="background-color:#1976d2">
	<div class="nav-wrapper">
	<a style="position:relative; top: -18px" href="#!" class="brand-logo"><img width="100" src="googlelogo.png"/></a>
	<ul class="right hide-on-med-and-down">
	<li>
	<a href="index.html"><i class="material-icons">refresh</i></a>
	</li>
	</ul>
	</div>
	</nav>

	<br />

	<div class="row center-align">
	<p style="position:relative; top: -9px; right: -78px" class="input-field z-depth-3 col s8">enter URL here</p>
	<button id="analyze"style="position:relative; right: -90px" class="btn waves-effect btn-med blue darken-2 col s2">analyze</button>
	</div>

	<div class="center-align"><img width="300" src="analytics.png" /></div>



	</div id="spinner">
	<div class="center-align"><div class="preloader-wrapper big active">
	<div class="spinner-layer spinner-blue-only"><div class="circle-clipper left"><div class="circle"></div></div>
	<div class="gap-patch"><div class="circle"></div></div>
	<div class="circle-clipper right"><div class="circle"></div></div>
	</div>


	<h6 id="calculation"font color="#a6a6a6">
	Calculating site rating
	</h6>

	<h4 id="rank">
	Site rank: 2/100
	</h4>

	<!--keep-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	</body>
	</html>

	<!-- <img class="responsive-img" width="150" src="googlelogo.png" /> -->
	$(function)(){

	$("#calculation").hide()
	$("#spinner").hide()
	$("#rank").hide()


	}