forked from nwtgck/nipp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (88 loc) · 4.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--<!DOCTYPE html>-->
<html ng-app="nipp">
<head>
<meta charset="utf-8">
<!-- Load manifest.json for PWA -->
<link rel="manifest" href="./manifest.json">
<script>
// Register server-worker.js when service worker is available
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js').then(function(){
console.log('Service Worker Registered');
});
}
</script>
<title>nipp</title>
<meta name="description" content="URL Hosted Mini Application">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Opal -->
<script defer src="bower_components/opal/opal/0.11.3/opal.min.js"></script>
<script defer src="bower_components/opal/opal/0.11.3/opal-parser.min.js"></script>
<!-- URL parse -->
<script defer src="node_modules/url-parse/dist/url-parse.min.js"></script>
<!-- Pako (zlib) -->
<script defer src="node_modules/pako/dist/pako.min.js"></script>
<!-- LZMA -->
<script defer src="node_modules/lzma/src/lzma_worker-min.js"></script>
<!-- Ace editor -->
<script src="node_modules/ace-builds/src-min-noconflict/ace.js"></script>
<!-- AngularJS -->
<!-- NOTE: Don't use `defer` or `sync` because they disable highlight of ace editor (why?) -->
<script src="node_modules/angular/angular.min.js"></script>
<!-- NOTE: Don't use "angular-ui/ui-ace" becausenpm 0.2.3 has bug in Android Chrome (after typing ng-model is empty) -->
<!-- NOTE: Don't use `defer` or `sync` because they disable highlight of ace editor (why?) -->
<script src="node_modules/ace-angular/ace-angular.js"></script>
<script defer src="js/app.js"></script>
<!-- Babel (standalone) -->
<script defer src="node_modules/@babel/standalone/babel.min.js"></script>
<!-- Pure.css -->
<link rel="stylesheet" href="node_modules/purecss/build/pure-min.css">
<link rel="stylesheet" href="node_modules/purecss/build/grids-responsive-min.css">
<style>
.pure-form, .pure-form-aligned {
/* Remove margin-button of pure-form */
margin-bottom: 0;
}
</style>
</head>
<body>
<div ng-controller="mainCtrl">
<form class="pure-form pure-g">
<input type="text" ng-model="pageTitle" placeholder="Page title" class="pure-u-11-12">
<div class="pure-u-1-12" style="text-align: center">
<img src="images/twitter.png" alt="Share on Twitter" ng-click="shareOnTwitter()" style="width: 2em; height: 2em;">
</div>
</form>
<div class="pure-g">
<div class="pure-u-1">
<div ace-editor="{onLoad: onLoadScriptEditor, mode: transpiler.aceEditorMode}" style="height:10em" ng-model="script"></div>
</div>
</div>
<form class="pure-form pure-form-aligned">
<label for="transpiler">Transpiler:</label>
<select id="transpiler" ng-options="t.name for t in transpilers" ng-change="onChangeTranspiler()" ng-model="transpiler">
</select>
<label for="compression_alg">Compression:</label>
<select id="compression_alg" ng-options="a.name for a in compressionAlgs" ng-model="compressionAlg">
</select>
</form>
<form class="pure-form pure-g">
<textarea ng-model="inputText" ng-change="onChangeInputText()" placeholder="Input" rows="10" class="pure-u-1 pure-u-md-1-2"></textarea>
<textarea ng-value="outputText" placeholder="Output" rows="10" class="pure-u-1 pure-u-md-1-2"></textarea>
</form>
<button ng-click="setShowError(!showError)" ng-style="{color: hasError? 'red': ''}" class="pure-button">Show/Hide error</button>
<span ng-if="showError">
<div class="pure-g">
<textarea class="pure-u-1" ng-model="errorStr"></textarea>
</div>
</span>
<button ng-click="setShowTranspiledJsCode(!showTranspiledJsCode)" class="pure-button">Show/Hide transpiled JS code</button>
<span ng-if="showTranspiledJsCode">
<div class="pure-g">
<div class="pure-u-1">
<div ace-editor="{mode: 'javascript'}" style="height:10em" ng-model="transpiledJsCode"></div>
</div>
</div>
</span>
</body>
</html>