external/ansible-playable
1
0
Fork 0
mirror of https://github.com/mmumshad/ansible-playable.git synced 2025-03-09 23:38:54 +00:00
Code Issues Releases Wiki Activity

Update Main landing page.

Browse source
This commit is contained in:
Mumshad Mannambeth 2017-06-11 04:50:35 -04:00
parent ff6dfe5bff
commit abdc4f0127
13 changed files with 76 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/app/app.css
View file

@ -34,6 +34,12 @@
* App-wide Styles
*/
@font-face{
font-family: "ExpletusSans-Regular";
src: url('/assets/fonts/ExpletusSans-Regular.ttf'),
url('/assets/fonts/ExpletusSans-Regular.ttf'); /* IE */
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
@ -72,7 +78,7 @@
}
.navbar-default .navbar-brand {
color: white;
color:#ffa800;
}
.navbar-default .navbar-nav > li > a {

4
client/app/app.js
View file

@ -1,7 +1,7 @@
'use strict';
import angular from 'angular';
// import ngAnimate from 'angular-animate';
import ngAnimate from 'angular-animate';
import ngCookies from 'angular-cookies';
import ngResource from 'angular-resource';
import ngSanitize from 'angular-sanitize';
@ -90,7 +90,7 @@ import editor from './services/editor/editor.service';
import './app.css';
angular.module('app2App', [ngCookies, ngResource, ngSanitize, uiRouter, uiBootstrap, _Auth, account,
admin, 'validation.match', 'ui.ace', navbar, footer, main, constants, util, ansi2html,
admin, 'validation.match', 'ui.ace', navbar, footer, main, constants, util, ansi2html, ngAnimate,
// Components
DesignerComponent, ProjectComponent, InventoryComponent, PlaybookComponent, FileBrowserComponent, RolesComponent, RunsComponent, CustomModulesComponent,
// Services

7
client/app/main/main.css
View file

@ -24,4 +24,11 @@
.navbar-text {
margin-left: 15px;
}
div {
font-family: 'ExpletusSans-Regular';
}

87
client/app/main/main.html
View file

@ -1,6 +1,6 @@
<header class="hero-unit" id="banner">
<div class="container">
<p style="font-size:50px; font-family: 'ExpletusSans-Regular'">play<span style="font-size: 70px;">A</span>ble</p>
<p style="color:#ffa800;font-size:50px; font-family: 'ExpletusSans-Regular'">play<span class="-rotate-90" style="font-size: 70px;">A</span>ble</p>
<p class="lead"><a style="color:#ff0050;" 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 Yeoman">
</div>
@ -9,47 +9,86 @@
<div class="container">
<div class="features-unit">
<div class="row" style="margin-top:50px;">
<div class="col-md-6">
<img class="md-whiteframe-21dp" width="100%" src="assets/images/playbook.png">
<div class="col-md-6 ">
<img class="md-whiteframe-21dp" src="assets/images/Computer-icon.png">
</div>
<div class="col-md-6 " style="text-align: left;">
<h2>Generate Ansible Playbooks</h2>
<h2><i class="fa fa-magic" aria-hidden="true"></i> Generate Ansible Playbooks</h2>
<ul>
<li>Generate Ansible playbooks using UI</li>
<li>Create playbooks, plays and tasks in few clicks</li>
<li>Lists all available ansible modules</li>
<li>Provides description and examples of modules</li>
<li>Provides an interface to input parameters for each module</li>
<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" style="text-align: center;align-content: center;">
<h2>Import input</h2>
<p style="width:400px;">Import inputs into ansible inventory file format.</p>
<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 ">
<img class="md-whiteframe-21dp" src="assets/images/inventory.png" >
<img class="md-whiteframe-21dp" src="assets/images/ansible-galaxy.jpeg" >
</div>
</div>
<div class="row" style="margin-top:50px;">
<div class="col-lg-6 ">
<img class="md-whiteframe-21dp" width="100%" src="assets/images/play.png">
<img class="md-whiteframe-21dp" src="assets/images/play-folded-icon.png">
</div>
<div class="col-lg-6 " style="text-align: left;">
<h2>Play!</h2>
<h2><i class="fa fa-play-circle-o" aria-hidden="true"></i> Play!</h2>
<ul>
<li>Run your playbooks and view results</li>
<li>Run playbooks at a play or task level</li>
<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 ">
<img class="md-whiteframe-21dp" src="assets/images/Settings-icon.png" >
</div>
</div>
</div>
</div>
<div style="color:black;padding-top:20px;padding-bottom:50px;">
<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">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>
@ -59,7 +98,8 @@
<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>
<a href="mailto:mmumshad@gmail.com"><span class="fa fa-send"></span></a>
<br><i class="fa fa-send" aria-hidden="true"></i> <a href="mailto:mmumshad@gmail.com"> mmumshad@gmail.com </a>
<br><i class="fa fa-twitter" aria-hidden="true"></i> <a href="https://twitter.com/mmumshad"> @mmumshad </a>
</div>
</div>
<div layout="row" layout-align="center" style="text-align: center;margin-top:30px;" class="layout-align-center-stretch layout-row">
@ -69,14 +109,3 @@
</div>
</div>
<div style="color:black;padding-top:20px;padding-bottom:50px;">
<div class="container" >
<div layout-align="center" style="text-align: center;">
<h3>Also check out</h3>
<div class="row" style="padding-top: 20px;">
<!--<div class="col-md-4"> <div class="md-whiteframe-23dp"><a href="" target="_blank"><img style="width:100%;height:100%;" src="assets/" /></a></div></div>-->
</div>
</div>
</div>
</div>

BIN
client/assets/images/Computer-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
client/assets/images/Course Image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 558 KiB

BIN
client/assets/images/Mimetypes-text-x-python-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
client/assets/images/Settings-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
client/assets/images/ansible-galaxy.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
client/assets/images/play-folded-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
client/assets/images/rsz_course_image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 45 KiB

7
client/components/footer/footer.html
View file

@ -1,8 +1,3 @@
<div class="container">
<p>Angular Fullstack v4.2.2 |
<a href="http://angular-fullstack.github.io/">Documentation</a> |
<a href="https://gitter.im/DaftMonk/generator-angular-fullstack">Chat on Gitter</a> |
<a href="https://github.com/angular-fullstack/generator-angular-fullstack/issues?state=open">Issues</a> |
<a href="https://opencollective.com/angular-fullstack">Donate to our Open Collective</a>
</p>
</div>

1
client/components/navbar/navbar.html
View file

@ -18,6 +18,7 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="btn-danger" ui-sref-active="active"><a target="_blank" href="https://www.udemy.com/learn-ansible">Learn Ansible</a></li>
<li ng-hide="$ctrl.isLoggedIn()" ui-sref-active="active"><a ui-sref="signup">Sign up</a></li>
<li ng-hide="$ctrl.isLoggedIn()" ui-sref-active="active"><a ui-sref="login">Login</a></li>
<li ng-show="$ctrl.isLoggedIn()"><p class="navbar-text">Hello {{ $ctrl.getCurrentUser().name }}</p> </li>