275 lines
No EOL
14 KiB
HTML
275 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
<html>
|
|
|
|
<head>
|
|
<!--
|
|
Customize this policy to fit your own app's needs. For more guidance, see:
|
|
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
|
|
Some notes:
|
|
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
|
|
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
|
|
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
|
|
* Enable inline JS: add 'unsafe-inline' to default-src
|
|
-->
|
|
<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 *">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="msapplication-tap-highlight" content="no">
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
|
|
<link rel="stylesheet" href="themes/bluerelax.css" />
|
|
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
|
|
<link rel="stylesheet" href="themes/jquery.mobile.structure-1.4.5.min.css" />
|
|
<script src="vendor/jquery.min.js"></script>
|
|
<script src="vendor/jquery.mobile-1.4.5.min.js"></script>
|
|
<script src="js/spesefurga.js"></script>
|
|
<script>
|
|
//$(function(){
|
|
$( document ).on( "mobileinit", function(){
|
|
$("#popup").popup();
|
|
});
|
|
/*$.mobile.document.on("click", "#open-popup", function (evt) {
|
|
$("#popup").popup("open", {
|
|
x: evt.pageX
|
|
, y: evt.pageY
|
|
});
|
|
evt.preventDefault();
|
|
});*/
|
|
|
|
</script>
|
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
|
<title>share fine</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div data-role="page" id="menu" data-theme="a">
|
|
|
|
<h3 class="ui-bar ui-bar-a">Share is care!</h3>
|
|
<div class="ui-body ui-body-a ui-corner-all">
|
|
<h3>Condividere è prendersi cura di qualcosa.</h3>
|
|
<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>
|
|
</div>
|
|
<!--poi facciamo in modo che venga nascosto questo paragrafo: Istruzioni e perchè:-->
|
|
|
|
<div data-role="collapsible" data-collapsed="false" class="initopen">
|
|
<h3>Come iniziare</h3>
|
|
<p>Per impostare la condivisione ti verrà chiesto all'inizio:</p>
|
|
<ul>
|
|
<li>quali sono le spese</li>
|
|
<li>una quota per la manutenzione del bene</li>
|
|
<li>quanti siete che lo condividete</li>
|
|
<li>dei nomi/etichette per distinguere chi lo usa</li>
|
|
</ul>
|
|
<p>Man mano dovrete raccogliere queste informazioni:</p>
|
|
<ul>
|
|
<li>quanto versa ognuno</li>
|
|
<li>quanti giorni di utilizzo di ognuno</li>
|
|
<li>altre eventuali spese non considerate</li>
|
|
</ul>
|
|
<small>Potrebbe bastare un diario o un calendario tenuto vicino all'oggetto o in luogo concordato per poi riportare i giorni sull'app.</small>
|
|
<p>ShareFine ti da questi risultati:</p>
|
|
<ul>
|
|
<li>quote da versare all'inizio</li>
|
|
<li>quando vuoi i conguagli in base all'uso</li>
|
|
</ul>
|
|
|
|
<h2>Obiettivi:</h2>
|
|
<ul>
|
|
<li>usare le risorse piuttosto che lasciarle ferme</li>
|
|
<li>educarci al condividere</li>
|
|
<li>imparare a far manutenzione agli oggetti</li>
|
|
<li>condividere conoscenze, passioni e idee</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /collapsible -->
|
|
<div data-role="collapsible">
|
|
<h3>Esempio</h3>
|
|
<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>
|
|
<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>
|
|
<p>Quindi abbiamo le quote di uso esclusivo per singolo giorno: 3.56 euro;
|
|
<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>
|
|
<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>
|
|
<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!
|
|
<br/> Se avete commenti, vi piace, vorreste farlo meglio, scrivete a sharefine@digitigrafo.it</p>
|
|
</div>
|
|
<!-- /collapsible -->
|
|
<div data-role="collapsible">
|
|
<h3>Domande comuni</h3>
|
|
<ul>
|
|
<li>Se si aggiunge qualcuno?</li>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
<!-- /collapsible -->
|
|
<h3 class="ui-bar ui-bar-a">Progetti condivisi</h3>
|
|
|
|
<ul data-role="listview" data-inset="true" data-shadow="false">
|
|
<li data-role="collapsible" data-iconpos="right" data-inset="false">
|
|
<h2 data-id="0" id="prog-0">furga</h2>
|
|
<ul data-role="listview" data-theme="a">
|
|
<li><a href="#impostazioni">Impostazioni</a></li>
|
|
<li><a href="#giorni">Giorni</a></li>
|
|
<li><a href="#conti">Conti</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#new">Nuovo progetto</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
<div data-role="page" id="impostazioni" data-id="0" data-theme="a">
|
|
|
|
<h3 class="ui-bar ui-bar-a">Impostazioni</h3>
|
|
|
|
<div class="ui-body ui-body-a">
|
|
<p>Progetto</p>
|
|
<ul data-role="listview" data-theme="a">
|
|
<li id="prog-name">furga</li>
|
|
<li>creato il <span id="prog-created">16/08/2016</span></li>
|
|
</ul>
|
|
</div>
|
|
<div data-role="collapsible" data-content-theme="false">
|
|
<h4>Modifica Progetto</h4>
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<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>
|
|
<a href="#" class="ui-btn ui-corner-all ui-icon-delete">Cancella il progetto</a>
|
|
</div>
|
|
|
|
<div data-role="popup" id="popup1" data-theme="a" class="ui-corner-all">
|
|
<form>
|
|
<div style="padding:10px 20px;">
|
|
<h3>Cambia nome</h3>
|
|
<label for="p-name" class="ui-hidden-accessible">Nome:</label>
|
|
<input name="pass" id="p-name" value="" placeholder="camper Ada" data-theme="a" type="text">
|
|
<a href="#" id="setname" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Fatto</a >
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="ui-body ui-body-a">
|
|
<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">
|
|
<thead>
|
|
<tr class="ui-bar-d">
|
|
<th data-priority="2">N°</th>
|
|
<th>Spese</th>
|
|
<th data-priority="3">Data</th>
|
|
<th data-priority="1"><abbr title="nome spesa"></abbr>Euro</th>
|
|
<th data-priority="5">Note</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>1</th>
|
|
<td>riparazione cambio</td>
|
|
<td>01/09/2016</td>
|
|
<td>600</td>
|
|
<td>meccanico bologna</td>
|
|
</tr>
|
|
<tr>
|
|
<th>2</th>
|
|
<td>bollo</td>
|
|
<td>1/01/2016</td>
|
|
<td>100</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<th>3</th>
|
|
<td>assicurazione</td>
|
|
<td>13/08/2016</td>
|
|
<td>600</td>
|
|
<td>allianza faenza via Pertini n23</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
<div data-role="collapsible" data-content-theme="false">
|
|
<h4>Modifica Spese</h4>
|
|
<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>
|
|
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="#" onclick="$('h4').css('color','red')" class="ui-btn ui-corner-all ui-icon-plus">Aggiungi</a>
|
|
<a href="#" class="ui-btn ui-corner-all ui-icon-delete">Cancella l'ultima</a>
|
|
</div>
|
|
</div>
|
|
<div data-role="popup" id="popup" data-theme="a" class="ui-corner-all">
|
|
<form>
|
|
<div style="padding:10px 20px;">
|
|
<h3>Please sign in</h3>
|
|
<label for="un" class="ui-hidden-accessible">Username:</label>
|
|
<input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
|
|
<label for="pw" class="ui-hidden-accessible">Password:</label>
|
|
<input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
|
|
<button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="ui-body ui-body-a">
|
|
<p>Soci aderenti al progetto</p>
|
|
<ul data-role="listview" data-theme="a">
|
|
<li>Gabri</li>
|
|
<li>Ge</li>
|
|
<li>Brogie</li>
|
|
<li>Collettivo G.</li>
|
|
</ul>
|
|
</div>
|
|
<div data-role="collapsible" data-content-theme="false">
|
|
<h4>Modifica Soci</h4>
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="#" class="ui-btn ui-corner-all ui-icon-plus">Aggiungi</a>
|
|
<a href="#" class="ui-btn ui-corner-all ui-icon-delete">Cancella l'ultimo</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="ui-body ui-body-a">
|
|
<p>Durata del progetto</p>
|
|
|
|
<p><span id="prog-time">365</span> giorni</p>
|
|
|
|
</div>
|
|
<div data-role="collapsible" data-content-theme="false">
|
|
<h4>Modifica durata</h4>
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|
<a href="#" class="ui-btn ui-corner-all ui-icon-plus">Cambia durata</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!--label for="slider1">Input slider:</label>
|
|
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" />
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Settings:</legend>
|
|
<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
|
|
<label for="radio-choice-a1">On</label>
|
|
<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
|
|
<label for="radio-choice-b1">Off</label>
|
|
</fieldset-->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="cordova.js"></script>
|
|
<script type="text/javascript" src="js/index.js"></script>
|
|
</body>
|
|
|
|
</html> |