<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style> .ui-bar-f { color: AliceBlue; background-color: chocolate }
</style>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <p><b>Click on the equipment to 
        report:</b></p>
    <a href="#drnk" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow-all"><span style="color:blue">Drinking Water</span></a>
<a href="#wp" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"><span style="color:blue">Drinking Water Pipes</span></a>
<a href="#drksrt" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-btn-coner-all ui-shadow"><span style="color:blue">Dark Street / Area</span></a>
<a href="#electr" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow-all"><span style="color:blue">Electrical</span></a>
<a href="#pthls" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><span style="color:blue">Potholes</span></a>
<a href="#swrg" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><span style="color:blue">Swerage</span></a>
<a href="#rds" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><span style="color:blue">Roads</span></a>
<a href="#trfc" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><span style="color:blue">Traffic Lights</span></a>
</div> 

<div data-role="header" data-theme="f">
    <h1>Community</h1>
 </div>

 <div data-role="main" class="ui-content">
    <p><b>Click on the <span style="color:red";>R</span>eport button 
        to report damaged infrastructure :</b></p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><span style="color:red";>R</span>eport</a>
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
  </div>
<div data-role="popup" id="drnk">
<div data-role="main" class="ui-content">
<form method="post">
<fieldset data-role="controlgroup">
<legend><b>Select affected service :</b></legend> <br />
<label for="drnkw" id="drnkw">No Drinking Water in my Residance</label><input type="checkbox" name="drnkw" id="drnkw">
<div class="ui-field-contain">
<label for ="adress" id="address">Address :</label> 
<textarea name="address" id="address"></textarea>
</div>
<div class="ui-field-contain">\par
<label for="other" id="other">Other :</label>
<textarea name="other" id="other"></textarea>
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</form>
</div>
<div data-role="popup" id="wp">
<div data-role="main" class="ui-content">
<form method="post">
<fieldset data-role="controlgroup">
<legend><b>Select affected service :</b></legend>
<label for="brknwp" id="brknwp">Burst Water Pipe</label>
<input type="checkbox" name="brknwp" id="brknwp">
<div class="ui-field-contain">
<label for="address" id="address">Address :</label>
<textarea name="address" id="address"></textarea>
<label for="other" id="other">Other :</label>
<textarea name="other" id="other"></textarea>
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</form>
</div>
<div data-role="popup" id="drksrt">
<div data-role="main" class="ui-content">
<form method="post">
<fieldset data-role="controlgroup">
<legend><b>Select affected service :</b></legend><br />
<label for="dstr" id="dstr">Dark and Unsafe Street / Area</label>
<input type="checkbox" name="dstr" id="dstr">
<div class="ui-field-contain">
<label for="address" id="address">Address :</label>
<textarea name="address" id="address"></textarea>
<label for="other" id="other">Other :</label>
<textarea name="other" id="other"></textarea>
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</form>
</div>
<div data-role="popup" id="electr">
<div data-role="main" class="ui-content">
<form method="post">
 <fieldset data-role="controlgroup"> 
<legend><b>Select affected service :</b></legend><br />
<label for="electr" id="electr">No Electricity in my Household</label>
 <input type="checkbox" name="electr" id="electr"> \par
<label for="electr1" id="electr1">Faulty Street Light/s</label>
<input type="checkbox" name="electr1" id="electr1">
<label for="electr2" id="elctr2">Exposed Electrical Cables</label>
<input type="checkbox" name="electr2" id="electr2">
<label for="electr3" id="electr3">Dameged Electrical Sub station</label> 
<input type="checkbox" name="electr3" id ="electr3">\par
<div class="ui-field-contain">
<label for="address" id="address">Address :</label> 
<textarea name="address" id="address"></textarea> 
<label for="other" id="other">Other :</label>
 <textarea name="other" id="other"></textarea> 
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</form>
</div>
<div data-role="popup" id="pthls">
<div data-role="main" class="ui-content">
 <form method="post">
 <fieldset data-role="controlgroup">
 <legend><b>Select affected service :</b></legend><br /> 
<label for="pthls" id="pthls">Dangerous Pothole/s on the Road</label><input type="checkbox" name="pthls" id="pthls"> 
<div class="ui-field-contain"> 
<label for ="address" id="address">Address :</label>
 <textarea name="address" id="address"></textarea>
 <div class="ui-field-contain">\par
 <label for="other" id="other">Other :</label> 
<textarea name="other" id="other"></textarea> 
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</form> 
</div> 
<div data-role="popup" id="swrg">
<div data-role="main" class="ui-content">
<form method="post">
<fieldset data-role="controlgroup">
<legend><b>Select the affected service :</label>
<label for="swrg" id="swrg">Overflowing Swerage in my Household</label>
<input type="checkbox" name="swrg" id="swrg">
<label for="swrg1" id="swrg1">Overflowing Swerage in the Street</label>
<input type="checkbox" name="swrg1" id="swrg1">
<div class="ui-field-contain">
<label for="address" id="address">Address :</label>
<textarea name="address" id="address"></textarea>
<label for="other" id="other">Other :</label>
<textarea name="other" id="other"></textarea>
</form>
</div>
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</form>
</div>
<div data-role="popup" id="rds">
<div data-role="main" class="ui-content">
<form method="post">
<fieldset data-role="controlgroup">
<legend><b>Select the affected service :</b><legend><br />
<label for="rds" id="rds">Accident Hot-spot Road</label>\par
<input type="checkbox" name="rds" id="rds">
<label for="rds1" name="rds1">Uneaven Road</label>
<input type="checkbox" name="rds1" id="rds1">
<div data-role="ui-field-contain">
<label for="address" id="address">Address :</label>
<textarea name="address" id="address"></textarea>
<label for="other" id="other">Other :</label>
<textarea name="other" id="other"></textarea>
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</form>
</div>
<div data-role="popup" id="trfc">
<div data-role="main" class="ui-content">
<form method="post">
<fieldset data-role="controlgroup">
<legend><b>Select the affected service :</b></legend><br />
<label for="trfc" name="trfc" id="trfc">Faulty Traffic Light/s</label>
<input type="checkbox" name="trfc" id="trfc">
<label for="trfc1" id="trfc1">Traffic Light/s always Off</label>
<input type="checkbox" name="trfc1" id="trfc1">
<div data-role="ui-field-contain">
<label for="address" id="address">Address :</label>
<textarea name="address" id="address"></textarea>
<div data-role="ui-field-contain">
<label for="other" id="other">Other :</label>
<textarea name="other" id="other"></textarea>
</form>
</div>
<div data-role="footer" data-theme="f">
<h1>My community. Our planet!</h1>
</body>
</div>
</div>
</html>
