Untitled

<!DOCTYPE html>

<html>

<head>
  <title>USpeak - Chat en ligne</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<div id="header">

	<div>
        <img src="logo site uspeak.png" alt="img_png" height="80px">
    </div>

    <!--Connexion-->
	<div id="connexion">

        <form class="form-inline" method="post" action="verif.php">
            <ul><h3>Connectez-vous</h3><label for="mail">Adresse email</label>
            <input type="text" name="mail">
            <label for="mdp"> Mot de passe </label>
            <input type="password" name="mdp" id="mdp">
            <input type="submit" name="Valider" value="Se connecter">
            </ul>
        </form>

    </div>

</div>

    <body>

        <div class="container">

            <div class="row">

                <div class="col-sm-8 colorblue">

                <?php

                        // Connexion à la base de données
                        $servername = "localhost";
                        $username = "Diridium";
                        $password = "ae86trueno";
                        $nom_db = "chatform";
                        // On tente de se connecter
                        try{
                            $bdd = new PDO("mysql:host=$servername;dbname=$nom_db",$username,$password);
                        }
                        //Message d'erreur si la connection foire
                        catch(Exception $e){
                            die('Erreur : '.$e->getMessage());
                        }

                        // Récupération des 10 derniers messages
                        $reponse = $bdd->query('SELECT pseudo, message, date_message FROM minichat ORDER BY ID DESC LIMIT 0, 15');

                        // Affichage de chaque message (toutes les données sont protégées par htmlspecialchars)
                        ?>
                        <div id="fil"> <?php
                        while ($donnees = $reponse->fetch()){
                            echo ($donnees['date_message']) . '<p><strong>' .htmlspecialchars($donnees['pseudo']) . '</strong> : ' . htmlspecialchars($donnees['message']) . '</p>';
                        }
                        $reponse->closeCursor();

                        ?>

                </div>

        <!--Envoi de message-->
        <br><br><br><br><br>

        <form id="conv " action="post.php" method="post">
            <label for="message">Message</label> :
            <input type="text" class="form-control" id="usr" placeholder="Entrer un message">
            <div class="col-xs-8">

            </div>

        </form>

        </div>

            <!--Boutons-->
            <div class="col-sm-4 colorblue2">

            <div class="panel-group" id="accordion">

                <!--Amis-->
                <input type="Button" class="btn btn-default btn-sm" value="Amis" data-toggle="collapse" data-target="#1">

                <div id="1" class="collapse textwhite" data-parent="accordion">

                <p id="rcorners1">Amis</p>
                - Augustin<br>
                - Lucas<br>
                - Paul<br><br>
                </div>

                <!--Themes-->
                <input type="Button" class="btn btn-default btn-sm" value="Thèmes" data-toggle="collapse" data-target="#2">

                <div id="2" class="collapse textwhite" data-parent="accordion">

                <p id="rcorners1">Thematiques</p>
                - Aviation<br>
                - Photographie<br>
                - Gastronomie<br><br>
                </div>

                <!--Vidéos-->
                <input type="Button" class="btn btn-default btn-sm" value="Vidéos" data-toggle="collapse" data-target="#3">

                <div id="3" class="collapse textwhite" data-parent="accordion">

                <p id="rcorners1">Vidéos</p>
                - Regardez une vidéo youtube<br>

                </div>


                <!--Paramètres-->
                <input type="Button" class="btn btn-default btn-sm" value="Parametres" data-toggle="collapse" data-target="#4">

                <div id="4" class="collapse textwhite" data-parent="accordion">

                <p id="rcorners1">Parametres</p>
                - A propos<br>
                - Deconnexion<br>
                - Autre<br><br>
                </div>

            </div>

            <!--Gitanerie-->
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

            </div>

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

</html>