-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (79 loc) · 4.79 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Tinypng</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./node_modules/angular/angular-csp.css">
<link rel="stylesheet" href="./node_modules/angular-toastr/dist/angular-toastr.css">
<link rel="stylesheet" href="./node_modules/muicss/dist/css/mui.css">
<link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="./index.css">
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/ng-file-upload/dist/ng-file-upload.js"></script>
<script src="./node_modules/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="./node_modules/muicss/dist/angular/mui-angular.js"></script>
<script src="./node_modules/filesize/lib/filesize.es6.js"></script>
<script src="./index.js"></script>
</head>
<body ng-app="electronTinypng" style="background: #eee; padding-top: 20px; padding-bottom: 20px;" ng-controller="mainController">
<mui-container fluid>
<mui-panel style="overflow: hidden;">
<mui-row>
<mui-col sm="6" class="mui--text-left">
</mui-col>
<mui-col sm="6" class="mui--text-left">
</mui-col>
</mui-row>
<div class="mui--text-body1" style="display: flex; height: 100px; justify-content: center;
align-items: center; border: 2px dashed #ccc; margin-bottom: 10px; cursor: pointer;
overflow: hidden;"
ngf-drop="compressFiles($files)" ngf-multiple="true">
<i class="fa fa-picture-o" aria-hidden="true"></i> Drop your image(s) here
</div>
<mui-row>
<mui-col xs="6" class="mui--text-left" style="height: 48px; line-height: 48px;">
Monthly Usage: <strong>{{usage}}</strong>
</mui-col>
<mui-col xs="6" class="mui--text-right">
<mui-button ng-click="toggleSettings()" variant="raised">
<i class="fa fa-cog" aria-hidden="true"></i>
</mui-button>
</mui-col>
</mui-row>
<form ng-show="settingsOn" style="padding-top: 10px;">
<mui-row>
<mui-col xs="6">
<mui-input ng-model="settings.apiKey" label="TinyPNG API Key *" type="text" required ng-disabled="savingSettings"></mui-input>
</mui-col>
<mui-col xs="6" class="ng-hide">
<mui-input ng-model="settings.numComp" label="No. of Compressions per Image *" type="number" requred ng-disabled="savingSettings"></mui-input>
</mui-col>
</mui-row>
<mui-button color="primary" ng-click="saveSettings()">Save</mui-button>
</form>
</mui-panel>
<mui-panel ng-show="filesToCompress.length > 0">
<div class="file-to-compress status-{{f.status}}" ng-repeat="f in filesToCompress | orderBy: '-timeAdded'" title="{{f.path}}">
<span class="status-text" style="margin-right: 3px;">
<i class="fa fa-circle-o-notch fa-spin fa-fw" ng-show="f.status === 'Pending'"></i>
<i class="fa fa-check fa-fw" aria-hidden="true" ng-show="f.status === 'Compressed'"></i>
<i class="fa fa-exclamation-triangle fa-fw" aria-hidden="true" ng-show="f.status === 'Error'"></i>
</span>
<span class="name-text"><a href="file://{{f.path}}" target="_blank"><strong>{{f.name}}</strong></a></span>
<span class="size-text">{{f.readableSize}}</span>
<span class="compressed-size-text" ng-show="f.readableSizeCompressed">{{f.readableSizeCompressed}}</span>
</div>
</mui-panel>
<mui-row style="color: #999;">
<mui-col sm="6" class="mui--text-left">
Powered by <a href="https://tinypng.com" target="_blank">
<img src="./tinypng-logo.png" alt="" style="width: 125px; height: 19px; display: inline-block; margin: 0 5px;"></a>
</mui-col>
<mui-col sm="6" class="mui--text-right">
v0.1.1 - License: MIT - 2016 © <a href="https://xyzhou.com" target="_blank" style="color: #666">Xinyun Zhou</a>
</mui-col>
</mui-row>
</mui-container>
</body>
</html>