<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="Vues/css/bootstrap.css">
    <link rel="stylesheet" href="Vues/css/style.css">

    <title>Tutoriel</title>
</head>

<!-- MENU NAV #FFD700 -->

<body >
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <div id="logo">
                    <img id="logo" src="Vues/photos/logo.png">
                </div>
                <a class="nav-item nav-link active" href="index.php">Accueil</a>
            </div>
        </div>
    </nav>
    <br>
    <section id="accueil2">
        <div id="presentation">
            <p class="soustitre"><strong>TUTORIEL</strong></p>
            <p><strong>Comment faire mon propre panorama? </strong></p>
        </div>
    </section>
    <br/>
    <br/>
    <br/>

    <section id="etape1">
        <div>
            <p class="soustitre"><strong>ETAPE 1 : Créer un élément</strong></p>
            <p><strong> Pour créer un panneau, il faut appuyer sur la touche : P .</strong></p>
            <p><strong> Pour créer un point de navigation (flèche), il faut appuyer sur la touche : N .</strong></p>
            <p><strong> NOTE : Si le panneau n'apparait pas, regarder derrière et autour de vous !</strong></p>
        </div>
    </section>
    <br/><br/><br/>
    <section id="etape2">
        <div >
        <p class="soustitre"><strong>ETAPE 2 : Placer son élément</strong></p>
        <p><strong> Pour déplacer un panneau ou un point de navigation, il suffit d'appuyer sur les flèches droite et gauche.</strong></p>
        <p><strong> On peut ensuite changer d'axe en appuyant sur la touche A , puis les flèches du clavier déplacerons l'objet sur un axe différent.</strong></p>
        <p><strong> NOTE : Une fois que l'élément est placé, il n'est pas possible de revenir à l'élément précédent !</strong></p>
        </div>
    </section>
    <br/>
    <br/>
    <br/>
    <section id="etape3">
        <div>
        <p class="soustitre"><strong>ETAPE 3 : Passer à l'édition de la photo suivante</strong></p>
        <p><strong> Pour passer à la photo suivante, appuyer sur la touche : J .</strong></p>
        <p><strong> NOTE : Une fois que vous êtes passé à la photo suivante, vous ne pouvez pas revenir à la photo précédente !</strong></p>
        </div>
    </section>
    <br/>
    <br/>
    <br/>
    <section id="etape4">
        <div>
        <p class="soustitre"><strong>AIDE-MEMOIRE</strong></p>
        <p><strong> A tout moment, pour vous rappeler les touches utiles, appuyer sur la touche H !</strong></p>
        <p><strong> Ca y est, vous êtes formé !</strong></p>
        </div>
    </section>
    <br/><br/><br/>
    <section id="etape5">

                <form method="POST">
                    <div id="boutonCreer">
                        <button name="action" value="formulaireAjoutPhotos" type="submit" class="btn btn-warning"><strong>Créer mon propre panorama</strong></button>
                    </div>
                </form>


            </div>
    </section>

    <footer><p>FERRERE Clément - MOMMALIER Victor - PONCET Clara - VELUT Lucile </p> |<p> DUT Informatique de Clermont-Ferrand </p></footer>
</body>
</html>