Stat Battles

Developer
Ethan
Size
10,854 Kb
Views
8,096
  1. Stat Battles Previews
  2. Stat Battles HTML Codes
  3. Stat Battles CSS Codes
  4. Stat Battles JS Codes

How do I make an stat battles?

What is a stat battles? How do you make a stat battles? This script and codes were developed by Ethan on 12 January 2023, Thursday.

Stat Battles Previews
IQ Test

Stat Battles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stat Battles</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section ng-app=CodepenData> <div ng-controller=CodepenDataController ng-cloak> <h1> Stat <img src="//blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Large.png" /> Battles </h1> <div class=form ng-if=edit> <div class=input-wrap> <input placeholder="Hero 1" type=text ng-change="userChange(users[0])" ng-blur=loadUser(users[0]) ng-model=users[0].nickname /> <button ng-if=!users[0].nickname ng-click="randomUser(0)">rand</button> <button class=pos ng-if="users[0].nickname && !users[0].loaded" ng-click="loadUser(users[0])">load</button> <div class=user-thumb ng-if=users[0].loaded ng-style="{ backgroundImage: 'url(' + users[0].image_src + ')' }"></div> </div> <div class=username-error ng-if=users[0].error>{{users[0].error}}</div> <h1 class=label>vs</h1> <div class=input-wrap> <input placeholder="Hero 2" type=text ng-change="userChange(users[1])" ng-blur=loadUser(users[1]) ng-model=users[1].nickname /> <button ng-if=!users[1].nickname ng-click="randomUser(1)">rand</button> <button class=pos ng-if="users[1].nickname && !users[1].loaded" ng-click="loadUser(users[1])">load</button> <div class=user-thumb ng-if=users[1].loaded ng-style="{ backgroundImage: 'url(' + users[1].image_src + ')' }"></div> </div> <div class=username-error ng-if=users[1].error>{{users[1].error}}</div> <button class="fight button" ng-disabled="!users[0].loaded || !users[1].loaded" ng-click=loadCodepenData()>Fight!</button> </div> <div class=results ng-if="!edit"> <div ng-repeat="user in users" ng-class="{ winning: user.winning }" class=user> <h2> {{user.nicename}}<br> <small> <a href="https://codepen.io/{{user.nickname}}" target="blank">@{{user.nickname}}</a> </small> </h2> <div class=user-image-wrap> <img class=user-image ng-class="{ won: user.winning && complete, lost: !user.winning && complete }" ng-style=user.image_size ng-src={{user.image_src}} /> </div> <div class="bars"> <div bar="user.pens.length" comp="top.pens" label="Pens"></div> <div bar="user.stats.hearts" comp="top.hearts" label="Hearts"></div> <div bar="user.stats.views" comp="top.views" label="Views"></div> <div bar="user.stats.comments" comp="top.comments" label="Cmmnts"></div> <div bar="user.stats.followers" comp="top.followers" label="Fllwrs"></div> <div bar="user.stats.following" comp="top.following" label="Fllwng"></div> </div> <span class=points>{{user.points|number:0}} BP</span> <h2 class=details> <button ng-if="user.pens_loaded" ng-click="setDetailUser(user)">Details</button> <span ng-if="user.current_pen">pen #{{user.current_pen.id}}</span> &nbsp; </h2> </div> </div> <a class=user-detail-modal-bg href=# ng-click=resetDetailUser() ng-if=detail_user></a> <div class=user-detail-modal ng-if=detail_user> <a href=# class=user-detail-close ng-click=resetDetailUser()>Close</a> <img class=user-detail-image ng-src={{detail_user.image_src}} /> <h1> {{detail_user.nicename}}<br> <small> <a href="https://codepen.io/{{detail_user.nickname}}" target="blank">@{{detail_user.nickname}}</a> </small> </h1> <h2> {{detail_user.points|number:0}} BP | {{detail_user.pens.length|number:0}} pens<br> <small>{{detail_user.stats.followers}} Followers | {{detail_user.stats.following}} Following</small> </h2> <table> <thead> <tr> <th>Pen</th> <th>Loves</th> <th>Views</th> <th>Comments</th> </tr> </thead> <tbody> <tr ng-repeat="pen in detail_user.pens | orderBy:'-views'"> <td><a href="https://codepen.io/{{detail_user.nickname}}/pen/{{pen.id}}/" target="blank">#{{pen.id}}</a></td> <td>{{pen.loves | number: 0}}</td> <td>{{pen.views | number: 0}}</td> <td>{{pen.comments | number: 0}}</td> <tr> </tbody> </table> </div> <div ng-cloak ng-if=complete> <h2 ng-if="users[0].winning && !users[1].winning"> <a href="https://codepen.io/{{users[0].nickname}}" target="blank">{{users[0].nicename}}</a> wins with <strong>{{users[0].points|number:0}}</strong> Battle Points! </h2> <h2 ng-if="users[1].winning && !users[0].winning"> <a href="https://codepen.io/{{users[1].nickname}}" target="blank">{{users[1].nicename}}</a> wins with <strong>{{users[1].points|number:0}}</strong> Battle Points! </h2> <h2 ng-if="(!users[0].winning && !users[1].winning) || (users[0].winning && users[1].winning)"> <a href="https://codepen.io/{{user[0].nickname}}" target="blank">{{users[0].nicename}}</a> and <a href="https://codepen.io/{{user[1].nickname}}" target="blank">{{users[1].nicename}}</a> tie with <strong>{{user[0].points || 0 | number:0}}</strong> Battle Points! </h2> </div> <button ng-if=!edit class="button reset" ng-class="{ primary: complete, fight: complete }" ng-click="reset()"> <span ng-if=complete>New Battle</span> <span ng-if=!complete>Stop</span> </button> <footer ng-if="users[0].loaded && users[1].loaded"> <h3>Share this battle:</h3> <a target="blank" href="https://codepen.io/jakealbaugh/full/vOVVqG?u1={{users[0].nickname}}&u2={{users[1].nickname}}"> /pianotiles2/full/vOVVqG?u1={{users[0].nickname}}&u2={{users[1].nickname}} </a> </footer> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Stat Battles - Script Codes CSS Codes

