minitranslate
Version:
A lightweight way to change words into other words.
201 lines (186 loc) • 9.01 kB
HTML
<!--
┌┬┐┬┌┐┌┬┌┬┐┬─┐┌─┐┌┐┌┌─┐┬ ┌─┐┌┬┐┌─┐
││││││││ │ ├┬┘├─┤│││└─┐│ ├─┤ │ ├┤
┴ ┴┴┘└┘┴ ┴ ┴└─┴ ┴┘└┘└─┘┴─┘┴ ┴ ┴ └─┘
By Bryce Dorn
guava.cat
-->
<html>
<head>
<meta charset="utf-8">
<title>minitranslate.js</title>
<meta charset="utf-8">
<meta name="description" content="minitranslate.js" />
<meta name="keywords" content="minitranslate mini translate js nojquery" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-12">
<div class="jumbotron">
<div class="container">
<h1>minitranslate.js</h1>
<p>A lightweight way to change words into other words.</p>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-primary"><a href="#features">Features</a></button>
<button type="button" class="btn btn-lg btn-info"><a href="#use">Install</a></button>
<button type="button" class="btn btn-lg btn-warning"><a href="test">Tests</a></button>
<div class="btn-group">
<button type="button" id="dropdown-button" class="btn btn-lg btn-success dropdown-toggle" data-toggle="dropdown"><a id="dropdown-label">Download</a> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="js/minitranslate.js">minitranslate.js</a></li>
<li><a href="js/minitranslate.min.js">minitranslate.min.js</a></li>
<li class="divider"></li>
<li><a href="js/mt-lib.js">mt-lib.js</a></li>
<li class="divider"></li>
<li><a href="http://cdnjs.com/libraries/minitranslate/">cdnjs</a></li>
<li><a href="https://www.npmjs.org/package/minitranslate">npm</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="try">
<div class="col-md-4 col-md-offset-1 col-lg-4 col-lg-offset-1">
<div class="input-group-lg try">
<h3>Type here...</h3>
<input type="text" class="form-control" id="mt-input" placeholder="Try it out!"></input>
</div>
</div>
<div class="col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2">
<div class="input-group-lg try">
<h3 align="right">...see it translated here.</h3>
<input type="text" class="form-control" id="mt-output" placeholder="Translated text!"></input>
</div>
</div>
</div>
<div class="row lib">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
<table class="table" id="library">
<h3 align="center">Sample Library</h3>
<tr>
<td><b>Key</b></td>
<td><b>Value</b></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
<hr>
</div>
</div>
<div class="row feat" id="features">
<h1 class="large">Features</h1>
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-3 col-md-offset-3 col-lg-2 col-lg-offset-2">
<img src="img/watch@2x.png">
<div class="caption">
<h2>Fast translations.</h2>
<p>Quick RegExp matching finds the words that need to be replaced inside of a div and does it quickly.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-3 col-md-offset-0 col-lg-2 col-lg-offset-1">
<img src="img/book@2x.png">
<div class="caption">
<h2>Dead-simple library.</h2>
<p>Word-pair library is stored in JSON format in <b>mt-lib.js</b> and is easy to edit both in advance and on-the-fly.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-2 col-lg-offset-1">
<img src="img/goal@2x.png">
<div class="caption">
<h2>Case-insensitive.</h2>
<p>Works with any variation of uppercase and lowercase letters and will match them.</p>
</div>
</div>
</div>
<div class="row feat">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-3 col-md-offset-3 col-lg-2 col-lg-offset-2">
<img src="img/pencil@2x.png">
<div class="caption">
<h2>Customizability.</h2>
<p>Ability to ignore a div and its children or monitor a div for any changes.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-3 col-md-offset-0 col-lg-2 col-lg-offset-1">
<img src="img/spaceship@2x.png">
<div class="caption">
<h2>Make your own!</h2>
<p>Makes it extremely easy to make your own translator - all you need is a language in JSON-format (or a little bit of creativity)!</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-2 col-lg-offset-1">
<img src="img/box@2x.png">
<div class="caption">
<h2>One tiny package.</h2>
<p>The minified file is only <b>2kb</b> in size - perfect for small web projects and quick additions to existing text interfaces.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
<hr>
</div>
</div>
<div class="row feat" id="use">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<h1 class="large">Installation</h1>
<div class="caption">
<p>Grab either minitranslate.js or minitranslate.min.js and include it (or a link to it on cdnjs) in your index.html along with your translations library (add the library first):</p>
<p id="script"><script src="js/mt-lib.js"></script></p>
<p id="script"><script src="js/minitranslate.js"></script></p>
<p>Edit mt-lib.json and add as many word-replacement pairs as you so desire, just make sure it stays in the same directory as minitranslate.</p>
</div>
</div>
</div>
<div class="row use" id="use">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-3 col-md-offset-3 col-lg-4 col-lg-offset-2">
<div class="caption">
<h2>Static translation:</h2>
<p>Simply add the class "mt-translate" to a div and watch as it is translated according to your library.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-3 col-md-offset-0 col-lg-4 col-lg-offset-0">
<div class="caption">
<h2>Dynamic translation:</h2>
<p>Add two <input> divs with IDs:</p>
<p id="script"><input id="mt-input"/></p>
<p id="script"><input id="mt-output"/></p>
<p>Whenever the input's content is changed, the output's will be the translation according to all word-pair matches in your library.</p>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
<script src="js/mt-lib.js"></script>
<script src="js/minitranslate.js"></script>
<script src="js/app.js"></script>
</div>
</body>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 footer">
<h5>Crafted with love by <a href="http://bryce.io">bryce</a>, © 2014 <a href="http://opensource.org/licenses/MIT">The MIT License</a></h5>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40008117-7', 'minitranslate.me');
ga('send', 'pageview');
</script>
</footer>
</html>