<!doctype html>
<html lang=fr>
<head>
<meta charset=UTF-8>
<title>TMN - Network</title>
<link rel=icon href=../logo_sans_background.svg type=image/svg>
<meta name=viewport content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel=stylesheet>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css>
<style>.navbar{background-color:transparent;position:fixed;top:0;left:0;height:100%;width:250px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-top:20px;z-index:1000}.right-container h3{text-align:left;margin-bottom:15px;color:#333}#discussions-container{max-height:500px;overflow-y:auto;scrollbar-width:thin}.search-bar{margin-bottom:10px}.search-bar input{width:calc(100% - 20px);padding:8px;margin:10px;border:1px solid #ccc;border-radius:4px}.discussion-item{display:flex;align-items:center;margin-bottom:15px;padding:10px;background:#fafafa;border-radius:8px;transition:background-color .3s;cursor:pointer}.discussion-item:hover{background-color:#f1f1f1}@media (max-width:768px){.navbar{width:100%;height:80px;flex-direction:row;justify-content:space-between}}.logo{position:absolute;top:50px;left:50px;width:150px;height:150px;display:block;margin:0 auto;transition:transform 1s ease,filter .3s ease}.logo:hover{transform:rotate(360deg);filter:brightness(2)}.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;height:70%}.menu li{width:100%;text-align:center}.menu a{display:flex;align-items:center;justify-content:center;padding:15px;text-decoration:none;background-color:transparent;color:#fff;font-size:16px;transition:background-color .3s,color .3s;border-radius:50px}.menu a:hover{background-color:#f1f1f1;color:#673ab7}.menu a i{margin-right:10px;font-size:20px}body{background:linear-gradient(50deg,#5b48ff,#000,#2471a3);background-size:600% 600%;animation:backgroundGradient 30s ease infinite;margin:0;padding-left:250px;padding-top:0}@keyframes backgroundGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.layout{display:grid;grid-template-columns:1fr 1fr 1fr;height:calc(100vh - 80px);gap:10px;padding:20px}.container{background-color:#e0e0e0;border-radius:10px;padding:20px;box-sizing:border-box;box-shadow:0 2px 10px rgba(0,0,0,.1);height:100%;overflow-y:auto}.right-container h3{text-align:left;margin-bottom:15px;color:#333}.discussion-item{display:flex;align-items:center;justify-content:flex-start;margin-bottom:15px;padding:10px;background:#fafafa;border-radius:8px;transition:background-color .3s;cursor:pointer}.discussion-item:hover{background-color:#f1f1f1}.discussion-link{display:flex;align-items:center;text-decoration:none;width:100%}.avatar{width:50px;height:50px;border-radius:50%;margin-right:15px;border:2px solid #ddd}.discussion-item p{margin:0;font-weight:700;color:#333}@media (max-width:768px){.navbar{width:100%;height:80px;flex-direction:row;justify-content:space-between;box-shadow:none}.logo{font-size:16px}.menu{flex-direction:row;width:auto}.menu li{margin:0 10px}.menu a{font-size:14px}body{padding-left:0}}#btnform button{width:200px;height:40px;background:linear-gradient(90deg,#673ab7,#e91e63);font-weight:700;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background .3s}#btnform button:hover{background:linear-gradient(90deg,#e91e63,#673ab7)}.discord-link{text-align:center;margin-top:20px}.discord-button{background-color:#7289da;color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;font-size:16px;font-weight:700;transition:background-color .3s ease}.discord-button:hover{background-color:#5a6fb2}.banner{background-color:#333;color:#fff;text-align:center;padding:15px;font-size:18px;position:fixed;top:0;left:0;width:100%;z-index:9999;display:flex;justify-content:space-between;align-items:center}.banner button{background:0 0;border:none;color:#fff;font-size:30px;cursor:pointer;padding:0;margin-right:50px}.banner button:hover{color:#ccc}.banner-text{display:inline-block;white-space:nowrap;padding-right:100%;animation:scrollText 10s linear infinite alternate}@keyframes scrollText{50%{transform:translateX(27%)}300%{transform:translateX(-80%)}}.chat-container{max-width:600px;margin:10px auto;background:#2f3136;border-radius:8px;padding:15px;box-shadow:0 2px 5px rgba(0,0,0,.1);height:350px;overflow-y:auto;font-size:.9em;color:#dcddde}.chat-messages{display:flex;flex-direction:column;gap:5px}.chat-message{display:flex;align-items:center;padding:8px;border-radius:5px;background-color:#36393f;max-width:100%;word-wrap:break-word}.chat-message.right{justify-content:flex-end;background-color:#4f545c}.chat-message.left{justify-content:flex-start;background-color:#2f3136}.message{max-width:100%;padding:8px;border-radius:5px;background-color:#fff;color:#000;word-wrap:break-word}.timestamp{margin-left:8px;font-size:.8em;color:#777}.chat-input{display:flex;margin-top:10px}.chat-input input{flex:1;padding:8px;border:1px solid #ddd;border-radius:5px;font-size:.9em;background-color:#40444b;color:#dcddde}.chat-input button{padding:8px;background-color:#7289da;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-left:8px;font-size:.9em}.chat-input button:hover{background-color:#5b6eae}</style>
</head>
<body>
<div style=display:none id=important-banner class=banner>
<center><span class=banner-text>Important: Le site est encore en développement, veuillez nous partager les erreurs que vous rencontrerez.</span></center>
<button onclick=closeBanner()>x</button>
</div>
<script>function closeBanner(){document.getElementById("important-banner").style.display="none"}</script>
<nav class=navbar>
<div><img class=logo src=logo_sans_background.png></div>
<ul class=menu>
<li class=align-menu><a href=/app/compte.php><i class="fa fa-user"></i> Mon compte</a></li>
<li class=align-menu><a href=/app/contact.php><i class="fa fa-question-circle"></i> Besoin d'aide ?</a></li>
<li class=align-menu><a href=/app/chat.php><i class="fa fa-comment-dots"></i> Chat</a></li>
<li class=align-menu><a href=/app/dashboard><i class="fa fa-cogs"></i> Administration</a></li>
<li class=align-menu><a href=/logout.php><i class="fa fa-sign-out-alt"></i> Déconnexion</a></li>
</ul>
</nav>
<div class=layout>
<div class=container>
<h3>Accueil :</h3>
<p>Vous êtes nouveaux ici ?<br>Pour commencer, créez une nouvelle <br>discussion !</p>
<div class=found-user>
<div id=result class=hidden>
<div class=found-user id=btnform>
<?php if ($other_user): ?>
<button id=btnform onclick='window.location.href="/app/private/chat.php?user=<?php echo urlencode($other_user); ?>&conv_id=<?php echo $conv_id; ?>"'>Commencer une discussion</button>
<?php else: ?>
<p>Aucun autre utilisateur en ligne trouvé pour le moment.</p>
<?php endif; ?>
</div>
</div>
<div class=success-message id=success-message style=display:none></div>
<div class=error-message id=error-message style=display:none></div>
<div class=chat-container id=chat-messages style=display:none>
</div>
<div class=chat-input style=display:none>
<form action=send_message.php method=post>
<input name=message placeholder="Écrire un message..." required>
<button type=submit>Envoyer</button>
</form>
</div>
</div>
</div>
<div class="container center-container">
<h3>Actualitées TMN :</h3>
<div id=infos-container></div>
<br><div class=discord-link>
<a href=https://discord.gg/8nXtRkWS3j target=_blank class=discord-button>
Rejoindre notre Discord
</a>
</div>
</div>
<div class="container right-container">
<h3>Discussions récentes :</h3>
<div class=search-bar>
<input id=searchUser placeholder="Rechercher un utilisateur...">
</div>
<div id=discussions-container></div>
</div>
</div>
<center><footer style=color:#fff>TheMaskedNetwork &#169; - 2024</footer></center>
<script>setTimeout((function(){var e=new XMLHttpRequest;e.open("GET","info.php",!0),e.onreadystatechange=function(){4==e.readyState&&200==e.status&&(document.getElementById("infos-container").innerHTML=e.responseText)},e.send()}),200)</script>
<script>function fetchDiscussions(e=""){const n=new XMLHttpRequest;n.open("GET",`fetch_discussions.php?query=${encodeURIComponent(e)}`,!0),n.onreadystatechange=function(){4===n.readyState&&200===n.status&&(document.getElementById("discussions-container").innerHTML=n.responseText)},n.send()}document.getElementById("searchUser").addEventListener("input",(function(){fetchDiscussions(this.value)})),fetchDiscussions()</script>
<script>function fetchUser(){var e=new XMLHttpRequest;e.open("GET","search_user.php",!0),e.onload=function(){if(200===e.status){var r=JSON.parse(e.responseText),t=document.getElementById("result");if(document.getElementById("loader").classList.add("hidden"),t.classList.remove("hidden"),r.error)console.error(r.error);else{var n=t.querySelector(".found-user");r.user?n.innerHTML="<h2>Utilisateur trouvé: "+r.user+"</h2><button onclick=\"window.location.href='/app/private/chat.php?user="+encodeURIComponent(r.user)+"'\">Rejoindre la discussion</button>":n.innerHTML="<p>Aucun autre utilisateur en ligne trouvé pour le moment.</p>"}}else console.error("Erreur lors de la recherche d'utilisateur")},e.send()}fetchUser(),setInterval(fetchUser,15e3),document.getElementById("menu-icon").onclick=function(){var e=document.getElementById("menu");"flex"===e.style.display?e.style.display="none":e.style.display="flex"}</script>
</body>
</html>