ai-adventure-labs/server/frontend/pages/connect.html

82 lines
5.3 KiB
HTML

<center><h1 class="translate" id="title">Server list</h1></center>
<div id="loading-servers" style="width: 50%; height: 75vh; background-color: #0C0C0C; border-radius: 25px; margin-left: 25%;">
<center>
<h1 class="translate" id="enable-cookie-cnt">Enable cookies!</h1><hr/><p class="translate" id="enable-cookie-text-cnt">To work with servers, accept the cookie agreement</p>
<button type="button" class="btn btn-primary translate" data-bs-toggle="modal" data-bs-target="#cookiesModal" id="accept-cookie-show-btn">Show</button>
</center>
</div>
<div class="modal fade text-light" id="cookiesModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-img-view modal-dialog-centered modal-dialog-scrollable">
<!-- <div class="modal-dialog modal-img-view"> -->
<div class="modal-content text-light bg-dark">
<!-- <img src="https://warhammerart.com/wp-content/uploads/2021/08/Adeptus-Mechanicus.jpg"> -->
<div class="modal-header">
<h1 class="modal-title fs-5 translate" id="exampleModalLabel"><i class=\"fas fa-cookie\"></i> Accept cookies</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<center>
<img src="/assets/cookie-accept.png" width="250" height="250" />
<p class="translate" id="cookiesText">We are obliged to warn you that the AI Adventure Labs protocol client uses cookies for: authorization, storage of session keys and user consent to the use of cookies</p>
</center>
</div>
<div class="modal-footer"><center>
<button type="button" class="btn btn-primary translate" data-bs-dismiss="modal" id="accept-cookie-btn">Accept</button>
<!-- <button type="button" class="btn btn-primary">Сохранить изменения</button> -->
</center></div>
</div>
</div>
</div>
<div class="modal fade text-light" id="warningModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-img-view modal-dialog-centered modal-dialog-scrollable">
<!-- <div class="modal-dialog modal-img-view"> -->
<div class="modal-content text-light bg-dark">
<!-- <img src="https://warhammerart.com/wp-content/uploads/2021/08/Adeptus-Mechanicus.jpg"> -->
<div class="modal-header">
<h1 class="modal-title fs-5 translate" id="titleDenial"><i class="fas fa-exclamation-triangle"></i> Denial of responsibility</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<center>
<img src="/assets/warning-accept.png" width="250" height="250" />
<p class="translate" id="denialText">The server data does not belong to a centrally moderated foundation, community or individual, as well as to the developer of the software, program interface (proctocol client), or protocol developer. Any content posted on servers is posted by the server administrator and can be absolutely anything. <b>You assume all risks for the content and connect to the server at your own peril and risk!</b></p>
</center>
</div>
<div class="modal-footer"><center>
<button type="button" class="btn btn-primary translate" data-bs-dismiss="modal" id="accept-denial-btn">Accept</button>
<!-- <button type="button" class="btn btn-primary">Сохранить изменения</button> -->
</center></div>
</div>
</div>
</div>
<div class="modal fade text-light" id="connectModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-img-view modal-dialog-centered modal-dialog-scrollable">
<!-- <div class="modal-dialog modal-img-view"> -->
<div class="modal-content text-light bg-dark">
<!-- <img src="https://warhammerart.com/wp-content/uploads/2021/08/Adeptus-Mechanicus.jpg"> -->
<div class="modal-header">
<h1 class="modal-title fs-5 translate" id="titleCustomServerConnect"><i class="fas fa-wifi"></i> Connect to remote server</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<center>
<h5 class="translate" id="titleCustomConnect">Connection data</h5><hr/>
</center>
<p><b class="translate" id="addressCustomConnect">Enter address of server (without ws(s):// and port)</b></p>
<p><input class="bg-dark text-white form-control" type="text" placeholder="ai.example.org" id="custom-conn-address"></p>
<p><b class="translate" id="portCustomConnect">Enter port of server</b></p>
<p><input class="bg-dark text-white form-control" type="number" value="80" min="0" max="65535" placeholder="80" id="custom-conn-port"></p>
<p><b class="translate" id="tlsCustomConnect">Check this if server use TLS (wss:// connection):</b>
<input class="bg-dark text-white form-check-input" type="checkbox" id="custom-conn-encryption"></p>
</div>
<div class="modal-footer"><center>
<button type="button" class="btn btn-primary translate" data-bs-dismiss="modal" id="custom-connect-btn" disabled>Connect</button>
<!-- <button type="button" class="btn btn-primary">Сохранить изменения</button> -->
</center></div>
</div>
</div>
</div>