├── .gitignore
├── Readme.md
├── css
    ├── framework7
    │   ├── framework7.css
    │   ├── framework7.min.css
    │   ├── framework7.rtl.css
    │   ├── framework7.rtl.min.css
    │   ├── framework7.themes.css
    │   └── framework7.themes.min.css
    ├── img
    │   ├── i-f7.png
    │   ├── i-form-calendar.png
    │   ├── i-form-comment.png
    │   ├── i-form-email.png
    │   ├── i-form-gender.png
    │   ├── i-form-name.png
    │   ├── i-form-password.png
    │   ├── i-form-settings.png
    │   ├── i-form-tel.png
    │   ├── i-form-toggle.png
    │   └── i-form-url.png
    └── my-app.css
├── index.html
└── js
    ├── framework7
        └── framework7.min.js
    └── my-app.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | ## Framework7 and Parse
 2 | 
 3 | > *Note: this is an old, not maintained project and the frameworks used in it have changed since. We decided to still leave this project on GitHub as a reference for multiple tutorials which were based on this code repositary. You have been warned.* 
 4 | 
 5 | 
 6 | This repository holds an example web application built with [Framework7](http://www.idangero.us/framework7/#.VSRQUovF87Y) mobile web framework and powered by [Parse.com](https://www.parse.com) for user account data storage.
 7 | 
 8 | Application implements user registration and user login funcionality.
 9 | 
10 | You can find step by step tutorial about creating this mobile web application on [Htmlcenter](https://www.htmlcenter.com/blog/html5-frameworks-for-mobile-web-applications/). It describes how I have built this source code from ground up.
11 | 
12 | by [@sauliuz](https://twitter.com/sauliuz).
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/css/framework7/framework7.rtl.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Framework7 1.0.1
  3 |  * Full Featured Mobile HTML Framework For Building iOS Apps
  4 |  * 
  5 |  * http://www.idangero.us/framework7
  6 |  * 
  7 |  * Copyright 2015, Vladimir Kharlampidi
  8 |  * The iDangero.us
  9 |  * http://www.idangero.us/
 10 |  * 
 11 |  * Licensed under MIT
 12 |  * 
 13 |  * Released on: February 13, 2015
 14 |  */
 15 | /*=============
 16 |   Framework 7 RTL Additions
 17 | =============*/
 18 | html {
 19 |   direction: rtl;
 20 | }
 21 | /* === Lists === */
 22 | .list-block ul ul {
 23 |   padding-left: 0;
 24 |   padding-right: 45px;
 25 | }
 26 | .list-block .item-content {
 27 |   padding-left: 0;
 28 |   padding-right: 15px;
 29 | }
 30 | .list-block .item-inner {
 31 |   padding-right: 0;
 32 |   padding-left: 15px;
 33 | }
 34 | .list-block .item-after {
 35 |   margin-left: 0;
 36 |   margin-right: 5px;
 37 | }
 38 | .list-block .item-media i + i,
 39 | .list-block .item-media i + img {
 40 |   margin-left: 0;
 41 |   margin-right: 5px;
 42 | }
 43 | .list-block .item-media + .item-inner {
 44 |   margin-left: 0;
 45 |   margin-right: 15px;
 46 | }
 47 | .list-block .item-link .item-inner {
 48 |   padding-right: 0;
 49 |   padding-left: 35px;
 50 |   background-position: 15px center;
 51 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc' transform='translate(60,120) rotate(180)'/></svg>");
 52 | }
 53 | .list-block.media-list .item-link .item-inner,
 54 | .list-block li.media-item .item-link .item-inner {
 55 |   padding-right: 0;
 56 |   padding-left: 15px;
 57 | }
 58 | .list-block.media-list .item-link .item-title-row,
 59 | .list-block li.media-item .item-link .item-title-row {
 60 |   padding-right: 0;
 61 |   padding-left: 20px;
 62 |   background-position: center left;
 63 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc' transform='translate(60,120) rotate(180)'/></svg>");
 64 | }
 65 | .list-block .sortable-handler {
 66 |   right: auto;
 67 |   left: 0;
 68 | }
 69 | .list-block.sortable-opened .item-inner,
 70 | .list-block.sortable-opened .item-link .item-inner {
 71 |   padding-right: 0;
 72 |   padding-left: 35px;
 73 | }
 74 | .list-block.sortable-opened .item-link .item-inner,
 75 | .list-block.sortable-opened .item-link .item-title-row {
 76 |   background-image: none;
 77 | }
 78 | .list-block .swipeout-actions-left,
 79 | .list-block .swipeout-actions-right {
 80 |   direction: ltr;
 81 | }
 82 | /* === Toolbars === */
 83 | .navbar a.link i + span,
 84 | .toolbar a.link i + span,
 85 | .navbar a.link i + i,
 86 | .toolbar a.link i + i,
 87 | .navbar a.link span + i,
 88 | .toolbar a.link span + i,
 89 | .navbar a.link span + span,
 90 | .toolbar a.link span + span {
 91 |   margin-left: 0;
 92 |   margin-right: 7px;
 93 | }
 94 | .navbar .left a + a,
 95 | .navbar .right a + a {
 96 |   margin-left: 0;
 97 |   margin-right: 15px;
 98 | }
 99 | .navbar .left {
100 |   margin-right: 0px;
101 |   margin-left: 10px;
102 | }
103 | .navbar .right {
104 |   margin-left: 0px;
105 |   margin-right: 10px;
106 | }
107 | .navbar .right:first-child {
108 |   right: auto;
109 |   left: 8px;
110 | }
111 | /* === Forms === */
112 | .list-block input[type="text"],
113 | .list-block input[type="password"],
114 | .list-block input[type="email"],
115 | .list-block input[type="tel"],
116 | .list-block input[type="url"],
117 | .list-block input[type="date"],
118 | .list-block input[type="datetime-local"],
119 | .list-block input[type="number"],
120 | .list-block select,
121 | .list-block textarea {
122 |   padding-left: 0;
123 |   padding-right: 5px;
124 | }
125 | .buttons-row .button:first-child {
126 |   border-radius: 0 5px 5px 0;
127 |   border-left: none;
128 | }
129 | .buttons-row .button:last-child {
130 |   border-radius: 5px 0 0 5px;
131 |   border-left-width: 1px;
132 |   border-left-style: solid;
133 | }
134 | .buttons-row .button.button-round:first-child {
135 |   border-radius: 0 27px 27px 0;
136 | }
137 | .buttons-row .button.button-round:last-child {
138 |   border-radius: 27px 0 0 27px;
139 | }
140 | .label-switch input[type="checkbox"] + .checkbox:before {
141 |   left: auto;
142 |   right: 2px;
143 | }
144 | .label-switch input[type="checkbox"] + .checkbox:after {
145 |   right: 2px;
146 |   left: auto;
147 |   -webkit-transform: translate3d(0, 0, 0);
148 |   transform: translate3d(0, 0, 0);
149 | }
150 | .label-switch input[type="checkbox"]:checked + .checkbox:after {
151 |   left: auto;
152 |   right: 22px;
153 | }
154 | .range-slider {
155 |   padding-left: 0;
156 |   padding-right: 0;
157 |   margin-left: 0;
158 |   padding-right: 3px;
159 |   padding-left: 3px;
160 |   margin-right: -1px;
161 | }
162 | .range-slider input[type="range"]:after {
163 |   left: auto;
164 |   right: -5px;
165 | }
166 | .range-slider input[type="range"]::-webkit-slider-thumb:after {
167 |   left: auto;
168 |   right: 0;
169 | }
170 | .range-slider input[type="range"]::-webkit-slider-thumb:before {
171 |   right: auto;
172 |   left: 100%;
173 | }
174 | label.label-radio input[type="checkbox"] ~ .item-inner,
175 | label.label-radio input[type="radio"] ~ .item-inner {
176 |   padding-left: 35px;
177 |   padding-right: 0;
178 | }
179 | label.label-radio input[type="checkbox"]:checked ~ .item-inner,
180 | label.label-radio input[type="radio"]:checked ~ .item-inner {
181 |   background-position: 15px center;
182 | }
183 | /* === Search Bar === */
184 | .searchbar input[type="search"] {
185 |   background-position: right center;
186 |   background-position: -webkit-calc(100% - 8px) center;
187 |   background-position: calc(100% - 8px) center;
188 | }
189 | .searchbar .searchbar-clear {
190 |   right: auto;
191 |   left: 0;
192 | }
193 | .searchbar.searchbar-active .searchbar-cancel {
194 |   margin-left: 0;
195 |   margin-right: 8px;
196 | }
197 | /* === Message Bar === */
198 | .messagebar .link + textarea {
199 |   margin-left: 0;
200 |   margin-right: 8px;
201 | }
202 | .messagebar textarea + .link {
203 |   margin-left: 0;
204 |   margin-right: 8px;
205 | }
206 | /* === Modals === */
207 | .modal-button:first-child {
208 |   border-radius: 0 0 7px 0;
209 |   border-right: none;
210 | }
211 | .modal-button:last-child {
212 |   border-right: 1px solid #b5b5b5;
213 |   border-radius: 0 0 0 7px;
214 | }
215 | .modal-button:first-child:last-child {
216 |   border-radius: 0 0 7px 7px;
217 | }
218 | /* === Content Block === */
219 | .content-block-inner {
220 |   margin-left: 0;
221 |   margin-right: -15px;
222 | }
223 | /* === Pages === */
224 | .page-on-left {
225 |   -webkit-transform: translate3d(20%, 0, 0);
226 |   transform: translate3d(20%, 0, 0);
227 | }
228 | .page-on-right {
229 |   -webkit-transform: translate3d(-100%, 0, 0);
230 |   transform: translate3d(-100%, 0, 0);
231 | }
232 | @-webkit-keyframes pageFromRightToCenter {
233 |   from {
234 |     -webkit-box-shadow: none;
235 |     box-shadow: none;
236 |     -webkit-transform: translate3d(-100%, 0, 0);
237 |   }
238 |   to {
239 |     -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
240 |     box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
241 |     -webkit-transform: translate3d(0, 0, 0);
242 |   }
243 | }
244 | @-webkit-keyframes pageFromCenterToRight {
245 |   from {
246 |     -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
247 |     box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
248 |     -webkit-transform: translate3d(0, 0, 0);
249 |   }
250 |   to {
251 |     -webkit-box-shadow: none;
252 |     box-shadow: none;
253 |     -webkit-transform: translate3d(-100%, 0, 0);
254 |   }
255 | }
256 | @keyframes pageFromRightToCenter {
257 |   from {
258 |     -webkit-box-shadow: none;
259 |     box-shadow: none;
260 |     transform: translate3d(-100%, 0, 0);
261 |   }
262 |   to {
263 |     -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
264 |     box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
265 |     transform: translate3d(0, 0, 0);
266 |   }
267 | }
268 | @keyframes pageFromCenterToRight {
269 |   from {
270 |     -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
271 |     box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
272 |     transform: translate3d(0, 0, 0);
273 |   }
274 |   to {
275 |     -webkit-box-shadow: none;
276 |     box-shadow: none;
277 |     transform: translate3d(100%, 0, 0);
278 |   }
279 | }
280 | @-webkit-keyframes pageFromCenterToLeft {
281 |   from {
282 |     opacity: 1;
283 |     -webkit-transform: translate3d(0, 0, 0);
284 |   }
285 |   to {
286 |     opacity: 0.9;
287 |     -webkit-transform: translate3d(20%, 0, 0);
288 |   }
289 | }
290 | @-webkit-keyframes pageFromLeftToCenter {
291 |   from {
292 |     opacity: 0.9;
293 |     -webkit-transform: translate3d(20%, 0, 0);
294 |   }
295 |   to {
296 |     opacity: 1;
297 |     -webkit-transform: translate3d(0, 0, 0);
298 |   }
299 | }
300 | @keyframes pageFromCenterToLeft {
301 |   from {
302 |     opacity: 1;
303 |     transform: translate3d(0, 0, 0);
304 |   }
305 |   to {
306 |     opacity: 0.9;
307 |     transform: translate3d(20%, 0, 0);
308 |   }
309 | }
310 | @keyframes pageFromLeftToCenter {
311 |   from {
312 |     opacity: 0.9;
313 |     transform: translate3d(20%, 0, 0);
314 |   }
315 |   to {
316 |     opacity: 1;
317 |     transform: translate3d(0, 0, 0);
318 |   }
319 | }
320 | @-webkit-keyframes pageFromRightToCenterDegrade {
321 |   from {
322 |     -webkit-transform: translate3d(-100%, 0, 0);
323 |   }
324 |   to {
325 |     -webkit-transform: translate3d(0, 0, 0);
326 |   }
327 | }
328 | @-webkit-keyframes pageFromCenterToRightDegrade {
329 |   from {
330 |     -webkit-transform: translate3d(0, 0, 0);
331 |   }
332 |   to {
333 |     -webkit-transform: translate3d(-100%, 0, 0);
334 |   }
335 | }
336 | @keyframes pageFromRightToCenterDegrade {
337 |   from {
338 |     transform: translate3d(-100%, 0, 0);
339 |   }
340 |   to {
341 |     transform: translate3d(0, 0, 0);
342 |   }
343 | }
344 | @keyframes pageFromCenterToRightDegrade {
345 |   from {
346 |     transform: translate3d(0, 0, 0);
347 |   }
348 |   to {
349 |     transform: translate3d(-100%, 0, 0);
350 |   }
351 | }
352 | /* === Messages === */
353 | .message-received {
354 |   -ms-flex-item-align: end;
355 |   -webkit-align-self: flex-end;
356 |   align-self: flex-end;
357 |   -webkit-box-align: end;
358 |   -ms-flex-align: end;
359 |   -webkit-align-items: flex-end;
360 |   align-items: flex-end;
361 | }
362 | .message-sent {
363 |   -ms-flex-item-align: start;
364 |   -webkit-align-self: flex-start;
365 |   align-self: flex-start;
366 |   -webkit-box-align: start;
367 |   -ms-flex-align: start;
368 |   -webkit-align-items: flex-start;
369 |   align-items: flex-start;
370 | }
371 | /* === Back Icons === */
372 | i.icon.icon-back {
373 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>");
374 | }
375 | i.icon.icon-forward {
376 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>");
377 | }
378 | i.icon.icon-next {
379 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
380 | }
381 | i.icon.icon-prev {
382 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
383 | }
384 | i.icon-back.color-gray,
385 | i.icon-back.theme-gray,
386 | .theme-gray i.icon-back {
387 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%238e8e93' transform='translate(12,20) rotate(180)'/></svg>");
388 | }
389 | i.icon-forward.color-gray,
390 | i.icon-forward.theme-gray,
391 | .theme-gray i.icon-forward {
392 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%238e8e93' transform='translate(12,20) rotate(180)'/></svg>");
393 | }
394 | i.icon-next.color-gray,
395 | i.icon-next.theme-gray,
396 | .theme-gray i.icon-next {
397 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%238e8e93' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
398 | }
399 | i.icon-prev.color-gray,
400 | i.icon-prev.theme-gray,
401 | .theme-gray i.icon-prev {
402 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%238e8e93' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
403 | }
404 | i.icon-back.color-white,
405 | i.icon-back.theme-white,
406 | .theme-white i.icon-back {
407 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ffffff' transform='translate(12,20) rotate(180)'/></svg>");
408 | }
409 | i.icon-forward.color-white,
410 | i.icon-forward.theme-white,
411 | .theme-white i.icon-forward {
412 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ffffff' transform='translate(12,20) rotate(180)'/></svg>");
413 | }
414 | i.icon-next.color-white,
415 | i.icon-next.theme-white,
416 | .theme-white i.icon-next {
417 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffffff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
418 | }
419 | i.icon-prev.color-white,
420 | i.icon-prev.theme-white,
421 | .theme-white i.icon-prev {
422 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffffff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
423 | }
424 | i.icon-back.color-black,
425 | i.icon-back.theme-black,
426 | .theme-black i.icon-back {
427 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23000000' transform='translate(12,20) rotate(180)'/></svg>");
428 | }
429 | i.icon-forward.color-black,
430 | i.icon-forward.theme-black,
431 | .theme-black i.icon-forward {
432 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23000000' transform='translate(12,20) rotate(180)'/></svg>");
433 | }
434 | i.icon-next.color-black,
435 | i.icon-next.theme-black,
436 | .theme-black i.icon-next {
437 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23000000' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
438 | }
439 | i.icon-prev.color-black,
440 | i.icon-prev.theme-black,
441 | .theme-black i.icon-prev {
442 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23000000' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
443 | }
444 | i.icon-back.color-lightblue,
445 | i.icon-back.theme-lightblue,
446 | .theme-lightblue i.icon-back {
447 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%235ac8fa' transform='translate(12,20) rotate(180)'/></svg>");
448 | }
449 | i.icon-forward.color-lightblue,
450 | i.icon-forward.theme-lightblue,
451 | .theme-lightblue i.icon-forward {
452 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%235ac8fa' transform='translate(12,20) rotate(180)'/></svg>");
453 | }
454 | i.icon-next.color-lightblue,
455 | i.icon-next.theme-lightblue,
456 | .theme-lightblue i.icon-next {
457 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%235ac8fa' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
458 | }
459 | i.icon-prev.color-lightblue,
460 | i.icon-prev.theme-lightblue,
461 | .theme-lightblue i.icon-prev {
462 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%235ac8fa' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
463 | }
464 | i.icon-back.color-yellow,
465 | i.icon-back.theme-yellow,
466 | .theme-yellow i.icon-back {
467 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ffcc00' transform='translate(12,20) rotate(180)'/></svg>");
468 | }
469 | i.icon-forward.color-yellow,
470 | i.icon-forward.theme-yellow,
471 | .theme-yellow i.icon-forward {
472 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ffcc00' transform='translate(12,20) rotate(180)'/></svg>");
473 | }
474 | i.icon-next.color-yellow,
475 | i.icon-next.theme-yellow,
476 | .theme-yellow i.icon-next {
477 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffcc00' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
478 | }
479 | i.icon-prev.color-yellow,
480 | i.icon-prev.theme-yellow,
481 | .theme-yellow i.icon-prev {
482 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffcc00' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
483 | }
484 | i.icon-back.color-orange,
485 | i.icon-back.theme-orange,
486 | .theme-orange i.icon-back {
487 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff9500' transform='translate(12,20) rotate(180)'/></svg>");
488 | }
489 | i.icon-forward.color-orange,
490 | i.icon-forward.theme-orange,
491 | .theme-orange i.icon-forward {
492 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ff9500' transform='translate(12,20) rotate(180)'/></svg>");
493 | }
494 | i.icon-next.color-orange,
495 | i.icon-next.theme-orange,
496 | .theme-orange i.icon-next {
497 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff9500' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
498 | }
499 | i.icon-prev.color-orange,
500 | i.icon-prev.theme-orange,
501 | .theme-orange i.icon-prev {
502 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff9500' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
503 | }
504 | i.icon-back.color-pink,
505 | i.icon-back.theme-pink,
506 | .theme-pink i.icon-back {
507 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff2d55' transform='translate(12,20) rotate(180)'/></svg>");
508 | }
509 | i.icon-forward.color-pink,
510 | i.icon-forward.theme-pink,
511 | .theme-pink i.icon-forward {
512 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ff2d55' transform='translate(12,20) rotate(180)'/></svg>");
513 | }
514 | i.icon-next.color-pink,
515 | i.icon-next.theme-pink,
516 | .theme-pink i.icon-next {
517 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff2d55' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
518 | }
519 | i.icon-prev.color-pink,
520 | i.icon-prev.theme-pink,
521 | .theme-pink i.icon-prev {
522 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff2d55' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
523 | }
524 | i.icon-back.color-blue,
525 | i.icon-back.theme-blue,
526 | .theme-blue i.icon-back {
527 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>");
528 | }
529 | i.icon-forward.color-blue,
530 | i.icon-forward.theme-blue,
531 | .theme-blue i.icon-forward {
532 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>");
533 | }
534 | i.icon-next.color-blue,
535 | i.icon-next.theme-blue,
536 | .theme-blue i.icon-next {
537 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
538 | }
539 | i.icon-prev.color-blue,
540 | i.icon-prev.theme-blue,
541 | .theme-blue i.icon-prev {
542 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
543 | }
544 | i.icon-back.color-green,
545 | i.icon-back.theme-green,
546 | .theme-green i.icon-back {
547 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%234cd964' transform='translate(12,20) rotate(180)'/></svg>");
548 | }
549 | i.icon-forward.color-green,
550 | i.icon-forward.theme-green,
551 | .theme-green i.icon-forward {
552 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%234cd964' transform='translate(12,20) rotate(180)'/></svg>");
553 | }
554 | i.icon-next.color-green,
555 | i.icon-next.theme-green,
556 | .theme-green i.icon-next {
557 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%234cd964' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
558 | }
559 | i.icon-prev.color-green,
560 | i.icon-prev.theme-green,
561 | .theme-green i.icon-prev {
562 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%234cd964' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
563 | }
564 | i.icon-back.color-red,
565 | i.icon-back.theme-red,
566 | .theme-red i.icon-back {
567 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff3b30' transform='translate(12,20) rotate(180)'/></svg>");
568 | }
569 | i.icon-forward.color-red,
570 | i.icon-forward.theme-red,
571 | .theme-red i.icon-forward {
572 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ff3b30' transform='translate(12,20) rotate(180)'/></svg>");
573 | }
574 | i.icon-next.color-red,
575 | i.icon-next.theme-red,
576 | .theme-red i.icon-next {
577 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff3b30' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
578 | }
579 | i.icon-prev.color-red,
580 | i.icon-prev.theme-red,
581 | .theme-red i.icon-prev {
582 |   background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff3b30' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>");
583 | }
584 | /* === Accordion === */
585 | .list-block .accordion-toggle .item-inner {
586 |   padding-right: 0;
587 |   padding-left: 35px;
588 |   background-position: 15px center;
589 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc' transform='translate(60,120) rotate(180)'/></svg>");
590 | }
591 | .list-block .accordion-item-expanded .accordion-toggle .item-inner,
592 | .list-block .accordion-item-expanded > .item-link .item-inner {
593 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' transform='translate(70, 30) rotate(90)' fill='%23c7c7cc'/></svg>");
594 | }
595 | .list-block .accordion-item ul {
596 |   padding-right: 0;
597 | }
598 | 


--------------------------------------------------------------------------------
/css/framework7/framework7.rtl.min.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Framework7 1.0.1
 3 |  * Full Featured Mobile HTML Framework For Building iOS Apps
 4 |  * 
 5 |  * http://www.idangero.us/framework7
 6 |  * 
 7 |  * Copyright 2015, Vladimir Kharlampidi
 8 |  * The iDangero.us
 9 |  * http://www.idangero.us/
10 |  * 
11 |  * Licensed under MIT
12 |  * 
13 |  * Released on: February 13, 2015
14 |  */
15 | html{direction:rtl}.list-block ul ul{padding-left:0;padding-right:45px}.list-block .item-content{padding-left:0;padding-right:15px}.list-block .item-inner{padding-right:0;padding-left:15px}.list-block .item-after,.list-block .item-media i+i,.list-block .item-media i+img{margin-left:0;margin-right:5px}.list-block .item-media+.item-inner{margin-left:0;margin-right:15px}.list-block .item-link .item-inner{padding-right:0;padding-left:35px;background-position:15px center;background-image:url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc' transform='translate(60,120) rotate(180)'/></svg>")}.list-block li.media-item .item-link .item-inner,.list-block.media-list .item-link .item-inner{padding-right:0;padding-left:15px}.list-block li.media-item .item-link .item-title-row,.list-block.media-list .item-link .item-title-row{padding-right:0;padding-left:20px;background-position:center left;background-image:url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc' transform='translate(60,120) rotate(180)'/></svg>")}.list-block .sortable-handler{right:auto;left:0}.list-block.sortable-opened .item-inner,.list-block.sortable-opened .item-link .item-inner{padding-right:0;padding-left:35px}.list-block.sortable-opened .item-link .item-inner,.list-block.sortable-opened .item-link .item-title-row{background-image:none}.list-block .swipeout-actions-left,.list-block .swipeout-actions-right{direction:ltr}.navbar a.link i+i,.navbar a.link i+span,.navbar a.link span+i,.navbar a.link span+span,.toolbar a.link i+i,.toolbar a.link i+span,.toolbar a.link span+i,.toolbar a.link span+span{margin-left:0;margin-right:7px}.navbar .left a+a,.navbar .right a+a{margin-left:0;margin-right:15px}.navbar .left{margin-right:0;margin-left:10px}.navbar .right{margin-left:0;margin-right:10px}.navbar .right:first-child{right:auto;left:8px}.list-block input[type=text],.list-block input[type=password],.list-block input[type=email],.list-block input[type=tel],.list-block input[type=url],.list-block input[type=date],.list-block input[type=datetime-local],.list-block input[type=number],.list-block select,.list-block textarea{padding-left:0;padding-right:5px}.buttons-row .button:first-child{border-radius:0 5px 5px 0;border-left:none}.buttons-row .button:last-child{border-radius:5px 0 0 5px;border-left-width:1px;border-left-style:solid}.buttons-row .button.button-round:first-child{border-radius:0 27px 27px 0}.buttons-row .button.button-round:last-child{border-radius:27px 0 0 27px}.label-switch input[type=checkbox]+.checkbox:before{left:auto;right:2px}.label-switch input[type=checkbox]+.checkbox:after{right:2px;left:auto;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.label-switch input[type=checkbox]:checked+.checkbox:after{left:auto;right:22px}.range-slider{margin-left:0;padding-right:3px;padding-left:3px;margin-right:-1px}.range-slider input[type=range]:after{left:auto;right:-5px}.range-slider input[type=range]::-webkit-slider-thumb:after{left:auto;right:0}.range-slider input[type=range]::-webkit-slider-thumb:before{right:auto;left:100%}label.label-radio input[type=radio]~.item-inner,label.label-radio input[type=checkbox]~.item-inner{padding-left:35px;padding-right:0}label.label-radio input[type=radio]:checked~.item-inner,label.label-radio input[type=checkbox]:checked~.item-inner{background-position:15px center}.searchbar input[type=search]{background-position:calc(100% - 8px) center}.searchbar .searchbar-clear{right:auto;left:0}.messagebar .link+textarea,.messagebar textarea+.link,.searchbar.searchbar-active .searchbar-cancel{margin-left:0;margin-right:8px}.modal-button:first-child{border-radius:0 0 7px;border-right:none}.modal-button:last-child{border-right:1px solid #b5b5b5;border-radius:0 0 0 7px}.modal-button:first-child:last-child{border-radius:0 0 7px 7px}.content-block-inner{margin-left:0;margin-right:-15px}.page-on-left{-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}.page-on-right{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}@-webkit-keyframes pageFromRightToCenter{from{-webkit-box-shadow:none;box-shadow:none;-webkit-transform:translate3d(-100%,0,0)}to{-webkit-box-shadow:0 0 12px rgba(0,0,0,.5);box-shadow:0 0 12px rgba(0,0,0,.5);-webkit-transform:translate3d(0,0,0)}}@-webkit-keyframes pageFromCenterToRight{from{-webkit-box-shadow:0 0 12px rgba(0,0,0,.5);box-shadow:0 0 12px rgba(0,0,0,.5);-webkit-transform:translate3d(0,0,0)}to{-webkit-box-shadow:none;box-shadow:none;-webkit-transform:translate3d(-100%,0,0)}}@keyframes pageFromRightToCenter{from{-webkit-box-shadow:none;box-shadow:none;transform:translate3d(-100%,0,0)}to{-webkit-box-shadow:0 0 12px rgba(0,0,0,.5);box-shadow:0 0 12px rgba(0,0,0,.5);transform:translate3d(0,0,0)}}@keyframes pageFromCenterToRight{from{-webkit-box-shadow:0 0 12px rgba(0,0,0,.5);box-shadow:0 0 12px rgba(0,0,0,.5);transform:translate3d(0,0,0)}to{-webkit-box-shadow:none;box-shadow:none;transform:translate3d(100%,0,0)}}@-webkit-keyframes pageFromCenterToLeft{from{opacity:1;-webkit-transform:translate3d(0,0,0)}to{opacity:.9;-webkit-transform:translate3d(20%,0,0)}}@-webkit-keyframes pageFromLeftToCenter{from{opacity:.9;-webkit-transform:translate3d(20%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0)}}@keyframes pageFromCenterToLeft{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:.9;transform:translate3d(20%,0,0)}}@keyframes pageFromLeftToCenter{from{opacity:.9;transform:translate3d(20%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}@-webkit-keyframes pageFromRightToCenterDegrade{from{-webkit-transform:translate3d(-100%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@-webkit-keyframes pageFromCenterToRightDegrade{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-100%,0,0)}}@keyframes pageFromRightToCenterDegrade{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}@keyframes pageFromCenterToRightDegrade{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}.message-received{-ms-flex-item-align:end;-webkit-align-self:flex-end;align-self:flex-end;-webkit-box-align:end;-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end}.message-sent{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start;-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}i.icon.icon-back{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>")}i.icon.icon-forward{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>")}i.icon.icon-next{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}i.icon.icon-prev{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-gray i.icon-back,i.icon-back.color-gray,i.icon-back.theme-gray{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%238e8e93' transform='translate(12,20) rotate(180)'/></svg>")}.theme-gray i.icon-forward,i.icon-forward.color-gray,i.icon-forward.theme-gray{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%238e8e93' transform='translate(12,20) rotate(180)'/></svg>")}.theme-gray i.icon-next,i.icon-next.color-gray,i.icon-next.theme-gray{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%238e8e93' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-gray i.icon-prev,i.icon-prev.color-gray,i.icon-prev.theme-gray{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%238e8e93' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-white i.icon-back,i.icon-back.color-white,i.icon-back.theme-white{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ffffff' transform='translate(12,20) rotate(180)'/></svg>")}.theme-white i.icon-forward,i.icon-forward.color-white,i.icon-forward.theme-white{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ffffff' transform='translate(12,20) rotate(180)'/></svg>")}.theme-white i.icon-next,i.icon-next.color-white,i.icon-next.theme-white{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffffff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-white i.icon-prev,i.icon-prev.color-white,i.icon-prev.theme-white{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffffff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-black i.icon-back,i.icon-back.color-black,i.icon-back.theme-black{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23000000' transform='translate(12,20) rotate(180)'/></svg>")}.theme-black i.icon-forward,i.icon-forward.color-black,i.icon-forward.theme-black{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23000000' transform='translate(12,20) rotate(180)'/></svg>")}.theme-black i.icon-next,i.icon-next.color-black,i.icon-next.theme-black{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23000000' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-black i.icon-prev,i.icon-prev.color-black,i.icon-prev.theme-black{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23000000' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-lightblue i.icon-back,i.icon-back.color-lightblue,i.icon-back.theme-lightblue{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%235ac8fa' transform='translate(12,20) rotate(180)'/></svg>")}.theme-lightblue i.icon-forward,i.icon-forward.color-lightblue,i.icon-forward.theme-lightblue{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%235ac8fa' transform='translate(12,20) rotate(180)'/></svg>")}.theme-lightblue i.icon-next,i.icon-next.color-lightblue,i.icon-next.theme-lightblue{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%235ac8fa' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-lightblue i.icon-prev,i.icon-prev.color-lightblue,i.icon-prev.theme-lightblue{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%235ac8fa' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-yellow i.icon-back,i.icon-back.color-yellow,i.icon-back.theme-yellow{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ffcc00' transform='translate(12,20) rotate(180)'/></svg>")}.theme-yellow i.icon-forward,i.icon-forward.color-yellow,i.icon-forward.theme-yellow{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ffcc00' transform='translate(12,20) rotate(180)'/></svg>")}.theme-yellow i.icon-next,i.icon-next.color-yellow,i.icon-next.theme-yellow{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffcc00' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-yellow i.icon-prev,i.icon-prev.color-yellow,i.icon-prev.theme-yellow{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffcc00' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-orange i.icon-back,i.icon-back.color-orange,i.icon-back.theme-orange{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff9500' transform='translate(12,20) rotate(180)'/></svg>")}.theme-orange i.icon-forward,i.icon-forward.color-orange,i.icon-forward.theme-orange{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ff9500' transform='translate(12,20) rotate(180)'/></svg>")}.theme-orange i.icon-next,i.icon-next.color-orange,i.icon-next.theme-orange{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff9500' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-orange i.icon-prev,i.icon-prev.color-orange,i.icon-prev.theme-orange{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff9500' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-pink i.icon-back,i.icon-back.color-pink,i.icon-back.theme-pink{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff2d55' transform='translate(12,20) rotate(180)'/></svg>")}.theme-pink i.icon-forward,i.icon-forward.color-pink,i.icon-forward.theme-pink{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ff2d55' transform='translate(12,20) rotate(180)'/></svg>")}.theme-pink i.icon-next,i.icon-next.color-pink,i.icon-next.theme-pink{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff2d55' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-pink i.icon-prev,i.icon-prev.color-pink,i.icon-prev.theme-pink{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff2d55' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-blue i.icon-back,i.icon-back.color-blue,i.icon-back.theme-blue{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>")}.theme-blue i.icon-forward,i.icon-forward.color-blue,i.icon-forward.theme-blue{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23007aff' transform='translate(12,20) rotate(180)'/></svg>")}.theme-blue i.icon-next,i.icon-next.color-blue,i.icon-next.theme-blue{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-blue i.icon-prev,i.icon-prev.color-blue,i.icon-prev.theme-blue{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-green i.icon-back,i.icon-back.color-green,i.icon-back.theme-green{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%234cd964' transform='translate(12,20) rotate(180)'/></svg>")}.theme-green i.icon-forward,i.icon-forward.color-green,i.icon-forward.theme-green{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%234cd964' transform='translate(12,20) rotate(180)'/></svg>")}.theme-green i.icon-next,i.icon-next.color-green,i.icon-next.theme-green{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%234cd964' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-green i.icon-prev,i.icon-prev.color-green,i.icon-prev.theme-green{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%234cd964' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-red i.icon-back,i.icon-back.color-red,i.icon-back.theme-red{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff3b30' transform='translate(12,20) rotate(180)'/></svg>")}.theme-red i.icon-forward,i.icon-forward.color-red,i.icon-forward.theme-red{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23ff3b30' transform='translate(12,20) rotate(180)'/></svg>")}.theme-red i.icon-next,i.icon-next.color-red,i.icon-next.theme-red{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff3b30' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.theme-red i.icon-prev,i.icon-prev.color-red,i.icon-prev.theme-red{background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff3b30' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z' transform='translate(15,15) rotate(180)'/></g></svg>")}.list-block .accordion-toggle .item-inner{padding-right:0;padding-left:35px;background-position:15px center;background-image:url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc' transform='translate(60,120) rotate(180)'/></svg>")}.list-block .accordion-item-expanded .accordion-toggle .item-inner,.list-block .accordion-item-expanded>.item-link .item-inner{background-image:url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' transform='translate(70, 30) rotate(90)' fill='%23c7c7cc'/></svg>")}.list-block .accordion-item ul{padding-right:0}


--------------------------------------------------------------------------------
/css/framework7/framework7.themes.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Framework7 1.0.1
  3 |  * Full Featured Mobile HTML Framework For Building iOS Apps
  4 |  * 
  5 |  * http://www.idangero.us/framework7
  6 |  * 
  7 |  * Copyright 2015, Vladimir Kharlampidi
  8 |  * The iDangero.us
  9 |  * http://www.idangero.us/
 10 |  * 
 11 |  * Licensed under MIT
 12 |  * 
 13 |  * Released on: February 13, 2015
 14 |  */
 15 | /*==========================
 16 | Framework7 Layouts Themes
 17 | ==========================*/
 18 | /* === Dark layout === */
 19 | .layout-dark .navbar,
 20 | .navbar.layout-dark,
 21 | .layout-dark .subnavbar,
 22 | .subnavbar.layout-dark {
 23 |   background-color: #131313;
 24 |   color: #ffffff;
 25 | }
 26 | .layout-dark .navbar:after,
 27 | .navbar.layout-dark:after,
 28 | .layout-dark .subnavbar:after,
 29 | .subnavbar.layout-dark:after {
 30 |   background-color: #333333;
 31 | }
 32 | .layout-dark .toolbar,
 33 | .toolbar.layout-dark {
 34 |   background-color: #131313;
 35 |   color: #ffffff;
 36 | }
 37 | .layout-dark .toolbar:before,
 38 | .toolbar.layout-dark:before {
 39 |   background-color: #333333;
 40 | }
 41 | .layout-dark .picker-calendar-week-days {
 42 |   color: #fff;
 43 |   background-color: #131313;
 44 | }
 45 | .layout-dark .popover .picker-modal .picker-center-highlight:before,
 46 | .layout-dark .picker-modal.picker-modal-inline .picker-center-highlight:before {
 47 |   background-color: #333333;
 48 | }
 49 | .layout-dark .popover .picker-modal .picker-center-highlight:after,
 50 | .layout-dark .picker-modal.picker-modal-inline .picker-center-highlight:after {
 51 |   background-color: #333333;
 52 | }
 53 | .layout-dark .popover .picker-modal .picker-item.picker-selected,
 54 | .layout-dark .picker-modal.picker-modal-inline .picker-item.picker-selected {
 55 |   color: #fff;
 56 | }
 57 | .layout-dark .popover .picker-modal .picker-calendar-week-days,
 58 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-week-days {
 59 |   color: #fff;
 60 | }
 61 | .layout-dark .popover .picker-modal .picker-calendar-day,
 62 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-day {
 63 |   color: #fff;
 64 | }
 65 | .layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-prev,
 66 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-prev,
 67 | .layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-next,
 68 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-next {
 69 |   color: #777;
 70 | }
 71 | .layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-disabled,
 72 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-disabled {
 73 |   color: #555;
 74 | }
 75 | .layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-today span,
 76 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-today span {
 77 |   background: #444;
 78 | }
 79 | .layout-dark .popover .picker-modal .picker-calendar-week-days:after,
 80 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-week-days:after,
 81 | .layout-dark .popover .picker-modal .picker-calendar-row:after,
 82 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-row:after {
 83 |   background-color: #333333;
 84 | }
 85 | .layout-dark .popover .picker-modal .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
 86 | .layout-dark .picker-modal.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
 87 | .layout-dark .popover .picker-modal .picker-calendar-week-days ~ .picker-calendar-months:before,
 88 | .layout-dark .picker-modal.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
 89 |   background-color: #333333;
 90 | }
 91 | .layout-dark .popover .picker-modal .toolbar:after {
 92 |   background-color: #333333;
 93 | }
 94 | .layout-dark .photo-browser .navbar,
 95 | .photo-browser.layout-dark .navbar,
 96 | .layout-dark .view[data-page="photo-browser-slides"] .navbar,
 97 | .view[data-page="photo-browser-slides"].layout-dark .navbar,
 98 | .layout-dark .photo-browser .toolbar,
 99 | .photo-browser.layout-dark .toolbar,
