ansible-playable/client/app/main/main.html

<header class="hero-unit" id="banner">
  <div class="container">
    <p style="color:#ffa800;font-size:50px; font-family: 'ExpletusSans-Regular'">play<span class="-rotate-90" style="font-size: 70px;">A</span>ble <span style="color: darkgrey; font-size: small"> {{ appVersion }}</span></p>
    <p class="lead"><a style="color:#d9534f;" href="http://www.ansible.com" target="_blank">Ansible</a> Playbook generator and orchestrator</p>
    <img src="assets/images/Button-1-play-icon.png" alt="I'm Playable">
  </div>
</header>

<div class="container">
  <div class="features-unit">
    <div class="row" style="margin-top:50px;">
      <div class="col-md-6 " style="align-content: center;text-align: center;">
        <img  class="md-whiteframe-21dp" src="assets/images/Computer-icon.png">
      </div>
      <div class="col-md-6 " style="text-align: left;">
        <h2><i class="fa fa-magic" aria-hidden="true"></i> Generate Ansible Playbooks</h2>
        <ul>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Generate Ansible playbooks using UI<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Create playbooks, plays and tasks in few clicks<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Lists all available ansible modules<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Provides description and examples of modules<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Provides an interface to input parameters for each module<br>
        </ul>
      </div>
    </div>
    <div class="row" style="margin-top:50px;">
      <div class="col-lg-6">
        <h2><i class="fa fa-search" aria-hidden="true"></i> Import Roles</h2>
        <ul>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Search and Import Roles from Ansible Galaxy<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Search and Import Roles from GitHub<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> View Readme files and instructions in HTML format<br>
        </ul>
      </div>
      <div class="col-lg-6 ">
        <a href="https://galaxy.ansible.com" target="_blank"><img class="md-whiteframe-21dp" width="100%" src="assets/images/ansible-galaxy.png" ></a>
      </div>

    </div>
    <div class="row" style="margin-top:50px;align-content: center;text-align: center;">
      <div class="col-lg-6  ">
        <img class="md-whiteframe-21dp" width="30%" src="assets/images/play-folded-icon.png">
      </div>
      <div class="col-lg-6 " style="text-align: left;">
        <h2><i class="fa fa-play-circle-o" aria-hidden="true"></i> Play!</h2>
        <ul>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Run and test your playbooks and view results<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Run playbooks at a play or task level<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Advanced options to set verbose levels and check mode<br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> View execution results<br>
        </ul>
      </div>

    </div>
    <div class="row" style="margin-top:50px;">
      <div class="col-lg-6">
        <h2><i class="fa fa-keyboard-o" aria-hidden="true"></i> Develop Custom Modules</h2>
        <ul>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Develop Custom Modules <br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Auto-generate Module documentation <br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Auto-generate Variable definitions <br>
          <i class="fa fa-check-square-o fa-2x" aria-hidden="true" style="color: #ffa800"></i> Test Custom Modules with sample data <br>
        </ul>
      </div>
      <div class="col-lg-6 " style="align-content: center;text-align: center;">
        <img class="md-whiteframe-21dp" width="30%" src="assets/images/Settings-icon.png" >
      </div>

    </div>
  </div>

</div>

<div style="color: #f2dede;margin-top:10px;padding-top:20px;padding-bottom:50px;background: #a94442;">
  <div class="container" >
    <div>

      <div class="row" style="padding-top: 20px;">
        <div class="col-md-4"> <div class="md-whiteframe-23dp"><a href="https://www.udemy.com/learn-ansible" target="_blank"><img src="assets/images/rsz_course_image.png" /></a></div></div>
        <div class="col-md-8">
          <h1><i class="fa fa-graduation-cap" aria-hidden="true"></i> Learn Ansible</h1>
          This course on <a href="https://www.udemy.com/learn-ansible" style="color: #37e937;">Udemy</a> introduces a beginner to basic fundamentals of Ansible with easy to do hands-on exercises that you can practice right in the browser. The course introduces basic use cases of Ansible followed by an introduction to Ansible Inventory, Playbooks, Modules, Variables, Conditionals, Loops and Roles. Each lecture is accompanied by a set of coding exercises giving the user a hands-on experience in developing Ansible Playbooks.
          <div><a class="btn btn-success" href="https://www.udemy.com/learn-ansible" target="_blank"> <i class="fa fa-external-link" aria-hidden="true"></i> Start Learning Here </a></div>
        </div>

      </div>
    </div>
  </div>
</div>


<div style="color:white;background-color: #2d363a;padding-top:30px;padding-bottom:50px;">
  <div class="container">
    <div>
      <div style="text-align: center">
        <h1>About us</h1>
      </div>
      <div layout="row" layout-align="center" class="layout-align-center-stretch layout-row">
        <div layout="column" layout-align="center" style="text-align: center;margin-left:30px;margin-right:30px;" class="layout-align-center-stretch layout-column">
          <h3>Mumshad Mannambeth</h3>
          <i class="fa fa-send" aria-hidden="true"></i> <a href="mailto:mmumshad@gmail.com">  mmumshad@gmail.com </a>
          <i class="fa fa-twitter" aria-hidden="true"></i> <a href="https://twitter.com/mmumshad">  @mmumshad </a>
          <br>
          I am an Ansible Enthusiast. This is a fun project that I think will help Ansible users. I Look forward to working with you in maintaining and improving this open-source platform.
        </div>
      </div>
      <div layout="row" layout-align="center" style="text-align: center;margin-top:30px;" class="layout-align-center-stretch layout-row">
        <div class="alert alert-danger">This is a proof-of-concept implementation and is in Alpha version. This is only to be used for testing purpose and NOT to be used in production.</div>
      </div>
    </div>
  </div>
</div>