index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. <!DOCTYPE html>
  2. <!--
  3. Licensed to the Apache Software Foundation (ASF) under one
  4. or more contributor license agreements. See the NOTICE file
  5. distributed with this work for additional information
  6. regarding copyright ownership. The ASF licenses this file
  7. to you under the Apache License, Version 2.0 (the
  8. "License"); you may not use this file except in compliance
  9. with the License. You may obtain a copy of the License at
  10. http://www.apache.org/licenses/LICENSE-2.0
  11. Unless required by applicable law or agreed to in writing,
  12. software distributed under the License is distributed on an
  13. "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  14. KIND, either express or implied. See the License for the
  15. specific language governing permissions and limitations
  16. under the License.
  17. -->
  18. <html>
  19. <head>
  20. <meta charset="UTF-8">
  21. <!--
  22. Customize this policy to fit your own app's needs. For more guidance, see:
  23. https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
  24. Some notes:
  25. * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
  26. * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
  27. * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
  28. * Enable inline JS: add 'unsafe-inline' to default-src
  29. -->
  30. <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  31. <meta name="format-detection" content="telephone=no">
  32. <meta charset="UTF-8">
  33. <meta name="msapplication-tap-highlight" content="no">
  34. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  35. <link rel="stylesheet" href="themes/bluerelax.css" />
  36. <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
  37. <link rel="stylesheet" href="themes/jquery.mobile.structure-1.4.5.min.css" />
  38. <script src="vendor/jquery.min.js"></script>
  39. <script src="vendor/jquery.mobile-1.4.5.min.js"></script>
  40. <script src="js/spesefurga.js"></script>
  41. <script>
  42. //$(function(){
  43. $( document ).on( "mobileinit", function(){
  44. $("#popup").popup();
  45. });
  46. /*$.mobile.document.on("click", "#open-popup", function (evt) {
  47. $("#popup").popup("open", {
  48. x: evt.pageX
  49. , y: evt.pageY
  50. });
  51. evt.preventDefault();
  52. });*/
  53. </script>
  54. <link rel="stylesheet" type="text/css" href="css/index.css">
  55. <title>share fine</title>
  56. </head>
  57. <body>
  58. <div data-role="page" id="menu" data-theme="a">
  59. <h3 class="ui-bar ui-bar-a">Share is care!</h3>
  60. <div class="ui-body ui-body-a ui-corner-all">
  61. <h3>Condividere è prendersi cura di qualcosa.</h3>
  62. <p>Usiamo insieme un oggetto e sfruttiamo uno software per calcolare le quote di ciascuno in base all'utilizzo della nostra risorsa in comune.</p>
  63. </div>
  64. <!--poi facciamo in modo che venga nascosto questo paragrafo: Istruzioni e perchè:-->
  65. <div data-role="collapsible" data-collapsed="false" class="initopen">
  66. <h3>Come iniziare</h3>
  67. <p>Per impostare la condivisione ti verrà chiesto all'inizio:</p>
  68. <ul>
  69. <li>quali sono le spese</li>
  70. <li>una quota per la manutenzione del bene</li>
  71. <li>quanti siete che lo condividete</li>
  72. <li>dei nomi/etichette per distinguere chi lo usa</li>
  73. </ul>
  74. <p>Man mano dovrete raccogliere queste informazioni:</p>
  75. <ul>
  76. <li>quanto versa ognuno</li>
  77. <li>quanti giorni di utilizzo di ognuno</li>
  78. <li>altre eventuali spese non considerate</li>
  79. </ul>
  80. <small>Potrebbe bastare un diario o un calendario tenuto vicino all'oggetto o in luogo concordato per poi riportare i giorni sull'app.</small>
  81. <p>ShareFine ti da questi risultati:</p>
  82. <ul>
  83. <li>quote da versare all'inizio</li>
  84. <li>quando vuoi i conguagli in base all'uso</li>
  85. </ul>
  86. <h2>Obiettivi:</h2>
  87. <ul>
  88. <li>usare le risorse piuttosto che lasciarle ferme</li>
  89. <li>educarci al condividere</li>
  90. <li>imparare a far manutenzione agli oggetti</li>
  91. <li>condividere conoscenze, passioni e idee</li>
  92. </ul>
  93. </div>
  94. <!-- /collapsible -->
  95. <div data-role="collapsible">
  96. <h3>Esempio</h3>
  97. <p>Per esempio: abbiamo un camper e lo vogliamo usare in 4. Sappiamo che ogni anno paghiamo 600 euro di assicurazione, 100 euro di bollo e circa 600 euro di manutenzione (cambio gomme o olio o imprevisti). Quindi ad inizio accordo necessitiamo di 600+100+600 diviso 4 persone = 325 euro a testa, che versiamo subito nella cassa comune. La cifra versata è per circa 90 giorni d'uso a testa all'anno (365 diviso 4, ovvero i partecipanti).</p>
  98. <p>A fine stagione o a fine anno, facciamo però i conguagli, ovvero, chi lo ha usato di più da qualche soldo a chi lo ha usato di meno. Per esempio, Giulia lo ha usato 23 giorni, Giacomo e consorte 14 giorni, Mirco e figli 12 giorni, mentre Lucia, che è una appassionata di pesca, lo ha usato 200 giorni. Sono rimasti 116 giorni di inutilizzo, che vanno divisi equamente tra tutti i partecipanti all'accordo.</p>
  99. <p>Quindi abbiamo le quote di uso esclusivo per singolo giorno: 3.56 euro;
  100. <br/>e le quote singole per i giorni di inutilizzo: 0.89 euro. ShareFine ogni volta che gli chiedi il conguaglio ti fa la differenza tra quello che hai versato come quota iniziale e quello che devi al gruppo in base al reale utilizzo che ne hai fatto del bene, senza dimenticare i giorni in cui è stato fermo e che quindi pagano tutti.</p>
  101. <p>Quindi Giulia (23 giorni) spenderà 185.20; Giacomo (14 giorni) 153,15; Mirco (12 giorni) 146,03 e Lucia (200 giorni) 815,62. ShareFine ti indica anche le differenze in base alla quota iniziale o a quanto hai già versato.</p>
  102. <p>Non abbiamo considerato la benzina perchè ognuno dovrà pagare la sua, possiamo consigliare per nostra esperienza, che è sempre meglio accordarsi per lasciarlo con il pieno quando lo si rimette nel parcheggio concordato. Tutte le altre questioni: pulizia, accessori, prenotazioni e provviste ... vi consigliamo di risolverle parlandosi piuttosto che lasciando biglietti in giro o utilizzando un PC!
  103. <br/> Se avete commenti, vi piace, vorreste farlo meglio, scrivete a sharefine@digitigrafo.it</p>
  104. </div>
  105. <!-- /collapsible -->
  106. <div data-role="collapsible">
  107. <h3>Domande comuni</h3>
  108. <ul>
  109. <li>Se si aggiunge qualcuno?</li>
  110. <li> Se è un progetto annuale, aggiungete e basta, se è un progetto a tempo definito vi consigliamo di fare un conguaglio, chiudere quel progetto ed iniziarne uno nuovo con un numero di utenti diverso.</li>
  111. </ul>
  112. </div>
  113. <!-- /collapsible -->
  114. <h3 class="ui-bar ui-bar-a">Progetti condivisi</h3>
  115. <ul data-role="listview" data-inset="true" data-shadow="false">
  116. <li data-role="collapsible" data-iconpos="right" data-inset="false">
  117. <h2 data-id="0" id="prog-0" class="prog-name">furga</h2>
  118. <ul data-role="listview" data-theme="a">
  119. <li><a href="#impostazioni">Impostazioni</a></li>
  120. <li><a href="#giorni">Giorni</a></li>
  121. <li><a href="#conti">Conti</a></li>
  122. </ul>
  123. </li>
  124. <li><a href="#new">Nuovo progetto</a></li>
  125. </ul>
  126. </div>
  127. <div data-role="page" id="impostazioni" data-id="0" data-theme="a">
  128. <h3 class="ui-bar ui-bar-a">Impostazioni</h3>
  129. <div class="ui-body ui-body-a">
  130. <p>Progetto</p>
  131. <ul data-role="listview" data-theme="a">
  132. <li class="prog-name"></li>
  133. <li>creato il <span id="prog-created">16/08/2016</span></li>
  134. </ul>
  135. </div>
  136. <div data-role="collapsible" data-content-theme="false">
  137. <h4>Modifica Progetto</h4>
  138. <div data-role="controlgroup" data-type="horizontal">
  139. <a href="#popup1" id="open-popup1" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-position-to="window" data-transition="pop">Cambia nome</a>
  140. <a href="#" class="ui-btn ui-corner-all ui-icon-delete">Cancella il progetto</a>
  141. </div>
  142. <div data-role="popup" id="popup1" data-theme="a" class="ui-corner-all">
  143. <form>
  144. <div style="padding:10px 20px;">
  145. <h3>Cambia nome</h3>
  146. <label for="p-name" class="ui-hidden-accessible">Nome:</label>
  147. <input name="pass" id="p-name" value="" placeholder="camper Ada" data-theme="a" type="text">
  148. <a href="#" id="setname" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Fatto</a >
  149. </div>
  150. </form>
  151. </div>
  152. </div>
  153. <div class="ui-body ui-body-a">
  154. <table data-role="table" id="table-spese" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="a" data-column-btn-text="Colonne visibili..." data-column-popup-theme="a">
  155. <thead>
  156. <tr class="ui-bar-d">
  157. <th data-priority="2">N°</th>
  158. <th>Spese</th>
  159. <th data-priority="3">Data</th>
  160. <th data-priority="1"><abbr title="nome spesa"></abbr>Euro</th>
  161. <th data-priority="5">Note</th>
  162. </tr>
  163. </thead>
  164. <tbody>
  165. <tr>
  166. <th>1</th>
  167. <td>riparazione cambio</td>
  168. <td>01/09/2016</td>
  169. <td>600</td>
  170. <td>meccanico bologna</td>
  171. </tr>
  172. <tr>
  173. <th>2</th>
  174. <td>bollo</td>
  175. <td>1/01/2016</td>
  176. <td>100</td>
  177. <td></td>
  178. </tr>
  179. <tr>
  180. <th>3</th>
  181. <td>assicurazione</td>
  182. <td>13/08/2016</td>
  183. <td>600</td>
  184. <td>allianza faenza via Pertini n23</td>
  185. </tr>
  186. </tbody>
  187. </table>
  188. </div>
  189. <div data-role="collapsible" data-content-theme="false">
  190. <h4>Modifica Spese</h4>
  191. <a href="#popup" id="open-popup" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Sign in</a>
  192. <div data-role="controlgroup" data-type="horizontal">
  193. <a href="#" onclick="$('h4').css('color','red')" class="ui-btn ui-corner-all ui-icon-plus">Aggiungi</a>
  194. <a href="#" class="ui-btn ui-corner-all ui-icon-delete">Cancella l'ultima</a>
  195. </div>
  196. </div>
  197. <div data-role="popup" id="popup" data-theme="a" class="ui-corner-all">
  198. <form>
  199. <div style="padding:10px 20px;">
  200. <h3>Please sign in</h3>
  201. <label for="un" class="ui-hidden-accessible">Username:</label>
  202. <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
  203. <label for="pw" class="ui-hidden-accessible">Password:</label>
  204. <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
  205. <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
  206. </div>
  207. </form>
  208. </div>
  209. <div class="ui-body ui-body-a">
  210. <p>Soci aderenti al progetto</p>
  211. <ul data-role="listview" data-theme="a">
  212. <li>Gabri</li>
  213. <li>Ge</li>
  214. <li>Brogie</li>
  215. <li>Collettivo G.</li>
  216. </ul>
  217. </div>
  218. <div data-role="collapsible" data-content-theme="false">
  219. <h4>Modifica Soci</h4>
  220. <div data-role="controlgroup" data-type="horizontal">
  221. <a href="#" class="ui-btn ui-corner-all ui-icon-plus">Aggiungi</a>
  222. <a href="#" class="ui-btn ui-corner-all ui-icon-delete">Cancella l'ultimo</a>
  223. </div>
  224. </div>
  225. <div class="ui-body ui-body-a">
  226. <p>Durata del progetto</p>
  227. <p><span id="prog-time">365</span> giorni</p>
  228. </div>
  229. <div data-role="collapsible" data-content-theme="false">
  230. <h4>Modifica durata</h4>
  231. <div data-role="controlgroup" data-type="horizontal">
  232. <a href="#" class="ui-btn ui-corner-all ui-icon-plus">Cambia durata</a>
  233. </div>
  234. </div>
  235. <!--label for="slider1">Input slider:</label>
  236. <input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" />
  237. <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
  238. <legend>Settings:</legend>
  239. <input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
  240. <label for="radio-choice-a1">On</label>
  241. <input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
  242. <label for="radio-choice-b1">Off</label>
  243. </fieldset-->
  244. </div>
  245. <script type="text/javascript" src="cordova.js"></script>
  246. <script type="text/javascript" src="js/index.js"></script>
  247. </body>
  248. </html>