350 lines
17 KiB
Smarty
350 lines
17 KiB
Smarty
<!DOCTYPE html>
|
|
<html manifest="cache.manifest">
|
|
<head>
|
|
<title>MySC</title>
|
|
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
|
|
<link rel="shortcut icon" href="{static_url path="favicon.png"}">
|
|
<link rel="shortcut icon" sizes="196x196" href="{static_url path="icon-196x196.png"}">
|
|
<link rel="shortcut icon" sizes="128x128" href="{static_url path="icon-128x128.png"}">
|
|
<link rel="apple-touch-icon" sizes="128x128" href="{static_url path="icon-128x128.png"}">
|
|
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="{static_url path="icon-128x128.png"}">
|
|
<!-- Bootstrap -->
|
|
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="{static_url path="lib/alertify/css/alertify.min.css"}">
|
|
<link rel="stylesheet" href="{static_url path="lib/bootstrap/css/bootstrap.min.css"}">
|
|
|
|
<!-- Optional theme -->
|
|
<link rel="stylesheet" href="{static_url path="lib/bootstrap/css/bootstrap.superhero.min.css"}">
|
|
|
|
<link rel="stylesheet" href="{static_url path="main.css"}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-top-collapse">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" id='app-name'>MySC</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="navbar-top-collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li class="menu menu-scases"><a href="#add_scase" id="add_scase_btn"><span class="glyphicon glyphicon-plus-sign"></span> {t}Add a suitcase{/t}</a></li>
|
|
<li class="menu menu-scases"><a href="#scases_trash" id="scases_trash_btn"><span class="glyphicon glyphicon-trash"></span> {t}Show trash{/t}</a></li>
|
|
<li class="menu menu-scase"><a href="#scases" id="back_to_scases"><span class="glyphicon glyphicon-briefcase"></span> {t}Suitcases list{/t}</a></li>
|
|
<li class="menu menu-scase dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-tag'></span> {t}Manage the suitcase{/t} <b class="caret"></b></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#add_cat" id="add_cat_btn"><span class="glyphicon glyphicon-plus-sign"></span> {t}Add a category{/t}</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#rename_scase" id="rename_scase_btn"><span class="glyphicon glyphicon-edit"></span> {t}Rename the suitcase{/t}</a></li>
|
|
<li><a href="#copy_scase" id="copy_scase_btn"><span class="glyphicon glyphicon-duplicate"></span> {t}Copy the suitcase{/t}</a></li>
|
|
<li><a href="#reset_scase" id="reset_scase_btn"><span class="glyphicon glyphicon-cog"></span> {t}Reset the suitcase{/t}</a></li>
|
|
<li><a href="#delete_scase" id="delete_scase_btn"><span class="glyphicon glyphicon-trash"></span> {t}Delete the suitcase{/t}</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#scase_trash" id="scase_trash_btn"><span class="glyphicon glyphicon-trash"></span> {t}Show suitcase's trash{/t}</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-hdd'></span> {t}Manage data{/t} <b class="caret"></b></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a id='export_local_data' href='#' download='mysc_export.json'><span class='glyphicon glyphicon-save'></span> {t}Backup your data{/t}</a></li>
|
|
<li><a id='import_local_data' href='#' download='mysc_export.json'><span class='glyphicon glyphicon-open'></span> {t}Restaure your data{/t}</a></li>
|
|
<li class="divider"></li>
|
|
<li><a id='sync_local_data'><span class='glyphicon glyphicon-refresh'></span> {t}Synchronize local data{/t}</a></li>
|
|
<li class="divider"></li>
|
|
<li><a id='clear_local_data'><span class='glyphicon glyphicon-trash'></span> {t}Purge local data{/t}</a></li>
|
|
<li><a id='load_example_data'><span class='glyphicon glyphicon-trash'></span> {t}Load example data{/t}</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<span class='glyphicon glyphicon-user'></span>
|
|
<span id="username"></span>
|
|
<b class="caret"></b>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a id='login' href='#'><span class='glyphicon glyphicon-loging'></span> {t}Login{/t}</a></li>
|
|
<li><a id='logout' href='#'><span class='glyphicon glyphicon-logout'></span> {t}Logout{/t}</a></li>
|
|
<li><a id='update_app' href='#'><span class='glyphicon glyphicon-refresh'></span> {t}Update the application{/t}</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" id="content"></div>
|
|
|
|
|
|
<div class="modal" id="add_scase_modal" tabindex="-1" role="dialog" aria-labelledby="addSCaseModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Add a suitcase{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" role="form">
|
|
<div class="form-group">
|
|
<input type='text' id='add_scase_name' class="form-control" placeholder="{t}Suitcase name{/t}"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='add_scase_submit'>{t}Add{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
<div class="modal" id="copy_scase_modal" tabindex="-1" role="dialog" aria-labelledby="copySCaseModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Copy the suitcase{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" role="form">
|
|
<div class="form-group">
|
|
<input type='text' id='copy_scase_name' class="form-control" placeholder="{t}Name of the new suitcase{/t}"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='copy_scase_submit'>{t}Copy{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
<div class="modal" id="rename_scase_modal" tabindex="-1" role="dialog" aria-labelledby="renameSCaseModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Rename the suitcase{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" role="form">
|
|
<div class="form-group">
|
|
<input type='text' id='rename_scase_name' class="form-control" placeholder="{t}New suitcase name{/t}"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='rename_scase_submit'>{t}Rename{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
<div class="modal" id="add_cat_modal" tabindex="-1" role="dialog" aria-labelledby="addCatModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Add a category{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" role="form">
|
|
<div class="form-group">
|
|
<input type='text' id='add_cat_name' class="form-control" placeholder="{t}Category name{/t}"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='add_cat_submit'>{t}Add{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
<div class="modal" id="rename_cat_modal" tabindex="-1" role="dialog" aria-labelledby="renameCatModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Rename the category{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" role="form">
|
|
<div class="form-group">
|
|
<input type='text' id='rename_cat_name' class="form-control" placeholder="{t}New category's name{/t}"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='rename_cat_submit'>{t}Rename{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="add_thing_modal" tabindex="-1" role="dialog" aria-labelledby="addThingModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Add an element{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form role="form">
|
|
<div class="form-group">
|
|
<input type='text' class='form-control add_thing_label' placeholder="{t}Element name{/t}"/>
|
|
<input type='number' class='form-control add_thing_nb' placeholder="{t}Nb{/t}"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type='text' class='form-control add_thing_label' placeholder="{t}Another?{/t}"/>
|
|
<input type='number' class='form-control add_thing_nb' placeholder="{t}Nb{/t}"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='add_thing_submit'>{t}Add{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
<div class="modal" id="edit_thing_modal" tabindex="-1" role="dialog" aria-labelledby="editThingModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Edit the element{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" role="form">
|
|
<div class="form-group">
|
|
<input type='text' id='edit_thing_label' class="form-control" placeholder="{t}Element name{/t}"/>
|
|
<input type='number' id='edit_thing_nb' class="form-control" placeholder="{t}Nb{/t}"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='edit_thing_submit'>{t}Modify{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="please_wait_modal" tabindex="-1" role="dialog" aria-labelledby="pleaseWaitModal" aria-hidden="true" data-keyboard='false' data-backdrop='static'>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">{t}Loading...{/t}</h2>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="progress progress-striped active">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
|
|
<span class="sr-only">{t}Loading...{/t}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Connection{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" role="form" action="login">
|
|
<div class="form-group">
|
|
<input type='text' id='login_username' class="form-control" placeholder="{t}Username{/t}" required/>
|
|
<input type='password' id='login_password' class="form-control" placeholder="{t}Password{/t}" required/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{t}Cancel{/t}</button>
|
|
<button type="button" class="btn btn-primary" id='login_submit'>{t}Connect{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="welcome_modal" tabindex="-1" role="dialog" aria-labelledby="welcomeModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">{t}Welcome{/t}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
{t escape=false}<p>
|
|
This application allows you to manage lists of things not to forget to pack in your
|
|
suitcase before your departure:
|
|
<ul>
|
|
<li>
|
|
To get started, create a suitcase, add the categories of things you will need to
|
|
pack, and add all these things to it;
|
|
</li>
|
|
<li>
|
|
Before your departure, you can then gradually check off all the things you have
|
|
already gathered and ensure you don't forget anything!
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
<p>
|
|
<strong>Note:</strong> This application has been designed to work completely locally.
|
|
The data manipulated (your suitcases, etc.) is stored only in your internet browser.
|
|
It is also possible to export/import this information in JSON format.<br/>
|
|
However, to facilitate the management of your suitcases from multiple devices, it's
|
|
possible to synchronize this information on the server. For this, you need an account,
|
|
and at this time, registrations are not open.
|
|
</p>
|
|
<p>
|
|
If you have an account, you can log in by clicking the <em>Login</em> button below.
|
|
If not, click the <em>Anonymous usage</em> button to start using the application.
|
|
</p>{/t}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" id='welcome_connect'>{t}Connect{/t}</button>
|
|
<button type="button" class="btn btn-default" id='welcome_annonymous'>{t}Anonymous usage{/t}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="{static_url path="lib/jquery.min.js"}"></script>
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<script src="{static_url path="lib/alertify/alertify.min.js"}"></script>
|
|
<script src="{static_url path="lib/bootstrap/js/bootstrap.js"}"></script>
|
|
|
|
<!-- Other libs & JavaScript scripts -->
|
|
{foreach $js as $path}
|
|
<script language="javascript" src="{$path|escape:"quotes"}"></script>
|
|
{/foreach}
|
|
|
|
<script src="{static_url path="lib/uuid.js"}"></script>
|
|
<script src="{static_url path="mysc_objects.js"}"></script>
|
|
<script src="{static_url path="main.js"}"></script>
|
|
|
|
</body>
|
|
</html>
|