front_idill/src/index.html
author bastiena
Mon, 24 Sep 2012 13:21:35 +0200
changeset 121 a4caeb0f29bb
parent 79 9eff85166868
permissions -rw-r--r--
Front IDILL: config files updated with credits path

<!--
/*
* This file is part of the TraKERS\Front IDILL package.
*
* (c) IRI <http://www.iri.centrepompidou.fr/>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/

/*
 * Projet : TraKERS
 * Module : Front IDILL
 * Fichier : index.html
 * 
 * Auteur : alexandre.bastien@iri.centrepompidou.fr
 * 
 * Fonctionnalités : Permet d'accéder au Front IDILL en mode d'interaction souris/Kinect.
 */
-->

<!doctype html>
<html>
    <head>
        <!-- On inclut les styles et les scripts utilisés. -->
        <title>IDILL</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="./mosaic/css/reset.css" />
        <script type="text/javascript" src="../lib/less-1.3.0.min.js"></script>
        <script type="text/javascript" src="../lib/underscore-min.js"></script>
        <script type="text/javascript" src="../lib/jquery.min.js"></script>
    </head>
    
    <body>
        <!-- Scripts principaux. -->
        <script type="text/javascript">
            function loadMenu(textElements)
            {
                //Si on est sur une tablette, on passe directement dans le mode d'interaction tablette.
                if('ontouchstart' in document.documentElement)
                {
                    window.location.replace('./index_souris.html');
                }
                
                var form = "<div id='choice'><p id='caution'>" + textElements.caution + "</p><input id='MI' type='button' /><br ><input id='KI' type='button' /></div>";
                
                $('body').css({
                'background-image': 'url("./img/background.png")',
                'background-repeat': 'repeat'
                });
                $('body').append(form);
                
                $('#caution').css(
                {
                    color: '#FFF',
                    'font-size': '20px'
                });
                $('#MI').attr('value', textElements.mouse);
                $('#MI').css(
                {
                    'padding': '30px',
                    'font-size': '20px'
                
                }).click(function()
                {
                    window.location.replace('./index_souris.html');
                });
                $('#KI').attr('value', textElements.kinect);
                $('#KI').css(
                {
                    'padding': '30px',
                    'font-size': '20px'
                }).click(function()
                {
                    window.location.replace('./index_kinect.html');
                });
                
                $('#choice').css(
                {
                    position: 'absolute',
                    width: '60%'
                });
                $('#choice').css(
                {
                    left: ($(window).width() - $('#choice').width()) / 2,
                    'text-align': 'center',
                    top: ($(window).height() - $('#choice').height()) / 2
                });
            }
            
            //Si la page a chargé, on charge le menu de sélection de mode.
            $(document).ready(function ()
            {
                //Langues gérées.
                var langs = ["fr", "en"];
                var lang = navigator.language;
                
                //Si la langue n'est pas gérée, on met l'anglais pas défaut.
                if(langs.indexOf(lang) == -1)
                {
                    lang = "en";
                }
                
                var path = 'lang/' + lang + '.json';
                var textElements;
                $.getJSON(path, function(data)
                {
                    textElements = data.choice;
                    console.log(textElements);
                    loadMenu(textElements);
                });
            });
        </script>
    </body>
</html>