Skip to content

Commit

Permalink
Added web page
Browse files Browse the repository at this point in the history
  • Loading branch information
Petr Patotski committed Jun 12, 2017
1 parent 3a7a6f8 commit c374ba6
Show file tree
Hide file tree
Showing 4 changed files with 2,363 additions and 3 deletions.
10 changes: 10 additions & 0 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
var gulp = require('gulp');
var inlinesource = require('gulp-inline-source');

gulp.task('build', function () {
return gulp.src('./page.html')
.pipe(inlinesource({
compress: false
}))
.pipe(gulp.dest('./site'));
});
8 changes: 5 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"coveralls": "latest",
"eslint": "latest",
"gulp": "latest",
"gulp-inline-source": "latest",
"intl-messageformat": "latest",
"mocha": "latest",
"nyc": "latest",
Expand All @@ -17,9 +18,10 @@
"intl-messageformat-parser": "^1.3.0"
},
"scripts": {
"test": "nyc --reporter=html --reporter=text mocha",
"coverage": "nyc report --reporter=text-lcov | coveralls",
"deploy": "mocha && npm version patch && npm publish"
"test": "nyc --reporter=html --reporter=text mocha",
"coverage": "nyc report --reporter=text-lcov | coveralls",
"deploy": "mocha && npm version patch && npm publish",
"build": "gulp build"
},
"repository": {
"type": "git",
Expand Down
325 changes: 325 additions & 0 deletions page.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
<!DOCTYPE html>
<html>
<head>
<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="Application Localizer that helps with localizing applications">
<title>Application Localizer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font: normal 20px sans-serif;
color: #555;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

ul {
list-style: none;
}

a {
text-decoration: none;
color: inherit;
cursor: pointer;

opacity: 0.8;
}

a:hover {
opacity: 1;
}

hr {
width: 150px;
height: 2px;
background-color: #555;
border: 0;
margin-bottom: 80px;
}

textarea {
width: 100%;
height: 200px;
}

section {
display: flex;
flex-direction: column;
align-items: center;

padding: 125px 100px;
}

@media (max-width: 992px){

section {
padding: 100px 30px;
}

}

section h3.title {
color: #414a4f;
text-transform: capitalize;
font: bold 32px 'Open Sans', sans-serif;
margin-bottom: 35px;
text-align: center;
}

section p {
max-width: 800px;
text-align: center;
margin-bottom: 35px;
padding: 0 20px;
line-height: 2;
}

ul.flex-ul {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

header {
background-color: rgb(209, 220, 240);
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #333;
padding: 20px 100px;
}

header h2 {
display: flex;
}

@media (max-width: 992px) {
header {
flex-direction: column;
padding: 20px 50px;
}

header span {
display: none;
}
}

.content-section {
background-color: #fff;
display: flex;
flex: 1;
}

.content-section .flex-ul li {
padding: 15px;
border-radius: 3px;

background-clip: content-box;
background-size: cover;
background-position: center;
}

.content-section .flex-ul li.quarter {
flex-basis: 25%;
}

.content-section .flex-ul li.half {
flex-basis: 50%;
}


@media (max-width: 992px) {

.content-section .flex-ul li.quarter,
.content-section .flex-ul li.half {
flex-basis: 100%;
}

}

footer {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #fff;
background-color: #4f4f4f;
padding: 20px 0;
}

footer p {
font-size: 14px;
color: #AAA;
margin-bottom: 10px;
}

footer p a {
color: #fff;
}

@media (max-width: 992px){
footer {
padding: 20px 15px;
}

}
</style>
</head>

<body>
<header>
<h2>
<div style="width: 32px;height: 32px;">
<svg viewbox="0 0 128 128">
<ellipse rx="11" ry="40" cx="60" cy="60" fill="#73C097" transform="rotate(-4 16 132)"/>
<ellipse rx="12" ry="44" cx="60" cy="60" fill="#6E9AB1" transform="rotate(10 16 132)" />
<ellipse rx="8" ry="8" cx="44" cy="100" fill="#4B5291" transform="rotate(10 16 132)" />
</svg>
</div>
<a href="#">Web Localizer</a>
<span style="margin: 0 10px; font-size:20px">powered by <a href="https://www.npmjs.com/package/app-localizer">app-localizer</a></span>
</h2>
</header>


<section class="content-section">
<h3 class="title">Pseudo Text Generator</h3>
<p>Generate text into pseudo text. (Support <a href="https://formatjs.io/guides/message-syntax/">ICU Message syntax</a>)</p>
<hr>
<ul class="flex-ul">
<li class="half">
<ul>
<li>
<input id="accents" type="checkbox" onchange="updateSettings()">
<label for="accents">Accents on letters</label>
</li>
<li>
<input id="right-to-left" type="checkbox" onchange="updateSettings()">
<label for="right-to-left">Right-to-Left</label>
</li>
<li>
<input id="exclamations" type="checkbox" onchange="updateSettings()">
<label for="exclamations">Exclamations</label>
</li>
<li>
<input id="brackets" type="checkbox" onchange="updateSettings()">
<label for="brackets">Brackets</label>
</li>
<li>
<input id="exception" type="checkbox" onchange="updateSettings()">
<label for="exception">Force Exception</label>
</li>
</ul>
</li>
<li class="half">
<ul>
<li>
<input id="sentence" type="number" min="0" style="text-align: right;" onchange="updateSettings()">
<label for="sentence"> % Longer sentence</label>
</li>
<li>
<input id="word" type="number" style="text-align: right;" min="0" onchange="updateSettings()">
<label for="word"> % Longer word</label>
</li>
</ul>
</li>
</ul>

<ul class="flex-ul">
<li class="half">
<h4>Input</h4>
<textarea id="input"></textarea>
</li>
<li class="half">
<h4>Output</h4>
<textarea id="output" readonly></textarea>
</li>
</ul>
</section>


<footer>
<p>Copyright 2017 <a href="https://github.com/ppatotski/app-localizer">github.com</a> - All Rights Reserved.</p>
</footer>

<script type="text/javascript" src="/node_modules/intl-messageformat-parser/dist/parser.js" inline></script>
<script type="text/javascript" src="/localizer.js" inline></script>
<script type="text/javascript">
'use strict';
const inputElement = document.getElementById('input');
const outputElement = document.getElementById('output');

function updateSettings() {
localStorage.setItem('accents', document.getElementById('accents').checked);
localStorage.setItem('right-to-left', document.getElementById('right-to-left').checked);
localStorage.setItem('exclamations', document.getElementById('exclamations').checked);
localStorage.setItem('brackets', document.getElementById('brackets').checked);
localStorage.setItem('exception', document.getElementById('exception').checked);
localStorage.setItem('sentence', document.getElementById('sentence').value);
localStorage.setItem('word', document.getElementById('word').value);
transform();
}

function loadSettings() {
document.getElementById('accents').checked = localStorage.getItem('accents') === 'true';
document.getElementById('right-to-left').checked = localStorage.getItem('right-to-left') === 'true';
document.getElementById('exclamations').checked = localStorage.getItem('exclamations') === 'true';
document.getElementById('brackets').checked = localStorage.getItem('brackets') === 'true';
document.getElementById('exception').checked = localStorage.getItem('exception') === 'true';
document.getElementById('sentence').value = localStorage.getItem('sentence');
document.getElementById('word').value = localStorage.getItem('word');
}

function toPseudoText(text) {
const options = {
expander: localStorage.getItem('sentence') / 100,
accents: localStorage.getItem('accents') === 'true',
rightToLeft: localStorage.getItem('right-to-left') === 'true',
exclamations: localStorage.getItem('exclamations') === 'true',
brackets: localStorage.getItem('brackets') === 'true',
forceException: localStorage.getItem('exception') === 'true',
wordexpander: localStorage.getItem('word') / 100
};
return AppLocalizer.toPseudoText(text, options, IntlMessageFormatParser);
}

function transform() {
outputElement.value = toPseudoText(inputElement.value || inputElement.placeholder);
}

function updatePlaceholder() {
const placeholder = `It's my cat's {year, selectordinal,
one {#st}
two {#nd}
few {#rd}
other {#th}
} birthday!`;

inputElement.placeholder = placeholder;
outputElement.value = toPseudoText(placeholder);
}

inputElement.addEventListener('keyup', transform);
loadSettings();
updatePlaceholder();
</script>
</body>

</html>
Loading

0 comments on commit c374ba6

Please sign in to comment.