Create HTML File

Time to write some HTML! Your project's webapp directory will already contain a default index.html file. In this section, we will replace the contents of that file.

First, let's put down the basic skeleton of the file:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body id="body">
    </body>
</html>

Next, put the following in the <head> tag:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="Images/icon.png"/>
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script type="text/javascript" src="Scripts/FatFractal.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="Scripts/hoodyoodoo.js"></script>
<style>
    label { color: white}
    h1 { color: white; text-align: center; }
    .ui-page { background: black; }
    .ui-field-contain { text-align: center; }
    .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
    .nav-glyphish-example .ui-btn .ui-icon { width: 30px !important; height: 30px !important; margin-left: -15px !important; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #wypwyt .ui-icon, #acpwyt .ui-icon { background: url(Images/button_play_gray.png) 50% 50% no-repeat; background-size: 32px 32px; }
    #wypact .ui-icon, #acpact .ui-icon { background: url(Images/button_add_gray.png) 50% 50% no-repeat; background-size: 32px 32px;  }
    .imgAjaxLoader{position: fixed;top: 50%;left: 50%;margin-top: -24px;margin-left: -24px;z-index: 100;display: none;}
    .celebImage{max-width:200px;max-height:300px;}
    #fileUploaderDropDiv{margin:0;padding:0;}
</style>
<title>HoodYooDoo?</title>

This code simply sets some standard metadata for your app, defines some JavaScript requirements such as the FatFractal library, JQuery Mobile, defines some styles, and gives our app page a title. Also notice the dependency on the file Scripts/hoodyoodoo.js. We create that file in next section, and it will contain the JavaScript we use to interact with the FatFractal backend.

NEXT: Add the Celebrity Model to your App