<header>
<a target="_blank" href="https://github.com/Siddharth11/gradstop" id="heading">gradstop.js</a>
<div id="description">JavaScript micro library to generate gradient color stops</div>
</header>
<div id="app" ng-app="generator">
<div id="app-wrapper" ng-controller="ctrl">
<form class="pure-form">
<div class="pure-control-group">
<label for="stop">Stops</label>
<input id="stop" type="number" ng-model="data.stops" min="2" max="255"/>
</div>
<div class="pure-control-group">
<label for="type">Input Format</label>
<select id="type" ng-model="data.inputFormat">
<option value='hex'>hex</option>
<option value='rgb'>rgb</option>
<option value='hsl'>hsl</option>
</select>
</div>
<div class="pure-control-group">
<label for="from">Color1</label>
<input id="from" type="text" ng-model="colors[0]" />
</div>
<div class="pure-control-group">
<label for="from">Color2</label>
<input id="from" type="text" ng-model="colors[1]" />
</div>
<div class="pure-control-group">
<label for="from">Color3</label>
<input id="from" type="text" ng-model="colors[2]" />
</div>
<div class="pure-control-group">
<label for="from">Color4</label>
<input id="from" type="text" ng-model="colors[3]" />
</div>
<button ng-click="update()">Generate</button>
</form>
<div id="gradient-wrapper">
<div ng-repeat="item in gradient" class="colorBox" ng-style="{'background-color': '{{item[0]}}'}"></div>
</div>
</div>
<div id="extra-info">
<div><b>Check console for color values</b></div>
<div>This is a standalone library, Angular is used just for the demo purpose</div>
</div>
</div>
<a target="_blank" href="https://github.com/Siddharth11/gradStop.js" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#129FEA; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
$blue: #129FEA;
body {
padding-bottom: 100px;
}
header {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
#heading {
display: block;
font-size: 3em;
font-weight: 700;
margin-top: 50px;
text-align: center;
color: $blue;
text-decoration: none;
}
#description {
margin-top: 50px;
text-align: center;
}
form {
margin: 50px auto;
text-align: center;
max-width: 300px;
font-size: .85em;
}
label {
float: left;
}
input {
float: right;
max-width: 200px;
}
select {
float: right;
}
.pure-control-group {
clear: both;
margin-bottom: 20px;
overflow: hidden;
}
button {
color: $blue;
border-radius: 4px;
border: 1px solid $blue;
background-color: #fff;
outline: none;
opacity: .75;
padding: 10px 20px;
text-transform: uppercase;
transition: 250ms all;
&:hover {
background-color: $blue;
color: #fff;
box-shadow: 0 0 1px $blue;
}
&:active {
opacity: 1;
}
}
#gradient-wrapper {
width: 80%;
height: 50px;
overflow: hidden;
margin: 50px auto 0;
display: flex;
box-shadow: 0 5px 10px -7px #000;
}
.colorBox {
flex: 1;
}
.colorBox.ng-move,
.colorBox.ng-enter {
transition: all 0.5s;
}
.colorBox.ng-move,
.colorBox.ng-enter {
transform: translateX(-100px);
}
.colorBox.ng-move.ng-move-active,
.colorBox.ng-enter.ng-enter-active {
transform: translateX(0);
}
#extra-info {
text-align: center;
margin-top: 50px;
font-size: .8em;
opacity: .75;
}
b {
background-color: $blue;
color: #fff;
padding: 2px 5px;
}
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
View Compiled
const consoleColVals = colArr => {
if (console.clear) {
console.clear()
}
const displayCol = el => {
console.log(`%c ` + `%c ${el}`, `background: ${el}`, `background: #fff`)
}
for (let i = 0; i < colArr.length; i++) {
displayCol(colArr[i][0])
}
}
const transformArr = arr => arr.map((c, index) => [c, index])
let app = angular.module('generator', ['ngAnimate'])
app.controller('ctrl', $scope => {
console.log($scope)
$scope.colors = ['#343838', '#00DFFC', '#F6FF00', '#FFFFFF']
$scope.data = {
stops: 10,
inputFormat: 'hex'
}
$scope.data.colorArray = $scope.colors.filter(el => {
if (el) return el
})
console.log($scope.data)
$scope.gradient = transformArr(gradstop($scope.data))
consoleColVals($scope.gradient)
$scope.update = () => {
$scope.data.colorArray = $scope.colors.filter(el => {
if (el) return el
})
$scope.gradient = transformArr(gradstop($scope.data))
consoleColVals($scope.gradient)
}
});
const heading = document.querySelector('#heading');
const chars = heading.innerText;
heading.innerHTML = chars.split('').map(char => (
`<span>${char}</span>`
)).join('')
const headingColors = gradstop({
stops: chars.length,
colorArray: ['#343838', '#00DFFC']
})
const spans = document.querySelectorAll('#heading span')
Array.from(spans).forEach((item, index) => {
item.style.color = headingColors[index];
})
View Compiled
