<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
    <title>Olcc - Mobile Edition</title>
    <link href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="./bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="./bower_components/pick-a-color/build/1.2.3/css/pick-a-color-1.2.3.min.css" rel="stylesheet">
    <link href="./bower_components/css-hamburgers/dist/hamburgers.min.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/pinnipede.css" rel="stylesheet">
</head>
<body>

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a href="https://github.com/BrunoSpy/olcc" class="github-corner" aria-label="View source on Github" title="View source on Github" target="_blank">
                <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#000; color:#999999; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
            </a>
            <li class="sidebar-brand">
                <a href="https://github.com/BrunoSpy/olcc" target="_blank" title="Olcc - Mobile-First Edition 1.1.2">
                    Olcc NG
                </a>
            </li>
            <li class="margintop8">
                <a href="#" data-toggle="modal" data-target="#confModal">Configuration</a>
            </li>
            <li id="sidebar-tribunes">
                <a id="addTribune" href="#" data-toggle="modal" data-target="#confTribuneModal">Tribunes <span class="glyphicon glyphicon-plus"></span></a>
                <ul id="tabs-boards">

                </ul>
            </li>
            <li>
                <a href="#">Filtres</a>
                <ul id="filters">
                    <li><a href="#" id="filter-mypost"><span class="glyphicon glyphicon-remove"></span> Mes posts</a></li>
                    <li><a href="#" id="filter-answer"><span class="glyphicon glyphicon-remove"></span> Réponses</a></li>
                    <li><a href="#" id="filter-bigorno"><span class="glyphicon glyphicon-remove"></span> Bigorno<</a></li>
                    <li><a href="#" id="filter-newpost"><span class="glyphicon glyphicon-remove"></span> Nouveaux</a></li>
                    <li><a href="#" id="filter-pasplonk"><span class="glyphicon glyphicon-remove"></span> Plonk</a></li>
                    <li><a href="#" id="filter-reset"><span class="glyphicon glyphicon-off"></span> Reset</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Actions</a>
                <ul class="list-inline actions">
                    <li>
                        <a href="#" id="launchDuck" title="Lancer un \_o<"><img src="img/coin.png"></a>
                    </li>
                    <li>
                        <a href="#" id="forceRefresh" title="Rafraîchir les tribunes"><span class="glyphicon glyphicon-refresh"></span></a>
                    </li>
                    <li>
                        <a href="#" id="stopTribunes" title="Arrêter les tribunes"><span class="glyphicon glyphicon-stop"></span></a>
                    </li>
                    <li>
                        <a href="#" id="bossMode" title="Boss Mode"><span class="glyphicon glyphicon-eye-open"></span></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Raccourcis clavier</a>
                <ul class="keyboard">
                    <li><a><em>Alt+P : </em>Curseur dans le palmi</a></li>
                    <!--<li><a><em>Mode highlight : </em>Ctrl+H</a>
                        <ul>
                            <li><a><span class="glyphicon glyphicon-arrow-up"></span> : Horloge précédente</a></li>
                            <li><a><span class="glyphicon glyphicon-arrow-down"></span> : Horloge suivante</a></li>
                            <li><a><span class="glyphicon">⏎</span> : Horloge dans le palmi</a></li>
                        </ul>
                    </li>-->
                </ul>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->


    <!-- Page Content -->
    <div id="page-content-wrapper">

        <button id="menu-toggle" class="navbar-toggle fixed-top-left hamburger hamburger--arrow is-active" type="button">
            <span class="hamburger-box">
              <span class="hamburger-inner"></span>
            </span>
        </button>

        <div id="popup"></div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <div id="pinnipede">
                    </div>
                </div>

                <div class="col-xs-12">
                    <div class="fixed-bottom">
                        <form class="form-inline" id="form-message">
                            <div class="form-group focusin">
                                <div class="input-group input-wide">
                                    <div class="input-group-btn dropup">
                                        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="glyphicon glyphicon-console"></span> <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" id="tribune">
                                        </ul>
                                    </div>
                                    <input type="text" class="form-control input-sm" id="message" placeholder="\_o<">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="button" id="saveFile" title="Envoyer un fichier" data-toggle="modal" data-target="#fileModal"><span class="glyphicon glyphicon-file"></span></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <form id="form-totoz" class="form-inline">
                            <div class="form-group unfocus">
                                <div class="input-group input-wide">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></div>
                                    <input type="text" id="totoz-search" class="form-control input-sm" placeholder="Totoz...">
                                </div>
                            </div>
                        </form>
                    </div>

                </div>

            </div>
        </div>
        <div id="balltrap" style="cursor:crosshair;position:absolute;left:-50px;top:50px;width:32px;height:32px;overflow:hidden;z-index:1000"><img style="position:relative" src="img/coincoin.gif" /></div>
    </div>



    <!-- /#page-content-wrapper -->

