{{#zone "main"}}
<div class="container container-bg  white-bg">
        <div class=" margin-top-double">
            <div class="row row padding-top-double padding-bottom-double margin-bottom-double">
                <div class="col-lg-12  margin-top-double">
                    <h1 class="grey ">Sensebot</h1>
                    <hr>
                    <p  class="margin-bottom-double light-grey ">Connect your Sensebot
                    to the WSO2 IoT server. </p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
                <img src="{{self.publicURL}}/images/sensebot.png" class="img-responsive">
            </div>
                <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
                    <h2 class="uppercase">Ingredients</h2>
                    <hr>
                    <p class="grey margin-top">Hardware Requirements </p>
                    <br><br>
                                <span class="fw-stack fw-lg margin-right">
                                    <i class="fw fw-ring fw-stack-2x"> </i>
                                    <i class="fw fw-right-arrow fw-stack-1x"></i>
                                </span>Arduino Uno<br><br>
                                <span class="fw-stack fw-lg margin-right">
                                    <i class="fw fw-ring fw-stack-2x"> </i>
                                    <i class="fw fw-right-arrow fw-stack-1x"></i>
                                </span>Arduino Ethernet / WiFi Shield
								<br /><br />
								<form method="POST" class="float-left margin-right"
									action="{{sketchPath}}">
										<input type="hidden" name="deviceType" value="sensebot" />
                                        <input type="hidden" name="sketchType" value="sensebot_wifi" />
										<button class="wr-btn" type="submit">Create Sketch for
										Wifi
										</button>
									</form>
                                <form method="POST" class="form-login-box float-left"
                                action="{{sketchPath}}">
									<input type="hidden" name="deviceType" value="sensebot" />
                                    <input type="hidden" name="sketchType" value="sensebot" />
									<button class="wr-btn margin-right" type="submit">Create
									Sketch
									for Ethernet</button>
								</form>
                                <br/>

                </div>
                <div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
                    <h2 class="uppercase">Prepare</h2><hr>
                    <p class="grey margin-top">Get your device ready  </p>
                         <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                             <span class="circle">01  </span> <span class="padding-left"> Mount the Ethernet / Wifi shield on the Arduino Uno device.</span>
                        </div>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom">
                        <span class="circle">02  </span> <span class="padding-left"> Mount the Ethernet / Wifi shield on the Arduino Uno device.</span>
                    </div>
                    <div class="margin-doubles padding-top-double margin-bottom-double light-grey  margin-left-double margin-bottom">
                        <span class="circle">03  </span> <span class="padding-left"> Mount the Ethernet / Wifi shield on the Arduino Uno device.</span>
                        </div>
                </div>
                <div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
                    <h2 class="uppercase">Schematic Diagram</h2><hr>
                    <p class="grey margin-top">Click on the image to zoom</p>
                    <center>
                        <a href="{{self.publicURL}}/images/schematicsGuide.png" target="_blank">
                            <img src="{{self.publicURL}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px" />
                        </a>
                    </center>
                </div>
            </div>
            <div class="row row padding-top-double padding-bottom-double margin-bottom-double  ">
                <div class="col-lg-12  margin-top-double">
                    <h2 class="uppercase ">Connect (Quickstart)</h2>
                    <hr>
                    <p  class="margin-bottom-double light-grey ">Internet of Things Foundation Quickstart connection  </p>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                        <span class="circle">01  </span> <span class="padding-left">Use the following command to download the installer from GitHub:</span><br>
                    </div>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                        <span class="circle">02  </span> <span class="padding-left">Download the Sketch installer from the Arduino website <a href="http://arduino.cc/en/Main/Software">http://arduino.cc/en/Main/Software</a></span><br>
                    </div>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                        <span class="circle">03  </span> <span class="padding-left"> Install the Sketch program</span><br>
                    </div>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                        <span class="circle">04  </span> <span class="padding-left">Use the Sketch program to open the samples code: <a href="http://tinyurl.com/EUHackathonRobot">http://tinyurl.com/EUHackathonRobot</a> </span><br>
                    </div>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                        <span class="circle">05  </span> <span class="padding-left">View the lower part of the Sketch pad window to check that the COM connection is shown as active</span><br>
                    </div>
                </div>
            </div>
        </div>
{{/zone}}
{{#zone  "topCss"}}
    <link href="{{self.publicURL}}/css/fontwso2.css" rel="stylesheet">
    <link href="{{self.publicURL}}/css/fontwso2-extend.css" rel="stylesheet">
{{/zone}}