Mirrors/inspec
2
0
Fork 0
mirror of https://github.com/inspec/inspec synced 2024-09-20 14:31:58 +00:00
Code Issues Projects Releases Packages Wiki Activity

Community Edits and progress bar

Browse source
This commit is contained in:
Hannah Maddy 2017-01-06 13:21:45 -08:00 committed by Christoph Hartmann
parent 4943bd7b7e
commit ab30724c64
9 changed files with 524 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
www/source/community.html.slim
View file

@ -9,53 +9,63 @@ description: This is where you interact with the InSpec open source community -
| Inspec is better with friends.
br/
| Let’s build together.
hr.text-left/
hr.strict-left
h3.margin-top
| Join us on Slack and get answers fast
P
| Is something unclear or are you just feeling stuck? We're here to help keep you moving. Chat with us on Slack, so we can help you keep moving.
p.margin-both-xs
p
| <a href="https://slack.com/">Sign in</a> to slack or request an invite below:
input
.columns.large-6.medium-6.relative
img.grid.strict-right src="/images/community/blue-web.svg" /
img.ball src="/images/community/glow-ball.png" /
img.ball.bright-animate src="/images/community/glow-ball.png" /
img.ball src="/images/community/glow-ball.png" /
.row.strict-center.margin-top
.large-6.medium-6.columns.strict-center
img.icon-art src="/images/community/contribute.svg" /
h3 Contribute to InSpec
p
| InSpec is an open source project created and supported by active and
passionate users. If you would like to contribute, we would love to have you.
.large-6.medium-6.columns.strict-center
img.icon-art src="/images/community/bugs.svg" /
h3 Report Bugs and Request Features
p
| We rely on your feedback to improve InSpec. <br>Whether you found a bug
or have a great idea for an improvement, join us on GitHub.
.row.margin-under
.columns.medium-6.strict-center
p
a.btn href="https://github.com/chef/inspec" Start Contributing
.columns.medium-6.strict-center
p
a.btn href="https://github.com/chef/inspec/issues" Give Feedback
/.row
.row
.icon.shadow
img src="/images/circ-arrow.svg" /
/.block-angl.blue-gradient
/ .section.purp-shade
/ .row.triangle-shade
/ .large-7.medium-7.columns.margin-top-xl.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground"
/ small.t-dk Inspec on Twitter
/ h2.t-white
/ | Latest from #inspec
/ .row
/ .large-12.medium-12.columns.margin-under
/ .shadow
/ <a class="twitter-grid" href="https://twitter.com/f5hannahmaddy/timelines/817243525699862529">Inspec</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
.block-angl.blue-gradient.relative
.section.purp-shade
#particles-second
canvas.particles-js-canvas-el
.row
.large-6.medium-6.strict-center.column.margin-top-xl.margin-under
.box-white.shadow
img.icon-art src="/images/community/contribute.svg" /
h3 Contribute to InSpec
p
| InSpec is an open source project created and supported by active and
passionate users. If you would like to contribute, we would love to have you.
br/
a.btn.margin-top-xs href="https://github.com/chef/inspec" Start Contributing
p
.large-6.medium-6.strict-center.column.margin-top-xl.margin-under
.box-white.shadow
img.icon-art src="/images/community/bugs.svg" /
h3 Report Bugs and Request Features
p
| We rely on your feedback to improve InSpec. <br>Whether you found a bug
or have a great idea for an improvement, join us on GitHub.
br/
a.btn.margin-top-xs href="https://github.com/chef/inspec/issues" Give Feedback
p
/.row
/ .icon.shadow
/ img src="/images/circ-arrow.svg" /
/.block-angl.blue-gradient
/ .section.purp-shade
/ .row.triangle-shade
/ .large-7.medium-7.columns.margin-top-xl.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground"
/ small.t-dk Inspec on Twitter
/ h2.t-white
/ | Latest from #inspec
/ .row
/ .large-12.medium-12.columns.margin-under
/ .shadow
/ <a class="twitter-grid" href="https://twitter.com/f5hannahmaddy/timelines/817243525699862529">Inspec</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

7
www/source/index.html.slim
View file