</div>

<div id="bossframe"></div>

<!-- Modal Configuration -->
<div class="modal fade" id="confModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Configuration</h4>
            </div>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">Général</a></li>
                <li role="presentation"><a href="#sounds" aria-controls="sounds" role="tab" data-toggle="tab">Sons</a></li>
                <li role="presentation"><a href="#tribunes-list" aria-controls="tribunes" role="tab" data-toggle="tab">Tribunes</a></li>
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="general">
                    <form class="form-horizontal" id="config-form">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="config-pinni_size" class="col-sm-4 control-label">Nombre max de posts</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" id="config-pinni_size" placeholder="1000">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="config-pinni_keep"> Ne jamais effacer mes posts et leurs réponses
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-default_ua" class="col-sm-4 control-label">User-agent</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="config-default_ua">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-totoz_server" class="col-sm-4 control-label">Serveur de totoz</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="config-totoz_server">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-totoz_mode" class="col-sm-4 control-label">Affichage des totoz</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="config-totoz_mode">
                                        <option name="popup">popup</option>
                                        <option name="inline">inline</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-default_login" class="col-sm-4 control-label">Login par défaut</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="config-default_login">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-window_title" class="col-sm-4 control-label">Titre de la fenêtre</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="config-window_title">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-favicon" class="col-sm-4 control-label">Icône de la fenêtre</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="config-favicon">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <div class="checkbox">
                                        <label title="Nécessite de recharger la page">
                                            <input type="checkbox" id="config-speedaccess"> Accès rapide aux tribunes
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="config-urlpreview"> Aperçu des url au survol
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <div class="checkbox">
                                        <label title="Nécessite de recharger la page">
                                            <input type="checkbox" id="config-autocomplete"> Auto-complétion
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-boss_mode" class="col-sm-4 control-label">Boss-mode</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="config-boss_mode">
                                        <option name="Aléatoire">Aléatoire</option>
                                        <option name="Pierre Tramo">Pierre Tramo</option>
                                        <option name="J. Kerviel">J. Kerviel</option>
                                        <option name="pBpG">pBpG</option>
                                        <option name="Diçaïdor">Diçaïdor</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-plonk" class="col-sm-4 control-label">Plonk-list</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="config-plonk" placeholder="deeplop,pendu">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <div class="checkbox">
                                        <label title="Nécessite de recharger la page">
                                            <input type="checkbox" id="config-balltrap"> Balltrap
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-max_ducks" class="col-sm-4 control-label">Nombre max de canards</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" id="config-max_ducks" placeholder="15">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-balltrap_mode" class="col-sm-4 control-label">Mode de chasse</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="config-balltrap_mode">
                                        <option name="Launch on click">Launch on click</option>
                                        <option name="Auto launch">Auto launch</option>
                                        <option name="Kill on click">Kill on click</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="config-balltrap_silent"> Chasse silencieuse
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                            <button type="submit" class="btn btn-primary">Enregistrer</button>
                        </div>
                    </form>
                </div>
                <div role="tabpanel" class="tab-pane" id="sounds">
                    TODO
                    <!--
                    <form class="form-horizontal" id="form-sound">
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="config-sound_enabled"> Sons activés
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-sound_volume" class="col-sm-4 control-label">Volume</label>
                                <div class="col-sm-8">
                                    <input type="number" min="0" max="100" id="config-sound_volume">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="config-sound_volume" class="col-sm-4 control-label">Arrivée de nouveaux posts</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                            <button type="submit" class="btn btn-primary">Enregistrer</button>
                        </div>
                    </form>
                    -->
                </div>
                <div role="tabpanel" class="tab-pane" id="tribunes-list">
                    <div class="modal-body">
                        <table class="table table-hover">
                            <tbody id="config-tribunes_list">

                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" type="button" class="btn btn-primary">Fermer</button>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

