<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OH!</title>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div class="modal" id="modalTerms">
        <article class="modal-container">
            <header class="modal-container-header">
                <h1 class="modal-container-title">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
                        <path fill="none" d="M0 0h24v24H0z" />
                        <path fill="currentColor" d="M14 9V4H5v16h6.056c.328.417.724.785 1.18 1.085l1.39.915H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8v1h-7zm-2 2h9v5.949c0 .99-.501 1.916-1.336 2.465L16.5 21.498l-3.164-2.084A2.953 2.953 0 0 1 12 16.95V11zm2 5.949c0 .316.162.614.436.795l2.064 1.36 2.064-1.36a.954.954 0 0 0 .436-.795V13h-5v3.949z" />
                    </svg>
                    Terms and Conditions
                </h1>
            </header>
            <section class="modal-container-body rtf">
                <h2>By pressing "Start," you agree to the following terms:</h2>
                <ul>
                    <li>You confirm that you are over 16 years old.</li>
                    <li>You agree that the website is not responsible for anything that happens during your use of the platform.</li>
                    <li>You must not share any personal data while using this website.</li>
                    <li>You accept that all actions and communications within the platform are your sole responsibility.</li>
                    <li>The website disclaims any liabilities for damages, losses, or incidents resulting from your use of the platform, including chat and video interactions.</li>
                    <li>You agree to use the platform responsibly and respectfully toward others.</li>
                    <li>Violations of these terms may result in suspension or termination of your access to the platform.</li>
                </ul>
    
                <h3>Guidelines for Safe Use:</h3>
                <ul>
                    <li>Do not share sensitive or confidential information.</li>
                    <li>Report any inappropriate behavior or content immediately.</li>
                    <li>Maintain respectful and constructive communication with other users.</li>
                </ul>
    
                <p>By proceeding, you acknowledge and accept the above terms and conditions. Failure to comply with these terms may result in restricted access to the platform.</p>
            </section>
            <footer class="modal-container-footer">
                <button id="accept" class="button is-primary">Accept and Start</button>
            </footer>
        </article>
    </div>
    
    <div class="container">

            <section class="upSection">
                <div class="video-container peerVideo-User">
                    <video id="remoteVideo" autoplay></video>
                    <span class="video-label">Partner</span>
                </div>

                <div class="video-container myVideo">
                    <video id="localVideo" autoplay muted></video>
                    <span class="video-label">You</span>
                </div>
            </section>
            
            <section class="downSection">
                
                <div class="chat-container">
                    <div class="messagess">
                        <ul id="messages" >

                        </ul>
                    </div>
                    <div class="chat-input">
                        <input type="text" id="message" placeholder="Type your message...">
                        <button id="sendMessage" class="btnsend">Send</button>
                    </div>
                </div>
                <div class="controls">
                    <button id="joinRoom" class="btn btnStart">Join Room</button>
                    <button id="hangup" disabled class="btn btn-next"><span>Next</span></button>
                    <button id="stop" disabled class="btn btn-3">Stop</button>  
                </div>
            </section>
    </div>

    <script src="./script.js"></script>
</body>
</html>
