MySC/templates/index.tpl

350 lines
17 KiB
Smarty
Raw Normal View History

2016-09-06 01:12:46 +02:00
<!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">
2024-01-30 18:40:00 +01:00
<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"}">
2016-09-06 01:12:46 +02:00
<!-- Bootstrap -->
2017-09-17 19:50:59 +02:00
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{static_url path="lib/alertify/css/alertify.min.css"}">
2024-01-30 18:40:00 +01:00
<link rel="stylesheet" href="{static_url path="lib/bootstrap/css/bootstrap.min.css"}">
2016-09-06 01:12:46 +02:00
2017-09-17 19:50:59 +02:00
<!-- Optional theme -->
2024-01-30 18:40:00 +01:00
<link rel="stylesheet" href="{static_url path="lib/bootstrap/css/bootstrap.superhero.min.css"}">
2016-09-07 19:06:11 +02:00
2024-01-30 18:40:00 +01:00
<link rel="stylesheet" href="{static_url path="main.css"}">
2017-09-17 19:50:59 +02:00
</head>
2016-09-06 01:12:46 +02:00
<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">
2016-09-06 01:12:46 +02:00
<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>
2016-09-06 01:12:46 +02:00
<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>
2016-09-06 01:12:46 +02:00
<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>
2016-09-06 01:12:46 +02:00
<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>
2016-09-06 01:12:46 +02:00
</ul>
</li>
2017-10-25 01:31:23 +02:00
<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>
2017-10-25 01:31:23 +02:00
<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>
2017-10-25 01:31:23 +02:00
<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>
2017-10-25 01:31:23 +02:00
</ul>
</li>
2016-09-06 01:12:46 +02:00
</ul>
</div>
</div>
</div>
<div class="container" id="content"></div>
2017-09-09 23:32:29 +02:00
<div class="modal" id="add_scase_modal" tabindex="-1" role="dialog" aria-labelledby="addSCaseModal" aria-hidden="true">
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{t}Add a suitcase{/t}</h4>
2016-09-06 01:12:46 +02:00
</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}"/>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
2017-09-09 23:32:29 +02:00
<div class="modal" id="copy_scase_modal" tabindex="-1" role="dialog" aria-labelledby="copySCaseModal" aria-hidden="true">
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{t}Copy the suitcase{/t}</h4>
2016-09-06 01:12:46 +02:00
</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}"/>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
2017-09-09 23:32:29 +02:00
<div class="modal" id="rename_scase_modal" tabindex="-1" role="dialog" aria-labelledby="renameSCaseModal" aria-hidden="true">
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{t}Rename the suitcase{/t}</h4>
2016-09-06 01:12:46 +02:00
</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}"/>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
2017-09-09 23:32:29 +02:00
<div class="modal" id="add_cat_modal" tabindex="-1" role="dialog" aria-labelledby="addCatModal" aria-hidden="true">
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{t}Add a category{/t}</h4>
2016-09-06 01:12:46 +02:00
</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}"/>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
2017-09-09 23:32:29 +02:00
<div class="modal" id="rename_cat_modal" tabindex="-1" role="dialog" aria-labelledby="renameCatModal" aria-hidden="true">
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{t}Rename the category{/t}</h4>
2016-09-06 01:12:46 +02:00
</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}"/>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
2017-09-09 23:32:29 +02:00
<div class="modal" id="add_thing_modal" tabindex="-1" role="dialog" aria-labelledby="addThingModal" aria-hidden="true">
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{t}Add an element{/t}</h4>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
<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}"/>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
2017-09-17 19:43:57 +02:00
<div class="modal" id="edit_thing_modal" tabindex="-1" role="dialog" aria-labelledby="editThingModal" aria-hidden="true">
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{t}Edit the element{/t}</h4>
2016-09-06 01:12:46 +02:00
</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}"/>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
2017-09-09 23:32:29 +02:00
<div class="modal" id="please_wait_modal" tabindex="-1" role="dialog" aria-labelledby="pleaseWaitModal" aria-hidden="true" data-keyboard='false' data-backdrop='static'>
2016-09-06 01:12:46 +02:00
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">{t}Loading...{/t}</h2>
2016-09-06 01:12:46 +02:00
</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>
2016-09-06 01:12:46 +02:00
</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">&times;</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">&times;</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>
2016-09-06 01:12:46 +02:00
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
2024-01-30 18:40:00 +01:00
<script src="{static_url path="lib/jquery.min.js"}"></script>
2016-09-06 01:12:46 +02:00
<!-- Latest compiled and minified JavaScript -->
<script src="{static_url path="lib/alertify/alertify.min.js"}"></script>
2024-01-30 18:40:00 +01:00
<script src="{static_url path="lib/bootstrap/js/bootstrap.js"}"></script>
2016-09-06 01:12:46 +02:00
<!-- Other libs & JavaScript scripts -->
{foreach $js as $path}
<script language="javascript" src="{$path|escape:"quotes"}"></script>
{/foreach}
2016-09-06 01:12:46 +02:00
<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>
2016-09-06 01:12:46 +02:00
</body>
</html>