-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
288 lines (278 loc) · 16.5 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Commons Mobile App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a href="./index.html" class="navbar-brand mb-0 h1">Commons Mobile App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link scroll" href="#description">About</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#community">Community</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#usage">Usage</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#photo-guide">Photo Guidelines</a></li>
<li class="nav-item"><a class="nav-link scroll" href="./docs.html#docs">Documentation</a></li>
<li class="nav-item "><btn href="#" class="nav-link scroll toggle-theme"></btn>
</ul>
</div> <!-- .collapse -->
</div> <!-- .container -->
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Commons Mobile App</h1>
<a class="app-badge f-droid-badge" href="https://f-droid.org/repository/browse/?fdid=fr.free.nrw.commons">
<img src="images/f-droid-badge.png" alt="F-Droid Logo" />
</a>
<a class="app-badge play-store-badge" href="https://play.google.com/store/apps/details?id=fr.free.nrw.commons">
<img src="images/google-play-badge.png" alt="Google Play Store badge" />
</a>
</div>
</div>
<div class="container inner" id="description">
<h2>The App</h2>
<p class="lead">
The Commons Mobile App is a <a href="https://github.com/commons-app/apps-android-commons">
community-maintained</a> app that makes it easy to upload your pictures to
<a href="https://commons.wikimedia.org/wiki/Special:MyLanguage/Commons:Welcome">Wikimedia Commons</a>.
The app can be installed on any Android device and uses your Commons user account to upload photos.
</p>
<div class="btn-group">
<a class="btn btn-outline-primary" role="button" href="https://f-droid.org/repository/browse/?fdid=fr.free.nrw.commons">F-Droid page</a>
<a class="btn btn-outline-primary" role="button" href="https://play.google.com/store/apps/details?id=fr.free.nrw.commons">Google Play page</a>
</div>
</div>
<div class="section-divider"></div>
<div class="container inner" id="community">
<h2>The Community</h2>
<p class="lead">
Join one of the largest photo and multimedia communities in the world. Wikimedia Commons is not only the image repository for <a href="https://www.wikipedia.org/">Wikipedia</a>, but an independent project that seeks to document the world with photos, videos and recordings.
</p>
<p class="lead">
The community organizes many annual events and contests, such as
<a href="https://www.wikilovesmonuments.org/">Wiki Loves Monuments</a> and
<a href="http://wikilovesearth.org/">Wiki Loves Earth</a>. By using the app
you can easily take pictures when you come across a landmark that might be
missing a picture, requires a different angle, or has not been photographed for a while.
Also, you can <a href="#contributions-ongoing-campaigns">learn about ongoing campaigns</a>
right from within the app!
</p>
<a class="btn btn-lg btn-outline-primary"
role="button"
href="https://commons.wikimedia.org/w/index.php?title=Special:UserLogin&returnto=Special:MyLanguage/Main+Page">
Join Commons
</a>
</div>
<div class="section-divider"></div>
<div class="container inner" id="features">
<h2>Features</h2>
<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="item shadow">
<div class="item-image">
<img class="feature-image"
src="images/screen-explore.jpg"
alt="Explore screen where users discover images from Commons."
title="Explore screen where users discover images from Commons.
Attribution:
Eastern chanting goshawk..: Charles J Sharp [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)]
46-101-0548 Lviv Latin Cathedral..: Rbrechko [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)]
"
/>
</div>
<div class="hover-bar"></div>
<h3 class="item-header">
Explore Commons
<span class="badge badge-pill badge-primary">New</span>
</h3>
<p class="item-text">
Explore images featured in Commons right from the app.
Further, you <em>do not need an account</em> to explore Commons
or search it using the app!
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="item shadow">
<div class="item-image">
<img class="feature-image"
src="images/screen-search-media.jpg"
alt="Search screen where users search for images in Commons."
title="Search screen where users search for images in Commons.
Attribution:
Flower with pollen: Muhammad Mahdi Karim. Edited by Jjron. [CC BY-SA 2.5 (https://creativecommons.org/licenses/by-sa/2.5)]
Cape Skink Flowers: Prosthetic Head [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)]"
/>
</div>
<div class="hover-bar"></div>
<h3 class="item-header">
Search Commons
<span class="badge badge-pill badge-primary">New</span>
</h3>
<p class="item-text">
Want to search for images in Commons?
Now, you can do that using the Commons app!
You can search both media and categories.
Note that you <em>do not need an account</em>
to search.
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="item shadow">
<div class="item-image">
<img class="feature-image"
src="images/screen-upload-1.jpg"
alt="Upload images screen to upload images to Commons."
title="Upload images screen to upload images to Commons. Attribution: Meena Kadri [CC BY 2.0 (https://creativecommons.org/licenses/by/2.0)]"
/>
</div>
<div class="hover-bar"></div>
<h3 class="item-header">Upload your files anywhere</h3>
<p class="item-text">
You can upload your pictures anywhere you have time. For example during the bus ride home from a photo trip.
</p>
</div>
</div>
<div class="col-lg-6 col-lg-pull-6 col-sm-12">
<div class="item shadow">
<div class="item-image">
<img class="feature-image"
src="images/screen-upload-3.jpg"
alt="Categorize upload screen to add categories to the image being uploaded."
title="Categorize upload screen to add categories to the image being uploaded."
/>
</div>
<div class="hover-bar"></div>
<h3 class="item-header">Categorize your photos</h3>
<p class="item-text">
Assign categories to your photos, which makes them easier for other people to find.
</p>
</div>
</div>
<div id="share-to-upload" class="col-lg-6 col-lg-pull-6 col-sm-12">
<div class="item shadow">
<div class="item-image">
<img class="feature-image"
src="images/upload-via-sharing.jpeg"
alt="Commons app in the list of apps to share an image."
title="Commons app in the list of apps to share an image."
/>
</div>
<div class="hover-bar"></div>
<h3 class="item-header">Upload by sharing</h3>
<p class="item-text">
Start uploading images to Commons just by
<em>sharing</em> them from your favourite
gallery app. Just choose the Commons app
from the list of apps and you'll directly
get into uploading the image using the
Commons app.
</p>
</div>
</div>
<div class="col-lg-6 col-lg-push-6 col-sm-12">
<div class="item shadow">
<div class="item-image">
<img class="feature-image"
src="images/screen-nearby.jpg"
alt="Nearby places missing image screen to discover places nearby that need images."
title="Nearby places missing image screen to discover places nearby that need images."
/>
</div>
<div class="hover-bar"></div>
<h3 class="item-header">View nearby missing images</h3>
<p class="item-text">
The app lets you view nearby missing images. This way you help out Wikipedia to have images for all articles, and you will discover beautiful places close to you.
</p>
</div>
</div>
<div id="contributions-ongoing-campaigns" class="col-lg-6 col-sm-12">
<div class="item shadow">
<div class="item-image">
<img class="feature-image"
src="images/screen-home-contributions-with-campaigns.jpeg"
alt="Contributions screen which features users' contributions and ongoing campaigns."
title="Contributions screen which features users' contributions and ongoing campaigns.
Attribution:
Sunset at chunnmbar: Kaartic [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)]"
/>
</div>
<div class="hover-bar"></div>
<h3 class="item-header">
View your contributions and ongoing campaigns
<span class="badge badge-pill badge-primary">New</span>
</h3>
<p class="item-text">
The app shows all the uploads you have made to Commons.
This is a great way to easily view your contributions.
Further, you could get to know about ongoing campaigns
from within the app. You can tap on the campaign banner
in the app to learn more about it.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-divider"></div>
<div class="inner container" id="usage">
<h2>Installation & Usage</h2>
<p class="lead">Installing and using the app is easy:</p>
<ol class="large-count">
<li>Download Wikimedia Commons from the <a href="https://play.google.com/store/apps/details?id=fr.free.nrw.commons">Google Play Store</a>.</li>
<li>Take a picture of something interesting.</li>
<li>In your camera app, click to view the picture you just took.</li>
<li>Press "Share".</li>
<li><a href="#share-to-upload">Select "Upload to Commons".</a></li>
<li>You will have to log in for the first time (if you don't have an account,
<a href="https://commons.wikimedia.org/w/index.php?title=Special:CreateAccount&returnto=Commons:Welcome">create one</a> for free).</li>
<li>Enter a caption and description for the picture.</li>
<li>Enter relevant depictions and categories.</li>
<li>Choose a license for the image being uploaded.</li>
<li>Finish the upload.</li>
</ol>
</div>
<div class="section-divider"></div>
<div class="inner container" id="photo-guide">
<h2>Photo Guidelines</h2>
<p class="lead">
The following guidelines will help you to understand what photos the community is looking for.
There is flexibility in these guidelines and they don't cover all cases.
If you are unsure, just upload your photo and discuss it with the community.
</p>
<ul class="guide-list">
<li class="text-success">✓ Photos that document the world around you</li>
<li class="text-success">✓ Photos of notable objects that you find in the <strong>Nearby List</strong> in the app.</li>
<li class="text-danger">✖ Photos of you or your friends. But if you are documenting an event it doesn't matter if they are in the picture.</li>
<li class="text-danger">✖ Photos of poor quality. Make sure the things you are trying to document are visible in the picture.</li>
</ul>
</div>
<div class="section-divider"></div>
<footer class="inner container footer">
<h2>Commons Mobile App</h2>
<div class="btn-group">
<a class="btn btn-outline-primary" role="button" href="https://github.com/commons-app/apps-android-commons">Source code</a>
<a class="btn btn-outline-primary" role="button" href="https://github.com/commons-app/apps-android-commons/issues">Report an issue</a>
</div>
<div class="qr-code-div">
<img src="images/commons-app-qr.png"/>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
</html>