Home Page Text

Text for home page.

by chilipeppr

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div class="container-fluid main-page-container">
  <div class="jumbotron">
    <h2 style="margin-bottom:20px;"><img class="dropimage" src="http://www.chilipeppr.com/img/chilipeppr_logo.png" style="" /> <span class="chilipeppr-name">ChiliPeppr</span> <span class="chilipeppr-subname">Hardware&nbsp;Fiddle</span></h2>

    <p class="lead">Create Javascript software workspaces that talk to your hardware. Use one of our hugely popular workspaces or create your own by forking one you like.</p>
  </div>

  <div id="com-chilipeppr-homepage-wspicker">
    <!-- Workspace Grid (Like Kickstarter Grid) -->
    <!-- end Workspace Grid -->
  </div>

  <div class="jumbotron spjs-img" style="background-image: url('//i2dcui.appspot.com/img/serialdevices_40pct.jpg')">
    <h2>
Serial Port JSON Server
</h2>
    <p>
      The heart of ChiliPeppr is a server that links your serial port devices and your host controller like a Raspberry Pi via websockets to your browser.
    </p>
    <button class="btn btn-default btn-lg downloadSpjs">
      Download SPJS from Github
    </button>
  </div>


  <div class="container-fluid com-chilipeppr-wsgrid" style="padding:8%;">
    <div class="row">
      <div class="col-md-6">
        <p><a href="http://chilipeppr.com">ChiliPeppr</a> is a hardware fiddle, meaning it is a website that lets you easily create a workspace to fiddle with your hardware from software. ChiliPeppr provides a <a href="https://github.com/johnlauer/serial-port-json-server">Serial Port JSON Server</a>          that you run locally on your computer, or remotely on another computer, to connect to the serial port of your hardware like an Arduino or other microcontroller.</p>
        <p>You then create a workspace at ChiliPeppr.com that connects to your hardware by starting from scratch or forking somebody else's...

CSS

#root #mainnav {
  margin-bottom: 0;
}

.main-page-container h2 {
  font-size: 52px;
}

.main-page-container h4 {
  font-size: 32px;
}

#usercontrib h4 {
  font-size: 18px;
}

#usercontrib .com-chilipeppr-ws-billboard-url,
#usercontrib .billboard-url {
  font-size: 12px;
}

.main-page-container .com-chilipeppr-ws-billboard-url,
.main-page-container .billboard-url {
  font-size: 20px;
}

.main-page-container .com-chilipeppr-wsgrid .com-chilipeppr-ws-billboard-desc,
.main-page-container .com-chilipeppr-wsgrid .billboard-desc {
  height: initial;
}

#pnlBody .container-fluid,
.main-page-container {
  padding: 0;
}

.jumbotron {
  /* margin-top:20px; */
  border-radius: 6px;
  padding: 50px 15%;
  text-align: center;
  border-radius: 0;
  margin: 0;
}

.main-page-container #com-chilipeppr-homepage-wspicker .com-chilipeppr-wsgrid {
  padding: 30px 15%;
}

.dropimage {
  height: 100px;
  /* float:left; */
  line-height: 260px;
  /* padding-right:20px; */
}

.chilipeppr-name {
  color: #bebebe;
}

.chilipeppr-subname {
  color: #777;
}

#com-chilipeppr-homepage-wspicker {
  margin-bottom: 30px;
}

.spjs-img {
  background-position: center;
  background-size: cover;
  /* opacity: 0.5; */
}

JavaScript

cprequire(["chilipeppr_ready"], function() {

  /*
  chilipeppr.load("#com-chilipeppr-homepage-wspicker #com-chilipeppr-wsgrid-serialport",
      "http://fiddle.jshell.net/chilipeppr/astYW/show/light");
  chilipeppr.load("#com-chilipeppr-homepage-wspicker #com-chilipeppr-wsgrid-tinyg",
      "http://fiddle.jshell.net/chilipeppr/Guvv4/show/light");
  chilipeppr.load("#com-chilipeppr-homepage-wspicker #com-chilipeppr-wsgrid-laser",
      "http://fiddle.jshell.net/chilipeppr/9R4Pe/show/light");
      */
  chilipeppr.load("#com-chilipeppr-homepage-wspicker",
    "http://fiddle.jshell.net/chilipeppr/8UwSX/show/light");

  $('.downloadSpjs').click(function() {
    console.log("download spjs");
    window.location.href = "http://github.com/johnlauer/serial-port-json-server";
  })
});