@import url(//fonts.googleapis.com/css?family=Quicksand:400);
.user { display: block; width: 50%; box-sizing: border-box; padding: 1rem;
}
.user:first-of-type { float: left;
}
.user:last-of-type { float: right;
}
.user .user-image-wrap { width: 40%; margin: 1rem auto; padding-bottom: 50%; position: relative;
}
.user .user-image { position: absolute; width: 0%; border-radius: 50%; transition: width 150ms ease-in-out, box-shadow 500ms ease-in-out, transform 500ms cubic-bezier(0.02, 1.48, 1, 1); left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 0px 0.1rem rgba(255, 255, 255, 0.1);
}
.user .user-image.won { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0px 0px 0px 0.4rem #60AE24;
}
.user .user-image.lost { transform: translate(-50%, -50%) scale(0.8); box-shadow: 0px 0px 0px 0.4rem #C44928;
}
.points { display: block; text-align: center; background: #C44928; box-sizing: border-box; border-radius: 0.125rem; padding: 0.5rem; margin: 0 0.125rem; font-weight: 400; font-size: 1.25rem;
}
.winning .points { background: #60AE24;
}
.details { width: 100%; text-align: center; margin: 1rem 0;
}
.details button { padding: 0.5rem; font-size: 1rem;
}
.details button:hover { transform: scale(1.05);
}
.details span { line-height: 38px;
}
.results { margin-bottom: 1rem;
}
.results::after { content: ""; clear: both; display: table;
}
.bars:after { content: ""; clear: both; display: table;
}
.bars .bar { display: block; width: 16.66%; float: left; font-size: 0.875rem; box-sizing: border-box; padding: 0.125rem; text-align: center;
}
.bars .bar > span { display: block; line-height: 1; margin: 0.5rem 0;
}
.bars .bar-track { position: relative; overflow: hidden; height: 120px;
}
.bars .bar-val { position: absolute; bottom: 0; top: 100%; left: 0; right: 0; transition: top 250ms ease-in-out, background 500ms ease-in-out; background: #C44928; box-sizing: border-box; border-radius: 0.125rem; padding: 0.25rem;
}
.bars .bar-val.winning { background: #60AE24;
}
[ng-controller] { max-width: 1000px; min-width: 600px; margin: 2rem auto;
}
[ng-cloak] { display: none;
}
.label { margin: 0.5em 0; font-size: 2rem;
}
.input-wrap { position: relative; width: 50%; min-width: 280px; margin: 0 auto;
}
.input-wrap input { width: 100%; display: block;
}
.input-wrap button { display: block; position: absolute; padding: 0.5rem; font-size: 1rem; top: 50%; right: 1rem; transform: translateY(-50%) scale(1);
}
.input-wrap button:hover { transform: translateY(-50%) scale(1.05);
}
.input-wrap .user-thumb { position: absolute; width: calc(60px - 1rem); height: calc(60px - 1rem); left: 1rem; top: 50%; transform: translateY(-50%); border-radius: 50%; background: black; background-size: cover; background-position: center;
}
.input-wrap .user-thumb img { width: 100%; height: auto; border-radius: 50%;
}
.username-error { color: #C44928; text-align: center; margin-top: 1em;
}
input, button { outline: none; appearance: none; border: none; box-sizing: border-box; padding: 1rem 1rem; border-radius: 0.125rem; font-family: Quicksand; font-weight: 400; font-size: 1.5rem; text-align: center;
}
.button { display: block;
}
input { background: rgba(255, 255, 255, 0.2);
}
input:focus { background: rgba(255, 255, 255, 0.4);
}
button { text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.2); background: black; color: white;
}
button.pos { background: #60AE24;
}
.button { margin: 0 auto; width: 50%; min-width: 240px;
}
.button.fight { margin-top: 2rem; background-color: #FFBB00; animation: glow 2s ease-in-out infinite;
}
.button.fight:hover { animation: none;
}
.button.fight:disabled { opacity: 0.5; animation: none;
}
.button:hover:not(:disabled) { transform: scale(1.05);
}
@keyframes glow { 0%, 100% { box-shadow: 0px 0px 0px 0px #FFBB00; } 50% { box-shadow: 0px 0px 20px 0px #FFBB00; }
}
.user-detail-modal-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7);
}
.user-detail-modal-bg:hover { background: rgba(0, 0, 0, 0.3);
}
button.primary { background: #FFBB00;
}
.user-detail-modal { position: fixed; background: black; top: 10%; left: 50%; width: 600px; max-width: 90%; transform: translateX(-50%); padding: 2rem; box-sizing: border-box; border-radius: 0.125rem; border: 1px solid rgba(255, 255, 255, 0.2);
}
.user-detail-modal a { color: #FFBB00;
}
.user-detail-modal .user-detail-close { position: absolute; right: 1rem; top: 1rem;
}
.user-detail-modal .user-detail-image { width: 100px; height: auto; border-radius: 50%; display: block; margin: 0 auto 1rem; box-shadow: 0px 0px 0px 0.1rem rgba(255, 255, 255, 0.1);
}
.user-detail-modal h1 { font-size: 40px; line-height: 40px; margin: 0rem 0 1rem;
}
.user-detail-modal table { width: 100%; background: #111;
}
.user-detail-modal table tbody { height: 300px; overflow-y: auto; display: block;
}
.user-detail-modal table tr { display: flex;
}
.user-detail-modal table td, .user-detail-modal table th { flex: 1;
}
.user-detail-modal table th { background: #000; text-transform: uppercase; padding: 1em 0.5em;
}
.user-detail-modal table td { padding: 0.5em; font-family: monospace; text-align: center;
}
.user-detail-modal table tr:nth-child(even) { background: #222;
}
p { text-align: center;
}
p small { color: rgba(255, 255, 255, 0.8); font-style: italic;
}
h1, h2 { font-family: Quicksand; text-transform: uppercase; font-weight: 400; line-height: 1; text-align: center; color: #FFF;
}
h1 { margin: 3rem 0 2rem; position: relative; font-size: 50px; line-height: 50px;
}
h1 img { vertical-align: middle; width: 60px; height: auto; margin-top: -10px; z-index: -1;
}
h2 { margin-top: 0px;
}
a { text-decoration: none; color: white;
}
a:hover { color: #FFBB00;
}
footer { margin-top: 1rem; text-align: center;
}
footer a { color: #FFBB00;
}
body { font-family: Quicksand; background: #111; background: linear-gradient(bottom right, #111, #222); color: white;
}
html, body { min-height: 100%;
}

