bin/index.html
<!DOCTYPE html><html lang="en"><head><title>arca - a simple aspect ratio calculator</title><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Find the missing value for an aspect ratio!"><meta name="robots" content="index,follow,noodp"><meta name="googlebot" content="index,follow"><meta property="og:url" content="http://stefanbc.github.io/arca"><meta property="og:type" content="website"><meta property="og:title" content="arca"><meta property="og:image" content="http://stefanbc.github.io/arca/img/logo.png"><meta property="og:description" content="Find the missing value for an aspect ratio!"><meta property="og:site_name" content="arca"><meta name="twitter:card" content="summary"><meta name="twitter:creator" content="@stefanbc"><meta name="twitter:url" content="http://stefanbc.github.io/arca"><meta name="twitter:title" content="arca"><meta name="twitter:description" content="Find the missing value for an aspect ratio!"><meta name="twitter:image" content="http://stefanbc.github.io/arca/img/logo.png"><link href="https://plus.google.com/+StefanCosmaIO" rel="publisher"><meta itemprop="name" content="arca"><meta itemprop="description" content="Find the missing value for an aspect ratio!"><meta itemprop="image" content="http://stefanbc.github.io/arca/img/logo.png"><link rel="prefetch shortcut icon" href="./img/favicon.ico?v=0.9.1" type="image/x-icon"><link rel="prefetch stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,300,700" type="text/css"><link rel="prefetch stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"><link rel="prefetch stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" type="text/css"><link rel="prefetch stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" type="text/css"><link rel="prefetch stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" type="text/css"><link rel="prefetch stylesheet" href="css/style.min.css" type="text/css"></head><body><div class="main-container"><section id="default-layout" class="container layout"><div id="calculator-wrapper" class="row"><div class="twelve columns"><div id="aspect-ratio-buttons-wrapper" class="row text-center"><div class="three columns aspect-ratio-button"><button class="u-full-width">16 : 9</button></div><div class="three columns aspect-ratio-button"><button class="u-full-width">21 : 9</button></div><div class="three columns aspect-ratio-button"><button class="u-full-width">4 : 3</button></div><div class="three columns aspect-ratio-button"><button class="u-full-width">2 : 1</button></div></div><div id="values-wrapper" class="row"><div id="original-values" class="one-half column"><div class="input-wrapper"><label for="w1">w1</label><input type="text" name="w1" id="w1" placeholder="1920" class="u-full-width"></div><div class="input-wrapper"><label for="h1">h1</label><input type="text" name="h1" id="h1" placeholder="1080" class="u-full-width"></div></div><div id="new-values" class="one-half column"><div class="input-wrapper"><label for="w2">w2</label><input type="text" name="w2" id="w2" class="u-full-width"></div><div class="input-wrapper"><label for="h2">h2</label><input type="text" name="h2" id="h2" class="u-full-width"></div></div></div><div class="row"><div id="aspect-ratio-wrapper" class="eleven columns">Current aspect ratio: <strong id="aspect-ratio-suggestion"></strong></div><div id="reset-button" class="one column"><span class="fa fa-refresh"></span></div></div></div></div><div id="info-wrapper" class="row"><div class="twelve columns"><h2>arca<span id="version">0.9.1</span><span class="subtitle">a simple aspect ratio calculator</span></h2><p>While resizing images, use this calculator to preserve their aspect ratio. The formula used by this app is:</p><p><em>(h1 / w1) x w2 = h2</em></p><p>Where h1 is the original height, w1 is the original width, w2 is the new width and h2 is the new height.</p></div></div><footer id="copy" class="row text-center"><div class="twelve columns"><div class="row"><div class="twelve columns"><span id="info-button" class="fa fa-ellipsis-h"></span></div></div><a href="https://github.com/stefanbc/arca" target="_blank"><code></a> by <a href="http://stefancosma.xyz" target="_blank">Stefan Cosma</a></div></footer></section></div><script src="js/analytics.config.js" type="text/javascript"></script><script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js" type="text/javascript"></script><script type="text/javascript">require(['js/require.config'], function() { require(['jQuery', 'app']); });</script></body></html>