<div class="modal fade" id="confTribuneModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Configuration <span id="confTribuneName"></span></h4>
            </div>
            <form class="form-horizontal" id="confTribune">
            <div class="modal-body">
                    <div class="form-group">
                        <label for="preconfTribune" class="col-sm-4 control-label">Tribunes préconfigurées</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="preconfTribune">
                                <option disabled selected value> -- Sélectionner une tribune -- </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nameTribune" class="col-sm-4 control-label">Nom</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="nameTribune">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="colorTribune" class="col-sm-4 control-label">Couleur</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control pick-a-color" id="colorTribune">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="aliasTribune" class="col-sm-4 control-label">Alias</label>
                        <div class="col-sm-8">
                            <input id="aliasTribune" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="freqTribune" class="col-sm-4 control-label">Fréquence</label>
                        <div class="col-sm-8">
                            <input id="freqTribune" class="form-control" type="text" value="30">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="loginTribune" class="col-sm-4 control-label">Login</label>
                        <div class="col-sm-8">
                            <input id="loginTribune" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="useragentTribune" class="col-sm-4 control-label">User-agent</label>
                        <div class="col-sm-8">
                            <input id="useragentTribune" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cookieTribune" class="col-sm-4 control-label">Cookie</label>
                        <div class="col-sm-8">
                            <input id="cookieTribune" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="backendTribune" class="col-sm-4 control-label">URL du backend</label>
                        <div class="col-sm-8">
                            <input id="backendTribune" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="postTribune" class="col-sm-4 control-label">URL du post</label>
                        <div class="col-sm-8">
                            <input id="postTribune" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="datapostTribune" class="col-sm-4 control-label">Données de post</label>
                        <div class="col-sm-8">
                            <input id="datapostTribune" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="slipTribune" class="col-sm-4 control-label">Type de slip</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="slipTribune">
                                <option value="1">Raw tags</option>
                                <option value="2">Tags encoded</option>
                            </select>
                        </div>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                <button type="submit" class="btn btn-primary">Enregistrer</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="fileModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Envoi de fichier</h4>
            </div>
            <form action="attach.php" id="attach-form" method="post" enctype="multipart/form-data" class="form-horizontal">
            <div class="modal-body">
                <div class="form-group">
                    <label for="attach_file" class="col-sm-4">Poster le fichier&nbsp;:</label>
                    <div class="col-sm-8">
                        <input id="attach_file" class="form-control" name="attach_file" type="file" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                <button type="submit" class="btn btn-primary">Envoyer</button>
            </div>
            </form>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./bower_components/hammerjs/hammer.min.js"></script>
<script type="text/javascript" src="./js/PreventGhostClick.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bower_components/tinycolor/dist/tinycolor-min.js"></script>
<script type="text/javascript" src="./bower_components/pick-a-color/build/1.2.3/js/pick-a-color-1.2.3.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/board.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/olcc_helpers.js"></script>
<script type="text/javascript" src="js/balltrap.js"></script>
<script type="text/javascript" src="./js/olcc.js"></script>
<script type="text/javascript" src="./js/boards_config.js"></script>

<!-- Menu Toggle Script -->
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
        $("#menu-toggle").toggleClass("is-active");
    });
</script>
</body>
</html>