100 | .layout-dark .view[data-page="photo-browser-slides"] .toolbar,
101 | .view[data-page="photo-browser-slides"].layout-dark .toolbar {
102 |   background: rgba(19, 19, 19, 0.95);
103 | }
104 | .layout-dark .tabbar a:not(.active) {
105 |   color: #ffffff;
106 | }
107 | .layout-dark .page,
108 | .layout-dark .login-screen-content,
109 | .page.layout-dark,
110 | .layout-dark .panel,
111 | .panel.layout-dark {
112 |   background-color: #222426;
113 |   color: #dddddd;
114 | }
115 | .layout-dark .content-block-title {
116 |   color: #ffffff;
117 | }
118 | .layout-dark .content-block,
119 | .content-block.layout-dark {
120 |   color: #bbbbbb;
121 | }
122 | .layout-dark .content-block-inner {
123 |   background: #1c1d1f;
124 |   color: #dddddd;
125 | }
126 | .layout-dark .content-block-inner:before {
127 |   background-color: #393939;
128 | }
129 | .layout-dark .content-block-inner:after {
130 |   background-color: #393939;
131 | }
132 | .layout-dark .list-block ul,
133 | .list-block.layout-dark ul {
134 |   background: #1c1d1f;
135 | }
136 | .layout-dark .list-block ul:before,
137 | .list-block.layout-dark ul:before {
138 |   background-color: #393939;
139 | }
140 | .layout-dark .list-block ul:after,
141 | .list-block.layout-dark ul:after {
142 |   background-color: #393939;
143 | }
144 | .layout-dark .list-block.inset ul,
145 | .list-block.layout-dark.inset ul {
146 |   background: #1c1d1f;
147 | }
148 | .layout-dark .list-block.notifications > ul,
149 | .list-block.layout-dark.notifications > ul {
150 |   background: none;
151 | }
152 | .layout-dark .card {
153 |   background: #1c1d1f;
154 | }
155 | .layout-dark .card-header:after {
156 |   background-color: #393939;
157 | }
158 | .layout-dark .card-footer {
159 |   color: #bbbbbb;
160 | }
161 | .layout-dark .card-footer:before {
162 |   background-color: #393939;
163 | }
164 | .layout-dark .popover,
165 | .popover.layout-dark {
166 |   background: rgba(0, 0, 0, 0.8);
167 | }
168 | .layout-dark .popover .popover-angle:after,
169 | .popover.layout-dark .popover-angle:after {
170 |   background: rgba(0, 0, 0, 0.8);
171 | }
172 | .layout-dark .popover .list-block ul,
173 | .popover.layout-dark .list-block ul {
174 |   background: none;
175 | }
176 | .layout-dark .actions-popover .list-block ul:before {
177 |   background-color: #393939;
178 | }
179 | .layout-dark .actions-popover .list-block ul:after {
180 |   background-color: #393939;
181 | }
182 | .layout-dark .actions-popover .actions-popover-label:after {
183 |   background-color: #393939;
184 | }
185 | .layout-dark li.sorting {
186 |   background-color: #29292f;
187 | }
188 | .layout-dark .swipeout-actions-left a,
189 | .layout-dark .swipeout-actions-right a {
190 |   background-color: #444444;
191 | }
192 | .layout-dark .item-inner:after,
193 | .layout-dark .list-block ul ul li:last-child .item-inner:after {
194 |   background-color: #393939;
195 | }
196 | .layout-dark .item-after {
197 |   color: #bbbbbb;
198 | }
199 | html:not(.watch-active-state) .layout-dark .item-link:active,
200 | html:not(.watch-active-state) .layout-dark label.label-checkbox:active,
201 | html:not(.watch-active-state) .layout-dark label.label-radio:active,
202 | .layout-dark .item-link.active-state,
203 | .layout-dark label.label-checkbox.active-state,
204 | .layout-dark label.label-radio.active-state {
205 |   background-color: #29292f;
206 | }
207 | .layout-dark .item-link.list-button:after {
208 |   background-color: #393939;
209 | }
210 | .layout-dark .list-block-label {
211 |   color: #bbbbbb;
212 | }
213 | .layout-dark .item-divider,
214 | .layout-dark .list-group-title {
215 |   background: #1a1a1a;
216 |   color: #bbbbbb;
217 | }
218 | .layout-dark .item-divider:before,
219 | .layout-dark .list-group-title:before {
220 |   background-color: #393939;
221 | }
222 | .layout-dark .searchbar {
223 |   background: #333333;
224 | }
225 | .layout-dark .searchbar:after {
226 |   background-color: #333333;
227 | }
228 | .layout-dark .list-block input[type="text"],
229 | .list-block.layout-dark input[type="text"],
230 | .layout-dark .list-block input[type="password"],
231 | .list-block.layout-dark input[type="password"],
232 | .layout-dark .list-block input[type="email"],
233 | .list-block.layout-dark input[type="email"],
234 | .layout-dark .list-block input[type="tel"],
235 | .list-block.layout-dark input[type="tel"],
236 | .layout-dark .list-block input[type="url"],
237 | .list-block.layout-dark input[type="url"],
238 | .layout-dark .list-block input[type="date"],
239 | .list-block.layout-dark input[type="date"],
240 | .layout-dark .list-block input[type="datetime-local"],
241 | .list-block.layout-dark input[type="datetime-local"],
242 | .layout-dark .list-block input[type="number"],
243 | .list-block.layout-dark input[type="number"],
244 | .layout-dark .list-block select,
245 | .list-block.layout-dark select,
246 | .layout-dark .list-block textarea,
247 | .list-block.layout-dark textarea {
248 |   color: #ffffff;
249 | }
250 | .layout-dark .label-switch .checkbox {
251 |   background-color: #393939;
252 | }
253 | .layout-dark .label-switch .checkbox:before {
254 |   background-color: #1c1d1f;
255 | }
256 | .layout-dark .range-slider input[type="range"]:after {
257 |   background: #1c1d1f;
258 | }
259 | /* === White layout === */
260 | .layout-white .navbar,
261 | .navbar.layout-white,
262 | .layout-white .subnavbar,
263 | .subnavbar.layout-white {
264 |   background-color: #ffffff;
265 |   color: #000000;
266 | }
267 | .layout-white .navbar:after,
268 | .navbar.layout-white:after,
269 | .layout-white .subnavbar:after,
270 | .subnavbar.layout-white:after {
271 |   background-color: #dddddd;
272 | }
273 | .layout-white .toolbar,
274 | .toolbar.layout-white {
275 |   background-color: #ffffff;
276 |   color: #000000;
277 | }
278 | .layout-white .toolbar:before,
279 | .toolbar.layout-white:before {
280 |   background-color: #dddddd;
281 | }
282 | .layout-white .popover .picker-modal .picker-center-highlight:before,
283 | .layout-white .picker-modal.picker-modal-inline .picker-center-highlight:before {
284 |   background-color: #dddddd;
285 | }
286 | .layout-white .popover .picker-modal .picker-center-highlight:after,
287 | .layout-white .picker-modal.picker-modal-inline .picker-center-highlight:after {
288 |   background-color: #dddddd;
289 | }
290 | .layout-white .popover .picker-modal .picker-calendar-week-days:after,
291 | .layout-white .picker-modal.picker-modal-inline .picker-calendar-week-days:after,
292 | .layout-white .popover .picker-modal .picker-calendar-row:after,
293 | .layout-white .picker-modal.picker-modal-inline .picker-calendar-row:after {
294 |   background-color: #dddddd;
295 | }
296 | .layout-white .popover .picker-modal .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
297 | .layout-white .picker-modal.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
298 | .layout-white .popover .picker-modal .picker-calendar-week-days ~ .picker-calendar-months:before,
299 | .layout-white .picker-modal.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
300 |   background-color: #dddddd;
301 | }
302 | .layout-white .popover .picker-modal .toolbar:after {
303 |   background-color: #dddddd;
304 | }
305 | .layout-white .photo-browser .navbar,
306 | .photo-browser.layout-white .navbar,
307 | .layout-white .view[data-page="photo-browser-slides"] .navbar,
308 | .view[data-page="photo-browser-slides"].layout-white .navbar,
309 | .layout-white .photo-browser .toolbar,
310 | .photo-browser.layout-white .toolbar,
311 | .layout-white .view[data-page="photo-browser-slides"] .toolbar,
312 | .view[data-page="photo-browser-slides"].layout-white .toolbar {
313 |   background: rgba(255, 255, 255, 0.95);
314 | }
315 | .layout-white .tabbar a:not(.active) {
316 |   color: #777777;
317 | }
318 | .layout-white .page,
319 | .layout-white .login-screen-content,
320 | .page.layout-white,
321 | .layout-white .panel,
322 | .panel.layout-white {
323 |   background-color: #ffffff;
324 |   color: #000000;
325 | }
326 | .layout-white .content-block-title {
327 |   color: #777777;
328 | }
329 | .layout-white .content-block,
330 | .content-block.layout-white {
331 |   color: #777777;
332 | }
333 | .layout-white .content-block-inner {
334 |   background: #fafafa;
335 |   color: #000000;
336 | }
337 | .layout-white .content-block-inner:after {
338 |   background-color: #dddddd;
339 | }
340 | .layout-white .content-block-inner:before {
341 |   background-color: #dddddd;
342 | }
343 | .layout-white .list-block ul,
344 | .list-block.layout-white ul {
345 |   background: #ffffff;
346 | }
347 | .layout-white .list-block ul:after,
348 | .list-block.layout-white ul:after {
349 |   background-color: #dddddd;
350 | }
351 | .layout-white .list-block ul:before,
352 | .list-block.layout-white ul:before {
353 |   background-color: #dddddd;
354 | }
355 | .layout-white .list-block.inset ul,
356 | .list-block.layout-white.inset ul {
357 |   background: #fafafa;
358 | }
359 | .layout-white .list-block.notifications > ul,
360 | .list-block.layout-white.notifications > ul {
361 |   background: none;
362 | }
363 | .layout-white .popover-inner > .list-block ul {
364 |   background: none;
365 | }
366 | .layout-white li.sorting {
367 |   background-color: #eeeeee;
368 | }
369 | .layout-white .swipeout-actions-left a,
370 | .layout-white .swipeout-actions-right a {
371 |   background-color: #c7c7cc;
372 | }
373 | .layout-white .item-inner,
374 | .layout-white .list-block ul ul li:last-child .item-inner {
375 |   border-color: #dddddd;
376 | }
377 | .layout-white .item-inner:after,
378 | .layout-white .list-block ul ul li:last-child .item-inner:after {
379 |   background-color: #dddddd;
380 | }
381 | .layout-white .item-after {
382 |   color: #8e8e93;
383 | }
384 | html:not(.watch-active-state) .layout-white .item-link:active,
385 | html:not(.watch-active-state) .layout-white label.label-checkbox:active,
386 | html:not(.watch-active-state) .layout-white label.label-radio:active,
387 | .layout-white .item-link.active-state,
388 | .layout-white label.label-checkbox.active-state,
389 | .layout-white label.label-radio.active-state {
390 |   background-color: #eeeeee;
391 | }
392 | .layout-white .item-link.list-button:after {
393 |   background-color: #dddddd;
394 | }
395 | .layout-white .list-block-label {
396 |   color: #777777;
397 | }
398 | .layout-white .item-divider,
399 | .layout-white .list-group-title {
400 |   background: #f7f7f7;
401 |   color: #777777;
402 | }
403 | .layout-white .item-divider:before,
404 | .layout-white .list-group-title:before {
405 |   background-color: #dddddd;
406 | }
407 | .layout-white .searchbar {
408 |   background: #c9c9ce;
409 | }
410 | .layout-white .searchbar:after {
411 |   background-color: #b4b4b4;
412 | }
413 | .layout-white .list-block input[type="text"],
414 | .list-block.layout-white input[type="text"],
415 | .layout-white .list-block input[type="password"],
416 | .list-block.layout-white input[type="password"],
417 | .layout-white .list-block input[type="email"],
418 | .list-block.layout-white input[type="email"],
419 | .layout-white .list-block input[type="tel"],
420 | .list-block.layout-white input[type="tel"],
421 | .layout-white .list-block input[type="url"],
422 | .list-block.layout-white input[type="url"],
423 | .layout-white .list-block input[type="date"],
424 | .list-block.layout-white input[type="date"],
425 | .layout-white .list-block input[type="datetime-local"],
426 | .list-block.layout-white input[type="datetime-local"],
427 | .layout-white .list-block input[type="number"],
428 | .list-block.layout-white input[type="number"],
429 | .layout-white .list-block select,
430 | .list-block.layout-white select,
431 | .layout-white .list-block textarea,
432 | .list-block.layout-white textarea {
433 |   color: #777777;
434 | }
435 | .layout-white .label-switch .checkbox {
436 |   background-color: #e5e5e5;
437 | }
438 | .layout-white .label-switch .checkbox:before {
439 |   background-color: #ffffff;
440 | }
441 | .layout-white .range-slider input[type="range"]:after {
442 |   background: #ffffff;
443 | }
444 | 