@ -1,6 +1,7 @@
---
title: InSpec - Audit and Test Framework
---
/! animated banner
header.blue-gradient
.h-top.strict-center.purp-shade
@ -21,12 +22,12 @@ header.blue-gradient
h4#icon-trigger
| InSpec is an open-source testing framework for infrastructure with a human-readable language for specifying compliance, security and other policy requirements. Easily integrate automated tests that check for adherence to policy into any stage of your deployment pipeline.
/! Third Content
.row.strict-center.margin-under-xs
#icon-trigger.row.strict-center.margin-under-xs
.large-12.columns
hr/
hr.first/
small FEATURES OF INSPEC
h2 InSpec is compliance by design
hr/
hr.first/
/! images with text - grid of 4
.row.strict-center.margin-under
.large-3.medium-3.columns.strict-center

6
www/source/javascripts/app.js
View file

@ -16,7 +16,7 @@ particlesJS('particles-second',
{
"particles": {
"number": {
"value": 15,
"value": 20,
"density": {
"enable": true,
"value_area": 500
@ -64,7 +64,7 @@ particlesJS('particles-second',
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.5,
"opacity": 0.6,
"width": 1
},
"move": {
@ -137,7 +137,7 @@ particlesJS('particles-js',
{
"particles": {
"number": {
"value": 30,
"value": 31,
"density": {
"enable": true,
"value_area": 500

352
www/source/javascripts/jquery.drawsvg.js Executable file
View file

@ -0,0 +1,352 @@
window.addEventListener("load", windowLoadHandler, false);
var sphereRad = 280;
var radius_sp=1;
//for debug messages
var Debugger = function() { };
Debugger.log = function(message) {
try {
console.log(message);
}
catch (exception) {
return;
}
}
function windowLoadHandler() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var displayWidth;
var displayHeight;
var timer;
var wait;
var count;
var numToAddEachFrame;
var particleList;
var recycleBin;
var particleAlpha;
var r,g,b;
var fLen;
var m;
var projCenterX;
var projCenterY;
var zMax;
var turnAngle;
var turnSpeed;
var sphereCenterX, sphereCenterY, sphereCenterZ;
var particleRad;
var zeroAlphaDepth;
var randAccelX, randAccelY, randAccelZ;
var gravity;
var rgbString;
//we are defining a lot of variables used in the screen update functions globally so that they don't have to be redefined every frame.
var p;
var outsideTest;
var nextParticle;
var sinAngle;
var cosAngle;
var rotX, rotZ;
var depthAlphaFactor;
var i;
var theta, phi;
var x0, y0, z0;
init();
function init() {
wait = 1;
count = wait - 1;
numToAddEachFrame = 8;
//particle color
r = 70;
g = 255;
b = 140;
rgbString = "rgba("+r+","+g+","+b+","; //partial string for color which will be completed by appending alpha value.
particleAlpha = 1; //maximum alpha
displayWidth = theCanvas.width;
displayHeight = theCanvas.height;
fLen = 320; //represents the distance from the viewer to z=0 depth.
//projection center coordinates sets location of origin
projCenterX = displayWidth/2;
projCenterY = displayHeight/2;
//we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer).
zMax = fLen-2;
particleList = {};
recycleBin = {};
//random acceleration factors - causes some random motion
randAccelX = 0.1;
randAccelY = 0.1;
randAccelZ = 0.1;
gravity = -0; //try changing to a positive number (not too large, for example 0.3), or negative for floating upwards.
particleRad = 2.5;
sphereCenterX = 0;
sphereCenterY = 0;
sphereCenterZ = -3 - sphereRad;
//alpha values will lessen as particles move further back, causing depth-based darkening:
zeroAlphaDepth = -750;
turnSpeed = 2*Math.PI/1200; //the sphere will rotate at this speed (one complete rotation every 1600 frames).
turnAngle = 0; //initial angle
timer = setInterval(onTimer, 10/24);
}
function onTimer() {
//if enough time has elapsed, we will add new particles.
count++;
if (count >= wait) {
count = 0;
for (i = 0; i < numToAddEachFrame; i++) {
theta = Math.random()*2*Math.PI;
phi = Math.acos(Math.random()*2-1);
x0 = sphereRad*Math.sin(phi)*Math.cos(theta);
y0 = sphereRad*Math.sin(phi)*Math.sin(theta);
z0 = sphereRad*Math.cos(phi);
//We use the addParticle function to add a new particle. The parameters set the position and velocity components.
//Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after
//it becomes unstuck).
var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002*x0, 0.002*y0, 0.002*z0);
//we set some "envelope" parameters which will control the evolving alpha of the particles.
p.attack = 50;
p.hold = 50;
p.decay = 100;
p.initValue = 0;
p.holdValue = particleAlpha;
p.lastValue = 0;
//the particle will be stuck in one place until this time has elapsed:
p.stuckTime = 90 + Math.random()*20;
p.accelX = 0;
p.accelY = gravity;
p.accelZ = 0;
}
}
//update viewing angle
turnAngle = (turnAngle + turnSpeed) % (2*Math.PI);
sinAngle = Math.sin(turnAngle);
cosAngle = Math.cos(turnAngle);
//background fill
context.fillStyle = "rgba(255,255,255, 0)";
context.fillRect(0,0,displayWidth,displayHeight);
//update and draw particles
p = particleList.first;
while (p != null) {
//before list is altered record next particle
nextParticle = p.next;
//update age
p.age++;
//if the particle is past its "stuck" time, it will begin to move.
if (p.age > p.stuckTime) {
p.velX += p.accelX + randAccelX*(Math.random()*2 - 1);
p.velY += p.accelY + randAccelY*(Math.random()*2 - 1);
p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1);
p.x += p.velX;
p.y += p.velY;
p.z += p.velZ;
}
/*
We are doing two things here to calculate display coordinates.
The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for
x and z (but the y coordinate will not change).
Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane.
*/
rotX = cosAngle*p.x + sinAngle*(p.z - sphereCenterZ);
rotZ = -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ;
m =radius_sp* fLen/(fLen - rotZ);
p.projX = rotX*m + projCenterX;
p.projY = p.y*m + projCenterY;
//update alpha according to envelope parameters.
if (p.age < p.attack+p.hold+p.decay) {
if (p.age < p.attack) {
p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue;
}
else if (p.age < p.attack+p.hold) {
p.alpha = p.holdValue;
}
else if (p.age < p.attack+p.hold+p.decay) {
p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue;
}
}
else {
p.dead = true;
}
//see if the particle is still within the viewable range.
if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) {
outsideTest = true;
}
else {
outsideTest = false;
}
if (outsideTest||p.dead) {
recycle(p);
}
else {
//depth-dependent darkening
depthAlphaFactor = (1-rotZ/zeroAlphaDepth);
depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor);
context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")";
//draw
context.beginPath();
context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false);
context.closePath();
context.fill();
}
p = nextParticle;
}
}
function addParticle(x0,y0,z0,vx0,vy0,vz0) {
var newParticle;
var color;
//check recycle bin for available drop:
if (recycleBin.first != null) {
newParticle = recycleBin.first;
//remove from bin
if (newParticle.next != null) {
recycleBin.first = newParticle.next;
newParticle.next.prev = null;
}
else {
recycleBin.first = null;
}
}
//if the recycle bin is empty, create a new particle (a new ampty object):
else {
newParticle = {};
}
//add to beginning of particle list
if (particleList.first == null) {
particleList.first = newParticle;
newParticle.prev = null;
newParticle.next = null;
}
else {
newParticle.next = particleList.first;
particleList.first.prev = newParticle;
particleList.first = newParticle;
newParticle.prev = null;
}
//initialize
newParticle.x = x0;
newParticle.y = y0;
newParticle.z = z0;
newParticle.velX = vx0;
newParticle.velY = vy0;
newParticle.velZ = vz0;
newParticle.age = 0;
newParticle.dead = false;
if (Math.random() < 0.5) {
newParticle.right = true;
}
else {
newParticle.right = false;
}
return newParticle;
}
function recycle(p) {
//remove from particleList
if (particleList.first == p) {
if (p.next != null) {
p.next.prev = null;
particleList.first = p.next;
}
else {
particleList.first = null;
}
}
else {
if (p.next == null) {
p.prev.next = null;
}
else {
p.prev.next = p.next;
p.next.prev = p.prev;
}
}
//add to recycle bin
if (recycleBin.first == null) {
recycleBin.first = p;
p.prev = null;
p.next = null;
}
else {
p.next = recycleBin.first;
recycleBin.first.prev = p;
recycleBin.first = p;
p.prev = null;
}
}
}
$(function() {
$( "#slider-range" ).slider({
range:false,
min: 20,
max: 500,
value: 280,
slide: function( event, ui ) {
console.log(ui.value);
sphereRad = ui.value;
}
});
});
$(function() {
$( "#slider-test" ).slider({
range:false,
min: 1.0,
max: 2.0,
value: 1,
step:0.01,
slide: function( event, ui ) {
radius_sp = ui.value;
}
});
});

2
www/source/layouts/_nav.slim
View file

@ -28,6 +28,8 @@ nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}"
= partial "layouts/sidebar"
- else
<progress value="0"></progress>
nav#main-nav-ctas
a.main-nav--logo href="/"
img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"

58
www/source/layouts/layout.slim
View file

@ -44,10 +44,65 @@ html
var objectSelect = $('#icon-trigger');
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$('hr').addClass('stretch')
$('hr.first').addClass('stretch')
}
});
javascript:
$(document).ready(function(){
var getMax = function(){
return $(document).height() - $(window).height();
}
var getValue = function(){
return $(window).scrollTop();
}
if('max' in document.createElement('progress')){
// Browser supports progress element
var progressBar = $('progress');
// Set the Max attr for the first time
progressBar.attr({ max: getMax() });
$(document).on('scroll', function(){
// On scroll only Value attr needs to be calculated
progressBar.attr({ value: getValue() });
});
$(window).resize(function(){
// On resize, both Max/Value attr needs to be calculated
progressBar.attr({ max: getMax(), value: getValue() });
});
}
else {
var progressBar = $('.progress-bar'),
max = getMax(),
value, width;
var getWidth = function(){
// Calculate width in percentage
value = getValue();
width = (value/max) * 100;
width = width + '%';
return width;
}
var setWidth = function(){
progressBar.css({ width: getWidth() });
}
$(document).on('scroll', setWidth);
$(window).on('resize', function(){
// Need to reset the Max attr
max = getMax();
setWidth();
});
}
});
javascript:
$(document).foundation();
$('.try-demo').click(function(event){
@ -60,7 +115,6 @@ html
})
});
javascript:
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0";
analytics.load("2NpoxZS2fnBmOgGdnQOymLNm6wuij13X");

