-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
130 lines (101 loc) · 6.32 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
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Manifest generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.7.1/spectrum.min.css">
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.7.1/spectrum.min.js"></script>
</head>
<body>
<h1>Manifest Generator</h1>
<p>Would you like your website</p>
<uL>
<li>to feel like a native app (without writing one)?</li>
<li>to appear on the user's Android homescreen?</li>
<li>to start full screen (rather than in a browser)?</li>
</ul>
<p>If so, this simple page will generate the manifest file for you to put on your server to make it happen in Chrome and Opera for Android. (<a href="https://dev.opera.com/articles/installable-web-apps/">More about the web manifest format</a>, and download <a href="http://www.opera.com/mobile/operabrowser/android">Opera for Android</a> to try it out.)</p>
<form>
<section>
<h2>First</h2>
<p>Tell us the address of your site and click "check my site". The page will then look at your site and get any useful information and usable icons it can from the publicly-available information in the code.</p>
<div>
<label>Enter your address (must be <samp>https://</samp>):
<input name="url" type="url" pattern="https://.+" size="30" value="https://dev.opera.com/" required>
</label>
<input type="submit" value="Check my site">
</div>
<pre>...</pre>
<div id="errors"></div>
<p><a href="#" id="dl" download="manifest.json">Download <em>manifest.json</em></a></p>
<p>Choose any options below and the manifest will be automatically updated. Link to it by adding this line: <code><link rel="manifest" href="manifest.json"></code> just before the line <code></head></code> in your HTML.</p>
</section>
<section>
<h2>Next…</h2>
<p>We got this information your site. Change it, if you want. The <code>short_name</code> is what will actually be shown below your icon on the Android homescreen — keep it short!</p>
<div id="names">
<label for="l-name">Name</label>
<input id="l-name" name="name" type="text" maxlength="45" size="45" value="">
</div>
<div>
<label for="s-name">Short name</label>
<input id="s-name" name="short_name" type="text" size="12" value="">
</div>
</section>
<section>
<h2>Options</h2>
<h3>Set orientation</h3>
<p>Does your website/ app need to start at a certain orientation?</p>
<div class="orientation">Orientation:
<label>
<input type="radio" name="orientation" value="none" checked> none</label>
<label>
<input type="radio" name="orientation" value="portrait"> portrait</label>
<label>
<input type="radio" name="orientation" value="landscape"> landscape</label>
</div>
<h3>Start full screen?</h3>
<p>Sites served over <code>https</code> can start full-screen. You can tell Android to start your site full-screen like any other app, or in “true fullscreen” like a game, hiding everything but your app.</p>
<!--
<p>Insecure <code>http</code>-only sites can’t start full screen (because it’s a security risk; hackers could, for example, spoof a bank site.) Therefore, they start in a browser so the user can always see the real address. In this case, the checkbox is disabled.</p>
-->
<div class="fullscreen">
<label><strong>Standalone</strong> (Show operating system features such as the top bar, but not browser features such as an address bar or back buttons. Good for utility applications.)
<input type="radio" name="fullscreen" id="display-standalone" checked value="standalone">
</label>
<label><strong>Really fullscreen?</strong> (Good for games.)
<input type="radio" name="fullscreen" id="display-fullscreen" value="fullscreen">
</label>
<label><strong>Show as a browser</strong> (Show all browser features such as the address bar.)
<input type="radio" name="fullscreen" id="display-browser" value="browser">
</label>
</div>
<h3>Set a background colour</h3>
<p>While your app is being loaded, the background fills the sceen to show your user that something is happening. You may want to choose the predominant colour in your page or branding. (<a target="_blank" href="https://developers.google.com/web/updates/2015/09/using-web-app-manifest-to-set-solid-color-loading-screen">More about background colour</a>)</p>
<div>
<label>Choose background colour
<input type="color" name="bgcolor" value='#ffffff'>
</label>
</div>
<!-- Not implemented yet
<h3>Set a theme colour</h3>
<p>Theme color is used to help your visitors identify your app in some system functions such as "task switching". (<a target="_blank" href="https://developers.google.com/web/updates/2015/09/using-manifest-to-set-sitewide-theme-color?hl=en">More about theme colour</a>) </p>
<label>Choose theme colour
<input type="color" name="themecolor" value='#ffffff'>
</label>
-->
</section>
</form>
<footer>
<p><i>The reach of the web. The UX of apps. It's your site's manifest destiny.</i></p>
<p>The Manifest Generator is made by Stuart Langridge (<a href="http://www.kryogenix.org/">kryogenix.org</a>) and Bruce Lawson of <a href="http://dev.opera.com/">Opera</a>, the browser that lets you do more.</p>
<p>It uses <a href="http://crossorigin.me/">crossorigin.me</a>, “the free CORS proxy for everyone”, by <a href="https://github.com/technoboy10">technoboy10</a>. Please use it responsibly.</p>
</footer>
<script src="main.js"></script>
</body>
</html>