-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
128 lines (103 loc) · 5.42 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PWA Playlist Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json">
<!-- STYLES -->
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body class="blue-grey darken-4 white-text">
<div id="loading">
<img id="loading-image" src="images/loading.gif" alt="Loading..." />
</div>
<div class="container">
<div class="center">
<h1>PWA Playlist Generator</h1>
<section id="pwa-generator">
<form id="form-pwa-generator">
<div class="row">
<div class="col s12">
<div class="file-field input-field">
<div class="btn pink waves-effect waves-light">
<span>Root Folder</span>
<input id="input-pwa-root-folder" type="file" webkitdirectory>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="input-pwa-title" type="text">
<label for="input-pwa-title">Application Title</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<input id="input-pwa-shortname" type="text">
<label for="input-pwa-shortname">Application Shortname</label>
</div>
</div>
<div class="col s12">
<div class="input-field">
<textarea id="input-pwa-description" class="materialize-textarea"></textarea>
<label for="input-pwa-description">Application Description</label>
</div>
</div>
<div class="col s12">
<div class="file-field input-field">
<div class="btn pink waves-effect waves-light">
<span>ICON 192 PX</span>
<input id="input-icon192" type="file" accept="image/x-png">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="col s12">
<div class="file-field input-field">
<div class="btn pink waves-effect waves-light">
<span>ICON 512 PX</span>
<input id="input-icon512" type="file" accept="image/x-png">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="col s12">
<div class="input-field">
<select>
<option value="theme_none">None</option>
<option value="theme_materialize_light">Materialize Light</option>
<option value="theme_materialize_dark">Materialize Dark</option>
</select>
<label>Select a theme</label>
</div>
</div>
<div class="col s12">
<button id="btn-pwa-generate" class="btn btn-large green waves-effect waves-light">Generate PWA</button>
</div>
</div>
</form>
</section>
</div>
<div class="center">
<section id="section-about">
<p><a href="https://github.com/HE-Arc/pwa-playlist-generator" target="_blank" rel="noopener">Visit this project Github</a></p>
</section>
</div>
</div>
<!-- SCRIPTS -->
<script src="js/materialize.min.js"></script>
<script src="js/jszip.js"></script>
<script src="js/common.js"></script>
<script src="js/generator-template.js"></script>
<script src="js/generator-app.js"></script>
</body>
</html>