16
www/source/stylesheets/_homepage.scss
View file

@ -15,7 +15,8 @@ header {
}
#particles-second{
width: 100%;
width:100%;
max-width: 100%;
overflow: hidden;
position: absolute;
background-color: transparent;
@ -165,12 +166,17 @@ img.ball:nth-child(3){
}
}
//Warping Grid Animation//
//Growing HR//
hr.first {
width: 0px;
}
.stretch{
-webkit-animation: grow 1.2s linear 1 both;
animation: grow 1.2s linear 1 both;
-moz-animation: grow 1.2s linear 1 both;
-webkit-animation: grow 0.8s linear 1 both;
animation: grow 0.8s linear 1 both;
-moz-animation: grow 0.8s linear 1 both;
}
@-webkit-keyframes grow {
from { width:0px;}

49
www/source/stylesheets/_layout.scss
View file

@ -62,6 +62,12 @@
margin-bottom: $percent_sm;
}
//White Box
.box-white{
border-radius: 7px;
padding: 2em;
background-color: white;
}
//Art
.icon-art {
@ -112,3 +118,46 @@
background: linear-gradient(170deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63CE99',endColorstr='#3A8ECE' , GradientType=1);
}
//Proogress bar
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 1.3px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: $color_link;
}
progress[value]::-webkit-progress-bar {
background-color: white;
}
progress[value]::-webkit-progress-value {
background-color:$color_link;
}
progress[value]::-moz-progress-bar {
background-color: white;
}
progress[value]::-moz-progress-value {
background-color:$color_link;
}

2
www/source/stylesheets/_typography.scss
View file

@ -38,7 +38,7 @@ small {
hr {
margin-top: 6px;
margin-bottom: 6px;
width: 0px;
width: 150px;
border: 0;
height: 1px;
background-color: $color_hr;