Stat Battles - Script Codes JS Codes

var app = angular.module('CodepenData', []);
app.service('CodepenDataService', [ '$q', function($q) { return { getPens: function(who,which,page) { var request = '//cpv2api.com/pens/'+which+'/'+who+'/?page='+page; var deferred_data = $q.defer(); $.ajax({ dataType: 'json', url: request, success: function (res) { if(res.data && res.data.length) { deferred_data.resolve(res.data); } else { deferred_data.reject(res); } }, error: function (err) { deferred_data.reject(err); } }); return deferred_data.promise; }, getUser: function(who) { var request = '//cpv2api.com/profile/'+who; var deferred_data = $q.defer(); $.ajax({ dataType: 'json', url: request, success: function (res) { if(res.data) { deferred_data.resolve(res.data); } else { deferred_data.reject(res); } }, error: function (err) { deferred_data.reject(err); } }); return deferred_data.promise; } } }
]);
app.directive('bar', [ function() { return { scope: { val: "=bar", comp: "=", label: "@" }, template: '<div class="bar">'+ '<div class="bar-track">'+ '<span class="bar-val"'+ 'ng-class="{winning: val == comp}"'+ 'ng-style="{\'top\': 100 - val/comp * 100 + \'%\'}">'+ '{{val|number}}</span>'+ '</div>'+ '<span>{{label}}</span>' + '</div>', link: function(scope, $el, attrs) { scope.top = scope.val/scope.comp * 100 + "%"; } } }
]);
app.controller('CodepenDataController', [ '$scope', '$http', '$timeout', 'CodepenDataService', function($scope, $http, $timeout, CodepenDataService) { $scope.edit = true; $scope.complete = false; $scope.userChange = function(user) { clearError(user); user.loaded = false; } $scope.loadUser = function(user) { if(!user.loading) { user.loading = true; if (user.nickname) getUser(user); } } var empty_user = function(username) { return { nickname: username || '', loaded: false, pens_loaded: false, pens: [], points: 0, winning: false, stats: { hearts: 0, views: 0, comments: 0 } }; }; var users_base = function() { return [ empty_user(), empty_user() ]; } var top_base = { pens: 0, hearts: 0, views: 0, comments: 0, followers: 0, following: 0 }; $scope.reset = function() { $scope.users = users_base(); $scope.top = top_base; $scope.complete = false; $scope.edit = true; checkForParams(); clearErrors(); } $scope.reset(); function checkForParams() { var username_1 = getParam('u1') || '', username_2 = getParam('u2') || ''; if(username_1) { $scope.users[0].nickname = username_1; getUser($scope.users[0]); } if(username_2) { $scope.users[1].nickname = username_2; getUser($scope.users[1]); } } function updateTops() { var u1 = $scope.users[0], u2 = $scope.users[1], top = { pens: Math.max(u1.pens.length, u2.pens.length), hearts: Math.max(u1.stats.hearts, u2.stats.hearts), views: Math.max(u1.stats.views, u2.stats.views), comments: Math.max(u1.stats.comments, u2.stats.comments), followers: Math.max(u1.stats.followers, u2.stats.followers), following: Math.max(u1.stats.following, u2.stats.following), points: Math.max(u1.points, u2.points), total_points: u1.points + u2.points } $scope.top = top; // who is winning? if(u1.points > u2.points) { u1.winning = true; u2.winning = false; } else { u1.winning = false; u2.winning = true; } } function updatePen(user, pen) { user.stats.hearts += pen.loves; user.stats.views += pen.views; user.stats.comments += pen.comments; user.pens.push(pen); } function setCurrentPen(user, pens, i) { if(i < pens.length) { user.current_pen = pens[i]; $timeout(function() { setCurrentPen(user, pens, i + 1); }, 100); } } function updateUser(user, profile) { user.stats.followers = profile.followers; user.stats.following = profile.following; user.nicename = profile.nicename; user.image_src = profile.avatar; user.loaded = true; } function checkComplete() { if ($scope.edit) { $scope.complete = false; } else if($scope.users[0].pens_loaded && $scope.users[1].pens_loaded) { $scope.complete = true; } else { $scope.complete = false; } } function getPoints(user) { var points = 0; points += user.stats.views; points += user.stats.followers * 100; points += user.stats.following * 100; points += user.pens.length * 20; points += user.stats.hearts * 100; points += user.stats.comments * 50; user.points = points / 10000; } function setImages() { var ratio_1 = $scope.users[0].points / $scope.top.total_points; var ratio_2 = $scope.users[1].points / $scope.top.total_points; $scope.users[0].image_size = { width: ratio_1 * 100 + '%' }; $scope.users[1].image_size = { width: ratio_2 * 100 + '%' }; } function getUserPens(user, page) { var getPens = CodepenDataService.getPens(user.nickname, 'public', page); getPens.then(function(pens) { setCurrentPen(user, pens, 0); $.each(pens, function() { this.views = parseInt(this.views || 0); this.loves = parseInt(this.loves || 0); this.comments = parseInt(this.comments || 0); updatePen(user,this); }); getPoints(user); updateTops(); setImages(); if(!$scope.edit) { $timeout(function() { getUserPens(user, page + 1); }, 600); } else { handleUserComplete(user, 'Cancelled'); } }, function(err) { handleUserComplete(user, err); }); } function handleUserComplete(user, message) { user.current_pen = null; if(!user.pens_loaded) user.pens_loaded = true; checkComplete(); } function getUser(user) { var getUser = CodepenDataService.getUser(user.nickname); getUser.then(function(profile) { user.loading = false; updateUser(user, profile); }, function(err) { user.loading = false; user.error = '"' + user.nickname + '" could not be found.'; console.warn(err); }); } $scope.setDetailUser = function(user) { $scope.detail_user = user; } $scope.resetDetailUser = function() { $scope.detail_user = false; } $scope.loadCodepenData = function() { $scope.edit = false; $.each($scope.users, function() { var user = this; var getting = true; getUserPens(user,1); }); }; $scope.randomUser = function(which) { $scope.users[which].nickname = randomUser(); getUser($scope.users[which]); } function clearError(user) { user.error = ""; } function clearErrors() { clearError($scope.users[0]); clearError($scope.users[1]); } function randomUser() { var users = usersList(); return users[Math.round(Math.random() * (users.length - 1))] } // top 300 users. function usersList() { return [ "thebabydino","tmrDevelops","pixelass","WhiteWolfWizard","natewiley","oknoblich","bennettfeely","jackrugile","hugo","LukyVj","towc","yoksel","dudleystorey","lukerichardville","Hornebom","netsi1964","nakome","berdejitendra","kenjiSpecial","katydecorah","rlemon","abergin","chrisgannon","ge1doot","lbebber","loktar00","Sonick","FWeinb","juanbrujo","andreasstorm","zadvorsky","tholman","Mombasa","fixcl","judag","MyXoToD","EduardoLopes","Zeaklous","HugoGiraudel","suez","grayghostvisuals","satchmorun","rileyjshaw","dope","gbnikolov","jakealbaugh","hakimel","elrumordelaluz","Mamboleoo","rachsmith","chrisota","kevinjannis","Kseso","TimPietrusky","ImagineProgramming","enxaneta","SitePoint","joshnh","KyleDavidE","brbcoding","TimLamber","raurir","rafaelcastrocouto","joe-watkins","alexsafayan","leemark","samarkandiy","motorlatitude","desandro","the_ruther4d","antoniskamamis","sdras","DonKarlssonSan","carpenumidium","ettrics","pmk","jakob-e","lonekorean","pouretrebelle","jshawl","wontem","tystrong","ScottMarshall","akwright","laviperchik","sol0mka","Pesca","mariusbalaj","spookyscary","chriscoyier","scottkellum","donovanh","GreenSock","code_dependant","zerospree","grgrdvrt","markmurray","Thibaut","unmeshpro","davatron5000","jorgeatgu","trhino","Dreamdealer","maggiben","m412c0","soulwire","32bitkid","waddington","rickyeckhardt","yukulele","egrucza","Francext","winkerVSbecks","nicolazj","schoenwaldnils","pcameron","indyplanets","EightArmsHQ","dervondenbergen","fbrz","seanseansean","mikehobizal","joshbader","zachernuk","nicoptere","noahblon","daneden","cx20","codeandcam","roborich","gastonfig","simeydotme","vineethtr","gpyne","Ruddy","wenbin5243","shubhra","hynden","acarva1","martinwolf","SaschaSigl","kaliedarik","stefanjudis","Xanmia","noeldelgado","Michiel","simurai","timohausmann","GabbeV","boltaway","pixelthing","airnan","MichaelArestad","ykob","Metty","DeptofJeffAyer","atelierbram","jjmartucci","creme","soulrider911","designcouch","ZevanRosser","dehash","geoffyuen","davilious","msurguy","hans","dissimulate","edankwan","satcy","chinchang","trajektorijus","mladen___","johnie","kman","tjoen","chrisnager","AmeliaBR","yusufbkr","jonitrythall","rachelwong","beesandtrees","jpod","cchambers","auginator","frytyler","jessenwells","robertmesserle","Oka","naoyashiga","mariosmaselli","XDBoy018","larrygeams","BrianDGLS","moklick","andytran","CrocoDillon","zessx","msval","pankajparashar","jonigiuro","MarcMalignan","jeroens","ludviglindblom","sakri","keithclark","ajerez","mallendeo","alexdevero","jurbank","brownerd","jcoulterdesign","potatoDie","shakdaniel","marian-cojoc-ro","rachelnabors","uriuriuriu","virgilpana","zachacole","bronsrobin","daless14","Elbone","ZCKVNS","vsync","pirrera","matt-west","long-lazuli","awesomephant","frxnz","Lewitje","amcharts","yy","SaraSoueidan","Aldlevine","jxnblk","icebob","PageOnline","ElmahdiMahmoud","terrymun","icutpeople","prowebix","carmination","bali_balo","fusco","jaflo","boylett","adamjld","brandonbrule","chris-creditdesign","nickmoreton","mknadler","igcorreia","scrimothy","rss","run-time","jlong","macreart","achudars","ssh","cjgammon","ControlledChaos","monstersaurous","christian-fei","captainbrosset","Funsella","kevingimbel","onediv","s","rlacorne","Yakudoo","drew_mc","shshaw","michaellee","ThisIsJohnBrown","chrislaarman","jotavejv","tdevine33","ionic","pwsm50","shadeed","georgehastings","ademilter","keithwyland","khadkamhn","rikschennink","bphillips201","zitrusfrisch","jhamon","andersschmidt","Rplus","chrishutchinson","Zaku","jsbrown","kowlor","paintbycode","ashmind","souporserious","Guilh" ] } }
]);
function getParam(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'), results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
Stat Battles - Script Codes
Stat Battles - Script Codes
Home Page Home
Developer Ethan
Username pianotiles2
Uploaded January 12, 2023
Rating 3
Size 10,854 Kb
Views 8,096
Do you need developer help for Stat Battles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ethan (pianotiles2) Script Codes
Name
Particle Swarm
Dot waves
Roblox
TRUMP VS CLINTON
Jigglypuff
Rainbow Messenger
My Homepage
Firework
Solar System
A Pen by Ethan
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!