--------------------------------------------------------------------------------
/css/framework7/framework7.themes.min.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Framework7 1.0.1
 3 |  * Full Featured Mobile HTML Framework For Building iOS Apps
 4 |  * 
 5 |  * http://www.idangero.us/framework7
 6 |  * 
 7 |  * Copyright 2015, Vladimir Kharlampidi
 8 |  * The iDangero.us
 9 |  * http://www.idangero.us/
10 |  * 
11 |  * Licensed under MIT
12 |  * 
13 |  * Released on: February 13, 2015
14 |  */
15 | .layout-dark .navbar,.layout-dark .subnavbar,.navbar.layout-dark,.subnavbar.layout-dark{background-color:#131313;color:#fff}.layout-dark .navbar:after,.layout-dark .subnavbar:after,.navbar.layout-dark:after,.subnavbar.layout-dark:after{background-color:#333}.layout-dark .toolbar,.toolbar.layout-dark{background-color:#131313;color:#fff}.layout-dark .toolbar:before,.toolbar.layout-dark:before{background-color:#333}.layout-dark .picker-calendar-week-days{color:#fff;background-color:#131313}.layout-dark .picker-modal.picker-modal-inline .picker-center-highlight:after,.layout-dark .picker-modal.picker-modal-inline .picker-center-highlight:before,.layout-dark .popover .picker-modal .picker-center-highlight:after,.layout-dark .popover .picker-modal .picker-center-highlight:before{background-color:#333}.layout-dark .picker-modal.picker-modal-inline .picker-calendar-day,.layout-dark .picker-modal.picker-modal-inline .picker-calendar-week-days,.layout-dark .picker-modal.picker-modal-inline .picker-item.picker-selected,.layout-dark .popover .picker-modal .picker-calendar-day,.layout-dark .popover .picker-modal .picker-calendar-week-days,.layout-dark .popover .picker-modal .picker-item.picker-selected{color:#fff}.layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-next,.layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-prev,.layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-next,.layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-prev{color:#777}.layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-disabled,.layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-disabled{color:#555}.layout-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-today span,.layout-dark .popover .picker-modal .picker-calendar-day.picker-calendar-day-today span{background:#444}.layout-dark .picker-modal.picker-modal-inline .picker-calendar-row:after,.layout-dark .picker-modal.picker-modal-inline .picker-calendar-week-days:after,.layout-dark .picker-modal.picker-modal-inline .picker-calendar-week-days~.picker-calendar-months:before,.layout-dark .picker-modal.picker-modal-inline .toolbar~.picker-modal-inner .picker-calendar-months:before,.layout-dark .popover .picker-modal .picker-calendar-row:after,.layout-dark .popover .picker-modal .picker-calendar-week-days:after,.layout-dark .popover .picker-modal .picker-calendar-week-days~.picker-calendar-months:before,.layout-dark .popover .picker-modal .toolbar:after,.layout-dark .popover .picker-modal .toolbar~.picker-modal-inner .picker-calendar-months:before{background-color:#333}.layout-dark .photo-browser .navbar,.layout-dark .photo-browser .toolbar,.layout-dark .view[data-page=photo-browser-slides] .navbar,.layout-dark .view[data-page=photo-browser-slides] .toolbar,.photo-browser.layout-dark .navbar,.photo-browser.layout-dark .toolbar,.view[data-page=photo-browser-slides].layout-dark .navbar,.view[data-page=photo-browser-slides].layout-dark .toolbar{background:rgba(19,19,19,.95)}.layout-dark .tabbar a:not(.active){color:#fff}.layout-dark .login-screen-content,.layout-dark .page,.layout-dark .panel,.page.layout-dark,.panel.layout-dark{background-color:#222426;color:#ddd}.layout-dark .content-block-title{color:#fff}.content-block.layout-dark,.layout-dark .content-block{color:#bbb}.layout-dark .content-block-inner{background:#1c1d1f;color:#ddd}.layout-dark .content-block-inner:after,.layout-dark .content-block-inner:before{background-color:#393939}.layout-dark .list-block ul,.list-block.layout-dark ul{background:#1c1d1f}.layout-dark .list-block ul:after,.layout-dark .list-block ul:before,.list-block.layout-dark ul:after,.list-block.layout-dark ul:before{background-color:#393939}.layout-dark .list-block.inset ul,.list-block.layout-dark.inset ul{background:#1c1d1f}.layout-dark .list-block.notifications>ul,.list-block.layout-dark.notifications>ul{background:0 0}.layout-dark .card{background:#1c1d1f}.layout-dark .card-header:after{background-color:#393939}.layout-dark .card-footer{color:#bbb}.layout-dark .card-footer:before{background-color:#393939}.layout-dark .popover,.layout-dark .popover .popover-angle:after,.popover.layout-dark,.popover.layout-dark .popover-angle:after{background:rgba(0,0,0,.8)}.layout-dark .popover .list-block ul,.popover.layout-dark .list-block ul{background:0 0}.layout-dark .actions-popover .actions-popover-label:after,.layout-dark .actions-popover .list-block ul:after,.layout-dark .actions-popover .list-block ul:before{background-color:#393939}.layout-dark li.sorting{background-color:#29292f}.layout-dark .swipeout-actions-left a,.layout-dark .swipeout-actions-right a{background-color:#444}.layout-dark .item-inner:after,.layout-dark .list-block ul ul li:last-child .item-inner:after{background-color:#393939}.layout-dark .item-after{color:#bbb}.layout-dark .item-link.active-state,.layout-dark label.label-checkbox.active-state,.layout-dark label.label-radio.active-state,html:not(.watch-active-state) .layout-dark .item-link:active,html:not(.watch-active-state) .layout-dark label.label-checkbox:active,html:not(.watch-active-state) .layout-dark label.label-radio:active{background-color:#29292f}.layout-dark .item-link.list-button:after{background-color:#393939}.layout-dark .list-block-label{color:#bbb}.layout-dark .item-divider,.layout-dark .list-group-title{background:#1a1a1a;color:#bbb}.layout-dark .item-divider:before,.layout-dark .list-group-title:before{background-color:#393939}.layout-dark .searchbar{background:#333}.layout-dark .searchbar:after{background-color:#333}.layout-dark .list-block input[type=text],.layout-dark .list-block input[type=password],.layout-dark .list-block input[type=email],.layout-dark .list-block input[type=tel],.layout-dark .list-block input[type=url],.layout-dark .list-block input[type=date],.layout-dark .list-block input[type=datetime-local],.layout-dark .list-block input[type=number],.layout-dark .list-block select,.layout-dark .list-block textarea,.list-block.layout-dark input[type=text],.list-block.layout-dark input[type=password],.list-block.layout-dark input[type=email],.list-block.layout-dark input[type=tel],.list-block.layout-dark input[type=url],.list-block.layout-dark input[type=date],.list-block.layout-dark input[type=datetime-local],.list-block.layout-dark input[type=number],.list-block.layout-dark select,.list-block.layout-dark textarea{color:#fff}.layout-dark .label-switch .checkbox{background-color:#393939}.layout-dark .label-switch .checkbox:before{background-color:#1c1d1f}.layout-dark .range-slider input[type=range]:after{background:#1c1d1f}.layout-white .navbar,.layout-white .subnavbar,.navbar.layout-white,.subnavbar.layout-white{background-color:#fff;color:#000}.layout-white .navbar:after,.layout-white .subnavbar:after,.navbar.layout-white:after,.subnavbar.layout-white:after{background-color:#ddd}.layout-white .toolbar,.toolbar.layout-white{background-color:#fff;color:#000}.layout-white .picker-modal.picker-modal-inline .picker-calendar-row:after,.layout-white .picker-modal.picker-modal-inline .picker-calendar-week-days:after,.layout-white .picker-modal.picker-modal-inline .picker-calendar-week-days~.picker-calendar-months:before,.layout-white .picker-modal.picker-modal-inline .picker-center-highlight:after,.layout-white .picker-modal.picker-modal-inline .picker-center-highlight:before,.layout-white .picker-modal.picker-modal-inline .toolbar~.picker-modal-inner .picker-calendar-months:before,.layout-white .popover .picker-modal .picker-calendar-row:after,.layout-white .popover .picker-modal .picker-calendar-week-days:after,.layout-white .popover .picker-modal .picker-calendar-week-days~.picker-calendar-months:before,.layout-white .popover .picker-modal .picker-center-highlight:after,.layout-white .popover .picker-modal .picker-center-highlight:before,.layout-white .popover .picker-modal .toolbar:after,.layout-white .popover .picker-modal .toolbar~.picker-modal-inner .picker-calendar-months:before,.layout-white .toolbar:before,.toolbar.layout-white:before{background-color:#ddd}.layout-white .photo-browser .navbar,.layout-white .photo-browser .toolbar,.layout-white .view[data-page=photo-browser-slides] .navbar,.layout-white .view[data-page=photo-browser-slides] .toolbar,.photo-browser.layout-white .navbar,.photo-browser.layout-white .toolbar,.view[data-page=photo-browser-slides].layout-white .navbar,.view[data-page=photo-browser-slides].layout-white .toolbar{background:rgba(255,255,255,.95)}.layout-white .tabbar a:not(.active){color:#777}.layout-white .login-screen-content,.layout-white .page,.layout-white .panel,.page.layout-white,.panel.layout-white{background-color:#fff;color:#000}.content-block.layout-white,.layout-white .content-block,.layout-white .content-block-title{color:#777}.layout-white .content-block-inner{background:#fafafa;color:#000}.layout-white .content-block-inner:after,.layout-white .content-block-inner:before{background-color:#ddd}.layout-white .list-block ul,.list-block.layout-white ul{background:#fff}.layout-white .list-block ul:after,.layout-white .list-block ul:before,.list-block.layout-white ul:after,.list-block.layout-white ul:before{background-color:#ddd}.layout-white .list-block.inset ul,.list-block.layout-white.inset ul{background:#fafafa}.layout-white .list-block.notifications>ul,.layout-white .popover-inner>.list-block ul,.list-block.layout-white.notifications>ul{background:0 0}.layout-white li.sorting{background-color:#eee}.layout-white .swipeout-actions-left a,.layout-white .swipeout-actions-right a{background-color:#c7c7cc}.layout-white .item-inner,.layout-white .list-block ul ul li:last-child .item-inner{border-color:#ddd}.layout-white .item-inner:after,.layout-white .list-block ul ul li:last-child .item-inner:after{background-color:#ddd}.layout-white .item-after{color:#8e8e93}.layout-white .item-link.active-state,.layout-white label.label-checkbox.active-state,.layout-white label.label-radio.active-state,html:not(.watch-active-state) .layout-white .item-link:active,html:not(.watch-active-state) .layout-white label.label-checkbox:active,html:not(.watch-active-state) .layout-white label.label-radio:active{background-color:#eee}.layout-white .item-link.list-button:after{background-color:#ddd}.layout-white .list-block-label{color:#777}.layout-white .item-divider,.layout-white .list-group-title{background:#f7f7f7;color:#777}.layout-white .item-divider:before,.layout-white .list-group-title:before{background-color:#ddd}.layout-white .searchbar{background:#c9c9ce}.layout-white .searchbar:after{background-color:#b4b4b4}.layout-white .list-block input[type=text],.layout-white .list-block input[type=password],.layout-white .list-block input[type=email],.layout-white .list-block input[type=tel],.layout-white .list-block input[type=url],.layout-white .list-block input[type=date],.layout-white .list-block input[type=datetime-local],.layout-white .list-block input[type=number],.layout-white .list-block select,.layout-white .list-block textarea,.list-block.layout-white input[type=text],.list-block.layout-white input[type=password],.list-block.layout-white input[type=email],.list-block.layout-white input[type=tel],.list-block.layout-white input[type=url],.list-block.layout-white input[type=date],.list-block.layout-white input[type=datetime-local],.list-block.layout-white input[type=number],.list-block.layout-white select,.list-block.layout-white textarea{color:#777}.layout-white .label-switch .checkbox{background-color:#e5e5e5}.layout-white .label-switch .checkbox:before{background-color:#fff}.layout-white .range-slider input[type=range]:after{background:#fff}


--------------------------------------------------------------------------------
/css/img/i-f7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-f7.png


--------------------------------------------------------------------------------
/css/img/i-form-calendar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-calendar.png


--------------------------------------------------------------------------------
/css/img/i-form-comment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-comment.png


--------------------------------------------------------------------------------
/css/img/i-form-email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-email.png


--------------------------------------------------------------------------------
/css/img/i-form-gender.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-gender.png


--------------------------------------------------------------------------------
/css/img/i-form-name.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-name.png


--------------------------------------------------------------------------------
/css/img/i-form-password.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-password.png


--------------------------------------------------------------------------------
/css/img/i-form-settings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-settings.png


--------------------------------------------------------------------------------
/css/img/i-form-tel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-tel.png


--------------------------------------------------------------------------------
/css/img/i-form-toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-toggle.png


--------------------------------------------------------------------------------
/css/img/i-form-url.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popularowl/framework7-parse/5f9b79ab3f51e22d8a905f7ebbb67dead267c3e7/css/img/i-form-url.png


--------------------------------------------------------------------------------
/css/my-app.css:
--------------------------------------------------------------------------------
 1 | /* Your app custom files in this file */
 2 | /* Tab bar icons */
 3 | i.tabbar-demo-icon-1 {
 4 |   width: 30px;
 5 |   height: 30px;
 6 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23929292'><g><circle cx='15.2' cy='8.8' r='1.5'/><polygon points='16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/><path d='M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.5-11.5S8.8,3.3,15.2,3.3s11.5,5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/></g></svg>");
 7 | }
 8 | .active i.tabbar-demo-icon-1 {
 9 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 30' fill='%23007aff'><path d='M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,15.1C27.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v-1h3V12 v0.6v8h1V21.6z'/></svg>");
10 | }
11 | i.tabbar-demo-icon-2 {
12 |   width: 25px;
13 |   height: 30px;
14 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23929292'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.4L5.9,1z M24,16H1V7h7.1 c0.5,1.9,2.3,3.4,4.4,3.4s3.9-1.5,4.4-3.4H24V16z'/></svg>");
15 | }
16 | .active i.tabbar-demo-icon-2 {
17 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23007aff'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.3L5.9,1z'/></svg>");
18 | }
19 | i.tabbar-demo-icon-3 {
20 |   width: 30px;
21 |   height: 30px;
22 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23929292'><path d='M16.8,1c3.7,0,6.8,3,6.8,6.8l0,0.1c0,0,0,0.1,0,0.1l0,1l1,0C27,9,29,11,29,13.5c0,2.5-2,4.5-4.5,4.5H6c-2.8,0-5-2.2-5-5 c0-2.1,1.4-4,3.4-4.7L5,8.1l0.1-0.6C5.3,6,6.5,5,8,5c0.4,0,0.9,0.1,1.3,0.3l0.9,0.5l0.4-0.9C11.8,2.5,14.2,1,16.8,1 M16.8,0 c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4.1,7.3C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5 c0-3-2.5-5.5-5.5-5.5c0-0.1,0-0.2,0-0.2C24.5,3.5,21.1,0,16.8,0L16.8,0z'/></svg>");
23 | }
24 | .active i.tabbar-demo-icon-3 {
25 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23007aff'><path d='M24.5,8c0-0.1,0-0.2,0-0.2C24.5,3.5,21,0,16.8,0c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4,7.3 C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5C30,10.5,27.5,8,24.5,8z'/></svg>");
26 | }
27 | i.tabbar-demo-icon-4 {
28 |   width: 25px;
29 |   height: 30px;
30 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23929292'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15,0h-5C9.5,0,8.9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M24,17c0,0.6-0.4,1-1,1H2c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h4.2h0.4 l0.3-0.3l1.2-1.2l0,0.1l1.1-1.2C9.5,1.1,9.8,1,10,1h5c0.3,0,0.5,0.1,0.7,0.3l2.4,2.4L18.4,4h0.4H23c0.6,0,1,0.4,1,1V17z'/><path d='M12.5,4C8.9,4,6,6.9,6,10.5c0,3.6,2.9,6.5,6.5,6.5c3.6,0,6.5-2.9,6.5-6.5C19,6.9,16.1,4,12.5,4z M12.5,16 c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5S18,7.5,18,10.5C18,13.5,15.5,16,12.5,16z'/><path d='M12.5,6C10,6,8,8,8,10.5C8,13,10,15,12.5,15s4.5-2,4.5-4.5C17,8,15,6,12.5,6z M12.5,14C10.6,14,9,12.4,9,10.5 C9,8.6,10.6,7,12.5,7S16,8.6,16,10.5C16,12.4,14.4,14,12.5,14z'/></g></svg>");
31 | }
32 | .active i.tabbar-demo-icon-4 {
33 |   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23007aff'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15.1,0h-5C9.5,0,9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M12.5,16c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5c3,0,5.5,2.5,5.5,5.5 C18,13.5,15.5,16,12.5,16z'/><circle cx='12.5' cy='10.5' r='4.5'/></g></svg>");
34 | }
35 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  6 |     <meta name="apple-mobile-web-app-capable" content="yes">
  7 |     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8 |     <title>HTMLCenter</title>
  9 |     <!-- Path to Framework7 Library CSS-->
 10 |     <link rel="stylesheet" href="css/framework7/framework7.min.css">
 11 |     <!-- Path to your custom app styles-->
 12 |     <link rel="stylesheet" href="css/my-app.css">
 13 |   </head>
 14 |   <body>
 15 |     <!-- Status bar overlay for fullscreen mode-->
 16 |     <div class="statusbar-overlay"></div>
 17 |     <!-- Panels overlay-->
 18 |     <div class="panel-overlay"></div>
 19 |     <!-- Left panel with reveal effect-->
 20 |     <div class="panel panel-left panel-reveal">
 21 |       <div class="content-block">
 22 |         <p>Left pannel can have custom content.<br />
 23 |           Another line<br />
 24 |           Yet another line<br />
 25 |           </p>
 26 |       </div>
 27 |     </div>
 28 |     <!-- Right panel with cover effect-->
 29 |     <div class="panel panel-right panel-cover">
 30 |       <div class="content-block">
 31 |         <p>Right pannel can have custom content.<br />
 32 |         Another line<br />
 33 |         Yet another line<br />
 34 |         </p>
 35 |       </div>
 36 |     </div>
 37 |     <!-- Views-->
 38 |     <div class="views">
 39 |       <!-- Your main view, should have "view-main" class-->
 40 |       <div class="view view-main">
 41 |         <!-- Top Navbar-->
 42 |         <div class="navbar">
 43 |           <!-- Navbar inner for Index page-->
 44 |           <div data-page="index" class="navbar-inner">
 45 |             <!-- We have home navbar without left link-->
 46 |             <div class="center sliding">Tutorial</div>
 47 |             <div class="right">
 48 |               <!-- Right link contains only icon - additional "icon-only" class-->
 49 |               <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
 50 |             </div>
 51 |           </div>
 52 |           
 53 |           <!-- Navbar inner for Register page-->
 54 |           <div data-page="register" class="navbar-inner cached">
 55 |             <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
 56 |             <div class="center sliding">Register</div>
 57 |           </div> 
 58 |           <!-- Navbar inner for Login page-->
 59 |           <div data-page="form" class="navbar-inner cached">
 60 |             <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
 61 |             <div class="center sliding">Login</div>
 62 |           </div>
 63 |           <!-- Navbar inner for Services page-->
 64 |           <div data-page="about" class="navbar-inner cached">
 65 |             <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
 66 |             <div class="center sliding">About</div>
 67 |           </div>
 68 |           
 69 |           <!-- Navbar inner for Welcome page-->
 70 |           <div data-page="welcome" class="navbar-inner cached">
 71 |             <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
 72 |             <div class="center sliding">Welcome</div>
 73 |           </div>
 74 | 
 75 |         </div>
 76 |         <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
 77 |         <div class="pages navbar-through toolbar-through">
 78 |           <!-- Index Page-->
 79 |           <div data-page="index" class="page">
 80 |             <!-- Scrollable page content-->
 81 |             <div class="page-content">
 82 |               <div class="content-block-title">Example Application</div>
 83 |               <div class="content-block">
 84 |                 <div class="content-block-inner">
 85 |                   <p>Very simple HTML5 mobile web app.</p>
 86 |                   <p>With the help of Framework7.<br />
 87 |                   Framework7 has bunch of pre built generic UI elements</p>
 88 |                 </div>
 89 |               </div>
 90 |               <div class="content-block-title">Example Menu</div>
 91 |               <div class="list-block">
 92 |                 <ul>
 93 |                   <li>
 94 |                     <a href="#register" class="item-link">
 95 |                       <div class="item-content"> 
 96 |                         <div class="item-inner">
 97 |                           <div class="item-title">Register</div>
 98 |                         </div>
 99 |                       </div>
100 |                     </a>
101 |                   </li>
102 |                   <li>
103 |                     <a href="#form" class="item-link">
104 |                       <div class="item-content"> 
105 |                         <div class="item-inner">
106 |                           <div class="item-title">Login</div>
107 |                         </div>
108 |                       </div>
109 |                     </a>
110 |                   </li>
111 |                   <li>
112 |                     <a href="#about" class="item-link">
113 |                       <div class="item-content">
114 |                         <div class="item-inner"> 
115 |                           <div class="item-title">About</div>
116 |                         </div>
117 |                       </div>
118 |                     </a>
119 |                   </li>
120 |                 </ul>
121 |               </div>
122 |               
123 |             </div>
124 |           </div>
125 |           <!-- About Page-->
126 |           <div data-page="about" class="page cached">
127 |             <div class="page-content">
128 |               <div class="content-block">
129 |                 <p>
130 |                 In order to go back to main page, you can click <strong>Back</strong> button on the left side of Top menu.<br />
131 |                 Or simply use this link to <a href="#" class="back">go back</a>.</p>
132 |                 <p>
133 |                 In fact you can load any page from this application, with the simple HTML link. <a href="#form">Load login page</a>.</p>
134 | 
135 |                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.</p>
136 | 
137 |                 <p>Thanks,<br />
138 |                 HTMLCenter team</p>
139 |               </div>
140 |             </div>
141 |           </div>
142 |           
143 |           <!-- Welcome Page-->
144 |           <script id="welcomeTemplate" type="text/template7">
145 |             <div data-page="welcome" class="page cached">
146 |               <div class="page-content">
147 |                 <div class="content-block">
148 |                   <p>Hi, {{name}}, welcome to Framework7 application on HTMLCenter!</p>
149 |                   <p>You are now loged in and can navigate accross personal pages in this application.</p>
150 |                   <p>Thanks to Parse for holding all your data, so this app doesnt have to do it!</p>
151 | 
152 |                   <p>Cheers,<br />
153 |                   HTMLCenter</p>
154 |                 </div>
155 |               </div>
156 |             </div>
157 |           </script>
158 | 
159 |           
160 |           <!-- Register Page-->
161 |           <div data-page="register" class="page cached">
162 |             <div class="page-content">
163 |               <div class="content-block">
164 |                 <p>
165 |                 Please Register to HTMLCenter<br />
166 |                 Once your account is succesfully registered, you can automatically access all the amazing tutorials, and books this site has to offer.<br /></p>
167 |               </div>
168 |               
169 | 
170 |               <div class="content-block-title"></div>
171 |               <div class="list-block">
172 |                 <ul>                  
173 |                   <li>
174 |                     <div class="item-content">
175 |                       <div class="item-media"><i class="icon icon-form-name"></i></div>
176 |                       <div class="item-inner"> 
177 |                         <div class="item-title label">Username</div>
178 |                         <div class="item-input">
179 |                           <input id="register-username" type="email" placeholder="Username">
180 |                         </div>
181 |                       </div>
182 |                     </div>
183 |                   </li>
184 | 
185 |                   <li>
186 |                     <div class="item-content">
187 |                       <div class="item-media"><i class="icon icon-form-email"></i></div>
188 |                       <div class="item-inner"> 
189 |                         <div class="item-title label">E-mail</div>
190 |                         <div class="item-input">
191 |                           <input id="register-email" type="email" placeholder="E-mail">
192 |                         </div>
193 |                       </div>
194 |                     </div>
195 |                   </li>
196 | 
197 |                   <li>
198 |                     <div class="item-content">
199 |                       <div class="item-media"><i class="icon icon-form-password"></i></div>
200 |                       <div class="item-inner"> 
201 |                         <div class="item-title label">Password</div>
202 |                         <div class="item-input">
203 |                           <input id="register-password" type="password" placeholder="Password">
204 |                         </div>
205 |                       </div>
206 |                     </div>
207 |                   </li>
208 | 
209 |                 </ul>
210 |               </div>
211 |               
212 |               <div class="content-block">
213 |                 <div class="row">
214 |                   <div class="col-50">
215 |                     <input id="cancel-register" type="submit" value="Cancel" class="button button-big button-fill color-red">
216 |                   </div>
217 |                   <div class="col-50">
218 |                     <input id="submmit-register" type="submit" value="Submit" class="button button-big button-fill color-green">
219 |                   </div>
220 |                 </div>
221 |               </div>   
222 | 
223 |             </div>
224 |           </div>
225 | 
226 | 
227 | 
228 | 
229 | 
230 |           <!-- Form Page-->
231 |           <div data-page="form" class="page cached">
232 |             <div class="page-content">
233 |               <div class="content-block">
234 |                 <p>
235 |                 Please login to HTMLCenter app.<br />
236 |                 Once authenticated, you can access all the amazing tutorials, and books this site has to offer.<br /></p>
237 |               </div>
238 |               
239 | 
240 |               <div class="content-block-title"></div>
241 |               <div class="list-block">
242 |                 <ul>                  
243 |                   <li>
244 |                     <div class="item-content">
245 |                       <div class="item-media"><i class="icon icon-form-email"></i></div>
246 |                       <div class="item-inner"> 
247 |                         <div class="item-title label">E-mail</div>
248 |                         <div class="item-input">
249 |                           <input id="login-email" type="email" placeholder="E-mail">
250 |                         </div>
251 |                       </div>
252 |                     </div>
253 |                   </li>
254 |                   
255 |                   <li>
256 |                     <div class="item-content">
257 |                       <div class="item-media"><i class="icon icon-form-password"></i></div>
258 |                       <div class="item-inner"> 
259 |                         <div class="item-title label">Password</div>
260 |                         <div class="item-input">
261 |                           <input id="login-password" type="password" placeholder="Password">
262 |                         </div>
263 |                       </div>
264 |                     </div>
265 |                   </li>
266 |                 
267 |                 </ul>
268 |               </div>
269 |               
270 |               <div class="content-block">
271 |                 <div class="row">
272 |                   <div class="col-50">
273 |                     <input id="cancel-login" type="submit" value="Cancel" class="button button-big button-fill color-red">
274 |                   </div>
275 |                   <div class="col-50">
276 |                     <input id="submmit-login" type="submit" value="Submit" class="button button-big button-fill color-green">
277 |                   </div>
278 |                 </div>
279 |               </div>  
280 | 
281 |             </div>
282 |           </div>
283 |         </div>
284 |         <!-- Bottom Toolbar-->
285 |         <!--
286 |         <div class="toolbar">
287 |           <div class="toolbar-inner"><a href="#" class="link">Bottom Toolbar y</a><a href="#" class="link">Bottom Toolbar x</a></div>
288 |         </div> -->
289 | 
290 |       </div>
291 |     </div>
292 |     <!-- Path to Framework7 Library JS-->
293 |     <script type="text/javascript" src="js/framework7/framework7.min.js"></script>
294 |     <!-- Path to your app js-->
295 |     <script type="text/javascript" src="js/my-app.js"></script>
296 |   </body>
297 | </html>


--------------------------------------------------------------------------------
/js/my-app.js:
--------------------------------------------------------------------------------
  1 | // Initialize your app
  2 | var myApp = new Framework7({
  3 |     animateNavBackIcon:true,
  4 |     template7Pages: true,
  5 |     precompileTemplates: true
  6 | });
  7 | 
  8 | // Export selectors engine
  9 | var $$ = Dom7;
 10 | 
 11 | // Add main View
 12 | var mainView = myApp.addView('.view-main', {
 13 |     // Enable dynamic Navbar
 14 |     dynamicNavbar: true,
 15 |     // Enable Dom Cache so we can use all inline pages
 16 |     domCache: true
 17 | });
 18 | 
 19 | // @TODO Parse.com credentials
 20 | // Setup your Parse.com applicationId and API key 
 21 | var applicationId = 'xxx';
 22 | var restApiKey = 'yyy';
 23 | 
 24 | 
 25 | // Funcion to handle Cancel button on Login page
 26 | $$('#cancel-login').on('click', function () {
 27 | 	// Clear field values
 28 | 	$$('#login-email').val('');
 29 | 	$$('#login-password').val('');
 30 | });
 31 | 
 32 | // Funcion to handle Submit button on Login page
 33 | $$('#submmit-login').on('click', function () {
 34 |     
 35 |     var username = $$('#login-email').val();
 36 |     var password = $$('#login-password').val();
 37 | 
 38 |     console.log('Submit clicked');
 39 |     console.log('username: ' +username);
 40 |     console.log('password: ' +password);
 41 | 
 42 |     var query = 'https://api.parse.com/1/login?username='+username+'&password='+password; 
 43 |     myApp.showIndicator();
 44 | 
 45 |     // Using Ajax for communication with Parse backend
 46 |     // Note mandatory headers with credentials required
 47 |     // by Parse. HTTP communication responses are handled
 48 |     // in success / error callbacks
 49 | 	$$.ajax({
 50 | 		url: query,
 51 | 		headers: {"X-Parse-Application-Id":applicationId,"X-Parse-REST-API-Key":restApiKey},
 52 | 	    type: "GET",
 53 | 	    // if successful response received (http 2xx)
 54 | 	    success: function(data, textStatus ){
 55 | 	   		
 56 | 	    	// We have received response and can hide activity indicator
 57 | 	   		myApp.hideIndicator();
 58 | 		
 59 | 	   		data = JSON.parse(data);
 60 | 	   		if (!data.username) {return}
 61 | 
 62 | 	   		var username = data.username;		
 63 | 			
 64 | 			// Will pass context with retrieved user name 
 65 | 			// to welcome page. Redirect to welcome page
 66 | 			mainView.router.load({
 67 | 				template: Template7.templates.welcomeTemplate,
 68 | 				context: {
 69 | 					name: username
 70 | 				}
 71 | 			});
 72 | 	    },
 73 | 	    error: function(xhr, textStatus, errorThrown){    	
 74 | 	    	// We have received response and can hide activity indicator
 75 | 	    	myApp.hideIndicator();		
 76 | 			myApp.alert('Login was unsuccessful, please verify username and password and try again');
 77 | 
 78 | 			$$('#login-email').val('');
 79 | 			$$('#login-password').val('');
 80 | 	    }
 81 | 	});
 82 | });
 83 | 
 84 | 
 85 | // Function to handle Submit button on Register page
 86 | $$('#submmit-register').on('click', function () {
 87 |     
 88 |     var username = $$('#register-username').val();
 89 |     var email = $$('#register-email').val();
 90 |     var password = $$('#register-password').val();
 91 | 
 92 |     console.log('Submit clicked');
 93 |     console.log('username: ' +username+ 'and password: '+password+ 'and email: '+email);
 94 | 
 95 |     if (!username || !password || !email){
 96 |     	myApp.alert('Please fill in all Registration form fields');
 97 |     	return;
 98 |     }
 99 | 
100 |    	// Methods to handle speciffic HTTP response codes
101 | 	var success201 = function(data, textStatus, jqXHR) {
102 | 		
103 | 		// We have received response and can hide activity indicator
104 | 	   	myApp.hideIndicator();
105 | 
106 | 	   	console.log('Response body: '+data);				
107 | 			
108 | 		// Will pass context with retrieved user name 
109 | 		// to welcome page. Redirect to welcome page
110 | 		mainView.router.load({
111 | 			template: Template7.templates.welcomeTemplate,
112 | 			context: {
113 | 				name: username
114 | 			}
115 | 		});
116 | 	};
117 | 
118 | 	var notsuccess = function(data, textStatus, jqXHR) {	
119 | 		// We have received response and can hide activity indicator
120 | 	    myApp.hideIndicator();		
121 | 		myApp.alert('Login was unsuccessful, please try again');
122 | 	};
123 | 
124 |     var query = 'https://api.parse.com/1/users';
125 |     var postdata = {};
126 |     postdata.username = username;
127 |     postdata.password = password;
128 |     postdata.email = email;
129 | 
130 |     myApp.showIndicator();
131 | 
132 |     // Using Ajax for communication with Parse backend
133 |     // Note mandatory headers with credentials required
134 |     // by Parse. HTTP communication responses are handled
135 |     // based on HTTP response codes
136 | 	$$.ajax({
137 | 		url: query,
138 | 		headers: {"X-Parse-Application-Id":applicationId,"X-Parse-REST-API-Key":restApiKey},
139 | 	    type: "POST",
140 | 	    contentType: "application/json",
141 | 	    data: JSON.stringify(postdata),
142 | 
143 | 	    statusCode: {
144 | 	    	201: success201,
145 | 	    	400: notsuccess,
146 | 	    	500: notsuccess
147 | 	    }
148 | 	});
149 | 
150 | });
151 | 
152 | 
153 | 
154 | 


--------------------------------------------------------------------------------